-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d6af038
commit baf8e64
Showing
27 changed files
with
1,261 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { NgModule } from '@angular/core'; | ||
| import { RouterModule, Routes } from '@angular/router'; | ||
|
|
||
| import { PopoverComponent } from './popover.component'; | ||
|
|
||
|
|
||
| const routes: Routes = [ | ||
| { | ||
| path: '', | ||
| component: PopoverComponent, | ||
| }, | ||
| ]; | ||
|
|
||
| @NgModule({ | ||
| imports: [RouterModule.forChild(routes)], | ||
| exports: [RouterModule], | ||
| }) | ||
| export class PopoverRoutingModule { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <div style="max-width: 200px; height: 600px;" class="demo-popover"> | ||
| <select | ||
| [(ngModel)]="example1select" | ||
| (change)="change()" | ||
| > | ||
| <option value="top">Top</option> | ||
| <option value="right">Right</option> | ||
| <option value="bottom">Bottom</option> | ||
| <option value="left">Left</option> | ||
| </select> | ||
| <button | ||
| tsPopoverTrigger="popper1" | ||
| [position]="example1select" | ||
| [popover]="popper1" | ||
| [defaultOpened]="false" | ||
| style="margin: 200px 250px;" | ||
| [id]="myId" | ||
| (popoverOnShown)="popoverOnShown($event)" | ||
| (popoverOnHidden)="popoverOnHidden($event)" | ||
| >Click me!</button> | ||
| </div> | ||
|
|
||
| <ts-popover #popper1> | ||
| <h1>My Title</h1> | ||
| <p>Other random content.</p> | ||
| </ts-popover> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { | ||
| Component, | ||
| ElementRef, | ||
| } from '@angular/core'; | ||
| import { FormControl } from '@angular/forms'; | ||
| import { | ||
| TsPopoverComponent, | ||
| TsPopoverPosition, | ||
| } from '@terminus/ui/popover'; | ||
|
|
||
| @Component({ | ||
| selector: 'demo-popover', | ||
| templateUrl: './popover.component.html', | ||
| }) | ||
| export class PopoverComponent { | ||
| public myform = new FormControl('bottom'); | ||
| public positions = ['bottom', 'top', 'left', 'right']; | ||
| public myId = 'custom-id'; | ||
| example1select: TsPopoverPosition = 'right'; | ||
| public popoverOnShown(event) { | ||
| console.log('popper on shown emitted event: ', event); | ||
| } | ||
| public popoverOnHidden(event) { | ||
| console.log('popover on hidden emitted event: ', event); | ||
| } | ||
|
|
||
| constructor(private elem: ElementRef) { | ||
| } | ||
|
|
||
| public change() { | ||
| setTimeout(() => { | ||
| this.elem.nativeElement.querySelector('.ts-popover-trigger').dispatchEvent(new Event('click')); | ||
| }, 100); | ||
|
|
||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { CommonModule } from '@angular/common'; | ||
| import { NgModule } from '@angular/core'; | ||
| import { | ||
| FormsModule, | ||
| ReactiveFormsModule, | ||
| } from '@angular/forms'; | ||
| import { TsOptionModule } from '@terminus/ui/option'; | ||
| import { TsPopoverModule } from '@terminus/ui/popover'; | ||
| import { TsSelectionListModule } from '@terminus/ui/selection-list'; | ||
|
|
||
| import { PopoverRoutingModule } from './popover-routing.module'; | ||
| import { PopoverComponent } from './popover.component'; | ||
|
|
||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| CommonModule, | ||
| FormsModule, | ||
| PopoverRoutingModule, | ||
| ReactiveFormsModule, | ||
| TsPopoverModule, | ||
| TsSelectionListModule, | ||
| TsOptionModule, | ||
| ], | ||
| declarations: [ | ||
| PopoverComponent, | ||
| ], | ||
| }) | ||
| export class PopoverModule {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| { | ||
| "ngPackage": { | ||
| "lib": { | ||
| "entryFile": "src/public-api.ts", | ||
| "umdModuleIds": { | ||
| "@terminus/ngx-tools": "terminus.ngxTools", | ||
| "@terminus/ngx-tools/browser": "terminus.ngxTools.browser", | ||
| "@terminus/ngx-tools/type-guards": "terminus.ngxTools.type-guards", | ||
| "@terminus/ngx-tools/utilities": "terminus.ngxTools.utilities", | ||
| "popper.js/dist/esm/popper.js": "Popper" | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| /** | ||
| * Define positions that popover accepts | ||
| */ | ||
| export type TsPopoverPosition | ||
| = | ||
| | 'top' | ||
| | 'bottom' | ||
| | 'left' | ||
| | 'right' | ||
| | 'top-start' | ||
| | 'bottom-start' | ||
| | 'left-start' | ||
| | 'right-start' | ||
| | 'top-end' | ||
| | 'bottom-end' | ||
| | 'left-end' | ||
| | 'right-end' | ||
| | 'auto' | ||
| | 'auto-start' | ||
| | 'auto-end' | ||
| ; | ||
|
|
||
| /** | ||
| * List of accepted positions | ||
| */ | ||
| export const tsPopoverPositions = [ | ||
| 'top', | ||
| 'bottom', | ||
| 'left', | ||
| 'right', | ||
| 'top-start', | ||
| 'bottom-start', | ||
| 'right-start', | ||
| 'top-end', | ||
| 'bottom-end', | ||
| 'left-end', | ||
| 'right-end', | ||
| 'top-end', | ||
| 'bottom-end', | ||
| 'left-end', | ||
| 'right-end', | ||
| 'auto', | ||
| 'auto-start', | ||
| 'auto-end', | ||
| ]; | ||
|
|
||
| /** | ||
| * A class of defined positions. | ||
| */ | ||
| export class TsPopoverPositions { | ||
| public static Top: TsPopoverPosition = 'top'; | ||
| public static Bottom: TsPopoverPosition = 'bottom'; | ||
| public static Left: TsPopoverPosition = 'left'; | ||
| public static Right: TsPopoverPosition = 'right'; | ||
| public static TopStart: TsPopoverPosition = 'top-start'; | ||
| public static BottomStart: TsPopoverPosition = 'bottom-start'; | ||
| public static LeftStart: TsPopoverPosition = 'left-start'; | ||
| public static RightStart: TsPopoverPosition = 'right-start'; | ||
| public static TopEnd: TsPopoverPosition = 'top-end'; | ||
| public static BottomEnd: TsPopoverPosition = 'bottom-end'; | ||
| public static LeftEnd: TsPopoverPosition = 'left-end'; | ||
| public static RightEnd: TsPopoverPosition = 'right-end'; | ||
| public static Auto: TsPopoverPosition = 'auto'; | ||
| public static AutoStart: TsPopoverPosition = 'auto-start'; | ||
| public static AutoEnd: TsPopoverPosition = 'auto-end'; | ||
| } | ||
|
|
||
| /** | ||
| * Define Trigger type. | ||
| */ | ||
| export type TsTrigger = 'click'; | ||
|
|
||
| /** | ||
| * A class of Triggers. | ||
| */ | ||
| export class TsTriggers { | ||
| public static CLICK: TsTrigger = 'click'; | ||
| } | ||
|
|
||
| /** | ||
| * Our defined option interface. | ||
| */ | ||
| export interface TsPopoverOptions { | ||
| ariaRole?: string; | ||
| trigger?: TsTrigger; | ||
| placement?: TsPopoverPosition; | ||
| popperModifiers?: {}; | ||
| styles?: Object; | ||
| } |
Oops, something went wrong.