@flywheel-io/vision 21.0.0-beta.3 → 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.
|
@@ -2748,8 +2748,6 @@ class FwContainedInputComponent {
|
|
|
2748
2748
|
if (!this.disabled()) {
|
|
2749
2749
|
const checked = this.checked();
|
|
2750
2750
|
this.writeValue(!checked);
|
|
2751
|
-
this.onChange(checked);
|
|
2752
|
-
this.change.emit(checked);
|
|
2753
2751
|
}
|
|
2754
2752
|
}
|
|
2755
2753
|
get classes() {
|
|
@@ -2760,8 +2758,10 @@ class FwContainedInputComponent {
|
|
|
2760
2758
|
[this.disabled() ? 'disabled' : ''],
|
|
2761
2759
|
].join(' ');
|
|
2762
2760
|
}
|
|
2763
|
-
writeValue(
|
|
2764
|
-
this.checked.set(
|
|
2761
|
+
writeValue(newValue) {
|
|
2762
|
+
this.checked.set(newValue);
|
|
2763
|
+
this.onChange(newValue);
|
|
2764
|
+
this.change.emit(newValue);
|
|
2765
2765
|
}
|
|
2766
2766
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2767
2767
|
registerOnChange(fn) {
|
|
@@ -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
|
}
|
|
@@ -5653,19 +5653,23 @@ class FwMultiSelectMenuComponent {
|
|
|
5653
5653
|
this._isOpen = false;
|
|
5654
5654
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
5655
5655
|
this.change = new EventEmitter();
|
|
5656
|
-
this.
|
|
5657
|
-
this.tabIndex = 0;
|
|
5658
|
-
this.onChange = () => { };
|
|
5659
|
-
this.onTouched = () => { };
|
|
5660
|
-
// custom filter for handling filterOnSelect
|
|
5661
|
-
this.customFilter = (filter, menuItems) => {
|
|
5656
|
+
this.defaultFilter = (filter, menuItems) => {
|
|
5662
5657
|
return menuItems.filter((menuItem) => {
|
|
5663
|
-
const filterMatches = menuItem.title()
|
|
5658
|
+
const filterMatches = menuItem.title()?.toLowerCase().includes(filter.toLowerCase());
|
|
5664
5659
|
const isSelected = this.value.includes(menuItem.value());
|
|
5665
5660
|
const filterBecauseSelected = isSelected && this.filterItemsOnSelect();
|
|
5666
5661
|
return filterMatches && !filterBecauseSelected;
|
|
5667
5662
|
});
|
|
5668
5663
|
};
|
|
5664
|
+
/**
|
|
5665
|
+
* function for customizing the filter behavior of the select
|
|
5666
|
+
* ! WARNING ! only works with content-projected menu items, does not work with the `options` input
|
|
5667
|
+
*/
|
|
5668
|
+
this.filterFn = input(this.defaultFilter, ...(ngDevMode ? [{ debugName: "filterFn" }] : /* istanbul ignore next */ []));
|
|
5669
|
+
this._value = [];
|
|
5670
|
+
this.tabIndex = 0;
|
|
5671
|
+
this.onChange = () => { };
|
|
5672
|
+
this.onTouched = () => { };
|
|
5669
5673
|
this.displayFocusIndicator = effect(() => {
|
|
5670
5674
|
this.displayedOptions().forEach((item, index) => {
|
|
5671
5675
|
item.focused.set(index === this.focusedIndex());
|
|
@@ -5889,13 +5893,13 @@ class FwMultiSelectMenuComponent {
|
|
|
5889
5893
|
}
|
|
5890
5894
|
}
|
|
5891
5895
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwMultiSelectMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5892
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwMultiSelectMenuComponent, isStandalone: true, selector: "fw-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, valueProperty: { classPropertyName: "valueProperty", publicName: "valueProperty", isSignal: true, isRequired: false, transformFunction: null }, titleProperty: { classPropertyName: "titleProperty", publicName: "titleProperty", isSignal: true, isRequired: false, transformFunction: null }, iconProperty: { classPropertyName: "iconProperty", publicName: "iconProperty", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, useCheckbox: { classPropertyName: "useCheckbox", publicName: "useCheckbox", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedShown: { classPropertyName: "maxSelectedShown", publicName: "maxSelectedShown", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showSelectionInfo: { classPropertyName: "showSelectionInfo", publicName: "showSelectionInfo", isSignal: true, isRequired: false, transformFunction: null }, filterItemsOnSelect: { classPropertyName: "filterItemsOnSelect", publicName: "filterItemsOnSelect", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", change: "change" }, host: { listeners: { "document:click": "outsideClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "tabIndex": "this.tabIndex", "class.disabled": "this.disabledClass" } }, providers: [
|
|
5896
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FwMultiSelectMenuComponent, isStandalone: true, selector: "fw-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, valueProperty: { classPropertyName: "valueProperty", publicName: "valueProperty", isSignal: true, isRequired: false, transformFunction: null }, titleProperty: { classPropertyName: "titleProperty", publicName: "titleProperty", isSignal: true, isRequired: false, transformFunction: null }, iconProperty: { classPropertyName: "iconProperty", publicName: "iconProperty", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, useCheckbox: { classPropertyName: "useCheckbox", publicName: "useCheckbox", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedShown: { classPropertyName: "maxSelectedShown", publicName: "maxSelectedShown", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showSelectionInfo: { classPropertyName: "showSelectionInfo", publicName: "showSelectionInfo", isSignal: true, isRequired: false, transformFunction: null }, filterItemsOnSelect: { classPropertyName: "filterItemsOnSelect", publicName: "filterItemsOnSelect", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: true, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", change: "change" }, host: { listeners: { "document:click": "outsideClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "tabIndex": "this.tabIndex", "class.disabled": "this.disabledClass" } }, providers: [
|
|
5893
5897
|
{
|
|
5894
5898
|
provide: NG_VALUE_ACCESSOR,
|
|
5895
5899
|
useExisting: forwardRef(() => FwMultiSelectMenuComponent),
|
|
5896
5900
|
multi: true,
|
|
5897
5901
|
},
|
|
5898
|
-
], queries: [{ propertyName: "customMenuItems", predicate: FwMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "menuFilter", first: true, predicate: FwMenuContainerComponent, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{ width: width() }\" #wrapper>\n <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size()]\"\n [ngStyle]=\"{ minHeight: minHeight(), maxHeight: maxHeight() }\"\n [cdkMenuTriggerFor]=\"selectMenu\"\n >\n @if (value.length === 0) {\n <span class=\"placeholder\">{{ placeholder() }}</span>\n }\n\n <!-- CHIPS -->\n @if (value && value.length > 0) {\n <div class=\"inner-chip-grid\">\n @for (chip of selectedOptions | slice: 0 : maxSelectedShown(); track chip) {\n <fw-chip\n [title]=\"chip[titleProperty()]\"\n [value]=\"chip[valueProperty()]\"\n [icon]=\"chip[iconProperty()]\"\n color=\"primary\"\n [showClose]=\"true\"\n (close)=\"handleChipClose(chip)\"\n [selectable]=\"false\"\n >\n </fw-chip>\n }\n @if (maxSelectedShown() === 0 && value.length > 0) {\n <span class=\"selected-text\"> {{ value.length }} selected </span>\n }\n @if (value.length > maxSelectedShown() && maxSelectedShown() > 0) {\n <span class=\"max-exceeded\"> +{{ value.length - maxSelectedShown() }} more </span>\n }\n </div>\n }\n\n @if (showClear() && value.length > 0) {\n <fw-icon (click)=\"updateValue([])\">close</fw-icon>\n }\n <fw-icon>chevron-down</fw-icon>\n </div>\n\n <!-- MENU -->\n <ng-template #selectMenu>\n <fw-menu-filter\n [keyHandler]=\"handleKeyDown\"\n [showFilter]=\"showFilter()\"\n [focusFilterOnMount]=\"showFilter()\"\n [width]=\"optionsWidth() || wrapper.offsetWidth - 2 + 'px'\"\n [additionalMenuItems]=\"this.customMenuItems.toArray()\"\n [emptyText]=\"emptyText()\"\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [filterFn]=\"
|
|
5902
|
+
], queries: [{ propertyName: "customMenuItems", predicate: FwMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "menuFilter", first: true, predicate: FwMenuContainerComponent, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{ width: width() }\" #wrapper>\n <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size()]\"\n [ngStyle]=\"{ minHeight: minHeight(), maxHeight: maxHeight() }\"\n [cdkMenuTriggerFor]=\"selectMenu\"\n >\n @if (value.length === 0) {\n <span class=\"placeholder\">{{ placeholder() }}</span>\n }\n\n <!-- CHIPS -->\n @if (value && value.length > 0) {\n <div class=\"inner-chip-grid\">\n @for (chip of selectedOptions | slice: 0 : maxSelectedShown(); track chip) {\n <fw-chip\n [title]=\"chip[titleProperty()]\"\n [value]=\"chip[valueProperty()]\"\n [icon]=\"chip[iconProperty()]\"\n color=\"primary\"\n [showClose]=\"true\"\n (close)=\"handleChipClose(chip)\"\n [selectable]=\"false\"\n >\n </fw-chip>\n }\n @if (maxSelectedShown() === 0 && value.length > 0) {\n <span class=\"selected-text\"> {{ value.length }} selected </span>\n }\n @if (value.length > maxSelectedShown() && maxSelectedShown() > 0) {\n <span class=\"max-exceeded\"> +{{ value.length - maxSelectedShown() }} more </span>\n }\n </div>\n }\n\n @if (showClear() && value.length > 0) {\n <fw-icon (click)=\"updateValue([])\">close</fw-icon>\n }\n <fw-icon>chevron-down</fw-icon>\n </div>\n\n <!-- MENU -->\n <ng-template #selectMenu>\n <fw-menu-filter\n [keyHandler]=\"handleKeyDown\"\n [showFilter]=\"showFilter()\"\n [focusFilterOnMount]=\"showFilter()\"\n [width]=\"optionsWidth() || wrapper.offsetWidth - 2 + 'px'\"\n [additionalMenuItems]=\"this.customMenuItems.toArray()\"\n [emptyText]=\"emptyText()\"\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [filterFn]=\"filterFn()\"\n (filteredMenuItemChange)=\"displayedOptions.set($event)\"\n >\n @if (showSelectionInfo()) {\n <div class=\"filter-content\">\n <p>{{ value.length }} selections</p>\n <fw-button variant=\"ghost\" (click)=\"updateValue([])\">Clear</fw-button>\n </div>\n }\n <fw-menu\n [multiSelect]=\"true\"\n [disabled]=\"disabled()\"\n [value]=\"createArray(selectedValues)\"\n (change)=\"handleMenuChange($event)\"\n >\n @if (customMenuItems.length === 0) {\n @for (item of options(); track item) {\n <fw-menu-item\n [title]=\"item[titleProperty()]\"\n [value]=\"item[valueProperty()]\"\n [icon]=\"item[iconProperty()]\"\n [multiSelect]=\"true\"\n [selected]=\"value.includes(item[valueProperty()])\"\n [showCheckbox]=\"useCheckbox()\"\n (mouseenter)=\"setFocusedIndex(item)\"\n >\n </fw-menu-item>\n }\n }\n <ng-content\n ngProjectAs=\"custom-menu-items\"\n select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group, fw-menu-header]\"\n ></ng-content>\n </fw-menu>\n </fw-menu-filter>\n </ng-template>\n</div>\n", styles: [":host{pointer-events:auto}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}:host .placeholder{color:var(--typography-light);font-size:14px;padding-left:4px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}:host .chip-grid{min-height:36px;width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;justify-content:space-between;padding:4px;align-items:center;border-radius:6px;overflow:hidden;border:1px solid var(--separations-input);cursor:pointer;font-family:Inter,sans-serif}:host .chip-grid.small{min-height:30px;padding:2px}:host .chip-grid.large{min-height:40px;padding:6px}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .selected-text{color:var(--typography-base);font-size:14px;padding:0 2px 0 4px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}:host .chip-grid .max-exceeded{font-size:12px}.filter-content{display:flex;align-items:center;justify-content:space-between;padding-left:4px;padding-top:4px}.filter-content p{color:var(--typography-muted);width:fit-content;margin:0}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["maxWidth", "value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "textWrap", "selectable"], outputs: ["close", "select"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "additionalGroups", "additionalSeparators", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["disabledChange", "valueChange", "change"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "collapsed", "href", "target", "subItemsOpen", "mouseEnterHandler", "focused", "selected"], outputs: ["sizeChange", "disabledChange", "showCheckboxChange", "multiSelectChange", "hiddenChange", "subItemsOpenChange", "mouseEnterHandlerChange", "click", "focusedChange", "selectedChange"] }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
|
|
5899
5903
|
}
|
|
5900
5904
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FwMultiSelectMenuComponent, decorators: [{
|
|
5901
5905
|
type: Component,
|
|
@@ -5917,7 +5921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5917
5921
|
FwMenuComponent,
|
|
5918
5922
|
FwMenuItemComponent,
|
|
5919
5923
|
SlicePipe,
|
|
5920
|
-
], template: "<div [ngStyle]=\"{ width: width() }\" #wrapper>\n <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size()]\"\n [ngStyle]=\"{ minHeight: minHeight(), maxHeight: maxHeight() }\"\n [cdkMenuTriggerFor]=\"selectMenu\"\n >\n @if (value.length === 0) {\n <span class=\"placeholder\">{{ placeholder() }}</span>\n }\n\n <!-- CHIPS -->\n @if (value && value.length > 0) {\n <div class=\"inner-chip-grid\">\n @for (chip of selectedOptions | slice: 0 : maxSelectedShown(); track chip) {\n <fw-chip\n [title]=\"chip[titleProperty()]\"\n [value]=\"chip[valueProperty()]\"\n [icon]=\"chip[iconProperty()]\"\n color=\"primary\"\n [showClose]=\"true\"\n (close)=\"handleChipClose(chip)\"\n [selectable]=\"false\"\n >\n </fw-chip>\n }\n @if (maxSelectedShown() === 0 && value.length > 0) {\n <span class=\"selected-text\"> {{ value.length }} selected </span>\n }\n @if (value.length > maxSelectedShown() && maxSelectedShown() > 0) {\n <span class=\"max-exceeded\"> +{{ value.length - maxSelectedShown() }} more </span>\n }\n </div>\n }\n\n @if (showClear() && value.length > 0) {\n <fw-icon (click)=\"updateValue([])\">close</fw-icon>\n }\n <fw-icon>chevron-down</fw-icon>\n </div>\n\n <!-- MENU -->\n <ng-template #selectMenu>\n <fw-menu-filter\n [keyHandler]=\"handleKeyDown\"\n [showFilter]=\"showFilter()\"\n [focusFilterOnMount]=\"showFilter()\"\n [width]=\"optionsWidth() || wrapper.offsetWidth - 2 + 'px'\"\n [additionalMenuItems]=\"this.customMenuItems.toArray()\"\n [emptyText]=\"emptyText()\"\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [filterFn]=\"
|
|
5924
|
+
], template: "<div [ngStyle]=\"{ width: width() }\" #wrapper>\n <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size()]\"\n [ngStyle]=\"{ minHeight: minHeight(), maxHeight: maxHeight() }\"\n [cdkMenuTriggerFor]=\"selectMenu\"\n >\n @if (value.length === 0) {\n <span class=\"placeholder\">{{ placeholder() }}</span>\n }\n\n <!-- CHIPS -->\n @if (value && value.length > 0) {\n <div class=\"inner-chip-grid\">\n @for (chip of selectedOptions | slice: 0 : maxSelectedShown(); track chip) {\n <fw-chip\n [title]=\"chip[titleProperty()]\"\n [value]=\"chip[valueProperty()]\"\n [icon]=\"chip[iconProperty()]\"\n color=\"primary\"\n [showClose]=\"true\"\n (close)=\"handleChipClose(chip)\"\n [selectable]=\"false\"\n >\n </fw-chip>\n }\n @if (maxSelectedShown() === 0 && value.length > 0) {\n <span class=\"selected-text\"> {{ value.length }} selected </span>\n }\n @if (value.length > maxSelectedShown() && maxSelectedShown() > 0) {\n <span class=\"max-exceeded\"> +{{ value.length - maxSelectedShown() }} more </span>\n }\n </div>\n }\n\n @if (showClear() && value.length > 0) {\n <fw-icon (click)=\"updateValue([])\">close</fw-icon>\n }\n <fw-icon>chevron-down</fw-icon>\n </div>\n\n <!-- MENU -->\n <ng-template #selectMenu>\n <fw-menu-filter\n [keyHandler]=\"handleKeyDown\"\n [showFilter]=\"showFilter()\"\n [focusFilterOnMount]=\"showFilter()\"\n [width]=\"optionsWidth() || wrapper.offsetWidth - 2 + 'px'\"\n [additionalMenuItems]=\"this.customMenuItems.toArray()\"\n [emptyText]=\"emptyText()\"\n [maxHeight]=\"maxOptionsHeight()\"\n [minHeight]=\"minOptionsHeight()\"\n [filterFn]=\"filterFn()\"\n (filteredMenuItemChange)=\"displayedOptions.set($event)\"\n >\n @if (showSelectionInfo()) {\n <div class=\"filter-content\">\n <p>{{ value.length }} selections</p>\n <fw-button variant=\"ghost\" (click)=\"updateValue([])\">Clear</fw-button>\n </div>\n }\n <fw-menu\n [multiSelect]=\"true\"\n [disabled]=\"disabled()\"\n [value]=\"createArray(selectedValues)\"\n (change)=\"handleMenuChange($event)\"\n >\n @if (customMenuItems.length === 0) {\n @for (item of options(); track item) {\n <fw-menu-item\n [title]=\"item[titleProperty()]\"\n [value]=\"item[valueProperty()]\"\n [icon]=\"item[iconProperty()]\"\n [multiSelect]=\"true\"\n [selected]=\"value.includes(item[valueProperty()])\"\n [showCheckbox]=\"useCheckbox()\"\n (mouseenter)=\"setFocusedIndex(item)\"\n >\n </fw-menu-item>\n }\n }\n <ng-content\n ngProjectAs=\"custom-menu-items\"\n select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group, fw-menu-header]\"\n ></ng-content>\n </fw-menu>\n </fw-menu-filter>\n </ng-template>\n</div>\n", styles: [":host{pointer-events:auto}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}:host .placeholder{color:var(--typography-light);font-size:14px;padding-left:4px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}:host .chip-grid{min-height:36px;width:100%;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;justify-content:space-between;padding:4px;align-items:center;border-radius:6px;overflow:hidden;border:1px solid var(--separations-input);cursor:pointer;font-family:Inter,sans-serif}:host .chip-grid.small{min-height:30px;padding:2px}:host .chip-grid.large{min-height:40px;padding:6px}:host .chip-grid:focus-within{border-color:var(--primary-base)}:host .chip-grid .inner-chip-grid{display:flex;flex-wrap:wrap;gap:4px;overflow:hidden auto;align-items:center;flex:1}:host .chip-grid .inner-chip-grid input{display:inline-flex;width:10px;flex-grow:1}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .selected-text{color:var(--typography-base);font-size:14px;padding:0 2px 0 4px;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}:host .chip-grid .max-exceeded{font-size:12px}.filter-content{display:flex;align-items:center;justify-content:space-between;padding-left:4px;padding-top:4px}.filter-content p{color:var(--typography-muted);width:fit-content;margin:0}\n"] }]
|
|
5921
5925
|
}], propDecorators: { outsideClick: [{
|
|
5922
5926
|
type: HostListener,
|
|
5923
5927
|
args: ['document:click', ['$event']]
|
|
@@ -5935,7 +5939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
5935
5939
|
args: [FwMenuItemComponent, { descendants: true }]
|
|
5936
5940
|
}], change: [{
|
|
5937
5941
|
type: Output
|
|
5938
|
-
}], value: [{
|
|
5942
|
+
}], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], value: [{
|
|
5939
5943
|
type: Input
|
|
5940
5944
|
}], tabIndex: [{
|
|
5941
5945
|
type: HostBinding,
|