@flywheel-io/vision 21.0.0-beta.4 → 21.0.0-beta.5
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.
|
@@ -5163,13 +5163,13 @@ class FwNavbarItemComponent {
|
|
|
5163
5163
|
return false;
|
|
5164
5164
|
}
|
|
5165
5165
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5166
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwNavbarItemComponent, isStandalone: true, selector: "fw-navbar-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, subItemsOpen: { classPropertyName: "subItemsOpen", publicName: "subItemsOpen", isSignal: true, isRequired: false, transformFunction: null }, subItemsTooltipTitle: { classPropertyName: "subItemsTooltipTitle", publicName: "subItemsTooltipTitle", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { iconColor: "iconColorChange", disabled: "disabledChange", showTooltip: "showTooltipChange", collapsed: "collapsedChange", subItemsOpen: "subItemsOpenChange" }, host: {
|
|
5166
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwNavbarItemComponent, isStandalone: true, selector: "fw-navbar-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, subItemsOpen: { classPropertyName: "subItemsOpen", publicName: "subItemsOpen", isSignal: true, isRequired: false, transformFunction: null }, subItemsTooltipTitle: { classPropertyName: "subItemsTooltipTitle", publicName: "subItemsTooltipTitle", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { iconColor: "iconColorChange", disabled: "disabledChange", showTooltip: "showTooltipChange", collapsed: "collapsedChange", subItemsOpen: "subItemsOpenChange" }, host: { properties: { "class.selected": "selected()", "class.collapsed": "collapsed()" } }, queries: [{ propertyName: "subItems", predicate: FwNavbarSubItemComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (!hidden()) {\n <div>\n <a [href]=\"href() ? href() : 'javascript:void(0)'\" [target]=\"target() ? target() : ''\">\n <div\n class=\"navbar-item\"\n [class.disabled]=\"disabled()\"\n [fwTooltip]=\"tooltipText() || title() || ''\"\n fwTooltipPosition=\"right\"\n [fwTooltipEnabled]=\"showTooltip()\">\n @if (icon()) {\n <fw-icon [color]=\"iconColor()\" class=\"navbar-icon {{ iconColor() }}\">{{ icon() }}</fw-icon>\n }\n <ng-content select=\"fw-avatar\"></ng-content>\n @if (title()) {\n <div class=\"navbar-text\">\n <h5 class=\"vision-h5\">{{ title() }}</h5>\n @if (description()) {\n <p class=\"vision-p4 description\">{{ description() }}</p>\n }\n </div>\n }\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 @if (subItems.length > 0 && !collapsed()) {\n <fw-icon-button\n [fwTooltip]=\"subItemsTooltipTitle()\"\n fwTooltipPosition=\"right\"\n [size]=\"'small'\"\n [icon]=\"subItemsOpen() ? 'chevron-up' : 'chevron-down'\"\n (click)=\"toggleSubItemsView($event)\"\n />\n }\n </div>\n </div>\n </a>\n </div>\n}\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:stretch;cursor:pointer}:host .navbar-item .navbar-icon{font-size:18px;width:18px;max-width: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: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected", "border"] }, { kind: "directive", type: FwTooltipDirective, selector: "[fwTooltip]", inputs: ["fwTooltip", "fwTooltipPosition", "fwTooltipMaxWidthPx", "fwTooltipClass", "fwTooltipDelay", "fwTooltipCaret", "fwTooltipEnabled"], outputs: ["fwTooltipChange", "fwTooltipPositionChange", "fwTooltipMaxWidthPxChange", "fwTooltipClassChange", "fwTooltipEnabledChange"] }] }); }
|
|
5167
5167
|
}
|
|
5168
5168
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwNavbarItemComponent, decorators: [{
|
|
5169
5169
|
type: Component,
|
|
5170
5170
|
args: [{ selector: 'fw-navbar-item', host: {
|
|
5171
5171
|
'[class.selected]': 'selected()',
|
|
5172
|
-
'class.collapsed': 'collapsed()',
|
|
5172
|
+
'[class.collapsed]': 'collapsed()',
|
|
5173
5173
|
}, imports: [FwIconComponent, FwIconButtonComponent, FwTooltipDirective], template: "@if (!hidden()) {\n <div>\n <a [href]=\"href() ? href() : 'javascript:void(0)'\" [target]=\"target() ? target() : ''\">\n <div\n class=\"navbar-item\"\n [class.disabled]=\"disabled()\"\n [fwTooltip]=\"tooltipText() || title() || ''\"\n fwTooltipPosition=\"right\"\n [fwTooltipEnabled]=\"showTooltip()\">\n @if (icon()) {\n <fw-icon [color]=\"iconColor()\" class=\"navbar-icon {{ iconColor() }}\">{{ icon() }}</fw-icon>\n }\n <ng-content select=\"fw-avatar\"></ng-content>\n @if (title()) {\n <div class=\"navbar-text\">\n <h5 class=\"vision-h5\">{{ title() }}</h5>\n @if (description()) {\n <p class=\"vision-p4 description\">{{ description() }}</p>\n }\n </div>\n }\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 @if (subItems.length > 0 && !collapsed()) {\n <fw-icon-button\n [fwTooltip]=\"subItemsTooltipTitle()\"\n fwTooltipPosition=\"right\"\n [size]=\"'small'\"\n [icon]=\"subItemsOpen() ? 'chevron-up' : 'chevron-down'\"\n (click)=\"toggleSubItemsView($event)\"\n />\n }\n </div>\n </div>\n </a>\n </div>\n}\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:stretch;cursor:pointer}:host .navbar-item .navbar-icon{font-size:18px;width:18px;max-width: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"] }]
|
|
5174
5174
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }, { type: i0.Output, args: ["iconColorChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], tooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }, { type: i0.Output, args: ["showTooltipChange"] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], subItemsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "subItemsOpen", required: false }] }, { type: i0.Output, args: ["subItemsOpenChange"] }], subItemsTooltipTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subItemsTooltipTitle", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], subItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FwNavbarSubItemComponent), { isSignal: true }] }] } });
|
|
5175
5175
|
|
|
@@ -5201,7 +5201,7 @@ class FwNavbarComponent {
|
|
|
5201
5201
|
if (disabled !== undefined) {
|
|
5202
5202
|
item.disabled.set(disabled);
|
|
5203
5203
|
}
|
|
5204
|
-
item.showTooltip.set(collapsed);
|
|
5204
|
+
item.showTooltip.set(Boolean(collapsed));
|
|
5205
5205
|
item.updateLayout();
|
|
5206
5206
|
});
|
|
5207
5207
|
}
|