@flywheel-io/vision 1.8.0 → 1.8.1

package/fesm2020/flywheel-io-vision.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, HostBinding, EventEmitter, Output, NgModule, ContentChildren, ViewEncapsulation, ViewChild, Directive, forwardRef, HostListener, Optional, Injectable, Inject, SkipSelf, Pipe, SimpleChange, ContentChild, ViewChildren } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, HostBinding, EventEmitter, Output, NgModule, ContentChildren, ViewEncapsulation, ViewChild, Directive, forwardRef, HostListener, Optional, Injectable, Inject, SkipSelf, Pipe, SimpleChange, ContentChild, ViewChildren, Self } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
@@ -2391,6 +2391,10 @@ FwValidators.url = (control) => {
 };
 
 const allIcons = [
+    'shield-protect',
+    '3d-sphere-rotate-arrows',
+    'livewire-tool',
+    'bezier-curve',
     'technology-cube-3d',
     'brightness-photo-edit',
     'target-space-object-select',
@@ -5584,8 +5588,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 class FwSelectMenuComponent {
-    constructor(_changeDetectorRef) {
+    constructor(_changeDetectorRef, ngControl) {
         this._changeDetectorRef = _changeDetectorRef;
+        this.ngControl = ngControl;
         this.options = [];
         this.valueProperty = 'value';
         this.titleProperty = 'title';
@@ -5594,6 +5599,7 @@ class FwSelectMenuComponent {
         this.showFilter = false;
         this.showReset = false;
         this.disabled = false;
+        this.errored = false;
         this.width = '200px';
         this.placeholder = 'Select something...';
         // eslint-disable-next-line @angular-eslint/no-output-native
@@ -5605,11 +5611,16 @@ class FwSelectMenuComponent {
         this._isOpen = false;
         this.focused = 0;
         this.inFocusOpen = false;
-        this.onTouched = () => {
-        };
+        this.onTouched = () => { };
+        // this is just a different way of binding the controlValueAccessor
+        // it can be accessed in the component this way
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
     }
     outsideClick(evt) {
         if (this._isOpen && evt.nodeName !== 'INPUT') {
+            this.onTouched();
             this.trigger.close();
             this._isOpen = false;
         }
@@ -5624,43 +5635,23 @@ class FwSelectMenuComponent {
         this._valueType = typeof newValue;
         this.updateValue(newValue);
     }
-    /**
-     * Saves a callback function to be invoked when the select's value
-     * changes from user input. Part of the ControlValueAccessor interface
-     * required to integrate with Angular's core forms API.
-     *
-     * @param fn Callback to be triggered when the value changes.
-     */
+    get invalid() {
+        return this.ngControl?.invalid;
+    }
+    get touched() {
+        return this.ngControl?.touched;
+    }
     registerOnChange(fn) {
         this.onChange = fn;
     }
-    /**
-     * Saves a callback function to be invoked when the select is blurred
-     * by the user. Part of the ControlValueAccessor interface required
-     * to integrate with Angular's core forms API.
-     *
-     * @param fn Callback to be triggered when the component has been touched.
-     */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    /**
-     * Disables the select. Part of the ControlValueAccessor interface required
-     * to integrate with Angular's core forms API.
-     *
-     * @param isDisabled Sets whether the component is disabled.
-     */
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
         // eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
         this._changeDetectorRef.markForCheck();
     }
-    /**
-     * Sets the select's value. Part of the ControlValueAccessor interface
-     * required to integrate with Angular's core forms API.
-     *
-     * @param value New value to be written to the model.
-     */
     writeValue(value) {
         this.updateValue(value);
     }
@@ -5689,6 +5680,7 @@ class FwSelectMenuComponent {
         }
     }
     handleClick(e) {
+        this.onTouched();
         if (this.selectValue !== e) {
             this.options.forEach(item => {
                 if (item[this.valueProperty].toString() === e) {
@@ -5827,24 +5819,16 @@ class FwSelectMenuComponent {
         }
     }
 }
-FwSelectMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-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", descriptionProperty: "descriptionProperty", showFilter: "showFilter", showReset: "showReset", disabled: "disabled", width: "width", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", placeholder: "placeholder", value: "value" }, outputs: { change: "change" }, host: { listeners: { "document:click": "outsideClick($event.target)" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => FwSelectMenuComponent),
-            multi: true,
-        },
-    ], queries: [{ propertyName: "menuItems", predicate: FwMenuItemComponent }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true }, { propertyName: "menu", first: true, predicate: FwMenuComponent, descendants: true }], ngImport: i0, template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"selectTitle\"\n    [leftIcon]=\"selectIcon\"\n    [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n    (rightIconAction)=\"handleReset()\"\n    [useActionableIcons]=\"true\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    (keyup)=\"handleKeyUp($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    readOnly=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [value]=\"selectValue\"\n        (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$2.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"] }, { 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"] }] });
+FwSelectMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+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", descriptionProperty: "descriptionProperty", showFilter: "showFilter", showReset: "showReset", disabled: "disabled", errored: "errored", width: "width", optionsWidth: "optionsWidth", maxOptionsHeight: "maxOptionsHeight", placeholder: "placeholder", value: "value" }, outputs: { change: "change" }, 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 }], ngImport: i0, template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"selectTitle\"\n    [leftIcon]=\"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 [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [value]=\"selectValue\"\n        (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$2.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"] }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwSelectMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-select', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => FwSelectMenuComponent),
-                            multi: true,
-                        },
-                    ], template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"selectTitle\"\n    [leftIcon]=\"selectIcon\"\n    [rightIcon]=\"(selectTitle&&showReset)?'close-circled':'chevron-down'\"\n    (rightIconAction)=\"handleReset()\"\n    [useActionableIcons]=\"true\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    (keyup)=\"handleKeyUp($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    readOnly=\"true\">\n  </fw-text-input>\n  <ng-template #selectMenu>\n    <fw-menu-container [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [value]=\"selectValue\"\n        (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"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { outsideClick: [{
+            args: [{ selector: 'fw-select', template: "<div [ngStyle]=\"{width: width, cursor: 'pointer'}\">\n  <fw-text-input\n    [cdkMenuTriggerFor]=\"selectMenu\"\n    [value]=\"selectTitle\"\n    [leftIcon]=\"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 [showFilter]=\"showFilter\" [width]=\"optionsWidth || width\" [maxHeight]=\"maxOptionsHeight\">\n      <fw-menu\n        [disabled]=\"disabled\"\n        [value]=\"selectValue\"\n        (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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }]; }, propDecorators: { outsideClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event.target']]
             }], options: [{
@@ -5863,6 +5847,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
+            }], errored: [{
+                type: Input
             }], width: [{
                 type: Input
             }], optionsWidth: [{
@@ -6014,7 +6000,7 @@ class FwPaginatorAdvancedComponent {
     }
 }
 FwPaginatorAdvancedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorAdvancedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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      &nbsp;\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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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", "descriptionProperty", "showFilter", "showReset", "disabled", "width", "optionsWidth", "maxOptionsHeight", "placeholder", "value"], outputs: ["change"] }] });
+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      &nbsp;\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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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", "descriptionProperty", "showFilter", "showReset", "disabled", "errored", "width", "optionsWidth", "maxOptionsHeight", "placeholder", "value"], outputs: ["change"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorAdvancedComponent, decorators: [{
             type: Component,
             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      &nbsp;\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"] }]