@koobiq/components 20.4.2 → 21.0.0

package/fesm2022/koobiq-components-progress-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-progress-bar.mjs","sources":["../../../packages/components/progress-bar/progress-bar.component.ts","../../../packages/components/progress-bar/progress-bar.component.html","../../../packages/components/progress-bar/progress-bar.module.ts","../../../packages/components/progress-bar/koobiq-components-progress-bar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, ViewEncapsulation, input } from '@angular/core';\nimport { KbqColorDirective, KbqComponentColors } from '@koobiq/components/core';\n\nexport type ProgressBarMode = 'determinate' | 'indeterminate';\n\nlet idIterator = 0;\n\nconst MIN_PERCENT = 0;\nconst MAX_PERCENT = 100;\n\n@Directive({\n    selector: '[kbq-progress-bar-text]',\n    host: {\n        class: 'kbq-progress-bar-text'\n    }\n})\nexport class KbqProgressBarText {}\n\n@Directive({\n    selector: '[kbq-progress-bar-caption]',\n    host: {\n        class: 'kbq-progress-bar-caption'\n    }\n})\nexport class KbqProgressBarCaption {}\n\n@Component({\n    selector: 'kbq-progress-bar',\n    templateUrl: './progress-bar.component.html',\n    styleUrls: ['./progress-bar.scss', './progress-bar-tokens.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[attr.id]': 'id()',\n        class: 'kbq-progress-bar',\n        '[class.kbq-progress-bar_determinate]': 'mode() === \"determinate\"',\n        '[class.kbq-progress-bar_indeterminate]': 'mode() === \"indeterminate\"'\n    }\n})\nexport class KbqProgressBar extends KbqColorDirective {\n    readonly id = input<string>(`kbq-progress-bar-${idIterator++}`);\n    readonly value = input<number>(0);\n    readonly mode = input<ProgressBarMode>('determinate');\n\n    get percentage(): number {\n        return Math.max(MIN_PERCENT, Math.min(MAX_PERCENT, this.value()));\n    }\n\n    constructor() {\n        super();\n\n        this.color = KbqComponentColors.Theme;\n    }\n}\n","<ng-content select=\"[kbq-progress-bar-text]\" />\n\n<div class=\"kbq-progress-bar__inner\" [id]=\"id()\">\n    @switch (mode()) {\n        @case ('indeterminate') {\n            <div class=\"kbq-progress-bar__line kbq-progress-bar__line_indeterminate\"></div>\n        }\n        @default {\n            <div class=\"kbq-progress-bar__line kbq-progress-bar__line_determinate\" [style.width.%]=\"percentage\"></div>\n        }\n    }\n</div>\n\n<ng-content select=\"[kbq-progress-bar-caption]\" />\n","import { PlatformModule } from '@angular/cdk/platform';\nimport { NgModule } from '@angular/core';\nimport { KbqProgressBar, KbqProgressBarCaption, KbqProgressBarText } from './progress-bar.component';\n\n@NgModule({\n    imports: [\n        PlatformModule,\n        KbqProgressBar,\n        KbqProgressBarText,\n        KbqProgressBarCaption\n    ],\n    exports: [\n        KbqProgressBar,\n        KbqProgressBarText,\n        KbqProgressBarCaption\n    ]\n})\nexport class KbqProgressBarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"koobiq-components-progress-bar.mjs","sources":["../../../packages/components/progress-bar/progress-bar.component.ts","../../../packages/components/progress-bar/progress-bar.component.html","../../../packages/components/progress-bar/progress-bar.module.ts","../../../packages/components/progress-bar/koobiq-components-progress-bar.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChild,\n    Directive,\n    input,\n    ViewEncapsulation\n} from '@angular/core';\nimport {\n    kbqAnimationsDisabled,\n    KbqColorDirective,\n    KbqComponentColors,\n    kbqInjectA11yLocaleConfiguration\n} from '@koobiq/components/core';\n\n/** Whether the bar reports a known share of the work, or an operation whose duration is unknown. */\nexport type ProgressBarMode = 'determinate' | 'indeterminate';\n\nlet idIterator = 0;\nlet textIdIterator = 0;\nlet captionIdIterator = 0;\n\nconst MIN_PERCENT = 0;\nconst MAX_PERCENT = 100;\n\n/**\n * Label projected above the bar. Names the bar for assistive tech: `KbqProgressBar` points its\n * `aria-labelledby` at this element.\n */\n@Directive({\n    selector: '[kbq-progress-bar-text]',\n    host: {\n        class: 'kbq-progress-bar-text',\n        '[attr.id]': 'id()'\n    }\n})\nexport class KbqProgressBarText {\n    /** Element id. Generated when not supplied, so the bar can always reference it. */\n    readonly id = input<string>(`kbq-progress-bar-text-${textIdIterator++}`);\n}\n\n/**\n * Caption projected below the bar. Describes the bar for assistive tech: `KbqProgressBar` points its\n * `aria-describedby` at this element.\n */\n@Directive({\n    selector: '[kbq-progress-bar-caption]',\n    host: {\n        class: 'kbq-progress-bar-caption',\n        '[attr.id]': 'id()'\n    }\n})\nexport class KbqProgressBarCaption {\n    /** Element id. Generated when not supplied, so the bar can always reference it. */\n    readonly id = input<string>(`kbq-progress-bar-caption-${captionIdIterator++}`);\n}\n\n/** Horizontal indicator of the progress of an operation. */\n@Component({\n    selector: 'kbq-progress-bar',\n    templateUrl: './progress-bar.component.html',\n    styleUrls: ['./progress-bar.scss', './progress-bar-tokens.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[attr.id]': 'id()',\n        class: 'kbq-progress-bar',\n        role: 'progressbar',\n        // The classes read `mode` rather than `indeterminate`, which the attributes read: the host bindings of every\n        // bar in a view run in that view's reactive consumer, where a signal read again after others costs a scan of\n        // all it has read so far.\n        '[class.kbq-progress-bar_determinate]': \"mode() !== 'indeterminate'\",\n        '[class.kbq-progress-bar_indeterminate]': \"mode() === 'indeterminate'\",\n        // An indeterminate `progressbar` is expressed by the absence of `aria-valuenow`, so the whole\n        // range stays off the element rather than being pinned to zero.\n        '[attr.aria-valuemin]': 'indeterminate() ? null : 0',\n        '[attr.aria-valuemax]': 'indeterminate() ? null : 100',\n        '[attr.aria-valuenow]': 'indeterminate() ? null : percentage()',\n        '[attr.aria-label]': 'resolvedAriaLabel()',\n        '[attr.aria-labelledby]': 'resolvedAriaLabelledby()',\n        '[attr.aria-describedby]': 'caption()?.id() ?? null'\n    }\n})\nexport class KbqProgressBar extends KbqColorDirective {\n    private readonly a11yLocaleConfiguration = kbqInjectA11yLocaleConfiguration();\n\n    private readonly text = contentChild(KbqProgressBarText);\n\n    protected readonly caption = contentChild(KbqProgressBarCaption);\n\n    /** Id of the host element. Generated when not supplied. */\n    readonly id = input<string>(`kbq-progress-bar-${idIterator++}`);\n\n    /** Share of the work that is done, in the `[0, 100]` range. Ignored in indeterminate mode. */\n    readonly value = input<number>(0);\n\n    /** Whether the bar reports `value`, or an operation whose duration is unknown. */\n    readonly mode = input<ProgressBarMode>('determinate');\n\n    /**\n     * Accessible name of the bar. Takes precedence over a projected `[kbq-progress-bar-text]`; when\n     * neither is given, the bar falls back to the `progressBar` name from the a11y locale.\n     */\n    readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n\n    /**\n     * Whether the fill follows a new value without a transition, and the indeterminate fill pulses in place instead\n     * of sliding, as under reduced motion.\n     *\n     * @docs-private\n     */\n    protected readonly animationsDisabled = kbqAnimationsDisabled();\n\n    /** Anything other than `indeterminate` reports a value, matching the branch the template renders. */\n    protected readonly indeterminate = computed(() => this.mode() === 'indeterminate');\n\n    /** `value` clamped into `[0, 100]`. A non-finite value would be written out as an invalid width. */\n    protected readonly percentage = computed(() => {\n        const value = this.value();\n\n        return Number.isFinite(value) ? Math.max(MIN_PERCENT, Math.min(MAX_PERCENT, value)) : MIN_PERCENT;\n    });\n\n    protected readonly resolvedAriaLabelledby = computed(() => (this.ariaLabel() ? null : (this.text()?.id() ?? null)));\n\n    protected readonly resolvedAriaLabel = computed(\n        () => this.ariaLabel() ?? (this.text() ? null : this.a11yLocaleConfiguration().progressBar)\n    );\n\n    constructor() {\n        super();\n\n        this.setDefaultColor(KbqComponentColors.Theme);\n    }\n}\n","<ng-content select=\"[kbq-progress-bar-text]\" />\n\n<div class=\"kbq-progress-bar__inner\">\n    @switch (mode()) {\n        @case ('indeterminate') {\n            <div\n                class=\"kbq-progress-bar__line kbq-progress-bar__line_indeterminate\"\n                [class.kbq-animations-disabled]=\"animationsDisabled\"\n            ></div>\n        }\n        @default {\n            <div\n                class=\"kbq-progress-bar__line kbq-progress-bar__line_determinate\"\n                [class.kbq-animations-disabled]=\"animationsDisabled\"\n                [style.width.%]=\"percentage()\"\n            ></div>\n        }\n    }\n</div>\n\n<ng-content select=\"[kbq-progress-bar-caption]\" />\n","import { NgModule } from '@angular/core';\nimport { KbqProgressBar, KbqProgressBarCaption, KbqProgressBarText } from './progress-bar.component';\n\n@NgModule({\n    imports: [\n        KbqProgressBar,\n        KbqProgressBarText,\n        KbqProgressBarCaption\n    ],\n    exports: [\n        KbqProgressBar,\n        KbqProgressBarText,\n        KbqProgressBarCaption\n    ]\n})\nexport class KbqProgressBarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/koobiq-components-progress-spinner.mjs

@@ -1,16 +1,20 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { Directive, input, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { KbqColorDirective, KbqComponentColors } from '@koobiq/components/core';
+import { Directive, input, inject, numberAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { KbqColorDirective, kbqAnimationsDisabled, KbqComponentColors } from '@koobiq/components/core';
 import { PlatformModule } from '@angular/cdk/platform';
 
-let id = 0;
 const MIN_PERCENT = 0;
 const MAX_PERCENT = 100;
+const MAX_DASH_ARRAY = 295;
+const BIG_CIRCLE_RADIUS = '47%';
+const COMPACT_CIRCLE_RADIUS = '42.5%';
+/** Directive that marks the text of a progress spinner. */
 class KbqProgressSpinnerText {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqProgressSpinnerText, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqProgressSpinnerText, isStandalone: true, selector: "[kbq-progress-spinner-text]", host: { classAttribute: "kbq-progress-spinner-text" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqProgressSpinnerText, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqProgressSpinnerText, isStandalone: true, selector: "[kbq-progress-spinner-text]", host: { classAttribute: "kbq-progress-spinner-text" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqProgressSpinnerText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqProgressSpinnerText, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-progress-spinner-text]',
@@ -19,11 +23,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     }
                 }]
         }] });
+/** Directive that marks the caption of a progress spinner. */
 class KbqProgressSpinnerCaption {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqProgressSpinnerCaption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqProgressSpinnerCaption, isStandalone: true, selector: "[kbq-progress-spinner-caption]", host: { classAttribute: "kbq-progress-spinner-caption" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqProgressSpinnerCaption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqProgressSpinnerCaption, isStandalone: true, selector: "[kbq-progress-spinner-caption]", host: { classAttribute: "kbq-progress-spinner-caption" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqProgressSpinnerCaption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqProgressSpinnerCaption, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-progress-spinner-caption]',
@@ -32,59 +37,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     }
                 }]
         }] });
-const MAX_DASH_ARRAY = 295;
+/** Component that reports the progress of an ongoing operation. */
 class KbqProgressSpinner extends KbqColorDirective {
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get size() {
-        return this._size;
-    }
-    set size(value) {
-        this._size = value;
-        this.svgCircleRadius = value === 'big' ? '47%' : '42.5%';
-    }
-    get percentage() {
-        return Math.max(MIN_PERCENT, Math.min(MAX_PERCENT, this.value())) / MAX_PERCENT;
-    }
-    get dashOffsetPercent() {
-        return `${MAX_DASH_ARRAY - this.percentage * MAX_DASH_ARRAY}%`;
-    }
     constructor() {
         super();
-        this.id = input(`kbq-progress-spinner-${id++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
-        this.value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
-        this.mode = input('determinate', ...(ngDevMode ? [{ debugName: "mode" }] : []));
-        this._size = 'compact';
-        this.svgCircleRadius = '42.5%';
-        this.color = KbqComponentColors.Theme;
+        /** Unique id of the spinner. */
+        this.id = input(inject(_IdGenerator).getId('kbq-progress-spinner-'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Progress of the operation, in percent. Clamped to `[0, 100]` and only rendered in `determinate` mode.
+         *
+         * Anything that is not a number reads as `0`: the value feeds a `stroke-dashoffset` percentage, and a
+         * bare `numberAttribute` would turn a null binding into `NaN%`, which is not a length at all. The
+         * transform is typed rather than taking `unknown`, so `[value]="progress$ | async"` and `value="40"`
+         * keep type-checking while an object or an array stays a template type error.
+         */
+        this.value = input(0, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: (value) => numberAttribute(value, 0) });
+        /** Whether the spinner reports `value` or spins indefinitely. */
+        this.mode = input('determinate', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /** Size of the spinner. */
+        this.size = input('compact', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.svgCircleRadius = computed(() => this.size() === 'big' ? BIG_CIRCLE_RADIUS : COMPACT_CIRCLE_RADIUS, ...(ngDevMode ? [{ debugName: "svgCircleRadius" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.percentage = computed(() => Math.max(MIN_PERCENT, Math.min(MAX_PERCENT, this.value())) / MAX_PERCENT, ...(ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.dashOffsetPercent = computed(() => `${MAX_DASH_ARRAY - this.percentage() * MAX_DASH_ARRAY}%`, ...(ngDevMode ? [{ debugName: "dashOffsetPercent" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the indeterminate spinner stands still and the determinate one follows a new value at once.
+         *
+         * @docs-private
+         */
+        this.animationsDisabled = kbqAnimationsDisabled();
         this.setDefaultColor(KbqComponentColors.Theme);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqProgressSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.30", type: KbqProgressSpinner, isStandalone: true, selector: "kbq-progress-spinner", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-progress-spinner_big": "size === 'big'", "class.kbq-progress-spinner_indeterminate": "mode() === 'indeterminate'", "attr.id": "id()" }, classAttribute: "kbq-progress-spinner" }, usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-progress-spinner__inner\">\n    <svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 100 100\">\n        <circle\n            cx=\"50%\"\n            cy=\"50%\"\n            stroke-linecap=\"round\"\n            class=\"kbq-progress-spinner__circle\"\n            [attr.r]=\"svgCircleRadius\"\n            [style]=\"{ 'stroke-dashoffset': mode() === 'determinate' ? dashOffsetPercent : null }\"\n        />\n    </svg>\n</div>\n\n<div class=\"kbq-progress-spinner__content\">\n    <ng-content select=\"[kbq-progress-spinner-text]\" />\n    <ng-content select=\"[kbq-progress-spinner-caption]\" />\n</div>\n", styles: ["@keyframes kbq-progress-spinner-indeterminate{to{transform:rotate(270deg)}}.kbq-progress-spinner{display:flex;flex-direction:row;overflow:hidden}.kbq-progress-spinner__circle{fill:none;stroke:var(--stroke, var(--kbq-progress-spinner-circle-background));stroke-dasharray:295%;stroke-width:13%;transition:stroke-dashoffset .3s;transform-origin:center center}.kbq-progress-spinner__inner{width:var(--kbq-progress-spinner-size-compact-size);height:var(--kbq-progress-spinner-size-compact-size);transform:rotate(-90deg);font-size:0;line-height:0}.kbq-progress-spinner__content .kbq-progress-spinner-text{margin-bottom:var(--kbq-progress-spinner-size-compact-content-gap-vertical)}.kbq-progress-spinner__content:not(:empty){margin-inline-start:var(--kbq-progress-spinner-size-compact-content-gap-horizontal)}.kbq-progress-spinner_big .kbq-progress-spinner__inner{width:var(--kbq-progress-spinner-size-big-size);height:var(--kbq-progress-spinner-size-big-size)}.kbq-progress-spinner_big .kbq-progress-spinner__circle{stroke-width:6%}.kbq-progress-spinner_big .kbq-progress-spinner__content:not(:empty){margin-inline-start:var(--kbq-progress-spinner-size-big-content-gap-horizontal)}.kbq-progress-spinner_indeterminate .kbq-progress-spinner__inner{animation:kbq-progress-spinner-indeterminate 1.5s cubic-bezier(.455,.03,.515,.955) infinite}@media(prefers-reduced-motion:reduce){.kbq-progress-spinner_indeterminate .kbq-progress-spinner__inner{animation:none}}.kbq-progress-spinner_indeterminate .kbq-progress-spinner__inner .kbq-progress-spinner__circle{stroke-dashoffset:80%}.kbq-progress-spinner{--stroke: var(--kbq-progress-spinner-circle-background)}.kbq-progress-spinner .kbq-progress-spinner__circle{stroke:var(--stroke)}.kbq-progress-spinner.kbq-contrast{--stroke: var(--kbq-progress-spinner-circle-contrast-background)}.kbq-progress-spinner.kbq-contrast-fade{--stroke: var(--kbq-progress-spinner-circle-contrast-fade-background)}.kbq-progress-spinner-text{color:var(--kbq-progress-spinner-text-color)}.kbq-progress-spinner-caption{color:var(--kbq-progress-spinner-caption-color)}.kbq-progress-spinner-text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-progress-spinner-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-progress-spinner{--kbq-progress-spinner-size-compact-size: var(--kbq-size-l);--kbq-progress-spinner-size-compact-stroke-width: 2px;--kbq-progress-spinner-size-compact-content-gap-vertical: var(--kbq-size-3xs);--kbq-progress-spinner-size-compact-content-gap-horizontal: var(--kbq-size-s);--kbq-progress-spinner-size-big-size: var(--kbq-size-5xl);--kbq-progress-spinner-size-big-stroke-width: 3px;--kbq-progress-spinner-size-big-content-gap-vertical: var(--kbq-size-3xs);--kbq-progress-spinner-size-big-content-gap-horizontal: var(--kbq-size-s);--kbq-progress-spinner-circle-background: var(--kbq-icon-theme);--kbq-progress-spinner-circle-contrast-background: var(--kbq-icon-contrast);--kbq-progress-spinner-circle-contrast-fade-background: var(--kbq-icon-contrast-fade);--kbq-progress-spinner-text-color: var(--kbq-foreground-contrast);--kbq-progress-spinner-caption-color: var(--kbq-foreground-contrast-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqProgressSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KbqProgressSpinner, isStandalone: true, selector: "kbq-progress-spinner", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-progress-spinner_big": "size() === 'big'", "class.kbq-progress-spinner_indeterminate": "mode() === 'indeterminate'", "attr.id": "id()" }, classAttribute: "kbq-progress-spinner" }, usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-progress-spinner__inner\" [class.kbq-animations-disabled]=\"animationsDisabled\">\n    <svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 100 100\">\n        <circle\n            cx=\"50%\"\n            cy=\"50%\"\n            stroke-linecap=\"round\"\n            class=\"kbq-progress-spinner__circle\"\n            [class.kbq-animations-disabled]=\"animationsDisabled\"\n            [attr.r]=\"svgCircleRadius()\"\n            [style]=\"{ 'stroke-dashoffset': mode() === 'determinate' ? dashOffsetPercent() : null }\"\n        />\n    </svg>\n</div>\n\n<div class=\"kbq-progress-spinner__content\">\n    <ng-content select=\"[kbq-progress-spinner-text]\" />\n    <ng-content select=\"[kbq-progress-spinner-caption]\" />\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes kbq-progress-spinner-indeterminate{to{transform:rotate(270deg)}}.kbq-progress-spinner{display:flex;flex-direction:row;overflow:hidden}.kbq-progress-spinner__circle{fill:none;stroke:var(--stroke, var(--kbq-progress-spinner-circle-background));stroke-dasharray:295%;stroke-width:13%;transition:stroke-dashoffset .3s;transform-origin:center center}.kbq-progress-spinner__circle.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-progress-spinner__circle{animation:none;transition:none}}.kbq-progress-spinner__inner{width:var(--kbq-progress-spinner-size-compact-size);height:var(--kbq-progress-spinner-size-compact-size);transform:rotate(-90deg);font-size:0;line-height:0}.kbq-progress-spinner__content .kbq-progress-spinner-text{margin-bottom:var(--kbq-progress-spinner-size-compact-content-gap-vertical)}.kbq-progress-spinner__content:not(:empty){margin-inline-start:var(--kbq-progress-spinner-size-compact-content-gap-horizontal)}.kbq-progress-spinner_big .kbq-progress-spinner__inner{width:var(--kbq-progress-spinner-size-big-size);height:var(--kbq-progress-spinner-size-big-size)}.kbq-progress-spinner_big .kbq-progress-spinner__circle{stroke-width:6%}.kbq-progress-spinner_big .kbq-progress-spinner__content:not(:empty){margin-inline-start:var(--kbq-progress-spinner-size-big-content-gap-horizontal)}.kbq-progress-spinner_indeterminate .kbq-progress-spinner__inner{animation:kbq-progress-spinner-indeterminate 1.5s cubic-bezier(.455,.03,.515,.955) infinite}.kbq-progress-spinner_indeterminate .kbq-progress-spinner__inner.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-progress-spinner_indeterminate .kbq-progress-spinner__inner{animation:none;transition:none}}.kbq-progress-spinner_indeterminate .kbq-progress-spinner__inner .kbq-progress-spinner__circle{stroke-dashoffset:80%}.kbq-progress-spinner{--stroke: var(--kbq-progress-spinner-circle-background)}.kbq-progress-spinner .kbq-progress-spinner__circle{stroke:var(--stroke)}.kbq-progress-spinner.kbq-contrast{--stroke: var(--kbq-progress-spinner-circle-contrast-background)}.kbq-progress-spinner.kbq-contrast-fade{--stroke: var(--kbq-progress-spinner-circle-contrast-fade-background)}.kbq-progress-spinner-text{color:var(--kbq-progress-spinner-text-color)}.kbq-progress-spinner-caption{color:var(--kbq-progress-spinner-caption-color)}.kbq-progress-spinner-text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-progress-spinner-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-progress-spinner{--kbq-progress-spinner-size-compact-size: var(--kbq-size-l);--kbq-progress-spinner-size-compact-stroke-width: 2px;--kbq-progress-spinner-size-compact-content-gap-vertical: var(--kbq-size-3xs);--kbq-progress-spinner-size-compact-content-gap-horizontal: var(--kbq-size-s);--kbq-progress-spinner-size-big-size: var(--kbq-size-5xl);--kbq-progress-spinner-size-big-stroke-width: 3px;--kbq-progress-spinner-size-big-content-gap-vertical: var(--kbq-size-3xs);--kbq-progress-spinner-size-big-content-gap-horizontal: var(--kbq-size-s);--kbq-progress-spinner-circle-background: var(--kbq-icon-theme);--kbq-progress-spinner-circle-contrast-background: var(--kbq-icon-contrast);--kbq-progress-spinner-circle-contrast-fade-background: var(--kbq-icon-contrast-fade);--kbq-progress-spinner-text-color: var(--kbq-foreground-contrast);--kbq-progress-spinner-caption-color: var(--kbq-foreground-contrast-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqProgressSpinner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqProgressSpinner, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-progress-spinner', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-progress-spinner',
-                        '[class.kbq-progress-spinner_big]': `size === 'big'`,
+                        '[class.kbq-progress-spinner_big]': `size() === 'big'`,
                         '[class.kbq-progress-spinner_indeterminate]': `mode() === 'indeterminate'`,
                         '[attr.id]': 'id()'
-                    }, template: "<div class=\"kbq-progress-spinner__inner\">\n    <svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 100 100\">\n        <circle\n            cx=\"50%\"\n            cy=\"50%\"\n            stroke-linecap=\"round\"\n            class=\"kbq-progress-spinner__circle\"\n            [attr.r]=\"svgCircleRadius\"\n            [style]=\"{ 'stroke-dashoffset': mode() === 'determinate' ? dashOffsetPercent : null }\"\n        />\n    </svg>\n</div>\n\n<div class=\"kbq-progress-spinner__content\">\n    <ng-content select=\"[kbq-progress-spinner-text]\" />\n    <ng-content select=\"[kbq-progress-spinner-caption]\" />\n</div>\n", styles: ["@keyframes kbq-progress-spinner-indeterminate{to{transform:rotate(270deg)}}.kbq-progress-spinner{display:flex;flex-direction:row;overflow:hidden}.kbq-progress-spinner__circle{fill:none;stroke:var(--stroke, var(--kbq-progress-spinner-circle-background));stroke-dasharray:295%;stroke-width:13%;transition:stroke-dashoffset .3s;transform-origin:center center}.kbq-progress-spinner__inner{width:var(--kbq-progress-spinner-size-compact-size);height:var(--kbq-progress-spinner-size-compact-size);transform:rotate(-90deg);font-size:0;line-height:0}.kbq-progress-spinner__content .kbq-progress-spinner-text{margin-bottom:var(--kbq-progress-spinner-size-compact-content-gap-vertical)}.kbq-progress-spinner__content:not(:empty){margin-inline-start:var(--kbq-progress-spinner-size-compact-content-gap-horizontal)}.kbq-progress-spinner_big .kbq-progress-spinner__inner{width:var(--kbq-progress-spinner-size-big-size);height:var(--kbq-progress-spinner-size-big-size)}.kbq-progress-spinner_big .kbq-progress-spinner__circle{stroke-width:6%}.kbq-progress-spinner_big .kbq-progress-spinner__content:not(:empty){margin-inline-start:var(--kbq-progress-spinner-size-big-content-gap-horizontal)}.kbq-progress-spinner_indeterminate .kbq-progress-spinner__inner{animation:kbq-progress-spinner-indeterminate 1.5s cubic-bezier(.455,.03,.515,.955) infinite}@media(prefers-reduced-motion:reduce){.kbq-progress-spinner_indeterminate .kbq-progress-spinner__inner{animation:none}}.kbq-progress-spinner_indeterminate .kbq-progress-spinner__inner .kbq-progress-spinner__circle{stroke-dashoffset:80%}.kbq-progress-spinner{--stroke: var(--kbq-progress-spinner-circle-background)}.kbq-progress-spinner .kbq-progress-spinner__circle{stroke:var(--stroke)}.kbq-progress-spinner.kbq-contrast{--stroke: var(--kbq-progress-spinner-circle-contrast-background)}.kbq-progress-spinner.kbq-contrast-fade{--stroke: var(--kbq-progress-spinner-circle-contrast-fade-background)}.kbq-progress-spinner-text{color:var(--kbq-progress-spinner-text-color)}.kbq-progress-spinner-caption{color:var(--kbq-progress-spinner-caption-color)}.kbq-progress-spinner-text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-progress-spinner-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-progress-spinner{--kbq-progress-spinner-size-compact-size: var(--kbq-size-l);--kbq-progress-spinner-size-compact-stroke-width: 2px;--kbq-progress-spinner-size-compact-content-gap-vertical: var(--kbq-size-3xs);--kbq-progress-spinner-size-compact-content-gap-horizontal: var(--kbq-size-s);--kbq-progress-spinner-size-big-size: var(--kbq-size-5xl);--kbq-progress-spinner-size-big-stroke-width: 3px;--kbq-progress-spinner-size-big-content-gap-vertical: var(--kbq-size-3xs);--kbq-progress-spinner-size-big-content-gap-horizontal: var(--kbq-size-s);--kbq-progress-spinner-circle-background: var(--kbq-icon-theme);--kbq-progress-spinner-circle-contrast-background: var(--kbq-icon-contrast);--kbq-progress-spinner-circle-contrast-fade-background: var(--kbq-icon-contrast-fade);--kbq-progress-spinner-text-color: var(--kbq-foreground-contrast);--kbq-progress-spinner-caption-color: var(--kbq-foreground-contrast-secondary)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{
-                type: Input
-            }] } });
+                    }, template: "<div class=\"kbq-progress-spinner__inner\" [class.kbq-animations-disabled]=\"animationsDisabled\">\n    <svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 100 100\">\n        <circle\n            cx=\"50%\"\n            cy=\"50%\"\n            stroke-linecap=\"round\"\n            class=\"kbq-progress-spinner__circle\"\n            [class.kbq-animations-disabled]=\"animationsDisabled\"\n            [attr.r]=\"svgCircleRadius()\"\n            [style]=\"{ 'stroke-dashoffset': mode() === 'determinate' ? dashOffsetPercent() : null }\"\n        />\n    </svg>\n</div>\n\n<div class=\"kbq-progress-spinner__content\">\n    <ng-content select=\"[kbq-progress-spinner-text]\" />\n    <ng-content select=\"[kbq-progress-spinner-caption]\" />\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes kbq-progress-spinner-indeterminate{to{transform:rotate(270deg)}}.kbq-progress-spinner{display:flex;flex-direction:row;overflow:hidden}.kbq-progress-spinner__circle{fill:none;stroke:var(--stroke, var(--kbq-progress-spinner-circle-background));stroke-dasharray:295%;stroke-width:13%;transition:stroke-dashoffset .3s;transform-origin:center center}.kbq-progress-spinner__circle.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-progress-spinner__circle{animation:none;transition:none}}.kbq-progress-spinner__inner{width:var(--kbq-progress-spinner-size-compact-size);height:var(--kbq-progress-spinner-size-compact-size);transform:rotate(-90deg);font-size:0;line-height:0}.kbq-progress-spinner__content .kbq-progress-spinner-text{margin-bottom:var(--kbq-progress-spinner-size-compact-content-gap-vertical)}.kbq-progress-spinner__content:not(:empty){margin-inline-start:var(--kbq-progress-spinner-size-compact-content-gap-horizontal)}.kbq-progress-spinner_big .kbq-progress-spinner__inner{width:var(--kbq-progress-spinner-size-big-size);height:var(--kbq-progress-spinner-size-big-size)}.kbq-progress-spinner_big .kbq-progress-spinner__circle{stroke-width:6%}.kbq-progress-spinner_big .kbq-progress-spinner__content:not(:empty){margin-inline-start:var(--kbq-progress-spinner-size-big-content-gap-horizontal)}.kbq-progress-spinner_indeterminate .kbq-progress-spinner__inner{animation:kbq-progress-spinner-indeterminate 1.5s cubic-bezier(.455,.03,.515,.955) infinite}.kbq-progress-spinner_indeterminate .kbq-progress-spinner__inner.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-progress-spinner_indeterminate .kbq-progress-spinner__inner{animation:none;transition:none}}.kbq-progress-spinner_indeterminate .kbq-progress-spinner__inner .kbq-progress-spinner__circle{stroke-dashoffset:80%}.kbq-progress-spinner{--stroke: var(--kbq-progress-spinner-circle-background)}.kbq-progress-spinner .kbq-progress-spinner__circle{stroke:var(--stroke)}.kbq-progress-spinner.kbq-contrast{--stroke: var(--kbq-progress-spinner-circle-contrast-background)}.kbq-progress-spinner.kbq-contrast-fade{--stroke: var(--kbq-progress-spinner-circle-contrast-fade-background)}.kbq-progress-spinner-text{color:var(--kbq-progress-spinner-text-color)}.kbq-progress-spinner-caption{color:var(--kbq-progress-spinner-caption-color)}.kbq-progress-spinner-text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-progress-spinner-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-progress-spinner{--kbq-progress-spinner-size-compact-size: var(--kbq-size-l);--kbq-progress-spinner-size-compact-stroke-width: 2px;--kbq-progress-spinner-size-compact-content-gap-vertical: var(--kbq-size-3xs);--kbq-progress-spinner-size-compact-content-gap-horizontal: var(--kbq-size-s);--kbq-progress-spinner-size-big-size: var(--kbq-size-5xl);--kbq-progress-spinner-size-big-stroke-width: 3px;--kbq-progress-spinner-size-big-content-gap-vertical: var(--kbq-size-3xs);--kbq-progress-spinner-size-big-content-gap-horizontal: var(--kbq-size-s);--kbq-progress-spinner-circle-background: var(--kbq-icon-theme);--kbq-progress-spinner-circle-contrast-background: var(--kbq-icon-contrast);--kbq-progress-spinner-circle-contrast-fade-background: var(--kbq-icon-contrast-fade);--kbq-progress-spinner-text-color: var(--kbq-foreground-contrast);--kbq-progress-spinner-caption-color: var(--kbq-foreground-contrast-secondary)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 class KbqProgressSpinnerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqProgressSpinnerModule, imports: [PlatformModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqProgressSpinnerModule, imports: [PlatformModule,
             KbqProgressSpinner,
             KbqProgressSpinnerText,
             KbqProgressSpinnerCaption], exports: [KbqProgressSpinner,
             KbqProgressSpinnerText,
             KbqProgressSpinnerCaption] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqProgressSpinnerModule, imports: [PlatformModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqProgressSpinnerModule, imports: [PlatformModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqProgressSpinnerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqProgressSpinnerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/koobiq-components-progress-spinner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-progress-spinner.mjs","sources":["../../../packages/components/progress-spinner/progress-spinner.component.ts","../../../packages/components/progress-spinner/progress-spinner.component.html","../../../packages/components/progress-spinner/progress-spinner.module.ts","../../../packages/components/progress-spinner/koobiq-components-progress-spinner.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, Input, ViewEncapsulation, input } from '@angular/core';\nimport { KbqColorDirective, KbqComponentColors } from '@koobiq/components/core';\n\nexport type ProgressSpinnerMode = 'determinate' | 'indeterminate';\n\n//@TODO use Exclude<KbqDefaultSizes, 'normal'> from '@koobiq/components/core' instead\nexport type ProgressSpinnerSize = 'compact' | 'big';\n\nlet id = 0;\n\nconst MIN_PERCENT = 0;\nconst MAX_PERCENT = 100;\n\n@Directive({\n    selector: '[kbq-progress-spinner-text]',\n    host: {\n        class: 'kbq-progress-spinner-text'\n    }\n})\nexport class KbqProgressSpinnerText {}\n\n@Directive({\n    selector: '[kbq-progress-spinner-caption]',\n    host: {\n        class: 'kbq-progress-spinner-caption'\n    }\n})\nexport class KbqProgressSpinnerCaption {}\n\nconst MAX_DASH_ARRAY = 295;\n\n@Component({\n    selector: 'kbq-progress-spinner',\n    templateUrl: './progress-spinner.component.html',\n    styleUrls: ['./progress-spinner.scss', './progress-spinner-tokens.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'kbq-progress-spinner',\n        '[class.kbq-progress-spinner_big]': `size === 'big'`,\n        '[class.kbq-progress-spinner_indeterminate]': `mode() === 'indeterminate'`,\n        '[attr.id]': 'id()'\n    }\n})\nexport class KbqProgressSpinner extends KbqColorDirective {\n    readonly id = input<string>(`kbq-progress-spinner-${id++}`);\n    readonly value = input<number>(0);\n    readonly mode = input<ProgressSpinnerMode>('determinate');\n\n    // TODO: Skipped for migration because:\n    //  Accessor inputs cannot be migrated as they are too complex.\n    @Input()\n    get size(): ProgressSpinnerSize | string {\n        return this._size;\n    }\n\n    set size(value: ProgressSpinnerSize | string) {\n        this._size = value;\n\n        this.svgCircleRadius = value === 'big' ? '47%' : '42.5%';\n    }\n\n    private _size: ProgressSpinnerSize | string = 'compact';\n\n    svgCircleRadius: string = '42.5%';\n\n    get percentage(): number {\n        return Math.max(MIN_PERCENT, Math.min(MAX_PERCENT, this.value())) / MAX_PERCENT;\n    }\n\n    get dashOffsetPercent(): string {\n        return `${MAX_DASH_ARRAY - this.percentage * MAX_DASH_ARRAY}%`;\n    }\n\n    constructor() {\n        super();\n\n        this.color = KbqComponentColors.Theme;\n        this.setDefaultColor(KbqComponentColors.Theme);\n    }\n}\n","<div class=\"kbq-progress-spinner__inner\">\n    <svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 100 100\">\n        <circle\n            cx=\"50%\"\n            cy=\"50%\"\n            stroke-linecap=\"round\"\n            class=\"kbq-progress-spinner__circle\"\n            [attr.r]=\"svgCircleRadius\"\n            [style]=\"{ 'stroke-dashoffset': mode() === 'determinate' ? dashOffsetPercent : null }\"\n        />\n    </svg>\n</div>\n\n<div class=\"kbq-progress-spinner__content\">\n    <ng-content select=\"[kbq-progress-spinner-text]\" />\n    <ng-content select=\"[kbq-progress-spinner-caption]\" />\n</div>\n","import { PlatformModule } from '@angular/cdk/platform';\nimport { NgModule } from '@angular/core';\nimport { KbqProgressSpinner, KbqProgressSpinnerCaption, KbqProgressSpinnerText } from './progress-spinner.component';\n\n@NgModule({\n    imports: [\n        PlatformModule,\n        KbqProgressSpinner,\n        KbqProgressSpinnerText,\n        KbqProgressSpinnerCaption\n    ],\n    exports: [\n        KbqProgressSpinner,\n        KbqProgressSpinnerText,\n        KbqProgressSpinnerCaption\n    ]\n})\nexport class KbqProgressSpinnerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"koobiq-components-progress-spinner.mjs","sources":["../../../packages/components/progress-spinner/progress-spinner.component.ts","../../../packages/components/progress-spinner/progress-spinner.component.html","../../../packages/components/progress-spinner/progress-spinner.module.ts","../../../packages/components/progress-spinner/koobiq-components-progress-spinner.ts"],"sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    Directive,\n    inject,\n    input,\n    numberAttribute,\n    ViewEncapsulation\n} from '@angular/core';\nimport { kbqAnimationsDisabled, KbqColorDirective, KbqComponentColors, KbqDefaultSizes } from '@koobiq/components/core';\n\n/** Whether the spinner reports a known progress value or spins indefinitely. */\nexport type ProgressSpinnerMode = 'determinate' | 'indeterminate';\n\n/** Sizes supported by the progress spinner. */\nexport type ProgressSpinnerSize = Exclude<KbqDefaultSizes, 'normal'>;\n\nconst MIN_PERCENT = 0;\nconst MAX_PERCENT = 100;\nconst MAX_DASH_ARRAY = 295;\n\nconst BIG_CIRCLE_RADIUS = '47%';\nconst COMPACT_CIRCLE_RADIUS = '42.5%';\n\n/** Directive that marks the text of a progress spinner. */\n@Directive({\n    selector: '[kbq-progress-spinner-text]',\n    host: {\n        class: 'kbq-progress-spinner-text'\n    }\n})\nexport class KbqProgressSpinnerText {}\n\n/** Directive that marks the caption of a progress spinner. */\n@Directive({\n    selector: '[kbq-progress-spinner-caption]',\n    host: {\n        class: 'kbq-progress-spinner-caption'\n    }\n})\nexport class KbqProgressSpinnerCaption {}\n\n/** Component that reports the progress of an ongoing operation. */\n@Component({\n    selector: 'kbq-progress-spinner',\n    templateUrl: './progress-spinner.component.html',\n    styleUrls: ['./progress-spinner.scss', './progress-spinner-tokens.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'kbq-progress-spinner',\n        '[class.kbq-progress-spinner_big]': `size() === 'big'`,\n        '[class.kbq-progress-spinner_indeterminate]': `mode() === 'indeterminate'`,\n        '[attr.id]': 'id()'\n    }\n})\nexport class KbqProgressSpinner extends KbqColorDirective {\n    /** Unique id of the spinner. */\n    readonly id = input<string>(inject(_IdGenerator).getId('kbq-progress-spinner-'));\n\n    /**\n     * Progress of the operation, in percent. Clamped to `[0, 100]` and only rendered in `determinate` mode.\n     *\n     * Anything that is not a number reads as `0`: the value feeds a `stroke-dashoffset` percentage, and a\n     * bare `numberAttribute` would turn a null binding into `NaN%`, which is not a length at all. The\n     * transform is typed rather than taking `unknown`, so `[value]=\"progress$ | async\"` and `value=\"40\"`\n     * keep type-checking while an object or an array stays a template type error.\n     */\n    readonly value = input(0, {\n        transform: (value: number | string | null | undefined) => numberAttribute(value, 0)\n    });\n\n    /** Whether the spinner reports `value` or spins indefinitely. */\n    readonly mode = input<ProgressSpinnerMode>('determinate');\n\n    /** Size of the spinner. */\n    readonly size = input<ProgressSpinnerSize>('compact');\n\n    /** @docs-private */\n    protected readonly svgCircleRadius = computed<string>(() =>\n        this.size() === 'big' ? BIG_CIRCLE_RADIUS : COMPACT_CIRCLE_RADIUS\n    );\n\n    /** @docs-private */\n    protected readonly percentage = computed(\n        () => Math.max(MIN_PERCENT, Math.min(MAX_PERCENT, this.value())) / MAX_PERCENT\n    );\n\n    /** @docs-private */\n    protected readonly dashOffsetPercent = computed(() => `${MAX_DASH_ARRAY - this.percentage() * MAX_DASH_ARRAY}%`);\n\n    /**\n     * Whether the indeterminate spinner stands still and the determinate one follows a new value at once.\n     *\n     * @docs-private\n     */\n    protected readonly animationsDisabled = kbqAnimationsDisabled();\n\n    constructor() {\n        super();\n\n        this.setDefaultColor(KbqComponentColors.Theme);\n    }\n}\n","<div class=\"kbq-progress-spinner__inner\" [class.kbq-animations-disabled]=\"animationsDisabled\">\n    <svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 100 100\">\n        <circle\n            cx=\"50%\"\n            cy=\"50%\"\n            stroke-linecap=\"round\"\n            class=\"kbq-progress-spinner__circle\"\n            [class.kbq-animations-disabled]=\"animationsDisabled\"\n            [attr.r]=\"svgCircleRadius()\"\n            [style]=\"{ 'stroke-dashoffset': mode() === 'determinate' ? dashOffsetPercent() : null }\"\n        />\n    </svg>\n</div>\n\n<div class=\"kbq-progress-spinner__content\">\n    <ng-content select=\"[kbq-progress-spinner-text]\" />\n    <ng-content select=\"[kbq-progress-spinner-caption]\" />\n</div>\n","import { PlatformModule } from '@angular/cdk/platform';\nimport { NgModule } from '@angular/core';\nimport { KbqProgressSpinner, KbqProgressSpinnerCaption, KbqProgressSpinnerText } from './progress-spinner.component';\n\n@NgModule({\n    imports: [\n        PlatformModule,\n        KbqProgressSpinner,\n        KbqProgressSpinnerText,\n        KbqProgressSpinnerCaption\n    ],\n    exports: [\n        KbqProgressSpinner,\n        KbqProgressSpinnerText,\n        KbqProgressSpinnerCaption\n    ]\n})\nexport class KbqProgressSpinnerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAmBA,MAAM,WAAW,GAAG,CAAC;AACrB,MAAM,WAAW,GAAG,GAAG;AACvB,MAAM,cAAc,GAAG,GAAG;AAE1B,MAAM,iBAAiB,GAAG,KAAK;AAC/B,MAAM,qBAAqB,GAAG,OAAO;AAErC;MAOa,sBAAsB,CAAA;kIAAtB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,2BAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBANlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,6BAA6B;AACvC,oBAAA,IAAI,EAAE;AACF,wBAAA,KAAK,EAAE;AACV;AACJ,iBAAA;;AAGD;MAOa,yBAAyB,CAAA;kIAAzB,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,8BAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAAzB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBANrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,gCAAgC;AAC1C,oBAAA,IAAI,EAAE;AACF,wBAAA,KAAK,EAAE;AACV;AACJ,iBAAA;;AAGD;AAcM,MAAO,kBAAmB,SAAQ,iBAAiB,CAAA;AA0CrD,IAAA,WAAA,GAAA;AACI,QAAA,KAAK,EAAE;;AAzCF,QAAA,IAAA,CAAA,EAAE,GAAG,KAAK,CAAS,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,uBAAuB,CAAC,yEAAC;AAEhF;;;;;;;AAOG;AACM,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,CAAC,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,OAAA,EAAA,8BAAA,EAAA,CAAA,EACpB,SAAS,EAAE,CAAC,KAAyC,KAAK,eAAe,CAAC,KAAK,EAAE,CAAC,CAAC,GACrF;;AAGO,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAsB,aAAa,2EAAC;;AAGhD,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAsB,SAAS,2EAAC;;QAGlC,IAAA,CAAA,eAAe,GAAG,QAAQ,CAAS,MAClD,IAAI,CAAC,IAAI,EAAE,KAAK,KAAK,GAAG,iBAAiB,GAAG,qBAAqB,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CACpE;;QAGkB,IAAA,CAAA,UAAU,GAAG,QAAQ,CACpC,MAAM,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,WAAW,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,YAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CACjF;;AAGkB,QAAA,IAAA,CAAA,iBAAiB,GAAG,QAAQ,CAAC,MAAM,CAAA,EAAG,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,GAAG,cAAc,CAAA,CAAA,CAAG,wFAAC;AAEhH;;;;AAIG;QACgB,IAAA,CAAA,kBAAkB,GAAG,qBAAqB,EAAE;AAK3D,QAAA,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,KAAK,CAAC;IAClD;kIA9CS,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,yxBC1D/B,wwBAkBA,EAAA,MAAA,EAAA,CAAA,44GAAA,EAAA,25BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FDwCa,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAb9B,SAAS;+BACI,sBAAsB,EAAA,eAAA,EAGf,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACF,wBAAA,KAAK,EAAE,sBAAsB;AAC7B,wBAAA,kCAAkC,EAAE,CAAA,gBAAA,CAAkB;AACtD,wBAAA,4CAA4C,EAAE,CAAA,0BAAA,CAA4B;AAC1E,wBAAA,WAAW,EAAE;AAChB,qBAAA,EAAA,QAAA,EAAA,wwBAAA,EAAA,MAAA,EAAA,CAAA,44GAAA,EAAA,25BAAA,CAAA,EAAA;;;MEvCQ,wBAAwB,CAAA;kIAAxB,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAxB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,wBAAwB,YAX7B,cAAc;YACd,kBAAkB;YAClB,sBAAsB;AACtB,YAAA,yBAAyB,aAGzB,kBAAkB;YAClB,sBAAsB;YACtB,yBAAyB,CAAA,EAAA,CAAA,CAAA;AAGpB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,wBAAwB,YAX7B,cAAc,CAAA,EAAA,CAAA,CAAA;;4FAWT,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAbpC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;wBACL,cAAc;wBACd,kBAAkB;wBAClB,sBAAsB;wBACtB;AACH,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL,kBAAkB;wBAClB,sBAAsB;wBACtB;AACH;AACJ,iBAAA;;;AChBD;;AAEG;;;;"}