@coreui/angular-pro 5.0.0-alpha.10 → 5.0.0-alpha.11

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.
@@ -31,7 +31,7 @@ export class WidgetStatCComponent extends CardComponent {
31
31
  'fs-4': !this.textColor,
32
32
  'fw-semibold': true,
33
33
  ...this.titleClasses,
34
- 'text-body-emphasis': true
34
+ 'text-opacity-75': false,
35
35
  };
36
36
  }
37
37
  get iconClasses() {
@@ -47,11 +47,11 @@ export class WidgetStatCComponent extends CardComponent {
47
47
  });
48
48
  }
49
49
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: WidgetStatCComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
50
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.9", type: WidgetStatCComponent, isStandalone: true, selector: "c-widget-stat-c", inputs: { icon: "icon", title: "title", value: "value", inverse: ["inverse", "inverse", booleanAttribute] }, host: { properties: { "class": "this.hostExtendedClass" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cWidgetStatC"], usesInheritance: true, ngImport: i0, template: "<c-card-body>\n <div *ngIf=\"icon || templates?.widgetIconTemplate\" [ngClass]=\"iconClasses\">\n <ng-container *ngTemplateOutlet=\"templates?.widgetIconTemplate || defaultWidgetIconTemplate\"></ng-container>\n </div>\n <div *ngIf=\"!!value\" [ngClass]=\"valueClasses\">\n {{value}}\n </div>\n <div *ngIf=\"!!title\" [ngClass]=\"titleClasses\">\n {{title}}\n </div>\n <ng-container *ngIf=\"templates?.widgetProgressTemplate\">\n <ng-container *ngTemplateOutlet=\"templates?.widgetProgressTemplate || defaultWidgetProgressTemplate\"></ng-container>\n </ng-container>\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n {{icon}}\n</ng-template>\n\n<ng-template #defaultWidgetProgressTemplate>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: CardBodyComponent, selector: "c-card-body, [c-card-body]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
50
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.9", type: WidgetStatCComponent, isStandalone: true, selector: "c-widget-stat-c", inputs: { icon: "icon", title: "title", value: "value", inverse: ["inverse", "inverse", booleanAttribute] }, host: { properties: { "class": "this.hostExtendedClass" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cWidgetStatC"], usesInheritance: true, ngImport: i0, template: "<c-card-body>\n <div *ngIf=\"icon || templates?.widgetIconTemplate\" [ngClass]=\"iconClasses\">\n <ng-container *ngTemplateOutlet=\"templates?.widgetIconTemplate || defaultWidgetIconTemplate\" />\n </div>\n <div *ngIf=\"!!value\" [ngClass]=\"valueClasses\">\n {{ value }}\n </div>\n <div *ngIf=\"!!title\" [ngClass]=\"titleClasses\">\n {{ title }}\n </div>\n <ng-container *ngIf=\"templates?.widgetProgressTemplate\">\n <ng-container *ngTemplateOutlet=\"templates?.widgetProgressTemplate || defaultWidgetProgressTemplate\" />\n </ng-container>\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n {{ icon }}\n</ng-template>\n\n<ng-template #defaultWidgetProgressTemplate>\n <ng-content />\n</ng-template>\n", dependencies: [{ kind: "component", type: CardBodyComponent, selector: "c-card-body, [c-card-body]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
51
51
  }
52
52
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: WidgetStatCComponent, decorators: [{
53
53
  type: Component,
54
- args: [{ selector: 'c-widget-stat-c', exportAs: 'cWidgetStatC', standalone: true, imports: [CardBodyComponent, NgIf, NgClass, NgTemplateOutlet], template: "<c-card-body>\n <div *ngIf=\"icon || templates?.widgetIconTemplate\" [ngClass]=\"iconClasses\">\n <ng-container *ngTemplateOutlet=\"templates?.widgetIconTemplate || defaultWidgetIconTemplate\"></ng-container>\n </div>\n <div *ngIf=\"!!value\" [ngClass]=\"valueClasses\">\n {{value}}\n </div>\n <div *ngIf=\"!!title\" [ngClass]=\"titleClasses\">\n {{title}}\n </div>\n <ng-container *ngIf=\"templates?.widgetProgressTemplate\">\n <ng-container *ngTemplateOutlet=\"templates?.widgetProgressTemplate || defaultWidgetProgressTemplate\"></ng-container>\n </ng-container>\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n {{icon}}\n</ng-template>\n\n<ng-template #defaultWidgetProgressTemplate>\n <ng-content></ng-content>\n</ng-template>\n" }]
54
+ args: [{ selector: 'c-widget-stat-c', exportAs: 'cWidgetStatC', standalone: true, imports: [CardBodyComponent, NgIf, NgClass, NgTemplateOutlet], template: "<c-card-body>\n <div *ngIf=\"icon || templates?.widgetIconTemplate\" [ngClass]=\"iconClasses\">\n <ng-container *ngTemplateOutlet=\"templates?.widgetIconTemplate || defaultWidgetIconTemplate\" />\n </div>\n <div *ngIf=\"!!value\" [ngClass]=\"valueClasses\">\n {{ value }}\n </div>\n <div *ngIf=\"!!title\" [ngClass]=\"titleClasses\">\n {{ title }}\n </div>\n <ng-container *ngIf=\"templates?.widgetProgressTemplate\">\n <ng-container *ngTemplateOutlet=\"templates?.widgetProgressTemplate || defaultWidgetProgressTemplate\" />\n </ng-container>\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n {{ icon }}\n</ng-template>\n\n<ng-template #defaultWidgetProgressTemplate>\n <ng-content />\n</ng-template>\n" }]
55
55
  }], ctorParameters: () => [], propDecorators: { icon: [{
56
56
  type: Input
57
57
  }], title: [{
@@ -68,4 +68,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
68
68
  type: HostBinding,
69
69
  args: ['class']
70
70
  }] } });
71
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2lkZ2V0LXN0YXQtYy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JldWktYW5ndWxhci9zcmMvbGliL3dpZGdldC93aWRnZXQtc3RhdC1jL3dpZGdldC1zdGF0LWMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZXVpLWFuZ3VsYXIvc3JjL2xpYi93aWRnZXQvd2lkZ2V0LXN0YXQtYy93aWRnZXQtc3RhdC1jLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCxnQkFBZ0IsRUFDaEIsU0FBUyxFQUNULGVBQWUsRUFDZixXQUFXLEVBQ1gsS0FBSyxFQUVOLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxhQUFhLEVBQUUsTUFBTSxZQUFZLENBQUM7QUFDOUQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQ25ELE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBU2xFLE1BQU0sT0FBTyxvQkFBcUIsU0FBUSxhQUFhO0lBRXJEO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFtQlY7OztXQUdHO1FBQ3FDLFlBQU8sR0FBcUIsS0FBSyxDQUFDO1FBRTFFLGNBQVMsR0FBUSxFQUFFLENBQUM7SUF4QnBCLENBQUM7SUEyQkQsSUFDSSxpQkFBaUI7UUFDbkIsT0FBTztZQUNMLFlBQVksRUFBRSxJQUFJLENBQUMsT0FBTztTQUMzQixDQUFDO0lBQ0osQ0FBQztJQUVELElBQUksWUFBWTtRQUNkLE9BQU87WUFDTCxxQkFBcUIsRUFBRSxDQUFDLElBQUksQ0FBQyxPQUFPO1lBQ3BDLFlBQVksRUFBRSxJQUFJLENBQUMsT0FBTztZQUMxQixpQkFBaUIsRUFBRSxJQUFJLENBQUMsT0FBTztZQUMvQixDQUFDLFFBQVEsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTO1NBQzdDLENBQUM7SUFDSixDQUFDO0lBRUQsSUFBSSxZQUFZO1FBQ2QsT0FBTztZQUNMLE1BQU0sRUFBRSxDQUFDLElBQUksQ0FBQyxTQUFTO1lBQ3ZCLGFBQWEsRUFBRSxJQUFJO1lBQ25CLEdBQUcsSUFBSSxDQUFDLFlBQVk7WUFDcEIsb0JBQW9CLEVBQUUsSUFBSTtTQUMzQixDQUFDO0lBQ0osQ0FBQztJQUVELElBQUksV0FBVztRQUNiLE9BQU87WUFDTCxNQUFNLEVBQUUsQ0FBQyxJQUFJLENBQUMsU0FBUztZQUN2QixVQUFVLEVBQUUsSUFBSTtZQUNoQixHQUFHLElBQUksQ0FBQyxZQUFZO1NBQ3JCLENBQUM7SUFDSixDQUFDO0lBRUQsa0JBQWtCO1FBQ2hCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLENBQUMsQ0FBQyxLQUEwQixFQUFFLEVBQUU7WUFDM0QsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FBQztRQUMvQyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7OEdBcEVVLG9CQUFvQjtrR0FBcEIsb0JBQW9CLDJJQTBCWCxnQkFBZ0IsMkhBR25CLG1CQUFtQixtR0NsRHRDLGt3QkFzQkEsNENESFksaUJBQWlCLHVFQUFFLElBQUksNkZBQUUsT0FBTyxvRkFBRSxnQkFBZ0I7OzJGQUVqRCxvQkFBb0I7a0JBUGhDLFNBQVM7K0JBQ0UsaUJBQWlCLFlBRWpCLGNBQWMsY0FDWixJQUFJLFdBQ1AsQ0FBQyxpQkFBaUIsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixDQUFDO3dEQVlwRCxJQUFJO3NCQUFaLEtBQUs7Z0JBS0csS0FBSztzQkFBYixLQUFLO2dCQUtHLEtBQUs7c0JBQWIsS0FBSztnQkFNa0MsT0FBTztzQkFBOUMsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRTtnQkFHdUIsZ0JBQWdCO3NCQUE1RSxlQUFlO3VCQUFDLG1CQUFtQixFQUFFLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRTtnQkFHdkQsaUJBQWlCO3NCQURwQixXQUFXO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlckNvbnRlbnRJbml0LFxuICBib29sZWFuQXR0cmlidXRlLFxuICBDb21wb25lbnQsXG4gIENvbnRlbnRDaGlsZHJlbixcbiAgSG9zdEJpbmRpbmcsXG4gIElucHV0LFxuICBRdWVyeUxpc3Rcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IENhcmRCb2R5Q29tcG9uZW50LCBDYXJkQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vY2FyZCc7XG5pbXBvcnQgeyBUZW1wbGF0ZUlkRGlyZWN0aXZlIH0gZnJvbSAnLi4vLi4vc2hhcmVkJztcbmltcG9ydCB7IE5nQ2xhc3MsIE5nSWYsIE5nVGVtcGxhdGVPdXRsZXQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjLXdpZGdldC1zdGF0LWMnLFxuICB0ZW1wbGF0ZVVybDogJy4vd2lkZ2V0LXN0YXQtYy5jb21wb25lbnQuaHRtbCcsXG4gIGV4cG9ydEFzOiAnY1dpZGdldFN0YXRDJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NhcmRCb2R5Q29tcG9uZW50LCBOZ0lmLCBOZ0NsYXNzLCBOZ1RlbXBsYXRlT3V0bGV0XVxufSlcbmV4cG9ydCBjbGFzcyBXaWRnZXRTdGF0Q0NvbXBvbmVudCBleHRlbmRzIENhcmRDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0IHtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbiAgLyoqXG4gICAqIEljb24gZm9yIHlvdXIgY29tcG9uZW50LlxuICAgKiBAdHlwZSBzdHJpbmdcbiAgICovXG4gIEBJbnB1dCgpIGljb24/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBUaXRsZSBvZiB0aGUgd2lkZ2V0IHRvIGRpc3BsYXlcbiAgICogQHR5cGUgc3RyaW5nXG4gICAqL1xuICBASW5wdXQoKSB0aXRsZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFZhbHVlIGZvciB5b3VyIHdpZGdldCB0byBkaXNwbGF5XG4gICAqIEB0eXBlIHN0cmluZ1xuICAgKi9cbiAgQElucHV0KCkgdmFsdWU/OiBzdHJpbmcgfCBudW1iZXI7XG5cbiAgLyoqXG4gICAqIEludmVydCBjb2xvcnMgZnJvbSB0aGVpciBkZWZhdWx0IGRhcmsgc2hhZGUuXG4gICAqIEB0eXBlIGJvb2xlYW5cbiAgICovXG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSB9KSBpbnZlcnNlOiBzdHJpbmcgfCBib29sZWFuID0gZmFsc2U7XG5cbiAgdGVtcGxhdGVzOiBhbnkgPSB7fTtcbiAgQENvbnRlbnRDaGlsZHJlbihUZW1wbGF0ZUlkRGlyZWN0aXZlLCB7IGRlc2NlbmRhbnRzOiB0cnVlIH0pIGNvbnRlbnRUZW1wbGF0ZXMhOiBRdWVyeUxpc3Q8VGVtcGxhdGVJZERpcmVjdGl2ZT47XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIGdldCBob3N0RXh0ZW5kZWRDbGFzcygpIHtcbiAgICByZXR1cm4ge1xuICAgICAgJ3RleHQtd2hpdGUnOiB0aGlzLmludmVyc2VcbiAgICB9O1xuICB9XG5cbiAgZ2V0IHRpdGxlQ2xhc3NlcygpIHtcbiAgICByZXR1cm4ge1xuICAgICAgJ3RleHQtYm9keS1zZWNvbmRhcnknOiAhdGhpcy5pbnZlcnNlLFxuICAgICAgJ3RleHQtd2hpdGUnOiB0aGlzLmludmVyc2UsXG4gICAgICAndGV4dC1vcGFjaXR5LTc1JzogdGhpcy5pbnZlcnNlLFxuICAgICAgW2B0ZXh0LSR7dGhpcy50ZXh0Q29sb3J9YF06ICEhdGhpcy50ZXh0Q29sb3JcbiAgICB9O1xuICB9XG5cbiAgZ2V0IHZhbHVlQ2xhc3NlcygpIHtcbiAgICByZXR1cm4ge1xuICAgICAgJ2ZzLTQnOiAhdGhpcy50ZXh0Q29sb3IsXG4gICAgICAnZnctc2VtaWJvbGQnOiB0cnVlLFxuICAgICAgLi4udGhpcy50aXRsZUNsYXNzZXMsXG4gICAgICAndGV4dC1ib2R5LWVtcGhhc2lzJzogdHJ1ZVxuICAgIH07XG4gIH1cblxuICBnZXQgaWNvbkNsYXNzZXMoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgICdtYi00JzogIXRoaXMudGV4dENvbG9yLFxuICAgICAgJ3RleHQtZW5kJzogdHJ1ZSxcbiAgICAgIC4uLnRoaXMudGl0bGVDbGFzc2VzXG4gICAgfTtcbiAgfVxuXG4gIG5nQWZ0ZXJDb250ZW50SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmNvbnRlbnRUZW1wbGF0ZXMuZm9yRWFjaCgoY2hpbGQ6IFRlbXBsYXRlSWREaXJlY3RpdmUpID0+IHtcbiAgICAgIHRoaXMudGVtcGxhdGVzW2NoaWxkLmlkXSA9IGNoaWxkLnRlbXBsYXRlUmVmO1xuICAgIH0pO1xuICB9XG59XG4iLCI8Yy1jYXJkLWJvZHk+XG4gIDxkaXYgKm5nSWY9XCJpY29uIHx8IHRlbXBsYXRlcz8ud2lkZ2V0SWNvblRlbXBsYXRlXCIgW25nQ2xhc3NdPVwiaWNvbkNsYXNzZXNcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidGVtcGxhdGVzPy53aWRnZXRJY29uVGVtcGxhdGUgfHwgZGVmYXVsdFdpZGdldEljb25UZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxuICA8L2Rpdj5cbiAgPGRpdiAqbmdJZj1cIiEhdmFsdWVcIiBbbmdDbGFzc109XCJ2YWx1ZUNsYXNzZXNcIj5cbiAgICB7e3ZhbHVlfX1cbiAgPC9kaXY+XG4gIDxkaXYgKm5nSWY9XCIhIXRpdGxlXCIgW25nQ2xhc3NdPVwidGl0bGVDbGFzc2VzXCI+XG4gICAge3t0aXRsZX19XG4gIDwvZGl2PlxuICA8bmctY29udGFpbmVyICpuZ0lmPVwidGVtcGxhdGVzPy53aWRnZXRQcm9ncmVzc1RlbXBsYXRlXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInRlbXBsYXRlcz8ud2lkZ2V0UHJvZ3Jlc3NUZW1wbGF0ZSB8fCBkZWZhdWx0V2lkZ2V0UHJvZ3Jlc3NUZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxuICA8L25nLWNvbnRhaW5lcj5cbjwvYy1jYXJkLWJvZHk+XG5cbjxuZy10ZW1wbGF0ZSAjZGVmYXVsdFdpZGdldEljb25UZW1wbGF0ZT5cbiAge3tpY29ufX1cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjZGVmYXVsdFdpZGdldFByb2dyZXNzVGVtcGxhdGU+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvbmctdGVtcGxhdGU+XG4iXX0=
71
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2lkZ2V0LXN0YXQtYy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JldWktYW5ndWxhci9zcmMvbGliL3dpZGdldC93aWRnZXQtc3RhdC1jL3dpZGdldC1zdGF0LWMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZXVpLWFuZ3VsYXIvc3JjL2xpYi93aWRnZXQvd2lkZ2V0LXN0YXQtYy93aWRnZXQtc3RhdC1jLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCxnQkFBZ0IsRUFDaEIsU0FBUyxFQUNULGVBQWUsRUFDZixXQUFXLEVBQ1gsS0FBSyxFQUVOLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxhQUFhLEVBQUUsTUFBTSxZQUFZLENBQUM7QUFDOUQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQ25ELE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBU2xFLE1BQU0sT0FBTyxvQkFBcUIsU0FBUSxhQUFhO0lBRXJEO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFtQlY7OztXQUdHO1FBQ3FDLFlBQU8sR0FBWSxLQUFLLENBQUM7UUFFakUsY0FBUyxHQUFRLEVBQUUsQ0FBQztJQXhCcEIsQ0FBQztJQTJCRCxJQUNJLGlCQUFpQjtRQUNuQixPQUFPO1lBQ0wsWUFBWSxFQUFFLElBQUksQ0FBQyxPQUFPO1NBQzNCLENBQUM7SUFDSixDQUFDO0lBRUQsSUFBSSxZQUFZO1FBQ2QsT0FBTztZQUNMLHFCQUFxQixFQUFFLENBQUMsSUFBSSxDQUFDLE9BQU87WUFDcEMsWUFBWSxFQUFFLElBQUksQ0FBQyxPQUFPO1lBQzFCLGlCQUFpQixFQUFFLElBQUksQ0FBQyxPQUFPO1lBQy9CLENBQUMsUUFBUSxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVM7U0FDN0MsQ0FBQztJQUNKLENBQUM7SUFFRCxJQUFJLFlBQVk7UUFDZCxPQUFPO1lBQ0wsTUFBTSxFQUFFLENBQUMsSUFBSSxDQUFDLFNBQVM7WUFDdkIsYUFBYSxFQUFFLElBQUk7WUFDbkIsR0FBRyxJQUFJLENBQUMsWUFBWTtZQUNwQixpQkFBaUIsRUFBRSxLQUFLO1NBQ3pCLENBQUM7SUFDSixDQUFDO0lBRUQsSUFBSSxXQUFXO1FBQ2IsT0FBTztZQUNMLE1BQU0sRUFBRSxDQUFDLElBQUksQ0FBQyxTQUFTO1lBQ3ZCLFVBQVUsRUFBRSxJQUFJO1lBQ2hCLEdBQUcsSUFBSSxDQUFDLFlBQVk7U0FDckIsQ0FBQztJQUNKLENBQUM7SUFFRCxrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLGdCQUFnQixDQUFDLE9BQU8sQ0FBQyxDQUFDLEtBQTBCLEVBQUUsRUFBRTtZQUMzRCxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsR0FBRyxLQUFLLENBQUMsV0FBVyxDQUFDO1FBQy9DLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs4R0FwRVUsb0JBQW9CO2tHQUFwQixvQkFBb0IsMklBMEJYLGdCQUFnQiwySEFHbkIsbUJBQW1CLG1HQ2xEdEMsbXVCQXNCQSw0Q0RIWSxpQkFBaUIsdUVBQUUsSUFBSSw2RkFBRSxPQUFPLG9GQUFFLGdCQUFnQjs7MkZBRWpELG9CQUFvQjtrQkFQaEMsU0FBUzsrQkFDRSxpQkFBaUIsWUFFakIsY0FBYyxjQUNaLElBQUksV0FDUCxDQUFDLGlCQUFpQixFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsZ0JBQWdCLENBQUM7d0RBWXBELElBQUk7c0JBQVosS0FBSztnQkFLRyxLQUFLO3NCQUFiLEtBQUs7Z0JBS0csS0FBSztzQkFBYixLQUFLO2dCQU1rQyxPQUFPO3NCQUE5QyxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFO2dCQUd1QixnQkFBZ0I7c0JBQTVFLGVBQWU7dUJBQUMsbUJBQW1CLEVBQUUsRUFBRSxXQUFXLEVBQUUsSUFBSSxFQUFFO2dCQUd2RCxpQkFBaUI7c0JBRHBCLFdBQVc7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEFmdGVyQ29udGVudEluaXQsXG4gIGJvb2xlYW5BdHRyaWJ1dGUsXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkcmVuLFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG4gIFF1ZXJ5TGlzdFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQ2FyZEJvZHlDb21wb25lbnQsIENhcmRDb21wb25lbnQgfSBmcm9tICcuLi8uLi9jYXJkJztcbmltcG9ydCB7IFRlbXBsYXRlSWREaXJlY3RpdmUgfSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuaW1wb3J0IHsgTmdDbGFzcywgTmdJZiwgTmdUZW1wbGF0ZU91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Mtd2lkZ2V0LXN0YXQtYycsXG4gIHRlbXBsYXRlVXJsOiAnLi93aWRnZXQtc3RhdC1jLmNvbXBvbmVudC5odG1sJyxcbiAgZXhwb3J0QXM6ICdjV2lkZ2V0U3RhdEMnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ2FyZEJvZHlDb21wb25lbnQsIE5nSWYsIE5nQ2xhc3MsIE5nVGVtcGxhdGVPdXRsZXRdXG59KVxuZXhwb3J0IGNsYXNzIFdpZGdldFN0YXRDQ29tcG9uZW50IGV4dGVuZHMgQ2FyZENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQge1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICAvKipcbiAgICogSWNvbiBmb3IgeW91ciBjb21wb25lbnQuXG4gICAqIEB0eXBlIHN0cmluZ1xuICAgKi9cbiAgQElucHV0KCkgaWNvbj86IHN0cmluZztcbiAgLyoqXG4gICAqIFRpdGxlIG9mIHRoZSB3aWRnZXQgdG8gZGlzcGxheVxuICAgKiBAdHlwZSBzdHJpbmdcbiAgICovXG4gIEBJbnB1dCgpIHRpdGxlPzogc3RyaW5nO1xuICAvKipcbiAgICogVmFsdWUgZm9yIHlvdXIgd2lkZ2V0IHRvIGRpc3BsYXlcbiAgICogQHR5cGUgc3RyaW5nXG4gICAqL1xuICBASW5wdXQoKSB2YWx1ZT86IHN0cmluZyB8IG51bWJlcjtcblxuICAvKipcbiAgICogSW52ZXJ0IGNvbG9ycyBmcm9tIHRoZWlyIGRlZmF1bHQgZGFyayBzaGFkZS5cbiAgICogQHR5cGUgYm9vbGVhblxuICAgKi9cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pIGludmVyc2U6IGJvb2xlYW4gPSBmYWxzZTtcblxuICB0ZW1wbGF0ZXM6IGFueSA9IHt9O1xuICBAQ29udGVudENoaWxkcmVuKFRlbXBsYXRlSWREaXJlY3RpdmUsIHsgZGVzY2VuZGFudHM6IHRydWUgfSkgY29udGVudFRlbXBsYXRlcyE6IFF1ZXJ5TGlzdDxUZW1wbGF0ZUlkRGlyZWN0aXZlPjtcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcbiAgZ2V0IGhvc3RFeHRlbmRlZENsYXNzKCkge1xuICAgIHJldHVybiB7XG4gICAgICAndGV4dC13aGl0ZSc6IHRoaXMuaW52ZXJzZVxuICAgIH07XG4gIH1cblxuICBnZXQgdGl0bGVDbGFzc2VzKCkge1xuICAgIHJldHVybiB7XG4gICAgICAndGV4dC1ib2R5LXNlY29uZGFyeSc6ICF0aGlzLmludmVyc2UsXG4gICAgICAndGV4dC13aGl0ZSc6IHRoaXMuaW52ZXJzZSxcbiAgICAgICd0ZXh0LW9wYWNpdHktNzUnOiB0aGlzLmludmVyc2UsXG4gICAgICBbYHRleHQtJHt0aGlzLnRleHRDb2xvcn1gXTogISF0aGlzLnRleHRDb2xvclxuICAgIH07XG4gIH1cblxuICBnZXQgdmFsdWVDbGFzc2VzKCkge1xuICAgIHJldHVybiB7XG4gICAgICAnZnMtNCc6ICF0aGlzLnRleHRDb2xvcixcbiAgICAgICdmdy1zZW1pYm9sZCc6IHRydWUsXG4gICAgICAuLi50aGlzLnRpdGxlQ2xhc3NlcyxcbiAgICAgICd0ZXh0LW9wYWNpdHktNzUnOiBmYWxzZSxcbiAgICB9O1xuICB9XG5cbiAgZ2V0IGljb25DbGFzc2VzKCkge1xuICAgIHJldHVybiB7XG4gICAgICAnbWItNCc6ICF0aGlzLnRleHRDb2xvcixcbiAgICAgICd0ZXh0LWVuZCc6IHRydWUsXG4gICAgICAuLi50aGlzLnRpdGxlQ2xhc3Nlc1xuICAgIH07XG4gIH1cblxuICBuZ0FmdGVyQ29udGVudEluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5jb250ZW50VGVtcGxhdGVzLmZvckVhY2goKGNoaWxkOiBUZW1wbGF0ZUlkRGlyZWN0aXZlKSA9PiB7XG4gICAgICB0aGlzLnRlbXBsYXRlc1tjaGlsZC5pZF0gPSBjaGlsZC50ZW1wbGF0ZVJlZjtcbiAgICB9KTtcbiAgfVxufVxuIiwiPGMtY2FyZC1ib2R5PlxuICA8ZGl2ICpuZ0lmPVwiaWNvbiB8fCB0ZW1wbGF0ZXM/LndpZGdldEljb25UZW1wbGF0ZVwiIFtuZ0NsYXNzXT1cImljb25DbGFzc2VzXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInRlbXBsYXRlcz8ud2lkZ2V0SWNvblRlbXBsYXRlIHx8IGRlZmF1bHRXaWRnZXRJY29uVGVtcGxhdGVcIiAvPlxuICA8L2Rpdj5cbiAgPGRpdiAqbmdJZj1cIiEhdmFsdWVcIiBbbmdDbGFzc109XCJ2YWx1ZUNsYXNzZXNcIj5cbiAgICB7eyB2YWx1ZSB9fVxuICA8L2Rpdj5cbiAgPGRpdiAqbmdJZj1cIiEhdGl0bGVcIiBbbmdDbGFzc109XCJ0aXRsZUNsYXNzZXNcIj5cbiAgICB7eyB0aXRsZSB9fVxuICA8L2Rpdj5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInRlbXBsYXRlcz8ud2lkZ2V0UHJvZ3Jlc3NUZW1wbGF0ZVwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJ0ZW1wbGF0ZXM/LndpZGdldFByb2dyZXNzVGVtcGxhdGUgfHwgZGVmYXVsdFdpZGdldFByb2dyZXNzVGVtcGxhdGVcIiAvPlxuICA8L25nLWNvbnRhaW5lcj5cbjwvYy1jYXJkLWJvZHk+XG5cbjxuZy10ZW1wbGF0ZSAjZGVmYXVsdFdpZGdldEljb25UZW1wbGF0ZT5cbiAge3sgaWNvbiB9fVxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNkZWZhdWx0V2lkZ2V0UHJvZ3Jlc3NUZW1wbGF0ZT5cbiAgPG5nLWNvbnRlbnQgLz5cbjwvbmctdGVtcGxhdGU+XG4iXX0=
@@ -7707,7 +7707,7 @@ class DateRangePickerComponent {
7707
7707
  * @type Partial<Options>
7708
7708
  */
7709
7709
  this.popperjsOptions = {
7710
- strategy: 'fixed'
7710
+ strategy: 'absolute'
7711
7711
  };
7712
7712
  /**
7713
7713
  * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacentDays` option is set to true.
@@ -8111,7 +8111,7 @@ class DateRangePickerComponent {
8111
8111
  useExisting: forwardRef(() => DateRangePickerComponent),
8112
8112
  multi: true
8113
8113
  }
8114
- ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true }], exportAs: ["cDateRangePicker"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n <div [caret]=\"false\"\n [disabled]=\"disabled ?? dropdown.visible\"\n cDropdownToggle\n class=\"date-picker-input-group\"\n >\n <input #startDateElementRef\n (change)=\"handleStartDateInputChange($event)\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [formControl]=\"startDateInput\"\n [ngClass]=\"{hover: !!inputStartHoverValue}\"\n [placeholder]=\"startDatePlaceholder\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"range ? undefined : valid\"\n cFormControl\n class=\"date-picker-input\"\n pattern=\"[1-9]*\"\n >\n <div *ngIf=\"range && separator !== false\" class=\"date-picker-separator\"></div>\n <input #endDateElementRef\n (change)=\"handleEndDateInputChange($event)\"\n *ngIf=\"range\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [formControl]=\"endDateInput\"\n [ngClass]=\"{hover: !!inputEndHoverValue}\"\n [placeholder]=\"endDatePlaceholder\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid ?? undefined\"\n cFormControl\n class=\"date-picker-input\"\n pattern=\"[1-9]*\"\n >\n <div *ngIf=\"indicator\" class=\"date-picker-indicator\"></div>\n <div (click)=\"!disabled && handleClear($event)\"\n *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n class=\"date-picker-cleaner\" role=\"button\">\n </div>\n\n </div>\n <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n <div class=\"date-picker-body\">\n <ng-template [ngIf]=\"!showRanges\">\n <div *ngIf=\"ranges && customRanges.length > 0\" class=\"date-picker-ranges\">\n <button (click)=\"setCustomRange(customRange)\"\n *ngFor=\"let customRange of customRanges\"\n [color]=\"rangesButtonsColor\"\n [size]=\"rangesButtonsSize\"\n [variant]=\"rangesButtonsVariant\"\n cButton>\n {{customRange | customRangeKey}}\n </button>\n </div>\n </ng-template>\n <c-calendar\n (calendarCellHover)=\"handleCalendarCellHover($event)\"\n (calendarDateChange)=\"handleCalendarDateChange($event)\"\n (endDateChange)=\"handleEndDateChange($event)\"\n (startDateChange)=\"handleStartDateChange($event)\"\n [calendarDate]=\"calendarDate\"\n [calendars]=\"isMobile ? 1 : calendars\"\n [dateFilter]=\"dateFilter\"\n [disabledDates]=\"disabledDates\"\n [endDate]=\"endDate\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [locale]=\"locale\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [navigation]=\"navigation\"\n [range]=\"range\"\n [startDate]=\"startDate\"\n [navYearFirst]=\"navYearFirst\"\n [dayFormat]=\"dayFormat\"\n [weekdayFormat]=\"weekdayFormat\"\n [selectAdjacentDays]=\"selectAdjacentDays\"\n [showAdjacentDays]=\"showAdjacentDays\"\n [showWeekNumber]=\"showWeekNumber\"\n [selectionType]=\"selectionType\"\n [weekNumbersLabel]=\"weekNumbersLabel\"\n class=\"date-picker-calendars\"\n ></c-calendar>\n <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n <!-- todo-->\n <c-time-picker\n variant=\"select\"\n [locale]=\"locale\"\n [disabled]=\"!startDate\"\n [time]=\"startDate ?? undefined\"\n (timeChange)=\"handleStartTimeChange($event)\"\n ></c-time-picker>\n <c-time-picker\n *ngIf=\"range\"\n variant=\"select\"\n [locale]=\"locale\"\n [disabled]=\"!endDate\"\n [time]=\"endDate ?? undefined\"\n (timeChange)=\"handleEndTimeChange($event)\"\n ></c-time-picker>\n </div>\n </div>\n <div *ngIf=\"templates?.datePickerFooter\" class=\"date-picker-footer\">\n <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n </div>\n </div>\n <ng-content></ng-content>\n</c-dropdown>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }] }); }
8114
+ ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true }], exportAs: ["cDateRangePicker"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n <div [caret]=\"false\"\n [disabled]=\"disabled ?? dropdown.visible\"\n cDropdownToggle\n class=\"date-picker-input-group\"\n >\n <input #startDateElementRef\n (change)=\"handleStartDateInputChange($event)\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [formControl]=\"startDateInput\"\n [ngClass]=\"{hover: !!inputStartHoverValue}\"\n [placeholder]=\"startDatePlaceholder\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"range ? undefined : valid\"\n cFormControl\n class=\"date-picker-input\"\n pattern=\"[1-9]*\"\n >\n <div *ngIf=\"range && separator !== false\" class=\"date-picker-separator\"></div>\n <input #endDateElementRef\n (change)=\"handleEndDateInputChange($event)\"\n *ngIf=\"range\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [formControl]=\"endDateInput\"\n [ngClass]=\"{hover: !!inputEndHoverValue}\"\n [placeholder]=\"endDatePlaceholder\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid ?? undefined\"\n cFormControl\n class=\"date-picker-input\"\n pattern=\"[1-9]*\"\n >\n <div *ngIf=\"indicator\" class=\"date-picker-indicator\"></div>\n <div (click)=\"!disabled && handleClear($event)\"\n *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n class=\"date-picker-cleaner\" role=\"button\">\n </div>\n\n </div>\n <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n <div class=\"date-picker-body\">\n <ng-template [ngIf]=\"!showRanges\">\n <div *ngIf=\"ranges && customRanges.length > 0\" class=\"date-picker-ranges\">\n <button (click)=\"setCustomRange(customRange)\"\n *ngFor=\"let customRange of customRanges\"\n [color]=\"rangesButtonsColor\"\n [size]=\"rangesButtonsSize\"\n [variant]=\"rangesButtonsVariant\"\n cButton>\n {{customRange | customRangeKey}}\n </button>\n </div>\n </ng-template>\n <c-calendar\n (calendarCellHover)=\"handleCalendarCellHover($event)\"\n (calendarDateChange)=\"handleCalendarDateChange($event)\"\n (endDateChange)=\"handleEndDateChange($event)\"\n (startDateChange)=\"handleStartDateChange($event)\"\n [calendarDate]=\"calendarDate\"\n [calendars]=\"isMobile ? 1 : calendars\"\n [dateFilter]=\"dateFilter\"\n [disabledDates]=\"disabledDates\"\n [endDate]=\"endDate\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [locale]=\"locale\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [navigation]=\"navigation\"\n [range]=\"range\"\n [startDate]=\"startDate\"\n [navYearFirst]=\"navYearFirst\"\n [dayFormat]=\"dayFormat\"\n [weekdayFormat]=\"weekdayFormat\"\n [selectAdjacentDays]=\"selectAdjacentDays\"\n [showAdjacentDays]=\"showAdjacentDays\"\n [showWeekNumber]=\"showWeekNumber\"\n [selectionType]=\"selectionType\"\n [weekNumbersLabel]=\"weekNumbersLabel\"\n class=\"date-picker-calendars\"\n ></c-calendar>\n <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n <!-- todo-->\n <c-time-picker\n variant=\"select\"\n [locale]=\"locale\"\n [disabled]=\"!startDate\"\n [time]=\"startDate ?? undefined\"\n (timeChange)=\"handleStartTimeChange($event)\"\n ></c-time-picker>\n <c-time-picker\n *ngIf=\"range\"\n variant=\"select\"\n [locale]=\"locale\"\n [disabled]=\"!endDate\"\n [time]=\"endDate ?? undefined\"\n (timeChange)=\"handleEndTimeChange($event)\"\n ></c-time-picker>\n </div>\n </div>\n <div *ngIf=\"templates?.datePickerFooter\" class=\"date-picker-footer\">\n <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n </div>\n </div>\n <ng-content></ng-content>\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }] }); }
8115
8115
  }
8116
8116
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: DateRangePickerComponent, decorators: [{
8117
8117
  type: Component,
@@ -8137,7 +8137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
8137
8137
  useExisting: forwardRef(() => DateRangePickerComponent),
8138
8138
  multi: true
8139
8139
  }
8140
- ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n <div [caret]=\"false\"\n [disabled]=\"disabled ?? dropdown.visible\"\n cDropdownToggle\n class=\"date-picker-input-group\"\n >\n <input #startDateElementRef\n (change)=\"handleStartDateInputChange($event)\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [formControl]=\"startDateInput\"\n [ngClass]=\"{hover: !!inputStartHoverValue}\"\n [placeholder]=\"startDatePlaceholder\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"range ? undefined : valid\"\n cFormControl\n class=\"date-picker-input\"\n pattern=\"[1-9]*\"\n >\n <div *ngIf=\"range && separator !== false\" class=\"date-picker-separator\"></div>\n <input #endDateElementRef\n (change)=\"handleEndDateInputChange($event)\"\n *ngIf=\"range\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [formControl]=\"endDateInput\"\n [ngClass]=\"{hover: !!inputEndHoverValue}\"\n [placeholder]=\"endDatePlaceholder\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid ?? undefined\"\n cFormControl\n class=\"date-picker-input\"\n pattern=\"[1-9]*\"\n >\n <div *ngIf=\"indicator\" class=\"date-picker-indicator\"></div>\n <div (click)=\"!disabled && handleClear($event)\"\n *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n class=\"date-picker-cleaner\" role=\"button\">\n </div>\n\n </div>\n <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n <div class=\"date-picker-body\">\n <ng-template [ngIf]=\"!showRanges\">\n <div *ngIf=\"ranges && customRanges.length > 0\" class=\"date-picker-ranges\">\n <button (click)=\"setCustomRange(customRange)\"\n *ngFor=\"let customRange of customRanges\"\n [color]=\"rangesButtonsColor\"\n [size]=\"rangesButtonsSize\"\n [variant]=\"rangesButtonsVariant\"\n cButton>\n {{customRange | customRangeKey}}\n </button>\n </div>\n </ng-template>\n <c-calendar\n (calendarCellHover)=\"handleCalendarCellHover($event)\"\n (calendarDateChange)=\"handleCalendarDateChange($event)\"\n (endDateChange)=\"handleEndDateChange($event)\"\n (startDateChange)=\"handleStartDateChange($event)\"\n [calendarDate]=\"calendarDate\"\n [calendars]=\"isMobile ? 1 : calendars\"\n [dateFilter]=\"dateFilter\"\n [disabledDates]=\"disabledDates\"\n [endDate]=\"endDate\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [locale]=\"locale\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [navigation]=\"navigation\"\n [range]=\"range\"\n [startDate]=\"startDate\"\n [navYearFirst]=\"navYearFirst\"\n [dayFormat]=\"dayFormat\"\n [weekdayFormat]=\"weekdayFormat\"\n [selectAdjacentDays]=\"selectAdjacentDays\"\n [showAdjacentDays]=\"showAdjacentDays\"\n [showWeekNumber]=\"showWeekNumber\"\n [selectionType]=\"selectionType\"\n [weekNumbersLabel]=\"weekNumbersLabel\"\n class=\"date-picker-calendars\"\n ></c-calendar>\n <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n <!-- todo-->\n <c-time-picker\n variant=\"select\"\n [locale]=\"locale\"\n [disabled]=\"!startDate\"\n [time]=\"startDate ?? undefined\"\n (timeChange)=\"handleStartTimeChange($event)\"\n ></c-time-picker>\n <c-time-picker\n *ngIf=\"range\"\n variant=\"select\"\n [locale]=\"locale\"\n [disabled]=\"!endDate\"\n [time]=\"endDate ?? undefined\"\n (timeChange)=\"handleEndTimeChange($event)\"\n ></c-time-picker>\n </div>\n </div>\n <div *ngIf=\"templates?.datePickerFooter\" class=\"date-picker-footer\">\n <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n </div>\n </div>\n <ng-content></ng-content>\n</c-dropdown>\n" }]
8140
+ ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\"\n [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n <div [caret]=\"false\"\n [disabled]=\"disabled ?? dropdown.visible\"\n cDropdownToggle\n class=\"date-picker-input-group\"\n >\n <input #startDateElementRef\n (change)=\"handleStartDateInputChange($event)\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [formControl]=\"startDateInput\"\n [ngClass]=\"{hover: !!inputStartHoverValue}\"\n [placeholder]=\"startDatePlaceholder\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"range ? undefined : valid\"\n cFormControl\n class=\"date-picker-input\"\n pattern=\"[1-9]*\"\n >\n <div *ngIf=\"range && separator !== false\" class=\"date-picker-separator\"></div>\n <input #endDateElementRef\n (change)=\"handleEndDateInputChange($event)\"\n *ngIf=\"range\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [formControl]=\"endDateInput\"\n [ngClass]=\"{hover: !!inputEndHoverValue}\"\n [placeholder]=\"endDatePlaceholder\"\n [readonly]=\"inputReadOnly ?? null\"\n [valid]=\"valid ?? undefined\"\n cFormControl\n class=\"date-picker-input\"\n pattern=\"[1-9]*\"\n >\n <div *ngIf=\"indicator\" class=\"date-picker-indicator\"></div>\n <div (click)=\"!disabled && handleClear($event)\"\n *ngIf=\"cleaner && startDateElementRef.value && !disabled\"\n class=\"date-picker-cleaner\" role=\"button\">\n </div>\n\n </div>\n <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n <div class=\"date-picker-body\">\n <ng-template [ngIf]=\"!showRanges\">\n <div *ngIf=\"ranges && customRanges.length > 0\" class=\"date-picker-ranges\">\n <button (click)=\"setCustomRange(customRange)\"\n *ngFor=\"let customRange of customRanges\"\n [color]=\"rangesButtonsColor\"\n [size]=\"rangesButtonsSize\"\n [variant]=\"rangesButtonsVariant\"\n cButton>\n {{customRange | customRangeKey}}\n </button>\n </div>\n </ng-template>\n <c-calendar\n (calendarCellHover)=\"handleCalendarCellHover($event)\"\n (calendarDateChange)=\"handleCalendarDateChange($event)\"\n (endDateChange)=\"handleEndDateChange($event)\"\n (startDateChange)=\"handleStartDateChange($event)\"\n [calendarDate]=\"calendarDate\"\n [calendars]=\"isMobile ? 1 : calendars\"\n [dateFilter]=\"dateFilter\"\n [disabledDates]=\"disabledDates\"\n [endDate]=\"endDate\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [locale]=\"locale\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [navigation]=\"navigation\"\n [range]=\"range\"\n [startDate]=\"startDate\"\n [navYearFirst]=\"navYearFirst\"\n [dayFormat]=\"dayFormat\"\n [weekdayFormat]=\"weekdayFormat\"\n [selectAdjacentDays]=\"selectAdjacentDays\"\n [showAdjacentDays]=\"showAdjacentDays\"\n [showWeekNumber]=\"showWeekNumber\"\n [selectionType]=\"selectionType\"\n [weekNumbersLabel]=\"weekNumbersLabel\"\n class=\"date-picker-calendars\"\n ></c-calendar>\n <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n <!-- todo-->\n <c-time-picker\n variant=\"select\"\n [locale]=\"locale\"\n [disabled]=\"!startDate\"\n [time]=\"startDate ?? undefined\"\n (timeChange)=\"handleStartTimeChange($event)\"\n ></c-time-picker>\n <c-time-picker\n *ngIf=\"range\"\n variant=\"select\"\n [locale]=\"locale\"\n [disabled]=\"!endDate\"\n [time]=\"endDate ?? undefined\"\n (timeChange)=\"handleEndTimeChange($event)\"\n ></c-time-picker>\n </div>\n </div>\n <div *ngIf=\"templates?.datePickerFooter\" class=\"date-picker-footer\">\n <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n </div>\n </div>\n <ng-content></ng-content>\n</c-dropdown>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"] }]
8141
8141
  }], ctorParameters: () => [{ type: i1$4.BreakpointObserver }], propDecorators: { dayFormat: [{
8142
8142
  type: Input
8143
8143
  }], calendars: [{
@@ -9987,26 +9987,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
9987
9987
  type: Output
9988
9988
  }] } });
9989
9989
 
9990
- // @ts-ignore
9991
- const observeReferenceModifier = {
9992
- name: 'observeReferenceModifier', enabled: true, phase: 'main', fn({ state }) { },
9990
+ const observeReferenceResizeModifier = {
9991
+ name: 'observeReferenceResizeModifier',
9992
+ enabled: true,
9993
+ phase: 'main',
9994
+ fn({ state }) { },
9993
9995
  effect: ({ state, instance }) => {
9994
9996
  const RO_PROP = '__popperjsRO__';
9995
9997
  const { reference } = state.elements;
9996
- // @ts-ignore
9997
- reference[RO_PROP] = new ResizeObserver((entries) => {
9998
- instance.update();
9998
+ let resizeObserver = new ResizeObserver((entries) => {
9999
+ if (entries.find(entry => entry.target === reference)) {
10000
+ instance.update();
10001
+ }
9999
10002
  });
10000
- // @ts-ignore
10001
- reference[RO_PROP]?.observe(reference);
10003
+ resizeObserver.observe(reference);
10002
10004
  return () => {
10003
- // @ts-ignore
10004
- reference[RO_PROP]?.disconnect();
10005
- // @ts-ignore
10006
- delete reference[RO_PROP];
10005
+ resizeObserver?.disconnect();
10006
+ resizeObserver = null;
10007
10007
  };
10008
10008
  }
10009
10009
  };
10010
+ const sameAsReferenceWidthModifier = {
10011
+ name: 'sameAsReferenceWidthModifier',
10012
+ enabled: true,
10013
+ fn: ({ state }) => {
10014
+ state.styles['popper'].minWidth = `${state.rects.reference.width}px`;
10015
+ },
10016
+ phase: 'beforeWrite',
10017
+ requires: ['computeStyles']
10018
+ };
10019
+ const defaultPopperOptions = {
10020
+ strategy: 'fixed',
10021
+ modifiers: [
10022
+ observeReferenceResizeModifier,
10023
+ sameAsReferenceWidthModifier,
10024
+ {
10025
+ name: 'offset',
10026
+ options: {
10027
+ offset: () => [0, 4]
10028
+ }
10029
+ }
10030
+ ]
10031
+ };
10010
10032
  class MultiSelectComponent {
10011
10033
  #destroyRef;
10012
10034
  #i18nPlural;
@@ -10158,17 +10180,7 @@ class MultiSelectComponent {
10158
10180
  * @type boolean
10159
10181
  */
10160
10182
  this.visibleChange = new EventEmitter();
10161
- /**
10162
- * Optional popper Options object
10163
- * @type Partial<Options>
10164
- */
10165
- this.popperjsOptions = {
10166
- strategy: 'fixed', modifiers: [observeReferenceModifier, {
10167
- name: 'offset', options: {
10168
- offset: () => [0, 4]
10169
- }
10170
- }]
10171
- };
10183
+ this.#popperOptions = signal(defaultPopperOptions);
10172
10184
  this.isDropdownVisible = false;
10173
10185
  this.templates = {};
10174
10186
  this._tabIndex = -1;
@@ -10338,6 +10350,27 @@ class MultiSelectComponent {
10338
10350
  get visible() {
10339
10351
  return this._visible;
10340
10352
  }
10353
+ /**
10354
+ * Optional popper Options object
10355
+ * @type Partial<Options>
10356
+ */
10357
+ set popperOptions(options) {
10358
+ const prevOptions = this.#popperOptions();
10359
+ const { modifiers: prevModifiers = [] } = prevOptions;
10360
+ const { modifiers: currModifiers = [] } = options;
10361
+ const currOptions = {
10362
+ ...options,
10363
+ modifiers: [
10364
+ ...prevModifiers.filter(prevModifier => !currModifiers.find(currModifier => currModifier.name === prevModifier.name)),
10365
+ ...currModifiers
10366
+ ]
10367
+ };
10368
+ this.#popperOptions.set({ ...prevOptions, ...currOptions });
10369
+ }
10370
+ get popperOptions() {
10371
+ return this.#popperOptions();
10372
+ }
10373
+ #popperOptions;
10341
10374
  get selectedOptions() {
10342
10375
  return [...this.optionsSelected.values()];
10343
10376
  }
@@ -11030,13 +11063,13 @@ class MultiSelectComponent {
11030
11063
  this.visible = !this.visible;
11031
11064
  }
11032
11065
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1$2.FocusMonitor }, { token: MultiSelectService }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
11033
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.9", type: MultiSelectComponent, isStandalone: true, selector: "c-multi-select", inputs: { allowCreateOptions: ["allowCreateOptions", "allowCreateOptions", booleanAttribute], cleaner: "cleaner", clearSearchOnSelect: ["clearSearchOnSelect", "clearSearchOnSelect", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], loading: ["loading", "loading", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], nativeFormId: "nativeFormId", nativeId: "nativeId", nativeName: "nativeName", options: "options", optionsMaxHeight: "optionsMaxHeight", optionsStyle: "optionsStyle", placeholder: "placeholder", search: "search", searchNoResultsLabel: "searchNoResultsLabel", searchValue: "searchValue", selectAll: "selectAll", selectAllLabel: "selectAllLabel", selectionType: "selectionType", selectionTypeCounterText: "selectionTypeCounterText", selectionTypeCounterTextPluralMap: "selectionTypeCounterTextPluralMap", size: "size", value: "value", valid: "valid", virtualScroller: ["virtualScroller", "virtualScroller", booleanAttribute], visibleItems: ["visibleItems", "visibleItems", numberAttribute], itemSize: "itemSize", itemMinWidth: "itemMinWidth", visible: ["visible", "visible", booleanAttribute], popperjsOptions: ["popperOptions", "popperjsOptions"] }, outputs: { searchValueChange: "searchValueChange", valueChange: "valueChange", visibleChange: "visibleChange" }, host: { listeners: { "keyup": "onKeyUp($event)", "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.aria-multiselectable": "this.ariaMultiSelectable", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.tabIndex" } }, providers: [
11066
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.9", type: MultiSelectComponent, isStandalone: true, selector: "c-multi-select", inputs: { allowCreateOptions: ["allowCreateOptions", "allowCreateOptions", booleanAttribute], cleaner: "cleaner", clearSearchOnSelect: ["clearSearchOnSelect", "clearSearchOnSelect", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], loading: ["loading", "loading", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], nativeFormId: "nativeFormId", nativeId: "nativeId", nativeName: "nativeName", options: "options", optionsMaxHeight: "optionsMaxHeight", optionsStyle: "optionsStyle", placeholder: "placeholder", search: "search", searchNoResultsLabel: "searchNoResultsLabel", searchValue: "searchValue", selectAll: "selectAll", selectAllLabel: "selectAllLabel", selectionType: "selectionType", selectionTypeCounterText: "selectionTypeCounterText", selectionTypeCounterTextPluralMap: "selectionTypeCounterTextPluralMap", size: "size", value: "value", valid: "valid", virtualScroller: ["virtualScroller", "virtualScroller", booleanAttribute], visibleItems: ["visibleItems", "visibleItems", numberAttribute], itemSize: "itemSize", itemMinWidth: "itemMinWidth", visible: ["visible", "visible", booleanAttribute], popperOptions: "popperOptions" }, outputs: { searchValueChange: "searchValueChange", valueChange: "valueChange", visibleChange: "visibleChange" }, host: { listeners: { "keyup": "onKeyUp($event)", "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.aria-multiselectable": "this.ariaMultiSelectable", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.tabIndex" } }, providers: [
11034
11067
  I18nPluralPipe,
11035
11068
  MultiSelectService,
11036
11069
  {
11037
11070
  provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
11038
11071
  }
11039
- ], queries: [{ propertyName: "multiSelectOptionsContent", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "optionsElementRef", first: true, predicate: ["options"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true, read: ElementRef }, { propertyName: "multiSelectOptionsView", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "scrollViewportView", predicate: ["scrollViewport"], descendants: true }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\"\n [(visible)]=\"visible\"\n [autoClose]=\"'outside'\"\n [ngClass]=\"multiselectClasses\"\n [popperOptions]=\"popperjsOptions\">\n <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle role=\"button\"\n class=\"form-multi-select-input-group\">\n <span\n [ngClass]=\"{'form-multi-select-selection': true, 'form-multi-select-selection-tags': (selectionType === 'tags' && selectedOptions.length)}\">\n @if (selectionType === 'tags') {\n @if (optionsSelected$ | async;as optionTags) {\n @for (option of optionTags;track option.value;let i = $index) {\n <c-multi-select-tag\n (remove)=\"handleTagRemove($event)\"\n [disabled]=\"option.disabled ?? false\"\n [label]=\"option.label ?? option.value?.toString()\"\n [option]=\"option\"\n [value]=\"option.value\"\n class=\"form-multi-select-tag text-truncate\"\n tabindex=\"-1\"\n />\n }\n }\n } @else if (selectionType === 'text' && !!selectedOptions.length) {\n @for (option of selectedOptions;track option.value;let i = $index, last = $last) {\n <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n }\n }\n @if (!search) {\n <span class=\"text-placeholder text-truncate\">\n {{ optionsSelected.size === 0 ? placeholder : counterPlaceholderText }}\n </span>\n }\n @if (search) {\n <input\n #inputElement\n (keydown)=\"handleSearchKeyDown($event)\"\n (valueChange)=\"handleSearchValueChange($event)\"\n [attr.placeholder]=\"selectedOptions.length === 0 ? placeholder : counterPlaceholderText\"\n [disabled]=\"disabled || !search\"\n [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search), 'text-truncate': true }\"\n [ngModel]=\"searchValue\"\n [value]=\"searchValue\"\n autocomplete=\"off\"\n cMultiSelectSearch\n size=\"2\"\n tabindex=\"{{ disabled ? -1 : 0 }}\"\n type=\"text\"\n >\n }\n </span>\n <div class=\"form-multi-select-buttons\">\n @if (!!cleaner && optionsSelected.size > 0 && !disabled) {\n <button\n (click)=\"clearAllOptions($event)\"\n [disabled]=\"disabled || (!isDropdownVisible && cleaner !== 'active')\"\n aria-label=\"Clear all\"\n class=\"form-multi-select-cleaner\"\n type=\"button\"\n ></button>\n }\n <button (click)=\"handleIndicatorClick($event)\"\n [disabled]=\"disabled\"\n class=\"form-multi-select-indicator\"\n type=\"button\">\n </button>\n </div>\n </div>\n @if (!disabled) {\n <div #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\" cDropdownMenu\n class=\"form-multi-select-dropdown\" role=\"menu\">\n @if (visibleOptions() && options.length > 0) {\n @if (selectAll && multiple && !virtualScroller) {\n <button\n (click)=\"selectAllOptions()\"\n class=\"form-multi-select-all\"\n type=\"button\"\n tabindex=\"0\"\n >\n {{ selectAllLabel }}\n </button>\n }\n }\n @if ((visibleOptions() && options.length > 0) || isLoading()) {\n <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n } @else {\n <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n }\n @if (isLoading()) {\n <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n }\n </div>\n }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n @defer {\n @if ((optionsArray$ | async);as optionsArray) {\n <cdk-virtual-scroll-viewport\n #scrollViewport\n (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n [itemSize]=\"itemSize\"\n [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden' } : { 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden'}\"\n maxBufferPx=\"{{itemSize * visibleItems}}\"\n minBufferPx=\"{{itemSize * visibleItems}}\"\n class=\"form-multi-select-options\"\n tabindex=\"-1\"\n >\n <ng-container\n #cdkVirtualFor\n *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n />\n </cdk-virtual-scroll-viewport>\n }\n }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n <div\n [ngClass]=\"{'form-multi-select-options': visibleOptions()}\"\n [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n >\n <ng-content />\n <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n <c-multi-select-option\n [disabled]=\"option.disabled\"\n [label]=\"option.label\"\n [text]=\"option.text\"\n [value]=\"option.value\"\n [visible]=\"option.visible\"\n >\n {{ option.text }}\n </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n @for (option of userOptionsArray$ | async;track option;let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last) {\n <ng-container\n [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n />\n }\n</ng-template>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;box-shadow:0 0 0 var(--cui-focus-ring-width) var(--cui-focus-ring-color);border-radius:var(--cui-border-radius, .375rem)}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){display:none}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option", "disabled", "label", "value"], outputs: ["remove"] }, { kind: "component", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: MultiSelectSearchDirective, selector: "[cMultiSelectSearch]", inputs: ["delay", "value"], outputs: ["valueChange"], exportAs: ["cMultiSelectSearch"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }] }); }
11072
+ ], queries: [{ propertyName: "multiSelectOptionsContent", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "optionsElementRef", first: true, predicate: ["options"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true, read: ElementRef }, { propertyName: "multiSelectOptionsView", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "scrollViewportView", predicate: ["scrollViewport"], descendants: true }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\"\n [(visible)]=\"visible\"\n [autoClose]=\"'outside'\"\n [ngClass]=\"multiselectClasses\"\n [popperOptions]=\"popperOptions\">\n <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle role=\"button\"\n class=\"form-multi-select-input-group\">\n <span\n [ngClass]=\"{'form-multi-select-selection': true, 'form-multi-select-selection-tags': (selectionType === 'tags' && selectedOptions.length)}\">\n @if (selectionType === 'tags') {\n @if (optionsSelected$ | async; as optionTags) {\n @for (option of optionTags; track option.value; let i = $index) {\n <c-multi-select-tag\n (remove)=\"handleTagRemove($event)\"\n [disabled]=\"option.disabled ?? false\"\n [label]=\"option.label ?? option.value?.toString()\"\n [option]=\"option\"\n [value]=\"option.value\"\n class=\"form-multi-select-tag text-truncate\"\n tabindex=\"-1\"\n />\n }\n }\n } @else if (selectionType === 'text' && !!selectedOptions.length) {\n @for (option of selectedOptions; track option.value; let i = $index, last = $last) {\n <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n }\n }\n @if (!search) {\n <span class=\"text-placeholder text-truncate\">\n {{ optionsSelected.size === 0 ? placeholder : counterPlaceholderText }}\n </span>\n }\n @if (search) {\n <input\n #inputElement\n (keydown)=\"handleSearchKeyDown($event)\"\n (valueChange)=\"handleSearchValueChange($event)\"\n [attr.placeholder]=\"selectedOptions.length === 0 ? placeholder : counterPlaceholderText\"\n [disabled]=\"disabled || !search\"\n [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search), 'text-truncate': true }\"\n [ngModel]=\"searchValue\"\n [value]=\"searchValue\"\n autocomplete=\"off\"\n cMultiSelectSearch\n size=\"2\"\n tabindex=\"{{ disabled ? -1 : 0 }}\"\n type=\"text\"\n >\n }\n </span>\n <div class=\"form-multi-select-buttons\">\n @if (!!cleaner && optionsSelected.size > 0 && !disabled) {\n <button\n (click)=\"clearAllOptions($event)\"\n [disabled]=\"disabled || (!isDropdownVisible && cleaner !== 'active')\"\n aria-label=\"Clear all\"\n class=\"form-multi-select-cleaner\"\n type=\"button\"\n ></button>\n }\n <button (click)=\"handleIndicatorClick($event)\"\n [disabled]=\"disabled\"\n class=\"form-multi-select-indicator\"\n type=\"button\">\n </button>\n </div>\n </div>\n @if (!disabled) {\n <div #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\" cDropdownMenu\n class=\"form-multi-select-dropdown\" role=\"menu\">\n @if (visibleOptions() && options.length > 0) {\n @if (selectAll && multiple && !virtualScroller) {\n <button\n (click)=\"selectAllOptions()\"\n class=\"form-multi-select-all\"\n type=\"button\"\n tabindex=\"0\"\n >\n {{ selectAllLabel }}\n </button>\n }\n }\n @if ((visibleOptions() && options.length > 0) || isLoading()) {\n <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n } @else {\n <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n }\n @if (isLoading()) {\n <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n }\n </div>\n }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n @defer (on immediate) {\n @if ((optionsArray$ | async); as optionsArray) {\n <cdk-virtual-scroll-viewport\n #scrollViewport\n (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n [itemSize]=\"itemSize\"\n [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden' } : { 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden'}\"\n maxBufferPx=\"{{itemSize * visibleItems}}\"\n minBufferPx=\"{{itemSize * visibleItems}}\"\n class=\"form-multi-select-options\"\n tabindex=\"-1\"\n >\n <ng-container\n #cdkVirtualFor\n *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n />\n </cdk-virtual-scroll-viewport>\n }\n }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n <div\n [ngClass]=\"{'form-multi-select-options': visibleOptions()}\"\n [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n >\n <ng-content />\n <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n <c-multi-select-option\n [disabled]=\"option.disabled\"\n [label]=\"option.label\"\n [text]=\"option.text\"\n [value]=\"option.value\"\n [visible]=\"option.visible\"\n >\n {{ option.text }}\n </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n @for (option of userOptionsArray$ | async; track option; let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last) {\n <ng-container\n [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n />\n }\n</ng-template>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;box-shadow:0 0 0 var(--cui-focus-ring-width) var(--cui-focus-ring-color);border-radius:var(--cui-border-radius, .375rem)}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){display:none}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option", "disabled", "label", "value"], outputs: ["remove"] }, { kind: "component", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: MultiSelectSearchDirective, selector: "[cMultiSelectSearch]", inputs: ["delay", "value"], outputs: ["valueChange"], exportAs: ["cMultiSelectSearch"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }] }); }
11040
11073
  }
11041
11074
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: MultiSelectComponent, decorators: [{
11042
11075
  type: Component,
@@ -11064,7 +11097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
11064
11097
  DropdownMenuDirective,
11065
11098
  DropdownToggleDirective,
11066
11099
  ElementCoverComponent
11067
- ], template: "<c-dropdown #dropdown=\"cDropdown\"\n [(visible)]=\"visible\"\n [autoClose]=\"'outside'\"\n [ngClass]=\"multiselectClasses\"\n [popperOptions]=\"popperjsOptions\">\n <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle role=\"button\"\n class=\"form-multi-select-input-group\">\n <span\n [ngClass]=\"{'form-multi-select-selection': true, 'form-multi-select-selection-tags': (selectionType === 'tags' && selectedOptions.length)}\">\n @if (selectionType === 'tags') {\n @if (optionsSelected$ | async;as optionTags) {\n @for (option of optionTags;track option.value;let i = $index) {\n <c-multi-select-tag\n (remove)=\"handleTagRemove($event)\"\n [disabled]=\"option.disabled ?? false\"\n [label]=\"option.label ?? option.value?.toString()\"\n [option]=\"option\"\n [value]=\"option.value\"\n class=\"form-multi-select-tag text-truncate\"\n tabindex=\"-1\"\n />\n }\n }\n } @else if (selectionType === 'text' && !!selectedOptions.length) {\n @for (option of selectedOptions;track option.value;let i = $index, last = $last) {\n <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n }\n }\n @if (!search) {\n <span class=\"text-placeholder text-truncate\">\n {{ optionsSelected.size === 0 ? placeholder : counterPlaceholderText }}\n </span>\n }\n @if (search) {\n <input\n #inputElement\n (keydown)=\"handleSearchKeyDown($event)\"\n (valueChange)=\"handleSearchValueChange($event)\"\n [attr.placeholder]=\"selectedOptions.length === 0 ? placeholder : counterPlaceholderText\"\n [disabled]=\"disabled || !search\"\n [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search), 'text-truncate': true }\"\n [ngModel]=\"searchValue\"\n [value]=\"searchValue\"\n autocomplete=\"off\"\n cMultiSelectSearch\n size=\"2\"\n tabindex=\"{{ disabled ? -1 : 0 }}\"\n type=\"text\"\n >\n }\n </span>\n <div class=\"form-multi-select-buttons\">\n @if (!!cleaner && optionsSelected.size > 0 && !disabled) {\n <button\n (click)=\"clearAllOptions($event)\"\n [disabled]=\"disabled || (!isDropdownVisible && cleaner !== 'active')\"\n aria-label=\"Clear all\"\n class=\"form-multi-select-cleaner\"\n type=\"button\"\n ></button>\n }\n <button (click)=\"handleIndicatorClick($event)\"\n [disabled]=\"disabled\"\n class=\"form-multi-select-indicator\"\n type=\"button\">\n </button>\n </div>\n </div>\n @if (!disabled) {\n <div #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\" cDropdownMenu\n class=\"form-multi-select-dropdown\" role=\"menu\">\n @if (visibleOptions() && options.length > 0) {\n @if (selectAll && multiple && !virtualScroller) {\n <button\n (click)=\"selectAllOptions()\"\n class=\"form-multi-select-all\"\n type=\"button\"\n tabindex=\"0\"\n >\n {{ selectAllLabel }}\n </button>\n }\n }\n @if ((visibleOptions() && options.length > 0) || isLoading()) {\n <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n } @else {\n <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n }\n @if (isLoading()) {\n <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n }\n </div>\n }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n @defer {\n @if ((optionsArray$ | async);as optionsArray) {\n <cdk-virtual-scroll-viewport\n #scrollViewport\n (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n [itemSize]=\"itemSize\"\n [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden' } : { 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden'}\"\n maxBufferPx=\"{{itemSize * visibleItems}}\"\n minBufferPx=\"{{itemSize * visibleItems}}\"\n class=\"form-multi-select-options\"\n tabindex=\"-1\"\n >\n <ng-container\n #cdkVirtualFor\n *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n />\n </cdk-virtual-scroll-viewport>\n }\n }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n <div\n [ngClass]=\"{'form-multi-select-options': visibleOptions()}\"\n [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n >\n <ng-content />\n <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n <c-multi-select-option\n [disabled]=\"option.disabled\"\n [label]=\"option.label\"\n [text]=\"option.text\"\n [value]=\"option.value\"\n [visible]=\"option.visible\"\n >\n {{ option.text }}\n </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n @for (option of userOptionsArray$ | async;track option;let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last) {\n <ng-container\n [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n />\n }\n</ng-template>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;box-shadow:0 0 0 var(--cui-focus-ring-width) var(--cui-focus-ring-color);border-radius:var(--cui-border-radius, .375rem)}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){display:none}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}\n"] }]
11100
+ ], template: "<c-dropdown #dropdown=\"cDropdown\"\n [(visible)]=\"visible\"\n [autoClose]=\"'outside'\"\n [ngClass]=\"multiselectClasses\"\n [popperOptions]=\"popperOptions\">\n <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle role=\"button\"\n class=\"form-multi-select-input-group\">\n <span\n [ngClass]=\"{'form-multi-select-selection': true, 'form-multi-select-selection-tags': (selectionType === 'tags' && selectedOptions.length)}\">\n @if (selectionType === 'tags') {\n @if (optionsSelected$ | async; as optionTags) {\n @for (option of optionTags; track option.value; let i = $index) {\n <c-multi-select-tag\n (remove)=\"handleTagRemove($event)\"\n [disabled]=\"option.disabled ?? false\"\n [label]=\"option.label ?? option.value?.toString()\"\n [option]=\"option\"\n [value]=\"option.value\"\n class=\"form-multi-select-tag text-truncate\"\n tabindex=\"-1\"\n />\n }\n }\n } @else if (selectionType === 'text' && !!selectedOptions.length) {\n @for (option of selectedOptions; track option.value; let i = $index, last = $last) {\n <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n }\n }\n @if (!search) {\n <span class=\"text-placeholder text-truncate\">\n {{ optionsSelected.size === 0 ? placeholder : counterPlaceholderText }}\n </span>\n }\n @if (search) {\n <input\n #inputElement\n (keydown)=\"handleSearchKeyDown($event)\"\n (valueChange)=\"handleSearchValueChange($event)\"\n [attr.placeholder]=\"selectedOptions.length === 0 ? placeholder : counterPlaceholderText\"\n [disabled]=\"disabled || !search\"\n [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search), 'text-truncate': true }\"\n [ngModel]=\"searchValue\"\n [value]=\"searchValue\"\n autocomplete=\"off\"\n cMultiSelectSearch\n size=\"2\"\n tabindex=\"{{ disabled ? -1 : 0 }}\"\n type=\"text\"\n >\n }\n </span>\n <div class=\"form-multi-select-buttons\">\n @if (!!cleaner && optionsSelected.size > 0 && !disabled) {\n <button\n (click)=\"clearAllOptions($event)\"\n [disabled]=\"disabled || (!isDropdownVisible && cleaner !== 'active')\"\n aria-label=\"Clear all\"\n class=\"form-multi-select-cleaner\"\n type=\"button\"\n ></button>\n }\n <button (click)=\"handleIndicatorClick($event)\"\n [disabled]=\"disabled\"\n class=\"form-multi-select-indicator\"\n type=\"button\">\n </button>\n </div>\n </div>\n @if (!disabled) {\n <div #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible\" cDropdownMenu\n class=\"form-multi-select-dropdown\" role=\"menu\">\n @if (visibleOptions() && options.length > 0) {\n @if (selectAll && multiple && !virtualScroller) {\n <button\n (click)=\"selectAllOptions()\"\n class=\"form-multi-select-all\"\n type=\"button\"\n tabindex=\"0\"\n >\n {{ selectAllLabel }}\n </button>\n }\n }\n @if ((visibleOptions() && options.length > 0) || isLoading()) {\n <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n } @else {\n <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n }\n @if (isLoading()) {\n <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n }\n </div>\n }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n @defer (on immediate) {\n @if ((optionsArray$ | async); as optionsArray) {\n <cdk-virtual-scroll-viewport\n #scrollViewport\n (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n [itemSize]=\"itemSize\"\n [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden' } : { 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden'}\"\n maxBufferPx=\"{{itemSize * visibleItems}}\"\n minBufferPx=\"{{itemSize * visibleItems}}\"\n class=\"form-multi-select-options\"\n tabindex=\"-1\"\n >\n <ng-container\n #cdkVirtualFor\n *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n />\n </cdk-virtual-scroll-viewport>\n }\n }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n <div\n [ngClass]=\"{'form-multi-select-options': visibleOptions()}\"\n [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n >\n <ng-content />\n <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n <c-multi-select-option\n [disabled]=\"option.disabled\"\n [label]=\"option.label\"\n [text]=\"option.text\"\n [value]=\"option.value\"\n [visible]=\"option.visible\"\n >\n {{ option.text }}\n </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n @for (option of userOptionsArray$ | async; track option; let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last) {\n <ng-container\n [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n />\n }\n</ng-template>\n", styles: [":host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;box-shadow:0 0 0 var(--cui-focus-ring-width) var(--cui-focus-ring-color);border-radius:var(--cui-border-radius, .375rem)}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){display:none}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}\n"] }]
11068
11101
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1$2.FocusMonitor }, { type: MultiSelectService }, { type: i0.IterableDiffers }], propDecorators: { allowCreateOptions: [{
11069
11102
  type: Input,
11070
11103
  args: [{ transform: booleanAttribute }]
@@ -11137,9 +11170,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
11137
11170
  args: [{ transform: booleanAttribute }]
11138
11171
  }], visibleChange: [{
11139
11172
  type: Output
11140
- }], popperjsOptions: [{
11141
- type: Input,
11142
- args: ['popperOptions']
11173
+ }], popperOptions: [{
11174
+ type: Input
11143
11175
  }], multiSelectOptionsContent: [{
11144
11176
  type: ContentChildren,
11145
11177
  args: [MultiSelectOptionComponent, { descendants: true }]
@@ -17247,7 +17279,7 @@ class WidgetStatCComponent extends CardComponent {
17247
17279
  'fs-4': !this.textColor,
17248
17280
  'fw-semibold': true,
17249
17281
  ...this.titleClasses,
17250
- 'text-body-emphasis': true
17282
+ 'text-opacity-75': false,
17251
17283
  };
17252
17284
  }
17253
17285
  get iconClasses() {
@@ -17263,11 +17295,11 @@ class WidgetStatCComponent extends CardComponent {
17263
17295
  });
17264
17296
  }
17265
17297
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: WidgetStatCComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
17266
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.9", type: WidgetStatCComponent, isStandalone: true, selector: "c-widget-stat-c", inputs: { icon: "icon", title: "title", value: "value", inverse: ["inverse", "inverse", booleanAttribute] }, host: { properties: { "class": "this.hostExtendedClass" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cWidgetStatC"], usesInheritance: true, ngImport: i0, template: "<c-card-body>\n <div *ngIf=\"icon || templates?.widgetIconTemplate\" [ngClass]=\"iconClasses\">\n <ng-container *ngTemplateOutlet=\"templates?.widgetIconTemplate || defaultWidgetIconTemplate\"></ng-container>\n </div>\n <div *ngIf=\"!!value\" [ngClass]=\"valueClasses\">\n {{value}}\n </div>\n <div *ngIf=\"!!title\" [ngClass]=\"titleClasses\">\n {{title}}\n </div>\n <ng-container *ngIf=\"templates?.widgetProgressTemplate\">\n <ng-container *ngTemplateOutlet=\"templates?.widgetProgressTemplate || defaultWidgetProgressTemplate\"></ng-container>\n </ng-container>\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n {{icon}}\n</ng-template>\n\n<ng-template #defaultWidgetProgressTemplate>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: CardBodyComponent, selector: "c-card-body, [c-card-body]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
17298
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.9", type: WidgetStatCComponent, isStandalone: true, selector: "c-widget-stat-c", inputs: { icon: "icon", title: "title", value: "value", inverse: ["inverse", "inverse", booleanAttribute] }, host: { properties: { "class": "this.hostExtendedClass" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], exportAs: ["cWidgetStatC"], usesInheritance: true, ngImport: i0, template: "<c-card-body>\n <div *ngIf=\"icon || templates?.widgetIconTemplate\" [ngClass]=\"iconClasses\">\n <ng-container *ngTemplateOutlet=\"templates?.widgetIconTemplate || defaultWidgetIconTemplate\" />\n </div>\n <div *ngIf=\"!!value\" [ngClass]=\"valueClasses\">\n {{ value }}\n </div>\n <div *ngIf=\"!!title\" [ngClass]=\"titleClasses\">\n {{ title }}\n </div>\n <ng-container *ngIf=\"templates?.widgetProgressTemplate\">\n <ng-container *ngTemplateOutlet=\"templates?.widgetProgressTemplate || defaultWidgetProgressTemplate\" />\n </ng-container>\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n {{ icon }}\n</ng-template>\n\n<ng-template #defaultWidgetProgressTemplate>\n <ng-content />\n</ng-template>\n", dependencies: [{ kind: "component", type: CardBodyComponent, selector: "c-card-body, [c-card-body]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
17267
17299
  }
17268
17300
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: WidgetStatCComponent, decorators: [{
17269
17301
  type: Component,
17270
- args: [{ selector: 'c-widget-stat-c', exportAs: 'cWidgetStatC', standalone: true, imports: [CardBodyComponent, NgIf, NgClass, NgTemplateOutlet], template: "<c-card-body>\n <div *ngIf=\"icon || templates?.widgetIconTemplate\" [ngClass]=\"iconClasses\">\n <ng-container *ngTemplateOutlet=\"templates?.widgetIconTemplate || defaultWidgetIconTemplate\"></ng-container>\n </div>\n <div *ngIf=\"!!value\" [ngClass]=\"valueClasses\">\n {{value}}\n </div>\n <div *ngIf=\"!!title\" [ngClass]=\"titleClasses\">\n {{title}}\n </div>\n <ng-container *ngIf=\"templates?.widgetProgressTemplate\">\n <ng-container *ngTemplateOutlet=\"templates?.widgetProgressTemplate || defaultWidgetProgressTemplate\"></ng-container>\n </ng-container>\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n {{icon}}\n</ng-template>\n\n<ng-template #defaultWidgetProgressTemplate>\n <ng-content></ng-content>\n</ng-template>\n" }]
17302
+ args: [{ selector: 'c-widget-stat-c', exportAs: 'cWidgetStatC', standalone: true, imports: [CardBodyComponent, NgIf, NgClass, NgTemplateOutlet], template: "<c-card-body>\n <div *ngIf=\"icon || templates?.widgetIconTemplate\" [ngClass]=\"iconClasses\">\n <ng-container *ngTemplateOutlet=\"templates?.widgetIconTemplate || defaultWidgetIconTemplate\" />\n </div>\n <div *ngIf=\"!!value\" [ngClass]=\"valueClasses\">\n {{ value }}\n </div>\n <div *ngIf=\"!!title\" [ngClass]=\"titleClasses\">\n {{ title }}\n </div>\n <ng-container *ngIf=\"templates?.widgetProgressTemplate\">\n <ng-container *ngTemplateOutlet=\"templates?.widgetProgressTemplate || defaultWidgetProgressTemplate\" />\n </ng-container>\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n {{ icon }}\n</ng-template>\n\n<ng-template #defaultWidgetProgressTemplate>\n <ng-content />\n</ng-template>\n" }]
17271
17303
  }], ctorParameters: () => [], propDecorators: { icon: [{
17272
17304
  type: Input
17273
17305
  }], title: [{