cps-ui-kit 17.35.0 → 18.0.0

package/esm2022/lib/components/cps-radio-group/cps-radio-group.component.mjs

@@ -166,15 +166,15 @@ export class CpsRadioGroupComponent {
         const message = errArr.find((msg) => typeof msg === 'string');
         this.error = message || 'Unknown error';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsRadioGroupComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsRadioGroupComponent, isStandalone: true, selector: "cps-radio-group", inputs: { options: "options", groupLabel: "groupLabel", vertical: "vertical", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", hint: "hint", hideDetails: "hideDetails", value: "value" }, outputs: { valueChanged: "valueChanged", blurred: "blurred", focused: "focused" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsRadioGroupComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: CpsRadioGroupComponent, isStandalone: true, selector: "cps-radio-group", inputs: { options: "options", groupLabel: "groupLabel", vertical: "vertical", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", hint: "hint", hideDetails: "hideDetails", value: "value" }, outputs: { valueChanged: "valueChanged", blurred: "blurred", focused: "focused" }, providers: [
             {
                 provide: CPS_RADIO_GROUP,
                 useExisting: CpsRadioGroupComponent
             }
         ], ngImport: i0, template: "<div class=\"cps-radio-group\">\n  <div class=\"cps-radio-group-label\" *ngIf=\"groupLabel\">\n    <span>{{ groupLabel }}</span>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-radio-group-label-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  </div>\n\n  <div\n    #contentRef\n    class=\"cps-radio-group-content\"\n    [ngClass]=\"\n      vertical\n        ? 'cps-radio-group-content-vertical'\n        : 'cps-radio-group-content-horizontal'\n    \">\n    <ng-content></ng-content>\n  </div>\n\n  <div\n    *ngIf=\"!contentRef.innerHTML.trim()\"\n    class=\"cps-radio-group-content\"\n    [ngClass]=\"\n      vertical\n        ? 'cps-radio-group-content-vertical'\n        : 'cps-radio-group-content-horizontal'\n    \">\n    <cps-radio-button\n      *ngFor=\"let option of options\"\n      [option]=\"option\"\n      [checked]=\"option.value === value\"\n      [groupDisabled]=\"disabled\"\n      (blurred)=\"onBlur()\"\n      (focused)=\"onFocus()\"\n      (updateValueEvent)=\"updateValueEvent($event)\">\n    </cps-radio-button>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-radio-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-radio-error\">\n    {{ error }}\n  </div>\n</div>\n", styles: [":host{width:fit-content;display:inline-block}:host .cps-radio-group{font-family:Source Sans Pro,sans-serif}:host .cps-radio-group-label{font-style:normal;font-weight:700;font-size:1rem;color:var(--cps-color-text-dark);margin-bottom:.75rem;align-items:center;display:inline-flex;cursor:default}:host .cps-radio-group-label .cps-radio-group-label-info-circle{margin-left:8px}:host .cps-radio-group-label .cps-radio-group-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-radio-group-content{margin-left:.5rem;gap:1.25rem}:host .cps-radio-group-content-vertical{display:grid;grid-auto-rows:1fr}:host .cps-radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .cps-radio-group-content .content:empty{display:none}:host .cps-radio-group .cps-radio-hint{margin-top:4px;color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-radio-group .cps-radio-error{margin-top:4px;color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsRadioButtonComponent, selector: "cps-radio-button", inputs: ["option", "checked", "groupDisabled"], outputs: ["updateValueEvent", "blurred", "focused"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsRadioGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsRadioGroupComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         CommonModule,

package/esm2022/lib/components/cps-scheduler/cps-scheduler.component.mjs

@@ -623,10 +623,10 @@ export class CpsSchedulerComponent {
         const res = Number(value);
         return isNaN(res) ? 0 : res;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsSchedulerComponent, deps: [{ token: i1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsSchedulerComponent, isStandalone: true, selector: "cps-scheduler", inputs: { label: "label", cron: "cron", timeZone: "timeZone", showNotSet: "showNotSet", showAdvanced: "showAdvanced", showTimeZone: "showTimeZone", defaultTime: "defaultTime", use24HourTime: "use24HourTime", disabled: "disabled", infoTooltip: "infoTooltip" }, outputs: { cronChange: "cronChange", timeZoneChange: "timeZoneChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-scheduler-selector\">\n  <cps-button-toggle\n    [options]=\"scheduleTypes\"\n    [disabled]=\"disabled\"\n    [label]=\"label\"\n    [infoTooltip]=\"infoTooltip\"\n    [(ngModel)]=\"activeScheduleType\"\n    (ngModelChange)=\"setActiveScheduleType($event)\">\n  </cps-button-toggle>\n</div>\n\n<div\n  [ngSwitch]=\"activeScheduleType\"\n  class=\"cps-scheduler-container\"\n  [ngClass]=\"{ 'cps-scheduler-container-disabled': disabled }\">\n  <div *ngSwitchCase=\"'Not set'\" class=\"cps-scheduler-tab-pane\"></div>\n\n  <div *ngSwitchCase=\"'Minutes'\" class=\"cps-scheduler-tab-pane\">\n    <div class=\"cps-scheduler-tab-pane-row\">\n      Every\n      <cps-select\n        width=\"70px\"\n        [disabled]=\"disabled\"\n        [returnObject]=\"false\"\n        [hideDetails]=\"true\"\n        (valueChanged)=\"regenerateCron()\"\n        [(ngModel)]=\"state.minutes.minutes\"\n        [options]=\"selectOptions.minutes\"\n        class=\"cps-scheduler-select-control\">\n      </cps-select>\n      minute(s)\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'Hourly'\" class=\"cps-scheduler-tab-pane\">\n    <div class=\"cps-scheduler-tab-pane-row\">\n      Every\n      <cps-select\n        width=\"70px\"\n        [disabled]=\"disabled\"\n        [returnObject]=\"false\"\n        [hideDetails]=\"true\"\n        (valueChanged)=\"regenerateCron()\"\n        [(ngModel)]=\"state.hourly.hours\"\n        [options]=\"selectOptions.hours\"\n        class=\"cps-scheduler-select-control\">\n      </cps-select>\n      hour(s) on minute\n      <cps-select\n        width=\"70px\"\n        [disabled]=\"disabled\"\n        [returnObject]=\"false\"\n        [hideDetails]=\"true\"\n        (valueChanged)=\"regenerateCron()\"\n        [(ngModel)]=\"state.hourly.minutes\"\n        [options]=\"selectOptions.fullMinutes\"\n        class=\"cps-scheduler-select-control\">\n      </cps-select>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'Daily'\" class=\"cps-scheduler-tab-pane\">\n    <cps-radio-group\n      [hideDetails]=\"true\"\n      [(ngModel)]=\"state.daily.subTab\"\n      (valueChanged)=\"regenerateCron()\"\n      [vertical]=\"true\">\n      <cps-radio [option]=\"{ value: 'everyDays', disabled: disabled }\">\n        <div\n          class=\"cps-scheduler-tab-pane-row\"\n          [ngClass]=\"{\n            'cps-scheduler-tab-pane-row-disabled':\n              state.daily.subTab !== 'everyDays'\n          }\">\n          Every\n          <cps-select\n            width=\"70px\"\n            [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.daily.everyDays.days\"\n            [options]=\"selectOptions.monthDays\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          day(s) at\n          <cps-timepicker\n            [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.daily.everyDays)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"onTimeChanged($event, state.daily.everyDays)\">\n          </cps-timepicker>\n        </div>\n      </cps-radio>\n      <cps-radio [option]=\"{ value: 'everyWeekDay', disabled: disabled }\">\n        <div\n          class=\"cps-scheduler-tab-pane-row\"\n          [ngClass]=\"{\n            'cps-scheduler-tab-pane-row-disabled':\n              state.daily.subTab !== 'everyWeekDay'\n          }\">\n          Every working day at\n          <cps-timepicker\n            [disabled]=\"disabled || state.daily.subTab !== 'everyWeekDay'\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.daily.everyWeekDay)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"onTimeChanged($event, state.daily.everyWeekDay)\">\n          </cps-timepicker>\n        </div>\n      </cps-radio>\n    </cps-radio-group>\n  </div>\n\n  <div *ngSwitchCase=\"'Weekly'\" class=\"cps-scheduler-tab-pane\">\n    <div class=\"cps-scheduler-days-checkbox-group\">\n      <cps-checkbox\n        (valueChanged)=\"regenerateCron()\"\n        [disabled]=\"disabled\"\n        label=\"Monday\"\n        [(ngModel)]=\"state.weekly.MON\">\n      </cps-checkbox>\n      <cps-checkbox\n        (valueChanged)=\"regenerateCron()\"\n        [disabled]=\"disabled\"\n        label=\"Tuesday\"\n        [(ngModel)]=\"state.weekly.TUE\">\n      </cps-checkbox>\n      <cps-checkbox\n        (valueChanged)=\"regenerateCron()\"\n        [disabled]=\"disabled\"\n        label=\"Wednesday\"\n        [(ngModel)]=\"state.weekly.WED\">\n      </cps-checkbox>\n      <cps-checkbox\n        (valueChanged)=\"regenerateCron()\"\n        [disabled]=\"disabled\"\n        label=\"Thursday\"\n        [(ngModel)]=\"state.weekly.THU\">\n      </cps-checkbox>\n      <cps-checkbox\n        (valueChanged)=\"regenerateCron()\"\n        [disabled]=\"disabled\"\n        label=\"Friday\"\n        [(ngModel)]=\"state.weekly.FRI\">\n      </cps-checkbox>\n      <cps-checkbox\n        (valueChanged)=\"regenerateCron()\"\n        [disabled]=\"disabled\"\n        label=\"Saturday\"\n        [(ngModel)]=\"state.weekly.SAT\">\n      </cps-checkbox>\n      <cps-checkbox\n        (valueChanged)=\"regenerateCron()\"\n        [disabled]=\"disabled\"\n        label=\"Sunday\"\n        [(ngModel)]=\"state.weekly.SUN\">\n      </cps-checkbox>\n    </div>\n    <div class=\"cps-scheduler-tab-pane-row\">\n      at\n      <cps-timepicker\n        [disabled]=\"disabled\"\n        [use24HourTime]=\"use24HourTime\"\n        [mandatoryValue]=\"true\"\n        [value]=\"formatTimeValue(state.weekly)\"\n        [hideDetails]=\"true\"\n        (valueChanged)=\"onTimeChanged($event, state.weekly)\">\n      </cps-timepicker>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'Monthly'\" class=\"cps-scheduler-tab-pane\">\n    <cps-radio-group\n      [hideDetails]=\"true\"\n      [(ngModel)]=\"state.monthly.subTab\"\n      (valueChanged)=\"regenerateCron()\"\n      [vertical]=\"true\">\n      <cps-radio [option]=\"{ value: 'specificDay', disabled: disabled }\">\n        <div\n          class=\"cps-scheduler-tab-pane-row\"\n          [ngClass]=\"{\n            'cps-scheduler-tab-pane-row-disabled':\n              state.monthly.subTab !== 'specificDay'\n          }\">\n          On the\n          <cps-select\n            width=\"120px\"\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.monthly.specificDay.day\"\n            [options]=\"selectOptions.monthDaysWithLasts\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          of every\n          <cps-select\n            width=\"70px\"\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.monthly.specificDay.months\"\n            [options]=\"selectOptions.monthsNumeric\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          month(s) at\n          <cps-timepicker\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.monthly.specificDay)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"onTimeChanged($event, state.monthly.specificDay)\">\n          </cps-timepicker>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n            label=\"During the nearest weekday\"\n            [(ngModel)]=\"state.monthly.runOnWeekday\"\n            class=\"cps-scheduler-nearest-weekday-checkbox\">\n          </cps-checkbox>\n        </div>\n      </cps-radio>\n\n      <cps-radio [option]=\"{ value: 'specificWeekDay', disabled: disabled }\">\n        <div\n          class=\"cps-scheduler-tab-pane-row\"\n          [ngClass]=\"{\n            'cps-scheduler-tab-pane-row-disabled':\n              state.monthly.subTab !== 'specificWeekDay'\n          }\">\n          On the\n          <cps-select\n            width=\"106px\"\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificWeekDay'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.monthly.specificWeekDay.monthWeek\"\n            [options]=\"selectOptions.monthWeeks\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          <cps-select\n            width=\"130px\"\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificWeekDay'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.monthly.specificWeekDay.day\"\n            [options]=\"selectOptions.days\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          of every\n          <cps-select\n            width=\"90px\"\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificWeekDay'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.monthly.specificWeekDay.months\"\n            [options]=\"selectOptions.monthsNumeric\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          month(s) starting in\n          <cps-select\n            width=\"120px\"\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificWeekDay'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.monthly.specificWeekDay.startMonth\"\n            [options]=\"selectOptions.months\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          at\n          <cps-timepicker\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificWeekDay'\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"\n              onTimeChanged($event, state.monthly.specificWeekDay)\n            \">\n          </cps-timepicker>\n        </div>\n      </cps-radio>\n    </cps-radio-group>\n  </div>\n\n  <div *ngSwitchCase=\"'Yearly'\" class=\"cps-scheduler-tab-pane\">\n    <cps-radio-group\n      [hideDetails]=\"true\"\n      [(ngModel)]=\"state.yearly.subTab\"\n      (valueChanged)=\"regenerateCron()\"\n      [vertical]=\"true\">\n      <cps-radio [option]=\"{ value: 'specificMonthDay', disabled: disabled }\">\n        <div\n          class=\"cps-scheduler-tab-pane-row\"\n          [ngClass]=\"{\n            'cps-scheduler-tab-pane-row-disabled':\n              state.yearly.subTab !== 'specificMonthDay'\n          }\">\n          Every\n          <cps-select\n            width=\"120px\"\n            [disabled]=\"disabled || state.yearly.subTab !== 'specificMonthDay'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.yearly.specificMonthDay.month\"\n            [options]=\"selectOptions.months\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          on the\n          <cps-select\n            width=\"120px\"\n            [disabled]=\"disabled || state.yearly.subTab !== 'specificMonthDay'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.yearly.specificMonthDay.day\"\n            [options]=\"selectOptions.monthDaysWithLasts\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          at\n          <cps-timepicker\n            [disabled]=\"disabled || state.yearly.subTab !== 'specificMonthDay'\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"\n              onTimeChanged($event, state.yearly.specificMonthDay)\n            \">\n          </cps-timepicker>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled || state.yearly.subTab !== 'specificMonthDay'\"\n            label=\"During the nearest weekday\"\n            [(ngModel)]=\"state.yearly.runOnWeekday\"\n            class=\"cps-scheduler-nearest-weekday-checkbox\">\n          </cps-checkbox>\n        </div>\n      </cps-radio>\n\n      <cps-radio [option]=\"{ value: 'specificMonthWeek', disabled: disabled }\">\n        <div\n          class=\"cps-scheduler-tab-pane-row\"\n          [ngClass]=\"{\n            'cps-scheduler-tab-pane-row-disabled':\n              state.yearly.subTab !== 'specificMonthWeek'\n          }\">\n          On the\n          <cps-select\n            width=\"106px\"\n            [disabled]=\"disabled || state.yearly.subTab !== 'specificMonthWeek'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.yearly.specificMonthWeek.monthWeek\"\n            [options]=\"selectOptions.monthWeeks\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          <cps-select\n            width=\"120px\"\n            [disabled]=\"disabled || state.yearly.subTab !== 'specificMonthWeek'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.yearly.specificMonthWeek.day\"\n            [options]=\"selectOptions.days\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          of\n          <cps-select\n            width=\"120px\"\n            [disabled]=\"disabled || state.yearly.subTab !== 'specificMonthWeek'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.yearly.specificMonthWeek.month\"\n            [options]=\"selectOptions.months\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          at\n          <cps-timepicker\n            [disabled]=\"disabled || state.yearly.subTab !== 'specificMonthWeek'\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"\n              onTimeChanged($event, state.yearly.specificMonthWeek)\n            \">\n          </cps-timepicker>\n        </div>\n      </cps-radio>\n    </cps-radio-group>\n  </div>\n\n  <div *ngSwitchCase=\"'Advanced'\">\n    <form [formGroup]=\"form\">\n      <cps-input\n        label=\"\"\n        [disabled]=\"disabled\"\n        width=\"500px\"\n        placeholder=\"Please enter\"\n        formControlName=\"advanced\"\n        (valueChanged)=\"regenerateCron()\">\n      </cps-input>\n    </form>\n  </div>\n  <div class=\"cps-scheduler-time-zone\" *ngIf=\"cron && showTimeZone\">\n    <cps-autocomplete\n      label=\"Time zone\"\n      [(ngModel)]=\"timeZone\"\n      (valueChanged)=\"onTimeZoneChanged($event)\"\n      [returnObject]=\"false\"\n      width=\"300\"\n      [options]=\"timeZoneOptions\"></cps-autocomplete>\n  </div>\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:24px}:host .cps-scheduler-container{margin-top:10px;margin-left:16px}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:8px;margin-right:8px}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:700px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:1fr 1fr;grid-gap:20px;margin-bottom:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:28px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-radio-group ::ng-deep .cps-radio-group-content{margin-left:0!important}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row{display:flex;align-items:center}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row-disabled{color:var(--cps-color-text-light)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:8px}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-light)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsRadioGroupComponent, selector: "cps-radio-group", inputs: ["options", "groupLabel", "vertical", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "hint", "hideDetails", "value"], outputs: ["valueChanged", "blurred", "focused"] }, { kind: "component", type: CpsRadioComponent, selector: "cps-radio", inputs: ["option"] }, { kind: "component", type: CpsCheckboxComponent, selector: "cps-checkbox", inputs: ["label", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "icon", "iconColor", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsTimepickerComponent, selector: "cps-timepicker", inputs: ["label", "disabled", "use24HourTime", "withSeconds", "hint", "hideDetails", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "mandatoryValue", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsSchedulerComponent, deps: [{ token: i1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: CpsSchedulerComponent, isStandalone: true, selector: "cps-scheduler", inputs: { label: "label", cron: "cron", timeZone: "timeZone", showNotSet: "showNotSet", showAdvanced: "showAdvanced", showTimeZone: "showTimeZone", defaultTime: "defaultTime", use24HourTime: "use24HourTime", disabled: "disabled", infoTooltip: "infoTooltip" }, outputs: { cronChange: "cronChange", timeZoneChange: "timeZoneChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-scheduler-selector\">\n  <cps-button-toggle\n    [options]=\"scheduleTypes\"\n    [disabled]=\"disabled\"\n    [label]=\"label\"\n    [infoTooltip]=\"infoTooltip\"\n    [(ngModel)]=\"activeScheduleType\"\n    (ngModelChange)=\"setActiveScheduleType($event)\">\n  </cps-button-toggle>\n</div>\n\n<div\n  [ngSwitch]=\"activeScheduleType\"\n  class=\"cps-scheduler-container\"\n  [ngClass]=\"{ 'cps-scheduler-container-disabled': disabled }\">\n  <div *ngSwitchCase=\"'Not set'\" class=\"cps-scheduler-tab-pane\"></div>\n\n  <div *ngSwitchCase=\"'Minutes'\" class=\"cps-scheduler-tab-pane\">\n    <div class=\"cps-scheduler-tab-pane-row\">\n      Every\n      <cps-select\n        width=\"70px\"\n        [disabled]=\"disabled\"\n        [returnObject]=\"false\"\n        [hideDetails]=\"true\"\n        (valueChanged)=\"regenerateCron()\"\n        [(ngModel)]=\"state.minutes.minutes\"\n        [options]=\"selectOptions.minutes\"\n        class=\"cps-scheduler-select-control\">\n      </cps-select>\n      minute(s)\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'Hourly'\" class=\"cps-scheduler-tab-pane\">\n    <div class=\"cps-scheduler-tab-pane-row\">\n      Every\n      <cps-select\n        width=\"70px\"\n        [disabled]=\"disabled\"\n        [returnObject]=\"false\"\n        [hideDetails]=\"true\"\n        (valueChanged)=\"regenerateCron()\"\n        [(ngModel)]=\"state.hourly.hours\"\n        [options]=\"selectOptions.hours\"\n        class=\"cps-scheduler-select-control\">\n      </cps-select>\n      hour(s) on minute\n      <cps-select\n        width=\"70px\"\n        [disabled]=\"disabled\"\n        [returnObject]=\"false\"\n        [hideDetails]=\"true\"\n        (valueChanged)=\"regenerateCron()\"\n        [(ngModel)]=\"state.hourly.minutes\"\n        [options]=\"selectOptions.fullMinutes\"\n        class=\"cps-scheduler-select-control\">\n      </cps-select>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'Daily'\" class=\"cps-scheduler-tab-pane\">\n    <cps-radio-group\n      [hideDetails]=\"true\"\n      [(ngModel)]=\"state.daily.subTab\"\n      (valueChanged)=\"regenerateCron()\"\n      [vertical]=\"true\">\n      <cps-radio [option]=\"{ value: 'everyDays', disabled: disabled }\">\n        <div\n          class=\"cps-scheduler-tab-pane-row\"\n          [ngClass]=\"{\n            'cps-scheduler-tab-pane-row-disabled':\n              state.daily.subTab !== 'everyDays'\n          }\">\n          Every\n          <cps-select\n            width=\"70px\"\n            [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.daily.everyDays.days\"\n            [options]=\"selectOptions.monthDays\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          day(s) at\n          <cps-timepicker\n            [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.daily.everyDays)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"onTimeChanged($event, state.daily.everyDays)\">\n          </cps-timepicker>\n        </div>\n      </cps-radio>\n      <cps-radio [option]=\"{ value: 'everyWeekDay', disabled: disabled }\">\n        <div\n          class=\"cps-scheduler-tab-pane-row\"\n          [ngClass]=\"{\n            'cps-scheduler-tab-pane-row-disabled':\n              state.daily.subTab !== 'everyWeekDay'\n          }\">\n          Every working day at\n          <cps-timepicker\n            [disabled]=\"disabled || state.daily.subTab !== 'everyWeekDay'\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.daily.everyWeekDay)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"onTimeChanged($event, state.daily.everyWeekDay)\">\n          </cps-timepicker>\n        </div>\n      </cps-radio>\n    </cps-radio-group>\n  </div>\n\n  <div *ngSwitchCase=\"'Weekly'\" class=\"cps-scheduler-tab-pane\">\n    <div class=\"cps-scheduler-days-checkbox-group\">\n      <cps-checkbox\n        (valueChanged)=\"regenerateCron()\"\n        [disabled]=\"disabled\"\n        label=\"Monday\"\n        [(ngModel)]=\"state.weekly.MON\">\n      </cps-checkbox>\n      <cps-checkbox\n        (valueChanged)=\"regenerateCron()\"\n        [disabled]=\"disabled\"\n        label=\"Tuesday\"\n        [(ngModel)]=\"state.weekly.TUE\">\n      </cps-checkbox>\n      <cps-checkbox\n        (valueChanged)=\"regenerateCron()\"\n        [disabled]=\"disabled\"\n        label=\"Wednesday\"\n        [(ngModel)]=\"state.weekly.WED\">\n      </cps-checkbox>\n      <cps-checkbox\n        (valueChanged)=\"regenerateCron()\"\n        [disabled]=\"disabled\"\n        label=\"Thursday\"\n        [(ngModel)]=\"state.weekly.THU\">\n      </cps-checkbox>\n      <cps-checkbox\n        (valueChanged)=\"regenerateCron()\"\n        [disabled]=\"disabled\"\n        label=\"Friday\"\n        [(ngModel)]=\"state.weekly.FRI\">\n      </cps-checkbox>\n      <cps-checkbox\n        (valueChanged)=\"regenerateCron()\"\n        [disabled]=\"disabled\"\n        label=\"Saturday\"\n        [(ngModel)]=\"state.weekly.SAT\">\n      </cps-checkbox>\n      <cps-checkbox\n        (valueChanged)=\"regenerateCron()\"\n        [disabled]=\"disabled\"\n        label=\"Sunday\"\n        [(ngModel)]=\"state.weekly.SUN\">\n      </cps-checkbox>\n    </div>\n    <div class=\"cps-scheduler-tab-pane-row\">\n      at\n      <cps-timepicker\n        [disabled]=\"disabled\"\n        [use24HourTime]=\"use24HourTime\"\n        [mandatoryValue]=\"true\"\n        [value]=\"formatTimeValue(state.weekly)\"\n        [hideDetails]=\"true\"\n        (valueChanged)=\"onTimeChanged($event, state.weekly)\">\n      </cps-timepicker>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'Monthly'\" class=\"cps-scheduler-tab-pane\">\n    <cps-radio-group\n      [hideDetails]=\"true\"\n      [(ngModel)]=\"state.monthly.subTab\"\n      (valueChanged)=\"regenerateCron()\"\n      [vertical]=\"true\">\n      <cps-radio [option]=\"{ value: 'specificDay', disabled: disabled }\">\n        <div\n          class=\"cps-scheduler-tab-pane-row\"\n          [ngClass]=\"{\n            'cps-scheduler-tab-pane-row-disabled':\n              state.monthly.subTab !== 'specificDay'\n          }\">\n          On the\n          <cps-select\n            width=\"120px\"\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.monthly.specificDay.day\"\n            [options]=\"selectOptions.monthDaysWithLasts\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          of every\n          <cps-select\n            width=\"70px\"\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.monthly.specificDay.months\"\n            [options]=\"selectOptions.monthsNumeric\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          month(s) at\n          <cps-timepicker\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.monthly.specificDay)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"onTimeChanged($event, state.monthly.specificDay)\">\n          </cps-timepicker>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n            label=\"During the nearest weekday\"\n            [(ngModel)]=\"state.monthly.runOnWeekday\"\n            class=\"cps-scheduler-nearest-weekday-checkbox\">\n          </cps-checkbox>\n        </div>\n      </cps-radio>\n\n      <cps-radio [option]=\"{ value: 'specificWeekDay', disabled: disabled }\">\n        <div\n          class=\"cps-scheduler-tab-pane-row\"\n          [ngClass]=\"{\n            'cps-scheduler-tab-pane-row-disabled':\n              state.monthly.subTab !== 'specificWeekDay'\n          }\">\n          On the\n          <cps-select\n            width=\"106px\"\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificWeekDay'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.monthly.specificWeekDay.monthWeek\"\n            [options]=\"selectOptions.monthWeeks\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          <cps-select\n            width=\"130px\"\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificWeekDay'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.monthly.specificWeekDay.day\"\n            [options]=\"selectOptions.days\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          of every\n          <cps-select\n            width=\"90px\"\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificWeekDay'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.monthly.specificWeekDay.months\"\n            [options]=\"selectOptions.monthsNumeric\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          month(s) starting in\n          <cps-select\n            width=\"120px\"\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificWeekDay'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.monthly.specificWeekDay.startMonth\"\n            [options]=\"selectOptions.months\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          at\n          <cps-timepicker\n            [disabled]=\"disabled || state.monthly.subTab !== 'specificWeekDay'\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"\n              onTimeChanged($event, state.monthly.specificWeekDay)\n            \">\n          </cps-timepicker>\n        </div>\n      </cps-radio>\n    </cps-radio-group>\n  </div>\n\n  <div *ngSwitchCase=\"'Yearly'\" class=\"cps-scheduler-tab-pane\">\n    <cps-radio-group\n      [hideDetails]=\"true\"\n      [(ngModel)]=\"state.yearly.subTab\"\n      (valueChanged)=\"regenerateCron()\"\n      [vertical]=\"true\">\n      <cps-radio [option]=\"{ value: 'specificMonthDay', disabled: disabled }\">\n        <div\n          class=\"cps-scheduler-tab-pane-row\"\n          [ngClass]=\"{\n            'cps-scheduler-tab-pane-row-disabled':\n              state.yearly.subTab !== 'specificMonthDay'\n          }\">\n          Every\n          <cps-select\n            width=\"120px\"\n            [disabled]=\"disabled || state.yearly.subTab !== 'specificMonthDay'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.yearly.specificMonthDay.month\"\n            [options]=\"selectOptions.months\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          on the\n          <cps-select\n            width=\"120px\"\n            [disabled]=\"disabled || state.yearly.subTab !== 'specificMonthDay'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.yearly.specificMonthDay.day\"\n            [options]=\"selectOptions.monthDaysWithLasts\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          at\n          <cps-timepicker\n            [disabled]=\"disabled || state.yearly.subTab !== 'specificMonthDay'\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"\n              onTimeChanged($event, state.yearly.specificMonthDay)\n            \">\n          </cps-timepicker>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled || state.yearly.subTab !== 'specificMonthDay'\"\n            label=\"During the nearest weekday\"\n            [(ngModel)]=\"state.yearly.runOnWeekday\"\n            class=\"cps-scheduler-nearest-weekday-checkbox\">\n          </cps-checkbox>\n        </div>\n      </cps-radio>\n\n      <cps-radio [option]=\"{ value: 'specificMonthWeek', disabled: disabled }\">\n        <div\n          class=\"cps-scheduler-tab-pane-row\"\n          [ngClass]=\"{\n            'cps-scheduler-tab-pane-row-disabled':\n              state.yearly.subTab !== 'specificMonthWeek'\n          }\">\n          On the\n          <cps-select\n            width=\"106px\"\n            [disabled]=\"disabled || state.yearly.subTab !== 'specificMonthWeek'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.yearly.specificMonthWeek.monthWeek\"\n            [options]=\"selectOptions.monthWeeks\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          <cps-select\n            width=\"120px\"\n            [disabled]=\"disabled || state.yearly.subTab !== 'specificMonthWeek'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.yearly.specificMonthWeek.day\"\n            [options]=\"selectOptions.days\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          of\n          <cps-select\n            width=\"120px\"\n            [disabled]=\"disabled || state.yearly.subTab !== 'specificMonthWeek'\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.yearly.specificMonthWeek.month\"\n            [options]=\"selectOptions.months\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          at\n          <cps-timepicker\n            [disabled]=\"disabled || state.yearly.subTab !== 'specificMonthWeek'\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"\n              onTimeChanged($event, state.yearly.specificMonthWeek)\n            \">\n          </cps-timepicker>\n        </div>\n      </cps-radio>\n    </cps-radio-group>\n  </div>\n\n  <div *ngSwitchCase=\"'Advanced'\">\n    <form [formGroup]=\"form\">\n      <cps-input\n        label=\"\"\n        [disabled]=\"disabled\"\n        width=\"500px\"\n        placeholder=\"Please enter\"\n        formControlName=\"advanced\"\n        (valueChanged)=\"regenerateCron()\">\n      </cps-input>\n    </form>\n  </div>\n  <div class=\"cps-scheduler-time-zone\" *ngIf=\"cron && showTimeZone\">\n    <cps-autocomplete\n      label=\"Time zone\"\n      [(ngModel)]=\"timeZone\"\n      (valueChanged)=\"onTimeZoneChanged($event)\"\n      [returnObject]=\"false\"\n      width=\"300\"\n      [options]=\"timeZoneOptions\"></cps-autocomplete>\n  </div>\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:24px}:host .cps-scheduler-container{margin-top:10px;margin-left:16px}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:8px;margin-right:8px}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:700px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:1fr 1fr;grid-gap:20px;margin-bottom:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:28px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-radio-group ::ng-deep .cps-radio-group-content{margin-left:0!important}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row{display:flex;align-items:center}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row-disabled{color:var(--cps-color-text-light)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:8px}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-light)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsRadioGroupComponent, selector: "cps-radio-group", inputs: ["options", "groupLabel", "vertical", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "hint", "hideDetails", "value"], outputs: ["valueChanged", "blurred", "focused"] }, { kind: "component", type: CpsRadioComponent, selector: "cps-radio", inputs: ["option"] }, { kind: "component", type: CpsCheckboxComponent, selector: "cps-checkbox", inputs: ["label", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "icon", "iconColor", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsTimepickerComponent, selector: "cps-timepicker", inputs: ["label", "disabled", "use24HourTime", "withSeconds", "hint", "hideDetails", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "mandatoryValue", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsSchedulerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsSchedulerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cps-scheduler', standalone: true, imports: [
                         CommonModule,

package/esm2022/lib/components/cps-select/cps-select.component.mjs

@@ -536,10 +536,10 @@ export class CpsSelectComponent {
             (typeof this.value === 'string' && this.value.trim() === '') ||
             Number.isNaN(this.value));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsSelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", optionIcon: "optionIcon", optionIconColor: "optionIconColor", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", optionsClass: "optionsClass", appearance: "appearance", showChevron: "showChevron", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\n  tabindex=\"0\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n  #selectContainer\n  (keydown)=\"onKeyDown($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\">\n  <div class=\"cps-select-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-select-label-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  </div>\n  <div\n    class=\"cps-select-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div class=\"cps-select-box\" #selectBox (click)=\"onBoxClick()\">\n      <div class=\"cps-select-box-left\">\n        <cps-icon\n          *ngIf=\"prefixIcon\"\n          [icon]=\"prefixIcon\"\n          [style.color]=\"disabled ? '#9a9595' : null\"\n          [size]=\"prefixIconSize\"\n          class=\"prefix-icon\">\n        </cps-icon>\n        <div\n          class=\"cps-select-box-placeholder\"\n          *ngIf=\"\n            (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n          \">\n          {{ placeholder }}\n        </div>\n        <div\n          class=\"cps-select-box-items\"\n          *ngIf=\"\n            (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            {{\n              returnObject\n                ? value[optionLabel]\n                : (value | labelByValue: options : optionValue : optionLabel)\n            }}</span\n          >\n          <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n            <span class=\"text-group-item\">\n              {{\n                value\n                  | combineLabels\n                    : options\n                    : optionValue\n                    : optionLabel\n                    : returnObject\n              }}\n            </span>\n          </div>\n\n          <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n            <cps-chip\n              *ngFor=\"let val of value\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"select(val, true)\"\n              [label]=\"\n                returnObject\n                  ? val[optionLabel]\n                  : (val | labelByValue: options : optionValue : optionLabel)\n              \">\n            </cps-chip>\n          </div>\n        </div>\n      </div>\n      <span class=\"cps-select-box-icons\">\n        <span\n          *ngIf=\"clearable && !disabled\"\n          [style.visibility]=\"\n            persistentClear ||\n            (!persistentClear &&\n              ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n              ? 'visible'\n              : 'hidden'\n          \"\n          class=\"cps-select-box-clear-icon\">\n          <cps-icon\n            icon=\"delete\"\n            size=\"small\"\n            (click)=\"clear($event)\"></cps-icon>\n        </span>\n        <span *ngIf=\"showChevron\" class=\"cps-select-box-chevron\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n        </span>\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n      hideTransitionOptions=\"0s linear\"\n      [containerClass]=\"'cps-select-options-menu ' + optionsClass\">\n      <div\n        #optionsList\n        class=\"cps-select-options\"\n        [ngStyle]=\"{\n          width: selectBoxWidth + 'px'\n        }\">\n        <ng-container *ngIf=\"!virtualScroll\">\n          <div\n            class=\"cps-select-options-option select-all-option\"\n            [class.allselected]=\"value?.length === options.length\"\n            *ngIf=\"multiple && selectAll && options.length > 1\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-select-options-option-left\">\n              <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n              </span>\n              <span class=\"cps-select-options-option-label\">Select all</span>\n            </span>\n          </div>\n          <ng-container *ngFor=\"let item of options\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item\n                }\n              \"></ng-container>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"virtualScroll\">\n          <p-virtualScroller\n            #virtualList\n            [value]=\"options\"\n            [delay]=\"0\"\n            [scrollHeight]=\"virtualListHeight + 'px'\"\n            [options]=\"{ numToleratedItems: numToleratedItems }\"\n            [itemSize]=\"virtualScrollItemSize\">\n            <ng-template pTemplate=\"item\" let-item>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualScroller>\n        </ng-container>\n      </div>\n    </cps-menu>\n\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"select-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n\n<ng-template #itemTemplate let-item=\"item\">\n  <div\n    class=\"cps-select-options-option\"\n    (click)=\"onOptionClick(item)\"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-select-options-option-left\">\n      <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\"> </span>\n      <span\n        class=\"cps-select-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-select-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\">\n      {{ item[optionInfo] }}\n      <cps-icon\n        *ngIf=\"item[optionIcon]\"\n        [icon]=\"item[optionIcon]\"\n        [color]=\"item[optionIconColor] || 'text-light'\"\n        class=\"cps-select-options-option-right-icon\">\n      </cps-icon>\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:var(--cps-color-error)!important;background:#fef3f2!important}.cps-select-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);display:flex;align-items:center}.cps-select-options .cps-select-options-option-right-icon{margin-left:8px}.cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i3.VirtualScroller, selector: "p-virtualScroller", inputs: ["value", "itemSize", "style", "styleClass", "scrollHeight", "lazy", "options", "delay"], outputs: ["onLazyLoad"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsSelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", optionIcon: "optionIcon", optionIconColor: "optionIconColor", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", optionsClass: "optionsClass", appearance: "appearance", showChevron: "showChevron", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\n  tabindex=\"0\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n  #selectContainer\n  (keydown)=\"onKeyDown($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\">\n  <div class=\"cps-select-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-select-label-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  </div>\n  <div\n    class=\"cps-select-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div class=\"cps-select-box\" #selectBox (click)=\"onBoxClick()\">\n      <div class=\"cps-select-box-left\">\n        <cps-icon\n          *ngIf=\"prefixIcon\"\n          [icon]=\"prefixIcon\"\n          [style.color]=\"disabled ? '#9a9595' : null\"\n          [size]=\"prefixIconSize\"\n          class=\"prefix-icon\">\n        </cps-icon>\n        <div\n          class=\"cps-select-box-placeholder\"\n          *ngIf=\"\n            (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n          \">\n          {{ placeholder }}\n        </div>\n        <div\n          class=\"cps-select-box-items\"\n          *ngIf=\"\n            (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            {{\n              returnObject\n                ? value[optionLabel]\n                : (value | labelByValue: options : optionValue : optionLabel)\n            }}</span\n          >\n          <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n            <span class=\"text-group-item\">\n              {{\n                value\n                  | combineLabels\n                    : options\n                    : optionValue\n                    : optionLabel\n                    : returnObject\n              }}\n            </span>\n          </div>\n\n          <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n            <cps-chip\n              *ngFor=\"let val of value\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"select(val, true)\"\n              [label]=\"\n                returnObject\n                  ? val[optionLabel]\n                  : (val | labelByValue: options : optionValue : optionLabel)\n              \">\n            </cps-chip>\n          </div>\n        </div>\n      </div>\n      <span class=\"cps-select-box-icons\">\n        <span\n          *ngIf=\"clearable && !disabled\"\n          [style.visibility]=\"\n            persistentClear ||\n            (!persistentClear &&\n              ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n              ? 'visible'\n              : 'hidden'\n          \"\n          class=\"cps-select-box-clear-icon\">\n          <cps-icon\n            icon=\"delete\"\n            size=\"small\"\n            (click)=\"clear($event)\"></cps-icon>\n        </span>\n        <span *ngIf=\"showChevron\" class=\"cps-select-box-chevron\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n        </span>\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n      hideTransitionOptions=\"0s linear\"\n      [containerClass]=\"'cps-select-options-menu ' + optionsClass\">\n      <div\n        #optionsList\n        class=\"cps-select-options\"\n        [ngStyle]=\"{\n          width: selectBoxWidth + 'px'\n        }\">\n        <ng-container *ngIf=\"!virtualScroll\">\n          <div\n            class=\"cps-select-options-option select-all-option\"\n            [class.allselected]=\"value?.length === options.length\"\n            *ngIf=\"multiple && selectAll && options.length > 1\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-select-options-option-left\">\n              <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n              </span>\n              <span class=\"cps-select-options-option-label\">Select all</span>\n            </span>\n          </div>\n          <ng-container *ngFor=\"let item of options\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item\n                }\n              \"></ng-container>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"virtualScroll\">\n          <p-virtualScroller\n            #virtualList\n            [value]=\"options\"\n            [delay]=\"0\"\n            [scrollHeight]=\"virtualListHeight + 'px'\"\n            [options]=\"{ numToleratedItems: numToleratedItems }\"\n            [itemSize]=\"virtualScrollItemSize\">\n            <ng-template pTemplate=\"item\" let-item>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualScroller>\n        </ng-container>\n      </div>\n    </cps-menu>\n\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"select-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n\n<ng-template #itemTemplate let-item=\"item\">\n  <div\n    class=\"cps-select-options-option\"\n    (click)=\"onOptionClick(item)\"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-select-options-option-left\">\n      <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\"> </span>\n      <span\n        class=\"cps-select-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-select-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\">\n      {{ item[optionInfo] }}\n      <cps-icon\n        *ngIf=\"item[optionIcon]\"\n        [icon]=\"item[optionIcon]\"\n        [color]=\"item[optionIconColor] || 'text-light'\"\n        class=\"cps-select-options-option-right-icon\">\n      </cps-icon>\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:var(--cps-color-error)!important;background:#fef3f2!important}.cps-select-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);display:flex;align-items:center}.cps-select-options .cps-select-options-option-right-icon{margin-left:8px}.cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i3.VirtualScroller, selector: "p-virtualScroller", inputs: ["value", "itemSize", "style", "styleClass", "scrollHeight", "lazy", "options", "delay"], outputs: ["onLazyLoad"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsSelectComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         CommonModule,

package/esm2022/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.mjs

@@ -57,8 +57,8 @@ export class CpsSidebarMenuComponent {
     toggleSidebar() {
         this.isExpanded = !this.isExpanded;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsSidebarMenuComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsSidebarMenuComponent, isStandalone: true, selector: "cps-sidebar-menu", inputs: { items: "items", isExpanded: "isExpanded", exactRoutes: "exactRoutes", height: "height" }, viewQueries: [{ propertyName: "allMenus", predicate: ["popupMenu"], descendants: true }], ngImport: i0, template: "<div\n  class=\"cps-sidebar-menu\"\n  [style.height]=\"height\"\n  [ngClass]=\"{ 'cps-sidebar-menu-collapsed': !isExpanded }\">\n  <ng-container *ngFor=\"let item of items\">\n    <a\n      *ngIf=\"item.url\"\n      class=\"cps-sidebar-menu-item\"\n      [routerLink]=\"[item.url]\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n      [ngClass]=\"{ disabled: item.disabled }\">\n      <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n      <span\n        class=\"cps-sidebar-menu-item-label\"\n        [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n        {{ item.title }}\n      </span>\n    </a>\n    <ng-container *ngIf=\"!item.url\">\n      <cps-menu\n        #popupMenu\n        [items]=\"item.items || []\"\n        [header]=\"item.title\"\n        showTransitionOptions=\"0s\"\n        hideTransitionOptions=\"0s\"\n        [withArrow]=\"false\">\n      </cps-menu>\n      <div\n        (click)=\"toggleMenu($event, popupMenu)\"\n        class=\"cps-sidebar-menu-item menu-trigger\"\n        [ngClass]=\"{\n          active: isActive(item),\n          'menu-open': popupMenu.isVisible(),\n          disabled: item.disabled\n        }\">\n        <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n        <span\n          class=\"cps-sidebar-menu-item-label\"\n          [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n          {{ item.title }}\n        </span>\n      </div>\n    </ng-container>\n  </ng-container>\n  <div class=\"expand-area\" (click)=\"toggleSidebar()\">\n    <cps-icon icon=\"menu-shrink\" size=\"fill\"> </cps-icon>\n  </div>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 60px #0000001a;width:80px;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:24px;position:absolute;bottom:5%;transition-duration:.2s}:host .cps-sidebar-menu .expand-area:hover{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:80px;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:1px solid var(--cps-color-line-mid);-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{font-weight:600;font-size:11px;line-height:13px;width:80px;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active){background:var(--cps-color-highlight-active)}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active){background:var(--cps-color-highlight-active);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;pointer-events:none;color:var(--cps-color-text-light)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-light)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:40px}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsSidebarMenuComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: CpsSidebarMenuComponent, isStandalone: true, selector: "cps-sidebar-menu", inputs: { items: "items", isExpanded: "isExpanded", exactRoutes: "exactRoutes", height: "height" }, viewQueries: [{ propertyName: "allMenus", predicate: ["popupMenu"], descendants: true }], ngImport: i0, template: "<div\n  class=\"cps-sidebar-menu\"\n  [style.height]=\"height\"\n  [ngClass]=\"{ 'cps-sidebar-menu-collapsed': !isExpanded }\">\n  <ng-container *ngFor=\"let item of items\">\n    <a\n      *ngIf=\"item.url\"\n      class=\"cps-sidebar-menu-item\"\n      [routerLink]=\"[item.url]\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n      [ngClass]=\"{ disabled: item.disabled }\">\n      <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n      <span\n        class=\"cps-sidebar-menu-item-label\"\n        [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n        {{ item.title }}\n      </span>\n    </a>\n    <ng-container *ngIf=\"!item.url\">\n      <cps-menu\n        #popupMenu\n        [items]=\"item.items || []\"\n        [header]=\"item.title\"\n        showTransitionOptions=\"0s\"\n        hideTransitionOptions=\"0s\"\n        [withArrow]=\"false\">\n      </cps-menu>\n      <div\n        (click)=\"toggleMenu($event, popupMenu)\"\n        class=\"cps-sidebar-menu-item menu-trigger\"\n        [ngClass]=\"{\n          active: isActive(item),\n          'menu-open': popupMenu.isVisible(),\n          disabled: item.disabled\n        }\">\n        <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n        <span\n          class=\"cps-sidebar-menu-item-label\"\n          [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n          {{ item.title }}\n        </span>\n      </div>\n    </ng-container>\n  </ng-container>\n  <div class=\"expand-area\" (click)=\"toggleSidebar()\">\n    <cps-icon icon=\"menu-shrink\" size=\"fill\"> </cps-icon>\n  </div>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 60px #0000001a;width:80px;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:24px;position:absolute;bottom:5%;transition-duration:.2s}:host .cps-sidebar-menu .expand-area:hover{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:80px;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:1px solid var(--cps-color-line-mid);-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{font-weight:600;font-size:11px;line-height:13px;width:80px;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active){background:var(--cps-color-highlight-active)}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active){background:var(--cps-color-highlight-active);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;pointer-events:none;color:var(--cps-color-text-light)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-light)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:40px}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], animations: [
             trigger('onExpand', [
                 state('collapsed', style({
                     marginTop: '0',
@@ -76,7 +76,7 @@ export class CpsSidebarMenuComponent {
             ])
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsSidebarMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsSidebarMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cps-sidebar-menu', standalone: true, imports: [CommonModule, CpsMenuComponent, CpsIconComponent, RouterModule], animations: [
                         trigger('onExpand', [

package/esm2022/lib/components/cps-switch/cps-switch.component.mjs

@@ -99,10 +99,10 @@ export class CpsSwitchComponent {
     focus() {
         this._elementRef?.nativeElement?.querySelector('input')?.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsSwitchComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsSwitchComponent, isStandalone: true, selector: "cps-switch", inputs: { label: "label", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"cps-switch-container\">\n  <label class=\"cps-switch\">\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"updateValueEvent($event)\" />\n    <span class=\"cps-switch-slider\"></span>\n  </label>\n  <span\n    *ngIf=\"label\"\n    class=\"cps-switch-label\"\n    [ngClass]=\"{ 'cps-switch-label-disabled': disabled }\"\n    >{{ label }}</span\n  >\n  <cps-info-circle\n    *ngIf=\"infoTooltip\"\n    class=\"cps-switch-info-circle\"\n    size=\"xsmall\"\n    [tooltipPosition]=\"infoTooltipPosition\"\n    [tooltipContentClass]=\"infoTooltipClass\"\n    [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [tooltipPersistent]=\"infoTooltipPersistent\"\n    [tooltipText]=\"infoTooltip\">\n  </cps-info-circle>\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-switch-container{line-height:normal;display:flex;align-items:center}:host .cps-switch-container .cps-switch{position:relative;display:inline-block;width:48px;height:24px}:host .cps-switch-container .cps-switch input{opacity:0;width:0;height:0}:host .cps-switch-container .cps-switch-slider{position:absolute;cursor:pointer;inset:0;background-color:#fff;transition:.2s;border:1px solid var(--cps-color-calm);border-radius:30px}:host .cps-switch-container .cps-switch-label{font-size:16px;font-family:Source Sans Pro,sans-serif;font-style:normal;color:var(--cps-color-text-dark);margin-left:10px;cursor:default}:host .cps-switch-container .cps-switch-label-disabled{color:var(--cps-color-text-light)}:host .cps-switch-container .cps-switch-slider:before{position:absolute;content:\"\";height:14px;width:14px;border-radius:20px;left:4px;bottom:4px;background-color:var(--cps-color-calm);transition:.2s}:host .cps-switch-container input:checked+.cps-switch-slider{background-color:var(--cps-color-calm)}:host .cps-switch-container input:focus+.cps-switch-slider{box-shadow:0 0 1px var(--cps-color-calm)}:host .cps-switch-container input:checked+.cps-switch-slider:before{transform:translate(24px);background-color:#fff}:host .cps-switch-container input:disabled~.cps-switch-slider{cursor:default;border-color:var(--cps-color-text-lightest)}:host .cps-switch-container input:disabled:checked~.cps-switch-slider{background-color:var(--cps-color-text-lightest)}:host .cps-switch-container input:disabled:not(:checked)~.cps-switch-slider:before{background-color:var(--cps-color-text-lightest)}:host .cps-switch-container .cps-switch-info-circle{margin-left:8px}:host .cps-switch-container .cps-switch-info-circle ::ng-deep cps-icon i{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsSwitchComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: CpsSwitchComponent, isStandalone: true, selector: "cps-switch", inputs: { label: "label", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"cps-switch-container\">\n  <label class=\"cps-switch\">\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"updateValueEvent($event)\" />\n    <span class=\"cps-switch-slider\"></span>\n  </label>\n  <span\n    *ngIf=\"label\"\n    class=\"cps-switch-label\"\n    [ngClass]=\"{ 'cps-switch-label-disabled': disabled }\"\n    >{{ label }}</span\n  >\n  <cps-info-circle\n    *ngIf=\"infoTooltip\"\n    class=\"cps-switch-info-circle\"\n    size=\"xsmall\"\n    [tooltipPosition]=\"infoTooltipPosition\"\n    [tooltipContentClass]=\"infoTooltipClass\"\n    [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [tooltipPersistent]=\"infoTooltipPersistent\"\n    [tooltipText]=\"infoTooltip\">\n  </cps-info-circle>\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-switch-container{line-height:normal;display:flex;align-items:center}:host .cps-switch-container .cps-switch{position:relative;display:inline-block;width:48px;height:24px}:host .cps-switch-container .cps-switch input{opacity:0;width:0;height:0}:host .cps-switch-container .cps-switch-slider{position:absolute;cursor:pointer;inset:0;background-color:#fff;transition:.2s;border:1px solid var(--cps-color-calm);border-radius:30px}:host .cps-switch-container .cps-switch-label{font-size:16px;font-family:Source Sans Pro,sans-serif;font-style:normal;color:var(--cps-color-text-dark);margin-left:10px;cursor:default}:host .cps-switch-container .cps-switch-label-disabled{color:var(--cps-color-text-light)}:host .cps-switch-container .cps-switch-slider:before{position:absolute;content:\"\";height:14px;width:14px;border-radius:20px;left:4px;bottom:4px;background-color:var(--cps-color-calm);transition:.2s}:host .cps-switch-container input:checked+.cps-switch-slider{background-color:var(--cps-color-calm)}:host .cps-switch-container input:focus+.cps-switch-slider{box-shadow:0 0 1px var(--cps-color-calm)}:host .cps-switch-container input:checked+.cps-switch-slider:before{transform:translate(24px);background-color:#fff}:host .cps-switch-container input:disabled~.cps-switch-slider{cursor:default;border-color:var(--cps-color-text-lightest)}:host .cps-switch-container input:disabled:checked~.cps-switch-slider{background-color:var(--cps-color-text-lightest)}:host .cps-switch-container input:disabled:not(:checked)~.cps-switch-slider:before{background-color:var(--cps-color-text-lightest)}:host .cps-switch-container .cps-switch-info-circle{margin-left:8px}:host .cps-switch-container .cps-switch-info-circle ::ng-deep cps-icon i{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsSwitchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsSwitchComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, CpsInfoCircleComponent], selector: 'cps-switch', template: "<div class=\"cps-switch-container\">\n  <label class=\"cps-switch\">\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"updateValueEvent($event)\" />\n    <span class=\"cps-switch-slider\"></span>\n  </label>\n  <span\n    *ngIf=\"label\"\n    class=\"cps-switch-label\"\n    [ngClass]=\"{ 'cps-switch-label-disabled': disabled }\"\n    >{{ label }}</span\n  >\n  <cps-info-circle\n    *ngIf=\"infoTooltip\"\n    class=\"cps-switch-info-circle\"\n    size=\"xsmall\"\n    [tooltipPosition]=\"infoTooltipPosition\"\n    [tooltipContentClass]=\"infoTooltipClass\"\n    [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [tooltipPersistent]=\"infoTooltipPersistent\"\n    [tooltipText]=\"infoTooltip\">\n  </cps-info-circle>\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-switch-container{line-height:normal;display:flex;align-items:center}:host .cps-switch-container .cps-switch{position:relative;display:inline-block;width:48px;height:24px}:host .cps-switch-container .cps-switch input{opacity:0;width:0;height:0}:host .cps-switch-container .cps-switch-slider{position:absolute;cursor:pointer;inset:0;background-color:#fff;transition:.2s;border:1px solid var(--cps-color-calm);border-radius:30px}:host .cps-switch-container .cps-switch-label{font-size:16px;font-family:Source Sans Pro,sans-serif;font-style:normal;color:var(--cps-color-text-dark);margin-left:10px;cursor:default}:host .cps-switch-container .cps-switch-label-disabled{color:var(--cps-color-text-light)}:host .cps-switch-container .cps-switch-slider:before{position:absolute;content:\"\";height:14px;width:14px;border-radius:20px;left:4px;bottom:4px;background-color:var(--cps-color-calm);transition:.2s}:host .cps-switch-container input:checked+.cps-switch-slider{background-color:var(--cps-color-calm)}:host .cps-switch-container input:focus+.cps-switch-slider{box-shadow:0 0 1px var(--cps-color-calm)}:host .cps-switch-container input:checked+.cps-switch-slider:before{transform:translate(24px);background-color:#fff}:host .cps-switch-container input:disabled~.cps-switch-slider{cursor:default;border-color:var(--cps-color-text-lightest)}:host .cps-switch-container input:disabled:checked~.cps-switch-slider{background-color:var(--cps-color-text-lightest)}:host .cps-switch-container input:disabled:not(:checked)~.cps-switch-slider:before{background-color:var(--cps-color-text-lightest)}:host .cps-switch-container .cps-switch-info-circle{margin-left:8px}:host .cps-switch-container .cps-switch-info-circle ::ng-deep cps-icon i{width:14px;height:14px}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{

package/esm2022/lib/components/cps-tab-group/cps-tab/cps-tab.component.mjs

@@ -55,10 +55,10 @@ export class CpsTabComponent {
         this.badgeTooltip = '';
         this.active = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsTabComponent, isStandalone: true, selector: "cps-tab", inputs: { label: "label", icon: "icon", disabled: "disabled", tooltipText: "tooltipText", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent", badgeValue: "badgeValue", badgeTooltip: "badgeTooltip" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: CpsTabComponent, isStandalone: true, selector: "cps-tab", inputs: { label: "label", icon: "icon", disabled: "disabled", tooltipText: "tooltipText", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent", badgeValue: "badgeValue", badgeTooltip: "badgeTooltip" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsTabComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule], selector: 'cps-tab', template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n" }]
         }], propDecorators: { label: [{

package/esm2022/lib/components/cps-tab-group/cps-tab-group.component.mjs

@@ -204,8 +204,8 @@ export class CpsTabGroupComponent {
                 parseFloat(style.borderRightWidth);
         return width;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsTabGroupComponent, isStandalone: true, selector: "cps-tab-group", inputs: { selectedIndex: "selectedIndex", isSubTabs: "isSubTabs", alignment: "alignment", contentWrapClass: "contentWrapClass", headerClass: "headerClass", stretched: "stretched", animationType: "animationType", navButtonsBackground: "navButtonsBackground", tabsBackground: "tabsBackground" }, outputs: { beforeTabChanged: "beforeTabChanged", afterTabChanged: "afterTabChanged" }, queries: [{ propertyName: "tabs", predicate: CpsTabComponent }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "backBtn", first: true, predicate: ["backBtn"], descendants: true }, { propertyName: "forwardBtn", first: true, predicate: ["forwardBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cps-tabs\"\n  [class]=\"headerClass\"\n  [ngClass]=\"{\n    'cps-tabs-subtabs': isSubTabs,\n    'cps-tabs-center-aligned': alignment === 'center',\n    'cps-tabs-right-aligned': alignment === 'right',\n    'cps-tabs-stretched': stretched\n  }\"\n  [ngStyle]=\"{ 'background-color': tabsBackground }\">\n  <div\n    class=\"nav-btn nav-btn-back\"\n    [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n    *ngIf=\"!backBtnVisible\"\n    #backBtn\n    (click)=\"navBackward()\">\n    <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n  </div>\n  <ul #tabsList class=\"cps-tabs-list\">\n    <ng-container *ngFor=\"let tab of tabs; let tabIndex = index\">\n      <li\n        *ngIf=\"tab.tooltipText\"\n        class=\"cps-tab\"\n        (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n        [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\"\n        [cpsTooltip]=\"tab.tooltipText\"\n        tooltipOpenDelay=\"1000\"\n        tooltipCloseDelay=\"0\"\n        tooltipPosition=\"bottom\"\n        [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n        [tooltipPersistent]=\"tab.tooltipPersistent\"\n        [tooltipContentClass]=\"tab.tooltipContentClass\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            tabHeaderTemplate;\n            context: {\n              tab: tab\n            }\n          \"></ng-container>\n      </li>\n      <li\n        *ngIf=\"!tab.tooltipText\"\n        class=\"cps-tab\"\n        (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n        [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            tabHeaderTemplate;\n            context: {\n              tab: tab\n            }\n          \"></ng-container>\n      </li>\n    </ng-container>\n  </ul>\n  <div\n    class=\"nav-btn nav-btn-forward\"\n    [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n    *ngIf=\"!forwardBtnVisible\"\n    #forwardBtn\n    (click)=\"navForward()\">\n    <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n  </div>\n</div>\n<div\n  class=\"cps-tab-content-wrap\"\n  [class]=\"contentWrapClass\"\n  [ngClass]=\"{\n    'cps-tab-content-wrap-subtabs': isSubTabs\n  }\">\n  <ng-container *ngFor=\"let tab of tabs\">\n    <div class=\"cps-tab-content\" *ngIf=\"tab.active\">\n      <div\n        [@slideInOut]=\"animationState\"\n        *ngIf=\"animationType === 'slide'\"\n        class=\"cps-tab-content-inner\">\n        <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n      </div>\n      <div\n        [@fadeInOut]=\"animationState\"\n        *ngIf=\"animationType === 'fade'\"\n        class=\"cps-tab-content-inner\">\n        <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #tabHeaderTemplate let-tab=\"tab\">\n  <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\"> </cps-icon>\n  <a class=\"cps-tab-link\">{{ tab.label }}</a>\n  <ng-container *ngIf=\"tab.badgeValue\">\n    <div\n      *ngIf=\"tab.badgeTooltip\"\n      class=\"cps-tab-badge\"\n      [cpsTooltip]=\"tab.badgeTooltip\">\n      <span>{{ tab.badgeValue }}</span>\n    </div>\n    <div *ngIf=\"!tab.badgeTooltip\" class=\"cps-tab-badge\">\n      <span>{{ tab.badgeValue }}</span>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: [":host{background-color:inherit;margin:0!important;display:flex;flex-direction:column;max-width:100%}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:32px;cursor:pointer;position:absolute;height:100%}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:0 24px;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:15px;line-height:20px;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:3px solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:10px;color:inherit}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge{min-width:20px;padding:0 3px;height:20px;border-radius:50%;background-color:var(--cps-color-surprise);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs.cps-tabs-center-aligned{justify-content:center}:host .cps-tabs.cps-tabs-right-aligned{justify-content:flex-end}:host .cps-tabs.cps-tabs-stretched ul{flex-grow:1}:host .cps-tabs.cps-tabs-stretched ul li{flex-grow:1}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:1px solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:3px solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:3px solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled){border-bottom:3px solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled,.active){border-bottom:3px solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:33px;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content-wrap{display:flex;position:relative;min-height:100px;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);flex:1;border-bottom:none;overflow:hidden}:host .cps-tab-content-wrap .cps-tab-content{display:block;position:relative;overflow-x:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;inset:0;outline:0}:host .cps-tab-content-wrap .cps-tab-content .cps-tab-content-inner{height:100%;overflow:auto}:host .cps-tab-content-wrap.cps-tab-content-wrap-subtabs{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsTabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: CpsTabGroupComponent, isStandalone: true, selector: "cps-tab-group", inputs: { selectedIndex: "selectedIndex", isSubTabs: "isSubTabs", alignment: "alignment", contentWrapClass: "contentWrapClass", headerClass: "headerClass", stretched: "stretched", animationType: "animationType", navButtonsBackground: "navButtonsBackground", tabsBackground: "tabsBackground" }, outputs: { beforeTabChanged: "beforeTabChanged", afterTabChanged: "afterTabChanged" }, queries: [{ propertyName: "tabs", predicate: CpsTabComponent }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "backBtn", first: true, predicate: ["backBtn"], descendants: true }, { propertyName: "forwardBtn", first: true, predicate: ["forwardBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cps-tabs\"\n  [class]=\"headerClass\"\n  [ngClass]=\"{\n    'cps-tabs-subtabs': isSubTabs,\n    'cps-tabs-center-aligned': alignment === 'center',\n    'cps-tabs-right-aligned': alignment === 'right',\n    'cps-tabs-stretched': stretched\n  }\"\n  [ngStyle]=\"{ 'background-color': tabsBackground }\">\n  <div\n    class=\"nav-btn nav-btn-back\"\n    [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n    *ngIf=\"!backBtnVisible\"\n    #backBtn\n    (click)=\"navBackward()\">\n    <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n  </div>\n  <ul #tabsList class=\"cps-tabs-list\">\n    <ng-container *ngFor=\"let tab of tabs; let tabIndex = index\">\n      <li\n        *ngIf=\"tab.tooltipText\"\n        class=\"cps-tab\"\n        (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n        [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\"\n        [cpsTooltip]=\"tab.tooltipText\"\n        tooltipOpenDelay=\"1000\"\n        tooltipCloseDelay=\"0\"\n        tooltipPosition=\"bottom\"\n        [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n        [tooltipPersistent]=\"tab.tooltipPersistent\"\n        [tooltipContentClass]=\"tab.tooltipContentClass\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            tabHeaderTemplate;\n            context: {\n              tab: tab\n            }\n          \"></ng-container>\n      </li>\n      <li\n        *ngIf=\"!tab.tooltipText\"\n        class=\"cps-tab\"\n        (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n        [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            tabHeaderTemplate;\n            context: {\n              tab: tab\n            }\n          \"></ng-container>\n      </li>\n    </ng-container>\n  </ul>\n  <div\n    class=\"nav-btn nav-btn-forward\"\n    [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n    *ngIf=\"!forwardBtnVisible\"\n    #forwardBtn\n    (click)=\"navForward()\">\n    <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n  </div>\n</div>\n<div\n  class=\"cps-tab-content-wrap\"\n  [class]=\"contentWrapClass\"\n  [ngClass]=\"{\n    'cps-tab-content-wrap-subtabs': isSubTabs\n  }\">\n  <ng-container *ngFor=\"let tab of tabs\">\n    <div class=\"cps-tab-content\" *ngIf=\"tab.active\">\n      <div\n        [@slideInOut]=\"animationState\"\n        *ngIf=\"animationType === 'slide'\"\n        class=\"cps-tab-content-inner\">\n        <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n      </div>\n      <div\n        [@fadeInOut]=\"animationState\"\n        *ngIf=\"animationType === 'fade'\"\n        class=\"cps-tab-content-inner\">\n        <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #tabHeaderTemplate let-tab=\"tab\">\n  <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\"> </cps-icon>\n  <a class=\"cps-tab-link\">{{ tab.label }}</a>\n  <ng-container *ngIf=\"tab.badgeValue\">\n    <div\n      *ngIf=\"tab.badgeTooltip\"\n      class=\"cps-tab-badge\"\n      [cpsTooltip]=\"tab.badgeTooltip\">\n      <span>{{ tab.badgeValue }}</span>\n    </div>\n    <div *ngIf=\"!tab.badgeTooltip\" class=\"cps-tab-badge\">\n      <span>{{ tab.badgeValue }}</span>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: [":host{background-color:inherit;margin:0!important;display:flex;flex-direction:column;max-width:100%}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:32px;cursor:pointer;position:absolute;height:100%}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:0 24px;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:15px;line-height:20px;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:3px solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:10px;color:inherit}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge{min-width:20px;padding:0 3px;height:20px;border-radius:50%;background-color:var(--cps-color-surprise);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs.cps-tabs-center-aligned{justify-content:center}:host .cps-tabs.cps-tabs-right-aligned{justify-content:flex-end}:host .cps-tabs.cps-tabs-stretched ul{flex-grow:1}:host .cps-tabs.cps-tabs-stretched ul li{flex-grow:1}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:1px solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:3px solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:3px solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled){border-bottom:3px solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled,.active){border-bottom:3px solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:33px;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content-wrap{display:flex;position:relative;min-height:100px;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);flex:1;border-bottom:none;overflow:hidden}:host .cps-tab-content-wrap .cps-tab-content{display:block;position:relative;overflow-x:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;inset:0;outline:0}:host .cps-tab-content-wrap .cps-tab-content .cps-tab-content-inner{height:100%;overflow:auto}:host .cps-tab-content-wrap.cps-tab-content-wrap-subtabs{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }], animations: [
             trigger('slideInOut', [
                 state('slideLeft', style({ transform: 'translateX(0)' })),
                 state('slideRight', style({ transform: 'translateX(0)' })),
@@ -233,7 +233,7 @@ export class CpsTabGroupComponent {
             ])
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTabGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsTabGroupComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         CommonModule,

package/esm2022/lib/components/cps-table/components/internal/cps-sort-icon/cps-sort-icon.component.mjs

@@ -63,10 +63,10 @@ export class CpsSortIconComponent {
             this.subscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsSortIconComponent, deps: [{ token: i1.Table, optional: true }, { token: i2.TreeTable, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsSortIconComponent, isStandalone: true, selector: "cps-sort-icon", inputs: { field: "field" }, ngImport: i0, template: "<div *ngIf=\"sortOrder === 0\" class=\"cps-sortable-column-icon sort-unsorted\">\n  <div class=\"sort-unsorted-arrow-up\"></div>\n  <div class=\"sort-unsorted-arrow-down\"></div>\n</div>\n<div *ngIf=\"sortOrder === 1\" class=\"cps-sortable-column-icon sort-desc\"></div>\n<div *ngIf=\"sortOrder === -1\" class=\"cps-sortable-column-icon sort-asc\"></div>\n\n<span *ngIf=\"isMultiSorted()\" class=\"cps-sortable-column-badge\">{{\n  getBadgeValue()\n}}</span>\n", styles: [":host .cps-sortable-column-icon{display:inline-flex;margin-left:8px}:host .sort-desc{border:4px solid transparent;border-bottom-color:var(--cps-color-calm);margin-bottom:4px}:host .sort-asc{border:4px solid transparent;border-top-color:var(--cps-color-calm);margin-top:4px}:host .sort-unsorted{flex-direction:column;vertical-align:bottom}:host .sort-unsorted .sort-unsorted-arrow-up{display:inline-flex;border:4px solid transparent;border-bottom-color:var(--cps-color-line-dark);margin-bottom:4px;margin-top:-4px}:host .sort-unsorted .sort-unsorted-arrow-down{display:inline-flex;border:4px solid transparent;border-top-color:var(--cps-color-line-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsSortIconComponent, deps: [{ token: i1.Table, optional: true }, { token: i2.TreeTable, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: CpsSortIconComponent, isStandalone: true, selector: "cps-sort-icon", inputs: { field: "field" }, ngImport: i0, template: "<div *ngIf=\"sortOrder === 0\" class=\"cps-sortable-column-icon sort-unsorted\">\n  <div class=\"sort-unsorted-arrow-up\"></div>\n  <div class=\"sort-unsorted-arrow-down\"></div>\n</div>\n<div *ngIf=\"sortOrder === 1\" class=\"cps-sortable-column-icon sort-desc\"></div>\n<div *ngIf=\"sortOrder === -1\" class=\"cps-sortable-column-icon sort-asc\"></div>\n\n<span *ngIf=\"isMultiSorted()\" class=\"cps-sortable-column-badge\">{{\n  getBadgeValue()\n}}</span>\n", styles: [":host .cps-sortable-column-icon{display:inline-flex;margin-left:8px}:host .sort-desc{border:4px solid transparent;border-bottom-color:var(--cps-color-calm);margin-bottom:4px}:host .sort-asc{border:4px solid transparent;border-top-color:var(--cps-color-calm);margin-top:4px}:host .sort-unsorted{flex-direction:column;vertical-align:bottom}:host .sort-unsorted .sort-unsorted-arrow-up{display:inline-flex;border:4px solid transparent;border-bottom-color:var(--cps-color-line-dark);margin-bottom:4px;margin-top:-4px}:host .sort-unsorted .sort-unsorted-arrow-down{display:inline-flex;border:4px solid transparent;border-top-color:var(--cps-color-line-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsSortIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsSortIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cps-sort-icon', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"sortOrder === 0\" class=\"cps-sortable-column-icon sort-unsorted\">\n  <div class=\"sort-unsorted-arrow-up\"></div>\n  <div class=\"sort-unsorted-arrow-down\"></div>\n</div>\n<div *ngIf=\"sortOrder === 1\" class=\"cps-sortable-column-icon sort-desc\"></div>\n<div *ngIf=\"sortOrder === -1\" class=\"cps-sortable-column-icon sort-asc\"></div>\n\n<span *ngIf=\"isMultiSorted()\" class=\"cps-sortable-column-badge\">{{\n  getBadgeValue()\n}}</span>\n", styles: [":host .cps-sortable-column-icon{display:inline-flex;margin-left:8px}:host .sort-desc{border:4px solid transparent;border-bottom-color:var(--cps-color-calm);margin-bottom:4px}:host .sort-asc{border:4px solid transparent;border-top-color:var(--cps-color-calm);margin-top:4px}:host .sort-unsorted{flex-direction:column;vertical-align:bottom}:host .sort-unsorted .sort-unsorted-arrow-up{display:inline-flex;border:4px solid transparent;border-bottom-color:var(--cps-color-line-dark);margin-bottom:4px;margin-top:-4px}:host .sort-unsorted .sort-unsorted-arrow-down{display:inline-flex;border:4px solid transparent;border-top-color:var(--cps-color-line-dark)}\n"] }]
         }], ctorParameters: () => [{ type: i1.Table, decorators: [{

package/esm2022/lib/components/cps-table/components/internal/table-column-filter/table-column-filter.component.mjs

@@ -338,10 +338,10 @@ export class TableColumnFilterComponent {
     onMouseLeave() {
         this._updateSortIconColor('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableColumnFilterComponent, deps: [{ token: i0.ElementRef }, { token: i1.Table, optional: true }, { token: i2.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TableColumnFilterComponent, isStandalone: true, selector: "table-column-filter", inputs: { field: "field", type: "type", persistent: "persistent", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showCloseButton: "showCloseButton", showMatchModes: "showMatchModes", matchModes: "matchModes", showOperator: "showOperator", maxConstraints: "maxConstraints", headerTitle: "headerTitle", hideOnClear: "hideOnClear", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseOver()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "columnFilterMenu", first: true, predicate: ["columnFilterMenu"], descendants: true }, { propertyName: "constraintCompList", predicate: ["constraintComponent"], descendants: true }], ngImport: i0, template: "<div class=\"cps-table-col-filter\">\n  <cps-menu\n    #columnFilterMenu\n    [withArrow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    [persistent]=\"persistent || (showApplyButton && isCategoryDropdownOpened)\"\n    (menuShown)=\"onMenuShown()\"\n    (menuHidden)=\"onMenuHidden()\"\n    (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n    <div class=\"cps-table-col-filter-menu-content\">\n      <div\n        class=\"cps-table-col-filter-menu-content-header\"\n        *ngIf=\"showCloseButton || headerTitle\">\n        <span class=\"cps-table-col-filter-menu-content-header-title\">\n          {{ headerTitle }}\n        </span>\n        <cps-icon\n          *ngIf=\"showCloseButton\"\n          icon=\"close-x\"\n          (click)=\"onCloseClick()\"></cps-icon>\n      </div>\n      <div\n        class=\"cps-table-col-filter-menu-content-operator\"\n        *ngIf=\"isShowOperator\">\n        <cps-select\n          [hideDetails]=\"true\"\n          [disabled]=\"!fieldConstraints || fieldConstraints.length < 2\"\n          [returnObject]=\"false\"\n          [options]=\"operatorOptions\"\n          [ngModel]=\"operator\"\n          (valueChanged)=\"onOperatorChange($event)\"></cps-select>\n      </div>\n      <div class=\"cps-table-col-filter-menu-content-constraints\">\n        <div\n          *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\"\n          class=\"cps-table-col-filter-menu-content-constraint\">\n          <cps-select\n            *ngIf=\"showMatchModes && currentMatchModes\"\n            class=\"cps-table-col-filter-match-mode-select\"\n            [hideDetails]=\"true\"\n            [returnObject]=\"false\"\n            [options]=\"currentMatchModes\"\n            [ngModel]=\"fieldConstraint.matchMode\"\n            (valueChanged)=\"\n              onMenuMatchModeChange($event, fieldConstraint)\n            \"></cps-select>\n          <table-column-filter-constraint\n            #constraintComponent\n            [type]=\"type\"\n            [field]=\"field\"\n            [asButtonToggle]=\"asButtonToggle\"\n            [singleSelection]=\"singleSelection\"\n            [categoryOptions]=\"categoryOptions\"\n            [filterConstraint]=\"fieldConstraint\"\n            [hasApplyButton]=\"showApplyButton\"\n            [placeholder]=\"placeholder\">\n          </table-column-filter-constraint>\n          <div\n            class=\"cps-table-col-filter-remove-rule-btn\"\n            *ngIf=\"showRemoveIcon\">\n            <cps-button\n              type=\"borderless\"\n              width=\"100%\"\n              size=\"small\"\n              color=\"prepared\"\n              icon=\"delete\"\n              (clicked)=\"removeConstraint(fieldConstraint)\"\n              label=\"Remove condition\">\n            </cps-button>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"cps-table-col-filter-add-rule-btn\"\n        *ngIf=\"isShowAddConstraint\">\n        <cps-button\n          label=\"Add condition\"\n          type=\"borderless\"\n          width=\"100%\"\n          size=\"small\"\n          color=\"surprise\"\n          icon=\"add\"\n          (clicked)=\"addConstraint()\">\n        </cps-button>\n      </div>\n      <div class=\"cps-table-col-filter-buttonbar\">\n        <cps-button\n          *ngIf=\"showClearButton\"\n          (clicked)=\"clearFilter()\"\n          type=\"borderless\"\n          color=\"prepared\"\n          size=\"small\"\n          label=\"Clear\"></cps-button>\n        <cps-button\n          *ngIf=\"showApplyButton\"\n          (clicked)=\"applyFilter()\"\n          color=\"prepared\"\n          size=\"small\"\n          label=\"Apply\"></cps-button>\n      </div>\n    </div>\n  </cps-menu>\n  <cps-icon\n    [icon]=\"isFilterApplied ? 'filter-funnel-filled' : 'filter-funnel'\"\n    size=\"13\"\n    (click)=\"columnFilterMenu.toggle($event)\"\n    class=\"cps-table-col-filter-menu-button\"\n    [ngClass]=\"{\n      'cps-table-col-filter-menu-button-active': isFilterApplied\n    }\"\n    >>\n  </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:8px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm-lighten1)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header{min-height:32px;padding:8px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light);display:flex;justify-content:space-between;align-items:center}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header-title{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-darkest);max-width:390px;cursor:default}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon{margin-left:8px;cursor:pointer}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon:hover{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: TableColumnFilterConstraintComponent, selector: "table-column-filter-constraint", inputs: ["type", "field", "filterConstraint", "categoryOptions", "asButtonToggle", "singleSelection", "placeholder", "hasApplyButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: TableColumnFilterComponent, deps: [{ token: i0.ElementRef }, { token: i1.Table, optional: true }, { token: i2.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: TableColumnFilterComponent, isStandalone: true, selector: "table-column-filter", inputs: { field: "field", type: "type", persistent: "persistent", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showCloseButton: "showCloseButton", showMatchModes: "showMatchModes", matchModes: "matchModes", showOperator: "showOperator", maxConstraints: "maxConstraints", headerTitle: "headerTitle", hideOnClear: "hideOnClear", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseOver()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "columnFilterMenu", first: true, predicate: ["columnFilterMenu"], descendants: true }, { propertyName: "constraintCompList", predicate: ["constraintComponent"], descendants: true }], ngImport: i0, template: "<div class=\"cps-table-col-filter\">\n  <cps-menu\n    #columnFilterMenu\n    [withArrow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    [persistent]=\"persistent || (showApplyButton && isCategoryDropdownOpened)\"\n    (menuShown)=\"onMenuShown()\"\n    (menuHidden)=\"onMenuHidden()\"\n    (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n    <div class=\"cps-table-col-filter-menu-content\">\n      <div\n        class=\"cps-table-col-filter-menu-content-header\"\n        *ngIf=\"showCloseButton || headerTitle\">\n        <span class=\"cps-table-col-filter-menu-content-header-title\">\n          {{ headerTitle }}\n        </span>\n        <cps-icon\n          *ngIf=\"showCloseButton\"\n          icon=\"close-x\"\n          (click)=\"onCloseClick()\"></cps-icon>\n      </div>\n      <div\n        class=\"cps-table-col-filter-menu-content-operator\"\n        *ngIf=\"isShowOperator\">\n        <cps-select\n          [hideDetails]=\"true\"\n          [disabled]=\"!fieldConstraints || fieldConstraints.length < 2\"\n          [returnObject]=\"false\"\n          [options]=\"operatorOptions\"\n          [ngModel]=\"operator\"\n          (valueChanged)=\"onOperatorChange($event)\"></cps-select>\n      </div>\n      <div class=\"cps-table-col-filter-menu-content-constraints\">\n        <div\n          *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\"\n          class=\"cps-table-col-filter-menu-content-constraint\">\n          <cps-select\n            *ngIf=\"showMatchModes && currentMatchModes\"\n            class=\"cps-table-col-filter-match-mode-select\"\n            [hideDetails]=\"true\"\n            [returnObject]=\"false\"\n            [options]=\"currentMatchModes\"\n            [ngModel]=\"fieldConstraint.matchMode\"\n            (valueChanged)=\"\n              onMenuMatchModeChange($event, fieldConstraint)\n            \"></cps-select>\n          <table-column-filter-constraint\n            #constraintComponent\n            [type]=\"type\"\n            [field]=\"field\"\n            [asButtonToggle]=\"asButtonToggle\"\n            [singleSelection]=\"singleSelection\"\n            [categoryOptions]=\"categoryOptions\"\n            [filterConstraint]=\"fieldConstraint\"\n            [hasApplyButton]=\"showApplyButton\"\n            [placeholder]=\"placeholder\">\n          </table-column-filter-constraint>\n          <div\n            class=\"cps-table-col-filter-remove-rule-btn\"\n            *ngIf=\"showRemoveIcon\">\n            <cps-button\n              type=\"borderless\"\n              width=\"100%\"\n              size=\"small\"\n              color=\"prepared\"\n              icon=\"delete\"\n              (clicked)=\"removeConstraint(fieldConstraint)\"\n              label=\"Remove condition\">\n            </cps-button>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"cps-table-col-filter-add-rule-btn\"\n        *ngIf=\"isShowAddConstraint\">\n        <cps-button\n          label=\"Add condition\"\n          type=\"borderless\"\n          width=\"100%\"\n          size=\"small\"\n          color=\"surprise\"\n          icon=\"add\"\n          (clicked)=\"addConstraint()\">\n        </cps-button>\n      </div>\n      <div class=\"cps-table-col-filter-buttonbar\">\n        <cps-button\n          *ngIf=\"showClearButton\"\n          (clicked)=\"clearFilter()\"\n          type=\"borderless\"\n          color=\"prepared\"\n          size=\"small\"\n          label=\"Clear\"></cps-button>\n        <cps-button\n          *ngIf=\"showApplyButton\"\n          (clicked)=\"applyFilter()\"\n          color=\"prepared\"\n          size=\"small\"\n          label=\"Apply\"></cps-button>\n      </div>\n    </div>\n  </cps-menu>\n  <cps-icon\n    [icon]=\"isFilterApplied ? 'filter-funnel-filled' : 'filter-funnel'\"\n    size=\"13\"\n    (click)=\"columnFilterMenu.toggle($event)\"\n    class=\"cps-table-col-filter-menu-button\"\n    [ngClass]=\"{\n      'cps-table-col-filter-menu-button-active': isFilterApplied\n    }\"\n    >>\n  </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:8px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm-lighten1)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header{min-height:32px;padding:8px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light);display:flex;justify-content:space-between;align-items:center}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header-title{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-darkest);max-width:390px;cursor:default}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon{margin-left:8px;cursor:pointer}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon:hover{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: TableColumnFilterConstraintComponent, selector: "table-column-filter-constraint", inputs: ["type", "field", "filterConstraint", "categoryOptions", "asButtonToggle", "singleSelection", "placeholder", "hasApplyButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'table-column-filter', standalone: true, imports: [
                         CommonModule,