@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-sort.mjs

@@ -0,0 +1,140 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, model, input, output, Directive, inject, ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { Subject } from 'rxjs';
+
+const SORT = new InjectionToken('SORT');
+
+class SortDirective {
+    active = model('', { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), alias: 'ngsSortActive' });
+    start = input('asc', { ...(ngDevMode ? { debugName: "start" } : /* istanbul ignore next */ {}), alias: 'ngsSortStart' });
+    direction = model('', { ...(ngDevMode ? { debugName: "direction" } : /* istanbul ignore next */ {}), alias: 'ngsSortDirection' });
+    disableClear = input(false, { ...(ngDevMode ? { debugName: "disableClear" } : /* istanbul ignore next */ {}), alias: 'ngsSortDisableClear',
+        transform: (value) => typeof value === 'string' ? value === '' || value === 'true' : value });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'ngsSortDisabled',
+        transform: (value) => typeof value === 'string' ? value === '' || value === 'true' : value });
+    sortChange = output({ alias: 'ngsSortChange' });
+    _stateChanges = new Subject();
+    _initialized = new Subject();
+    initialized = this._initialized.asObservable();
+    ngOnInit() {
+        this._initialized.next();
+        this._initialized.complete();
+    }
+    ngOnChanges() {
+        this._stateChanges.next();
+    }
+    ngOnDestroy() {
+        this._stateChanges.complete();
+    }
+    sort(id) {
+        const direction = this.getNextSortDirection(id);
+        this.active.set(id);
+        this.direction.set(direction);
+        this.sortChange.emit({ active: id, direction });
+        this._stateChanges.next();
+    }
+    getNextSortDirection(id) {
+        if (this.active() !== id) {
+            return this.start() || 'asc';
+        }
+        if (this.direction() === 'asc') {
+            return 'desc';
+        }
+        if (this.direction() === 'desc' && !this.disableClear()) {
+            return '';
+        }
+        return 'asc';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: SortDirective, isStandalone: true, selector: "[ngsSort]", inputs: { active: { classPropertyName: "active", publicName: "ngsSortActive", isSignal: true, isRequired: false, transformFunction: null }, start: { classPropertyName: "start", publicName: "ngsSortStart", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "ngsSortDirection", isSignal: true, isRequired: false, transformFunction: null }, disableClear: { classPropertyName: "disableClear", publicName: "ngsSortDisableClear", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngsSortDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "ngsSortActiveChange", direction: "ngsSortDirectionChange", sortChange: "ngsSortChange" }, providers: [{ provide: SORT, useExisting: SortDirective }], exportAs: ["ngsSort"], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SortDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsSort]',
+                    exportAs: 'ngsSort',
+                    providers: [{ provide: SORT, useExisting: SortDirective }],
+                    standalone: true,
+                }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsSortActive", required: false }] }, { type: i0.Output, args: ["ngsSortActiveChange"] }], start: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsSortStart", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsSortDirection", required: false }] }, { type: i0.Output, args: ["ngsSortDirectionChange"] }], disableClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsSortDisableClear", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsSortDisabled", required: false }] }], sortChange: [{ type: i0.Output, args: ["ngsSortChange"] }] } });
+
+class SortHeader {
+    _rerenderSubscription;
+    _cdr = inject(ChangeDetectorRef);
+    id = input('', { ...(ngDevMode ? { debugName: "id" } : /* istanbul ignore next */ {}), alias: 'ngs-sort-header' });
+    sortActionDescription = input('', ...(ngDevMode ? [{ debugName: "sortActionDescription" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (value) => typeof value === 'string' ? value === '' || value === 'true' : value });
+    _sort = inject(SORT, { optional: true });
+    ngOnInit() {
+        if (this._sort && this._sort._stateChanges) {
+            this._rerenderSubscription = this._sort._stateChanges.subscribe(() => {
+                this._cdr.markForCheck();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this._rerenderSubscription?.unsubscribe();
+    }
+    _handleClick() {
+        if (!this._isDisabled() && this._sort) {
+            this._sort.sort(this.id());
+        }
+    }
+    _getNextSortDirection() {
+        if (!this._sort || this._isDisabled()) {
+            return '';
+        }
+        return this._sort.getNextSortDirection(this.id());
+    }
+    _isSorted() {
+        if (!this._sort) {
+            return false;
+        }
+        const active = typeof this._sort.active === 'function' ? this._sort.active() : this._sort.active;
+        const direction = typeof this._sort.direction === 'function' ? this._sort.direction() : this._sort.direction;
+        return !!(active === this.id() && direction);
+    }
+    _isDisabled() {
+        return this.disabled() || this._isSortDisabled();
+    }
+    _isSortDisabled() {
+        return typeof this._sort?.disabled === 'function' ? this._sort.disabled() : this._sort?.disabled;
+    }
+    _getArrowState() {
+        if (!this._sort) {
+            return 'void';
+        }
+        const active = typeof this._sort.active === 'function' ? this._sort.active() : this._sort.active;
+        const direction = typeof this._sort.direction === 'function' ? this._sort.direction() : this._sort.direction;
+        return active === this.id() ? direction : 'void';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SortHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: SortHeader, isStandalone: true, selector: "[ngs-sort-header]", inputs: { id: { classPropertyName: "id", publicName: "ngs-sort-header", isSignal: true, isRequired: false, transformFunction: null }, sortActionDescription: { classPropertyName: "sortActionDescription", publicName: "sortActionDescription", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngs-sort-header-disabled": "_isDisabled()" }, classAttribute: "ngs-sort-header" }, exportAs: ["ngsSortHeader"], ngImport: i0, template: "<div class=\"ngs-sort-header-container\"\n     [class.ngs-sort-header-sorted]=\"_isSorted()\">\n  <div class=\"ngs-sort-header-button relative\"\n          [attr.aria-label]=\"sortActionDescription()\"\n          (click)=\"_handleClick()\">\n    <ng-content />\n    <div class=\"ngs-sort-header-arrow\"\n         [class.ngs-sort-header-arrow-asc]=\"_getArrowState() === 'asc' || (!_isDisabled() && _getArrowState() === 'void' && _getNextSortDirection() === 'asc')\"\n         [class.ngs-sort-header-arrow-desc]=\"_getArrowState() === 'desc' || (!_isDisabled() && _getArrowState() === 'void' && _getNextSortDirection() === 'desc')\"\n         [class.ngs-sort-header-arrow-hint]=\"_getArrowState() === 'void' && !_isDisabled()\">\n      <svg viewBox=\"0 0 24 24\" focusable=\"false\" class=\"ngs-sort-header-arrow-svg\">\n        <path d=\"M7 10l5 5 5-5z\"/>\n      </svg>\n    </div>\n  </div>\n</div>\n", styles: [".ngs-sort-header-container{display:flex;align-items:center;cursor:pointer;position:relative;justify-content:flex-start;-webkit-user-select:text;user-select:text}.ngs-sort-header-button{border:none;background:transparent;padding:0;font:inherit;color:inherit;cursor:pointer;display:flex;align-items:center;width:100%;text-align:inherit;justify-content:inherit;-webkit-user-select:text;user-select:text}.ngs-sort-header-arrow{display:flex;align-items:center;justify-content:center;margin-left:calc(var(--spacing, .25rem) * .5);opacity:0;transition:transform .2s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1)}.ngs-sort-header-arrow.ngs-sort-header-arrow-asc{opacity:1;transform:translateY(0)}.ngs-sort-header-arrow.ngs-sort-header-arrow-desc{opacity:1;transform:translateY(0) rotate(180deg)}.ngs-sort-header-arrow.ngs-sort-header-arrow-hint{opacity:0}.ngs-sort-header:hover:not(.ngs-sort-header-disabled) .ngs-sort-header-arrow.ngs-sort-header-arrow-hint{opacity:.54}.ngs-sort-header-arrow-svg{width:20px;height:20px;fill:currentColor}.ngs-sort-header-disabled,.ngs-sort-header-disabled .ngs-sort-header-button{cursor:default}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SortHeader, decorators: [{
+            type: Component,
+            args: [{ selector: '[ngs-sort-header]', exportAs: 'ngsSortHeader', host: {
+                        'class': 'ngs-sort-header',
+                        '[class.ngs-sort-header-disabled]': '_isDisabled()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [], template: "<div class=\"ngs-sort-header-container\"\n     [class.ngs-sort-header-sorted]=\"_isSorted()\">\n  <div class=\"ngs-sort-header-button relative\"\n          [attr.aria-label]=\"sortActionDescription()\"\n          (click)=\"_handleClick()\">\n    <ng-content />\n    <div class=\"ngs-sort-header-arrow\"\n         [class.ngs-sort-header-arrow-asc]=\"_getArrowState() === 'asc' || (!_isDisabled() && _getArrowState() === 'void' && _getNextSortDirection() === 'asc')\"\n         [class.ngs-sort-header-arrow-desc]=\"_getArrowState() === 'desc' || (!_isDisabled() && _getArrowState() === 'void' && _getNextSortDirection() === 'desc')\"\n         [class.ngs-sort-header-arrow-hint]=\"_getArrowState() === 'void' && !_isDisabled()\">\n      <svg viewBox=\"0 0 24 24\" focusable=\"false\" class=\"ngs-sort-header-arrow-svg\">\n        <path d=\"M7 10l5 5 5-5z\"/>\n      </svg>\n    </div>\n  </div>\n</div>\n", styles: [".ngs-sort-header-container{display:flex;align-items:center;cursor:pointer;position:relative;justify-content:flex-start;-webkit-user-select:text;user-select:text}.ngs-sort-header-button{border:none;background:transparent;padding:0;font:inherit;color:inherit;cursor:pointer;display:flex;align-items:center;width:100%;text-align:inherit;justify-content:inherit;-webkit-user-select:text;user-select:text}.ngs-sort-header-arrow{display:flex;align-items:center;justify-content:center;margin-left:calc(var(--spacing, .25rem) * .5);opacity:0;transition:transform .2s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1)}.ngs-sort-header-arrow.ngs-sort-header-arrow-asc{opacity:1;transform:translateY(0)}.ngs-sort-header-arrow.ngs-sort-header-arrow-desc{opacity:1;transform:translateY(0) rotate(180deg)}.ngs-sort-header-arrow.ngs-sort-header-arrow-hint{opacity:0}.ngs-sort-header:hover:not(.ngs-sort-header-disabled) .ngs-sort-header-arrow.ngs-sort-header-arrow-hint{opacity:.54}.ngs-sort-header-arrow-svg{width:20px;height:20px;fill:currentColor}.ngs-sort-header-disabled,.ngs-sort-header-disabled .ngs-sort-header-button{cursor:default}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngs-sort-header", required: false }] }], sortActionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortActionDescription", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class SortModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SortModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: SortModule, imports: [SortDirective, SortHeader], exports: [SortDirective, SortHeader] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SortModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SortModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SortDirective, SortHeader],
+                    exports: [SortDirective, SortHeader],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SORT, SortDirective, SortHeader, SortModule };
+//# sourceMappingURL=ngstarter-ui-components-sort.mjs.map

package/fesm2022/ngstarter-ui-components-sort.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-sort.mjs","sources":["../../../projects/components/sort/src/sort/sort-interface.ts","../../../projects/components/sort/src/sort/sort.ts","../../../projects/components/sort/src/sort/sort-header.ts","../../../projects/components/sort/src/sort/sort-header.html","../../../projects/components/sort/src/sort/sort-module.ts","../../../projects/components/sort/ngstarter-ui-components-sort.ts"],"sourcesContent":["import { InjectionToken, OutputEmitterRef } from '@angular/core';\nimport { SortDirection } from './sort-direction';\nimport { Observable } from 'rxjs';\n\nexport interface Sort {\n  readonly active: string;\n  readonly direction: SortDirection;\n}\n\nexport interface EmrSort {\n  readonly active: string | (() => string);\n  readonly direction: SortDirection | (() => SortDirection);\n  readonly sortChange: Observable<Sort> | OutputEmitterRef<Sort>;\n  readonly initialized?: Observable<void>;\n}\n\nexport const SORT = new InjectionToken<EmrSort>('SORT');\n","import {\n  Directive,\n  input,\n  model,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  output\n} from '@angular/core';\nimport { SortDirection } from './sort-direction';\nimport { Sort, EmrSort, SORT } from './sort-interface';\nimport { Subject } from 'rxjs';\n\n@Directive({\n  selector: '[ngsSort]',\n  exportAs: 'ngsSort',\n  providers: [{ provide: SORT, useExisting: SortDirective }],\n  standalone: true,\n})\nexport class SortDirective implements OnInit, OnChanges, OnDestroy, EmrSort {\n  active = model('', { alias: 'ngsSortActive' });\n\n  start = input<SortDirection>('asc', { alias: 'ngsSortStart' });\n\n  direction = model<SortDirection>('', { alias: 'ngsSortDirection' });\n\n  disableClear = input(false, {\n    alias: 'ngsSortDisableClear',\n    transform: (value: boolean | string) => typeof value === 'string' ? value === '' || value === 'true' : value\n  });\n\n  disabled = input(false, {\n    alias: 'ngsSortDisabled',\n    transform: (value: boolean | string) => typeof value === 'string' ? value === '' || value === 'true' : value\n  });\n\n  readonly sortChange = output<Sort>({ alias: 'ngsSortChange' });\n\n  readonly _stateChanges = new Subject<void>();\n\n  private readonly _initialized = new Subject<void>();\n  readonly initialized = this._initialized.asObservable();\n\n  ngOnInit() {\n    this._initialized.next();\n    this._initialized.complete();\n  }\n\n  ngOnChanges() {\n    this._stateChanges.next();\n  }\n\n  ngOnDestroy() {\n    this._stateChanges.complete();\n  }\n\n  sort(id: string) {\n    const direction = this.getNextSortDirection(id);\n    this.active.set(id);\n    this.direction.set(direction);\n    this.sortChange.emit({ active: id, direction });\n    this._stateChanges.next();\n  }\n\n  getNextSortDirection(id: string): SortDirection {\n    if (this.active() !== id) {\n      return this.start() || 'asc';\n    }\n\n    if (this.direction() === 'asc') {\n      return 'desc';\n    }\n\n    if (this.direction() === 'desc' && !this.disableClear()) {\n      return '';\n    }\n\n    return 'asc';\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  inject,\n  input,\n  OnDestroy,\n  OnInit,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { SORT } from './sort-interface';\nimport { Subscription } from 'rxjs';\n\n@Component({\n  selector: '[ngs-sort-header]',\n  exportAs: 'ngsSortHeader',\n  templateUrl: './sort-header.html',\n  styleUrls: ['./sort-header.scss'],\n  host: {\n    'class': 'ngs-sort-header',\n    '[class.ngs-sort-header-disabled]': '_isDisabled()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [],\n})\nexport class SortHeader implements OnInit, OnDestroy {\n  private _rerenderSubscription: Subscription | undefined;\n  private _cdr = inject(ChangeDetectorRef);\n\n  id = input('', { alias: 'ngs-sort-header' });\n  sortActionDescription = input<string>('');\n  disabled = input(false, {\n    transform: (value: boolean | string) => typeof value === 'string' ? value === '' || value === 'true' : value\n  });\n\n  _sort = inject(SORT, { optional: true });\n\n  ngOnInit() {\n    if (this._sort && (this._sort as any)._stateChanges) {\n      this._rerenderSubscription = (this._sort as any)._stateChanges.subscribe(() => {\n        this._cdr.markForCheck();\n      });\n    }\n  }\n\n  ngOnDestroy() {\n    this._rerenderSubscription?.unsubscribe();\n  }\n\n  _handleClick() {\n    if (!this._isDisabled() && this._sort) {\n      (this._sort as any).sort(this.id());\n    }\n  }\n\n  _getNextSortDirection(): string {\n    if (!this._sort || this._isDisabled()) {\n      return '';\n    }\n    return (this._sort as any).getNextSortDirection(this.id());\n  }\n\n  _isSorted(): boolean {\n    if (!this._sort) {\n      return false;\n    }\n\n    const active = typeof this._sort.active === 'function' ? this._sort.active() : this._sort.active;\n    const direction = typeof this._sort.direction === 'function' ? this._sort.direction() : this._sort.direction;\n    return !!(active === this.id() && direction);\n  }\n\n  _isDisabled(): boolean {\n    return this.disabled() || this._isSortDisabled();\n  }\n\n  _isSortDisabled(): boolean {\n    return typeof (this._sort as any)?.disabled === 'function' ? (this._sort as any).disabled() : (this._sort as any)?.disabled;\n  }\n\n  _getArrowState() {\n    if (!this._sort) {\n      return 'void';\n    }\n\n    const active = typeof this._sort.active === 'function' ? this._sort.active() : this._sort.active;\n    const direction = typeof this._sort.direction === 'function' ? this._sort.direction() : this._sort.direction;\n    return active === this.id() ? direction : 'void';\n  }\n}\n","<div class=\"ngs-sort-header-container\"\n     [class.ngs-sort-header-sorted]=\"_isSorted()\">\n  <div class=\"ngs-sort-header-button relative\"\n          [attr.aria-label]=\"sortActionDescription()\"\n          (click)=\"_handleClick()\">\n    <ng-content />\n    <div class=\"ngs-sort-header-arrow\"\n         [class.ngs-sort-header-arrow-asc]=\"_getArrowState() === 'asc' || (!_isDisabled() && _getArrowState() === 'void' && _getNextSortDirection() === 'asc')\"\n         [class.ngs-sort-header-arrow-desc]=\"_getArrowState() === 'desc' || (!_isDisabled() && _getArrowState() === 'void' && _getNextSortDirection() === 'desc')\"\n         [class.ngs-sort-header-arrow-hint]=\"_getArrowState() === 'void' && !_isDisabled()\">\n      <svg viewBox=\"0 0 24 24\" focusable=\"false\" class=\"ngs-sort-header-arrow-svg\">\n        <path d=\"M7 10l5 5 5-5z\"/>\n      </svg>\n    </div>\n  </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { SortDirective } from './sort';\nimport { SortHeader } from './sort-header';\n\n@NgModule({\n  imports: [SortDirective, SortHeader],\n  exports: [SortDirective, SortHeader],\n})\nexport class SortModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-spinner.mjs

@@ -0,0 +1,75 @@
+import * as i0 from '@angular/core';
+import { input, numberAttribute, inject, ElementRef, computed, Component, NgModule } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+
+const BASE_SIZE = 100;
+const BASE_STROKE_WIDTH = 10;
+class ProgressSpinner {
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    mode = input('indeterminate', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    value = input(0, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    diameter = input(100, { ...(ngDevMode ? { debugName: "diameter" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    strokeWidth = input(undefined, { ...(ngDevMode ? { debugName: "strokeWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    _elementRef = inject(ElementRef);
+    _actualStrokeWidth = computed(() => this.strokeWidth() || this.diameter() / 10, ...(ngDevMode ? [{ debugName: "_actualStrokeWidth" }] : /* istanbul ignore next */ []));
+    _circleRadius() {
+        return (this.diameter() - BASE_STROKE_WIDTH) / 2;
+    }
+    _viewBox() {
+        const viewBox = this._circleRadius() * 2 + this._actualStrokeWidth();
+        return `0 0 ${viewBox} ${viewBox}`;
+    }
+    _strokeCircumference() {
+        return 2 * Math.PI * this._circleRadius();
+    }
+    _strokeDashOffset() {
+        if (this.mode() === 'determinate') {
+            return (this._strokeCircumference() * (100 - this.value())) / 100;
+        }
+        return null;
+    }
+    _circleStrokeWidth() {
+        return (this._actualStrokeWidth() / this.diameter()) * 100;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ProgressSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: ProgressSpinner, isStandalone: true, selector: "ngs-progress-spinner", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "class.mdc-circular-progress--indeterminate": "mode() === \"indeterminate\"", "class.ngs-progress-spinner-indeterminate": "mode() === \"indeterminate\"", "class.ngs-progress-spinner-determinate": "mode() === \"determinate\"", "style.width.px": "diameter()", "style.height.px": "diameter()", "style.--ngs-progress-spinner-size": "diameter() + \"px\"", "style.--ngs-progress-spinner-active-indicator-width": "diameter() + \"px\"", "class": "\"ngs-\" + color()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.aria-valuenow": "mode() === \"determinate\" ? value() : null", "attr.mode": "mode()" }, classAttribute: "ngs-progress-spinner" }, exportAs: ["ngsProgressSpinner"], ngImport: i0, template: "<ng-template #circle>\n  <svg [attr.viewBox]=\"_viewBox()\" class=\"ngs-circular-progress__indeterminate-circle-graphic\"\n       xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n    <circle [attr.r]=\"_circleRadius()\"\n            [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n            [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n            [style.stroke-width.%]=\"_circleStrokeWidth()\"\n            cx=\"50%\" cy=\"50%\"/>\n  </svg>\n</ng-template>\n\n<div class=\"ngs-circular-progress__determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n  <svg [attr.viewBox]=\"_viewBox()\" class=\"ngs-circular-progress__determinate-circle-graphic\"\n       xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n    <circle [attr.r]=\"_circleRadius()\"\n            [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n            [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n            [style.stroke-width.%]=\"_circleStrokeWidth()\"\n            class=\"ngs-circular-progress__determinate-circle\"\n            cx=\"50%\" cy=\"50%\"/>\n  </svg>\n</div>\n<div class=\"ngs-circular-progress__indeterminate-container\" aria-hidden=\"true\">\n  <div class=\"ngs-circular-progress__spinner-layer\">\n    <div class=\"ngs-circular-progress__circle-clipper ngs-circular-progress__circle-left\">\n      <ng-container [ngTemplateOutlet]=\"circle\" />\n    </div>\n    <div class=\"ngs-circular-progress__gap-patch\">\n      <ng-container [ngTemplateOutlet]=\"circle\" />\n    </div>\n    <div class=\"ngs-circular-progress__circle-clipper ngs-circular-progress__circle-right\">\n      <ng-container [ngTemplateOutlet]=\"circle\" />\n    </div>\n  </div>\n</div>\n", styles: [":host{--ngs-progress-spinner-color: var(--color-primary);--ngs-progress-spinner-animation-multiplier: 1}:host.ngs-primary{--ngs-progress-spinner-color: var(--color-primary)}:host.ngs-accent{--ngs-progress-spinner-color: var(--color-secondary)}:host.ngs-warn{--ngs-progress-spinner-color: var(--color-error)}:host{display:block;overflow:hidden;line-height:0;position:relative;direction:ltr;transition:opacity .25s cubic-bezier(.4,0,.6,1)}:host circle{stroke-width:var(--ngs-progress-spinner-active-indicator-width, 4px);fill:#0000;stroke:var(--ngs-progress-spinner-color)}:host.ngs-progress-spinner-determinate .ngs-circular-progress__determinate-container{opacity:1}:host.ngs-progress-spinner-indeterminate .ngs-circular-progress__indeterminate-container{opacity:1;animation:ngs-circular-progress-container-rotate calc(1.5682352941176s * var(--ngs-progress-spinner-animation-multiplier)) linear infinite}:host .ngs-circular-progress__determinate-container,:host .ngs-circular-progress__indeterminate-circle-graphic,:host .ngs-circular-progress__indeterminate-container,:host .ngs-circular-progress__spinner-layer{position:absolute;width:100%;height:100%}:host .ngs-circular-progress__determinate-container{transform:rotate(-90deg);opacity:0}:host .ngs-circular-progress__indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}:host .ngs-circular-progress__determinate-circle{transition:stroke-dashoffset .5s cubic-bezier(0,0,.2,1)}:host .ngs-circular-progress__gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}:host .ngs-circular-progress__gap-patch .ngs-circular-progress__indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}:host .ngs-circular-progress__circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}:host .ngs-circular-progress__circle-clipper .ngs-circular-progress__indeterminate-circle-graphic{width:200%}:host .ngs-circular-progress__circle-right .ngs-circular-progress__indeterminate-circle-graphic{left:-100%}:host .ngs-circular-progress__spinner-layer{animation:ngs-circular-progress-spinner-layer-rotate calc(5332ms * var(--ngs-progress-spinner-animation-multiplier)) cubic-bezier(.4,0,.2,1) infinite both}:host .ngs-circular-progress__circle-left .ngs-circular-progress__indeterminate-circle-graphic{animation:ngs-circular-progress-left-spin calc(1333ms * var(--ngs-progress-spinner-animation-multiplier)) cubic-bezier(.4,0,.2,1) infinite both}:host .ngs-circular-progress__circle-right .ngs-circular-progress__indeterminate-circle-graphic{animation:ngs-circular-progress-right-spin calc(1333ms * var(--ngs-progress-spinner-animation-multiplier)) cubic-bezier(.4,0,.2,1) infinite both}@keyframes ngs-circular-progress-container-rotate{to{transform:rotate(360deg)}}@keyframes ngs-circular-progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes ngs-circular-progress-left-spin{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}to{transform:rotate(265deg)}}@keyframes ngs-circular-progress-right-spin{0%{transform:rotate(-265deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-265deg)}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ProgressSpinner, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-progress-spinner', exportAs: 'ngsProgressSpinner', host: {
+                        'role': 'progressbar',
+                        'class': 'ngs-progress-spinner',
+                        'tabindex': '-1',
+                        '[class.mdc-circular-progress--indeterminate]': 'mode() === "indeterminate"',
+                        '[class.ngs-progress-spinner-indeterminate]': 'mode() === "indeterminate"',
+                        '[class.ngs-progress-spinner-determinate]': 'mode() === "determinate"',
+                        '[style.width.px]': 'diameter()',
+                        '[style.height.px]': 'diameter()',
+                        '[style.--ngs-progress-spinner-size]': 'diameter() + "px"',
+                        '[style.--ngs-progress-spinner-active-indicator-width]': 'diameter() + "px"',
+                        '[class]': '"ngs-" + color()',
+                        '[attr.aria-valuemin]': '0',
+                        '[attr.aria-valuemax]': '100',
+                        '[attr.aria-valuenow]': 'mode() === "determinate" ? value() : null',
+                        '[attr.mode]': 'mode()',
+                    }, standalone: true, imports: [NgTemplateOutlet], template: "<ng-template #circle>\n  <svg [attr.viewBox]=\"_viewBox()\" class=\"ngs-circular-progress__indeterminate-circle-graphic\"\n       xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n    <circle [attr.r]=\"_circleRadius()\"\n            [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n            [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n            [style.stroke-width.%]=\"_circleStrokeWidth()\"\n            cx=\"50%\" cy=\"50%\"/>\n  </svg>\n</ng-template>\n\n<div class=\"ngs-circular-progress__determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n  <svg [attr.viewBox]=\"_viewBox()\" class=\"ngs-circular-progress__determinate-circle-graphic\"\n       xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n    <circle [attr.r]=\"_circleRadius()\"\n            [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n            [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n            [style.stroke-width.%]=\"_circleStrokeWidth()\"\n            class=\"ngs-circular-progress__determinate-circle\"\n            cx=\"50%\" cy=\"50%\"/>\n  </svg>\n</div>\n<div class=\"ngs-circular-progress__indeterminate-container\" aria-hidden=\"true\">\n  <div class=\"ngs-circular-progress__spinner-layer\">\n    <div class=\"ngs-circular-progress__circle-clipper ngs-circular-progress__circle-left\">\n      <ng-container [ngTemplateOutlet]=\"circle\" />\n    </div>\n    <div class=\"ngs-circular-progress__gap-patch\">\n      <ng-container [ngTemplateOutlet]=\"circle\" />\n    </div>\n    <div class=\"ngs-circular-progress__circle-clipper ngs-circular-progress__circle-right\">\n      <ng-container [ngTemplateOutlet]=\"circle\" />\n    </div>\n  </div>\n</div>\n", styles: [":host{--ngs-progress-spinner-color: var(--color-primary);--ngs-progress-spinner-animation-multiplier: 1}:host.ngs-primary{--ngs-progress-spinner-color: var(--color-primary)}:host.ngs-accent{--ngs-progress-spinner-color: var(--color-secondary)}:host.ngs-warn{--ngs-progress-spinner-color: var(--color-error)}:host{display:block;overflow:hidden;line-height:0;position:relative;direction:ltr;transition:opacity .25s cubic-bezier(.4,0,.6,1)}:host circle{stroke-width:var(--ngs-progress-spinner-active-indicator-width, 4px);fill:#0000;stroke:var(--ngs-progress-spinner-color)}:host.ngs-progress-spinner-determinate .ngs-circular-progress__determinate-container{opacity:1}:host.ngs-progress-spinner-indeterminate .ngs-circular-progress__indeterminate-container{opacity:1;animation:ngs-circular-progress-container-rotate calc(1.5682352941176s * var(--ngs-progress-spinner-animation-multiplier)) linear infinite}:host .ngs-circular-progress__determinate-container,:host .ngs-circular-progress__indeterminate-circle-graphic,:host .ngs-circular-progress__indeterminate-container,:host .ngs-circular-progress__spinner-layer{position:absolute;width:100%;height:100%}:host .ngs-circular-progress__determinate-container{transform:rotate(-90deg);opacity:0}:host .ngs-circular-progress__indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}:host .ngs-circular-progress__determinate-circle{transition:stroke-dashoffset .5s cubic-bezier(0,0,.2,1)}:host .ngs-circular-progress__gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}:host .ngs-circular-progress__gap-patch .ngs-circular-progress__indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}:host .ngs-circular-progress__circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}:host .ngs-circular-progress__circle-clipper .ngs-circular-progress__indeterminate-circle-graphic{width:200%}:host .ngs-circular-progress__circle-right .ngs-circular-progress__indeterminate-circle-graphic{left:-100%}:host .ngs-circular-progress__spinner-layer{animation:ngs-circular-progress-spinner-layer-rotate calc(5332ms * var(--ngs-progress-spinner-animation-multiplier)) cubic-bezier(.4,0,.2,1) infinite both}:host .ngs-circular-progress__circle-left .ngs-circular-progress__indeterminate-circle-graphic{animation:ngs-circular-progress-left-spin calc(1333ms * var(--ngs-progress-spinner-animation-multiplier)) cubic-bezier(.4,0,.2,1) infinite both}:host .ngs-circular-progress__circle-right .ngs-circular-progress__indeterminate-circle-graphic{animation:ngs-circular-progress-right-spin calc(1333ms * var(--ngs-progress-spinner-animation-multiplier)) cubic-bezier(.4,0,.2,1) infinite both}@keyframes ngs-circular-progress-container-rotate{to{transform:rotate(360deg)}}@keyframes ngs-circular-progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes ngs-circular-progress-left-spin{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}to{transform:rotate(265deg)}}@keyframes ngs-circular-progress-right-spin{0%{transform:rotate(-265deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-265deg)}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }] } });
+class ProgressSpinnerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: ProgressSpinnerModule, imports: [ProgressSpinner], exports: [ProgressSpinner] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ProgressSpinnerModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ProgressSpinnerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [ProgressSpinner],
+                    exports: [ProgressSpinner],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ProgressSpinner, ProgressSpinnerModule };
+//# sourceMappingURL=ngstarter-ui-components-spinner.mjs.map

package/fesm2022/ngstarter-ui-components-spinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-spinner.mjs","sources":["../../../projects/components/spinner/src/spinner/progress-spinner.ts","../../../projects/components/spinner/src/spinner/progress-spinner.html","../../../projects/components/spinner/ngstarter-ui-components-spinner.ts"],"sourcesContent":["import {\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  NgModule,\n  numberAttribute,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\n\nexport type SpinnerMode = 'determinate' | 'indeterminate';\n\nconst BASE_SIZE = 100;\nconst BASE_STROKE_WIDTH = 10;\n\n@Component({\n  selector: 'ngs-progress-spinner',\n  exportAs: 'ngsProgressSpinner',\n  host: {\n    'role': 'progressbar',\n    'class': 'ngs-progress-spinner',\n    'tabindex': '-1',\n    '[class.mdc-circular-progress--indeterminate]': 'mode() === \"indeterminate\"',\n    '[class.ngs-progress-spinner-indeterminate]': 'mode() === \"indeterminate\"',\n    '[class.ngs-progress-spinner-determinate]': 'mode() === \"determinate\"',\n    '[style.width.px]': 'diameter()',\n    '[style.height.px]': 'diameter()',\n    '[style.--ngs-progress-spinner-size]': 'diameter() + \"px\"',\n    '[style.--ngs-progress-spinner-active-indicator-width]': 'diameter() + \"px\"',\n    '[class]': '\"ngs-\" + color()',\n    '[attr.aria-valuemin]': '0',\n    '[attr.aria-valuemax]': '100',\n    '[attr.aria-valuenow]': 'mode() === \"determinate\" ? value() : null',\n    '[attr.mode]': 'mode()',\n  },\n  templateUrl: './progress-spinner.html',\n  styleUrl: './progress-spinner.scss',\n  standalone: true,\n  imports: [NgTemplateOutlet]\n})\nexport class ProgressSpinner {\n  readonly color = input<string>('primary');\n  readonly mode = input<SpinnerMode>('indeterminate');\n  readonly value = input(0, { transform: numberAttribute });\n  readonly diameter = input(100, { transform: numberAttribute });\n  readonly strokeWidth = input<number | undefined, unknown>(undefined, { transform: numberAttribute });\n\n  public readonly _elementRef = inject(ElementRef);\n\n  readonly _actualStrokeWidth = computed(() => this.strokeWidth() || this.diameter() / 10);\n\n  _circleRadius() {\n    return (this.diameter() - BASE_STROKE_WIDTH) / 2;\n  }\n\n  _viewBox() {\n    const viewBox = this._circleRadius() * 2 + this._actualStrokeWidth();\n    return `0 0 ${viewBox} ${viewBox}`;\n  }\n\n  _strokeCircumference() {\n    return 2 * Math.PI * this._circleRadius();\n  }\n\n  _strokeDashOffset() {\n    if (this.mode() === 'determinate') {\n      return (this._strokeCircumference() * (100 - this.value())) / 100;\n    }\n    return null;\n  }\n\n  _circleStrokeWidth() {\n    return (this._actualStrokeWidth() / this.diameter()) * 100;\n  }\n}\n\n@NgModule({\n  imports: [ProgressSpinner],\n  exports: [ProgressSpinner],\n})\nexport class ProgressSpinnerModule {}\n","<ng-template #circle>\n  <svg [attr.viewBox]=\"_viewBox()\" class=\"ngs-circular-progress__indeterminate-circle-graphic\"\n       xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n    <circle [attr.r]=\"_circleRadius()\"\n            [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n            [style.stroke-dashoffset.px]=\"_strokeCircumference() / 2\"\n            [style.stroke-width.%]=\"_circleStrokeWidth()\"\n            cx=\"50%\" cy=\"50%\"/>\n  </svg>\n</ng-template>\n\n<div class=\"ngs-circular-progress__determinate-container\" aria-hidden=\"true\" #determinateSpinner>\n  <svg [attr.viewBox]=\"_viewBox()\" class=\"ngs-circular-progress__determinate-circle-graphic\"\n       xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\">\n    <circle [attr.r]=\"_circleRadius()\"\n            [style.stroke-dasharray.px]=\"_strokeCircumference()\"\n            [style.stroke-dashoffset.px]=\"_strokeDashOffset()\"\n            [style.stroke-width.%]=\"_circleStrokeWidth()\"\n            class=\"ngs-circular-progress__determinate-circle\"\n            cx=\"50%\" cy=\"50%\"/>\n  </svg>\n</div>\n<div class=\"ngs-circular-progress__indeterminate-container\" aria-hidden=\"true\">\n  <div class=\"ngs-circular-progress__spinner-layer\">\n    <div class=\"ngs-circular-progress__circle-clipper ngs-circular-progress__circle-left\">\n      <ng-container [ngTemplateOutlet]=\"circle\" />\n    </div>\n    <div class=\"ngs-circular-progress__gap-patch\">\n      <ng-container [ngTemplateOutlet]=\"circle\" />\n    </div>\n    <div class=\"ngs-circular-progress__circle-clipper ngs-circular-progress__circle-right\">\n      <ng-container [ngTemplateOutlet]=\"circle\" />\n    </div>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-splash-screen.mjs

@@ -0,0 +1,93 @@
+import * as i0 from '@angular/core';
+import { inject, Renderer2, ElementRef, input, numberAttribute, effect, afterNextRender, Component } from '@angular/core';
+import { signalStore, withState, withMethods, patchState, getState } from '@ngrx/signals';
+import { filter } from 'rxjs';
+import { Router, NavigationEnd } from '@angular/router';
+
+const initialState = {
+    visible: true
+};
+const SplashScreenStore = signalStore({ providedIn: 'root' }, withState(initialState), withMethods((store) => ({
+    show() {
+        patchState(store, {
+            visible: true
+        });
+    },
+    hide() {
+        patchState(store, {
+            visible: false
+        });
+    }
+})));
+
+class SplashScreen {
+    _store = inject(SplashScreenStore);
+    _renderer = inject(Renderer2);
+    _elementRef = inject(ElementRef);
+    _router = inject(Router);
+    animationDuration = input(500, { ...(ngDevMode ? { debugName: "animationDuration" } : /* istanbul ignore next */ {}), transform: numberAttribute }); // in milliseconds
+    hideDelay = input(1000, { ...(ngDevMode ? { debugName: "hideDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute }); // in milliseconds
+    constructor() {
+        const initialState = getState(this._store);
+        effect(() => {
+            const currentState = getState(this._store);
+            if (initialState.visible === currentState.visible) {
+                return;
+            }
+            if (currentState.visible) {
+                this._show();
+            }
+            else {
+                this._hide();
+            }
+        });
+        afterNextRender(() => {
+            const hideOnNavigationEnd = () => {
+                setTimeout(() => {
+                    this._hide();
+                }, this.hideDelay());
+            };
+            if (this._router.navigated) {
+                hideOnNavigationEnd();
+                return;
+            }
+            const subscription = this._router.events
+                .pipe(filter(event => event instanceof NavigationEnd))
+                .subscribe(() => {
+                subscription.unsubscribe();
+                hideOnNavigationEnd();
+            });
+        });
+    }
+    ngOnInit() {
+        this._renderer.setProperty(this._elementRef.nativeElement, '--ngs-splash-screen-hide-animation-duration', (this.animationDuration() / 1000) + 's');
+    }
+    _show() {
+        const loaderEl = this._elementRef.nativeElement;
+        this._renderer.setStyle(loaderEl, 'visibility', 'visible');
+        this._renderer.setStyle(loaderEl, 'zIndex', '9999999');
+    }
+    _hide() {
+        const loaderEl = this._elementRef.nativeElement;
+        this._renderer.addClass(loaderEl, 'hide');
+        setTimeout(() => {
+            this._renderer.setStyle(loaderEl, 'visibility', 'hidden');
+            this._renderer.setStyle(loaderEl, 'zIndex', '-9999999');
+        }, this.animationDuration());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SplashScreen, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: SplashScreen, isStandalone: true, selector: "ngs-splash-screen", inputs: { animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-splash-screen" }, exportAs: ["ngsSplashScreen"], ngImport: i0, template: "<div>\n  <ng-content select=\"ngs-logo\"/>\n  <ng-content/>\n</div>\n", styles: [":host{--ngs-splash-screen-bg: var(--color-background);-webkit-user-select:none;user-select:none;position:fixed;inset:0;z-index:9999999;display:flex;align-items:center;justify-content:center;flex-direction:column;visibility:visible;background:var(--ngs-splash-screen-bg);--ngs-splash-screen-hide-animation-duration: .5s}:host.hide{opacity:0;transition:opacity var(--ngs-splash-screen-hide-animation-duration) ease-in-out}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SplashScreen, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-splash-screen', exportAs: 'ngsSplashScreen', imports: [], host: {
+                        'class': 'ngs-splash-screen',
+                    }, template: "<div>\n  <ng-content select=\"ngs-logo\"/>\n  <ng-content/>\n</div>\n", styles: [":host{--ngs-splash-screen-bg: var(--color-background);-webkit-user-select:none;user-select:none;position:fixed;inset:0;z-index:9999999;display:flex;align-items:center;justify-content:center;flex-direction:column;visibility:visible;background:var(--ngs-splash-screen-bg);--ngs-splash-screen-hide-animation-duration: .5s}:host.hide{opacity:0;transition:opacity var(--ngs-splash-screen-hide-animation-duration) ease-in-out}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SplashScreen, SplashScreenStore };
+//# sourceMappingURL=ngstarter-ui-components-splash-screen.mjs.map

package/fesm2022/ngstarter-ui-components-splash-screen.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-splash-screen.mjs","sources":["../../../projects/components/splash-screen/src/splash-screen.store.ts","../../../projects/components/splash-screen/src/splash-screen/splash-screen.ts","../../../projects/components/splash-screen/src/splash-screen/splash-screen.html","../../../projects/components/splash-screen/ngstarter-ui-components-splash-screen.ts"],"sourcesContent":["import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';\n\nexport interface SplashScreenState {\n  visible: boolean;\n}\n\nconst initialState: SplashScreenState = {\n  visible: true\n};\n\nexport const SplashScreenStore = signalStore(\n  { providedIn: 'root' },\n  withState(initialState),\n  withMethods((store) => ({\n    show(): void {\n      patchState(store, {\n        visible: true\n      });\n    },\n    hide(): void {\n      patchState(store, {\n        visible: false\n      });\n    }\n  }))\n);\n","import {\n  afterNextRender,\n  Component,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  numberAttribute,\n  Renderer2\n} from '@angular/core';\nimport { getState } from '@ngrx/signals';\nimport { SplashScreenState, SplashScreenStore } from '../splash-screen.store';\nimport { filter } from 'rxjs';\nimport { NavigationEnd, Router } from '@angular/router';\n\n@Component({\n  selector: 'ngs-splash-screen',\n  exportAs: 'ngsSplashScreen',\n  imports: [],\n  templateUrl: './splash-screen.html',\n  styleUrl: './splash-screen.scss',\n  host: {\n    'class': 'ngs-splash-screen',\n  }\n})\nexport class SplashScreen {\n  private _store = inject(SplashScreenStore);\n  private _renderer = inject(Renderer2);\n  private _elementRef = inject(ElementRef);\n  private _router = inject(Router);\n\n  animationDuration = input(500, {\n    transform: numberAttribute\n  }); // in milliseconds\n  hideDelay = input(1000, {\n    transform: numberAttribute\n  }); // in milliseconds\n\n  constructor() {\n    const initialState = getState<SplashScreenState>(this._store);\n\n    effect(() => {\n      const currentState = getState<SplashScreenState>(this._store);\n\n      if (initialState.visible === currentState.visible) {\n        return;\n      }\n\n      if (currentState.visible) {\n        this._show();\n      } else {\n        this._hide();\n      }\n    });\n\n    afterNextRender(() => {\n      const hideOnNavigationEnd = () => {\n        setTimeout(() => {\n          this._hide();\n        }, this.hideDelay());\n      };\n\n      if (this._router.navigated) {\n        hideOnNavigationEnd();\n        return;\n      }\n\n      const subscription = this._router.events\n        .pipe(\n          filter(event=> event instanceof NavigationEnd)\n        )\n        .subscribe(() => {\n          subscription.unsubscribe();\n          hideOnNavigationEnd();\n        });\n    });\n  }\n\n  ngOnInit() {\n    this._renderer.setProperty(\n      this._elementRef.nativeElement, '--ngs-splash-screen-hide-animation-duration', (this.animationDuration() / 1000) + 's'\n    );\n  }\n\n  private _show(): void {\n    const loaderEl = this._elementRef.nativeElement as HTMLElement;\n    this._renderer.setStyle(loaderEl, 'visibility', 'visible');\n    this._renderer.setStyle(loaderEl, 'zIndex', '9999999');\n  }\n\n  private _hide(): void {\n    const loaderEl = this._elementRef.nativeElement as HTMLElement;\n    this._renderer.addClass(loaderEl, 'hide');\n    setTimeout(() => {\n      this._renderer.setStyle(loaderEl, 'visibility', 'hidden');\n      this._renderer.setStyle(loaderEl, 'zIndex', '-9999999');\n    }, this.animationDuration());\n  }\n}\n","<div>\n  <ng-content select=\"ngs-logo\"/>\n  <ng-content/>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}