@flywheel-io/vision 1.10.0 → 1.11.0
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/components/date-input/date-input.component.d.ts +6 -0
- package/components/navbar/navbar-item/navbar-item.component.d.ts +2 -1
- package/components/navbar/navbar-sub-item/navbar-sub-item.component.d.ts +3 -1
- package/components/phone-input/phone-input.component.d.ts +6 -0
- package/components/text-input/text-input.component.d.ts +6 -0
- package/components/textarea-input/textarea-input.component.d.ts +6 -0
- package/components/tooltip/tooltip.component.d.ts +3 -1
- package/components/wrapped-input/wrapped-input.component.d.ts +3 -1
- package/esm2020/components/date-input/date-input.component.mjs +1 -1
- package/esm2020/components/menu/menu-item/menu-item.component.mjs +1 -1
- package/esm2020/components/navbar/navbar-item/navbar-item.component.mjs +5 -3
- package/esm2020/components/navbar/navbar-sub-item/navbar-sub-item.component.mjs +9 -3
- package/esm2020/components/phone-input/phone-input.component.mjs +1 -1
- package/esm2020/components/select-menu/select-menu.component.mjs +5 -4
- package/esm2020/components/text-input/text-input.component.mjs +1 -1
- package/esm2020/components/textarea-input/textarea-input.component.mjs +1 -1
- package/esm2020/components/tooltip/tooltip.component.mjs +14 -4
- package/esm2020/components/wrapped-input/wrapped-input.component.mjs +7 -3
- package/fesm2015/flywheel-io-vision.mjs +34 -12
- package/fesm2015/flywheel-io-vision.mjs.map +1 -1
- package/fesm2020/flywheel-io-vision.mjs +34 -12
- package/fesm2020/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -3864,6 +3864,7 @@ class FwTooltipComponent {
|
|
|
3864
3864
|
this.color = 'light';
|
|
3865
3865
|
this.position = 'above';
|
|
3866
3866
|
this.maxWidth = 200;
|
|
3867
|
+
this.fullWidth = false;
|
|
3867
3868
|
this.isOpen = false;
|
|
3868
3869
|
this.positionMap = {
|
|
3869
3870
|
'none': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: 3 },
|
|
@@ -3873,12 +3874,16 @@ class FwTooltipComponent {
|
|
|
3873
3874
|
'right': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' },
|
|
3874
3875
|
};
|
|
3875
3876
|
}
|
|
3877
|
+
get classes() {
|
|
3878
|
+
return ['fw-tooltip', this.fullWidth ? 'full-width' : null].filter(Boolean).join(' ');
|
|
3879
|
+
}
|
|
3880
|
+
;
|
|
3876
3881
|
}
|
|
3877
3882
|
FwTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3878
|
-
FwTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTooltipComponent, selector: "fw-tooltip", inputs: { title: "title", color: "color", position: "position", maxWidth: "maxWidth", isOpen: "isOpen", trigger: "trigger" }, ngImport: i0, template: "<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n <fw-tooltip-panel [position]=\"position\" [color]=\"color\" [maxWidth]=\"maxWidth\" *ngIf=\"title\">\n <h5 class=\"vision-h5\">{{ title }}</h5>\n </fw-tooltip-panel>\n</ng-template>\n\n<div\n title=\"\"
|
|
3883
|
+
FwTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwTooltipComponent, selector: "fw-tooltip", inputs: { title: "title", color: "color", position: "position", maxWidth: "maxWidth", fullWidth: "fullWidth", isOpen: "isOpen", trigger: "trigger" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n <fw-tooltip-panel [position]=\"position\" [color]=\"color\" [maxWidth]=\"maxWidth\" *ngIf=\"title\">\n <h5 class=\"vision-h5\">{{ title }}</h5>\n </fw-tooltip-panel>\n</ng-template>\n\n<div\n title=\"\" [ngClass]=\"['tooltip-trigger',fullWidth?'full-width':'']\"\n cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\n (mouseenter)=\"isOpen=true\" (mouseleave)=\"isOpen=false\">\n <ng-content></ng-content>\n</div>\n", styles: [":host.full-width{flex:1;display:flex;width:-webkit-fill-available;width:-moz-available;width:stretch}:host.full-width button{flex:1}:host .tooltip-trigger{width:fit-content;display:inline-block}:host .tooltip-trigger.full-width{flex:1;display:flex;width:-webkit-fill-available;width:-moz-available;width:stretch}:host .tooltip-trigger.full-width button{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: FwTooltipPanelComponent, selector: "fw-tooltip-panel", inputs: ["position", "color", "maxWidth"], outputs: ["mouseLeave"] }] });
|
|
3879
3884
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwTooltipComponent, decorators: [{
|
|
3880
3885
|
type: Component,
|
|
3881
|
-
args: [{ selector: 'fw-tooltip', template: "<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n <fw-tooltip-panel [position]=\"position\" [color]=\"color\" [maxWidth]=\"maxWidth\" *ngIf=\"title\">\n <h5 class=\"vision-h5\">{{ title }}</h5>\n </fw-tooltip-panel>\n</ng-template>\n\n<div\n title=\"\"
|
|
3886
|
+
args: [{ selector: 'fw-tooltip', template: "<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayPositions]=\"[positionMap[position]]\">\n <fw-tooltip-panel [position]=\"position\" [color]=\"color\" [maxWidth]=\"maxWidth\" *ngIf=\"title\">\n <h5 class=\"vision-h5\">{{ title }}</h5>\n </fw-tooltip-panel>\n</ng-template>\n\n<div\n title=\"\" [ngClass]=\"['tooltip-trigger',fullWidth?'full-width':'']\"\n cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\n (mouseenter)=\"isOpen=true\" (mouseleave)=\"isOpen=false\">\n <ng-content></ng-content>\n</div>\n", styles: [":host.full-width{flex:1;display:flex;width:-webkit-fill-available;width:-moz-available;width:stretch}:host.full-width button{flex:1}:host .tooltip-trigger{width:fit-content;display:inline-block}:host .tooltip-trigger.full-width{flex:1;display:flex;width:-webkit-fill-available;width:-moz-available;width:stretch}:host .tooltip-trigger.full-width button{flex:1}\n"] }]
|
|
3882
3887
|
}], propDecorators: { title: [{
|
|
3883
3888
|
type: Input
|
|
3884
3889
|
}], color: [{
|
|
@@ -3887,10 +3892,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3887
3892
|
type: Input
|
|
3888
3893
|
}], maxWidth: [{
|
|
3889
3894
|
type: Input
|
|
3895
|
+
}], fullWidth: [{
|
|
3896
|
+
type: Input
|
|
3890
3897
|
}], isOpen: [{
|
|
3891
3898
|
type: Input
|
|
3892
3899
|
}], trigger: [{
|
|
3893
3900
|
type: Input
|
|
3901
|
+
}], classes: [{
|
|
3902
|
+
type: HostBinding,
|
|
3903
|
+
args: ['attr.class']
|
|
3894
3904
|
}] } });
|
|
3895
3905
|
|
|
3896
3906
|
class FwRadioComponent {
|
|
@@ -4014,7 +4024,7 @@ class FwMenuItemComponent {
|
|
|
4014
4024
|
}
|
|
4015
4025
|
}
|
|
4016
4026
|
FwMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4017
|
-
FwMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: { value: "value", size: "size", title: "title", description: "description", icon: "icon", iconColor: "iconColor", disabled: "disabled", showCheckbox: "showCheckbox", checkboxColor: "checkboxColor", multiSelect: "multiSelect", hidden: "hidden", showTooltip: "showTooltip", collapsed: "collapsed", href: "href", target: "target", subItemsOpen: "subItemsOpen", focused: "focused", selected: "selected", variant: "variant" }, outputs: { click: "click" }, host: { properties: { "class.collapsed": "this.collapsed", "class.focused": "this.focused", "class.selected": "this.selected" } }, queries: [{ propertyName: "subItems", predicate: FwMenuSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n <div\n [ngClass]=\"['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n <fw-checkbox\n [disabled]=\"disabled\"\n [color]=\"checkboxColor\"\n [checked]=\"selected\">\n </fw-checkbox>\n </div>\n <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n <fw-radio-button\n [value]=\"value\"\n [color]=\"checkboxColor\"\n [disabled]=\"disabled\"\n [checked]=\"selected\">\n </fw-radio-button>\n </div>\n <fw-tooltip [title]=\"showTooltip ? title : ''\" position=\"right\">\n <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n </fw-tooltip>\n <ng-content select=\"fw-avatar\"></ng-content>\n <div class=\"menu-text\" *ngIf=\"title\">\n <h4 class=\"vision-h4\">{{ title }}</h4>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n <div class=\"key-text vision-p2\">\n <ng-content select=\"p\"></ng-content>\n <ng-content select=\"fw-badge\"></ng-content>\n <ng-content select=\"fw-icon\"></ng-content>\n <ng-content select=\"fw-icon-button\"></ng-content>\n <fw-icon-button\n [size]=\"'small'\"\n [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n *ngIf=\"subItems.length>0\"\n (click)=\"toggleSubItemsView()\">\n </fw-icon-button>\n </div>\n </div>\n</div>\n<div class=\"item-subitems\">\n <ng-content select=\"fw-menu-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host>div{display:flex;flex:1;text-decoration:none;max-width:100%}:host h4{text-overflow:ellipsis}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused:not(.selected) .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.selected .menu-item.variant-modern:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.selected .menu-item.variant-modern.size-compact:before{height:16px;border-left:3px solid var(--primary-base)}:host.selected .menu-item.variant-button:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-14px;margin-top:10px}:host.selected .menu-item.variant-button.size-compact:before{margin-left:-15px;margin-top:4px;border-left:1px solid var(--primary-base)}:host.variant-modern.selected:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.variant-modern.size-compact.selected:before{height:16px;border-left:3px solid var(--primary-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;margin:1px 4px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:-webkit-fill-available;width:-moz-available;width:stretch}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton{padding:0}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .menu-item.variant-modern{padding:8px 16px;border-radius:6px}:host .menu-item.variant-modern.size-compact{min-height:34px}:host .menu-item.variant-button{height:52px;width:60px;flex-direction:column;gap:1px;padding:3px 0;border-radius:8px;display:block;text-align:center;flex:unset;white-space:nowrap;overflow:hidden;container-name:menuitem-button}:host .menu-item.variant-button .menu-icon{font-size:32px}:host .menu-item.variant-button .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .menu-item.variant-button .menu-text .description{display:none}:host .menu-item.variant-button.size-compact{min-height:40px;width:50px}:host .menu-item.variant-button.size-compact .menu-icon{font-size:20px}:host .menu-item.variant-button.size-compact .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .item-subitems{display:flex;flex-direction:column}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "isOpen", "trigger"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["checked", "disabled", "size", "color", "title", "focused"] }, { kind: "component", type: FwRadioComponent, selector: "fw-radio-button", inputs: ["checked", "value", "group", "disabled", "size", "color", "title", "focused"], outputs: ["change"] }] });
|
|
4027
|
+
FwMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: { value: "value", size: "size", title: "title", description: "description", icon: "icon", iconColor: "iconColor", disabled: "disabled", showCheckbox: "showCheckbox", checkboxColor: "checkboxColor", multiSelect: "multiSelect", hidden: "hidden", showTooltip: "showTooltip", collapsed: "collapsed", href: "href", target: "target", subItemsOpen: "subItemsOpen", focused: "focused", selected: "selected", variant: "variant" }, outputs: { click: "click" }, host: { properties: { "class.collapsed": "this.collapsed", "class.focused": "this.focused", "class.selected": "this.selected" } }, queries: [{ propertyName: "subItems", predicate: FwMenuSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n <div\n [ngClass]=\"['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n <fw-checkbox\n [disabled]=\"disabled\"\n [color]=\"checkboxColor\"\n [checked]=\"selected\">\n </fw-checkbox>\n </div>\n <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n <fw-radio-button\n [value]=\"value\"\n [color]=\"checkboxColor\"\n [disabled]=\"disabled\"\n [checked]=\"selected\">\n </fw-radio-button>\n </div>\n <fw-tooltip [title]=\"showTooltip ? title : ''\" position=\"right\">\n <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n </fw-tooltip>\n <ng-content select=\"fw-avatar\"></ng-content>\n <div class=\"menu-text\" *ngIf=\"title\">\n <h4 class=\"vision-h4\">{{ title }}</h4>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n <div class=\"key-text vision-p2\">\n <ng-content select=\"p\"></ng-content>\n <ng-content select=\"fw-badge\"></ng-content>\n <ng-content select=\"fw-icon\"></ng-content>\n <ng-content select=\"fw-icon-button\"></ng-content>\n <fw-icon-button\n [size]=\"'small'\"\n [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n *ngIf=\"subItems.length>0\"\n (click)=\"toggleSubItemsView()\">\n </fw-icon-button>\n </div>\n </div>\n</div>\n<div class=\"item-subitems\">\n <ng-content select=\"fw-menu-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host>div{display:flex;flex:1;text-decoration:none;max-width:100%}:host h4{text-overflow:ellipsis}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused:not(.selected) .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.selected .menu-item.variant-modern:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.selected .menu-item.variant-modern.size-compact:before{height:16px;border-left:3px solid var(--primary-base)}:host.selected .menu-item.variant-button:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-14px;margin-top:10px}:host.selected .menu-item.variant-button.size-compact:before{margin-left:-15px;margin-top:4px;border-left:1px solid var(--primary-base)}:host.variant-modern.selected:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.variant-modern.size-compact.selected:before{height:16px;border-left:3px solid var(--primary-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;margin:1px 4px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:-webkit-fill-available;width:-moz-available;width:stretch}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton{padding:0}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .menu-item.variant-modern{padding:8px 16px;border-radius:6px}:host .menu-item.variant-modern.size-compact{min-height:34px}:host .menu-item.variant-button{height:52px;width:60px;flex-direction:column;gap:1px;padding:3px 0;border-radius:8px;display:block;text-align:center;flex:unset;white-space:nowrap;overflow:hidden;container-name:menuitem-button}:host .menu-item.variant-button .menu-icon{font-size:32px}:host .menu-item.variant-button .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .menu-item.variant-button .menu-text .description{display:none}:host .menu-item.variant-button.size-compact{min-height:40px;width:50px}:host .menu-item.variant-button.size-compact .menu-icon{font-size:20px}:host .menu-item.variant-button.size-compact .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .item-subitems{display:flex;flex-direction:column}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "fullWidth", "isOpen", "trigger"] }, { kind: "component", type: FwCheckboxComponent, selector: "fw-checkbox", inputs: ["checked", "disabled", "size", "color", "title", "focused"] }, { kind: "component", type: FwRadioComponent, selector: "fw-radio-button", inputs: ["checked", "value", "group", "disabled", "size", "color", "title", "focused"], outputs: ["change"] }] });
|
|
4018
4028
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMenuItemComponent, decorators: [{
|
|
4019
4029
|
type: Component,
|
|
4020
4030
|
args: [{ selector: 'fw-menu-item', template: "<div (click)=\"handleClick($event)\" *ngIf=\"!hidden\">\n <div\n [ngClass]=\"['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"item-checkbox\" *ngIf=\"showCheckbox && multiSelect\">\n <fw-checkbox\n [disabled]=\"disabled\"\n [color]=\"checkboxColor\"\n [checked]=\"selected\">\n </fw-checkbox>\n </div>\n <div class=\"item-radiobutton\" *ngIf=\"showCheckbox && !multiSelect\">\n <fw-radio-button\n [value]=\"value\"\n [color]=\"checkboxColor\"\n [disabled]=\"disabled\"\n [checked]=\"selected\">\n </fw-radio-button>\n </div>\n <fw-tooltip [title]=\"showTooltip ? title : ''\" position=\"right\">\n <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n </fw-tooltip>\n <ng-content select=\"fw-avatar\"></ng-content>\n <div class=\"menu-text\" *ngIf=\"title\">\n <h4 class=\"vision-h4\">{{ title }}</h4>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n <div class=\"key-text vision-p2\">\n <ng-content select=\"p\"></ng-content>\n <ng-content select=\"fw-badge\"></ng-content>\n <ng-content select=\"fw-icon\"></ng-content>\n <ng-content select=\"fw-icon-button\"></ng-content>\n <fw-icon-button\n [size]=\"'small'\"\n [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n *ngIf=\"subItems.length>0\"\n (click)=\"toggleSubItemsView()\">\n </fw-icon-button>\n </div>\n </div>\n</div>\n<div class=\"item-subitems\">\n <ng-content select=\"fw-menu-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host>div{display:flex;flex:1;text-decoration:none;max-width:100%}:host h4{text-overflow:ellipsis}:host:hover:not(.selected) .menu-item:not(.disabled),:host.focused:not(.selected) .menu-item:not(.disabled){background-color:var(--slate-hover);cursor:pointer}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-icon,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-icon{color:var(--primary-base)}:host:hover:not(.selected) .menu-item:not(.disabled) .menu-text h4,:host.focused:not(.selected) .menu-item:not(.disabled) .menu-text h4{color:var(--typography-base)}:host.selected .menu-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .menu-item .menu-icon{color:var(--primary-base)}:host.selected .menu-item .menu-text h4{color:var(--typography-base)}:host.selected .menu-item.variant-modern:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.selected .menu-item.variant-modern.size-compact:before{height:16px;border-left:3px solid var(--primary-base)}:host.selected .menu-item.variant-button:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-14px;margin-top:10px}:host.selected .menu-item.variant-button.size-compact:before{margin-left:-15px;margin-top:4px;border-left:1px solid var(--primary-base)}:host.variant-modern.selected:before{position:absolute;content:\" \";height:25px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.variant-modern.size-compact.selected:before{height:16px;border-left:3px solid var(--primary-base)}:host.collapsed .menu-item{container-name:menuitem;container-type:size}:host .menu-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px;margin:1px 4px;border-radius:4px;color:var(--typography-muted);min-height:40px;width:-webkit-fill-available;width:-moz-available;width:stretch}:host .menu-item .item-checkbox:empty{display:none}:host .menu-item .item-radiobutton{padding:0}:host .menu-item .item-radiobutton:empty{display:none}:host .menu-item .menu-icon{font-size:18px;white-space:nowrap}:host .menu-item .menu-text{flex:1;overflow:hidden;padding:2px 0}:host .menu-item .menu-text h4{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .menu-item .menu-text p{margin:0}:host .menu-item .menu-text p.description{color:var(--typography-light)}:host .menu-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .menu-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important}:host .menu-item.size-compact{min-height:32px}:host .menu-item.size-compact .menu-text .description{display:none}:host .menu-item.disabled{opacity:.4;cursor:not-allowed}:host .menu-item.variant-modern{padding:8px 16px;border-radius:6px}:host .menu-item.variant-modern.size-compact{min-height:34px}:host .menu-item.variant-button{height:52px;width:60px;flex-direction:column;gap:1px;padding:3px 0;border-radius:8px;display:block;text-align:center;flex:unset;white-space:nowrap;overflow:hidden;container-name:menuitem-button}:host .menu-item.variant-button .menu-icon{font-size:32px}:host .menu-item.variant-button .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .menu-item.variant-button .menu-text .description{display:none}:host .menu-item.variant-button.size-compact{min-height:40px;width:50px}:host .menu-item.variant-button.size-compact .menu-icon{font-size:20px}:host .menu-item.variant-button.size-compact .menu-text h4{font-size:10px;font-style:normal;font-weight:400;line-height:130%}:host .item-subitems{display:flex;flex-direction:column}@container menuitem (max-width: 60px){.menu-item{gap:0}.menu-item .menu-text{opacity:0}}\n"] }]
|
|
@@ -4924,12 +4934,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4924
4934
|
class FwNavbarSubItemComponent {
|
|
4925
4935
|
constructor() {
|
|
4926
4936
|
this.hidden = false;
|
|
4937
|
+
this.showTooltip = false;
|
|
4927
4938
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
4928
4939
|
this.selected = false;
|
|
4929
4940
|
}
|
|
4930
4941
|
}
|
|
4931
4942
|
FwNavbarSubItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarSubItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4932
|
-
FwNavbarSubItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNavbarSubItemComponent, selector: "fw-navbar-sub-item", inputs: { value: "value", title: "title", description: "description", icon: "icon", disabled: "disabled", hidden: "hidden", href: "href", target: "target", collapsed: "collapsed", selected: "selected" }, host: { properties: { "class.collapsed": "this.collapsed", "class.selected": "this.selected" } }, ngImport: i0, template: "<div\n *ngIf=\"!hidden\"\n [@openClose]=\"{value: collapsed?'closed':'open'}\">\n <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n <div\n
|
|
4943
|
+
FwNavbarSubItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNavbarSubItemComponent, selector: "fw-navbar-sub-item", inputs: { value: "value", title: "title", description: "description", icon: "icon", disabled: "disabled", hidden: "hidden", tooltipText: "tooltipText", showTooltip: "showTooltip", href: "href", target: "target", collapsed: "collapsed", selected: "selected" }, host: { properties: { "class.collapsed": "this.collapsed", "class.selected": "this.selected" } }, ngImport: i0, template: "<div\n *ngIf=\"!hidden\"\n [@openClose]=\"{value: collapsed?'closed':'open'}\">\n <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n <fw-tooltip [title]=\"showTooltip ? tooltipText || title : ''\" position=\"right\" [fullWidth]=\"true\">\n <div\n [ngClass]=\"['navbar-sub-item', disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"navbar-text\" *ngIf=\"title\">\n <h5>{{ title }}</h5>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n <div class=\"key-text vision-p2\">\n <ng-content select=\"p\"></ng-content>\n <ng-content select=\"fw-badge\"></ng-content>\n <ng-content select=\"fw-icon\"></ng-content>\n <ng-content select=\"fw-icon-button\"></ng-content>\n </div>\n </div>\n </fw-tooltip>\n </a>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover .navbar-sub-item:not(.disabled),:host.focused:not(.selected) .navbar-sub-item:not(.disabled){background-color:var(--primary-hover);cursor:pointer}:host:hover .navbar-sub-item:not(.disabled) .navbar-icon,:host.focused:not(.selected) .navbar-sub-item:not(.disabled) .navbar-icon{color:var(--primary-base)}:host:hover .navbar-sub-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-sub-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-sub-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-sub-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item:before{position:absolute;content:\" \";height:16px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-sub-item{container-name:navbaritem;container-type:size}:host fw-tooltip{display:flex;flex-direction:row;flex:1;width:-webkit-fill-available;width:-moz-available;width:stretch}:host fw-tooltip .tooltip-trigger{display:flex;flex-direction:row;flex:1;width:-webkit-fill-available;width:-moz-available;width:stretch}:host .navbar-sub-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);height:30px;width:-webkit-fill-available;width:-moz-available;width:stretch;cursor:pointer}:host .navbar-sub-item .navbar-icon{font-size:18px;white-space:nowrap}:host .navbar-sub-item .navbar-text{flex:1;overflow:hidden;padding:2px 0 2px 26px}:host .navbar-sub-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-sub-item .navbar-text p{margin:0}:host .navbar-sub-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-sub-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-sub-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important}:host .navbar-sub-item.disabled{opacity:.4;cursor:not-allowed}@container navbaritem (max-width: 60px){.navbar-sub-item{gap:0}.navbar-sub-item .navbar-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "fullWidth", "isOpen", "trigger"] }], animations: [
|
|
4933
4944
|
trigger('openClose', [
|
|
4934
4945
|
// ...
|
|
4935
4946
|
state('open', style({
|
|
@@ -4958,7 +4969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4958
4969
|
animate('.33s ease-in-out'),
|
|
4959
4970
|
]),
|
|
4960
4971
|
]),
|
|
4961
|
-
], template: "<div\n *ngIf=\"!hidden\"\n [@openClose]=\"{value: collapsed?'closed':'open'}\">\n <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n <div\n
|
|
4972
|
+
], template: "<div\n *ngIf=\"!hidden\"\n [@openClose]=\"{value: collapsed?'closed':'open'}\">\n <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n <fw-tooltip [title]=\"showTooltip ? tooltipText || title : ''\" position=\"right\" [fullWidth]=\"true\">\n <div\n [ngClass]=\"['navbar-sub-item', disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <div class=\"navbar-text\" *ngIf=\"title\">\n <h5>{{ title }}</h5>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n <div class=\"key-text vision-p2\">\n <ng-content select=\"p\"></ng-content>\n <ng-content select=\"fw-badge\"></ng-content>\n <ng-content select=\"fw-icon\"></ng-content>\n <ng-content select=\"fw-icon-button\"></ng-content>\n </div>\n </div>\n </fw-tooltip>\n </a>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover .navbar-sub-item:not(.disabled),:host.focused:not(.selected) .navbar-sub-item:not(.disabled){background-color:var(--primary-hover);cursor:pointer}:host:hover .navbar-sub-item:not(.disabled) .navbar-icon,:host.focused:not(.selected) .navbar-sub-item:not(.disabled) .navbar-icon{color:var(--primary-base)}:host:hover .navbar-sub-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-sub-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-sub-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-sub-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-sub-item:before{position:absolute;content:\" \";height:16px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-sub-item{container-name:navbaritem;container-type:size}:host fw-tooltip{display:flex;flex-direction:row;flex:1;width:-webkit-fill-available;width:-moz-available;width:stretch}:host fw-tooltip .tooltip-trigger{display:flex;flex-direction:row;flex:1;width:-webkit-fill-available;width:-moz-available;width:stretch}:host .navbar-sub-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);height:30px;width:-webkit-fill-available;width:-moz-available;width:stretch;cursor:pointer}:host .navbar-sub-item .navbar-icon{font-size:18px;white-space:nowrap}:host .navbar-sub-item .navbar-text{flex:1;overflow:hidden;padding:2px 0 2px 26px}:host .navbar-sub-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-sub-item .navbar-text p{margin:0}:host .navbar-sub-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-sub-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-sub-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important}:host .navbar-sub-item.disabled{opacity:.4;cursor:not-allowed}@container navbaritem (max-width: 60px){.navbar-sub-item{gap:0}.navbar-sub-item .navbar-text{opacity:0}}\n"] }]
|
|
4962
4973
|
}], propDecorators: { value: [{
|
|
4963
4974
|
type: Input
|
|
4964
4975
|
}], title: [{
|
|
@@ -4971,6 +4982,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4971
4982
|
type: Input
|
|
4972
4983
|
}], hidden: [{
|
|
4973
4984
|
type: Input
|
|
4985
|
+
}], tooltipText: [{
|
|
4986
|
+
type: Input
|
|
4987
|
+
}], showTooltip: [{
|
|
4988
|
+
type: Input
|
|
4974
4989
|
}], href: [{
|
|
4975
4990
|
type: Input
|
|
4976
4991
|
}], target: [{
|
|
@@ -5030,10 +5045,10 @@ class FwNavbarItemComponent {
|
|
|
5030
5045
|
}
|
|
5031
5046
|
}
|
|
5032
5047
|
FwNavbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5033
|
-
FwNavbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNavbarItemComponent, selector: "fw-navbar-item", inputs: { value: "value", title: "title", description: "description", icon: "icon", iconColor: "iconColor", disabled: "disabled", hidden: "hidden", showTooltip: "showTooltip", collapsed: "collapsed", href: "href", target: "target", subItemsOpen: "subItemsOpen", subItemsTooltipTitle: "subItemsTooltipTitle", selected: "selected" }, host: { properties: { "class.collapsed": "this.collapsed", "class.selected": "this.selected" } }, queries: [{ propertyName: "subItems", predicate: FwNavbarSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!hidden\">\n <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n <div\n
|
|
5048
|
+
FwNavbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwNavbarItemComponent, selector: "fw-navbar-item", inputs: { value: "value", title: "title", description: "description", icon: "icon", iconColor: "iconColor", disabled: "disabled", hidden: "hidden", tooltipText: "tooltipText", showTooltip: "showTooltip", collapsed: "collapsed", href: "href", target: "target", subItemsOpen: "subItemsOpen", subItemsTooltipTitle: "subItemsTooltipTitle", selected: "selected" }, host: { properties: { "class.collapsed": "this.collapsed", "class.selected": "this.selected" } }, queries: [{ propertyName: "subItems", predicate: FwNavbarSubItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!hidden\">\n <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n <fw-tooltip [title]=\"showTooltip ? tooltipText || title : ''\" position=\"right\" [fullWidth]=\"true\">\n <div\n [ngClass]=\"['navbar-item', disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"navbar-icon {{iconColor}}\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-avatar\"></ng-content>\n <div class=\"navbar-text\" *ngIf=\"title\">\n <h5 class=\"vision-h5\">{{ title }}</h5>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n <div class=\"key-text vision-p2\">\n <ng-content select=\"p\"></ng-content>\n <ng-content select=\"fw-badge\"></ng-content>\n <ng-content select=\"fw-icon\"></ng-content>\n <ng-content select=\"fw-icon-button\"></ng-content>\n <fw-tooltip\n *ngIf=\"subItems.length>0 && !collapsed\"\n [title]=\"subItemsTooltipTitle\"\n position=\"right\">\n <fw-icon-button\n [size]=\"'small'\"\n [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n (click)=\"toggleSubItemsView($event)\">\n </fw-icon-button>\n </fw-tooltip>\n </div>\n </div>\n </fw-tooltip>\n </a>\n</div>\n<div class=\"item-subitems\">\n <ng-content select=\"fw-navbar-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover:not(.selected) .navbar-item:not(.disabled),:host.focused:not(.selected) .navbar-item:not(.disabled){background-color:var(--primary-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item:before{position:absolute;content:\" \";height:16px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-item{container-name:navbaritem;container-type:size}:host .navbar-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);height:34px;width:-webkit-fill-available;width:-moz-available;width:stretch;cursor:pointer}:host .navbar-item .navbar-icon{font-size:18px;white-space:nowrap}:host .navbar-item .navbar-text{flex:1;overflow:hidden;padding:2px 0}:host .navbar-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-item .navbar-text p{margin:0}:host .navbar-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;margin-top:2px;margin-right:-4px}:host .navbar-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container navbaritem (max-width: 60px){.navbar-item{gap:0}.navbar-item .navbar-text{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwTooltipComponent, selector: "fw-tooltip", inputs: ["title", "color", "position", "maxWidth", "fullWidth", "isOpen", "trigger"] }] });
|
|
5034
5049
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwNavbarItemComponent, decorators: [{
|
|
5035
5050
|
type: Component,
|
|
5036
|
-
args: [{ selector: 'fw-navbar-item', template: "<div *ngIf=\"!hidden\">\n <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n <div\n
|
|
5051
|
+
args: [{ selector: 'fw-navbar-item', template: "<div *ngIf=\"!hidden\">\n <a [href]=\"href?href:'javascript:void(0)'\" [target]=\"target?target:''\">\n <fw-tooltip [title]=\"showTooltip ? tooltipText || title : ''\" position=\"right\" [fullWidth]=\"true\">\n <div\n [ngClass]=\"['navbar-item', disabled?'disabled':'']\"\n [class.disabled]=\"disabled\">\n <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"navbar-icon {{iconColor}}\">{{ icon }}</fw-icon>\n <ng-content select=\"fw-avatar\"></ng-content>\n <div class=\"navbar-text\" *ngIf=\"title\">\n <h5 class=\"vision-h5\">{{ title }}</h5>\n <p *ngIf=\"description\" class=\"vision-p4 description\">{{ description }}</p>\n </div>\n <div class=\"key-text vision-p2\">\n <ng-content select=\"p\"></ng-content>\n <ng-content select=\"fw-badge\"></ng-content>\n <ng-content select=\"fw-icon\"></ng-content>\n <ng-content select=\"fw-icon-button\"></ng-content>\n <fw-tooltip\n *ngIf=\"subItems.length>0 && !collapsed\"\n [title]=\"subItemsTooltipTitle\"\n position=\"right\">\n <fw-icon-button\n [size]=\"'small'\"\n [icon]=\"subItemsOpen?'chevron-up':'chevron-down'\"\n (click)=\"toggleSubItemsView($event)\">\n </fw-icon-button>\n </fw-tooltip>\n </div>\n </div>\n </fw-tooltip>\n </a>\n</div>\n<div class=\"item-subitems\">\n <ng-content select=\"fw-navbar-sub-item\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host a{text-decoration:none;color:var(--typography-base);outline:none;display:flex;flex:1;max-width:100%}:host h5{text-overflow:ellipsis}:host:hover:not(.selected) .navbar-item:not(.disabled),:host.focused:not(.selected) .navbar-item:not(.disabled){background-color:var(--primary-hover);cursor:pointer}:host:hover:not(.selected) .navbar-item:not(.disabled) .navbar-text h5,:host.focused:not(.selected) .navbar-item:not(.disabled) .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item{background-color:var(--primary-hover);cursor:pointer}:host.selected .navbar-item .navbar-icon{color:var(--primary-base)}:host.selected .navbar-item .navbar-text h5{color:var(--typography-base)}:host.selected .navbar-item:before{position:absolute;content:\" \";height:16px;border-left:3px solid var(--primary-base);margin-left:-16px}:host.collapsed .navbar-item{container-name:navbaritem;container-type:size}:host .navbar-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1;gap:8px;padding:8px 16px;border-radius:6px;margin:1px 4px;color:var(--typography-muted);height:34px;width:-webkit-fill-available;width:-moz-available;width:stretch;cursor:pointer}:host .navbar-item .navbar-icon{font-size:18px;white-space:nowrap}:host .navbar-item .navbar-text{flex:1;overflow:hidden;padding:2px 0}:host .navbar-item .navbar-text h5{margin:0;color:var(--typography-muted);white-space:nowrap;overflow:hidden}:host .navbar-item .navbar-text p{margin:0}:host .navbar-item .navbar-text p.description{color:var(--typography-light)}:host .navbar-item .key-text{display:flex;align-items:center;gap:8px;color:var(--typography-light)}:host .navbar-item .key-text fw-icon-button{min-height:22px!important;min-width:22px!important;margin-top:2px;margin-right:-4px}:host .navbar-item.disabled{opacity:.4;cursor:not-allowed}:host .item-subitems{display:flex;flex-direction:column}@container navbaritem (max-width: 60px){.navbar-item{gap:0}.navbar-item .navbar-text{opacity:0}}\n"] }]
|
|
5037
5052
|
}], propDecorators: { value: [{
|
|
5038
5053
|
type: Input
|
|
5039
5054
|
}], title: [{
|
|
@@ -5048,6 +5063,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
5048
5063
|
type: Input
|
|
5049
5064
|
}], hidden: [{
|
|
5050
5065
|
type: Input
|
|
5066
|
+
}], tooltipText: [{
|
|
5067
|
+
type: Input
|
|
5051
5068
|
}], showTooltip: [{
|
|
5052
5069
|
type: Input
|
|
5053
5070
|
}], collapsed: [{
|
|
@@ -5693,7 +5710,8 @@ class FwSelectMenuComponent {
|
|
|
5693
5710
|
this._isOpen = false;
|
|
5694
5711
|
this.focused = 0;
|
|
5695
5712
|
this.inFocusOpen = false;
|
|
5696
|
-
this.onTouched = () => {
|
|
5713
|
+
this.onTouched = () => {
|
|
5714
|
+
};
|
|
5697
5715
|
// this is just a different way of binding the controlValueAccessor
|
|
5698
5716
|
// it can be accessed in the component this way
|
|
5699
5717
|
if (this.ngControl) {
|
|
@@ -5911,10 +5929,10 @@ class FwSelectMenuComponent {
|
|
|
5911
5929
|
}
|
|
5912
5930
|
}
|
|
5913
5931
|
FwSelectMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i8.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
5914
|
-
FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSelectMenuComponent, selector: "fw-select", inputs: { options: "options", valueProperty: "valueProperty", titleProperty: "titleProperty", iconProperty: "iconProperty", staticIcon: "staticIcon", descriptionProperty: "descriptionProperty", showFilter: "showFilter", showReset: "showReset", disabled: "disabled", errored: "errored", width: "width", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", placeholder: "placeholder", value: "value" }, outputs: { change: "change", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "outsideClick($event.target)" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n <fw-text-input\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\n [leftIcon]=\"staticIcon || selectIcon\"\n [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [error]=\"errored || (invalid && touched)\"\n (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\"\n readOnly=\"true\">\n </fw-text-input>\n <ng-template #selectMenu>\n <fw-menu-container
|
|
5932
|
+
FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSelectMenuComponent, selector: "fw-select", inputs: { options: "options", valueProperty: "valueProperty", titleProperty: "titleProperty", iconProperty: "iconProperty", staticIcon: "staticIcon", descriptionProperty: "descriptionProperty", showFilter: "showFilter", showReset: "showReset", disabled: "disabled", errored: "errored", width: "width", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", placeholder: "placeholder", value: "value" }, outputs: { change: "change", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "outsideClick($event.target)" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n <fw-text-input\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\n [leftIcon]=\"staticIcon || selectIcon\"\n [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [error]=\"errored || (invalid && touched)\"\n (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\"\n readOnly=\"true\">\n </fw-text-input>\n <ng-template #selectMenu>\n <fw-menu-container\n *ngIf=\"!disabled\" [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\"\n [maxHeight]=\"maxOptionsHeight\" (filterChanged)=\"filterChanged.emit($event)\">\n <fw-menu [disabled]=\"disabled\" [value]=\"selectValue\" (change)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of options\"\n [title]=\"item[titleProperty].toString()\"\n [description]=\"item[descriptionProperty]\"\n [value]=\"item[valueProperty].toString()\"\n [icon]=\"item[iconProperty]\"\n >\n </fw-menu-item>\n </ng-container>\n <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"], dependencies: [{ 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value", "variant", "collapsed", "collapsedWidth", "openWidth"], outputs: ["change", "filteredItemsChange"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset", "collapsed"], outputs: ["filterChanged"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "error", "value"], outputs: ["leftIconAction", "rightIconAction"] }] });
|
|
5915
5933
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
|
|
5916
5934
|
type: Component,
|
|
5917
|
-
args: [{ selector: 'fw-select', template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n <fw-text-input\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\n [leftIcon]=\"staticIcon || selectIcon\"\n [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [error]=\"errored || (invalid && touched)\"\n (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\"\n readOnly=\"true\">\n </fw-text-input>\n <ng-template #selectMenu>\n <fw-menu-container
|
|
5935
|
+
args: [{ selector: 'fw-select', template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n <fw-text-input\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\n [leftIcon]=\"staticIcon || selectIcon\"\n [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [error]=\"errored || (invalid && touched)\"\n (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\"\n readOnly=\"true\">\n </fw-text-input>\n <ng-template #selectMenu>\n <fw-menu-container\n *ngIf=\"!disabled\" [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\"\n [maxHeight]=\"maxOptionsHeight\" (filterChanged)=\"filterChanged.emit($event)\">\n <fw-menu [disabled]=\"disabled\" [value]=\"selectValue\" (change)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of options\"\n [title]=\"item[titleProperty].toString()\"\n [description]=\"item[descriptionProperty]\"\n [value]=\"item[valueProperty].toString()\"\n [icon]=\"item[iconProperty]\"\n >\n </fw-menu-item>\n </ng-container>\n <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"] }]
|
|
5918
5936
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i8.NgControl, decorators: [{
|
|
5919
5937
|
type: Optional
|
|
5920
5938
|
}, {
|
|
@@ -8333,14 +8351,18 @@ class FwWrappedInputComponent {
|
|
|
8333
8351
|
;
|
|
8334
8352
|
}
|
|
8335
8353
|
FwWrappedInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwWrappedInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8336
|
-
FwWrappedInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwWrappedInputComponent, selector: "fw-wrapped-input", inputs: { title: "title", description: "description" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<label>\n <fw-form-heading *ngIf=\"title\" [title]=\"title\" [description]=\"description\"></fw-form-heading>\n <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n <ng-content\n select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select fw-checkbox\"></ng-content>\n</div>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwFormHeadingComponent, selector: "fw-form-heading", inputs: ["title", "description", "status"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
8354
|
+
FwWrappedInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwWrappedInputComponent, selector: "fw-wrapped-input", inputs: { title: "title", description: "description", helperText: "helperText", errorText: "errorText" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<label>\n <fw-form-heading *ngIf=\"title\" [title]=\"title\" [description]=\"description\"></fw-form-heading>\n <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n <ng-content\n select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox\"></ng-content>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText && !errorText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}.fw-wrapped-input .helper-text,.fw-wrapped-input .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0;text-align:left}.fw-wrapped-input .error-text{color:var(--red-base)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwFormHeadingComponent, selector: "fw-form-heading", inputs: ["title", "description", "status"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
8337
8355
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwWrappedInputComponent, decorators: [{
|
|
8338
8356
|
type: Component,
|
|
8339
|
-
args: [{ selector: 'fw-wrapped-input', encapsulation: ViewEncapsulation.None, template: "<label>\n <fw-form-heading *ngIf=\"title\" [title]=\"title\" [description]=\"description\"></fw-form-heading>\n <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n <ng-content\n select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select fw-checkbox\"></ng-content>\n</div>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}\n"] }]
|
|
8357
|
+
args: [{ selector: 'fw-wrapped-input', encapsulation: ViewEncapsulation.None, template: "<label>\n <fw-form-heading *ngIf=\"title\" [title]=\"title\" [description]=\"description\"></fw-form-heading>\n <ng-content select=\"fw-form-heading\"></ng-content>\n</label>\n<div class=\"input-wrapper\">\n <ng-content\n select=\"fw-button-toggle, fw-date-input, fw-text-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox\"></ng-content>\n</div>\n<p class=\"vision-p4 helper-text\" *ngIf=\"!!helperText && !errorText\">{{ helperText }}</p>\n<p class=\"vision-p4 error-text\" *ngIf=\"!!errorText\">{{ errorText }}</p>\n", styles: [".fw-wrapped-input{display:flex;flex-direction:column;flex:1}.fw-wrapped-input .input-wrapper{display:flex;flex-direction:row;flex:1;gap:16px}.fw-wrapped-input .input-wrapper>*{flex:1}.fw-wrapped-input .helper-text,.fw-wrapped-input .error-text{margin-top:4px;color:var(--typography-light);line-height:13px;margin-left:6px;margin-bottom:0;text-align:left}.fw-wrapped-input .error-text{color:var(--red-base)}\n"] }]
|
|
8340
8358
|
}], propDecorators: { title: [{
|
|
8341
8359
|
type: Input
|
|
8342
8360
|
}], description: [{
|
|
8343
8361
|
type: Input
|
|
8362
|
+
}], helperText: [{
|
|
8363
|
+
type: Input
|
|
8364
|
+
}], errorText: [{
|
|
8365
|
+
type: Input
|
|
8344
8366
|
}], classes: [{
|
|
8345
8367
|
type: HostBinding,
|
|
8346
8368
|
args: ['attr.class']
|