@testgorilla/tgo-ui 11.7.0 → 11.9.0

package/fesm2022/testgorilla-tgo-ui-components-segmented-toggle.mjs

@@ -98,7 +98,7 @@ class SegmentedToggleComponent {
         this.indicatorHeight.set(button.offsetHeight);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SegmentedToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SegmentedToggleComponent, isStandalone: true, selector: "ui-segmented-toggle", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.theme": "theme()", "class.ui-segmented-toggle--brand-active": "selectedOptionIsBrand()", "class.ui-segmented-toggle--disabled": "disabled()" } }, viewQueries: [{ propertyName: "optionButtons", predicate: ["optionButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n  <span\n    class=\"ui-segmented-toggle__indicator\"\n    [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n    [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n    aria-hidden=\"true\"\n    [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n    [style.width.px]=\"indicatorWidth()\"\n    [style.height.px]=\"indicatorHeight()\"\n  ></span>\n\n  @for (option of options(); track option.value) {\n    <button\n      #optionButton\n      type=\"button\"\n      class=\"ui-segmented-toggle__option\"\n      [attr.aria-pressed]=\"isSelected(option.value)\"\n      [attr.aria-label]=\"fallbackAriaLabel(option)\"\n      [disabled]=\"disabled()\"\n      [matTooltip]=\"option.tooltip ?? ''\"\n      [matTooltipPosition]=\"tooltipPosition(option)\"\n      [matTooltipClass]=\"theme()\"\n      (click)=\"select(option.value)\"\n    >\n      @if (option.icon) {\n        <ui-icon\n          class=\"ui-segmented-toggle__icon\"\n          [name]=\"option.icon\"\n          size=\"16\"\n          [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n        ></ui-icon>\n        @if (option.iconAriaLabel) {\n          <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n        }\n      }\n      @if (option.label) {\n        <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:inline-flex}.ui-segmented-toggle__group{position:relative;display:flex;align-items:center;gap:0;padding:4px;box-shadow:inset 0 0 0 1px #242424;border-radius:999px;background:#fff}.ui-segmented-toggle__indicator{position:absolute;top:0;left:0;z-index:0;border-radius:999px;background:#242424}.ui-segmented-toggle__indicator--hidden{opacity:0}.ui-segmented-toggle__indicator--animated{transition:transform .2s ease,width .2s ease}.ui-segmented-toggle__option{--cnp-icon-color: #242424;position:relative;z-index:1;display:inline-flex;flex:0 0 auto;gap:4px;align-items:center;justify-content:center;margin:0;padding:3px 16px;border:0;border-radius:999px;background:transparent;color:#242424;font:inherit;white-space:nowrap;cursor:pointer}.ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffffff;color:#fff}.ui-segmented-toggle__option[aria-pressed=true] .ui-segmented-toggle__label{font-weight:700}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__indicator{background:#d410aa}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffe6fa;color:#ffe6fa}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__group{box-shadow:inset 0 0 0 1px #919191}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__indicator{background:#e9e9e9}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option,:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #919191;color:#919191;cursor:not-allowed}.ui-segmented-toggle__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.ui-segmented-toggle__indicator--animated{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SegmentedToggleComponent, isStandalone: true, selector: "ui-segmented-toggle", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.theme": "theme()", "class.ui-segmented-toggle--brand-active": "selectedOptionIsBrand()", "class.ui-segmented-toggle--disabled": "disabled()" } }, viewQueries: [{ propertyName: "optionButtons", predicate: ["optionButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n  <span\n    class=\"ui-segmented-toggle__indicator\"\n    [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n    [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n    aria-hidden=\"true\"\n    [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n    [style.width.px]=\"indicatorWidth()\"\n    [style.height.px]=\"indicatorHeight()\"\n  ></span>\n\n  @for (option of options(); track option.value) {\n    <button\n      #optionButton\n      type=\"button\"\n      class=\"ui-segmented-toggle__option\"\n      [attr.aria-pressed]=\"isSelected(option.value)\"\n      [attr.aria-label]=\"fallbackAriaLabel(option)\"\n      [disabled]=\"disabled()\"\n      [matTooltip]=\"option.tooltip ?? ''\"\n      [matTooltipPosition]=\"tooltipPosition(option)\"\n      [matTooltipClass]=\"theme()\"\n      (click)=\"select(option.value)\"\n    >\n      @if (option.icon) {\n        <ui-icon\n          class=\"ui-segmented-toggle__icon\"\n          [name]=\"option.icon\"\n          size=\"16\"\n          [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n        ></ui-icon>\n        @if (option.iconAriaLabel) {\n          <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n        }\n      }\n      @if (option.label) {\n        <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:inline-flex}.ui-segmented-toggle__group{position:relative;display:flex;align-items:center;gap:0;padding:4px;box-shadow:inset 0 0 0 1px #242424;border-radius:999px;background:#fff}.ui-segmented-toggle__indicator{position:absolute;top:0;left:0;z-index:0;border-radius:999px;background:#242424}.ui-segmented-toggle__indicator--hidden{opacity:0}.ui-segmented-toggle__indicator--animated{transition:transform .2s ease,width .2s ease,opacity .2s ease}.ui-segmented-toggle__option{--cnp-icon-color: #242424;position:relative;z-index:1;display:inline-flex;flex:0 0 auto;gap:4px;align-items:center;justify-content:center;margin:0;padding:3px 16px;border:0;border-radius:999px;background:transparent;color:#242424;font:inherit;white-space:nowrap;cursor:pointer;transition:transform .1s ease}.ui-segmented-toggle__option:hover:not(:disabled,[aria-pressed=true]){background:#f4f4f4}.ui-segmented-toggle__option:active:not(:disabled,[aria-pressed=true]){transform:scale(.97)}.ui-segmented-toggle__option:focus-visible{outline:2px solid #242424;outline-offset:-2px}.ui-segmented-toggle__option[aria-pressed=true]:focus-visible{outline-color:#919191}.ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffffff;color:#fff}.ui-segmented-toggle__option[aria-pressed=true] .ui-segmented-toggle__label{font-weight:700}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__indicator{background:#d410aa}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]:focus-visible{outline-color:#fff}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffe6fa;color:#ffe6fa}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__group{box-shadow:inset 0 0 0 1px #919191}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__indicator{background:#e9e9e9}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option,:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #919191;color:#919191;cursor:not-allowed}.ui-segmented-toggle__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.ui-segmented-toggle__indicator--animated,.ui-segmented-toggle__option{transition:none}.ui-segmented-toggle__option:active:not(:disabled,[aria-pressed=true]){transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SegmentedToggleComponent, decorators: [{
             type: Component,
@@ -106,7 +106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         '[attr.theme]': 'theme()',
                         '[class.ui-segmented-toggle--brand-active]': 'selectedOptionIsBrand()',
                         '[class.ui-segmented-toggle--disabled]': 'disabled()',
-                    }, template: "<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n  <span\n    class=\"ui-segmented-toggle__indicator\"\n    [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n    [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n    aria-hidden=\"true\"\n    [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n    [style.width.px]=\"indicatorWidth()\"\n    [style.height.px]=\"indicatorHeight()\"\n  ></span>\n\n  @for (option of options(); track option.value) {\n    <button\n      #optionButton\n      type=\"button\"\n      class=\"ui-segmented-toggle__option\"\n      [attr.aria-pressed]=\"isSelected(option.value)\"\n      [attr.aria-label]=\"fallbackAriaLabel(option)\"\n      [disabled]=\"disabled()\"\n      [matTooltip]=\"option.tooltip ?? ''\"\n      [matTooltipPosition]=\"tooltipPosition(option)\"\n      [matTooltipClass]=\"theme()\"\n      (click)=\"select(option.value)\"\n    >\n      @if (option.icon) {\n        <ui-icon\n          class=\"ui-segmented-toggle__icon\"\n          [name]=\"option.icon\"\n          size=\"16\"\n          [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n        ></ui-icon>\n        @if (option.iconAriaLabel) {\n          <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n        }\n      }\n      @if (option.label) {\n        <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:inline-flex}.ui-segmented-toggle__group{position:relative;display:flex;align-items:center;gap:0;padding:4px;box-shadow:inset 0 0 0 1px #242424;border-radius:999px;background:#fff}.ui-segmented-toggle__indicator{position:absolute;top:0;left:0;z-index:0;border-radius:999px;background:#242424}.ui-segmented-toggle__indicator--hidden{opacity:0}.ui-segmented-toggle__indicator--animated{transition:transform .2s ease,width .2s ease}.ui-segmented-toggle__option{--cnp-icon-color: #242424;position:relative;z-index:1;display:inline-flex;flex:0 0 auto;gap:4px;align-items:center;justify-content:center;margin:0;padding:3px 16px;border:0;border-radius:999px;background:transparent;color:#242424;font:inherit;white-space:nowrap;cursor:pointer}.ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffffff;color:#fff}.ui-segmented-toggle__option[aria-pressed=true] .ui-segmented-toggle__label{font-weight:700}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__indicator{background:#d410aa}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffe6fa;color:#ffe6fa}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__group{box-shadow:inset 0 0 0 1px #919191}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__indicator{background:#e9e9e9}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option,:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #919191;color:#919191;cursor:not-allowed}.ui-segmented-toggle__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.ui-segmented-toggle__indicator--animated{transition:none}}\n"] }]
+                    }, template: "<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n  <span\n    class=\"ui-segmented-toggle__indicator\"\n    [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n    [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n    aria-hidden=\"true\"\n    [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n    [style.width.px]=\"indicatorWidth()\"\n    [style.height.px]=\"indicatorHeight()\"\n  ></span>\n\n  @for (option of options(); track option.value) {\n    <button\n      #optionButton\n      type=\"button\"\n      class=\"ui-segmented-toggle__option\"\n      [attr.aria-pressed]=\"isSelected(option.value)\"\n      [attr.aria-label]=\"fallbackAriaLabel(option)\"\n      [disabled]=\"disabled()\"\n      [matTooltip]=\"option.tooltip ?? ''\"\n      [matTooltipPosition]=\"tooltipPosition(option)\"\n      [matTooltipClass]=\"theme()\"\n      (click)=\"select(option.value)\"\n    >\n      @if (option.icon) {\n        <ui-icon\n          class=\"ui-segmented-toggle__icon\"\n          [name]=\"option.icon\"\n          size=\"16\"\n          [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n        ></ui-icon>\n        @if (option.iconAriaLabel) {\n          <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n        }\n      }\n      @if (option.label) {\n        <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:inline-flex}.ui-segmented-toggle__group{position:relative;display:flex;align-items:center;gap:0;padding:4px;box-shadow:inset 0 0 0 1px #242424;border-radius:999px;background:#fff}.ui-segmented-toggle__indicator{position:absolute;top:0;left:0;z-index:0;border-radius:999px;background:#242424}.ui-segmented-toggle__indicator--hidden{opacity:0}.ui-segmented-toggle__indicator--animated{transition:transform .2s ease,width .2s ease,opacity .2s ease}.ui-segmented-toggle__option{--cnp-icon-color: #242424;position:relative;z-index:1;display:inline-flex;flex:0 0 auto;gap:4px;align-items:center;justify-content:center;margin:0;padding:3px 16px;border:0;border-radius:999px;background:transparent;color:#242424;font:inherit;white-space:nowrap;cursor:pointer;transition:transform .1s ease}.ui-segmented-toggle__option:hover:not(:disabled,[aria-pressed=true]){background:#f4f4f4}.ui-segmented-toggle__option:active:not(:disabled,[aria-pressed=true]){transform:scale(.97)}.ui-segmented-toggle__option:focus-visible{outline:2px solid #242424;outline-offset:-2px}.ui-segmented-toggle__option[aria-pressed=true]:focus-visible{outline-color:#919191}.ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffffff;color:#fff}.ui-segmented-toggle__option[aria-pressed=true] .ui-segmented-toggle__label{font-weight:700}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__indicator{background:#d410aa}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]:focus-visible{outline-color:#fff}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffe6fa;color:#ffe6fa}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__group{box-shadow:inset 0 0 0 1px #919191}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__indicator{background:#e9e9e9}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option,:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #919191;color:#919191;cursor:not-allowed}.ui-segmented-toggle__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.ui-segmented-toggle__indicator--animated,.ui-segmented-toggle__option{transition:none}.ui-segmented-toggle__option:active:not(:disabled,[aria-pressed=true]){transform:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], optionButtons: [{ type: i0.ViewChildren, args: ['optionButton', { isSignal: true }] }] } });
 
 /**

package/fesm2022/testgorilla-tgo-ui-components-segmented-toggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-segmented-toggle.mjs","sources":["../../../components/segmented-toggle/segmented-toggle.component.ts","../../../components/segmented-toggle/segmented-toggle.component.html","../../../components/segmented-toggle/testgorilla-tgo-ui-components-segmented-toggle.ts"],"sourcesContent":["import {\n  afterNextRender,\n  afterRenderEffect,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  ElementRef,\n  inject,\n  input,\n  model,\n  signal,\n  viewChildren,\n} from '@angular/core';\nimport { MatTooltip, TooltipPosition } from '@angular/material/tooltip';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TooltipPositionType } from '@testgorilla/tgo-ui/components/tooltip';\n\nimport { SegmentedToggleOption } from './segmented-toggle.model';\n\n@Component({\n  selector: 'ui-segmented-toggle',\n  standalone: true,\n  imports: [IconComponentModule, MatTooltip],\n  templateUrl: './segmented-toggle.component.html',\n  styleUrls: ['./segmented-toggle.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.theme]': 'theme()',\n    '[class.ui-segmented-toggle--brand-active]': 'selectedOptionIsBrand()',\n    '[class.ui-segmented-toggle--disabled]': 'disabled()',\n  },\n})\nexport class SegmentedToggleComponent<T> {\n  private readonly hostRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n\n  readonly options = input.required<SegmentedToggleOption<T>[]>();\n  readonly value = model<T>();\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly ariaLabel = input<string>();\n  readonly applicationTheme = input<ApplicationTheme | undefined>(undefined);\n  private readonly defaultAppTheme = inject<ApplicationTheme>('CANOPYUI_DEFAULT_APPLICATION_THEME' as never, {\n    optional: true,\n  });\n  readonly theme = computed<ApplicationTheme>(() => this.applicationTheme() ?? this.defaultAppTheme ?? 'light');\n\n  /** One ElementRef per segment button; used to measure the active pill geometry. */\n  private readonly optionButtons = viewChildren<ElementRef<HTMLButtonElement>>('optionButton');\n\n  /** Index of the selected option; -1 when value() matches no option. */\n  protected readonly selectedIndex = computed(() => this.options().findIndex(option => option.value === this.value()));\n\n  /** True when the currently-selected option is flagged `brand: true`. */\n  protected readonly selectedOptionIsBrand = computed(() => this.options()[this.selectedIndex()]?.brand === true);\n\n  /** Measured pixel geometry of the active button, driving the sliding indicator. */\n  protected readonly indicatorOffset = signal(0);\n  protected readonly indicatorTop = signal(0);\n  protected readonly indicatorWidth = signal(0);\n  protected readonly indicatorHeight = signal(0);\n\n  /** Enables the slide transition only after the initial position is painted. */\n  protected readonly animated = signal(false);\n\n  constructor() {\n    // Re-measure after every render that follows a selection or options change.\n    afterRenderEffect(() => {\n      // Read these so the effect re-runs (post-render) whenever selection changes.\n      this.value();\n      this.options();\n      this.measureIndicator();\n    });\n\n    // Re-measure on container resize (width changes don't touch any signal).\n    afterNextRender(() => {\n      // Position the indicator for the initial selection without animating, then\n      // enable the slide on the next frame so only user-driven changes animate.\n      this.measureIndicator();\n      requestAnimationFrame(() => this.animated.set(true));\n\n      if (typeof ResizeObserver === 'undefined') {\n        return;\n      }\n      const observer = new ResizeObserver(() => this.measureIndicator());\n      observer.observe(this.hostRef.nativeElement);\n      this.destroyRef.onDestroy(() => observer.disconnect());\n    });\n  }\n\n  protected select(optionValue: T): void {\n    if (this.disabled()) {\n      return;\n    }\n    this.value.set(optionValue);\n  }\n\n  protected isSelected(optionValue: T): boolean {\n    return optionValue === this.value();\n  }\n\n  /**\n   * Last-resort accessible name for a segment. Used only for an icon-only option\n   * that provides neither a visible `label` nor an `iconAriaLabel`, so the button\n   * is never a nameless control. When a label or icon label is present those name\n   * the button and this returns `null` (no `aria-label` attribute).\n   */\n  protected fallbackAriaLabel(option: SegmentedToggleOption<T>): string | null {\n    if (option.label || option.iconAriaLabel) {\n      return null;\n    }\n    return String(option.value);\n  }\n\n  /** Maps the option's Canopy tooltip position (default TOP) to the MatTooltip position. */\n  protected tooltipPosition(option: SegmentedToggleOption<T>): TooltipPosition {\n    switch (option.tooltipPosition ?? TooltipPositionType.TOP) {\n      case TooltipPositionType.BOTTOM:\n        return 'below';\n      case TooltipPositionType.LEFT:\n        return 'left';\n      case TooltipPositionType.RIGHT:\n        return 'right';\n      case TooltipPositionType.TOP:\n        return 'above';\n    }\n  }\n\n  /** Reads the active button's box and writes it to the indicator signals. */\n  private measureIndicator(): void {\n    const button = this.optionButtons()[this.selectedIndex()]?.nativeElement;\n    if (!button) {\n      return;\n    }\n    this.indicatorOffset.set(button.offsetLeft);\n    this.indicatorTop.set(button.offsetTop);\n    this.indicatorWidth.set(button.offsetWidth);\n    this.indicatorHeight.set(button.offsetHeight);\n  }\n}\n","<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n  <span\n    class=\"ui-segmented-toggle__indicator\"\n    [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n    [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n    aria-hidden=\"true\"\n    [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n    [style.width.px]=\"indicatorWidth()\"\n    [style.height.px]=\"indicatorHeight()\"\n  ></span>\n\n  @for (option of options(); track option.value) {\n    <button\n      #optionButton\n      type=\"button\"\n      class=\"ui-segmented-toggle__option\"\n      [attr.aria-pressed]=\"isSelected(option.value)\"\n      [attr.aria-label]=\"fallbackAriaLabel(option)\"\n      [disabled]=\"disabled()\"\n      [matTooltip]=\"option.tooltip ?? ''\"\n      [matTooltipPosition]=\"tooltipPosition(option)\"\n      [matTooltipClass]=\"theme()\"\n      (click)=\"select(option.value)\"\n    >\n      @if (option.icon) {\n        <ui-icon\n          class=\"ui-segmented-toggle__icon\"\n          [name]=\"option.icon\"\n          size=\"16\"\n          [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n        ></ui-icon>\n        @if (option.iconAriaLabel) {\n          <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n        }\n      }\n      @if (option.label) {\n        <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n      }\n    </button>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAoCa,wBAAwB,CAAA;AAgCnC,IAAA,WAAA,GAAA;AA/BiB,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAA0B,UAAU,CAAC;AACrD,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAEvC,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,6EAA8B;QACtD,IAAA,CAAA,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAK;QAClB,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;QACxD,IAAA,CAAA,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAC3B,QAAA,IAAA,CAAA,gBAAgB,GAAG,KAAK,CAA+B,SAAS,uFAAC;AACzD,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAmB,oCAA6C,EAAE;AACzG,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA,CAAC;AACO,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAmB,MAAM,IAAI,CAAC,gBAAgB,EAAE,IAAI,IAAI,CAAC,eAAe,IAAI,OAAO,4EAAC;;AAG5F,QAAA,IAAA,CAAA,aAAa,GAAG,YAAY,CAAgC,cAAc,oFAAC;;QAGzE,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,SAAS,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,eAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;;QAGjG,IAAA,CAAA,qBAAqB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,KAAK,KAAK,IAAI,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,uBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;;AAG5F,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAC,CAAC,sFAAC;AAC3B,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAC,CAAC,mFAAC;AACxB,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,CAAC,qFAAC;AAC1B,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAC,CAAC,sFAAC;;AAG3B,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,+EAAC;;QAIzC,iBAAiB,CAAC,MAAK;;YAErB,IAAI,CAAC,KAAK,EAAE;YACZ,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,gBAAgB,EAAE;AACzB,QAAA,CAAC,CAAC;;QAGF,eAAe,CAAC,MAAK;;;YAGnB,IAAI,CAAC,gBAAgB,EAAE;AACvB,YAAA,qBAAqB,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAEpD,YAAA,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;gBACzC;YACF;AACA,YAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAClE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;AAC5C,YAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;AACxD,QAAA,CAAC,CAAC;IACJ;AAEU,IAAA,MAAM,CAAC,WAAc,EAAA;AAC7B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACnB;QACF;AACA,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC;IAC7B;AAEU,IAAA,UAAU,CAAC,WAAc,EAAA;AACjC,QAAA,OAAO,WAAW,KAAK,IAAI,CAAC,KAAK,EAAE;IACrC;AAEA;;;;;AAKG;AACO,IAAA,iBAAiB,CAAC,MAAgC,EAAA;QAC1D,IAAI,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,aAAa,EAAE;AACxC,YAAA,OAAO,IAAI;QACb;AACA,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;IAC7B;;AAGU,IAAA,eAAe,CAAC,MAAgC,EAAA;QACxD,QAAQ,MAAM,CAAC,eAAe,IAAI,mBAAmB,CAAC,GAAG;YACvD,KAAK,mBAAmB,CAAC,MAAM;AAC7B,gBAAA,OAAO,OAAO;YAChB,KAAK,mBAAmB,CAAC,IAAI;AAC3B,gBAAA,OAAO,MAAM;YACf,KAAK,mBAAmB,CAAC,KAAK;AAC5B,gBAAA,OAAO,OAAO;YAChB,KAAK,mBAAmB,CAAC,GAAG;AAC1B,gBAAA,OAAO,OAAO;;IAEpB;;IAGQ,gBAAgB,GAAA;AACtB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,aAAa;QACxE,IAAI,CAAC,MAAM,EAAE;YACX;QACF;QACA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC;QAC3C,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC;QACvC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,WAAW,CAAC;QAC3C,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,YAAY,CAAC;IAC/C;+GAzGW,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,yCAAA,EAAA,yBAAA,EAAA,qCAAA,EAAA,YAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,eAAA,EAAA,SAAA,EAAA,CAAA,cAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpCrC,wgDAyCA,EAAA,MAAA,EAAA,CAAA,k4HAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDfY,mBAAmB,sNAAE,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAU9B,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAbpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,EAAA,UAAA,EACnB,IAAI,EAAA,OAAA,EACP,CAAC,mBAAmB,EAAE,UAAU,CAAC,EAAA,eAAA,EAGzB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,cAAc,EAAE,SAAS;AACzB,wBAAA,2CAA2C,EAAE,yBAAyB;AACtE,wBAAA,uCAAuC,EAAE,YAAY;AACtD,qBAAA,EAAA,QAAA,EAAA,wgDAAA,EAAA,MAAA,EAAA,CAAA,k4HAAA,CAAA,EAAA;6nBAiB4E,cAAc,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEnD7F;;AAEG;;;;"}
+{"version":3,"file":"testgorilla-tgo-ui-components-segmented-toggle.mjs","sources":["../../../components/segmented-toggle/segmented-toggle.component.ts","../../../components/segmented-toggle/segmented-toggle.component.html","../../../components/segmented-toggle/testgorilla-tgo-ui-components-segmented-toggle.ts"],"sourcesContent":["import {\n  afterNextRender,\n  afterRenderEffect,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  ElementRef,\n  inject,\n  input,\n  model,\n  signal,\n  viewChildren,\n} from '@angular/core';\nimport { MatTooltip, TooltipPosition } from '@angular/material/tooltip';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TooltipPositionType } from '@testgorilla/tgo-ui/components/tooltip';\n\nimport { SegmentedToggleOption } from './segmented-toggle.model';\n\n@Component({\n  selector: 'ui-segmented-toggle',\n  standalone: true,\n  imports: [IconComponentModule, MatTooltip],\n  templateUrl: './segmented-toggle.component.html',\n  styleUrls: ['./segmented-toggle.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.theme]': 'theme()',\n    '[class.ui-segmented-toggle--brand-active]': 'selectedOptionIsBrand()',\n    '[class.ui-segmented-toggle--disabled]': 'disabled()',\n  },\n})\nexport class SegmentedToggleComponent<T> {\n  private readonly hostRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n\n  readonly options = input.required<SegmentedToggleOption<T>[]>();\n  readonly value = model<T>();\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly ariaLabel = input<string>();\n  readonly applicationTheme = input<ApplicationTheme | undefined>(undefined);\n  private readonly defaultAppTheme = inject<ApplicationTheme>('CANOPYUI_DEFAULT_APPLICATION_THEME' as never, {\n    optional: true,\n  });\n  readonly theme = computed<ApplicationTheme>(() => this.applicationTheme() ?? this.defaultAppTheme ?? 'light');\n\n  /** One ElementRef per segment button; used to measure the active pill geometry. */\n  private readonly optionButtons = viewChildren<ElementRef<HTMLButtonElement>>('optionButton');\n\n  /** Index of the selected option; -1 when value() matches no option. */\n  protected readonly selectedIndex = computed(() => this.options().findIndex(option => option.value === this.value()));\n\n  /** True when the currently-selected option is flagged `brand: true`. */\n  protected readonly selectedOptionIsBrand = computed(() => this.options()[this.selectedIndex()]?.brand === true);\n\n  /** Measured pixel geometry of the active button, driving the sliding indicator. */\n  protected readonly indicatorOffset = signal(0);\n  protected readonly indicatorTop = signal(0);\n  protected readonly indicatorWidth = signal(0);\n  protected readonly indicatorHeight = signal(0);\n\n  /** Enables the slide transition only after the initial position is painted. */\n  protected readonly animated = signal(false);\n\n  constructor() {\n    // Re-measure after every render that follows a selection or options change.\n    afterRenderEffect(() => {\n      // Read these so the effect re-runs (post-render) whenever selection changes.\n      this.value();\n      this.options();\n      this.measureIndicator();\n    });\n\n    // Re-measure on container resize (width changes don't touch any signal).\n    afterNextRender(() => {\n      // Position the indicator for the initial selection without animating, then\n      // enable the slide on the next frame so only user-driven changes animate.\n      this.measureIndicator();\n      requestAnimationFrame(() => this.animated.set(true));\n\n      if (typeof ResizeObserver === 'undefined') {\n        return;\n      }\n      const observer = new ResizeObserver(() => this.measureIndicator());\n      observer.observe(this.hostRef.nativeElement);\n      this.destroyRef.onDestroy(() => observer.disconnect());\n    });\n  }\n\n  protected select(optionValue: T): void {\n    if (this.disabled()) {\n      return;\n    }\n    this.value.set(optionValue);\n  }\n\n  protected isSelected(optionValue: T): boolean {\n    return optionValue === this.value();\n  }\n\n  /**\n   * Last-resort accessible name for a segment. Used only for an icon-only option\n   * that provides neither a visible `label` nor an `iconAriaLabel`, so the button\n   * is never a nameless control. When a label or icon label is present those name\n   * the button and this returns `null` (no `aria-label` attribute).\n   */\n  protected fallbackAriaLabel(option: SegmentedToggleOption<T>): string | null {\n    if (option.label || option.iconAriaLabel) {\n      return null;\n    }\n    return String(option.value);\n  }\n\n  /** Maps the option's Canopy tooltip position (default TOP) to the MatTooltip position. */\n  protected tooltipPosition(option: SegmentedToggleOption<T>): TooltipPosition {\n    switch (option.tooltipPosition ?? TooltipPositionType.TOP) {\n      case TooltipPositionType.BOTTOM:\n        return 'below';\n      case TooltipPositionType.LEFT:\n        return 'left';\n      case TooltipPositionType.RIGHT:\n        return 'right';\n      case TooltipPositionType.TOP:\n        return 'above';\n    }\n  }\n\n  /** Reads the active button's box and writes it to the indicator signals. */\n  private measureIndicator(): void {\n    const button = this.optionButtons()[this.selectedIndex()]?.nativeElement;\n    if (!button) {\n      return;\n    }\n    this.indicatorOffset.set(button.offsetLeft);\n    this.indicatorTop.set(button.offsetTop);\n    this.indicatorWidth.set(button.offsetWidth);\n    this.indicatorHeight.set(button.offsetHeight);\n  }\n}\n","<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n  <span\n    class=\"ui-segmented-toggle__indicator\"\n    [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n    [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n    aria-hidden=\"true\"\n    [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n    [style.width.px]=\"indicatorWidth()\"\n    [style.height.px]=\"indicatorHeight()\"\n  ></span>\n\n  @for (option of options(); track option.value) {\n    <button\n      #optionButton\n      type=\"button\"\n      class=\"ui-segmented-toggle__option\"\n      [attr.aria-pressed]=\"isSelected(option.value)\"\n      [attr.aria-label]=\"fallbackAriaLabel(option)\"\n      [disabled]=\"disabled()\"\n      [matTooltip]=\"option.tooltip ?? ''\"\n      [matTooltipPosition]=\"tooltipPosition(option)\"\n      [matTooltipClass]=\"theme()\"\n      (click)=\"select(option.value)\"\n    >\n      @if (option.icon) {\n        <ui-icon\n          class=\"ui-segmented-toggle__icon\"\n          [name]=\"option.icon\"\n          size=\"16\"\n          [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n        ></ui-icon>\n        @if (option.iconAriaLabel) {\n          <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n        }\n      }\n      @if (option.label) {\n        <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n      }\n    </button>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/testgorilla-tgo-ui-components-slider.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { DecimalPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, EventEmitter, inject, ChangeDetectorRef, forwardRef, Output, Input, Optional, Inject, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { input, booleanAttribute, EventEmitter, output, signal, computed, inject, ChangeDetectorRef, forwardRef, Output, Input, Optional, Inject, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i3 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import * as i4 from '@angular/material/input';
@@ -112,7 +112,33 @@ class SliderComponent {
         this.minLabel = input(...(ngDevMode ? [undefined, { debugName: "minLabel" }] : /* istanbul ignore next */ []));
         this.maxLabel = input(...(ngDevMode ? [undefined, { debugName: "maxLabel" }] : /* istanbul ignore next */ []));
         this.inputWidth = input(80, ...(ngDevMode ? [{ debugName: "inputWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * Controls whether the value bubble pops above the thumb on hover and while dragging.
+         * Set it to false for scrubber-style sliders whose designs do not show one.
+         * Applies to both the basic and the range variant.
+         */
+        this.showValueBubble = input(true, { ...(ngDevMode ? { debugName: "showValueBubble" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.sliderValueChange = new EventEmitter();
+        /**
+         * Emitted with the current value when the user starts dragging the thumb.
+         * Basic variant only, and never emitted for programmatic value writes, so a consumer
+         * that also drives the slider on a timer can tell a user drag apart from its own write.
+         */
+        this.dragStart = output();
+        /**
+         * Emitted with the released value when the user stops dragging the thumb.
+         * Basic variant only. See {@link dragStart}.
+         */
+        this.dragEnd = output();
+        /**
+         * Tracks hover, so the value bubble markup is only mounted while the pointer is over the slider.
+         * Starts true to keep the at-rest markup identical to what the component shipped before
+         * `showValueBubble` existed: Material leaves the bubble invisible until the thumb is active, and
+         * unmounting it changes how the disabled slider's opacity layer rasterises its text.
+         */
+        this.isHovered = signal(true, ...(ngDevMode ? [{ debugName: "isHovered" }] : /* istanbul ignore next */ []));
+        /** Material renders the value bubble only while `discrete` is set, so gate it on both hover and the input. */
+        this.isDiscrete = computed(() => this.showValueBubble() && this.isHovered(), ...(ngDevMode ? [{ debugName: "isDiscrete" }] : /* istanbul ignore next */ []));
         this.cdr = inject(ChangeDetectorRef);
         this.decimalPipe = inject(DecimalPipe);
         this.value = { start: 0, end: 100 };
@@ -161,6 +187,15 @@ class SliderComponent {
         this.cdr.markForCheck();
         this.onTouch();
     }
+    onSliderHover(isHovered) {
+        this.isHovered.set(isHovered);
+    }
+    onDragStart(event) {
+        this.dragStart.emit(event.value);
+    }
+    onDragEnd(event) {
+        this.dragEnd.emit(event.value);
+    }
     onInputBlur(inputName) {
         this.touchedControlName = inputName;
         const value = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };
@@ -195,7 +230,7 @@ class SliderComponent {
         return this.hasError && this.touchedControlName ? { invalidSlider: true } : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SliderComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SliderComponent, isStandalone: true, selector: "ui-slider", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, sliderStart: { classPropertyName: "sliderStart", publicName: "sliderStart", isSignal: false, isRequired: false, transformFunction: null }, sliderEnd: { classPropertyName: "sliderEnd", publicName: "sliderEnd", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, showInputs: { classPropertyName: "showInputs", publicName: "showInputs", isSignal: false, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, useDecimal: { classPropertyName: "useDecimal", publicName: "useDecimal", isSignal: true, isRequired: false, transformFunction: null }, useThousandsSeparator: { classPropertyName: "useThousandsSeparator", publicName: "useThousandsSeparator", isSignal: true, isRequired: false, transformFunction: null }, minLabel: { classPropertyName: "minLabel", publicName: "minLabel", isSignal: true, isRequired: false, transformFunction: null }, maxLabel: { classPropertyName: "maxLabel", publicName: "maxLabel", isSignal: true, isRequired: false, transformFunction: null }, inputWidth: { classPropertyName: "inputWidth", publicName: "inputWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sliderValueChange: "sliderValueChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SliderComponent, isStandalone: true, selector: "ui-slider", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, sliderStart: { classPropertyName: "sliderStart", publicName: "sliderStart", isSignal: false, isRequired: false, transformFunction: null }, sliderEnd: { classPropertyName: "sliderEnd", publicName: "sliderEnd", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, showInputs: { classPropertyName: "showInputs", publicName: "showInputs", isSignal: false, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, useDecimal: { classPropertyName: "useDecimal", publicName: "useDecimal", isSignal: true, isRequired: false, transformFunction: null }, useThousandsSeparator: { classPropertyName: "useThousandsSeparator", publicName: "useThousandsSeparator", isSignal: true, isRequired: false, transformFunction: null }, minLabel: { classPropertyName: "minLabel", publicName: "minLabel", isSignal: true, isRequired: false, transformFunction: null }, maxLabel: { classPropertyName: "maxLabel", publicName: "maxLabel", isSignal: true, isRequired: false, transformFunction: null }, inputWidth: { classPropertyName: "inputWidth", publicName: "inputWidth", isSignal: true, isRequired: false, transformFunction: null }, showValueBubble: { classPropertyName: "showValueBubble", publicName: "showValueBubble", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sliderValueChange: "sliderValueChange", dragStart: "dragStart", dragEnd: "dragEnd" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SliderComponent),
@@ -208,7 +243,7 @@ class SliderComponent {
             },
             provideNgxMask(),
             DecimalPipe,
-        ], ngImport: i0, template: "<ng-container>\n  <div\n    class=\"slider-container\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n  >\n    @if (label) {\n      <div class=\"slider-label\">{{ label }}</div>\n    }\n\n    <div class=\"slider\">\n      @if (!isBasicSlider) {\n        <div class=\"min-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ min | number }}\n            } @else {\n              {{ min }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n      <mat-slider\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        #sliderElement\n        discrete\n        [disabled]=\"disabled\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [step]=\"step\"\n        (mouseenter)=\"sliderElement.discrete = true\"\n        (mouseleave)=\"sliderElement.discrete = false\"\n        [displayWith]=\"formatLabel\"\n      >\n        @if (isBasicSlider) {\n          <input\n            data-testid=\"slider-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange($event)\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderThumb\n          />\n        } @else {\n          <input\n            data-testid=\"slider-start-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderStartThumb\n          />\n          <input\n            data-testid=\"slider-end-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderEnd\"\n            matSliderEndThumb\n          />\n        }\n      </mat-slider>\n      @if (!isBasicSlider) {\n        <div class=\"max-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ max | number }}\n            } @else {\n              {{ max }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (showInputs && !isBasicSlider) {\n      <div class=\"slider-input\">\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (minLabel()) {\n            <mat-label>\n              {{ minLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MIN' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              data-testid=\"slider.input-start\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              data-testid=\"slider.input-start\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          }\n        </mat-form-field>\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (maxLabel()) {\n            <mat-label>\n              {{ maxLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MAX' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              data-testid=\"slider.input-end\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n              data-testid=\"slider.input-end\"\n            />\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    @if (hasError && touchedControlName) {\n      <mat-error class=\"slider-errors\">\n        @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (sliderStart < min) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n          </div>\n        }\n        @if (sliderEnd > max) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n          </div>\n        }\n      </mat-error>\n    }\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep mat-form-field .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}:host ::ng-deep mat-form-field .mdc-floating-label--float-above{transform:translateY(-28px) scale(.75)!important}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#e02800!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#e02800!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:auto;margin-right:8px;white-space:nowrap}::ng-deep .slider-container .slider .max-value{width:auto;margin-left:8px;white-space:nowrap}::ng-deep .slider-container .slider-errors{margin-top:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between}::ng-deep .slider-container .slider-input mat-form-field{min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#e02800}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #d410aa;--mdc-slider-handle-color: #d410aa;--mdc-slider-focus-handle-color: #d410aa;--mdc-slider-hover-handle-color: #d410aa;--mdc-slider-inactive-track-color: #d3d3d3;--mdc-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-mdc-slider-ripple-color: #d410aa;--mat-slider-active-track-color: #d410aa;--mat-slider-handle-color: #d410aa;--mat-slider-focus-handle-color: #d410aa;--mat-slider-hover-handle-color: #d410aa;--mat-slider-inactive-track-color: #d3d3d3;--mat-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-slider-ripple-color: #d410aa;--mat-slider-hover-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-focus-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-label-container-color: #242424;--mat-slider-label-label-text-color: #ffffff;height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple{background-color:#ffb3ee8f}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i2.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i5.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<ng-container>\n  <div\n    class=\"slider-container\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n  >\n    @if (label) {\n      <div class=\"slider-label\">{{ label }}</div>\n    }\n\n    <div class=\"slider\">\n      @if (!isBasicSlider) {\n        <div class=\"min-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ min | number }}\n            } @else {\n              {{ min }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n      <mat-slider\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [discrete]=\"isDiscrete()\"\n        [disabled]=\"disabled\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [step]=\"step\"\n        (mouseenter)=\"onSliderHover(true)\"\n        (mouseleave)=\"onSliderHover(false)\"\n        [displayWith]=\"formatLabel\"\n      >\n        @if (isBasicSlider) {\n          <input\n            data-testid=\"slider-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange($event)\"\n            (dragStart)=\"onDragStart($event)\"\n            (dragEnd)=\"onDragEnd($event)\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderThumb\n          />\n        } @else {\n          <input\n            data-testid=\"slider-start-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderStartThumb\n          />\n          <input\n            data-testid=\"slider-end-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderEnd\"\n            matSliderEndThumb\n          />\n        }\n      </mat-slider>\n      @if (!isBasicSlider) {\n        <div class=\"max-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ max | number }}\n            } @else {\n              {{ max }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (showInputs && !isBasicSlider) {\n      <div class=\"slider-input\">\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (minLabel()) {\n            <mat-label>\n              {{ minLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MIN' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              data-testid=\"slider.input-start\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              data-testid=\"slider.input-start\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          }\n        </mat-form-field>\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (maxLabel()) {\n            <mat-label>\n              {{ maxLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MAX' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              data-testid=\"slider.input-end\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n              data-testid=\"slider.input-end\"\n            />\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    @if (hasError && touchedControlName) {\n      <mat-error class=\"slider-errors\">\n        @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (sliderStart < min) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n          </div>\n        }\n        @if (sliderEnd > max) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n          </div>\n        }\n      </mat-error>\n    }\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep mat-form-field .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}:host ::ng-deep mat-form-field .mdc-floating-label--float-above{transform:translateY(-28px) scale(.75)!important}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#e02800!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#e02800!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:auto;margin-right:8px;white-space:nowrap}::ng-deep .slider-container .slider .max-value{width:auto;margin-left:8px;white-space:nowrap}::ng-deep .slider-container .slider-errors{margin-top:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between}::ng-deep .slider-container .slider-input mat-form-field{min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#e02800}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #d410aa;--mdc-slider-handle-color: #d410aa;--mdc-slider-focus-handle-color: #d410aa;--mdc-slider-hover-handle-color: #d410aa;--mdc-slider-inactive-track-color: #d3d3d3;--mdc-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-mdc-slider-ripple-color: #d410aa;--mat-slider-active-track-color: #d410aa;--mat-slider-handle-color: #d410aa;--mat-slider-focus-handle-color: #d410aa;--mat-slider-hover-handle-color: #d410aa;--mat-slider-inactive-track-color: #d3d3d3;--mat-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-slider-ripple-color: #d410aa;--mat-slider-hover-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-focus-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-label-container-color: #242424;--mat-slider-label-label-text-color: #ffffff;height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple{background-color:#ffb3ee8f}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i2.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i5.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -234,7 +269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         IconComponentModule,
                         UiTranslatePipe,
                         NgxMaskDirective,
-                    ], template: "<ng-container>\n  <div\n    class=\"slider-container\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n  >\n    @if (label) {\n      <div class=\"slider-label\">{{ label }}</div>\n    }\n\n    <div class=\"slider\">\n      @if (!isBasicSlider) {\n        <div class=\"min-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ min | number }}\n            } @else {\n              {{ min }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n      <mat-slider\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        #sliderElement\n        discrete\n        [disabled]=\"disabled\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [step]=\"step\"\n        (mouseenter)=\"sliderElement.discrete = true\"\n        (mouseleave)=\"sliderElement.discrete = false\"\n        [displayWith]=\"formatLabel\"\n      >\n        @if (isBasicSlider) {\n          <input\n            data-testid=\"slider-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange($event)\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderThumb\n          />\n        } @else {\n          <input\n            data-testid=\"slider-start-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderStartThumb\n          />\n          <input\n            data-testid=\"slider-end-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderEnd\"\n            matSliderEndThumb\n          />\n        }\n      </mat-slider>\n      @if (!isBasicSlider) {\n        <div class=\"max-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ max | number }}\n            } @else {\n              {{ max }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (showInputs && !isBasicSlider) {\n      <div class=\"slider-input\">\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (minLabel()) {\n            <mat-label>\n              {{ minLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MIN' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              data-testid=\"slider.input-start\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              data-testid=\"slider.input-start\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          }\n        </mat-form-field>\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (maxLabel()) {\n            <mat-label>\n              {{ maxLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MAX' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              data-testid=\"slider.input-end\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n              data-testid=\"slider.input-end\"\n            />\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    @if (hasError && touchedControlName) {\n      <mat-error class=\"slider-errors\">\n        @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (sliderStart < min) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n          </div>\n        }\n        @if (sliderEnd > max) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n          </div>\n        }\n      </mat-error>\n    }\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep mat-form-field .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}:host ::ng-deep mat-form-field .mdc-floating-label--float-above{transform:translateY(-28px) scale(.75)!important}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#e02800!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#e02800!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:auto;margin-right:8px;white-space:nowrap}::ng-deep .slider-container .slider .max-value{width:auto;margin-left:8px;white-space:nowrap}::ng-deep .slider-container .slider-errors{margin-top:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between}::ng-deep .slider-container .slider-input mat-form-field{min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#e02800}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #d410aa;--mdc-slider-handle-color: #d410aa;--mdc-slider-focus-handle-color: #d410aa;--mdc-slider-hover-handle-color: #d410aa;--mdc-slider-inactive-track-color: #d3d3d3;--mdc-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-mdc-slider-ripple-color: #d410aa;--mat-slider-active-track-color: #d410aa;--mat-slider-handle-color: #d410aa;--mat-slider-focus-handle-color: #d410aa;--mat-slider-hover-handle-color: #d410aa;--mat-slider-inactive-track-color: #d3d3d3;--mat-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-slider-ripple-color: #d410aa;--mat-slider-hover-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-focus-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-label-container-color: #242424;--mat-slider-label-label-text-color: #ffffff;height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple{background-color:#ffb3ee8f}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"] }]
+                    ], template: "<ng-container>\n  <div\n    class=\"slider-container\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n  >\n    @if (label) {\n      <div class=\"slider-label\">{{ label }}</div>\n    }\n\n    <div class=\"slider\">\n      @if (!isBasicSlider) {\n        <div class=\"min-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ min | number }}\n            } @else {\n              {{ min }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n      <mat-slider\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [discrete]=\"isDiscrete()\"\n        [disabled]=\"disabled\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [step]=\"step\"\n        (mouseenter)=\"onSliderHover(true)\"\n        (mouseleave)=\"onSliderHover(false)\"\n        [displayWith]=\"formatLabel\"\n      >\n        @if (isBasicSlider) {\n          <input\n            data-testid=\"slider-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange($event)\"\n            (dragStart)=\"onDragStart($event)\"\n            (dragEnd)=\"onDragEnd($event)\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderThumb\n          />\n        } @else {\n          <input\n            data-testid=\"slider-start-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderStartThumb\n          />\n          <input\n            data-testid=\"slider-end-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderEnd\"\n            matSliderEndThumb\n          />\n        }\n      </mat-slider>\n      @if (!isBasicSlider) {\n        <div class=\"max-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ max | number }}\n            } @else {\n              {{ max }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (showInputs && !isBasicSlider) {\n      <div class=\"slider-input\">\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (minLabel()) {\n            <mat-label>\n              {{ minLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MIN' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              data-testid=\"slider.input-start\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              data-testid=\"slider.input-start\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          }\n        </mat-form-field>\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (maxLabel()) {\n            <mat-label>\n              {{ maxLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MAX' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              data-testid=\"slider.input-end\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n              data-testid=\"slider.input-end\"\n            />\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    @if (hasError && touchedControlName) {\n      <mat-error class=\"slider-errors\">\n        @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (sliderStart < min) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n          </div>\n        }\n        @if (sliderEnd > max) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n          </div>\n        }\n      </mat-error>\n    }\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep mat-form-field .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}:host ::ng-deep mat-form-field .mdc-floating-label--float-above{transform:translateY(-28px) scale(.75)!important}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#e02800!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#e02800!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:auto;margin-right:8px;white-space:nowrap}::ng-deep .slider-container .slider .max-value{width:auto;margin-left:8px;white-space:nowrap}::ng-deep .slider-container .slider-errors{margin-top:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between}::ng-deep .slider-container .slider-input mat-form-field{min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#e02800}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #d410aa;--mdc-slider-handle-color: #d410aa;--mdc-slider-focus-handle-color: #d410aa;--mdc-slider-hover-handle-color: #d410aa;--mdc-slider-inactive-track-color: #d3d3d3;--mdc-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-mdc-slider-ripple-color: #d410aa;--mat-slider-active-track-color: #d410aa;--mat-slider-handle-color: #d410aa;--mat-slider-focus-handle-color: #d410aa;--mat-slider-hover-handle-color: #d410aa;--mat-slider-inactive-track-color: #d3d3d3;--mat-slider-with-tick-marks-inactive-container-color: #d410aa;--mat-slider-ripple-color: #d410aa;--mat-slider-hover-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-focus-state-layer-color: rgba(255, 179, 238, .56);--mat-slider-label-container-color: #242424;--mat-slider-label-label-text-color: #ffffff;height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple{background-color:#ffb3ee8f}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -262,9 +297,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], variant: [{
                 type: Input
-            }], useDecimal: [{ type: i0.Input, args: [{ isSignal: true, alias: "useDecimal", required: false }] }], useThousandsSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "useThousandsSeparator", required: false }] }], minLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLabel", required: false }] }], maxLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLabel", required: false }] }], inputWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputWidth", required: false }] }], sliderValueChange: [{
+            }], useDecimal: [{ type: i0.Input, args: [{ isSignal: true, alias: "useDecimal", required: false }] }], useThousandsSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "useThousandsSeparator", required: false }] }], minLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLabel", required: false }] }], maxLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLabel", required: false }] }], inputWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputWidth", required: false }] }], showValueBubble: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueBubble", required: false }] }], sliderValueChange: [{
                 type: Output
-            }] } });
+            }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }] } });
 
 class SliderComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SliderComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }

package/fesm2022/testgorilla-tgo-ui-components-slider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-slider.mjs","sources":["../../../components/slider/slider.component.ts","../../../components/slider/slider.component.html","../../../components/slider/slider.component.module.ts","../../../components/slider/testgorilla-tgo-ui-components-slider.ts"],"sourcesContent":["import { CommonModule, DecimalPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  forwardRef,\n  inject,\n  Inject,\n  input,\n  Input,\n  Optional,\n  Output,\n} from '@angular/core';\nimport {\n  AbstractControl,\n  FormsModule,\n  NG_VALIDATORS,\n  NG_VALUE_ACCESSOR,\n  ValidationErrors,\n  Validator,\n} from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSliderModule } from '@angular/material/slider';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { NgxMaskDirective, provideNgxMask } from 'ngx-mask';\n\nimport { ApplicationTheme, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { SliderValue, SliderVariant } from './slider.model';\n\n@Component({\n  selector: 'ui-slider',\n  templateUrl: './slider.component.html',\n  styleUrls: ['./slider.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SliderComponent),\n      multi: true,\n    },\n    {\n      provide: NG_VALIDATORS,\n      useExisting: forwardRef(() => SliderComponent),\n      multi: true,\n    },\n    provideNgxMask(),\n    DecimalPipe,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    CommonModule,\n    MatSliderModule,\n    FormsModule,\n    MatInputModule,\n    MatTooltipModule,\n    IconComponentModule,\n    UiTranslatePipe,\n    NgxMaskDirective,\n  ],\n})\nexport class SliderComponent implements Validator {\n  /**\n   * The maximum value of the slider.\n   *\n   * @type {number}\n   * @default 100\n   */\n  @Input() max = 100;\n\n  /**\n   * The minimum value of the slider.\n   *\n   * @type {number}\n   * @default 0\n   */\n  @Input() min = 0;\n\n  /**\n   * A flag indicating whether the slider displays values as percentages.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() percentage = false;\n\n  /**\n   * A flag indicating whether the slider is disabled.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() disabled = false;\n\n  /**\n   * The starting value of the slider.\n   *\n   * @type {number}\n   * @default 0\n   */\n  @Input() sliderStart = 0;\n\n  /**\n   * The ending value of the slider.\n   *\n   * @type {number}\n   * @default 100\n   */\n  @Input() sliderEnd = 100;\n\n  /**\n   * The label for the slider.\n   *\n   * @type {string}\n   * @default ''\n   */\n  @Input() label = '';\n\n  /**\n   * Show slider inputs.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() showInputs = true;\n\n  /**\n   * Step number.\n   *\n   * @type {number}\n   * @default 1\n   */\n  @Input() step = 1;\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof SliderComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   *\n   * Defines the variant slider\n   *\n   * @type {SliderVariant}\n   * @memberof SliderComponent\n   */\n  @Input() variant: SliderVariant = 'range';\n\n  /**\n   * Controls whether decimal values are allowed in the input fields.\n   * When true, inputs accept decimal numbers (up to 2 decimal places).\n   * When false, inputs only accept whole numbers.\n   */\n  useDecimal = input<boolean>(false);\n\n  /**\n   * Controls whether numbers are displayed with thousands separators.\n   * When true, displays numbers like \"100,000\" instead of \"100000\".\n   * This is independent of useDecimal - you can have thousands separators\n   * without decimals, or decimals without thousands separators.\n   */\n  useThousandsSeparator = input<boolean>(false);\n\n  minLabel = input<string>();\n\n  maxLabel = input<string>();\n\n  inputWidth = input(80);\n\n  @Output() sliderValueChange = new EventEmitter<SliderValue>();\n\n  cdr = inject(ChangeDetectorRef);\n  decimalPipe = inject(DecimalPipe);\n  private control?: AbstractControl;\n\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n  ) {\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n      this.cdr.markForCheck();\n    }\n    this.formatLabel = this.formatLabel.bind(this);\n  }\n\n  private value: SliderValue = { start: 0, end: 100 };\n  protected translationContext = 'SLIDER.';\n  protected touchedControlName = '';\n\n  onChange: (value: SliderValue) => void = () => {};\n  onTouch: () => void = () => {};\n\n  registerOnChange(fn: (value: SliderValue) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouch = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  writeValue(value: SliderValue): void {\n    this.value = value;\n    this.sliderEnd = value.end;\n    this.cdr.markForCheck();\n    // Update sliderStart in a separate detection cycle to ensure proper rendering o mat-slider\n    setTimeout(() => {\n      this.sliderStart = value.start;\n      this.cdr.markForCheck();\n      if (this.control) {\n        this.control.updateValueAndValidity({ emitEvent: false });\n      }\n    });\n  }\n\n  protected onValueChange(ev?: number): void {\n    const value: SliderValue = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };\n\n    if (ev) {\n      value.start = ev;\n      value.end = 0;\n    }\n\n    this.value = value;\n    this.onChange(value);\n    this.sliderValueChange.emit(value);\n    this.cdr.markForCheck();\n    this.onTouch();\n  }\n\n  protected onInputBlur(inputName: string): void {\n    this.touchedControlName = inputName;\n    const value: SliderValue = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };\n\n    if (this.isValueChanged(value)) {\n      this.onValueChange();\n    }\n  }\n\n  protected onInputFocus(): void {\n    this.touchedControlName = '';\n    this.cdr.markForCheck();\n  }\n\n  private isValueChanged(value: SliderValue): boolean {\n    return this.value.start !== value.start || this.value.end !== value.end;\n  }\n\n  get hasError(): boolean {\n    return (\n      this.max < Number(this.sliderEnd) ||\n      this.min > Number(this.sliderStart) ||\n      this.min > Number(this.sliderEnd) ||\n      this.max < Number(this.sliderStart) ||\n      Number(this.sliderEnd) < Number(this.sliderStart)\n    );\n  }\n\n  get isBasicSlider(): boolean {\n    return this.variant === 'basic';\n  }\n\n  formatLabel(value: number): string {\n    return this.useThousandsSeparator()\n      ? (this.decimalPipe.transform(value, '1.0-0') ?? value.toString())\n      : value.toString();\n  }\n\n  validate(control: AbstractControl): ValidationErrors | null {\n    this.control = control;\n    return this.hasError && this.touchedControlName ? { invalidSlider: true } : null;\n  }\n}\n","<ng-container>\n  <div\n    class=\"slider-container\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n  >\n    @if (label) {\n      <div class=\"slider-label\">{{ label }}</div>\n    }\n\n    <div class=\"slider\">\n      @if (!isBasicSlider) {\n        <div class=\"min-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ min | number }}\n            } @else {\n              {{ min }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n      <mat-slider\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        #sliderElement\n        discrete\n        [disabled]=\"disabled\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [step]=\"step\"\n        (mouseenter)=\"sliderElement.discrete = true\"\n        (mouseleave)=\"sliderElement.discrete = false\"\n        [displayWith]=\"formatLabel\"\n      >\n        @if (isBasicSlider) {\n          <input\n            data-testid=\"slider-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange($event)\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderThumb\n          />\n        } @else {\n          <input\n            data-testid=\"slider-start-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderStartThumb\n          />\n          <input\n            data-testid=\"slider-end-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderEnd\"\n            matSliderEndThumb\n          />\n        }\n      </mat-slider>\n      @if (!isBasicSlider) {\n        <div class=\"max-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ max | number }}\n            } @else {\n              {{ max }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (showInputs && !isBasicSlider) {\n      <div class=\"slider-input\">\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (minLabel()) {\n            <mat-label>\n              {{ minLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MIN' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              data-testid=\"slider.input-start\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              data-testid=\"slider.input-start\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          }\n        </mat-form-field>\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (maxLabel()) {\n            <mat-label>\n              {{ maxLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MAX' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              data-testid=\"slider.input-end\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n              data-testid=\"slider.input-end\"\n            />\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    @if (hasError && touchedControlName) {\n      <mat-error class=\"slider-errors\">\n        @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (sliderStart < min) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n          </div>\n        }\n        @if (sliderEnd > max) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n          </div>\n        }\n      </mat-error>\n    }\n  </div>\n</ng-container>\n","import { NgModule } from '@angular/core';\n\nimport { SliderComponent } from './slider.component';\n\n@NgModule({\n  imports: [SliderComponent],\n  exports: [SliderComponent],\n})\nexport class SliderComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"testgorilla-tgo-ui-components-slider.mjs","sources":["../../../components/slider/slider.component.ts","../../../components/slider/slider.component.html","../../../components/slider/slider.component.module.ts","../../../components/slider/testgorilla-tgo-ui-components-slider.ts"],"sourcesContent":["import { CommonModule, DecimalPipe } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  computed,\n  EventEmitter,\n  forwardRef,\n  inject,\n  Inject,\n  input,\n  Input,\n  Optional,\n  output,\n  Output,\n  signal,\n} from '@angular/core';\nimport {\n  AbstractControl,\n  FormsModule,\n  NG_VALIDATORS,\n  NG_VALUE_ACCESSOR,\n  ValidationErrors,\n  Validator,\n} from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSliderDragEvent, MatSliderModule } from '@angular/material/slider';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { NgxMaskDirective, provideNgxMask } from 'ngx-mask';\n\nimport { ApplicationTheme, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { SliderValue, SliderVariant } from './slider.model';\n\n@Component({\n  selector: 'ui-slider',\n  templateUrl: './slider.component.html',\n  styleUrls: ['./slider.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SliderComponent),\n      multi: true,\n    },\n    {\n      provide: NG_VALIDATORS,\n      useExisting: forwardRef(() => SliderComponent),\n      multi: true,\n    },\n    provideNgxMask(),\n    DecimalPipe,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    CommonModule,\n    MatSliderModule,\n    FormsModule,\n    MatInputModule,\n    MatTooltipModule,\n    IconComponentModule,\n    UiTranslatePipe,\n    NgxMaskDirective,\n  ],\n})\nexport class SliderComponent implements Validator {\n  /**\n   * The maximum value of the slider.\n   *\n   * @type {number}\n   * @default 100\n   */\n  @Input() max = 100;\n\n  /**\n   * The minimum value of the slider.\n   *\n   * @type {number}\n   * @default 0\n   */\n  @Input() min = 0;\n\n  /**\n   * A flag indicating whether the slider displays values as percentages.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() percentage = false;\n\n  /**\n   * A flag indicating whether the slider is disabled.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() disabled = false;\n\n  /**\n   * The starting value of the slider.\n   *\n   * @type {number}\n   * @default 0\n   */\n  @Input() sliderStart = 0;\n\n  /**\n   * The ending value of the slider.\n   *\n   * @type {number}\n   * @default 100\n   */\n  @Input() sliderEnd = 100;\n\n  /**\n   * The label for the slider.\n   *\n   * @type {string}\n   * @default ''\n   */\n  @Input() label = '';\n\n  /**\n   * Show slider inputs.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() showInputs = true;\n\n  /**\n   * Step number.\n   *\n   * @type {number}\n   * @default 1\n   */\n  @Input() step = 1;\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof SliderComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   *\n   * Defines the variant slider\n   *\n   * @type {SliderVariant}\n   * @memberof SliderComponent\n   */\n  @Input() variant: SliderVariant = 'range';\n\n  /**\n   * Controls whether decimal values are allowed in the input fields.\n   * When true, inputs accept decimal numbers (up to 2 decimal places).\n   * When false, inputs only accept whole numbers.\n   */\n  useDecimal = input<boolean>(false);\n\n  /**\n   * Controls whether numbers are displayed with thousands separators.\n   * When true, displays numbers like \"100,000\" instead of \"100000\".\n   * This is independent of useDecimal - you can have thousands separators\n   * without decimals, or decimals without thousands separators.\n   */\n  useThousandsSeparator = input<boolean>(false);\n\n  minLabel = input<string>();\n\n  maxLabel = input<string>();\n\n  inputWidth = input(80);\n\n  /**\n   * Controls whether the value bubble pops above the thumb on hover and while dragging.\n   * Set it to false for scrubber-style sliders whose designs do not show one.\n   * Applies to both the basic and the range variant.\n   */\n  showValueBubble = input(true, { transform: booleanAttribute });\n\n  @Output() sliderValueChange = new EventEmitter<SliderValue>();\n\n  /**\n   * Emitted with the current value when the user starts dragging the thumb.\n   * Basic variant only, and never emitted for programmatic value writes, so a consumer\n   * that also drives the slider on a timer can tell a user drag apart from its own write.\n   */\n  dragStart = output<number>();\n\n  /**\n   * Emitted with the released value when the user stops dragging the thumb.\n   * Basic variant only. See {@link dragStart}.\n   */\n  dragEnd = output<number>();\n\n  /**\n   * Tracks hover, so the value bubble markup is only mounted while the pointer is over the slider.\n   * Starts true to keep the at-rest markup identical to what the component shipped before\n   * `showValueBubble` existed: Material leaves the bubble invisible until the thumb is active, and\n   * unmounting it changes how the disabled slider's opacity layer rasterises its text.\n   */\n  private readonly isHovered = signal(true);\n\n  /** Material renders the value bubble only while `discrete` is set, so gate it on both hover and the input. */\n  protected readonly isDiscrete = computed(() => this.showValueBubble() && this.isHovered());\n\n  cdr = inject(ChangeDetectorRef);\n  decimalPipe = inject(DecimalPipe);\n  private control?: AbstractControl;\n\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n  ) {\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n      this.cdr.markForCheck();\n    }\n    this.formatLabel = this.formatLabel.bind(this);\n  }\n\n  private value: SliderValue = { start: 0, end: 100 };\n  protected translationContext = 'SLIDER.';\n  protected touchedControlName = '';\n\n  onChange: (value: SliderValue) => void = () => {};\n  onTouch: () => void = () => {};\n\n  registerOnChange(fn: (value: SliderValue) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouch = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  writeValue(value: SliderValue): void {\n    this.value = value;\n    this.sliderEnd = value.end;\n    this.cdr.markForCheck();\n    // Update sliderStart in a separate detection cycle to ensure proper rendering o mat-slider\n    setTimeout(() => {\n      this.sliderStart = value.start;\n      this.cdr.markForCheck();\n      if (this.control) {\n        this.control.updateValueAndValidity({ emitEvent: false });\n      }\n    });\n  }\n\n  protected onValueChange(ev?: number): void {\n    const value: SliderValue = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };\n\n    if (ev) {\n      value.start = ev;\n      value.end = 0;\n    }\n\n    this.value = value;\n    this.onChange(value);\n    this.sliderValueChange.emit(value);\n    this.cdr.markForCheck();\n    this.onTouch();\n  }\n\n  protected onSliderHover(isHovered: boolean): void {\n    this.isHovered.set(isHovered);\n  }\n\n  protected onDragStart(event: MatSliderDragEvent): void {\n    this.dragStart.emit(event.value);\n  }\n\n  protected onDragEnd(event: MatSliderDragEvent): void {\n    this.dragEnd.emit(event.value);\n  }\n\n  protected onInputBlur(inputName: string): void {\n    this.touchedControlName = inputName;\n    const value: SliderValue = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };\n\n    if (this.isValueChanged(value)) {\n      this.onValueChange();\n    }\n  }\n\n  protected onInputFocus(): void {\n    this.touchedControlName = '';\n    this.cdr.markForCheck();\n  }\n\n  private isValueChanged(value: SliderValue): boolean {\n    return this.value.start !== value.start || this.value.end !== value.end;\n  }\n\n  get hasError(): boolean {\n    return (\n      this.max < Number(this.sliderEnd) ||\n      this.min > Number(this.sliderStart) ||\n      this.min > Number(this.sliderEnd) ||\n      this.max < Number(this.sliderStart) ||\n      Number(this.sliderEnd) < Number(this.sliderStart)\n    );\n  }\n\n  get isBasicSlider(): boolean {\n    return this.variant === 'basic';\n  }\n\n  formatLabel(value: number): string {\n    return this.useThousandsSeparator()\n      ? (this.decimalPipe.transform(value, '1.0-0') ?? value.toString())\n      : value.toString();\n  }\n\n  validate(control: AbstractControl): ValidationErrors | null {\n    this.control = control;\n    return this.hasError && this.touchedControlName ? { invalidSlider: true } : null;\n  }\n}\n","<ng-container>\n  <div\n    class=\"slider-container\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n  >\n    @if (label) {\n      <div class=\"slider-label\">{{ label }}</div>\n    }\n\n    <div class=\"slider\">\n      @if (!isBasicSlider) {\n        <div class=\"min-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ min | number }}\n            } @else {\n              {{ min }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n      <mat-slider\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [discrete]=\"isDiscrete()\"\n        [disabled]=\"disabled\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [step]=\"step\"\n        (mouseenter)=\"onSliderHover(true)\"\n        (mouseleave)=\"onSliderHover(false)\"\n        [displayWith]=\"formatLabel\"\n      >\n        @if (isBasicSlider) {\n          <input\n            data-testid=\"slider-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange($event)\"\n            (dragStart)=\"onDragStart($event)\"\n            (dragEnd)=\"onDragEnd($event)\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderThumb\n          />\n        } @else {\n          <input\n            data-testid=\"slider-start-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderStartThumb\n          />\n          <input\n            data-testid=\"slider-end-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderEnd\"\n            matSliderEndThumb\n          />\n        }\n      </mat-slider>\n      @if (!isBasicSlider) {\n        <div class=\"max-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ max | number }}\n            } @else {\n              {{ max }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (showInputs && !isBasicSlider) {\n      <div class=\"slider-input\">\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (minLabel()) {\n            <mat-label>\n              {{ minLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MIN' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              data-testid=\"slider.input-start\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              data-testid=\"slider.input-start\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          }\n        </mat-form-field>\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (maxLabel()) {\n            <mat-label>\n              {{ maxLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MAX' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              data-testid=\"slider.input-end\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n              data-testid=\"slider.input-end\"\n            />\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    @if (hasError && touchedControlName) {\n      <mat-error class=\"slider-errors\">\n        @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (sliderStart < min) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n          </div>\n        }\n        @if (sliderEnd > max) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n          </div>\n        }\n      </mat-error>\n    }\n  </div>\n</ng-container>\n","import { NgModule } from '@angular/core';\n\nimport { SliderComponent } from './slider.component';\n\n@NgModule({\n  imports: [SliderComponent],\n  exports: [SliderComponent],\n})\nexport class SliderComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}