@flywheel-io/vision 1.3.3 → 1.5.0

package/esm2020/components/paginator/paginator-advanced/paginator-advanced.component.mjs

@@ -91,7 +91,7 @@ export 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}: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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.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: i3.FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: i4.FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "variant", "size", "title", "description", "icon", "disabled", "showCheckbox", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected"], outputs: ["click"] }, { kind: "component", type: i5.FwSelectMenuComponent, selector: "fw-select", inputs: ["options", "valueProperty", "titleProperty", "iconProperty", "descriptionProperty", "showFilter", "disabled", "width", "optionsWidth", "maxOptionsHeight", "placeholder", "value"] }] });
+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}: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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.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: i3.FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: i4.FwMenuItemComponent, selector: "fw-menu-item", inputs: ["value", "size", "title", "description", "icon", "iconColor", "disabled", "showCheckbox", "multiSelect", "hidden", "showTooltip", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "component", type: i5.FwSelectMenuComponent, selector: "fw-select", inputs: ["options", "valueProperty", "titleProperty", "iconProperty", "descriptionProperty", "showFilter", "disabled", "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}: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"] }]