@ngstarter-ui/components 1.0.21

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

@@ -0,0 +1,147 @@
+import * as i0 from '@angular/core';
+import { contentChildren, forwardRef, model, input, output, effect, ChangeDetectionStrategy, Component, booleanAttribute, computed, Optional, Inject } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class RadioGroup {
+    _radios = contentChildren(forwardRef(() => RadioButton), { ...(ngDevMode ? { debugName: "_radios" } : /* istanbul ignore next */ {}), descendants: true });
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    change = output();
+    constructor() {
+        effect(() => {
+            this._markRadiosForCheck();
+        });
+        effect(() => {
+            this._updateSelectedRadioFromValue();
+            this._onChange(this.value());
+        });
+    }
+    _onChange = () => { };
+    _onTouched = () => { };
+    ngAfterContentInit() {
+        this._updateSelectedRadioFromValue();
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    _emitChangeEvent(value) {
+        this._onChange(value);
+        this.change.emit({ source: this, value });
+    }
+    _updateSelectedRadioFromValue() {
+        const _radios = this._radios();
+        if (_radios) {
+            _radios.forEach(radio => {
+                radio.checked.set(this.value() === radio.value());
+            });
+        }
+    }
+    _markRadiosForCheck() {
+        const _radios = this._radios();
+        if (_radios) {
+            _radios.forEach(radio => radio._markForCheck());
+        }
+    }
+    _onRadioClick(radio) {
+        if (this.disabled() || radio.disabled()) {
+            return;
+        }
+        if (this.value() !== radio.value()) {
+            this.value.set(radio.value());
+            this._emitChangeEvent(this.value());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: RadioGroup, isStandalone: true, selector: "ngs-radio-group", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange", change: "change" }, host: { properties: { "attr.role": "\"radiogroup\"", "attr.aria-disabled": "disabled()" }, classAttribute: "ngs-radio-group" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RadioGroup),
+                multi: true
+            }
+        ], queries: [{ propertyName: "_radios", predicate: i0.forwardRef(() => RadioButton), descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:flex;flex-wrap:wrap;gap:1rem}:host[aria-disabled=true]{pointer-events:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-radio-group', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioGroup),
+                            multi: true
+                        }
+                    ], host: {
+                        'class': 'ngs-radio-group',
+                        '[attr.role]': '"radiogroup"',
+                        '[attr.aria-disabled]': 'disabled()',
+                    }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{display:flex;flex-wrap:wrap;gap:1rem}:host[aria-disabled=true]{pointer-events:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _radios: [{ type: i0.ContentChildren, args: [forwardRef(() => RadioButton), { ...{ descendants: true }, isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], change: [{ type: i0.Output, args: ["change"] }] } });
+
+let nextId = 0;
+class RadioButton {
+    radioGroup;
+    _changeDetectorRef;
+    id = input(`ngs-radio-button-${nextId++}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+        transform: booleanAttribute });
+    disabled = computed(() => {
+        return this.disabledInput() || (this.radioGroup && this.radioGroup.disabled());
+    }, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    change = output();
+    constructor(radioGroup, _changeDetectorRef) {
+        this.radioGroup = radioGroup;
+        this._changeDetectorRef = _changeDetectorRef;
+    }
+    ngOnInit() {
+        if (this.radioGroup && this.radioGroup.value() === this.value()) {
+            this.checked.set(true);
+        }
+    }
+    _onInputClick(event) {
+        event.stopPropagation();
+        if (this.radioGroup) {
+            this.radioGroup._onRadioClick(this);
+        }
+        else {
+            this.checked.set(true);
+            this.change.emit({ source: this, value: this.value() });
+        }
+    }
+    _markForCheck() {
+        this._changeDetectorRef.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioButton, deps: [{ token: forwardRef(() => RadioGroup), optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: RadioButton, isStandalone: true, selector: "ngs-radio-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", change: "change" }, host: { properties: { "class.ngs-radio-button-checked": "checked()", "class.ngs-radio-button-disabled": "disabled()", "attr.id": "id()" }, classAttribute: "ngs-radio-button" }, ngImport: i0, template: "\n<label class=\"ngs-radio-button-label\" [attr.for]=\"id() + '-input'\">\n  <span class=\"ngs-radio-button-container\">\n    <input\n      type=\"radio\"\n      class=\"ngs-radio-button-input\"\n      [id]=\"id() + '-input'\"\n      [name]=\"name() || (radioGroup ? radioGroup.name() : null)\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      [value]=\"value()\"\n      (click)=\"_onInputClick($event)\"\n    >\n    <span class=\"ngs-radio-button-outer-circle\"></span>\n    <span class=\"ngs-radio-button-inner-circle\"></span>\n  </span>\n  <span class=\"ngs-radio-button-label-content\">\n    <ng-content />\n  </span>\n</label>\n", styles: [":host{--ngs-radio-button-size: 19px;--ngs-radio-button-inner-circle-size: 10px;--ngs-radio-button-border-width: 1px;--ngs-radio-button-unchecked-color: var(--input-border-color);--ngs-radio-button-checked-color: var(--color-primary);--ngs-radio-button-disabled-color: var(--color-on-surface-variant);--ngs-radio-button-label-color: var(--color-on-surface);--ngs-radio-button-disabled-label-color: var(--color-on-surface-variant);--ngs-radio-button-gap: 8px;display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}:host.ngs-radio-button-disabled{cursor:default;pointer-events:none;--ngs-radio-button-unchecked-color: var(--color-on-surface);--ngs-radio-button-checked-color: var(--color-on-surface);--ngs-radio-button-label-color: var(--color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host.ngs-radio-button-disabled{--ngs-radio-button-unchecked-color: color-mix(in srgb, var(--color-on-surface), transparent 62%)}}@supports (color: color-mix(in lab,red,red)){:host.ngs-radio-button-disabled{--ngs-radio-button-checked-color: color-mix(in srgb, var(--color-on-surface), transparent 62%)}}@supports (color: color-mix(in lab,red,red)){:host.ngs-radio-button-disabled{--ngs-radio-button-label-color: color-mix(in srgb, var(--color-on-surface), transparent 62%)}}:host .ngs-radio-button-label{display:flex;align-items:center;cursor:inherit}:host .ngs-radio-button-container{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ngs-radio-button-size);height:var(--ngs-radio-button-size)}:host .ngs-radio-button-input{position:absolute;inset:0;opacity:0;cursor:inherit;z-index:1;margin:0}:host .ngs-radio-button-outer-circle{position:absolute;inset:0;border-radius:9999px;border-style:solid;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;border-width:var(--ngs-radio-button-border-width);border-color:var(--ngs-radio-button-unchecked-color)}:host .ngs-radio-button-inner-circle{border-radius:9999px;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;transform:scale(0);width:var(--ngs-radio-button-inner-circle-size);height:var(--ngs-radio-button-inner-circle-size);background:var(--ngs-radio-button-checked-color)}:host.ngs-radio-button-checked .ngs-radio-button-outer-circle{border-color:var(--ngs-radio-button-checked-color)}:host.ngs-radio-button-checked .ngs-radio-button-inner-circle{transform:scale(1)}:host .ngs-radio-button-label-content{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;padding-left:var(--ngs-radio-button-gap);color:var(--ngs-radio-button-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-radio-button', host: {
+                        '[class.ngs-radio-button-checked]': 'checked()',
+                        '[class.ngs-radio-button-disabled]': 'disabled()',
+                        '[attr.id]': 'id()',
+                        'class': 'ngs-radio-button',
+                    }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<label class=\"ngs-radio-button-label\" [attr.for]=\"id() + '-input'\">\n  <span class=\"ngs-radio-button-container\">\n    <input\n      type=\"radio\"\n      class=\"ngs-radio-button-input\"\n      [id]=\"id() + '-input'\"\n      [name]=\"name() || (radioGroup ? radioGroup.name() : null)\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      [value]=\"value()\"\n      (click)=\"_onInputClick($event)\"\n    >\n    <span class=\"ngs-radio-button-outer-circle\"></span>\n    <span class=\"ngs-radio-button-inner-circle\"></span>\n  </span>\n  <span class=\"ngs-radio-button-label-content\">\n    <ng-content />\n  </span>\n</label>\n", styles: [":host{--ngs-radio-button-size: 19px;--ngs-radio-button-inner-circle-size: 10px;--ngs-radio-button-border-width: 1px;--ngs-radio-button-unchecked-color: var(--input-border-color);--ngs-radio-button-checked-color: var(--color-primary);--ngs-radio-button-disabled-color: var(--color-on-surface-variant);--ngs-radio-button-label-color: var(--color-on-surface);--ngs-radio-button-disabled-label-color: var(--color-on-surface-variant);--ngs-radio-button-gap: 8px;display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}:host.ngs-radio-button-disabled{cursor:default;pointer-events:none;--ngs-radio-button-unchecked-color: var(--color-on-surface);--ngs-radio-button-checked-color: var(--color-on-surface);--ngs-radio-button-label-color: var(--color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host.ngs-radio-button-disabled{--ngs-radio-button-unchecked-color: color-mix(in srgb, var(--color-on-surface), transparent 62%)}}@supports (color: color-mix(in lab,red,red)){:host.ngs-radio-button-disabled{--ngs-radio-button-checked-color: color-mix(in srgb, var(--color-on-surface), transparent 62%)}}@supports (color: color-mix(in lab,red,red)){:host.ngs-radio-button-disabled{--ngs-radio-button-label-color: color-mix(in srgb, var(--color-on-surface), transparent 62%)}}:host .ngs-radio-button-label{display:flex;align-items:center;cursor:inherit}:host .ngs-radio-button-container{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ngs-radio-button-size);height:var(--ngs-radio-button-size)}:host .ngs-radio-button-input{position:absolute;inset:0;opacity:0;cursor:inherit;z-index:1;margin:0}:host .ngs-radio-button-outer-circle{position:absolute;inset:0;border-radius:9999px;border-style:solid;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;border-width:var(--ngs-radio-button-border-width);border-color:var(--ngs-radio-button-unchecked-color)}:host .ngs-radio-button-inner-circle{border-radius:9999px;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;transform:scale(0);width:var(--ngs-radio-button-inner-circle-size);height:var(--ngs-radio-button-inner-circle-size);background:var(--ngs-radio-button-checked-color)}:host.ngs-radio-button-checked .ngs-radio-button-outer-circle{border-color:var(--ngs-radio-button-checked-color)}:host.ngs-radio-button-checked .ngs-radio-button-inner-circle{transform:scale(1)}:host .ngs-radio-button-label-content{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;padding-left:var(--ngs-radio-button-gap);color:var(--ngs-radio-button-label-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [{ type: RadioGroup, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [forwardRef(() => RadioGroup)]
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RadioButton, RadioGroup };
+//# sourceMappingURL=ngstarter-ui-components-radio.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-radio.mjs","sources":["../../../projects/components/radio/src/radio-group/radio-group.ts","../../../projects/components/radio/src/radio-group/radio-group.html","../../../projects/components/radio/src/radio-button/radio-button.ts","../../../projects/components/radio/src/radio-button/radio-button.html","../../../projects/components/radio/ngstarter-ui-components-radio.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  forwardRef,\n  input,\n  output,\n  booleanAttribute,\n  model,\n  effect,\n  contentChildren\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { RadioButton } from '../radio-button/radio-button';\n\n@Component({\n  selector: 'ngs-radio-group',\n  templateUrl: './radio-group.html',\n  styleUrl: './radio-group.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => RadioGroup),\n      multi: true\n    }\n  ],\n  host: {\n    'class': 'ngs-radio-group',\n    '[attr.role]': '\"radiogroup\"',\n    '[attr.aria-disabled]': 'disabled()',\n  },\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RadioGroup implements ControlValueAccessor, AfterContentInit {\n  readonly _radios = contentChildren(forwardRef(() => RadioButton), { descendants: true });\n\n  disabled = model(false);\n\n  name = input<string>();\n  value = model<any>();\n\n  readonly change = output<any>();\n\n  constructor() {\n    effect(() => {\n      this._markRadiosForCheck();\n    });\n    effect(() => {\n      this._updateSelectedRadioFromValue();\n      this._onChange(this.value());\n    });\n  }\n\n  _onChange: (value: any) => void = () => {};\n  _onTouched: () => void = () => {};\n\n  ngAfterContentInit() {\n    this._updateSelectedRadioFromValue();\n  }\n\n  writeValue(value: any): void {\n    this.value.set(value);\n  }\n\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled.set(isDisabled);\n  }\n\n  _emitChangeEvent(value: any): void {\n    this._onChange(value);\n    this.change.emit({ source: this, value });\n  }\n\n  private _updateSelectedRadioFromValue() {\n    const _radios = this._radios();\n    if (_radios) {\n      _radios.forEach(radio => {\n        radio.checked.set(this.value() === radio.value());\n      });\n    }\n  }\n\n  private _markRadiosForCheck() {\n    const _radios = this._radios();\n    if (_radios) {\n      _radios.forEach(radio => radio._markForCheck());\n    }\n  }\n\n  _onRadioClick(radio: RadioButton) {\n    if (this.disabled() || radio.disabled()) {\n      return;\n    }\n\n    if (this.value() !== radio.value()) {\n      this.value.set(radio.value());\n      this._emitChangeEvent(this.value());\n    }\n  }\n}\n","<ng-content />\n","import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  forwardRef,\n  Inject,\n  input,\n  OnInit,\n  Optional,\n  output,\n  booleanAttribute,\n  model,\n  computed\n} from '@angular/core';\nimport { RadioGroup } from '../radio-group/radio-group';\n\nlet nextId = 0;\n\n@Component({\n  selector: 'ngs-radio-button',\n  templateUrl: './radio-button.html',\n  styleUrl: './radio-button.scss',\n  host: {\n    '[class.ngs-radio-button-checked]': 'checked()',\n    '[class.ngs-radio-button-disabled]': 'disabled()',\n    '[attr.id]': 'id()',\n    'class': 'ngs-radio-button',\n  },\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RadioButton implements OnInit {\n  id = input(`ngs-radio-button-${nextId++}`);\n  value = input<any>();\n  name = input<string>();\n  checked = model(false);\n  disabledInput = input(false, {\n    alias: 'disabled',\n    transform: booleanAttribute\n  });\n\n  disabled = computed(() => {\n    return this.disabledInput() || (this.radioGroup && this.radioGroup.disabled());\n  });\n\n  readonly change = output<any>();\n\n  constructor(\n    @Optional() @Inject(forwardRef(() => RadioGroup)) public radioGroup: RadioGroup,\n    private _changeDetectorRef: ChangeDetectorRef\n  ) {}\n\n  ngOnInit() {\n    if (this.radioGroup && this.radioGroup.value() === this.value()) {\n      this.checked.set(true);\n    }\n  }\n\n  _onInputClick(event: Event) {\n    event.stopPropagation();\n    if (this.radioGroup) {\n      this.radioGroup._onRadioClick(this);\n    } else {\n      this.checked.set(true);\n      this.change.emit({ source: this, value: this.value() });\n    }\n  }\n\n  _markForCheck() {\n    this._changeDetectorRef.markForCheck();\n  }\n}\n","\n<label class=\"ngs-radio-button-label\" [attr.for]=\"id() + '-input'\">\n  <span class=\"ngs-radio-button-container\">\n    <input\n      type=\"radio\"\n      class=\"ngs-radio-button-input\"\n      [id]=\"id() + '-input'\"\n      [name]=\"name() || (radioGroup ? radioGroup.name() : null)\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      [value]=\"value()\"\n      (click)=\"_onInputClick($event)\"\n    >\n    <span class=\"ngs-radio-button-outer-circle\"></span>\n    <span class=\"ngs-radio-button-inner-circle\"></span>\n  </span>\n  <span class=\"ngs-radio-button-label-content\">\n    <ng-content />\n  </span>\n</label>\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-rail-nav.mjs

@@ -0,0 +1,87 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, forwardRef, Component, inject, Directive } from '@angular/core';
+import { v7 } from 'uuid';
+import { Ripple } from '@ngstarter-ui/components/core';
+
+const RAIL_NAV = new InjectionToken('RAIL_NAV');
+
+class RailNav {
+    activeKey = input(...(ngDevMode ? [undefined, { debugName: "activeKey" }] : /* istanbul ignore next */ []));
+    _activeKey;
+    api = {
+        activateItem: (key) => {
+            this._activeKey = key;
+        },
+        getActiveKey: () => this._activeKey,
+        isActive: (key) => key === this._activeKey,
+    };
+    ngOnInit() {
+        this._activeKey = this.activeKey();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RailNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: RailNav, isStandalone: true, selector: "ngs-rail-nav", inputs: { activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-rail-nav" }, providers: [
+            {
+                provide: RAIL_NAV,
+                useExisting: forwardRef(() => RailNav),
+            }
+        ], exportAs: ["ngsRailNav"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{--ngs-rail-nav-bg: none;--ngs-rail-nav-bg-item-icon-is-active-bg: var(--nav-item-active-bg);--ngs-rail-nav-bg-item-icon-is-active-active-bg: var(--nav-item-active-bg);--ngs-rail-nav-bg-item-icon-hover-bg: var(--nav-item-hover-bg);--ngs-rail-nav-bg-item-icon-active-bg: var(--nav-item-hover-bg);--ngs-rail-nav-bg-item-icon-color: var(--nav-item-icon-color);--ngs-rail-nav-bg-item-icon-is-active-color: var(--nav-item-active-icon-color);--ngs-rail-nav-bg-item-active-color: var(--nav-item-active-color);--ngs-rail-nav-bg-item-color: var(--nav-item-color);--ngs-rail-nav-width: calc(var(--spacing, .25rem) * 24);--ngs-rail-nav-gap: calc(var(--spacing, .25rem) * 3);--ngs-rail-nav-padding: calc(var(--spacing, .25rem) * 0);display:flex;flex-direction:column;gap:var(--ngs-rail-nav-gap);width:var(--ngs-rail-nav-width);background:var(--ngs-rail-nav-bg);padding:var(--ngs-rail-nav-padding)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RailNav, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-rail-nav', exportAs: 'ngsRailNav', imports: [], providers: [
+                        {
+                            provide: RAIL_NAV,
+                            useExisting: forwardRef(() => RailNav),
+                        }
+                    ], host: {
+                        'class': 'ngs-rail-nav'
+                    }, template: "<ng-content/>\n", styles: [":host{--ngs-rail-nav-bg: none;--ngs-rail-nav-bg-item-icon-is-active-bg: var(--nav-item-active-bg);--ngs-rail-nav-bg-item-icon-is-active-active-bg: var(--nav-item-active-bg);--ngs-rail-nav-bg-item-icon-hover-bg: var(--nav-item-hover-bg);--ngs-rail-nav-bg-item-icon-active-bg: var(--nav-item-hover-bg);--ngs-rail-nav-bg-item-icon-color: var(--nav-item-icon-color);--ngs-rail-nav-bg-item-icon-is-active-color: var(--nav-item-active-icon-color);--ngs-rail-nav-bg-item-active-color: var(--nav-item-active-color);--ngs-rail-nav-bg-item-color: var(--nav-item-color);--ngs-rail-nav-width: calc(var(--spacing, .25rem) * 24);--ngs-rail-nav-gap: calc(var(--spacing, .25rem) * 3);--ngs-rail-nav-padding: calc(var(--spacing, .25rem) * 0);display:flex;flex-direction:column;gap:var(--ngs-rail-nav-gap);width:var(--ngs-rail-nav-width);background:var(--ngs-rail-nav-bg);padding:var(--ngs-rail-nav-padding)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }] } });
+
+class RailNavItem {
+    _railNav = inject(RAIL_NAV);
+    key = input(v7(), ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    get isActive() {
+        if (!this.key() || !this._railNav.api.getActiveKey()) {
+            return false;
+        }
+        return this._railNav.api.isActive(this.key());
+    }
+    click(event) {
+        if (!this.key()) {
+            return;
+        }
+        this._railNav.api.activateItem(this.key());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RailNavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: RailNavItem, isStandalone: true, selector: "ngs-rail-nav-item,[ngs-rail-nav-item]", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "click($event)" }, properties: { "class.is-active": "isActive" }, classAttribute: "ngs-rail-nav-item" }, exportAs: ["ngsRailNavItem"], ngImport: i0, template: "<div class=\"icon\" ngsRipple>\n  <ng-content select=\"[ngsRailNavItemIcon]\"/>\n</div>\n<div class=\"label\">\n  <ng-content/>\n</div>\n", styles: [":host{display:flex;flex:none;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;gap:calc(var(--spacing, .25rem) * .5);color:var(--ngs-rail-nav-bg-item-color)}:host .icon{padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 4);border-radius:calc(infinity * 1px);color:var(--ngs-rail-nav-bg-item-icon-color);display:flex;align-items:center;justify-content:center}:host .icon:empty{display:none}:host:hover .icon{background:var(--ngs-rail-nav-bg-item-icon-hover-bg)}:host:hover .icon ::ng-deep *{scale:1.025;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.25s}:host:active .icon{background:var(--ngs-rail-nav-bg-item-icon-active-bg)}:host.is-active{--icon-color: var(--ngs-rail-nav-bg-item-icon-is-active-color)}:host.is-active .icon{background:var(--ngs-rail-nav-bg-item-icon-is-active-bg)}:host.is-active{color:var(--ngs-rail-nav-bg-item-active-color)}:host.is-active:active .icon{background:var(--ngs-rail-nav-bg-item-icon-is-active-active-bg)}:host .label{font-size:var(--text-tiny)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: Ripple, selector: "[ngsRipple]", inputs: ["ngsRippleColor", "ngsRippleUnbounded", "ngsRippleCentered", "ngsRippleRadius", "ngsRippleAnimation", "ngsRippleDisabled", "ngsRippleTrigger"], outputs: ["ngsRippleCenteredChange", "ngsRippleDisabledChange", "ngsRippleTriggerChange"], exportAs: ["ngsRipple"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RailNavItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-rail-nav-item,[ngs-rail-nav-item]', exportAs: 'ngsRailNavItem', imports: [
+                        Ripple
+                    ], host: {
+                        'class': 'ngs-rail-nav-item',
+                        '[class.is-active]': 'isActive',
+                        '(click)': 'click($event)'
+                    }, template: "<div class=\"icon\" ngsRipple>\n  <ng-content select=\"[ngsRailNavItemIcon]\"/>\n</div>\n<div class=\"label\">\n  <ng-content/>\n</div>\n", styles: [":host{display:flex;flex:none;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;gap:calc(var(--spacing, .25rem) * .5);color:var(--ngs-rail-nav-bg-item-color)}:host .icon{padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 4);border-radius:calc(infinity * 1px);color:var(--ngs-rail-nav-bg-item-icon-color);display:flex;align-items:center;justify-content:center}:host .icon:empty{display:none}:host:hover .icon{background:var(--ngs-rail-nav-bg-item-icon-hover-bg)}:host:hover .icon ::ng-deep *{scale:1.025;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.25s}:host:active .icon{background:var(--ngs-rail-nav-bg-item-icon-active-bg)}:host.is-active{--icon-color: var(--ngs-rail-nav-bg-item-icon-is-active-color)}:host.is-active .icon{background:var(--ngs-rail-nav-bg-item-icon-is-active-bg)}:host.is-active{color:var(--ngs-rail-nav-bg-item-active-color)}:host.is-active:active .icon{background:var(--ngs-rail-nav-bg-item-icon-is-active-active-bg)}:host .label{font-size:var(--text-tiny)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }] } });
+
+class RailNavItemIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RailNavItemIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: RailNavItemIconDirective, isStandalone: true, selector: "[ngsRailNavItemIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RailNavItemIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsRailNavItemIcon]',
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RailNav, RailNavItem, RailNavItemIconDirective };
+//# sourceMappingURL=ngstarter-ui-components-rail-nav.mjs.map

package/fesm2022/ngstarter-ui-components-rail-nav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-rail-nav.mjs","sources":["../../../projects/components/rail-nav/src/types.ts","../../../projects/components/rail-nav/src/rail-nav/rail-nav.ts","../../../projects/components/rail-nav/src/rail-nav/rail-nav.html","../../../projects/components/rail-nav/src/rail-nav-item/rail-nav-item.ts","../../../projects/components/rail-nav/src/rail-nav-item/rail-nav-item.html","../../../projects/components/rail-nav/src/rail-nav-item-icon.directive.ts","../../../projects/components/rail-nav/ngstarter-ui-components-rail-nav.ts"],"sourcesContent":["import { InjectionToken } from \"@angular/core\";\n\nexport const RAIL_NAV = new InjectionToken('RAIL_NAV');\n\nexport interface RailNavAPI {\n  getActiveKey: () => any;\n  activateItem: (key: any) => void;\n  isActive: (key: any) => boolean;\n}\n\nexport interface RailNavComponent {\n  api: RailNavAPI;\n}\n","import { Component, forwardRef, input, OnInit } from '@angular/core';\nimport { RAIL_NAV, RailNavAPI } from '../types';\n\n@Component({\n  selector: 'ngs-rail-nav',\n  exportAs: 'ngsRailNav',\n  imports: [],\n  templateUrl: './rail-nav.html',\n  styleUrl: './rail-nav.scss',\n  providers: [\n    {\n      provide: RAIL_NAV,\n      useExisting: forwardRef(() => RailNav),\n    }\n  ],\n  host: {\n    'class': 'ngs-rail-nav'\n  }\n})\nexport class RailNav implements OnInit {\n  activeKey = input();\n\n  private _activeKey: any;\n\n  readonly api: RailNavAPI = {\n    activateItem: (key: any) => {\n      this._activeKey = key;\n    },\n    getActiveKey: () => this._activeKey,\n    isActive: (key: any) => key === this._activeKey,\n  };\n\n  ngOnInit() {\n    this._activeKey = this.activeKey();\n  }\n}\n","<ng-content/>\n","import { Component, inject, input } from '@angular/core';\nimport { v7 as uuid } from 'uuid';\nimport { RAIL_NAV, RailNavComponent } from '../types';\nimport { Ripple } from '@ngstarter-ui/components/core';\n\n@Component({\n  selector: 'ngs-rail-nav-item,[ngs-rail-nav-item]',\n  exportAs: 'ngsRailNavItem',\n  templateUrl: './rail-nav-item.html',\n  styleUrl: './rail-nav-item.scss',\n  imports: [\n    Ripple\n  ],\n  host: {\n    'class': 'ngs-rail-nav-item',\n    '[class.is-active]': 'isActive',\n    '(click)': 'click($event)'\n  }\n})\nexport class RailNavItem {\n  protected _railNav = inject<RailNavComponent>(RAIL_NAV);\n\n  key = input(uuid());\n\n  get isActive(): boolean {\n    if (!this.key() || !this._railNav.api.getActiveKey()) {\n      return false;\n    }\n\n    return this._railNav.api.isActive(this.key());\n  }\n\n  click(event: MouseEvent) {\n    if (!this.key()) {\n      return;\n    }\n\n    this._railNav.api.activateItem(this.key());\n  }\n}\n","<div class=\"icon\" ngsRipple>\n  <ng-content select=\"[ngsRailNavItemIcon]\"/>\n</div>\n<div class=\"label\">\n  <ng-content/>\n</div>\n","import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[ngsRailNavItemIcon]',\n  standalone: true\n})\nexport class RailNavItemIconDirective {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["uuid"],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-resizable-container.mjs

@@ -0,0 +1,74 @@
+import * as i0 from '@angular/core';
+import { inject, Renderer2, ElementRef, ChangeDetectorRef, NgZone, DestroyRef, DOCUMENT, viewChild, input, numberAttribute, output, ChangeDetectionStrategy, Component } from '@angular/core';
+import { fromEvent, throttleTime } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+class ResizableContainer {
+    _renderer = inject(Renderer2);
+    _elementRef = inject(ElementRef);
+    _cdr = inject(ChangeDetectorRef);
+    _ngZone = inject(NgZone);
+    _destroyRef = inject(DestroyRef);
+    _document = inject(DOCUMENT);
+    _resizing = false;
+    _maxWidth;
+    _clientX;
+    _initialWidth;
+    handlerRef = viewChild.required('handler');
+    minWidth = input(0, { ...(ngDevMode ? { debugName: "minWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    resized = output();
+    ngOnInit() {
+        this._ngZone.runOutsideAngular(() => {
+            fromEvent(this.handlerRef().nativeElement, 'mousedown')
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe((event) => {
+                this._resizing = true;
+                this._maxWidth = this._elementRef.nativeElement.parentElement.getBoundingClientRect().width;
+                this._clientX = event.clientX;
+                this._initialWidth = this._elementRef.nativeElement.getBoundingClientRect().width;
+                // Prevent text selection during resize
+                this._document.body.style.userSelect = 'none';
+                this._document.body.style.cursor = 'ew-resize';
+                this._cdr.detectChanges();
+            });
+            fromEvent(this._document, 'mousemove')
+                .pipe(throttleTime(5), takeUntilDestroyed(this._destroyRef))
+                .subscribe((event) => {
+                if (this._resizing) {
+                    let width = this._initialWidth - (this._clientX - event.clientX);
+                    if (width <= this.minWidth()) {
+                        width = this.minWidth();
+                    }
+                    else if (width >= this._maxWidth) {
+                        width = this._maxWidth;
+                    }
+                    this._renderer.setStyle(this._elementRef.nativeElement, 'width', width + 'px');
+                    this.resized.emit({ width });
+                }
+            });
+            fromEvent(this._document, 'mouseup')
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe(event => {
+                this._resizing = false;
+                this._document.body.style.userSelect = '';
+                this._document.body.style.cursor = '';
+                this._cdr.detectChanges();
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizableContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: ResizableContainer, isStandalone: true, selector: "ngs-resizable-container", inputs: { minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resized: "resized" }, host: { classAttribute: "ngs-resizable-container" }, viewQueries: [{ propertyName: "handlerRef", first: true, predicate: ["handler"], descendants: true, isSignal: true }], exportAs: ["ngsResizableContainer"], ngImport: i0, template: "<div class=\"content\">\n  <ng-content/>\n</div>\n<button #handler class=\"handler\">\n  <span class=\"handler-indicator\"></span>\n</button>\n", styles: [":host{position:relative;display:flex;align-items:stretch;overflow:hidden}:host .content{flex-grow:1;width:100%;height:100%;margin-inline-end:calc(var(--spacing, .25rem) * 4)}:host .handler{position:absolute;-webkit-user-select:none;user-select:none;top:0;bottom:0;inset-inline-end:0;cursor:ew-resize;align-items:center;display:flex;justify-content:center;width:calc(var(--spacing, .25rem) * 5)}:host .handler .handler-indicator{display:flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);background:var(--color-surface-container-highest)}:host .handler:hover .handler-indicator,:host .handler:active .handler-indicator{background:var(--color-secondary)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizableContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-resizable-container', exportAs: 'ngsResizableContainer', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-resizable-container'
+                    }, template: "<div class=\"content\">\n  <ng-content/>\n</div>\n<button #handler class=\"handler\">\n  <span class=\"handler-indicator\"></span>\n</button>\n", styles: [":host{position:relative;display:flex;align-items:stretch;overflow:hidden}:host .content{flex-grow:1;width:100%;height:100%;margin-inline-end:calc(var(--spacing, .25rem) * 4)}:host .handler{position:absolute;-webkit-user-select:none;user-select:none;top:0;bottom:0;inset-inline-end:0;cursor:ew-resize;align-items:center;display:flex;justify-content:center;width:calc(var(--spacing, .25rem) * 5)}:host .handler .handler-indicator{display:flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);background:var(--color-surface-container-highest)}:host .handler:hover .handler-indicator,:host .handler:active .handler-indicator{background:var(--color-secondary)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { handlerRef: [{ type: i0.ViewChild, args: ['handler', { isSignal: true }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], resized: [{ type: i0.Output, args: ["resized"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ResizableContainer };
+//# sourceMappingURL=ngstarter-ui-components-resizable-container.mjs.map

package/fesm2022/ngstarter-ui-components-resizable-container.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-resizable-container.mjs","sources":["../../../projects/components/resizable-container/src/resizable-container/resizable-container.ts","../../../projects/components/resizable-container/src/resizable-container/resizable-container.html","../../../projects/components/resizable-container/ngstarter-ui-components-resizable-container.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  DestroyRef,\n  ElementRef,\n  inject, input,\n  NgZone,\n  numberAttribute,\n  OnInit,\n  Renderer2,\n  viewChild,\n  DOCUMENT,\n  output\n} from '@angular/core';\nimport { fromEvent, throttleTime } from 'rxjs';\n\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Component({\n  selector: 'ngs-resizable-container',\n  exportAs: 'ngsResizableContainer',\n  templateUrl: './resizable-container.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styleUrl: './resizable-container.scss',\n  host: {\n    'class': 'ngs-resizable-container'\n  }\n})\nexport class ResizableContainer implements OnInit {\n  private _renderer = inject(Renderer2);\n  private _elementRef = inject(ElementRef);\n  private _cdr = inject(ChangeDetectorRef);\n  private _ngZone = inject(NgZone);\n  private _destroyRef = inject(DestroyRef);\n  private _document = inject(DOCUMENT);\n  private _resizing = false;\n  private _maxWidth: number;\n  private _clientX: number;\n  private _initialWidth: number;\n\n  readonly handlerRef = viewChild.required<ElementRef>('handler');\n\n  minWidth = input(0, {\n    transform: numberAttribute\n  });\n\n  readonly resized = output<{ width: number }>();\n\n  ngOnInit() {\n    this._ngZone.runOutsideAngular(() => {\n      fromEvent<MouseEvent>(this.handlerRef().nativeElement, 'mousedown')\n        .pipe(takeUntilDestroyed(this._destroyRef))\n        .subscribe((event: MouseEvent) => {\n          this._resizing = true;\n          this._maxWidth = this._elementRef.nativeElement.parentElement.getBoundingClientRect().width;\n          this._clientX = event.clientX;\n          this._initialWidth = this._elementRef.nativeElement.getBoundingClientRect().width;\n\n          // Prevent text selection during resize\n          this._document.body.style.userSelect = 'none';\n          this._document.body.style.cursor = 'ew-resize';\n\n          this._cdr.detectChanges();\n        })\n      ;\n      fromEvent<MouseEvent>(this._document, 'mousemove')\n        .pipe(\n          throttleTime(5),\n          takeUntilDestroyed(this._destroyRef)\n        )\n        .subscribe((event: MouseEvent) => {\n          if (this._resizing) {\n            let width = this._initialWidth - (this._clientX - event.clientX);\n\n            if (width <= this.minWidth()) {\n              width = this.minWidth();\n            } else if (width >= this._maxWidth) {\n              width = this._maxWidth;\n            }\n\n            this._renderer.setStyle(this._elementRef.nativeElement, 'width', width + 'px');\n            this.resized.emit({ width });\n          }\n        })\n      ;\n      fromEvent(this._document, 'mouseup')\n        .pipe(takeUntilDestroyed(this._destroyRef))\n        .subscribe(event => {\n          this._resizing = false;\n          this._document.body.style.userSelect = '';\n          this._document.body.style.cursor = '';\n          this._cdr.detectChanges();\n        })\n      ;\n    });\n  }\n}\n","<div class=\"content\">\n  <ng-content/>\n</div>\n<button #handler class=\"handler\">\n  <span class=\"handler-indicator\"></span>\n</button>\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-screen-loader.mjs

@@ -0,0 +1,95 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, TemplateRef, Component, Injectable } from '@angular/core';
+import { ProgressBar } from '@ngstarter-ui/components/progress-bar';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayConfig } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Subject } from 'rxjs';
+
+class ScreenLoader {
+    opened = input(false, { ...(ngDevMode ? { debugName: "opened" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    message = input(null, ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    isTemplateRef(value) {
+        return value instanceof TemplateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScreenLoader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ScreenLoader, isStandalone: true, selector: "ngs-screen-loader", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-opened": "opened()" }, classAttribute: "ngs-screen-loader not-prose" }, exportAs: ["ngsScreenLoader"], ngImport: i0, template: "<div class=\"message\">\n  @if (message(); as msg) {\n    @if (isTemplateRef(msg)) {\n      <ng-container *ngTemplateOutlet=\"msg\" />\n    } @else {\n      {{ msg }}\n    }\n  } @else {\n    <ng-content/>\n  }\n</div>\n<div class=\"progress-bar\">\n  <ngs-progress-bar mode=\"indeterminate\"/>\n</div>\n", styles: [":host{--ngs-screen-loader-bg: var(--color-background);opacity:0;position:fixed;inset:0;z-index:-9999;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--ngs-screen-loader-bg)}:host.is-opened{z-index:9999;opacity:1}:host .message{max-width:600px;line-height:var(--leading-snug);text-align:center}:host .progress-bar{width:calc(var(--spacing, .25rem) * 64);margin-top:calc(var(--spacing, .25rem) * 5)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: ProgressBar, selector: "ngs-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["ngsProgressBar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScreenLoader, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-screen-loader', exportAs: 'ngsScreenLoader', imports: [
+                        ProgressBar,
+                        NgTemplateOutlet
+                    ], host: {
+                        'class': 'ngs-screen-loader not-prose',
+                        '[class.is-opened]': 'opened()'
+                    }, template: "<div class=\"message\">\n  @if (message(); as msg) {\n    @if (isTemplateRef(msg)) {\n      <ng-container *ngTemplateOutlet=\"msg\" />\n    } @else {\n      {{ msg }}\n    }\n  } @else {\n    <ng-content/>\n  }\n</div>\n<div class=\"progress-bar\">\n  <ngs-progress-bar mode=\"indeterminate\"/>\n</div>\n", styles: [":host{--ngs-screen-loader-bg: var(--color-background);opacity:0;position:fixed;inset:0;z-index:-9999;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--ngs-screen-loader-bg)}:host.is-opened{z-index:9999;opacity:1}:host .message{max-width:600px;line-height:var(--leading-snug);text-align:center}:host .progress-bar{width:calc(var(--spacing, .25rem) * 64);margin-top:calc(var(--spacing, .25rem) * 5)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
+
+class ScreenLoaderRef {
+    overlayRef;
+    _afterOpened = new Subject();
+    _afterClosed = new Subject();
+    constructor(overlayRef) {
+        this.overlayRef = overlayRef;
+        this.overlayRef.detachments().subscribe(() => {
+            this._afterClosed.next();
+            this._afterClosed.complete();
+        });
+    }
+    close() {
+        this.overlayRef.dispose();
+    }
+    afterOpened() {
+        return this._afterOpened.asObservable();
+    }
+    afterClosed() {
+        return this._afterClosed.asObservable();
+    }
+    _notifyOpened() {
+        this._afterOpened.next();
+        this._afterOpened.complete();
+    }
+}
+
+class ScreenLoaderService {
+    overlay;
+    injector;
+    constructor(overlay, injector) {
+        this.overlay = overlay;
+        this.injector = injector;
+    }
+    open(message) {
+        const overlayConfig = new OverlayConfig({
+            hasBackdrop: true,
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            positionStrategy: this.overlay.position().global(),
+            width: '100%',
+            height: '100%'
+        });
+        const overlayRef = this.overlay.create(overlayConfig);
+        const screenLoaderRef = new ScreenLoaderRef(overlayRef);
+        const componentPortal = new ComponentPortal(ScreenLoader, null, this.injector);
+        const componentRef = overlayRef.attach(componentPortal);
+        componentRef.setInput('opened', true);
+        componentRef.setInput('message', message);
+        screenLoaderRef._notifyOpened();
+        return screenLoaderRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScreenLoaderService, deps: [{ token: i1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScreenLoaderService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScreenLoaderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.Injector }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ScreenLoader, ScreenLoaderRef, ScreenLoaderService };
+//# sourceMappingURL=ngstarter-ui-components-screen-loader.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-screen-loader.mjs","sources":["../../../projects/components/screen-loader/src/screen-loader/screen-loader.ts","../../../projects/components/screen-loader/src/screen-loader/screen-loader.html","../../../projects/components/screen-loader/src/screen-loader/screen-loader-ref.ts","../../../projects/components/screen-loader/src/screen-loader/screen-loader.service.ts","../../../projects/components/screen-loader/ngstarter-ui-components-screen-loader.ts"],"sourcesContent":["import { booleanAttribute, Component, input, TemplateRef } from '@angular/core';\nimport { ProgressBar } from '@ngstarter-ui/components/progress-bar';\nimport { NgTemplateOutlet } from '@angular/common';\n\n@Component({\n  selector: 'ngs-screen-loader',\n  exportAs: 'ngsScreenLoader',\n  imports: [\n    ProgressBar,\n    NgTemplateOutlet\n  ],\n  templateUrl: './screen-loader.html',\n  styleUrl: './screen-loader.scss',\n  host: {\n    'class': 'ngs-screen-loader not-prose',\n    '[class.is-opened]': 'opened()'\n  }\n})\nexport class ScreenLoader {\n  opened = input(false, {\n    transform: booleanAttribute\n  });\n\n  message = input<string | TemplateRef<any> | null>(null);\n\n  protected isTemplateRef(value: any): value is TemplateRef<any> {\n    return value instanceof TemplateRef;\n  }\n}\n","<div class=\"message\">\n  @if (message(); as msg) {\n    @if (isTemplateRef(msg)) {\n      <ng-container *ngTemplateOutlet=\"msg\" />\n    } @else {\n      {{ msg }}\n    }\n  } @else {\n    <ng-content/>\n  }\n</div>\n<div class=\"progress-bar\">\n  <ngs-progress-bar mode=\"indeterminate\"/>\n</div>\n","import { OverlayRef } from '@angular/cdk/overlay';\nimport { Observable, Subject } from 'rxjs';\n\nexport class ScreenLoaderRef {\n  private readonly _afterOpened = new Subject<void>();\n  private readonly _afterClosed = new Subject<void>();\n\n  constructor(private overlayRef: OverlayRef) {\n    this.overlayRef.detachments().subscribe(() => {\n      this._afterClosed.next();\n      this._afterClosed.complete();\n    });\n  }\n\n  close(): void {\n    this.overlayRef.dispose();\n  }\n\n  afterOpened(): Observable<void> {\n    return this._afterOpened.asObservable();\n  }\n\n  afterClosed(): Observable<void> {\n    return this._afterClosed.asObservable();\n  }\n\n  _notifyOpened() {\n    this._afterOpened.next();\n    this._afterOpened.complete();\n  }\n}\n","import { ComponentRef, Injectable, Injector, TemplateRef } from '@angular/core';\nimport { Overlay, OverlayConfig } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { ScreenLoader } from './screen-loader';\nimport { ScreenLoaderRef } from './screen-loader-ref';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class ScreenLoaderService {\n  constructor(\n    private overlay: Overlay,\n    private injector: Injector\n  ) {}\n\n  open(message: string | TemplateRef<any>): ScreenLoaderRef {\n    const overlayConfig = new OverlayConfig({\n      hasBackdrop: true,\n      scrollStrategy: this.overlay.scrollStrategies.block(),\n      positionStrategy: this.overlay.position().global(),\n      width: '100%',\n      height: '100%'\n    });\n\n    const overlayRef = this.overlay.create(overlayConfig);\n    const screenLoaderRef = new ScreenLoaderRef(overlayRef);\n\n    const componentPortal = new ComponentPortal(ScreenLoader, null, this.injector);\n    const componentRef: ComponentRef<ScreenLoader> = overlayRef.attach(componentPortal);\n\n    componentRef.setInput('opened', true);\n    componentRef.setInput('message', message);\n\n    screenLoaderRef._notifyOpened();\n\n    return screenLoaderRef;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}