@factor_ec/ui 1.0.9 → 1.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/display/avatar/avatar.component.mjs +1 -1
- package/esm2020/lib/navigation/list/list.component.mjs +17 -4
- package/esm2020/lib/navigation/navbar/navbar.component.mjs +10 -8
- package/esm2020/lib/navigation/searchbox/searchbox.component.mjs +8 -5
- package/esm2020/lib/navigation/toolbar/toolbar.component.mjs +8 -6
- package/fesm2015/factor_ec-ui.mjs +38 -18
- package/fesm2015/factor_ec-ui.mjs.map +1 -1
- package/fesm2020/factor_ec-ui.mjs +38 -18
- package/fesm2020/factor_ec-ui.mjs.map +1 -1
- package/lib/navigation/list/list.component.d.ts +3 -1
- package/lib/navigation/navbar/navbar.component.d.ts +3 -3
- package/lib/navigation/searchbox/searchbox.component.d.ts +2 -2
- package/lib/navigation/toolbar/toolbar.component.d.ts +2 -2
- package/package.json +1 -1
|
@@ -619,7 +619,15 @@ class ListComponent {
|
|
|
619
619
|
this.change = new EventEmitter();
|
|
620
620
|
this.iconNameField = 'iconName';
|
|
621
621
|
this.labelField = 'label';
|
|
622
|
+
this.class = '';
|
|
622
623
|
}
|
|
624
|
+
get hostClasses() {
|
|
625
|
+
return [
|
|
626
|
+
'ft-list',
|
|
627
|
+
this.class
|
|
628
|
+
].join(' ');
|
|
629
|
+
}
|
|
630
|
+
;
|
|
623
631
|
getComponentType(item) {
|
|
624
632
|
let type = 'text';
|
|
625
633
|
if (!item.url || item.url.match(/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/)) {
|
|
@@ -646,10 +654,10 @@ class ListComponent {
|
|
|
646
654
|
}
|
|
647
655
|
}
|
|
648
656
|
ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListComponent, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
649
|
-
ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListComponent, selector: "ft-list", inputs: { iconCollection: "iconCollection", iconNameField: "iconNameField", iconPath: "iconPath", labelField: "labelField", items: "items" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"switch; context: { children: items }\"></ng-container>\n<ng-template #switch let-children=\"children\" let-level=\"level\">\n <ng-container *ngFor=\"let item of children\" [ngSwitch]=\"item.type\">\n <ng-container *ngSwitchCase=\"'collapsible'\">\n <ng-container *ngTemplateOutlet=\"collapsible; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'header'\">\n <ng-container *ngTemplateOutlet=\"header; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container *ngTemplateOutlet=\"action; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n<ng-template #action let-item=\"item\">\n <ng-container [ngSwitch]=\"getComponentType(item)\">\n <button *ngSwitchCase=\"'button'\" type=\"button\" matRipple class=\"list__item\" [ngClass]=\"item.class\"
|
|
657
|
+
ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListComponent, selector: "ft-list", inputs: { iconCollection: "iconCollection", iconNameField: "iconNameField", iconPath: "iconPath", labelField: "labelField", items: "items", class: "class" }, outputs: { change: "change" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"switch; context: { children: items }\"></ng-container>\n<ng-template #switch let-children=\"children\" let-level=\"level\">\n <ng-container *ngFor=\"let item of children\" [ngSwitch]=\"item.type\">\n <ng-container *ngSwitchCase=\"'collapsible'\">\n <ng-container *ngTemplateOutlet=\"collapsible; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'header'\">\n <ng-container *ngTemplateOutlet=\"header; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container *ngTemplateOutlet=\"action; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n<ng-template #action let-item=\"item\">\n <ng-container [ngSwitch]=\"getComponentType(item)\">\n <button *ngSwitchCase=\"'button'\" type=\"button\" matRipple class=\"ft-list__item\" [ngClass]=\"item.class\"\n (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n </button>\n <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"ft-active\" matRipple class=\"ft-list__item\"\n [ngClass]=\"item.class\" (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n </a>\n </ng-container>\n</ng-template>\n<ng-template #collapsible let-item=\"item\">\n <button type=\"button\" matRipple class=\"ft-collapsible-header ft-list__item\"\n [ngClass]=\"{ 'ft-show': item.metadata.show }\" (click)=\"toggleCollapsible(item)\">\n <div>\n <ft-icon class=\"ft-item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\"\n [collection]=\"iconCollection\" [path]=\"iconPath\"></ft-icon>\n <div class=\"ft-item__label\">{{ item[labelField] }}</div>\n <ft-icon class=\"ft-item__toggle\" name=\"angle-right\" size=\"1\"></ft-icon>\n </div>\n </button>\n <div class=\"ft-collapsible\" [ngClass]=\"{ 'ft-show': item.metadata?.show }\" *ngIf=\"item.children\">\n <ng-container *ngTemplateOutlet=\"switch; context: { children: item.children }\"></ng-container>\n </div>\n</ng-template>\n<ng-template #header let-item=\"item\">\n <div class=\"header\" [ngClass]=\"item.class\">\n {{ item[labelField] }}\n </div>\n</ng-template>\n<ng-template #text let-item=\"item\">\n <div class=\"d-flex align-items-center\">\n <ft-icon class=\"item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\" [collection]=\"iconCollection\"\n [path]=\"iconPath\"></ft-icon>\n <div class=\"item__label\">{{ item[labelField] }}</div>\n </div>\n</ng-template>", styles: [":host{--background-color: var(--background-color, #f8f9fa);--background-color-hover: rgba(0, 0, 0, .03);--background-color-active: rgba(var(--primary-rgb), .1);--text-color: #333;--text-color-hover: var(--primary);--text-color-active: var(--primary);display:block;overflow:auto}.ft-list__item{border:0;box-sizing:border-box;color:var(--text-color);background-color:var(--background-color);cursor:pointer;display:flex;outline:none;transition:background-color .3s,color .3s;text-align:left;padding:.75rem 1.5rem;width:100%}@media (min-width: var(--breakpoint-md)){.ft-list__item{width:100%}}.ft-list__item:hover{text-decoration:none}.ft-list__item:hover:not(.active){--background-color: var(--background-color-hover);--text-color: var(--text-color-hover)}.ft-list__item.ft-active,.ft-list__item:active{--background-color: var(--background-color-active);--text-color: var(--text-color-active)}.ft-list__item>div{max-width:100%}.ft-list__item .ft-item__icon{font-size:1.5rem}.ft-list__item .ft-item__icon+.ft-item__label{display:block;margin-left:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ft-list__item .ft-item__icon,.ft-list__item .ft-item__label{transition:margin-left .3s}.ft-list__item .ft-item__toggle{transition:transform .2s}.ft-list__item .ft-item__label{flex-grow:1}.ft-collapsible{overflow:hidden;transition:max-height .2s;max-height:100vh;background-color:#00000003;box-shadow:inset 0 4px 9px -7px #0006}.ft-collapsible-header{font-weight:500}.ft-collapsible-header>div{display:flex;align-items:center;flex-grow:1}.ft-collapsible-header.ft-show .ft-item__toggle{transform:rotate(90deg)}.ft-collapsible:not(.ft-show){max-height:0;background-color:transparent}.ft-header{text-transform:uppercase;font-weight:700;padding:.75rem 1.5rem .25rem;font-size:.75rem;opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }, { kind: "directive", type: i1$3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
|
|
650
658
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListComponent, decorators: [{
|
|
651
659
|
type: Component,
|
|
652
|
-
args: [{ selector: 'ft-list', template: "<ng-container *ngTemplateOutlet=\"switch; context: { children: items }\"></ng-container>\n<ng-template #switch let-children=\"children\" let-level=\"level\">\n <ng-container *ngFor=\"let item of children\" [ngSwitch]=\"item.type\">\n <ng-container *ngSwitchCase=\"'collapsible'\">\n <ng-container *ngTemplateOutlet=\"collapsible; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'header'\">\n <ng-container *ngTemplateOutlet=\"header; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container *ngTemplateOutlet=\"action; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n<ng-template #action let-item=\"item\">\n <ng-container [ngSwitch]=\"getComponentType(item)\">\n <button *ngSwitchCase=\"'button'\" type=\"button\" matRipple class=\"list__item\" [ngClass]=\"item.class\"
|
|
660
|
+
args: [{ selector: 'ft-list', template: "<ng-container *ngTemplateOutlet=\"switch; context: { children: items }\"></ng-container>\n<ng-template #switch let-children=\"children\" let-level=\"level\">\n <ng-container *ngFor=\"let item of children\" [ngSwitch]=\"item.type\">\n <ng-container *ngSwitchCase=\"'collapsible'\">\n <ng-container *ngTemplateOutlet=\"collapsible; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'header'\">\n <ng-container *ngTemplateOutlet=\"header; context: { item: item }\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container *ngTemplateOutlet=\"action; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n<ng-template #action let-item=\"item\">\n <ng-container [ngSwitch]=\"getComponentType(item)\">\n <button *ngSwitchCase=\"'button'\" type=\"button\" matRipple class=\"ft-list__item\" [ngClass]=\"item.class\"\n (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n </button>\n <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"ft-active\" matRipple class=\"ft-list__item\"\n [ngClass]=\"item.class\" (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n </a>\n </ng-container>\n</ng-template>\n<ng-template #collapsible let-item=\"item\">\n <button type=\"button\" matRipple class=\"ft-collapsible-header ft-list__item\"\n [ngClass]=\"{ 'ft-show': item.metadata.show }\" (click)=\"toggleCollapsible(item)\">\n <div>\n <ft-icon class=\"ft-item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\"\n [collection]=\"iconCollection\" [path]=\"iconPath\"></ft-icon>\n <div class=\"ft-item__label\">{{ item[labelField] }}</div>\n <ft-icon class=\"ft-item__toggle\" name=\"angle-right\" size=\"1\"></ft-icon>\n </div>\n </button>\n <div class=\"ft-collapsible\" [ngClass]=\"{ 'ft-show': item.metadata?.show }\" *ngIf=\"item.children\">\n <ng-container *ngTemplateOutlet=\"switch; context: { children: item.children }\"></ng-container>\n </div>\n</ng-template>\n<ng-template #header let-item=\"item\">\n <div class=\"header\" [ngClass]=\"item.class\">\n {{ item[labelField] }}\n </div>\n</ng-template>\n<ng-template #text let-item=\"item\">\n <div class=\"d-flex align-items-center\">\n <ft-icon class=\"item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\" [collection]=\"iconCollection\"\n [path]=\"iconPath\"></ft-icon>\n <div class=\"item__label\">{{ item[labelField] }}</div>\n </div>\n</ng-template>", styles: [":host{--background-color: var(--background-color, #f8f9fa);--background-color-hover: rgba(0, 0, 0, .03);--background-color-active: rgba(var(--primary-rgb), .1);--text-color: #333;--text-color-hover: var(--primary);--text-color-active: var(--primary);display:block;overflow:auto}.ft-list__item{border:0;box-sizing:border-box;color:var(--text-color);background-color:var(--background-color);cursor:pointer;display:flex;outline:none;transition:background-color .3s,color .3s;text-align:left;padding:.75rem 1.5rem;width:100%}@media (min-width: var(--breakpoint-md)){.ft-list__item{width:100%}}.ft-list__item:hover{text-decoration:none}.ft-list__item:hover:not(.active){--background-color: var(--background-color-hover);--text-color: var(--text-color-hover)}.ft-list__item.ft-active,.ft-list__item:active{--background-color: var(--background-color-active);--text-color: var(--text-color-active)}.ft-list__item>div{max-width:100%}.ft-list__item .ft-item__icon{font-size:1.5rem}.ft-list__item .ft-item__icon+.ft-item__label{display:block;margin-left:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ft-list__item .ft-item__icon,.ft-list__item .ft-item__label{transition:margin-left .3s}.ft-list__item .ft-item__toggle{transition:transform .2s}.ft-list__item .ft-item__label{flex-grow:1}.ft-collapsible{overflow:hidden;transition:max-height .2s;max-height:100vh;background-color:#00000003;box-shadow:inset 0 4px 9px -7px #0006}.ft-collapsible-header{font-weight:500}.ft-collapsible-header>div{display:flex;align-items:center;flex-grow:1}.ft-collapsible-header.ft-show .ft-item__toggle{transform:rotate(90deg)}.ft-collapsible:not(.ft-show){max-height:0;background-color:transparent}.ft-header{text-transform:uppercase;font-weight:700;padding:.75rem 1.5rem .25rem;font-size:.75rem;opacity:.3}\n"] }]
|
|
653
661
|
}], ctorParameters: function () { return [{ type: i1$3.Router }]; }, propDecorators: { change: [{
|
|
654
662
|
type: Output
|
|
655
663
|
}], iconCollection: [{
|
|
@@ -662,24 +670,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
662
670
|
type: Input
|
|
663
671
|
}], items: [{
|
|
664
672
|
type: Input
|
|
673
|
+
}], class: [{
|
|
674
|
+
type: Input
|
|
675
|
+
}], hostClasses: [{
|
|
676
|
+
type: HostBinding,
|
|
677
|
+
args: ['class']
|
|
665
678
|
}] } });
|
|
666
679
|
|
|
667
680
|
class NavbarComponent {
|
|
668
681
|
constructor(router) {
|
|
669
682
|
this.router = router;
|
|
670
|
-
this.class = '';
|
|
671
683
|
this.iconNameField = 'iconName';
|
|
672
684
|
this.labelField = 'label';
|
|
673
685
|
this.labelPlacement = 'auto';
|
|
674
686
|
this.position = 'auto';
|
|
687
|
+
this.class = '';
|
|
675
688
|
}
|
|
676
|
-
ngOnInit() { }
|
|
677
689
|
get hostClasses() {
|
|
678
690
|
return [
|
|
691
|
+
'ft-navbar',
|
|
679
692
|
this.class,
|
|
680
693
|
this.position
|
|
681
694
|
].join(' ');
|
|
682
695
|
}
|
|
696
|
+
;
|
|
697
|
+
ngOnInit() { }
|
|
683
698
|
getComponentType(item) {
|
|
684
699
|
let type = 'text';
|
|
685
700
|
if (!item.url || item.url.match(/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/)) {
|
|
@@ -708,13 +723,11 @@ class NavbarComponent {
|
|
|
708
723
|
}
|
|
709
724
|
}
|
|
710
725
|
NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavbarComponent, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
711
|
-
NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: NavbarComponent, selector: "ft-navbar", inputs: {
|
|
726
|
+
NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: NavbarComponent, selector: "ft-navbar", inputs: { iconCollection: "iconCollection", iconNameField: "iconNameField", labelField: "labelField", labelPlacement: "labelPlacement", items: "items", position: "position", class: "class" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content select=\"[ftStart]\"></ng-content>\n<div class=\"list\" *ngIf=\"items\">\n <ng-container *ngFor=\"let item of items; trackBy: trackByItem\">\n <ng-container *ngTemplateOutlet=\"actionTemplate; context: { item: item }\"></ng-container>\n </ng-container>\n</div>\n<ng-content select=\"[ftEnd]\"></ng-content>\n<ng-template #actionTemplate let-item=\"item\">\n <ng-container [ngSwitch]=\"getComponentType(item)\">\n <button *ngSwitchCase=\"'button'\" type=\"button\" matRipple class=\"list__item\" [ngClass]=\"[labelPlacement, item.class || '' ]\" (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"textTemplate; context: { item: item }\"></ng-container>\n </button>\n <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"active\" matRipple class=\"list__item\" [ngClass]=\"[labelPlacement, item.class || '' ]\" (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"textTemplate; context: { item: item }\"></ng-container>\n </a>\n </ng-container>\n</ng-template>\n<ng-template #textTemplate let-item=\"item\">\n <div class=\"item\">\n <ft-icon class=\"item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\" [collection]=\"iconCollection\" [title]=\"labelPlacement === 'none' ? item[labelField] : '' \"></ft-icon>\n <div class=\"item__label\" *ngIf=\"labelPlacement !== 'none'\">{{ item[labelField] }}</div>\n </div>\n</ng-template>\n", styles: [":host{--min-width: 4rem;--min-height: 3.5rem;--background-color: #FFF;--background-color-hover: rgba(0, 0, 0, .1);--background-color-active: rgba(0, 0, 0, .1);--text-color: #333;--text-color-hover: #333;--text-color-active: #FFF;background-color:var(--background-color);position:fixed;transition:transform .3s ease-in-out,width .3s,color .3s,background-color .3s;z-index:var(--z-index, 990);font-size:.875rem;display:flex}@media (min-width: 576px){:host{--min-width: 13.75rem}}:host.left,:host.right{top:0;bottom:0;box-shadow:0 1px 1px #00000024,0 1px 3px #0000001f;min-width:var(--min-width)}:host.left{left:0}:host.right{right:0}:host.bottom,:host.top{left:0;right:0;min-height:var(--min-height)}:host.bottom .list,:host.top .list{display:flex}:host.bottom .list__item,:host.top .list__item{flex-grow:1;justify-content:center}:host.bottom{bottom:0;box-shadow:0 0 1px #00000024,0 -1px 3px #0000001f}:host.top{top:0;box-shadow:0 0 1px #00000024,0 1px 3px #0000001f}@media (min-width: 768px){:host.auto{left:0;top:0;bottom:0;box-shadow:0 1px 1px #00000024,0 1px 3px #0000001f;min-width:var(--min-width);flex-direction:column}}@media (max-width: 767.98px){:host.auto{bottom:0;left:0;right:0;box-shadow:0 0 1px #00000024,0 -1px 3px #0000001f;min-height:var(--min-height)}:host.auto .list{display:flex}}.list{display:block;flex-grow:1;overflow:auto}.list__item{border:0;box-sizing:border-box;color:var(--text-color);cursor:pointer;outline:none;transition:background-color .3s,color .3s;display:flex;align-items:center;padding:.75rem 1rem;width:100%}.list__item:hover{text-decoration:none}.list__item:hover:not(.active){background:var(--hover-background-color);color:var(--hover-text-color)}.list__item.active{background:var(--active-background-color);color:var(--active-text-color)}.list__item.left{justify-content:flex-start}.list__item.left .item__icon{margin-right:.5rem}.list__item.right{justify-content:flex-end}.list__item.right .item{flex-direction:row-reverse}.list__item.right .item__icon{margin-left:.5rem}.list__item.top{justify-content:center;flex-grow:1;padding:.5rem}.list__item.top .item{flex-direction:column-reverse}.list__item.bottom{justify-content:center;flex-grow:1;padding:.5rem}.list__item.bottom .item{flex-direction:column}@media (min-width: 768px){.list__item.auto .item{flex-direction:row}.list__item.auto .item__icon{margin-right:.5rem}}@media (max-width: 767.98px){.list__item.auto{justify-content:center;flex-grow:1;padding:.5rem}.list__item.auto .item{flex-direction:column;font-size:.6875rem}}.list__item .item{display:flex;align-items:center}.list__item .item__icon{font-size:1.5rem}.list__item .item__label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "ft-icon", inputs: ["class", "collection", "mode", "name", "path", "size", "src"] }, { kind: "directive", type: i1$3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
|
|
712
727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
713
728
|
type: Component,
|
|
714
|
-
args: [{ selector: 'ft-navbar', template: "<ng-content select=\"[ftStart]\"></ng-content>\n<div class=\"list\" *ngIf=\"items\">\n <ng-container *ngFor=\"let item of items; trackBy: trackByItem\">\n <ng-container *ngTemplateOutlet=\"
|
|
715
|
-
}], ctorParameters: function () { return [{ type: i1$3.Router }]; }, propDecorators: {
|
|
716
|
-
type: Input
|
|
717
|
-
}], iconCollection: [{
|
|
729
|
+
args: [{ selector: 'ft-navbar', template: "<ng-content select=\"[ftStart]\"></ng-content>\n<div class=\"list\" *ngIf=\"items\">\n <ng-container *ngFor=\"let item of items; trackBy: trackByItem\">\n <ng-container *ngTemplateOutlet=\"actionTemplate; context: { item: item }\"></ng-container>\n </ng-container>\n</div>\n<ng-content select=\"[ftEnd]\"></ng-content>\n<ng-template #actionTemplate let-item=\"item\">\n <ng-container [ngSwitch]=\"getComponentType(item)\">\n <button *ngSwitchCase=\"'button'\" type=\"button\" matRipple class=\"list__item\" [ngClass]=\"[labelPlacement, item.class || '' ]\" (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"textTemplate; context: { item: item }\"></ng-container>\n </button>\n <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"active\" matRipple class=\"list__item\" [ngClass]=\"[labelPlacement, item.class || '' ]\" (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"textTemplate; context: { item: item }\"></ng-container>\n </a>\n </ng-container>\n</ng-template>\n<ng-template #textTemplate let-item=\"item\">\n <div class=\"item\">\n <ft-icon class=\"item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\" [collection]=\"iconCollection\" [title]=\"labelPlacement === 'none' ? item[labelField] : '' \"></ft-icon>\n <div class=\"item__label\" *ngIf=\"labelPlacement !== 'none'\">{{ item[labelField] }}</div>\n </div>\n</ng-template>\n", styles: [":host{--min-width: 4rem;--min-height: 3.5rem;--background-color: #FFF;--background-color-hover: rgba(0, 0, 0, .1);--background-color-active: rgba(0, 0, 0, .1);--text-color: #333;--text-color-hover: #333;--text-color-active: #FFF;background-color:var(--background-color);position:fixed;transition:transform .3s ease-in-out,width .3s,color .3s,background-color .3s;z-index:var(--z-index, 990);font-size:.875rem;display:flex}@media (min-width: 576px){:host{--min-width: 13.75rem}}:host.left,:host.right{top:0;bottom:0;box-shadow:0 1px 1px #00000024,0 1px 3px #0000001f;min-width:var(--min-width)}:host.left{left:0}:host.right{right:0}:host.bottom,:host.top{left:0;right:0;min-height:var(--min-height)}:host.bottom .list,:host.top .list{display:flex}:host.bottom .list__item,:host.top .list__item{flex-grow:1;justify-content:center}:host.bottom{bottom:0;box-shadow:0 0 1px #00000024,0 -1px 3px #0000001f}:host.top{top:0;box-shadow:0 0 1px #00000024,0 1px 3px #0000001f}@media (min-width: 768px){:host.auto{left:0;top:0;bottom:0;box-shadow:0 1px 1px #00000024,0 1px 3px #0000001f;min-width:var(--min-width);flex-direction:column}}@media (max-width: 767.98px){:host.auto{bottom:0;left:0;right:0;box-shadow:0 0 1px #00000024,0 -1px 3px #0000001f;min-height:var(--min-height)}:host.auto .list{display:flex}}.list{display:block;flex-grow:1;overflow:auto}.list__item{border:0;box-sizing:border-box;color:var(--text-color);cursor:pointer;outline:none;transition:background-color .3s,color .3s;display:flex;align-items:center;padding:.75rem 1rem;width:100%}.list__item:hover{text-decoration:none}.list__item:hover:not(.active){background:var(--hover-background-color);color:var(--hover-text-color)}.list__item.active{background:var(--active-background-color);color:var(--active-text-color)}.list__item.left{justify-content:flex-start}.list__item.left .item__icon{margin-right:.5rem}.list__item.right{justify-content:flex-end}.list__item.right .item{flex-direction:row-reverse}.list__item.right .item__icon{margin-left:.5rem}.list__item.top{justify-content:center;flex-grow:1;padding:.5rem}.list__item.top .item{flex-direction:column-reverse}.list__item.bottom{justify-content:center;flex-grow:1;padding:.5rem}.list__item.bottom .item{flex-direction:column}@media (min-width: 768px){.list__item.auto .item{flex-direction:row}.list__item.auto .item__icon{margin-right:.5rem}}@media (max-width: 767.98px){.list__item.auto{justify-content:center;flex-grow:1;padding:.5rem}.list__item.auto .item{flex-direction:column;font-size:.6875rem}}.list__item .item{display:flex;align-items:center}.list__item .item__icon{font-size:1.5rem}.list__item .item__label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
730
|
+
}], ctorParameters: function () { return [{ type: i1$3.Router }]; }, propDecorators: { iconCollection: [{
|
|
718
731
|
type: Input
|
|
719
732
|
}], iconNameField: [{
|
|
720
733
|
type: Input
|
|
@@ -726,6 +739,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
726
739
|
type: Input
|
|
727
740
|
}], position: [{
|
|
728
741
|
type: Input
|
|
742
|
+
}], class: [{
|
|
743
|
+
type: Input
|
|
729
744
|
}], hostClasses: [{
|
|
730
745
|
type: HostBinding,
|
|
731
746
|
args: ['class']
|
|
@@ -735,15 +750,18 @@ class SearchboxComponent {
|
|
|
735
750
|
constructor() {
|
|
736
751
|
this.execute = new EventEmitter();
|
|
737
752
|
this.showChange = new EventEmitter();
|
|
753
|
+
this.class = '';
|
|
738
754
|
this.onChange = (_) => { };
|
|
739
755
|
this.onTouched = (_) => { };
|
|
740
756
|
}
|
|
741
757
|
get hostClasses() {
|
|
742
758
|
return [
|
|
759
|
+
'ft-searchbox',
|
|
743
760
|
this.class,
|
|
744
761
|
this.shown ? 'show' : ''
|
|
745
762
|
].join(' ');
|
|
746
763
|
}
|
|
764
|
+
;
|
|
747
765
|
set show(value) {
|
|
748
766
|
this.shown = value;
|
|
749
767
|
if (value) {
|
|
@@ -792,7 +810,7 @@ class SearchboxComponent {
|
|
|
792
810
|
}
|
|
793
811
|
}
|
|
794
812
|
SearchboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SearchboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
795
|
-
SearchboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SearchboxComponent, selector: "ft-searchbox", inputs: {
|
|
813
|
+
SearchboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SearchboxComponent, selector: "ft-searchbox", inputs: { placeholder: "placeholder", class: "class", show: "show", value: "value" }, outputs: { execute: "execute", showChange: "showChange" }, host: { properties: { "class": "this.hostClasses" } }, providers: [
|
|
796
814
|
{
|
|
797
815
|
provide: NG_VALUE_ACCESSOR,
|
|
798
816
|
useExisting: forwardRef(() => SearchboxComponent),
|
|
@@ -808,9 +826,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
808
826
|
multi: true
|
|
809
827
|
}
|
|
810
828
|
], template: "<form (submit)=\"onSearch($event)\" class=\"container p-2 p-sm-3 pb-md-3 pt-md-5 px-md-3 px-lg-5\">\n <div class=\"d-flex align-items-center\">\n <button type=\"button\" mat-icon-button class=\"p-2 mr-2\" (click)=\"closeSearch()\">\n <ft-icon name=\"arrow-left\" size=\"2\"></ft-icon>\n </button>\n <input\n #input\n type=\"search\"\n matInput\n class=\"flex-grow-1\"\n i18n-placeholder\n placeholder=\"Search criteria\"\n [disabled]=\"disabled\"\n (change)=\"updateValue($event)\"\n (keyup)=\"updateValue($event)\"\n *ngIf=\"!placeholder\"\n />\n <input\n #inputPlaceholder\n type=\"search\"\n matInput\n class=\"flex-grow-1\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n (change)=\"updateValue($event)\"\n (keyup)=\"updateValue($event)\"\n *ngIf=\"placeholder\"\n />\n <button type=\"submit\" mat-icon-button class=\"p-2 ml-2\">\n <ft-icon name=\"search\" size=\"2\"></ft-icon>\n </button>\n </div>\n </form>\n ", styles: [":host{z-index:var(--z-index, 980);background-color:var(--background-color, #FFF);display:block;transition:background-color .2s,box-shadow .2s;position:sticky;top:-1px;margin-top:-3.5rem;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}:host.show{opacity:1;visibility:visible}@media (min-width: 576px){:host{margin-top:-4.5rem}}@media (min-width: 768px){:host{top:-2rem;margin-top:-6.5rem}}:host button{min-width:0;line-height:inherit}:host input{border:0;background-color:transparent}:host input:focus{outline:none}\n"] }]
|
|
811
|
-
}], ctorParameters: function () { return []; }, propDecorators: {
|
|
812
|
-
type: Input
|
|
813
|
-
}], input: [{
|
|
829
|
+
}], ctorParameters: function () { return []; }, propDecorators: { input: [{
|
|
814
830
|
type: ViewChild,
|
|
815
831
|
args: ['input', { static: false }]
|
|
816
832
|
}], inputPlaceholder: [{
|
|
@@ -822,6 +838,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
822
838
|
type: Output
|
|
823
839
|
}], showChange: [{
|
|
824
840
|
type: Output
|
|
841
|
+
}], class: [{
|
|
842
|
+
type: Input
|
|
825
843
|
}], hostClasses: [{
|
|
826
844
|
type: HostBinding,
|
|
827
845
|
args: ['class']
|
|
@@ -840,17 +858,19 @@ class ToolbarComponent {
|
|
|
840
858
|
this.rootMargin = { rootMargin: '0px 0px 0px 0px' };
|
|
841
859
|
}
|
|
842
860
|
}
|
|
843
|
-
ngOnInit() {
|
|
844
|
-
if (this.titleOptions && !this.currentTitleOption) {
|
|
845
|
-
this.currentTitleOption = this.titleOptions[0];
|
|
846
|
-
}
|
|
847
|
-
}
|
|
848
861
|
get hostClasses() {
|
|
849
862
|
return [
|
|
863
|
+
'ft-toolbar',
|
|
850
864
|
this.class,
|
|
851
865
|
this.overlapped ? 'overlapped' : ''
|
|
852
866
|
].join(' ');
|
|
853
867
|
}
|
|
868
|
+
;
|
|
869
|
+
ngOnInit() {
|
|
870
|
+
if (this.titleOptions && !this.currentTitleOption) {
|
|
871
|
+
this.currentTitleOption = this.titleOptions[0];
|
|
872
|
+
}
|
|
873
|
+
}
|
|
854
874
|
setOverlapped(overlapped) {
|
|
855
875
|
this.overlapped = !overlapped;
|
|
856
876
|
}
|