@flywheel-io/vision 1.12.0 → 1.12.2
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 +3 -1
- package/components/select-menu/select-menu.component.d.ts +3 -2
- package/esm2020/components/menu/menu.component.mjs +2 -2
- package/esm2020/components/paginator/paginator-advanced/paginator-advanced.component.mjs +1 -1
- package/esm2020/components/select-menu/multi-select-menu/multi-select-menu.component.mjs +14 -5
- package/esm2020/components/select-menu/select-menu.component.mjs +19 -16
- package/fesm2015/flywheel-io-vision.mjs +33 -21
- package/fesm2015/flywheel-io-vision.mjs.map +1 -1
- package/fesm2020/flywheel-io-vision.mjs +33 -21
- package/fesm2020/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
- package/scss/material/theme.scss +4 -0
|
@@ -4091,7 +4091,7 @@ class FwMenuComponent {
|
|
|
4091
4091
|
this.disabled = false;
|
|
4092
4092
|
this.size = 'default';
|
|
4093
4093
|
this.multiSelect = false;
|
|
4094
|
-
this.useCheckbox =
|
|
4094
|
+
this.useCheckbox = undefined;
|
|
4095
4095
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
4096
4096
|
this.change = new EventEmitter();
|
|
4097
4097
|
this.filteredItemsChange = new EventEmitter();
|
|
@@ -5370,9 +5370,11 @@ class FwMultiSelectMenuComponent {
|
|
|
5370
5370
|
this.filterItemsOnSelect = true;
|
|
5371
5371
|
this.maxSelectedShown = 100;
|
|
5372
5372
|
this.width = '200px';
|
|
5373
|
-
this.minHeight = '
|
|
5373
|
+
this.minHeight = '';
|
|
5374
5374
|
this.maxHeight = '200px';
|
|
5375
|
+
this.size = 'medium';
|
|
5375
5376
|
this.placeholder = 'Select something...';
|
|
5377
|
+
this.emptyText = 'No matches found...';
|
|
5376
5378
|
this.selectedValues = [];
|
|
5377
5379
|
this.selectedOptions = [];
|
|
5378
5380
|
this.filteredOptions = [];
|
|
@@ -5516,6 +5518,9 @@ class FwMultiSelectMenuComponent {
|
|
|
5516
5518
|
this.onChange(value);
|
|
5517
5519
|
}
|
|
5518
5520
|
this.change.emit(value);
|
|
5521
|
+
if (this.textInput && this.textInput.nativeElement) {
|
|
5522
|
+
this.textInput.nativeElement.value = '';
|
|
5523
|
+
}
|
|
5519
5524
|
}
|
|
5520
5525
|
moveFocused(direction) {
|
|
5521
5526
|
switch (direction) {
|
|
@@ -5615,13 +5620,13 @@ class FwMultiSelectMenuComponent {
|
|
|
5615
5620
|
}
|
|
5616
5621
|
}
|
|
5617
5622
|
FwMultiSelectMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMultiSelectMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5618
|
-
FwMultiSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMultiSelectMenuComponent, selector: "fw-multi-select", inputs: { options: "options", valueProperty: "valueProperty", titleProperty: "titleProperty", iconProperty: "iconProperty", disabled: "disabled", useCheckbox: "useCheckbox", closeOnSelect: "closeOnSelect", filterItemsOnSelect: "filterItemsOnSelect", maxSelectedShown: "maxSelectedShown", width: "width", minHeight: "minHeight", maxHeight: "maxHeight", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", placeholder: "placeholder", value: "value" }, outputs: { change: "change" }, host: { listeners: { "document:click": "outsideClick()" } }, providers: [
|
|
5623
|
+
FwMultiSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwMultiSelectMenuComponent, selector: "fw-multi-select", inputs: { options: "options", valueProperty: "valueProperty", titleProperty: "titleProperty", iconProperty: "iconProperty", disabled: "disabled", useCheckbox: "useCheckbox", closeOnSelect: "closeOnSelect", filterItemsOnSelect: "filterItemsOnSelect", maxSelectedShown: "maxSelectedShown", width: "width", minHeight: "minHeight", maxHeight: "maxHeight", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", size: "size", placeholder: "placeholder", emptyText: "emptyText", value: "value" }, outputs: { change: "change" }, host: { listeners: { "document:click": "outsideClick()" } }, providers: [
|
|
5619
5624
|
{
|
|
5620
5625
|
provide: NG_VALUE_ACCESSOR,
|
|
5621
5626
|
useExisting: forwardRef(() => FwMultiSelectMenuComponent),
|
|
5622
5627
|
multi: true,
|
|
5623
5628
|
},
|
|
5624
|
-
], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "textInitialInput", first: true, predicate: ["textInitialInput"], descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n <div\n
|
|
5629
|
+
], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "textInitialInput", first: true, predicate: ["textInitialInput"], descendants: true }, { propertyName: "renderedMenuItems", predicate: FwMenuItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width}\">\n <div\n [ngClass]=\"['chip-grid', size]\"\n [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n [cdkMenuTriggerFor]=\"selectMenu\">\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)=\"handleClose(chip)\"\n [selectable]=\"false\">\n </fw-chip>\n <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n more</span>\n <input\n type=\"text\" #textInput\n class=\"placeholder\"\n (keydown)=\"handleKeyDown($event)\" (input)=\"handleInput($event)\">\n </div>\n <input\n type=\"text\" #textInitialInput\n *ngIf=\"!value || value.length===0\"\n class=\"placeholder\" [placeholder]=\"placeholder\"\n (focus)=\"handleTouched()\"\n (keydown)=\"handleKeyDown($event)\" (input)=\"handleInput($event)\">\n <fw-icon>chevron-down</fw-icon>\n </div>\n <ng-template #selectMenu>\n <fw-menu-container\n [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\"\n *ngIf=\"emptyText.length > 0 || (filteredOptions && filteredOptions.length > 0)\">\n <fw-menu\n [multiSelect]=\"true\"\n [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n [value]=\"selectedValues\"\n (change)=\"handleChange($event)\">\n <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of filteredOptions; index as $index\"\n [title]=\"item[titleProperty]\"\n [value]=\"item[valueProperty]\"\n [icon]=\"item[iconProperty]\"\n [multiSelect]=\"true\"\n [showCheckbox]=\"useCheckbox\"\n [focused]=\"focused===$index\"\n (mouseover)=\"focused=$index\"\n >\n </fw-menu-item>\n <fw-menu-item\n *ngIf=\"filteredOptions && filteredOptions.length===0 && emptyText\" [showCheckbox]=\"false\"\n [disabled]=\"true\" [title]=\"emptyText\">\n </fw-menu-item>\n </ng-container>\n <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:4px;align-items:center;border-radius:6px;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 .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .max-exceeded{font-size:12px}\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: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwChipComponent, selector: "fw-chip", inputs: ["value", "variant", "color", "icon", "title", "description", "showClose", "disabled", "selected", "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", "variant", "collapsed", "collapsedWidth", "openWidth"], outputs: ["change", "filteredItemsChange"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset", "collapsed"], outputs: ["filterChanged"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
|
|
5625
5630
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMultiSelectMenuComponent, decorators: [{
|
|
5626
5631
|
type: Component,
|
|
5627
5632
|
args: [{ selector: 'fw-multi-select', providers: [
|
|
@@ -5630,7 +5635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
5630
5635
|
useExisting: forwardRef(() => FwMultiSelectMenuComponent),
|
|
5631
5636
|
multi: true,
|
|
5632
5637
|
},
|
|
5633
|
-
], template: "<div [ngStyle]=\"{width: width}\">\n <div\n
|
|
5638
|
+
], template: "<div [ngStyle]=\"{width: width}\">\n <div\n [ngClass]=\"['chip-grid', size]\"\n [ngStyle]=\"{minHeight: minHeight, maxHeight: maxHeight}\"\n [cdkMenuTriggerFor]=\"selectMenu\">\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)=\"handleClose(chip)\"\n [selectable]=\"false\">\n </fw-chip>\n <span *ngIf=\"value.length>maxSelectedShown\" class=\"max-exceeded\">+{{ value.length - maxSelectedShown }}\n more</span>\n <input\n type=\"text\" #textInput\n class=\"placeholder\"\n (keydown)=\"handleKeyDown($event)\" (input)=\"handleInput($event)\">\n </div>\n <input\n type=\"text\" #textInitialInput\n *ngIf=\"!value || value.length===0\"\n class=\"placeholder\" [placeholder]=\"placeholder\"\n (focus)=\"handleTouched()\"\n (keydown)=\"handleKeyDown($event)\" (input)=\"handleInput($event)\">\n <fw-icon>chevron-down</fw-icon>\n </div>\n <ng-template #selectMenu>\n <fw-menu-container\n [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\"\n *ngIf=\"emptyText.length > 0 || (filteredOptions && filteredOptions.length > 0)\">\n <fw-menu\n [multiSelect]=\"true\"\n [disabled]=\"disabled || (filteredOptions && filteredOptions.length===0)\"\n [value]=\"selectedValues\"\n (change)=\"handleChange($event)\">\n <ng-container *ngIf=\"menuItems && menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of filteredOptions; index as $index\"\n [title]=\"item[titleProperty]\"\n [value]=\"item[valueProperty]\"\n [icon]=\"item[iconProperty]\"\n [multiSelect]=\"true\"\n [showCheckbox]=\"useCheckbox\"\n [focused]=\"focused===$index\"\n (mouseover)=\"focused=$index\"\n >\n </fw-menu-item>\n <fw-menu-item\n *ngIf=\"filteredOptions && filteredOptions.length===0 && emptyText\" [showCheckbox]=\"false\"\n [disabled]=\"true\" [title]=\"emptyText\">\n </fw-menu-item>\n </ng-container>\n <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host .chip-grid{min-height:36px;box-sizing:border-box;color:var(--typography-light);background:var(--page-light);display:flex;padding:4px;align-items:center;border-radius:6px;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 .placeholder{padding:0 2px 0 4px;font-size:14px;color:var(--typography-base);background:var(--page-light);border:0;outline:0;display:inline-flex;width:10px;flex-grow:1}:host .chip-grid .placeholder:focus{outline:none!important}:host .chip-grid .placeholder::placeholder{color:var(--typography-light)}:host .chip-grid fw-icon{font-size:20px}:host .chip-grid fw-icon:hover{color:var(--primary-base)}:host .chip-grid .max-exceeded{font-size:12px}\n"] }]
|
|
5634
5639
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { outsideClick: [{
|
|
5635
5640
|
type: HostListener,
|
|
5636
5641
|
args: ['document:click']
|
|
@@ -5662,8 +5667,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
5662
5667
|
type: Input
|
|
5663
5668
|
}], maxOptionsHeight: [{
|
|
5664
5669
|
type: Input
|
|
5670
|
+
}], size: [{
|
|
5671
|
+
type: Input
|
|
5665
5672
|
}], placeholder: [{
|
|
5666
5673
|
type: Input
|
|
5674
|
+
}], emptyText: [{
|
|
5675
|
+
type: Input
|
|
5667
5676
|
}], trigger: [{
|
|
5668
5677
|
type: ViewChild,
|
|
5669
5678
|
args: [CdkMenuTrigger]
|
|
@@ -5703,6 +5712,7 @@ class FwSelectMenuComponent {
|
|
|
5703
5712
|
this.disabled = false;
|
|
5704
5713
|
this.errored = false;
|
|
5705
5714
|
this.width = '200px';
|
|
5715
|
+
this.size = 'medium';
|
|
5706
5716
|
this.placeholder = 'Select something...';
|
|
5707
5717
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
5708
5718
|
this.change = new EventEmitter();
|
|
@@ -5736,7 +5746,6 @@ class FwSelectMenuComponent {
|
|
|
5736
5746
|
return this._value;
|
|
5737
5747
|
}
|
|
5738
5748
|
set value(newValue) {
|
|
5739
|
-
this._valueType = typeof newValue;
|
|
5740
5749
|
this.updateValue(newValue);
|
|
5741
5750
|
}
|
|
5742
5751
|
ngOnChanges(changes) {
|
|
@@ -5886,17 +5895,18 @@ class FwSelectMenuComponent {
|
|
|
5886
5895
|
}
|
|
5887
5896
|
}
|
|
5888
5897
|
}
|
|
5889
|
-
updateValue(
|
|
5890
|
-
this._value =
|
|
5891
|
-
|
|
5892
|
-
|
|
5893
|
-
this.
|
|
5894
|
-
this.
|
|
5898
|
+
updateValue(newValue) {
|
|
5899
|
+
this._value = newValue;
|
|
5900
|
+
this._valueType = typeof newValue;
|
|
5901
|
+
if (newValue && this._valueType === 'object' && typeof newValue === 'object') {
|
|
5902
|
+
this.selectValue = newValue[this.valueProperty].toString();
|
|
5903
|
+
this.selectTitle = newValue[this.titleProperty].toString();
|
|
5904
|
+
this.selectIcon = newValue[this.iconProperty];
|
|
5895
5905
|
}
|
|
5896
5906
|
else {
|
|
5897
5907
|
let selectedOption;
|
|
5898
5908
|
if (this.options && this.options.length > 0 && this.valueProperty && this.value) {
|
|
5899
|
-
selectedOption = this.options.find(option => option[this.valueProperty] ===
|
|
5909
|
+
selectedOption = this.options.find(option => option[this.valueProperty] === newValue[this.valueProperty]);
|
|
5900
5910
|
}
|
|
5901
5911
|
if (selectedOption) {
|
|
5902
5912
|
this.selectValue = selectedOption[this.valueProperty].toString();
|
|
@@ -5904,12 +5914,12 @@ class FwSelectMenuComponent {
|
|
|
5904
5914
|
this.selectIcon = selectedOption[this.iconProperty];
|
|
5905
5915
|
}
|
|
5906
5916
|
else {
|
|
5907
|
-
this.selectValue =
|
|
5908
|
-
this.selectTitle =
|
|
5917
|
+
this.selectValue = newValue ? newValue.toString() : '';
|
|
5918
|
+
this.selectTitle = newValue ? newValue.toString() : '';
|
|
5909
5919
|
}
|
|
5910
5920
|
if (this.options && this.options.length) {
|
|
5911
5921
|
this.options.forEach((opt, index) => {
|
|
5912
|
-
if (opt[this.valueProperty] ===
|
|
5922
|
+
if (opt[this.valueProperty] === newValue) {
|
|
5913
5923
|
this.selectTitle = opt[this.titleProperty].toString();
|
|
5914
5924
|
this.selectIcon = opt[this.iconProperty];
|
|
5915
5925
|
this.focused = index;
|
|
@@ -5918,8 +5928,8 @@ class FwSelectMenuComponent {
|
|
|
5918
5928
|
}
|
|
5919
5929
|
}
|
|
5920
5930
|
this.onTouched();
|
|
5921
|
-
this.onChange?.(
|
|
5922
|
-
this.change.emit(
|
|
5931
|
+
this.onChange?.(newValue);
|
|
5932
|
+
this.change.emit(newValue);
|
|
5923
5933
|
}
|
|
5924
5934
|
handleReset() {
|
|
5925
5935
|
if (this.showReset) {
|
|
@@ -5933,10 +5943,10 @@ class FwSelectMenuComponent {
|
|
|
5933
5943
|
}
|
|
5934
5944
|
}
|
|
5935
5945
|
FwSelectMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i8.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
5936
|
-
FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSelectMenuComponent, selector: "fw-select", inputs: { options: "options", valueProperty: "valueProperty", titleProperty: "titleProperty", iconProperty: "iconProperty", staticIcon: "staticIcon", descriptionProperty: "descriptionProperty", showFilter: "showFilter", showReset: "showReset", disabled: "disabled", errored: "errored", width: "width", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", placeholder: "placeholder", value: "value" }, outputs: { change: "change", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "outsideClick($event.target)" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n <fw-text-input\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\n [leftIcon]=\"staticIcon || selectIcon\"\n [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [error]=\"errored || (invalid && touched)\"\n (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\"\n readOnly=\"true\">\n </fw-text-input>\n <ng-template #selectMenu>\n <fw-menu-container\n *ngIf=\"!disabled\" [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\"\n [maxHeight]=\"maxOptionsHeight\" (filterChanged)=\"filterChanged.emit($event)\">\n <fw-menu [disabled]=\"disabled\" [value]=\"selectValue\" (change)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of options\"\n [title]=\"item[titleProperty].toString()\"\n [description]=\"item[descriptionProperty]\"\n [value]=\"item[valueProperty].toString()\"\n [icon]=\"item[iconProperty]\"\n >\n </fw-menu-item>\n </ng-container>\n <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value", "variant", "collapsed", "collapsedWidth", "openWidth"], outputs: ["change", "filteredItemsChange"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset", "collapsed"], outputs: ["filterChanged"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "error", "value"], outputs: ["leftIconAction", "rightIconAction"] }] });
|
|
5946
|
+
FwSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwSelectMenuComponent, selector: "fw-select", inputs: { options: "options", valueProperty: "valueProperty", titleProperty: "titleProperty", iconProperty: "iconProperty", staticIcon: "staticIcon", descriptionProperty: "descriptionProperty", showFilter: "showFilter", showReset: "showReset", disabled: "disabled", errored: "errored", width: "width", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", size: "size", placeholder: "placeholder", value: "value" }, outputs: { change: "change", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "outsideClick($event.target)" } }, queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n <fw-text-input\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\n [leftIcon]=\"staticIcon || selectIcon\"\n [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [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 *ngIf=\"!disabled\" [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\"\n [maxHeight]=\"maxOptionsHeight\" (filterChanged)=\"filterChanged.emit($event)\">\n <fw-menu [disabled]=\"disabled\" [value]=\"selectValue\" (change)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of options\"\n [title]=\"item[titleProperty].toString()\"\n [description]=\"item[descriptionProperty]\"\n [value]=\"item[valueProperty].toString()\"\n [icon]=\"item[iconProperty]\"\n >\n </fw-menu-item>\n </ng-container>\n <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: FwMenuComponent, selector: "fw-menu", inputs: ["disabled", "size", "multiSelect", "useCheckbox", "value", "variant", "collapsed", "collapsedWidth", "openWidth"], outputs: ["change", "filteredItemsChange"] }, { kind: "component", type: FwMenuContainerComponent, selector: "fw-menu-container", inputs: ["width", "maxHeight", "border", "shadow", "showFilter", "filterText", "offset", "collapsed"], outputs: ["filterChanged"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "component", type: FwTextInputComponent, selector: "fw-text-input", inputs: ["disabled", "useActionableIcons", "leftIcon", "rightIcon", "prefix", "context", "helperText", "errorText", "placeholder", "readOnly", "size", "type", "maxLength", "autofocus", "autocomplete", "error", "value"], outputs: ["leftIconAction", "rightIconAction"] }] });
|
|
5937
5947
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
|
|
5938
5948
|
type: Component,
|
|
5939
|
-
args: [{ selector: 'fw-select', template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n <fw-text-input\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\n [leftIcon]=\"staticIcon || selectIcon\"\n [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [error]=\"errored || (invalid && touched)\"\n (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\"\n readOnly=\"true\">\n </fw-text-input>\n <ng-template #selectMenu>\n <fw-menu-container\n *ngIf=\"!disabled\" [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\"\n [maxHeight]=\"maxOptionsHeight\" (filterChanged)=\"filterChanged.emit($event)\">\n <fw-menu [disabled]=\"disabled\" [value]=\"selectValue\" (change)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of options\"\n [title]=\"item[titleProperty].toString()\"\n [description]=\"item[descriptionProperty]\"\n [value]=\"item[valueProperty].toString()\"\n [icon]=\"item[iconProperty]\"\n >\n </fw-menu-item>\n </ng-container>\n <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"] }]
|
|
5949
|
+
args: [{ selector: 'fw-select', template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n <fw-text-input\n [cdkMenuTriggerFor]=\"selectMenu\"\n [value]=\"selectTitle\"\n [leftIcon]=\"staticIcon || selectIcon\"\n [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n (rightIconAction)=\"handleReset()\"\n [useActionableIcons]=\"true\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [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 *ngIf=\"!disabled\" [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\"\n [maxHeight]=\"maxOptionsHeight\" (filterChanged)=\"filterChanged.emit($event)\">\n <fw-menu [disabled]=\"disabled\" [value]=\"selectValue\" (change)=\"handleClick($event)\">\n <ng-container *ngIf=\"menuItems.length===0\">\n <fw-menu-item\n *ngFor=\"let item of options\"\n [title]=\"item[titleProperty].toString()\"\n [description]=\"item[descriptionProperty]\"\n [value]=\"item[valueProperty].toString()\"\n [icon]=\"item[iconProperty]\"\n >\n </fw-menu-item>\n </ng-container>\n <ng-content select=\"[fw-menu-item, fw-menu-separator]\"></ng-content>\n </fw-menu>\n </fw-menu-container>\n </ng-template>\n</div>\n", styles: [":host{box-sizing:border-box}\n"] }]
|
|
5940
5950
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i8.NgControl, decorators: [{
|
|
5941
5951
|
type: Optional
|
|
5942
5952
|
}, {
|
|
@@ -5970,6 +5980,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
5970
5980
|
type: Input
|
|
5971
5981
|
}], maxOptionsHeight: [{
|
|
5972
5982
|
type: Input
|
|
5983
|
+
}], size: [{
|
|
5984
|
+
type: Input
|
|
5973
5985
|
}], placeholder: [{
|
|
5974
5986
|
type: Input
|
|
5975
5987
|
}], trigger: [{
|
|
@@ -6117,7 +6129,7 @@ class FwPaginatorAdvancedComponent {
|
|
|
6117
6129
|
}
|
|
6118
6130
|
}
|
|
6119
6131
|
FwPaginatorAdvancedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorAdvancedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6120
|
-
FwPaginatorAdvancedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPaginatorAdvancedComponent, selector: "fw-paginator-advanced", inputs: { disabled: "disabled", showNext: "showNext", showPrevious: "showPrevious", showFirst: "showFirst", showLast: "showLast", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions", length: "length", alignment: "alignment", selectorTitle: "selectorTitle", pageSize: "pageSize" }, outputs: { page: "page" }, ngImport: i0, template: "<div [ngClass]=\"['paginator', alignment]\">\n <div class=\"pages-selector\">\n <div>\n <p class=\"vision-p2\" [ngClass]=\"disabled?'disabled':''\">{{ selectorTitle }}</p>\n \n <fw-select\n [disabled]=\"disabled\" width=\"80px\" placeholder=\"Size\"\n [(ngModel)]=\"pageSize\">\n <fw-menu-item\n *ngFor=\"let size of pageSizeOptions\"\n [value]=\"size.toString()\"\n [title]=\"size.toString()\"\n [selected]=\"pageSize.toString()===size.toString()\"\n [disabled]=\"disabled\"\n ></fw-menu-item>\n </fw-select>\n </div>\n <p class=\"vision-p2 record-count\" [ngClass]=\"disabled?'disabled':''\">\n {{ getRowIndexStart() + 1 }}-{{ getRowIndexEnd() + 1 }}\n of {{ length }}</p>\n <div>\n <button\n *ngIf=\"showFirst\"\n class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() || disabled\" (click)=\"firstPage()\">\n <fw-icon>arrow-back-collapse</fw-icon>\n </button>\n <button\n *ngIf=\"showPrevious\"\n class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\"\n (click)=\"previousPage()\">\n <fw-icon>chevron-back</fw-icon>\n </button>\n <button\n *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n (click)=\"nextPage()\">\n <fw-icon>chevron-forward</fw-icon>\n </button>\n <button\n *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n (click)=\"lastPage()\">\n <fw-icon>arrow-forward-collapse</fw-icon>\n </button>\n </div>\n </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action fw-icon{font-size:22px;color:var(--typography-base)}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "component", type: FwSelectMenuComponent, selector: "fw-select", inputs: ["options", "valueProperty", "titleProperty", "iconProperty", "staticIcon", "descriptionProperty", "showFilter", "showReset", "disabled", "errored", "width", "optionsWidth", "maxOptionsHeight", "placeholder", "value"], outputs: ["change", "filterChanged"] }] });
|
|
6132
|
+
FwPaginatorAdvancedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPaginatorAdvancedComponent, selector: "fw-paginator-advanced", inputs: { disabled: "disabled", showNext: "showNext", showPrevious: "showPrevious", showFirst: "showFirst", showLast: "showLast", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions", length: "length", alignment: "alignment", selectorTitle: "selectorTitle", pageSize: "pageSize" }, outputs: { page: "page" }, ngImport: i0, template: "<div [ngClass]=\"['paginator', alignment]\">\n <div class=\"pages-selector\">\n <div>\n <p class=\"vision-p2\" [ngClass]=\"disabled?'disabled':''\">{{ selectorTitle }}</p>\n \n <fw-select\n [disabled]=\"disabled\" width=\"80px\" placeholder=\"Size\"\n [(ngModel)]=\"pageSize\">\n <fw-menu-item\n *ngFor=\"let size of pageSizeOptions\"\n [value]=\"size.toString()\"\n [title]=\"size.toString()\"\n [selected]=\"pageSize.toString()===size.toString()\"\n [disabled]=\"disabled\"\n ></fw-menu-item>\n </fw-select>\n </div>\n <p class=\"vision-p2 record-count\" [ngClass]=\"disabled?'disabled':''\">\n {{ getRowIndexStart() + 1 }}-{{ getRowIndexEnd() + 1 }}\n of {{ length }}</p>\n <div>\n <button\n *ngIf=\"showFirst\"\n class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() || disabled\" (click)=\"firstPage()\">\n <fw-icon>arrow-back-collapse</fw-icon>\n </button>\n <button\n *ngIf=\"showPrevious\"\n class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\"\n (click)=\"previousPage()\">\n <fw-icon>chevron-back</fw-icon>\n </button>\n <button\n *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n (click)=\"nextPage()\">\n <fw-icon>chevron-forward</fw-icon>\n </button>\n <button\n *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n (click)=\"lastPage()\">\n <fw-icon>arrow-forward-collapse</fw-icon>\n </button>\n </div>\n </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action fw-icon{font-size:22px;color:var(--typography-base)}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "checkboxColor", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "component", type: FwSelectMenuComponent, selector: "fw-select", inputs: ["options", "valueProperty", "titleProperty", "iconProperty", "staticIcon", "descriptionProperty", "showFilter", "showReset", "disabled", "errored", "width", "optionsWidth", "maxOptionsHeight", "size", "placeholder", "value"], outputs: ["change", "filterChanged"] }] });
|
|
6121
6133
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorAdvancedComponent, decorators: [{
|
|
6122
6134
|
type: Component,
|
|
6123
6135
|
args: [{ selector: 'fw-paginator-advanced', template: "<div [ngClass]=\"['paginator', alignment]\">\n <div class=\"pages-selector\">\n <div>\n <p class=\"vision-p2\" [ngClass]=\"disabled?'disabled':''\">{{ selectorTitle }}</p>\n \n <fw-select\n [disabled]=\"disabled\" width=\"80px\" placeholder=\"Size\"\n [(ngModel)]=\"pageSize\">\n <fw-menu-item\n *ngFor=\"let size of pageSizeOptions\"\n [value]=\"size.toString()\"\n [title]=\"size.toString()\"\n [selected]=\"pageSize.toString()===size.toString()\"\n [disabled]=\"disabled\"\n ></fw-menu-item>\n </fw-select>\n </div>\n <p class=\"vision-p2 record-count\" [ngClass]=\"disabled?'disabled':''\">\n {{ getRowIndexStart() + 1 }}-{{ getRowIndexEnd() + 1 }}\n of {{ length }}</p>\n <div>\n <button\n *ngIf=\"showFirst\"\n class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() || disabled\" (click)=\"firstPage()\">\n <fw-icon>arrow-back-collapse</fw-icon>\n </button>\n <button\n *ngIf=\"showPrevious\"\n class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\"\n (click)=\"previousPage()\">\n <fw-icon>chevron-back</fw-icon>\n </button>\n <button\n *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n (click)=\"nextPage()\">\n <fw-icon>chevron-forward</fw-icon>\n </button>\n <button\n *ngIf=\"showLast\" class=\"page-item page-action page-last\" [disabled]=\"!hasNextPage() || disabled\"\n (click)=\"lastPage()\">\n <fw-icon>arrow-forward-collapse</fw-icon>\n </button>\n </div>\n </div>\n</div>\n", styles: [":host .paginator{display:flex}:host .paginator button{border:none;background-color:transparent}:host .paginator .page-item{box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:4px}:host .paginator .page-item:disabled{color:var(--typography-muted);cursor:not-allowed}:host .paginator .page-item:disabled h4{opacity:.4}:host .paginator .page-action fw-icon{font-size:22px;color:var(--typography-base)}:host .paginator .page-action:disabled{opacity:.4}:host .paginator .pages-list{box-sizing:border-box;display:flex;gap:4px}:host .paginator .pages-list .page-number h4{margin:0;color:var(--typography-base)}:host .paginator .pages-list .page-number:disabled h4{color:var(--slate-base)!important}:host .paginator .pages-list .page-active{background-color:var(--slate-focus)}:host .paginator .pages-list .page-active:disabled{background-color:transparent}:host .paginator.start{justify-content:flex-start}:host .paginator.center{justify-content:center}:host .paginator.end{justify-content:flex-end}:host .paginator.large .page-item{width:40px;height:40px}:host .paginator.medium .page-item{width:32px;height:32px}:host .paginator.small .page-item{width:26px;height:26px}:host .paginator.primary .page-active:not(:disabled){background-color:var(--primary-base)!important}:host .paginator.primary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.secondary .page-active:not(:disabled){background-color:var(--secondary-base)!important}:host .paginator.secondary .page-active:not(:disabled) h4{color:var(--typography-contrast)!important}:host .paginator.outline .page-item{border:1px solid var(--slate-border)}:host .paginator.outline .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.primary .page-active{background-color:var(--primary-hover)!important;border-color:var(--primary-border)!important}:host .paginator.outline.primary .page-active h4{color:var(--primary-base)!important}:host .paginator.outline.primary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.outline.secondary .page-active{background-color:var(--secondary-hover)!important;border-color:var(--secondary-border)!important}:host .paginator.outline.secondary .page-active h4{color:var(--secondary-base)!important}:host .paginator.outline.secondary .page-active:disabled{border:1px solid var(--slate-border)!important;background-color:transparent!important}:host .paginator.solid .page-item{border:1px solid var(--slate-border);background-color:var(--card-background)}:host .paginator.solid .page-number:disabled{border:1px solid var(--slate-border)!important;background-color:var(--card-background)!important;opacity:.4}:host .paginator.solid .page-number:disabled h4{opacity:1}:host .paginator.circle .page-number{border-radius:999px!important}:host .paginator .pages-selector{display:flex;align-items:center;justify-content:flex-end;gap:16px}:host .paginator .pages-selector>div{display:flex;align-items:center}:host .paginator .pages-selector fw-icon{font-size:22px}:host .paginator .pages-selector .record-count{min-width:130px;text-align:center}:host .paginator .pages-selector p.disabled{color:var(--typography-light)}\n"] }]
|