@testgorilla/tgo-ui 4.1.2-beta → 4.1.3-beta

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

@@ -0,0 +1,274 @@
+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 * as i3 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import * as i4 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i2 from '@angular/material/slider';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
+import { UiTranslatePipe, DigitsOnlyDirective } from '@testgorilla/tgo-ui/components/core';
+import * as i5 from '@testgorilla/tgo-ui/components/icon';
+import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
+
+class SliderComponent {
+    constructor(defaultAppTheme) {
+        this.defaultAppTheme = defaultAppTheme;
+        /**
+         * The maximum value of the slider.
+         *
+         * @type {number}
+         * @default 100
+         */
+        this.max = 100;
+        /**
+         * The minimum value of the slider.
+         *
+         * @type {number}
+         * @default 0
+         */
+        this.min = 0;
+        /**
+         * A flag indicating whether the slider displays values as percentages.
+         *
+         * @type {boolean}
+         * @default true
+         */
+        this.percentage = false;
+        /**
+         * A flag indicating whether the slider is disabled.
+         *
+         * @type {boolean}
+         * @default true
+         */
+        this.disabled = false;
+        /**
+         * The starting value of the slider.
+         *
+         * @type {number}
+         * @default 0
+         */
+        this.sliderStart = 0;
+        /**
+         * The ending value of the slider.
+         *
+         * @type {number}
+         * @default 100
+         */
+        this.sliderEnd = 100;
+        /**
+         * The label for the slider.
+         *
+         * @type {string}
+         * @default ''
+         */
+        this.label = '';
+        /**
+         * Show slider inputs.
+         *
+         * @type {boolean}
+         * @default true
+         */
+        this.showInputs = true;
+        /**
+         * Step number.
+         *
+         * @type {number}
+         * @default 1
+         */
+        this.step = 1;
+        /**
+         *
+         * Defines the application theme
+         *
+         * @type {ApplicationTheme}
+         * @memberof SliderComponent
+         */
+        this.applicationTheme = 'light';
+        /**
+         *
+         * Defines the variant slider
+         *
+         * @type {SliderVariant}
+         * @memberof SliderComponent
+         */
+        this.variant = 'range';
+        this.useDecimal = input(false);
+        this.minLabel = input();
+        this.maxLabel = input();
+        this.inputWidth = input(80);
+        this.sliderValueChange = new EventEmitter();
+        this.cdr = inject(ChangeDetectorRef);
+        this.decimalPipe = inject(DecimalPipe);
+        this.value = { start: 0, end: 100 };
+        this.translationContext = 'SLIDER.';
+        this.touchedControlName = '';
+        this.onChange = () => { };
+        this.onTouch = () => { };
+        if (defaultAppTheme) {
+            this.applicationTheme = defaultAppTheme;
+            this.cdr.markForCheck();
+        }
+        this.formatLabel = this.formatLabel.bind(this);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    writeValue(value) {
+        this.value = value;
+        this.sliderEnd = value.end;
+        this.cdr.markForCheck();
+        // Update sliderStart in a separate detection cycle to ensure proper rendering o mat-slider
+        setTimeout(() => {
+            this.sliderStart = value.start;
+            this.cdr.markForCheck();
+            if (this.control) {
+                this.control.updateValueAndValidity();
+            }
+        });
+    }
+    onValueChange(ev) {
+        const value = { start: +this.sliderStart, end: +this.sliderEnd };
+        if (ev) {
+            value.start = ev;
+            value.end = 0;
+        }
+        this.value = value;
+        this.onChange(value);
+        this.sliderValueChange.emit(value);
+        this.cdr.markForCheck();
+        this.onTouch();
+    }
+    onInputBlur(inputName) {
+        this.touchedControlName = inputName;
+        const value = { start: +this.sliderStart, end: +this.sliderEnd };
+        if (this.isValueChanged(value)) {
+            this.onValueChange();
+        }
+    }
+    onInputFocus() {
+        this.touchedControlName = '';
+        this.cdr.markForCheck();
+    }
+    isValueChanged(value) {
+        return this.value.start !== value.start || this.value.end !== value.end;
+    }
+    get hasError() {
+        return (this.max < +this.sliderEnd ||
+            this.min > +this.sliderStart ||
+            this.min > +this.sliderEnd ||
+            this.max < +this.sliderStart ||
+            +this.sliderEnd < +this.sliderStart);
+    }
+    get isBasicSlider() {
+        return this.variant === 'basic';
+    }
+    formatLabel(value) {
+        return this.useDecimal() ? this.decimalPipe.transform(value, '1.0-0') || value.toString() : value.toString();
+    }
+    validate(control) {
+        this.control = control;
+        return this.hasError && this.touchedControlName ? { invalidSlider: true } : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", 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: "19.2.17", 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 }, 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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SliderComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => SliderComponent),
+                multi: true,
+            },
+            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 (useDecimal()) {\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 [disabled]=\"disabled\" (valueChange)=\"onValueChange($event)\" [(ngModel)]=\"sliderStart\" matSliderThumb />\n        } @else {\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderStart\" matSliderStartThumb />\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderEnd\" matSliderEndThumb />\n        }\n      </mat-slider>\n      @if (!isBasicSlider) {\n        <div class=\"max-value\">\n          <span>\n            @if (useDecimal()) {\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              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=\",\"\n            />\n          } @else {\n            <input\n              matInput\n              [type]=\"'number'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              [allowOnlyDigits]=\"true\"\n              digitsOnly\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=\",\"\n            />\n          } @else {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'number'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              [allowOnlyDigits]=\"true\"\n              digitsOnly\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;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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { 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: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "directive", type: DigitsOnlyDirective, selector: "[digitsOnly]", inputs: ["allowNegative", "allowDecimal", "allowOnlyDigits"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-slider', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SliderComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => SliderComponent),
+                            multi: true,
+                        },
+                        provideNgxMask(),
+                        DecimalPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        MatSliderModule,
+                        FormsModule,
+                        MatInputModule,
+                        MatTooltipModule,
+                        IconComponentModule,
+                        UiTranslatePipe,
+                        DigitsOnlyDirective,
+                        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 (useDecimal()) {\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 [disabled]=\"disabled\" (valueChange)=\"onValueChange($event)\" [(ngModel)]=\"sliderStart\" matSliderThumb />\n        } @else {\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderStart\" matSliderStartThumb />\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderEnd\" matSliderEndThumb />\n        }\n      </mat-slider>\n      @if (!isBasicSlider) {\n        <div class=\"max-value\">\n          <span>\n            @if (useDecimal()) {\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              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=\",\"\n            />\n          } @else {\n            <input\n              matInput\n              [type]=\"'number'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              [allowOnlyDigits]=\"true\"\n              digitsOnly\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=\",\"\n            />\n          } @else {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'number'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              [allowOnlyDigits]=\"true\"\n              digitsOnly\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;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
+                }, {
+                    type: Inject,
+                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
+                }] }], propDecorators: { max: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], percentage: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], sliderStart: [{
+                type: Input
+            }], sliderEnd: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], showInputs: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], applicationTheme: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], sliderValueChange: [{
+                type: Output
+            }] } });
+
+class SliderComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SliderComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SliderComponentModule, imports: [SliderComponent], exports: [SliderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SliderComponentModule, imports: [SliderComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SliderComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SliderComponent],
+                    exports: [SliderComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SliderComponent, SliderComponentModule };
+//# sourceMappingURL=testgorilla-tgo-ui-components-slider.mjs.map

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

@@ -0,0 +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';\nimport { DigitsOnlyDirective } from '@testgorilla/tgo-ui/components/core';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\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        DigitsOnlyDirective,\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  useDecimal = 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();\n      }\n    });\n  }\n\n  protected onValueChange(ev?: number): void {\n    const value: SliderValue = { start: +this.sliderStart, end: +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: +this.sliderStart, end: +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 < +this.sliderEnd ||\n      this.min > +this.sliderStart ||\n      this.min > +this.sliderEnd ||\n      this.max < +this.sliderStart ||\n      +this.sliderEnd < +this.sliderStart\n    );\n  }\n\n  get isBasicSlider(): boolean {\n    return this.variant === 'basic';\n  }\n\n  formatLabel(value: number): string {\n    return this.useDecimal() ? this.decimalPipe.transform(value, '1.0-0') || value.toString() : 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 (useDecimal()) {\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 [disabled]=\"disabled\" (valueChange)=\"onValueChange($event)\" [(ngModel)]=\"sliderStart\" matSliderThumb />\n        } @else {\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderStart\" matSliderStartThumb />\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderEnd\" matSliderEndThumb />\n        }\n      </mat-slider>\n      @if (!isBasicSlider) {\n        <div class=\"max-value\">\n          <span>\n            @if (useDecimal()) {\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              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=\",\"\n            />\n          } @else {\n            <input\n              matInput\n              [type]=\"'number'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              [allowOnlyDigits]=\"true\"\n              digitsOnly\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=\",\"\n            />\n          } @else {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'number'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              [allowOnlyDigits]=\"true\"\n              digitsOnly\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';\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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"}

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

@@ -0,0 +1,108 @@
+import * as i0 from '@angular/core';
+import { Input, Optional, Inject, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { NgClass, NgIf, AsyncPipe } from '@angular/common';
+import * as i2 from '@testgorilla/tgo-ui/components/icon';
+import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
+import * as i3 from '@testgorilla/tgo-ui/components/core';
+import { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';
+
+class SpinnerComponent {
+    constructor(defaultAppTheme) {
+        this.defaultAppTheme = defaultAppTheme;
+        /**
+         * The size variant of the spinner. Can be 'small' or 'large'.
+         * Defaults to 'large'.
+         * @default 'large'
+         * @type {SpinnerSize}
+         * @memberof SpinnerComponent
+         */
+        this.size = 'large';
+        /**
+         * Set position fixed on page
+         * Defaults to 'true'.
+         * @default 'true'
+         * @type {SpinnerSize}
+         * @memberof SpinnerComponent
+         */
+        this.isLoader = true;
+        /**
+         * The text to display below the spinner.
+         * @type {string}
+         * @memberof SpinnerComponent
+         */
+        this.text = null;
+        /**
+         *
+         * Defines the application theme
+         *
+         * @type {ApplicationTheme}
+         * @memberof SpinnerComponent
+         */
+        this.applicationTheme = 'light';
+        /**
+         * Custom Icon size
+         *
+         * @type {IconSize}
+         * @memberof SpinnerComponent
+         */
+        this.iconSize = '24';
+        if (defaultAppTheme) {
+            this.applicationTheme = defaultAppTheme;
+        }
+    }
+    ngOnChanges() {
+        this.setSpinnerClasses();
+    }
+    ngOnInit() {
+        this.setSpinnerClasses();
+    }
+    setSpinnerClasses() {
+        this.classes = `${this.size === 'large' ? 'large' : 'small'} ${this.isLoader ? 'loader' : ''} ${this.text ? 'with-text' : ''} ${this.applicationTheme}`;
+        this.classes = this.classes.replace(/\s+/g, ' ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpinnerComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SpinnerComponent, isStandalone: false, selector: "ui-spinner", inputs: { size: "size", isLoader: "isLoader", text: "text", applicationTheme: "applicationTheme", iconName: "iconName", iconSize: "iconSize" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"spinner-container\"\n  [ngClass]=\"classes\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.aria-label]=\"'COMMON.LOADING' | uiTranslate | async\"\n  role=\"alert\"\n>\n  @if (!iconName) {\n    <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n      <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\"></circle>\n    </svg>\n  } @else {\n    <ui-icon [name]=\"iconName\" [size]=\"iconSize\"></ui-icon>\n  }\n\n  @if (text) {\n    <h3 class=\"spinner-text\">{{ text }}</h3>\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}.spinner-container.large{width:48px;height:48px;stroke-width:8px}.spinner-container.large .spinner{width:48px;height:48px}.spinner-container.small{stroke-width:4px;width:16px;height:16px}.spinner-container.small .spinner{width:16px;height:16px}.spinner-container.with-text{display:flex;flex-direction:column;align-items:center;justify-content:center;width:unset;height:unset}.spinner-container .spinner{animation:rotate 2s linear infinite;width:48px;height:48px}.spinner-container .spinner .path{stroke:#d410aa;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}.spinner-container .spinner-text{margin-top:24px;max-width:330px;overflow-wrap:normal;text-align:center;font-size:16px;line-height:24px;font-weight:400;color:#242424;overflow:hidden;max-height:72px}.spinner-container.classic .spinner .path{stroke:#276678}.spinner-container.loader{position:fixed;top:50%;left:50%;z-index:999;transform:translate(-50%,-50%)}.spinner-container[theme=dark] .path{stroke:#fff!important}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: i3.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-spinner', standalone: false, template: "<div\n  class=\"spinner-container\"\n  [ngClass]=\"classes\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.aria-label]=\"'COMMON.LOADING' | uiTranslate | async\"\n  role=\"alert\"\n>\n  @if (!iconName) {\n    <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n      <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\"></circle>\n    </svg>\n  } @else {\n    <ui-icon [name]=\"iconName\" [size]=\"iconSize\"></ui-icon>\n  }\n\n  @if (text) {\n    <h3 class=\"spinner-text\">{{ text }}</h3>\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}.spinner-container.large{width:48px;height:48px;stroke-width:8px}.spinner-container.large .spinner{width:48px;height:48px}.spinner-container.small{stroke-width:4px;width:16px;height:16px}.spinner-container.small .spinner{width:16px;height:16px}.spinner-container.with-text{display:flex;flex-direction:column;align-items:center;justify-content:center;width:unset;height:unset}.spinner-container .spinner{animation:rotate 2s linear infinite;width:48px;height:48px}.spinner-container .spinner .path{stroke:#d410aa;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}.spinner-container .spinner-text{margin-top:24px;max-width:330px;overflow-wrap:normal;text-align:center;font-size:16px;line-height:24px;font-weight:400;color:#242424;overflow:hidden;max-height:72px}.spinner-container.classic .spinner .path{stroke:#276678}.spinner-container.loader{position:fixed;top:50%;left:50%;z-index:999;transform:translate(-50%,-50%)}.spinner-container[theme=dark] .path{stroke:#fff!important}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
+                }] }], propDecorators: { size: [{
+                type: Input
+            }], isLoader: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], applicationTheme: [{
+                type: Input
+            }], iconName: [{
+                type: Input
+            }], iconSize: [{
+                type: Input
+            }] } });
+
+class SpinnerComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpinnerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SpinnerComponentModule, declarations: [SpinnerComponent], imports: [NgClass, NgIf, UiTranslatePipe, AsyncPipe, IconComponentModule], exports: [SpinnerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpinnerComponentModule, imports: [IconComponentModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpinnerComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SpinnerComponent],
+                    exports: [SpinnerComponent],
+                    imports: [NgClass, NgIf, UiTranslatePipe, AsyncPipe, IconComponentModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SpinnerComponent, SpinnerComponentModule };
+//# sourceMappingURL=testgorilla-tgo-ui-components-spinner.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"testgorilla-tgo-ui-components-spinner.mjs","sources":["../../../components/spinner/spinner.component.ts","../../../components/spinner/spinner.component.html","../../../components/spinner/spinner.module.ts","../../../components/spinner/testgorilla-tgo-ui-components-spinner.ts"],"sourcesContent":["import { Component, Inject, Input, OnChanges, OnInit, Optional } from '@angular/core';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconName, IconSize } from '@testgorilla/tgo-ui/components/icon';\nimport { SpinnerSize } from './spinner.model';\n\n@Component({\n    selector: 'ui-spinner',\n    templateUrl: './spinner.component.html',\n    styleUrls: ['./spinner.component.scss'],\n    standalone: false\n})\nexport class SpinnerComponent implements OnInit, OnChanges {\n  /**\n   * The size variant of the spinner. Can be 'small' or 'large'.\n   * Defaults to 'large'.\n   * @default 'large'\n   * @type {SpinnerSize}\n   * @memberof SpinnerComponent\n   */\n  @Input() size: SpinnerSize = 'large';\n\n  /**\n   * Set position fixed on page\n   * Defaults to 'true'.\n   * @default 'true'\n   * @type {SpinnerSize}\n   * @memberof SpinnerComponent\n   */\n  @Input() isLoader = true;\n\n  /**\n   * The text to display below the spinner.\n   * @type {string}\n   * @memberof SpinnerComponent\n   */\n  @Input() text: string | null = null;\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof SpinnerComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   * Custom Icon name\n   *\n   * @type {IconName}\n   * @memberof SpinnerComponent\n   */\n  @Input() iconName: IconName;\n\n  /**\n   * Custom Icon size\n   *\n   * @type {IconSize}\n   * @memberof SpinnerComponent\n   */\n  @Input() iconSize: IconSize = '24';\n\n  classes: string;\n\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n  ) {\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n    }\n  }\n\n  ngOnChanges(): void {\n    this.setSpinnerClasses();\n  }\n\n  ngOnInit(): void {\n    this.setSpinnerClasses();\n  }\n\n  setSpinnerClasses(): void {\n    this.classes = `${this.size === 'large' ? 'large' : 'small'} ${this.isLoader ? 'loader' : ''} ${\n      this.text ? 'with-text' : ''\n    } ${this.applicationTheme}`;\n\n    this.classes = this.classes.replace(/\\s+/g, ' ');\n  }\n}\n","<div\n  class=\"spinner-container\"\n  [ngClass]=\"classes\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.aria-label]=\"'COMMON.LOADING' | uiTranslate | async\"\n  role=\"alert\"\n>\n  @if (!iconName) {\n    <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n      <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\"></circle>\n    </svg>\n  } @else {\n    <ui-icon [name]=\"iconName\" [size]=\"iconSize\"></ui-icon>\n  }\n\n  @if (text) {\n    <h3 class=\"spinner-text\">{{ text }}</h3>\n  }\n</div>\n","import { AsyncPipe, NgClass, NgIf } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { SpinnerComponent } from './spinner.component';\n\n@NgModule({\n  declarations: [SpinnerComponent],\n  exports: [SpinnerComponent],\n  imports: [NgClass, NgIf, UiTranslatePipe, AsyncPipe, IconComponentModule],\n})\nexport class SpinnerComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}