@flywheel-io/vision 2.7.6 → 2.7.7
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/select-menu/multi-select-menu/multi-select-menu.component.d.ts +4 -5
- package/components/select-menu/select-menu.component.d.ts +1 -0
- package/esm2022/components/select-menu/multi-select-menu/multi-select-menu.component.mjs +17 -14
- package/esm2022/components/select-menu/select-menu.component.mjs +10 -4
- package/fesm2022/flywheel-io-vision.mjs +24 -15
- package/fesm2022/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -5755,8 +5755,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
5755
5755
|
* @see [Storybook Docs](https://cdn.flywheel.io/docs/vision/master/?path=/docs/form-controls-multi-select--docs)
|
|
5756
5756
|
*/
|
|
5757
5757
|
class FwMultiSelectMenuComponent {
|
|
5758
|
-
outsideClick() {
|
|
5758
|
+
outsideClick(event) {
|
|
5759
5759
|
if (this._isOpen) {
|
|
5760
|
+
const clickedInside = this.elementRef.nativeElement.contains(event.target);
|
|
5761
|
+
if (clickedInside) {
|
|
5762
|
+
return;
|
|
5763
|
+
}
|
|
5760
5764
|
this.trigger.close();
|
|
5761
5765
|
this._isOpen = false;
|
|
5762
5766
|
}
|
|
@@ -5770,8 +5774,7 @@ class FwMultiSelectMenuComponent {
|
|
|
5770
5774
|
set value(newValue) {
|
|
5771
5775
|
this.updateValue(newValue);
|
|
5772
5776
|
}
|
|
5773
|
-
constructor(
|
|
5774
|
-
this._changeDetectorRef = _changeDetectorRef;
|
|
5777
|
+
constructor(elementRef) {
|
|
5775
5778
|
this.elementRef = elementRef;
|
|
5776
5779
|
// options
|
|
5777
5780
|
this.options = [];
|
|
@@ -5868,8 +5871,8 @@ class FwMultiSelectMenuComponent {
|
|
|
5868
5871
|
}
|
|
5869
5872
|
};
|
|
5870
5873
|
}
|
|
5871
|
-
get
|
|
5872
|
-
return this.disabled
|
|
5874
|
+
get disabledClass() {
|
|
5875
|
+
return this.disabled;
|
|
5873
5876
|
}
|
|
5874
5877
|
registerOnChange(fn) {
|
|
5875
5878
|
this.onChange = fn;
|
|
@@ -6021,14 +6024,14 @@ class FwMultiSelectMenuComponent {
|
|
|
6021
6024
|
}, 0);
|
|
6022
6025
|
}
|
|
6023
6026
|
}
|
|
6024
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMultiSelectMenuComponent, deps: [{ token: i0.
|
|
6025
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: FwMultiSelectMenuComponent, selector: "fw-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, valueProperty: { classPropertyName: "valueProperty", publicName: "valueProperty", isSignal: false, isRequired: false, transformFunction: null }, titleProperty: { classPropertyName: "titleProperty", publicName: "titleProperty", isSignal: false, isRequired: false, transformFunction: null }, iconProperty: { classPropertyName: "iconProperty", publicName: "iconProperty", isSignal: false, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, useCheckbox: { classPropertyName: "useCheckbox", publicName: "useCheckbox", isSignal: false, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: false, isRequired: false, transformFunction: null }, maxSelectedShown: { classPropertyName: "maxSelectedShown", publicName: "maxSelectedShown", isSignal: false, 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: false, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: false, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: false, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: false, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: false, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "document:click": "outsideClick()", "keydown": "handleKeyDown($event)" }, properties: { "tabIndex": "this.tabIndex", "
|
|
6027
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMultiSelectMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6028
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: FwMultiSelectMenuComponent, selector: "fw-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, valueProperty: { classPropertyName: "valueProperty", publicName: "valueProperty", isSignal: false, isRequired: false, transformFunction: null }, titleProperty: { classPropertyName: "titleProperty", publicName: "titleProperty", isSignal: false, isRequired: false, transformFunction: null }, iconProperty: { classPropertyName: "iconProperty", publicName: "iconProperty", isSignal: false, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, useCheckbox: { classPropertyName: "useCheckbox", publicName: "useCheckbox", isSignal: false, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: false, isRequired: false, transformFunction: null }, maxSelectedShown: { classPropertyName: "maxSelectedShown", publicName: "maxSelectedShown", isSignal: false, 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: false, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: false, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: false, isRequired: false, transformFunction: null }, optionsWidth: { classPropertyName: "optionsWidth", publicName: "optionsWidth", isSignal: false, isRequired: false, transformFunction: null }, minOptionsHeight: { classPropertyName: "minOptionsHeight", publicName: "minOptionsHeight", isSignal: false, isRequired: false, transformFunction: null }, maxOptionsHeight: { classPropertyName: "maxOptionsHeight", publicName: "maxOptionsHeight", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "document:click": "outsideClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "tabIndex": "this.tabIndex", "class.disabled": "this.disabledClass" } }, providers: [
|
|
6026
6029
|
{
|
|
6027
6030
|
provide: NG_VALUE_ACCESSOR,
|
|
6028
6031
|
useExisting: forwardRef(() => FwMultiSelectMenuComponent),
|
|
6029
6032
|
multi: true,
|
|
6030
6033
|
},
|
|
6031
|
-
], 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\n <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size]\"\n [ngStyle]=\"{ minHeight: minHeight, maxHeight: maxHeight }\"\n [cdkMenuTriggerFor]=\"selectMenu\">\n <span *ngIf=\"value.length === 0\" class=\"placeholder\">{{placeholder}}</span>\n\n <!-- CHIPS -->\n <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n <fw-chip\n *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\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 </fw-chip>\n <span *ngIf=\"maxSelectedShown === 0 && value.length > 0\" class=\"selected-text\">\n {{ value.length }} selected\n </span>\n <span *ngIf=\"value.length > maxSelectedShown && maxSelectedShown > 0\" class=\"max-exceeded\">\n +{{ value.length - maxSelectedShown }} more\n </span>\n </div>\n\n <fw-icon *ngIf=\"showClear() && value.length > 0\" (click)=\"updateValue([])\">close</fw-icon>\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]=\"customFilter\"\n (filteredMenuItemChange)=\"displayedOptions.set($event)\"\n
|
|
6034
|
+
], 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\n <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size]\"\n [ngStyle]=\"{ minHeight: minHeight, maxHeight: maxHeight }\"\n [cdkMenuTriggerFor]=\"selectMenu\">\n <span *ngIf=\"value.length === 0\" class=\"placeholder\">{{placeholder}}</span>\n\n <!-- CHIPS -->\n <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n <fw-chip\n *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\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 </fw-chip>\n <span *ngIf=\"maxSelectedShown === 0 && value.length > 0\" class=\"selected-text\">\n {{ value.length }} selected\n </span>\n <span *ngIf=\"value.length > maxSelectedShown && maxSelectedShown > 0\" class=\"max-exceeded\">\n +{{ value.length - maxSelectedShown }} more\n </span>\n </div>\n\n <fw-icon *ngIf=\"showClear() && value.length > 0\" (click)=\"updateValue([])\">close</fw-icon>\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]=\"customFilter\"\n (filteredMenuItemChange)=\"displayedOptions.set($event)\"\n >\n <div class=\"filter-content\" *ngIf=\"showSelectionInfo()\">\n <p>{{value.length}} selections</p>\n <fw-button variant=\"ghost\" (click)=\"updateValue([])\">Clear</fw-button>\n </div>\n <fw-menu\n [multiSelect]=\"true\"\n [disabled]=\"disabled\"\n [value]=\"createArray(selectedValues)\"\n (change)=\"handleMenuChange($event)\">\n <ng-container *ngIf=\"customMenuItems.length === 0\">\n <fw-menu-item\n *ngFor=\"let item of options; index as $index\"\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 </ng-container>\n <ng-content ngProjectAs=\"custom-menu-items\" select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group, fw-menu-header]\"></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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$4.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["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: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { 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: ["mouseEnterHandlerChange", "click"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] }); }
|
|
6032
6035
|
}
|
|
6033
6036
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwMultiSelectMenuComponent, decorators: [{
|
|
6034
6037
|
type: Component,
|
|
@@ -6038,10 +6041,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6038
6041
|
useExisting: forwardRef(() => FwMultiSelectMenuComponent),
|
|
6039
6042
|
multi: true,
|
|
6040
6043
|
},
|
|
6041
|
-
], template: "<div [ngStyle]=\"{width: width}\" #wrapper>\n\n <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size]\"\n [ngStyle]=\"{ minHeight: minHeight, maxHeight: maxHeight }\"\n [cdkMenuTriggerFor]=\"selectMenu\">\n <span *ngIf=\"value.length === 0\" class=\"placeholder\">{{placeholder}}</span>\n\n <!-- CHIPS -->\n <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n <fw-chip\n *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\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 </fw-chip>\n <span *ngIf=\"maxSelectedShown === 0 && value.length > 0\" class=\"selected-text\">\n {{ value.length }} selected\n </span>\n <span *ngIf=\"value.length > maxSelectedShown && maxSelectedShown > 0\" class=\"max-exceeded\">\n +{{ value.length - maxSelectedShown }} more\n </span>\n </div>\n\n <fw-icon *ngIf=\"showClear() && value.length > 0\" (click)=\"updateValue([])\">close</fw-icon>\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]=\"customFilter\"\n (filteredMenuItemChange)=\"displayedOptions.set($event)\"\n
|
|
6042
|
-
}], ctorParameters: () => [{ type: i0.
|
|
6044
|
+
], template: "<div [ngStyle]=\"{width: width}\" #wrapper>\n\n <div\n fwMenuRegister\n class=\"chip-grid\"\n [ngClass]=\"[size]\"\n [ngStyle]=\"{ minHeight: minHeight, maxHeight: maxHeight }\"\n [cdkMenuTriggerFor]=\"selectMenu\">\n <span *ngIf=\"value.length === 0\" class=\"placeholder\">{{placeholder}}</span>\n\n <!-- CHIPS -->\n <div class=\"inner-chip-grid\" *ngIf=\"value && value.length>0\">\n <fw-chip\n *ngFor=\"let chip of selectedOptions | slice:0:maxSelectedShown\"\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 </fw-chip>\n <span *ngIf=\"maxSelectedShown === 0 && value.length > 0\" class=\"selected-text\">\n {{ value.length }} selected\n </span>\n <span *ngIf=\"value.length > maxSelectedShown && maxSelectedShown > 0\" class=\"max-exceeded\">\n +{{ value.length - maxSelectedShown }} more\n </span>\n </div>\n\n <fw-icon *ngIf=\"showClear() && value.length > 0\" (click)=\"updateValue([])\">close</fw-icon>\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]=\"customFilter\"\n (filteredMenuItemChange)=\"displayedOptions.set($event)\"\n >\n <div class=\"filter-content\" *ngIf=\"showSelectionInfo()\">\n <p>{{value.length}} selections</p>\n <fw-button variant=\"ghost\" (click)=\"updateValue([])\">Clear</fw-button>\n </div>\n <fw-menu\n [multiSelect]=\"true\"\n [disabled]=\"disabled\"\n [value]=\"createArray(selectedValues)\"\n (change)=\"handleMenuChange($event)\">\n <ng-container *ngIf=\"customMenuItems.length === 0\">\n <fw-menu-item\n *ngFor=\"let item of options; index as $index\"\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 </ng-container>\n <ng-content ngProjectAs=\"custom-menu-items\" select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group, fw-menu-header]\"></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"] }]
|
|
6045
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { outsideClick: [{
|
|
6043
6046
|
type: HostListener,
|
|
6044
|
-
args: ['document:click']
|
|
6047
|
+
args: ['document:click', ['$event']]
|
|
6045
6048
|
}], options: [{
|
|
6046
6049
|
type: Input
|
|
6047
6050
|
}], valueProperty: [{
|
|
@@ -6095,9 +6098,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6095
6098
|
}], tabIndex: [{
|
|
6096
6099
|
type: HostBinding,
|
|
6097
6100
|
args: ['tabIndex']
|
|
6098
|
-
}],
|
|
6101
|
+
}], disabledClass: [{
|
|
6099
6102
|
type: HostBinding,
|
|
6100
|
-
args: ['
|
|
6103
|
+
args: ['class.disabled']
|
|
6101
6104
|
}], handleKeyDown: [{
|
|
6102
6105
|
type: HostListener,
|
|
6103
6106
|
args: ['keydown', ['$event']]
|
|
@@ -6115,6 +6118,9 @@ class FwSelectMenuComponent {
|
|
|
6115
6118
|
this._isOpen = true;
|
|
6116
6119
|
}
|
|
6117
6120
|
}
|
|
6121
|
+
get disabledClass() {
|
|
6122
|
+
return this.disabled;
|
|
6123
|
+
}
|
|
6118
6124
|
get value() {
|
|
6119
6125
|
return this._value;
|
|
6120
6126
|
}
|
|
@@ -6364,11 +6370,11 @@ class FwSelectMenuComponent {
|
|
|
6364
6370
|
this.filterChanged.emit(value);
|
|
6365
6371
|
}
|
|
6366
6372
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwSelectMenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i8.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6367
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwSelectMenuComponent, selector: "fw-select", inputs: { options: "options", valueProperty: "valueProperty", useFullOptionAsValue: "useFullOptionAsValue", titleProperty: "titleProperty", iconProperty: "iconProperty", staticIcon: "staticIcon", descriptionProperty: "descriptionProperty", showFilter: "showFilter", showReset: "showReset", disabled: "disabled", errored: "errored", width: "width", optionsWidth: "optionsWidth", minOptionsHeight: "minOptionsHeight", maxOptionsHeight: "maxOptionsHeight", size: "size", placeholder: "placeholder", value: "value" }, outputs: { change: "change", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "outsideClick($event.target)" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n <fw-text-input\n fwMenuRegister\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\n [leftIcon]=\"staticIcon || selectIcon || null\"\n [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder\"\n [
|
|
6373
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FwSelectMenuComponent, selector: "fw-select", inputs: { options: "options", valueProperty: "valueProperty", useFullOptionAsValue: "useFullOptionAsValue", titleProperty: "titleProperty", iconProperty: "iconProperty", staticIcon: "staticIcon", descriptionProperty: "descriptionProperty", showFilter: "showFilter", showReset: "showReset", disabled: "disabled", errored: "errored", width: "width", optionsWidth: "optionsWidth", minOptionsHeight: "minOptionsHeight", maxOptionsHeight: "maxOptionsHeight", size: "size", placeholder: "placeholder", value: "value" }, outputs: { change: "change", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "outsideClick($event.target)" }, properties: { "class.disabled": "this.disabledClass" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n <fw-text-input\n fwMenuRegister\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\n [leftIcon]=\"staticIcon || selectIcon || null\"\n [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder\"\n [size]=\"size\"\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 [filterText]=\"filterValue\"\n *ngIf=\"!disabled\" [showFilter]=\"showFilter\" [width]=\"optionsWidth || wrapper.offsetWidth + 'px'\"\n [maxHeight]=\"maxOptionsHeight\" [minHeight]=\"minOptionsHeight\" (filterChanged)=\"onFilterChanged($event)\">\n <fw-menu [disabled]=\"disabled\" [value]=\"selectValue\" (change)=\"handleClick($any($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]=\"useFullOptionAsValue ? JSON.stringify(item) : item?.[valueProperty]?.toString()\"\n [icon]=\"item[iconProperty]\"\n [disabled]=\"$any(item).disabled\"\n >\n </fw-menu-item>\n </ng-container>\n <div #menuContentWrapper>\n <ng-content select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group]\"></ng-content>\n </div>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box;max-width:100%}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}\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: i1$4.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value"], outputs: ["change"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container, fw-menu-filter", inputs: ["width", "maxHeight", "minHeight", "border", "shadow", "showFilter", "filterText", "focusFilterOnMount", "offset", "emptyText", "filterFn", "additionalMenuItems", "keyHandler"], outputs: ["filteredMenuItemChange", "filterChanged"] }, { 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: ["mouseEnterHandlerChange", "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", "value", "error", "width"], outputs: ["leftIconAction", "rightIconAction"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }] }); }
|
|
6368
6374
|
}
|
|
6369
6375
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
|
|
6370
6376
|
type: Component,
|
|
6371
|
-
args: [{ selector: 'fw-select', template: "<div #wrapper [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n <fw-text-input\n fwMenuRegister\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\n [leftIcon]=\"staticIcon || selectIcon || null\"\n [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder\"\n [
|
|
6377
|
+
args: [{ selector: 'fw-select', template: "<div #wrapper [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n <fw-text-input\n fwMenuRegister\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\n [leftIcon]=\"staticIcon || selectIcon || null\"\n [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder\"\n [size]=\"size\"\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 [filterText]=\"filterValue\"\n *ngIf=\"!disabled\" [showFilter]=\"showFilter\" [width]=\"optionsWidth || wrapper.offsetWidth + 'px'\"\n [maxHeight]=\"maxOptionsHeight\" [minHeight]=\"minOptionsHeight\" (filterChanged)=\"onFilterChanged($event)\">\n <fw-menu [disabled]=\"disabled\" [value]=\"selectValue\" (change)=\"handleClick($any($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]=\"useFullOptionAsValue ? JSON.stringify(item) : item?.[valueProperty]?.toString()\"\n [icon]=\"item[iconProperty]\"\n [disabled]=\"$any(item).disabled\"\n >\n </fw-menu-item>\n </ng-container>\n <div #menuContentWrapper>\n <ng-content select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group]\"></ng-content>\n </div>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box;max-width:100%}:host.disabled{opacity:.4;cursor:not-allowed}:host.disabled>div{pointer-events:none}\n"] }]
|
|
6372
6378
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i8.NgControl, decorators: [{
|
|
6373
6379
|
type: Optional
|
|
6374
6380
|
}, {
|
|
@@ -6376,6 +6382,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6376
6382
|
}] }], propDecorators: { outsideClick: [{
|
|
6377
6383
|
type: HostListener,
|
|
6378
6384
|
args: ['document:click', ['$event.target']]
|
|
6385
|
+
}], disabledClass: [{
|
|
6386
|
+
type: HostBinding,
|
|
6387
|
+
args: ['class.disabled']
|
|
6379
6388
|
}], options: [{
|
|
6380
6389
|
type: Input
|
|
6381
6390
|
}], valueProperty: [{
|