@flywheel-io/vision 1.19.0-beta.0 → 1.19.1
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/paginator/paginator.component.d.ts +5 -2
- package/components/select-menu/multi-select-menu/multi-select-menu.component.d.ts +1 -1
- package/esm2020/components/paginator/paginator.component.mjs +16 -16
- package/esm2020/components/select-menu/multi-select-menu/multi-select-menu.component.mjs +4 -4
- package/fesm2015/flywheel-io-vision.mjs +17 -17
- package/fesm2015/flywheel-io-vision.mjs.map +1 -1
- package/fesm2020/flywheel-io-vision.mjs +17 -17
- package/fesm2020/flywheel-io-vision.mjs.map +1 -1
- package/flywheel-io-vision-1.19.1.tgz +0 -0
- package/package.json +1 -1
- package/flywheel-io-vision-1.19.0-beta.0.tgz +0 -0
|
@@ -5568,6 +5568,13 @@ class FwPaginatorComponent {
|
|
|
5568
5568
|
this.alignment = 'center';
|
|
5569
5569
|
this.selectorTitle = 'Items per page:';
|
|
5570
5570
|
this.page = new EventEmitter();
|
|
5571
|
+
this.pages = [];
|
|
5572
|
+
this.pagesTrackByFn = (index, page) => page.pageIndex;
|
|
5573
|
+
}
|
|
5574
|
+
ngOnChanges(changes) {
|
|
5575
|
+
if (changes.pageIndex || changes.maxPagesShown || changes.length || changes.pageSize) {
|
|
5576
|
+
this.pages = this.getPages();
|
|
5577
|
+
}
|
|
5571
5578
|
}
|
|
5572
5579
|
buildPageEvent(pageIndex) {
|
|
5573
5580
|
return {
|
|
@@ -5580,33 +5587,26 @@ class FwPaginatorComponent {
|
|
|
5580
5587
|
};
|
|
5581
5588
|
}
|
|
5582
5589
|
firstPage() {
|
|
5583
|
-
|
|
5584
|
-
this.pageIndex = 0;
|
|
5585
|
-
this.page.emit(evt);
|
|
5590
|
+
this.setPage(0);
|
|
5586
5591
|
}
|
|
5587
5592
|
lastPage() {
|
|
5588
|
-
|
|
5589
|
-
this.pageIndex = this.getNumberOfPages() - 1;
|
|
5590
|
-
this.page.emit(evt);
|
|
5593
|
+
this.setPage(this.getNumberOfPages() - 1);
|
|
5591
5594
|
}
|
|
5592
5595
|
nextPage() {
|
|
5593
5596
|
if (this.hasNextPage()) {
|
|
5594
|
-
|
|
5595
|
-
this.pageIndex++;
|
|
5596
|
-
this.page.emit(evt);
|
|
5597
|
+
this.setPage(this.pageIndex + 1);
|
|
5597
5598
|
}
|
|
5598
5599
|
}
|
|
5599
5600
|
previousPage() {
|
|
5600
5601
|
if (this.hasPreviousPage()) {
|
|
5601
|
-
|
|
5602
|
-
this.pageIndex--;
|
|
5603
|
-
this.page.emit(evt);
|
|
5602
|
+
this.setPage(this.pageIndex - 1);
|
|
5604
5603
|
}
|
|
5605
5604
|
}
|
|
5606
5605
|
setPage(pageIndex) {
|
|
5607
5606
|
const evt = this.buildPageEvent(pageIndex);
|
|
5608
5607
|
this.pageIndex = pageIndex;
|
|
5609
5608
|
this.page.emit(evt);
|
|
5609
|
+
this.pages = this.getPages();
|
|
5610
5610
|
}
|
|
5611
5611
|
getPages() {
|
|
5612
5612
|
const pages = [];
|
|
@@ -5641,10 +5641,10 @@ class FwPaginatorComponent {
|
|
|
5641
5641
|
}
|
|
5642
5642
|
}
|
|
5643
5643
|
FwPaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5644
|
-
FwPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPaginatorComponent, selector: "fw-paginator", inputs: { size: "size", color: "color", shape: "shape", variant: "variant", disabled: "disabled", showNext: "showNext", showPrevious: "showPrevious", showFirst: "showFirst", showLast: "showLast", pageIndex: "pageIndex", pageSize: "pageSize", maxPagesShown: "maxPagesShown", length: "length", alignment: "alignment", selectorTitle: "selectorTitle" }, outputs: { page: "page" }, ngImport: i0, template: "<div [ngClass]=\"['paginator', variant, color, size, shape, alignment]\">\n <div class=\"pages-list\">\n <button\n *ngIf=\"showFirst\" class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() || disabled\"\n (click)=\"firstPage()\">\n <fw-icon size=\"small\" color=\"typography\">arrow-back-collapse</fw-icon>\n </button>\n <button\n *ngIf=\"showPrevious\"\n class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\" (click)=\"previousPage()\">\n <fw-icon size=\"small\" color=\"typography\">chevron-back</fw-icon>\n </button>\n <button\n [ngClass]=\"['page-item', 'page-number', page.active ? 'page-active': '']\"\n [disabled]=\"disabled\"\n
|
|
5644
|
+
FwPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwPaginatorComponent, selector: "fw-paginator", inputs: { size: "size", color: "color", shape: "shape", variant: "variant", disabled: "disabled", showNext: "showNext", showPrevious: "showPrevious", showFirst: "showFirst", showLast: "showLast", pageIndex: "pageIndex", pageSize: "pageSize", maxPagesShown: "maxPagesShown", length: "length", alignment: "alignment", selectorTitle: "selectorTitle" }, outputs: { page: "page" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"['paginator', variant, color, size, shape, alignment]\">\n <div class=\"pages-list\">\n <button\n *ngIf=\"showFirst\" class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() || disabled\"\n (click)=\"firstPage()\">\n <fw-icon size=\"small\" color=\"typography\">arrow-back-collapse</fw-icon>\n </button>\n <button\n *ngIf=\"showPrevious\"\n class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\" (click)=\"previousPage()\">\n <fw-icon size=\"small\" color=\"typography\">chevron-back</fw-icon>\n </button>\n <button\n *ngFor=\"let page of pages; trackBy: pagesTrackByFn\"\n [ngClass]=\"['page-item', 'page-number', page.active ? 'page-active': '']\"\n [disabled]=\"disabled\"\n (click)=\"setPage(page.pageIndex)\"\n >\n <h4 class=\"vision-h4\">{{ page.number }}</h4>\n </button>\n <button\n *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n (click)=\"nextPage()\">\n <fw-icon size=\"small\" color=\"typography\">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 size=\"small\" color=\"typography\">arrow-forward-collapse</fw-icon>\n </button>\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: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: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5645
5645
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwPaginatorComponent, decorators: [{
|
|
5646
5646
|
type: Component,
|
|
5647
|
-
args: [{ selector: 'fw-paginator', template: "<div [ngClass]=\"['paginator', variant, color, size, shape, alignment]\">\n <div class=\"pages-list\">\n <button\n *ngIf=\"showFirst\" class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() || disabled\"\n (click)=\"firstPage()\">\n <fw-icon size=\"small\" color=\"typography\">arrow-back-collapse</fw-icon>\n </button>\n <button\n *ngIf=\"showPrevious\"\n class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\" (click)=\"previousPage()\">\n <fw-icon size=\"small\" color=\"typography\">chevron-back</fw-icon>\n </button>\n <button\n [ngClass]=\"['page-item', 'page-number', page.active ? 'page-active': '']\"\n [disabled]=\"disabled\"\n
|
|
5647
|
+
args: [{ selector: 'fw-paginator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['paginator', variant, color, size, shape, alignment]\">\n <div class=\"pages-list\">\n <button\n *ngIf=\"showFirst\" class=\"page-item page-action page-first\" [disabled]=\"!hasPreviousPage() || disabled\"\n (click)=\"firstPage()\">\n <fw-icon size=\"small\" color=\"typography\">arrow-back-collapse</fw-icon>\n </button>\n <button\n *ngIf=\"showPrevious\"\n class=\"page-item page-action page-previous\" [disabled]=\"!hasPreviousPage() || disabled\" (click)=\"previousPage()\">\n <fw-icon size=\"small\" color=\"typography\">chevron-back</fw-icon>\n </button>\n <button\n *ngFor=\"let page of pages; trackBy: pagesTrackByFn\"\n [ngClass]=\"['page-item', 'page-number', page.active ? 'page-active': '']\"\n [disabled]=\"disabled\"\n (click)=\"setPage(page.pageIndex)\"\n >\n <h4 class=\"vision-h4\">{{ page.number }}</h4>\n </button>\n <button\n *ngIf=\"showNext\" class=\"page-item page-action page-next\" [disabled]=\"!hasNextPage() || disabled\"\n (click)=\"nextPage()\">\n <fw-icon size=\"small\" color=\"typography\">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 size=\"small\" color=\"typography\">arrow-forward-collapse</fw-icon>\n </button>\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: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"] }]
|
|
5648
5648
|
}], propDecorators: { size: [{
|
|
5649
5649
|
type: Input
|
|
5650
5650
|
}], color: [{
|
|
@@ -6027,7 +6027,7 @@ FwMultiSelectMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
|
|
|
6027
6027
|
useExisting: forwardRef(() => FwMultiSelectMenuComponent),
|
|
6028
6028
|
multi: true,
|
|
6029
6029
|
},
|
|
6030
|
-
], queries: [{ propertyName: "customMenuItems", 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}\" #wrapper>\n <div\n fwMenuRegister\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)=\"handleFilterChange($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)=\"handleFilterChange($event)\">\n <fw-icon>chevron-down</fw-icon>\n </div>\n <ng-template #selectMenu>\n <fw-menu-container\n [width]=\"optionsWidth || wrapper.offsetWidth + 'px'\" [maxHeight]=\"maxOptionsHeight\" [minHeight]=\"minOptionsHeight\"\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=\"customMenuItems.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
|
|
6030
|
+
], queries: [{ propertyName: "customMenuItems", predicate: FwMenuItemComponent, descendants: true }], 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}\" #wrapper>\n <div\n fwMenuRegister\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)=\"handleFilterChange($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)=\"handleFilterChange($event)\">\n <fw-icon>chevron-down</fw-icon>\n </div>\n <ng-template #selectMenu>\n <fw-menu-container\n [width]=\"optionsWidth || wrapper.offsetWidth + 'px'\" [maxHeight]=\"maxOptionsHeight\" [minHeight]=\"minOptionsHeight\"\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=\"customMenuItems.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 </ng-container>\n <fw-menu-item\n *ngIf=\"filteredOptions.length === 0 && emptyText\" [showCheckbox]=\"false\"\n [disabled]=\"true\" [title]=\"emptyText\">\n </fw-menu-item>\n <ng-content select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group, fw-menu-header]\"></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: i1$4.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", "minHeight", "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", "collapsed", "href", "target", "subItemsOpen", "focused", "selected", "variant"], outputs: ["click"] }, { kind: "directive", type: MenuRegisterDirective, selector: "[fwMenuRegister]" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
|
|
6031
6031
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwMultiSelectMenuComponent, decorators: [{
|
|
6032
6032
|
type: Component,
|
|
6033
6033
|
args: [{ selector: 'fw-multi-select', providers: [
|
|
@@ -6036,7 +6036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
6036
6036
|
useExisting: forwardRef(() => FwMultiSelectMenuComponent),
|
|
6037
6037
|
multi: true,
|
|
6038
6038
|
},
|
|
6039
|
-
], template: "<div [ngStyle]=\"{width: width}\" #wrapper>\n <div\n fwMenuRegister\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)=\"handleFilterChange($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)=\"handleFilterChange($event)\">\n <fw-icon>chevron-down</fw-icon>\n </div>\n <ng-template #selectMenu>\n <fw-menu-container\n [width]=\"optionsWidth || wrapper.offsetWidth + 'px'\" [maxHeight]=\"maxOptionsHeight\" [minHeight]=\"minOptionsHeight\"\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=\"customMenuItems.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
|
|
6039
|
+
], template: "<div [ngStyle]=\"{width: width}\" #wrapper>\n <div\n fwMenuRegister\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)=\"handleFilterChange($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)=\"handleFilterChange($event)\">\n <fw-icon>chevron-down</fw-icon>\n </div>\n <ng-template #selectMenu>\n <fw-menu-container\n [width]=\"optionsWidth || wrapper.offsetWidth + 'px'\" [maxHeight]=\"maxOptionsHeight\" [minHeight]=\"minOptionsHeight\"\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=\"customMenuItems.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 </ng-container>\n <fw-menu-item\n *ngIf=\"filteredOptions.length === 0 && emptyText\" [showCheckbox]=\"false\"\n [disabled]=\"true\" [title]=\"emptyText\">\n </fw-menu-item>\n <ng-content select=\"[fw-menu-item, fw-menu-separator, fw-menu-item-group, fw-menu-header]\"></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"] }]
|
|
6040
6040
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { outsideClick: [{
|
|
6041
6041
|
type: HostListener,
|
|
6042
6042
|
args: ['document:click']
|
|
@@ -6087,7 +6087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
6087
6087
|
args: [FwMenuItemComponent]
|
|
6088
6088
|
}], customMenuItems: [{
|
|
6089
6089
|
type: ContentChildren,
|
|
6090
|
-
args: [FwMenuItemComponent]
|
|
6090
|
+
args: [FwMenuItemComponent, { descendants: true }]
|
|
6091
6091
|
}], textInput: [{
|
|
6092
6092
|
type: ViewChild,
|
|
6093
6093
|
args: ['textInput']
|