@factor_ec/ui 1.0.8 → 1.0.10
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 +16 -3
- 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/esm2020/lib/ui.module.mjs +10 -1
- package/fesm2015/factor_ec-ui.mjs +46 -17
- package/fesm2015/factor_ec-ui.mjs.map +1 -1
- package/fesm2020/factor_ec-ui.mjs +46 -17
- 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/lib/ui.module.d.ts +1 -1
- package/package.json +1 -1
|
@@ -627,7 +627,15 @@ class ListComponent {
|
|
|
627
627
|
this.change = new EventEmitter();
|
|
628
628
|
this.iconNameField = 'iconName';
|
|
629
629
|
this.labelField = 'label';
|
|
630
|
+
this.class = '';
|
|
631
|
+
}
|
|
632
|
+
get hostClasses() {
|
|
633
|
+
return [
|
|
634
|
+
'ft-list',
|
|
635
|
+
this.class
|
|
636
|
+
].join(' ');
|
|
630
637
|
}
|
|
638
|
+
;
|
|
631
639
|
getComponentType(item) {
|
|
632
640
|
let type = 'text';
|
|
633
641
|
if (!item.url || item.url.match(/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/)) {
|
|
@@ -654,7 +662,7 @@ class ListComponent {
|
|
|
654
662
|
}
|
|
655
663
|
}
|
|
656
664
|
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 });
|
|
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" }, 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\" (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n </button>\n <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"active\" matRipple class=\"list__item\" [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=\"collapsible-header list__item\" [ngClass]=\"{ show: item.metadata.show }\" (click)=\"toggleCollapsible(item)\">\n <div class=\"d-flex align-items-center flex-grow-1\">\n <ft-icon class=\"item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\" [collection]=\"iconCollection\" [path]=\"iconPath\"></ft-icon>\n <div class=\"item__label flex-grow-1\">{{ item[labelField] }}</div>\n <ft-icon class=\"item__toggle\" name=\"angle-right\" size=\"1\"></ft-icon>\n </div>\n </button>\n <div class=\"collapsible\" [ngClass]=\"{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\" [path]=\"iconPath\"></ft-icon>\n <div class=\"item__label\">{{ item[labelField] }}</div>\n </div>\n</ng-template>\n", 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}.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)){.list__item{width:100%}}.list__item:hover{text-decoration:none}.list__item:hover:not(.active){--background-color: var(--background-color-hover);--text-color: var(--text-color-hover)}.list__item.active,.list__item:active{--background-color: var(--background-color-active);--text-color: var(--text-color-active)}.list__item>div{max-width:100%}.list__item .item__icon{font-size:1.5rem}.list__item .item__icon+.item__label{display:block;margin-left:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list__item .item__icon,.list__item .item__label{transition:margin-left .3s}.list__item .item__toggle{transition:transform .2s}.collapsible{overflow:hidden;transition:max-height .2s;max-height:100vh;background-color:#00000003;box-shadow:inset 0 4px 9px -7px #0006}.collapsible-header{font-weight:500}.collapsible-header.show .item__toggle{transform:rotate(90deg)}.collapsible:not(.show){max-height:0;background-color:transparent}.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"] }] });
|
|
665
|
+
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=\"list__item\" [ngClass]=\"item.class\" (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n </button>\n <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"active\" matRipple class=\"list__item\" [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=\"collapsible-header list__item\" [ngClass]=\"{ show: item.metadata.show }\" (click)=\"toggleCollapsible(item)\">\n <div class=\"d-flex align-items-center flex-grow-1\">\n <ft-icon class=\"item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\" [collection]=\"iconCollection\" [path]=\"iconPath\"></ft-icon>\n <div class=\"item__label flex-grow-1\">{{ item[labelField] }}</div>\n <ft-icon class=\"item__toggle\" name=\"angle-right\" size=\"1\"></ft-icon>\n </div>\n </button>\n <div class=\"collapsible\" [ngClass]=\"{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\" [path]=\"iconPath\"></ft-icon>\n <div class=\"item__label\">{{ item[labelField] }}</div>\n </div>\n</ng-template>\n", 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}.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)){.list__item{width:100%}}.list__item:hover{text-decoration:none}.list__item:hover:not(.active){--background-color: var(--background-color-hover);--text-color: var(--text-color-hover)}.list__item.active,.list__item:active{--background-color: var(--background-color-active);--text-color: var(--text-color-active)}.list__item>div{max-width:100%}.list__item .item__icon{font-size:1.5rem}.list__item .item__icon+.item__label{display:block;margin-left:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list__item .item__icon,.list__item .item__label{transition:margin-left .3s}.list__item .item__toggle{transition:transform .2s}.collapsible{overflow:hidden;transition:max-height .2s;max-height:100vh;background-color:#00000003;box-shadow:inset 0 4px 9px -7px #0006}.collapsible-header{font-weight:500}.collapsible-header.show .item__toggle{transform:rotate(90deg)}.collapsible:not(.show){max-height:0;background-color:transparent}.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"] }] });
|
|
658
666
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListComponent, decorators: [{
|
|
659
667
|
type: Component,
|
|
660
668
|
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\" (click)=\"setItem(item)\">\n <ng-container *ngTemplateOutlet=\"text; context: { item: item }\"></ng-container>\n </button>\n <a *ngSwitchCase=\"'link'\" [routerLink]=\"item.url\" routerLinkActive=\"active\" matRipple class=\"list__item\" [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=\"collapsible-header list__item\" [ngClass]=\"{ show: item.metadata.show }\" (click)=\"toggleCollapsible(item)\">\n <div class=\"d-flex align-items-center flex-grow-1\">\n <ft-icon class=\"item__icon\" *ngIf=\"item[iconNameField]\" [name]=\"item[iconNameField]\" [collection]=\"iconCollection\" [path]=\"iconPath\"></ft-icon>\n <div class=\"item__label flex-grow-1\">{{ item[labelField] }}</div>\n <ft-icon class=\"item__toggle\" name=\"angle-right\" size=\"1\"></ft-icon>\n </div>\n </button>\n <div class=\"collapsible\" [ngClass]=\"{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\" [path]=\"iconPath\"></ft-icon>\n <div class=\"item__label\">{{ item[labelField] }}</div>\n </div>\n</ng-template>\n", 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}.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)){.list__item{width:100%}}.list__item:hover{text-decoration:none}.list__item:hover:not(.active){--background-color: var(--background-color-hover);--text-color: var(--text-color-hover)}.list__item.active,.list__item:active{--background-color: var(--background-color-active);--text-color: var(--text-color-active)}.list__item>div{max-width:100%}.list__item .item__icon{font-size:1.5rem}.list__item .item__icon+.item__label{display:block;margin-left:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list__item .item__icon,.list__item .item__label{transition:margin-left .3s}.list__item .item__toggle{transition:transform .2s}.collapsible{overflow:hidden;transition:max-height .2s;max-height:100vh;background-color:#00000003;box-shadow:inset 0 4px 9px -7px #0006}.collapsible-header{font-weight:500}.collapsible-header.show .item__toggle{transform:rotate(90deg)}.collapsible:not(.show){max-height:0;background-color:transparent}.header{text-transform:uppercase;font-weight:700;padding:.75rem 1.5rem .25rem;font-size:.75rem;opacity:.3}\n"] }]
|
|
@@ -670,24 +678,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
670
678
|
type: Input
|
|
671
679
|
}], items: [{
|
|
672
680
|
type: Input
|
|
681
|
+
}], class: [{
|
|
682
|
+
type: Input
|
|
683
|
+
}], hostClasses: [{
|
|
684
|
+
type: HostBinding,
|
|
685
|
+
args: ['class']
|
|
673
686
|
}] } });
|
|
674
687
|
|
|
675
688
|
class NavbarComponent {
|
|
676
689
|
constructor(router) {
|
|
677
690
|
this.router = router;
|
|
678
|
-
this.class = '';
|
|
679
691
|
this.iconNameField = 'iconName';
|
|
680
692
|
this.labelField = 'label';
|
|
681
693
|
this.labelPlacement = 'auto';
|
|
682
694
|
this.position = 'auto';
|
|
695
|
+
this.class = '';
|
|
683
696
|
}
|
|
684
|
-
ngOnInit() { }
|
|
685
697
|
get hostClasses() {
|
|
686
698
|
return [
|
|
699
|
+
'ft-navbar',
|
|
687
700
|
this.class,
|
|
688
701
|
this.position
|
|
689
702
|
].join(' ');
|
|
690
703
|
}
|
|
704
|
+
;
|
|
705
|
+
ngOnInit() { }
|
|
691
706
|
getComponentType(item) {
|
|
692
707
|
let type = 'text';
|
|
693
708
|
if (!item.url || item.url.match(/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/)) {
|
|
@@ -716,13 +731,11 @@ class NavbarComponent {
|
|
|
716
731
|
}
|
|
717
732
|
}
|
|
718
733
|
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 });
|
|
719
|
-
NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: NavbarComponent, selector: "ft-navbar", inputs: {
|
|
734
|
+
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"] }] });
|
|
720
735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
721
736
|
type: Component,
|
|
722
|
-
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=\"
|
|
723
|
-
}], ctorParameters: function () { return [{ type: i1$3.Router }]; }, propDecorators: {
|
|
724
|
-
type: Input
|
|
725
|
-
}], iconCollection: [{
|
|
737
|
+
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"] }]
|
|
738
|
+
}], ctorParameters: function () { return [{ type: i1$3.Router }]; }, propDecorators: { iconCollection: [{
|
|
726
739
|
type: Input
|
|
727
740
|
}], iconNameField: [{
|
|
728
741
|
type: Input
|
|
@@ -734,6 +747,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
734
747
|
type: Input
|
|
735
748
|
}], position: [{
|
|
736
749
|
type: Input
|
|
750
|
+
}], class: [{
|
|
751
|
+
type: Input
|
|
737
752
|
}], hostClasses: [{
|
|
738
753
|
type: HostBinding,
|
|
739
754
|
args: ['class']
|
|
@@ -743,15 +758,18 @@ class SearchboxComponent {
|
|
|
743
758
|
constructor() {
|
|
744
759
|
this.execute = new EventEmitter();
|
|
745
760
|
this.showChange = new EventEmitter();
|
|
761
|
+
this.class = '';
|
|
746
762
|
this.onChange = (_) => { };
|
|
747
763
|
this.onTouched = (_) => { };
|
|
748
764
|
}
|
|
749
765
|
get hostClasses() {
|
|
750
766
|
return [
|
|
767
|
+
'ft-searchbox',
|
|
751
768
|
this.class,
|
|
752
769
|
this.shown ? 'show' : ''
|
|
753
770
|
].join(' ');
|
|
754
771
|
}
|
|
772
|
+
;
|
|
755
773
|
set show(value) {
|
|
756
774
|
this.shown = value;
|
|
757
775
|
if (value) {
|
|
@@ -800,7 +818,7 @@ class SearchboxComponent {
|
|
|
800
818
|
}
|
|
801
819
|
}
|
|
802
820
|
SearchboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SearchboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
803
|
-
SearchboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: SearchboxComponent, selector: "ft-searchbox", inputs: {
|
|
821
|
+
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: [
|
|
804
822
|
{
|
|
805
823
|
provide: NG_VALUE_ACCESSOR,
|
|
806
824
|
useExisting: forwardRef(() => SearchboxComponent),
|
|
@@ -816,9 +834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
816
834
|
multi: true
|
|
817
835
|
}
|
|
818
836
|
], 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"] }]
|
|
819
|
-
}], ctorParameters: function () { return []; }, propDecorators: {
|
|
820
|
-
type: Input
|
|
821
|
-
}], input: [{
|
|
837
|
+
}], ctorParameters: function () { return []; }, propDecorators: { input: [{
|
|
822
838
|
type: ViewChild,
|
|
823
839
|
args: ['input', { static: false }]
|
|
824
840
|
}], inputPlaceholder: [{
|
|
@@ -830,6 +846,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
830
846
|
type: Output
|
|
831
847
|
}], showChange: [{
|
|
832
848
|
type: Output
|
|
849
|
+
}], class: [{
|
|
850
|
+
type: Input
|
|
833
851
|
}], hostClasses: [{
|
|
834
852
|
type: HostBinding,
|
|
835
853
|
args: ['class']
|
|
@@ -848,17 +866,19 @@ class ToolbarComponent {
|
|
|
848
866
|
this.rootMargin = { rootMargin: '0px 0px 0px 0px' };
|
|
849
867
|
}
|
|
850
868
|
}
|
|
851
|
-
ngOnInit() {
|
|
852
|
-
if (this.titleOptions && !this.currentTitleOption) {
|
|
853
|
-
this.currentTitleOption = this.titleOptions[0];
|
|
854
|
-
}
|
|
855
|
-
}
|
|
856
869
|
get hostClasses() {
|
|
857
870
|
return [
|
|
871
|
+
'ft-toolbar',
|
|
858
872
|
this.class,
|
|
859
873
|
this.overlapped ? 'overlapped' : ''
|
|
860
874
|
].join(' ');
|
|
861
875
|
}
|
|
876
|
+
;
|
|
877
|
+
ngOnInit() {
|
|
878
|
+
if (this.titleOptions && !this.currentTitleOption) {
|
|
879
|
+
this.currentTitleOption = this.titleOptions[0];
|
|
880
|
+
}
|
|
881
|
+
}
|
|
862
882
|
setOverlapped(overlapped) {
|
|
863
883
|
this.overlapped = !overlapped;
|
|
864
884
|
}
|
|
@@ -941,10 +961,14 @@ UiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.
|
|
|
941
961
|
UiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: UiModule, imports: [CommonModule,
|
|
942
962
|
DisplayModule,
|
|
943
963
|
InputsModule,
|
|
964
|
+
NavigationModule], exports: [DisplayModule,
|
|
965
|
+
InputsModule,
|
|
944
966
|
NavigationModule] });
|
|
945
967
|
UiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UiModule, imports: [CommonModule,
|
|
946
968
|
DisplayModule,
|
|
947
969
|
InputsModule,
|
|
970
|
+
NavigationModule, DisplayModule,
|
|
971
|
+
InputsModule,
|
|
948
972
|
NavigationModule] });
|
|
949
973
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UiModule, decorators: [{
|
|
950
974
|
type: NgModule,
|
|
@@ -955,6 +979,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
955
979
|
DisplayModule,
|
|
956
980
|
InputsModule,
|
|
957
981
|
NavigationModule
|
|
982
|
+
],
|
|
983
|
+
exports: [
|
|
984
|
+
DisplayModule,
|
|
985
|
+
InputsModule,
|
|
986
|
+
NavigationModule
|
|
958
987
|
]
|
|
959
988
|
}]
|
|
960
989
|
}] });
|