@magmonium/one 0.0.4 → 0.0.7

package/fesm2022/magmonium-one-otp-2KL7aM-S.mjs

@@ -0,0 +1,171 @@
+import * as i0 from '@angular/core';
+import { signal, viewChildren, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { a as BaseTextInputComponent, L as LabelComponent, E as ErrorsComponent } from './magmonium-one-magmonium-one-CCzzYU2z.mjs';
+import { CommonModule } from '@angular/common';
+
+class OtpInputComponent extends BaseTextInputComponent {
+    otpValues = signal([], ...(ngDevMode ? [{ debugName: "otpValues" }] : /* istanbul ignore next */ []));
+    otpInputs = viewChildren('otpInput', ...(ngDevMode ? [{ debugName: "otpInputs" }] : /* istanbul ignore next */ []));
+    otpConfig = computed(() => this.config(), ...(ngDevMode ? [{ debugName: "otpConfig" }] : /* istanbul ignore next */ []));
+    otpArray = computed(() => {
+        const length = this.otpConfig()?.length || 6;
+        return Array(length).fill(0);
+    }, ...(ngDevMode ? [{ debugName: "otpArray" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        effect(() => {
+            const length = this.otpConfig()?.length || 6;
+            this.otpValues.set(Array(length).fill(''));
+        });
+        effect(() => {
+            const inputs = this.otpInputs();
+            if (inputs.length > 0) {
+                setTimeout(() => {
+                    inputs[0].nativeElement.focus();
+                }, 0);
+            }
+        });
+    }
+    onInput(event, index) {
+        const input = event.target;
+        let value = input.value;
+        value = value.replace(/[^a-zA-Z0-9]/g, '');
+        if (value.length > 1) {
+            value = value.slice(-1);
+        }
+        input.value = value.toUpperCase();
+        const newValues = [...this.otpValues()];
+        newValues[index] = value.toUpperCase();
+        this.otpValues.set(newValues);
+        const length = this.otpConfig()?.length || 6;
+        if (value && index < length - 1) {
+            this.focusInput(index + 1);
+        }
+        this.updateValue();
+    }
+    onKeyDown(event, index) {
+        const input = event.target;
+        const length = this.otpConfig()?.length || 6;
+        const isAlphaNumeric = /^[a-zA-Z0-9]$/.test(event.key);
+        const isControlKey = [
+            'Backspace',
+            'Delete',
+            'ArrowLeft',
+            'ArrowRight',
+            'Tab',
+        ].includes(event.key);
+        if (!isAlphaNumeric && !isControlKey) {
+            event.preventDefault();
+            return;
+        }
+        if (event.key === 'Backspace') {
+            if (!input.value && index > 0) {
+                this.focusInput(index - 1);
+            }
+        }
+        if (event.key === 'ArrowLeft' && index > 0) {
+            event.preventDefault();
+            this.focusInput(index - 1);
+        }
+        if (event.key === 'ArrowRight' && index < length - 1) {
+            event.preventDefault();
+            this.focusInput(index + 1);
+        }
+    }
+    onPaste(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const length = this.otpConfig()?.length || 6;
+        const pastedData = event.clipboardData?.getData('text') || '';
+        const alphanumeric = pastedData
+            .replace(/[^a-zA-Z0-9]/g, '')
+            .slice(0, length);
+        if (alphanumeric.length > 0) {
+            const newValues = Array(length).fill('');
+            alphanumeric.split('').forEach((char, index) => {
+                if (index < length) {
+                    newValues[index] = char.toUpperCase();
+                }
+            });
+            this.otpValues.set(newValues);
+            this.updateValue();
+            const focusIndex = Math.min(alphanumeric.length, length - 1);
+            setTimeout(() => this.focusInput(focusIndex), 0);
+        }
+    }
+    focusInput(index) {
+        const inputs = this.otpInputs();
+        if (inputs[index]) {
+            inputs[index].nativeElement.focus();
+        }
+    }
+    updateValue() {
+        const otpValue = this.otpValues().join('');
+        this.setValue(otpValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OtpInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OtpInputComponent, isStandalone: true, selector: "m-otp-input", viewQueries: [{ propertyName: "otpInputs", predicate: ["otpInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    @if (otpConfig(); as otp) {
+      <m-label
+        [for]="otp.name"
+        [placeholder]="otp.label"
+        [required]="required()"
+        [disabled]="disabled()"
+      />
+      <div class="otp-container">
+        @for (item of otpArray(); track $index) {
+          <input
+            [id]="$index === 0 ? (otp.name ?? '') : ''"
+            #otpInput
+            type="text"
+            maxlength="1"
+            [class.error]="showErrors()"
+            [disabled]="disabled()"
+            [value]="otpValues()[$index] || ''"
+            (input)="onInput($event, $index)"
+            (keydown)="onKeyDown($event, $index)"
+            (paste)="onPaste($event)"
+          />
+        }
+      </div>
+      @if (showErrors()) {
+        <m-input-errors [errors]="errors()" />
+      }
+    }
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.otp-container{display:flex;gap:.375em;padding:2px;margin:-2px}.otp-container input{box-sizing:border-box;width:1.4em;height:2em;text-align:center;font-size:.9rem;font-weight:600;border:max(1px,1em * .0625) solid var(--m-input-color, var(--m-mm));border-radius:.4em;transition:border-color .2s ease,box-shadow .2s ease;text-transform:uppercase;background:transparent;color:var(--m-text)}.otp-container input:focus{outline:none;border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:none}.otp-container input.error{border-color:var(--m-error);box-shadow:none}.otp-container input:disabled{background-color:var(--m-frame);cursor:not-allowed;color:var(--m-text-tertiary);border-color:var(--m-border);opacity:.6}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: ErrorsComponent, selector: "m-input-errors", inputs: ["errors"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OtpInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'm-otp-input', template: `
+    @if (otpConfig(); as otp) {
+      <m-label
+        [for]="otp.name"
+        [placeholder]="otp.label"
+        [required]="required()"
+        [disabled]="disabled()"
+      />
+      <div class="otp-container">
+        @for (item of otpArray(); track $index) {
+          <input
+            [id]="$index === 0 ? (otp.name ?? '') : ''"
+            #otpInput
+            type="text"
+            maxlength="1"
+            [class.error]="showErrors()"
+            [disabled]="disabled()"
+            [value]="otpValues()[$index] || ''"
+            (input)="onInput($event, $index)"
+            (keydown)="onKeyDown($event, $index)"
+            (paste)="onPaste($event)"
+          />
+        }
+      </div>
+      @if (showErrors()) {
+        <m-input-errors [errors]="errors()" />
+      }
+    }
+  `, imports: [LabelComponent, ErrorsComponent, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.otp-container{display:flex;gap:.375em;padding:2px;margin:-2px}.otp-container input{box-sizing:border-box;width:1.4em;height:2em;text-align:center;font-size:.9rem;font-weight:600;border:max(1px,1em * .0625) solid var(--m-input-color, var(--m-mm));border-radius:.4em;transition:border-color .2s ease,box-shadow .2s ease;text-transform:uppercase;background:transparent;color:var(--m-text)}.otp-container input:focus{outline:none;border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:none}.otp-container input.error{border-color:var(--m-error);box-shadow:none}.otp-container input:disabled{background-color:var(--m-frame);cursor:not-allowed;color:var(--m-text-tertiary);border-color:var(--m-border);opacity:.6}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { otpInputs: [{ type: i0.ViewChildren, args: ['otpInput', { isSignal: true }] }] } });
+
+export { OtpInputComponent };
+//# sourceMappingURL=magmonium-one-otp-2KL7aM-S.mjs.map

package/fesm2022/{magmonium-one-otp-D-gA4qT1.mjs.map → magmonium-one-otp-2KL7aM-S.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"magmonium-one-otp-D-gA4qT1.mjs","sources":["../../../../libs/one/src/lib/shared/ui/input/ui/text/otp.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  signal,\n  viewChildren,\n} from '@angular/core';\nimport { LabelComponent } from '../label';\nimport { ErrorsComponent } from '../errors';\nimport { BaseTextInputComponent } from './base-text';\nimport { CommonModule } from '@angular/common';\nimport { OtpInput } from '../../model/input';\n\n@Component({\n  selector: 'm-otp-input',\n  template: `\n    @if (otpConfig(); as otp) {\n      <m-label\n        [for]=\"otp.name\"\n        [placeholder]=\"otp.label\"\n        [required]=\"required()\"\n        [disabled]=\"disabled()\"\n      />\n      <div class=\"otp-container\">\n        @for (item of otpArray(); track $index) {\n          <input\n            [id]=\"$index === 0 ? (otp.name ?? '') : ''\"\n            #otpInput\n            type=\"text\"\n            maxlength=\"1\"\n            [class.error]=\"showErrors()\"\n            [disabled]=\"disabled()\"\n            [value]=\"otpValues()[$index] || ''\"\n            (input)=\"onInput($event, $index)\"\n            (keydown)=\"onKeyDown($event, $index)\"\n            (paste)=\"onPaste($event)\"\n          />\n        }\n      </div>\n      @if (showErrors()) {\n        <m-input-errors [errors]=\"errors()\" />\n      }\n    }\n  `,\n  styleUrl: './otp.sass',\n  imports: [LabelComponent, ErrorsComponent, CommonModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class OtpInputComponent extends BaseTextInputComponent<OtpInput> {\n  otpValues = signal<string[]>([]);\n  otpInputs = viewChildren<ElementRef<HTMLInputElement>>('otpInput');\n  protected readonly otpConfig = computed(() => this.config() as OtpInput);\n  otpArray = computed(() => {\n    const length = this.otpConfig()?.length || 6;\n    return Array(length).fill(0);\n  });\n\n  constructor() {\n    super();\n    effect(() => {\n      const length = this.otpConfig()?.length || 6;\n      this.otpValues.set(Array(length).fill(''));\n    });\n    effect(() => {\n      const inputs = this.otpInputs();\n      if (inputs.length > 0) {\n        setTimeout(() => {\n          inputs[0].nativeElement.focus();\n        }, 0);\n      }\n    });\n  }\n\n  onInput(event: Event, index: number): void {\n    const input = event.target as HTMLInputElement;\n    let value = input.value;\n\n    value = value.replace(/[^a-zA-Z0-9]/g, '');\n\n    if (value.length > 1) {\n      value = value.slice(-1);\n    }\n\n    input.value = value.toUpperCase();\n\n    const newValues = [...this.otpValues()];\n    newValues[index] = value.toUpperCase();\n    this.otpValues.set(newValues);\n\n    const length = this.otpConfig()?.length || 6;\n    if (value && index < length - 1) {\n      this.focusInput(index + 1);\n    }\n    this.updateValue();\n  }\n\n  onKeyDown(event: KeyboardEvent, index: number): void {\n    const input = event.target as HTMLInputElement;\n    const length = this.otpConfig()?.length || 6;\n\n    const isAlphaNumeric = /^[a-zA-Z0-9]$/.test(event.key);\n    const isControlKey = [\n      'Backspace',\n      'Delete',\n      'ArrowLeft',\n      'ArrowRight',\n      'Tab',\n    ].includes(event.key);\n\n    if (!isAlphaNumeric && !isControlKey) {\n      event.preventDefault();\n      return;\n    }\n\n    if (event.key === 'Backspace') {\n      if (!input.value && index > 0) {\n        this.focusInput(index - 1);\n      }\n    }\n    if (event.key === 'ArrowLeft' && index > 0) {\n      event.preventDefault();\n      this.focusInput(index - 1);\n    }\n    if (event.key === 'ArrowRight' && index < length - 1) {\n      event.preventDefault();\n      this.focusInput(index + 1);\n    }\n  }\n\n  onPaste(event: ClipboardEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const length = this.otpConfig()?.length || 6;\n    const pastedData = event.clipboardData?.getData('text') || '';\n\n    const alphanumeric = pastedData\n      .replace(/[^a-zA-Z0-9]/g, '')\n      .slice(0, length);\n\n    if (alphanumeric.length > 0) {\n      const newValues = Array(length).fill('');\n      alphanumeric.split('').forEach((char, index) => {\n        if (index < length) {\n          newValues[index] = char.toUpperCase();\n        }\n      });\n\n      this.otpValues.set(newValues);\n      this.updateValue();\n\n      const focusIndex = Math.min(alphanumeric.length, length - 1);\n      setTimeout(() => this.focusInput(focusIndex), 0);\n    }\n  }\n\n  private focusInput(index: number): void {\n    const inputs = this.otpInputs();\n    if (inputs[index]) {\n      inputs[index].nativeElement.focus();\n    }\n  }\n\n  private updateValue(): void {\n    const otpValue = this.otpValues().join('');\n    this.setValue(otpValue);\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"magmonium-one-otp-2KL7aM-S.mjs","sources":["../../../../libs/one/src/lib/shared/ui/input/ui/text/otp.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  signal,\n  viewChildren,\n} from '@angular/core';\nimport { LabelComponent } from '../label';\nimport { ErrorsComponent } from '../errors';\nimport { BaseTextInputComponent } from './base-text';\nimport { CommonModule } from '@angular/common';\nimport { OtpInput } from '../../model/input';\n\n@Component({\n  selector: 'm-otp-input',\n  template: `\n    @if (otpConfig(); as otp) {\n      <m-label\n        [for]=\"otp.name\"\n        [placeholder]=\"otp.label\"\n        [required]=\"required()\"\n        [disabled]=\"disabled()\"\n      />\n      <div class=\"otp-container\">\n        @for (item of otpArray(); track $index) {\n          <input\n            [id]=\"$index === 0 ? (otp.name ?? '') : ''\"\n            #otpInput\n            type=\"text\"\n            maxlength=\"1\"\n            [class.error]=\"showErrors()\"\n            [disabled]=\"disabled()\"\n            [value]=\"otpValues()[$index] || ''\"\n            (input)=\"onInput($event, $index)\"\n            (keydown)=\"onKeyDown($event, $index)\"\n            (paste)=\"onPaste($event)\"\n          />\n        }\n      </div>\n      @if (showErrors()) {\n        <m-input-errors [errors]=\"errors()\" />\n      }\n    }\n  `,\n  styleUrl: './otp.sass',\n  imports: [LabelComponent, ErrorsComponent, CommonModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class OtpInputComponent extends BaseTextInputComponent<OtpInput> {\n  otpValues = signal<string[]>([]);\n  otpInputs = viewChildren<ElementRef<HTMLInputElement>>('otpInput');\n  protected readonly otpConfig = computed(() => this.config() as OtpInput);\n  otpArray = computed(() => {\n    const length = this.otpConfig()?.length || 6;\n    return Array(length).fill(0);\n  });\n\n  constructor() {\n    super();\n    effect(() => {\n      const length = this.otpConfig()?.length || 6;\n      this.otpValues.set(Array(length).fill(''));\n    });\n    effect(() => {\n      const inputs = this.otpInputs();\n      if (inputs.length > 0) {\n        setTimeout(() => {\n          inputs[0].nativeElement.focus();\n        }, 0);\n      }\n    });\n  }\n\n  onInput(event: Event, index: number): void {\n    const input = event.target as HTMLInputElement;\n    let value = input.value;\n\n    value = value.replace(/[^a-zA-Z0-9]/g, '');\n\n    if (value.length > 1) {\n      value = value.slice(-1);\n    }\n\n    input.value = value.toUpperCase();\n\n    const newValues = [...this.otpValues()];\n    newValues[index] = value.toUpperCase();\n    this.otpValues.set(newValues);\n\n    const length = this.otpConfig()?.length || 6;\n    if (value && index < length - 1) {\n      this.focusInput(index + 1);\n    }\n    this.updateValue();\n  }\n\n  onKeyDown(event: KeyboardEvent, index: number): void {\n    const input = event.target as HTMLInputElement;\n    const length = this.otpConfig()?.length || 6;\n\n    const isAlphaNumeric = /^[a-zA-Z0-9]$/.test(event.key);\n    const isControlKey = [\n      'Backspace',\n      'Delete',\n      'ArrowLeft',\n      'ArrowRight',\n      'Tab',\n    ].includes(event.key);\n\n    if (!isAlphaNumeric && !isControlKey) {\n      event.preventDefault();\n      return;\n    }\n\n    if (event.key === 'Backspace') {\n      if (!input.value && index > 0) {\n        this.focusInput(index - 1);\n      }\n    }\n    if (event.key === 'ArrowLeft' && index > 0) {\n      event.preventDefault();\n      this.focusInput(index - 1);\n    }\n    if (event.key === 'ArrowRight' && index < length - 1) {\n      event.preventDefault();\n      this.focusInput(index + 1);\n    }\n  }\n\n  onPaste(event: ClipboardEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const length = this.otpConfig()?.length || 6;\n    const pastedData = event.clipboardData?.getData('text') || '';\n\n    const alphanumeric = pastedData\n      .replace(/[^a-zA-Z0-9]/g, '')\n      .slice(0, length);\n\n    if (alphanumeric.length > 0) {\n      const newValues = Array(length).fill('');\n      alphanumeric.split('').forEach((char, index) => {\n        if (index < length) {\n          newValues[index] = char.toUpperCase();\n        }\n      });\n\n      this.otpValues.set(newValues);\n      this.updateValue();\n\n      const focusIndex = Math.min(alphanumeric.length, length - 1);\n      setTimeout(() => this.focusInput(focusIndex), 0);\n    }\n  }\n\n  private focusInput(index: number): void {\n    const inputs = this.otpInputs();\n    if (inputs[index]) {\n      inputs[index].nativeElement.focus();\n    }\n  }\n\n  private updateValue(): void {\n    const otpValue = this.otpValues().join('');\n    this.setValue(otpValue);\n  }\n}\n"],"names":[],"mappings":"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"}

package/fesm2022/magmonium-one-password-a-Le8Z1I.mjs

@@ -0,0 +1,87 @@
+import * as i0 from '@angular/core';
+import { signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { a as BaseTextInputComponent, L as LabelComponent, E as ErrorsComponent, b as ButtonComponent } from './magmonium-one-magmonium-one-CCzzYU2z.mjs';
+
+class PasswordInputComponent extends BaseTextInputComponent {
+    isPassword = signal(true, ...(ngDevMode ? [{ debugName: "isPassword" }] : /* istanbul ignore next */ []));
+    type = computed(() => (this.isPassword() ? 'password' : 'text'), ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    button = computed(() => (!this.isPassword() ? 'eye' : 'eye_close'), ...(ngDevMode ? [{ debugName: "button" }] : /* istanbul ignore next */ []));
+    toggleType() {
+        this.isPassword.update((now) => !now);
+    }
+    onInput(event) {
+        const target = event.target;
+        this.setValue(target?.value ?? '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PasswordInputComponent, isStandalone: true, selector: "m-password-input", usesInheritance: true, ngImport: i0, template: `
+    @if (config(); as text) {
+      <m-label
+        [for]="text.name"
+        [placeholder]="text.label"
+        [required]="required()"
+        [disabled]="disabled()"
+      />
+      <div class="input-wrapper">
+        <input
+          [id]="text.name ?? ''"
+          [value]="value()"
+          #inputElement
+          [class.error]="showErrors()"
+          [disabled]="disabled()"
+          (input)="onInput($event)"
+          (focus)="isFocused.set(true)"
+          (blur)="isFocused.set(false); touched.set(true)"
+          [type]="type()"
+        />
+        <m-one-button
+          [disabled]="disabled()"
+          [name]="button()"
+          [color]="iconColor()"
+          (clicked)="toggleType()"
+        />
+      </div>
+      @if (showErrors()) {
+        <m-input-errors [errors]="errors()" />
+      }
+    }
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%}.input-wrapper{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){box-shadow:0 0 0 2px color-mix(in srgb,var(--m-input-color, var(--m-mm)) 20%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(.error){border-color:var(--m-error);box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;background:var(--m-password-input-background, var(--m-background));border-color:var(--m-password-input-border, var(--m-input-color, var(--m-mm)))}.input-wrapper:hover{border-color:var(--m-password-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12)))}.input-wrapper .m-icon{--m-icon-size: 1.1em !important}.input-wrapper input{appearance:none;font-size:1em}.input-wrapper .m-one-button{height:100%;display:flex;align-items:center;justify-content:center;--m-button-size: 1em !important}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: ErrorsComponent, selector: "m-input-errors", inputs: ["errors"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "url", "murl", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PasswordInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'm-password-input', template: `
+    @if (config(); as text) {
+      <m-label
+        [for]="text.name"
+        [placeholder]="text.label"
+        [required]="required()"
+        [disabled]="disabled()"
+      />
+      <div class="input-wrapper">
+        <input
+          [id]="text.name ?? ''"
+          [value]="value()"
+          #inputElement
+          [class.error]="showErrors()"
+          [disabled]="disabled()"
+          (input)="onInput($event)"
+          (focus)="isFocused.set(true)"
+          (blur)="isFocused.set(false); touched.set(true)"
+          [type]="type()"
+        />
+        <m-one-button
+          [disabled]="disabled()"
+          [name]="button()"
+          [color]="iconColor()"
+          (clicked)="toggleType()"
+        />
+      </div>
+      @if (showErrors()) {
+        <m-input-errors [errors]="errors()" />
+      }
+    }
+  `, imports: [LabelComponent, ErrorsComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%}.input-wrapper{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){box-shadow:0 0 0 2px color-mix(in srgb,var(--m-input-color, var(--m-mm)) 20%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(.error){border-color:var(--m-error);box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;background:var(--m-password-input-background, var(--m-background));border-color:var(--m-password-input-border, var(--m-input-color, var(--m-mm)))}.input-wrapper:hover{border-color:var(--m-password-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12)))}.input-wrapper .m-icon{--m-icon-size: 1.1em !important}.input-wrapper input{appearance:none;font-size:1em}.input-wrapper .m-one-button{height:100%;display:flex;align-items:center;justify-content:center;--m-button-size: 1em !important}\n"] }]
+        }] });
+
+export { PasswordInputComponent };
+//# sourceMappingURL=magmonium-one-password-a-Le8Z1I.mjs.map

package/fesm2022/{magmonium-one-password-BOsM6-nh.mjs.map → magmonium-one-password-a-Le8Z1I.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"magmonium-one-password-BOsM6-nh.mjs","sources":["../../../../libs/one/src/lib/shared/ui/input/ui/text/password.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  signal,\n} from '@angular/core';\nimport { LabelComponent } from '../label';\nimport { ErrorsComponent } from '../errors';\nimport { BaseTextInputComponent } from './base-text';\nimport { ButtonComponent } from '../../../button/ui/button';\n\n@Component({\n  selector: 'm-password-input',\n  template: `\n    @if (config(); as text) {\n      <m-label\n        [for]=\"text.name\"\n        [placeholder]=\"text.label\"\n        [required]=\"required()\"\n        [disabled]=\"disabled()\"\n      />\n      <div class=\"input-wrapper\">\n        <input\n          [id]=\"text.name ?? ''\"\n          [value]=\"value()\"\n          #inputElement\n          [class.error]=\"showErrors()\"\n          [disabled]=\"disabled()\"\n          (input)=\"onInput($event)\"\n          (focus)=\"isFocused.set(true)\"\n          (blur)=\"isFocused.set(false); touched.set(true)\"\n          [type]=\"type()\"\n        />\n        <m-one-button\n          [disabled]=\"disabled()\"\n          [name]=\"button()\"\n          [color]=\"iconColor()\"\n          (clicked)=\"toggleType()\"\n        />\n      </div>\n      @if (showErrors()) {\n        <m-input-errors [errors]=\"errors()\" />\n      }\n    }\n  `,\n  imports: [LabelComponent, ErrorsComponent, ButtonComponent],\n  styleUrl: './password.sass',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PasswordInputComponent extends BaseTextInputComponent {\n  isPassword = signal<boolean>(true);\n  type = computed(() => (this.isPassword() ? 'password' : 'text'));\n  button = computed(() => (!this.isPassword() ? 'eye' : 'eye_close'));\n\n  protected toggleType() {\n    this.isPassword.update((now) => !now);\n  }\n\n  protected onInput(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    this.setValue(target?.value ?? '');\n  }\n}\n"],"names":[],"mappings":";;;;AAiDM,MAAO,sBAAuB,SAAQ,sBAAsB,CAAA;AAChE,IAAA,UAAU,GAAG,MAAM,CAAU,IAAI,iFAAC;IAClC,IAAI,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,UAAU,EAAE,GAAG,UAAU,GAAG,MAAM,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;IAChE,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,KAAK,GAAG,WAAW,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;IAEzD,UAAU,GAAA;AAClB,QAAA,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC;IACvC;AAEU,IAAA,OAAO,CAAC,KAAY,EAAA;AAC5B,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;QAC/C,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,IAAI,EAAE,CAAC;IACpC;uGAZW,sBAAsB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EApCvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,mjUAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACS,cAAc,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,aAAA,EAAA,UAAA,EAAA,UAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,OAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,SAAA,EAAA,KAAA,EAAA,QAAA,EAAA,OAAA,EAAA,aAAA,EAAA,MAAA,EAAA,aAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,cAAA,EAAA,UAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAI/C,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAtClC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,QAAA,EAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BT,EAAA,OAAA,EACQ,CAAC,cAAc,EAAE,eAAe,EAAE,eAAe,CAAC,EAAA,eAAA,EAE1C,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,mjUAAA,CAAA,EAAA;;;;;"}
+{"version":3,"file":"magmonium-one-password-a-Le8Z1I.mjs","sources":["../../../../libs/one/src/lib/shared/ui/input/ui/text/password.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  signal,\n} from '@angular/core';\nimport { LabelComponent } from '../label';\nimport { ErrorsComponent } from '../errors';\nimport { BaseTextInputComponent } from './base-text';\nimport { ButtonComponent } from '../../../button/ui/button';\n\n@Component({\n  selector: 'm-password-input',\n  template: `\n    @if (config(); as text) {\n      <m-label\n        [for]=\"text.name\"\n        [placeholder]=\"text.label\"\n        [required]=\"required()\"\n        [disabled]=\"disabled()\"\n      />\n      <div class=\"input-wrapper\">\n        <input\n          [id]=\"text.name ?? ''\"\n          [value]=\"value()\"\n          #inputElement\n          [class.error]=\"showErrors()\"\n          [disabled]=\"disabled()\"\n          (input)=\"onInput($event)\"\n          (focus)=\"isFocused.set(true)\"\n          (blur)=\"isFocused.set(false); touched.set(true)\"\n          [type]=\"type()\"\n        />\n        <m-one-button\n          [disabled]=\"disabled()\"\n          [name]=\"button()\"\n          [color]=\"iconColor()\"\n          (clicked)=\"toggleType()\"\n        />\n      </div>\n      @if (showErrors()) {\n        <m-input-errors [errors]=\"errors()\" />\n      }\n    }\n  `,\n  imports: [LabelComponent, ErrorsComponent, ButtonComponent],\n  styleUrl: './password.sass',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PasswordInputComponent extends BaseTextInputComponent {\n  isPassword = signal<boolean>(true);\n  type = computed(() => (this.isPassword() ? 'password' : 'text'));\n  button = computed(() => (!this.isPassword() ? 'eye' : 'eye_close'));\n\n  protected toggleType() {\n    this.isPassword.update((now) => !now);\n  }\n\n  protected onInput(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    this.setValue(target?.value ?? '');\n  }\n}\n"],"names":[],"mappings":";;;;AAiDM,MAAO,sBAAuB,SAAQ,sBAAsB,CAAA;AAChE,IAAA,UAAU,GAAG,MAAM,CAAU,IAAI,iFAAC;IAClC,IAAI,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,UAAU,EAAE,GAAG,UAAU,GAAG,MAAM,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;IAChE,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,KAAK,GAAG,WAAW,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;IAEzD,UAAU,GAAA;AAClB,QAAA,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC;IACvC;AAEU,IAAA,OAAO,CAAC,KAAY,EAAA;AAC5B,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;QAC/C,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,IAAI,EAAE,CAAC;IACpC;uGAZW,sBAAsB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EApCvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,+xFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACS,cAAc,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,aAAA,EAAA,UAAA,EAAA,UAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,OAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,SAAA,EAAA,KAAA,EAAA,QAAA,EAAA,OAAA,EAAA,aAAA,EAAA,MAAA,EAAA,aAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,cAAA,EAAA,UAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAI/C,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAtClC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,QAAA,EAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BT,EAAA,OAAA,EACQ,CAAC,cAAc,EAAE,eAAe,EAAE,eAAe,CAAC,EAAA,eAAA,EAE1C,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,+xFAAA,CAAA,EAAA;;;;;"}

package/fesm2022/magmonium-one-toggle-B7q3Vvpg.mjs

@@ -0,0 +1,62 @@
+import * as i0 from '@angular/core';
+import { model, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { B as BaseInputComponent, T as TranslatePipe } from './magmonium-one-magmonium-one-CCzzYU2z.mjs';
+
+class ToggleInputComponent extends BaseInputComponent {
+    value = undefined;
+    checked = model(false);
+    config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    focused = input(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    showErrors = computed(() => this.touched() && this.invalid(), ...(ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []));
+    /** Required by FormCheckboxControl interface */
+    // public readonly checked: ModelSignal<boolean> = this.value; // Already defined above
+    constructor() {
+        super();
+    }
+    onChange(event) {
+        const target = event.target;
+        this.checked.set(target?.checked ?? false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ToggleInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ToggleInputComponent, isStandalone: true, selector: "m-toggle-input", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, usesInheritance: true, ngImport: i0, template: `
+    @if (config(); as toggle) {
+      <div class="toggle">
+        <input
+          [id]="toggle.name ?? ''"
+          [checked]="checked()"
+          (change)="onChange($event)"
+          type="checkbox"
+        />
+        <label [attr.for]="toggle.name || null">{{
+          toggle.label | translate
+        }}</label>
+      </div>
+    }
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:inline-block}.toggle{display:inline-flex;align-items:center;gap:.375em;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.toggle input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;width:1.6em;height:1em;background-color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 15%,transparent 85%);border-radius:.5em;border:max(1px,1em * .0625) solid color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 20%,transparent 80%);cursor:pointer;outline:none;box-sizing:content-box;flex-shrink:0;margin:0;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-color .2s ease;will-change:background-color,box-shadow}.toggle input[type=checkbox]:after{content:\"\";position:absolute;top:.125em;left:.125em;width:.75em;height:.75em;background-color:var(--m-toggle-input-color-contrast, #ffffff);border-radius:50%;transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .15s ease;will-change:transform;box-shadow:0 .1em .1666666667em #0003,0 .05em .0833333333em #0000001a}.toggle label{font-size:.8em;line-height:1.2;cursor:pointer;margin:0;color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 70%,black 30%);transition:color .2s ease,font-weight .15s ease}.toggle input[type=checkbox]:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 25%,transparent 75%);border-color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 40%,transparent 60%)}.toggle input[type=checkbox]:hover:not(:disabled):after{box-shadow:0 .125em .2em #00000040,0 .0625em .1em #00000026}.toggle input[type=checkbox]:focus{box-shadow:0 0 0 .2em color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 20%,transparent 80%);outline:none}.toggle input[type=checkbox]:active:not(:disabled):after{transform:scaleX(1.15)}.toggle input[type=checkbox]:checked{background-color:var(--m-toggle-input-color, #4169e1);border-color:var(--m-toggle-input-color, #4169e1)}.toggle input[type=checkbox]:checked:after{transform:translate(.6em);background-color:var(--m-toggle-input-color-contrast, #ffffff)}.toggle input[type=checkbox]:checked:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 90%,black 10%);border-color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 90%,black 10%)}.toggle input[type=checkbox]:checked:active:not(:disabled):after{transform:translate(.6em) scaleX(1.15)}.toggle input[type=checkbox]:checked:focus{box-shadow:0 0 0 .2em color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 25%,transparent 75%)}.toggle input[type=checkbox]:checked+label{color:var(--m-toggle-input-color, #4169e1)}.toggle input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed;background-color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 10%,transparent 90%);border-color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 15%,transparent 85%)}.toggle input[type=checkbox]:disabled+label{opacity:.5;cursor:not-allowed}.toggle input[type=checkbox]:disabled:checked{background-color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 50%,transparent 50%)}.toggle{min-height:1em}.toggle--row{flex-direction:row}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ToggleInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'm-toggle-input', template: `
+    @if (config(); as toggle) {
+      <div class="toggle">
+        <input
+          [id]="toggle.name ?? ''"
+          [checked]="checked()"
+          (change)="onChange($event)"
+          type="checkbox"
+        />
+        <label [attr.for]="toggle.name || null">{{
+          toggle.label | translate
+        }}</label>
+      </div>
+    }
+  `, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:inline-block}.toggle{display:inline-flex;align-items:center;gap:.375em;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.toggle input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;width:1.6em;height:1em;background-color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 15%,transparent 85%);border-radius:.5em;border:max(1px,1em * .0625) solid color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 20%,transparent 80%);cursor:pointer;outline:none;box-sizing:content-box;flex-shrink:0;margin:0;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-color .2s ease;will-change:background-color,box-shadow}.toggle input[type=checkbox]:after{content:\"\";position:absolute;top:.125em;left:.125em;width:.75em;height:.75em;background-color:var(--m-toggle-input-color-contrast, #ffffff);border-radius:50%;transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .15s ease;will-change:transform;box-shadow:0 .1em .1666666667em #0003,0 .05em .0833333333em #0000001a}.toggle label{font-size:.8em;line-height:1.2;cursor:pointer;margin:0;color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 70%,black 30%);transition:color .2s ease,font-weight .15s ease}.toggle input[type=checkbox]:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 25%,transparent 75%);border-color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 40%,transparent 60%)}.toggle input[type=checkbox]:hover:not(:disabled):after{box-shadow:0 .125em .2em #00000040,0 .0625em .1em #00000026}.toggle input[type=checkbox]:focus{box-shadow:0 0 0 .2em color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 20%,transparent 80%);outline:none}.toggle input[type=checkbox]:active:not(:disabled):after{transform:scaleX(1.15)}.toggle input[type=checkbox]:checked{background-color:var(--m-toggle-input-color, #4169e1);border-color:var(--m-toggle-input-color, #4169e1)}.toggle input[type=checkbox]:checked:after{transform:translate(.6em);background-color:var(--m-toggle-input-color-contrast, #ffffff)}.toggle input[type=checkbox]:checked:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 90%,black 10%);border-color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 90%,black 10%)}.toggle input[type=checkbox]:checked:active:not(:disabled):after{transform:translate(.6em) scaleX(1.15)}.toggle input[type=checkbox]:checked:focus{box-shadow:0 0 0 .2em color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 25%,transparent 75%)}.toggle input[type=checkbox]:checked+label{color:var(--m-toggle-input-color, #4169e1)}.toggle input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed;background-color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 10%,transparent 90%);border-color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 15%,transparent 85%)}.toggle input[type=checkbox]:disabled+label{opacity:.5;cursor:not-allowed}.toggle input[type=checkbox]:disabled:checked{background-color:color-mix(in srgb,var(--m-toggle-input-color, #4169e1) 50%,transparent 50%)}.toggle{min-height:1em}.toggle--row{flex-direction:row}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
+
+export { ToggleInputComponent };
+//# sourceMappingURL=magmonium-one-toggle-B7q3Vvpg.mjs.map

package/fesm2022/{magmonium-one-toggle-DVSWH4qB.mjs.map → magmonium-one-toggle-B7q3Vvpg.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"magmonium-one-toggle-DVSWH4qB.mjs","sources":["../../../../libs/one/src/lib/shared/ui/input/ui/toggle/toggle.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  model,\n  ModelSignal,\n} from '@angular/core';\nimport { ToggleInput } from '../../model/input';\nimport { TranslatePipe } from '../../../../pipe/translate';\nimport {\n  FormCheckboxControl,\n  ValidationError,\n  WithOptionalField,\n} from '@angular/forms/signals';\nimport { BaseInputComponent } from '../../lib/base-input';\n\n@Component({\n  selector: 'm-toggle-input',\n  template: `\n    @if (config(); as toggle) {\n      <div class=\"toggle\">\n        <input\n          [id]=\"toggle.name ?? ''\"\n          [checked]=\"checked()\"\n          (change)=\"onChange($event)\"\n          type=\"checkbox\"\n        />\n        <label [attr.for]=\"toggle.name || null\">{{\n          toggle.label | translate\n        }}</label>\n      </div>\n    }\n  `,\n  imports: [TranslatePipe],\n  styleUrl: './toggle.sass',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToggleInputComponent\n  extends BaseInputComponent<ToggleInput>\n  implements FormCheckboxControl\n{\n  public value = undefined;\n  public checked = model<boolean>(false) as ModelSignal<boolean>;\n  public override config = input<Partial<ToggleInput> | undefined>();\n  public override required = input<boolean>(false);\n  public override disabled = input<boolean>(false);\n  public override invalid = input<boolean>(false);\n  public override touched = model<boolean>(false);\n  public override focused = input<boolean>(false);\n  public override errors = input<readonly WithOptionalField<ValidationError>[]>(\n    []\n  );\n  public override showErrors = computed(() => this.touched() && this.invalid());\n\n  /** Required by FormCheckboxControl interface */\n  // public readonly checked: ModelSignal<boolean> = this.value; // Already defined above\n\n  constructor() {\n    super();\n  }\n\n  protected onChange(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    this.checked.set(target?.checked ?? false);\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"magmonium-one-toggle-B7q3Vvpg.mjs","sources":["../../../../libs/one/src/lib/shared/ui/input/ui/toggle/toggle.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  model,\n  ModelSignal,\n} from '@angular/core';\nimport { ToggleInput } from '../../model/input';\nimport { TranslatePipe } from '../../../../pipe/translate';\nimport {\n  FormCheckboxControl,\n  ValidationError,\n  WithOptionalField,\n} from '@angular/forms/signals';\nimport { BaseInputComponent } from '../../lib/base-input';\n\n@Component({\n  selector: 'm-toggle-input',\n  template: `\n    @if (config(); as toggle) {\n      <div class=\"toggle\">\n        <input\n          [id]=\"toggle.name ?? ''\"\n          [checked]=\"checked()\"\n          (change)=\"onChange($event)\"\n          type=\"checkbox\"\n        />\n        <label [attr.for]=\"toggle.name || null\">{{\n          toggle.label | translate\n        }}</label>\n      </div>\n    }\n  `,\n  imports: [TranslatePipe],\n  styleUrl: './toggle.sass',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToggleInputComponent\n  extends BaseInputComponent<ToggleInput>\n  implements FormCheckboxControl\n{\n  public value = undefined;\n  public checked = model<boolean>(false) as ModelSignal<boolean>;\n  public override config = input<Partial<ToggleInput> | undefined>();\n  public override required = input<boolean>(false);\n  public override disabled = input<boolean>(false);\n  public override invalid = input<boolean>(false);\n  public override touched = model<boolean>(false);\n  public override focused = input<boolean>(false);\n  public override errors = input<readonly WithOptionalField<ValidationError>[]>(\n    []\n  );\n  public override showErrors = computed(() => this.touched() && this.invalid());\n\n  /** Required by FormCheckboxControl interface */\n  // public readonly checked: ModelSignal<boolean> = this.value; // Already defined above\n\n  constructor() {\n    super();\n  }\n\n  protected onChange(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    this.checked.set(target?.checked ?? false);\n  }\n}\n"],"names":[],"mappings":"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"}

package/fesm2022/magmonium-one.mjs

@@ -1,2 +1,2 @@
-export { A as APP_CONTEXT_REF, c as ASSET_BASE_URL, d as AccordionBodyDirective, e as AccordionComponent, f as AccordionGroupComponent, g as ActionComponent, h as AnimatedGraphsComponent, i as AppCardComponent, j as AppRelationType, k as AppTileComponent, l as AssetStore, m as AssetUrlPipe, n as Assets, o as AutosizeDirective, p as BadgeComponent, q as BandingComponent, r as BaseArrayInputComponent, s as BaseRootWebComponent, t as BaseWebComponent, b as ButtonComponent, u as ButtonGroupComponent, C as COLOR_SCHEMES, v as COMPONENT_INPUT_REGISTRY, w as CardComponent, x as CardWrapperComponent, y as CarouselComponent, z as ChartComponent, D as CheckboxInputComponent, F as ClearableInputComponent, G as ColComponent, H as ColorPickerInputComponent, I as CommentItemComponent, J as CommentsApiService, K as CommentsComponent, M as CommentsStore, N as ComponentInputComponent, O as ComponentStepperComponent, P as ConfigComponent, Q as ConfirmComponent, R as ContextMenuComponent, S as CustomIconClass, U as CustomIconEditComponent, V as DEFAULT_SIZE, W as DashboardCardComponent, X as DateInputComponent, Y as DatePickerComponent, Z as DeviceService, _ as DomService, $ as Domain, a0 as DotGridComponent, a1 as DragListDirective, a2 as DragListItemDirective, a3 as DraggableDirective, a4 as DropdownInputComponent, a5 as FLEX_VARIANTS, a6 as FOLDER_PICK_LISTENER, a7 as FORM_ASSET_FOLDER, a8 as FileService, a9 as FileUploadDirective, aa as FileUploadInputComponent, ab as FlexComponent, ac as FlexItemComponent, ad as FormGroupComponent, ae as FrameComponent, af as FreezeService, ag as GEN_NAV_DISPLAY_ORDER, ah as GRID_BREAKPOINTS, ai as GetNavService, aj as HeaderComponent, ak as HighlightDirective, al as HttpService, am as ICON_SOURCE, an as IS_DESIGN_MODE, ao as IS_SIDE_PANEL, ap as IconComponent, aq as ImgComponent, ar as InputType, as as InstrumentScoreComponent, at as InterceptorObservables, au as JumbotronComponent, av as KeyValueComponent, aw as LAYOUT_ASSET_FOLDER, ax as LOGIN_COMPONENT, ay as LOGIN_FORM_GROUP, az as LOGIN_PROCESS, aA as LOGIN_STORE, aB as LanguageComponent, aC as LoginDataService, aD as LoginOneComponent, aE as LoginStore, aF as LogoComponent, aG as MAG_SOCKET_EVENT, aH as MHeroColorDirective, aI as MHeroComponent, aJ as MODAL_REF, aK as MODAL_STORE_REF, aL as MRefDirective, aM as MStepComponent, aN as ManifestEnrichmentService, aO as MenuComponent, aP as ModalDirective, aQ as ModalRef, aR as ModalStore, aS as MoneyPipe, aT as MultiRangeInputComponent, aU as NAV_DEFAULT_MURL, aV as NAV_DISPLAY_ORDER, aW as NAV_MAIN_BUTTONS, aX as NAV_STORE_REF, aY as NAV_WC_COMPONENTS, aZ as NAV_WIDGET_MAP, a_ as NavComponent, a$ as NavDetailsComponent, b0 as NavMenuComponent, b1 as NavStore, b2 as NavTrailComponent, b3 as NothingComponent, b4 as NotificationElementComponent, b5 as NotificationGroupComponent, b6 as NotificationPopupComponent, b7 as NotificationService, b8 as NotificationStore, b9 as NotificationType, ba as NotificationWidgetComponent, bb as ONE_ASSET_BASE_URL, bc as OPTIONS_SOURCE, bd as OneApp, be as OptionsSourceDirective, bf as OverlayBodyComponent, bg as OverlayRef, bh as OverlayService, bi as PaginationComponent, bj as PanelComponent, bk as PlaygroundComponent, bl as PositionDirective, bm as PwaInstallComponent, bn as ROOT_NAV, bo as RadioGroupComponent, bp as RadioInputComponent, bq as RangeInputComponent, br as RatingInputComponent, bs as ReactiveElementComponent, bt as RemoteComponent, bu as RemoteLoaderService, bv as ResizeElementComponent, bw as RouteContainer, bx as RowComponent, by as SEARCH_QUERY, bz as SEARCH_RESULTS_EVENT, bA as SECTION_ACCORDION_GROUP, bB as SECTION_FORM_CONTEXT, bC as SHARED_ICONS, bD as SIZE_CONTEXT, bE as ScoreComponent, bF as ScrollComponent, bG as ScrollService, bH as SearchPanelComponent, bI as SearchStore, bJ as SearchUserPanelComponent, bK as SectionAccordionDirective, bL as SectionAccordionGroupDirective, bM as SectionBackComponent, bN as SectionBadgesComponent, bO as SectionButtonGroupComponent, bP as SectionCardComponent, bQ as SectionComponent, bR as SectionFilterComponent, bS as SectionFooterComponent, bT as SectionFormComponent, bU as SectionFormItemComponent, bV as SectionHeaderComponent, bW as SectionSearchComponent, bX as SectionStepperComponent, bY as SectionTabsComponent, bZ as SectionToggleComponent, b_ as SectionToggleItemDirective, b$ as SelectableCardInputComponent, c0 as SelectorDirective, c1 as SettingsSearchBarComponent, c2 as SettingsSearchService, c3 as Sex, c4 as ShapeComponent, c5 as SharedStoreRegistry, c6 as SidePanelDirective, c7 as Size, c8 as SocketStore, c9 as SortComponent, ca as StepComponent, cb as StepperComponent, cc as StepsComponent, cd as StorageService, ce as StrokeLinecap, cf as StrokeLinejoin, cg as SummaryComponent, ch as SvgGeneratorComponent, ci as SvgGeneratorService, cj as SvgService, ck as TOTAL_COLUMNS, cl as TRANSLATION_SOURCE, cm as TableComponent, cn as TechnicalMeterComponent, co as TextInputComponent, cp as TextOutputComponent, cq as TextareaInputComponent, cr as ThemeComponent, cs as ThemeService, ct as ThemeStore, cu as TimeAgoPipe, cv as TimelineComponent, cw as ToggleButtonComponent, cx as ToggleInputComponent, cy as ToggleRadioInputComponent, cz as ToolTipDirective, cA as TooltipComponent, T as TranslatePipe, cB as TranslateService, cC as USER_STORE_REF, cD as USER_TAB_MAP, cE as UlComponent, cF as UniverseComponent, cG as UserApiService, cH as UserAvatarComponent, cI as UserComponent, cJ as UserNavComponent, cK as UserSettingsComponent, cL as UserStore, cM as WC_ROUTE_CHANGED_EVENT, cN as WC_SEARCH_GROUPS, cO as WIN_USER_TAB_HOOK, cP as WIN_USER_TAB_KEY, cQ as WatermarkComponent, cR as WcRouterStore, cS as WrapperInputComponent, cT as applyColorsToElement, cU as authGuard, cV as bootstrapMagApp, cW as bootstrapPwaInstall, cX as buildWcBaseUrl, cY as calculateLuminance, cZ as calculateRanks, c_ as checkFilterCondition, c$ as classListSignal, d0 as createMap, d1 as deriveAvatarGradient, d2 as deriveContrastColor, d3 as deriveOppositeColor, d4 as derivePropertyName, d5 as emailValidation, d6 as evaluate, d7 as evaluateBool, d8 as formatBadgeCount, d9 as fullName, da as generateClipPath, db as generateTransform, dc as getClassList, dd as getProperty, de as getScrollParent, df as getTierFromPreviewPath, dg as getUniqueId, dh as getValue, di as hasErrorComputed, dj as hexToRgb, dk as hslToRgb, dl as initMagmoniumApp, dm as initialNotificationState, dn as initials, dp as injectAuthenticate, dq as injectInstallApp, dr as injectParentSize, ds as injectScrollSticky, dt as isButtonName, du as isCancelledComputed, dv as isJson, dw as isLoadingComputed, dx as isLocalhost, dy as isSize, dz as isTierPreview, dA as isUrlLocalhost, dB as isWebComponent, dC as linkToId, dD as linkToNav, dE as loadingActions, dF as loginState, dG as mInterceptor, dH as manualValidation, dI as matchFieldValidation, dJ as maxLengthValidation, dK as maxValidation, dL as mergeUnique, dM as mergeUniqueBy, dN as mergeUniqueWith, dO as minAgeValidation, dP as minLengthValidation, dQ as minValidation, dR as miniMarkToHtml, dS as navToId, dT as parseColor, dU as patternValidation, dV as privateGuard, dW as processImageToSvg, dX as provideAppContext, dY as provideMagAppConfig, dZ as provideMagWcConfig, d_ as provideMagWcRoutes, d$ as provideModalComponents, e0 as provideNavWidgets, e1 as provideSearch, e2 as provideSizeContext, e3 as provideUserTabs, e4 as publicGuard, e5 as requiredValidation, e6 as resolveConfigAsset, e7 as resolvePallet, e8 as resolveSize, e9 as rgbToHex, ea as rgbToHsl, eb as setProperty, ec as settingsWidgets, ed as shouldShowBadge, ee as stringToColor, ef as toAttrBool, eg as toAttrNumber, eh as toCssLength, ei as toLength, ej as urlValidation } from './magmonium-one-magmonium-one-Bc6ZjJKk.mjs';
+export { A as APP_CONTEXT_REF, c as ASSET_BASE_URL, d as AccordionBodyDirective, e as AccordionComponent, f as AccordionGroupComponent, g as ActionComponent, h as AnimatedGraphsComponent, i as AppCardComponent, j as AppRelationType, k as AppTileComponent, l as AssetStore, m as AssetUrlPipe, n as Assets, o as AutosizeDirective, p as BadgeComponent, q as BandingComponent, r as BaseArrayInputComponent, s as BaseRootWebComponent, t as BaseWebComponent, b as ButtonComponent, u as ButtonGroupComponent, C as COLOR_SCHEMES, v as COMPONENT_INPUT_REGISTRY, w as CardComponent, x as CardWrapperComponent, y as CarouselComponent, z as ChartComponent, D as CheckboxInputComponent, F as ClearableInputComponent, G as ColComponent, H as ColorPickerInputComponent, I as CommentItemComponent, J as CommentsApiService, K as CommentsComponent, M as CommentsStore, N as ComponentInputComponent, O as ComponentStepperComponent, P as ConfigComponent, Q as ConfirmComponent, R as ContextMenuComponent, S as CustomIconClass, U as CustomIconEditComponent, V as DEFAULT_SIZE, W as DashboardCardComponent, X as DateInputComponent, Y as DatePickerComponent, Z as DeviceService, _ as DomService, $ as Domain, a0 as DotGridComponent, a1 as DragListDirective, a2 as DragListItemDirective, a3 as DraggableDirective, a4 as DropdownInputComponent, a5 as FLEX_VARIANTS, a6 as FOLDER_PICK_LISTENER, a7 as FORM_ASSET_FOLDER, a8 as FileService, a9 as FileUploadDirective, aa as FileUploadInputComponent, ab as FlexComponent, ac as FlexItemComponent, ad as FormGroupComponent, ae as FrameComponent, af as FreezeService, ag as GEN_NAV_DISPLAY_ORDER, ah as GRID_BREAKPOINTS, ai as GetNavService, aj as HeaderComponent, ak as HighlightDirective, al as HttpService, am as ICON_SOURCE, an as IS_DESIGN_MODE, ao as IS_SIDE_PANEL, ap as IconComponent, aq as ImgComponent, ar as InputType, as as InstrumentScoreComponent, at as InterceptorObservables, au as JumbotronComponent, av as KeyValueComponent, aw as LAYOUT_ASSET_FOLDER, ax as LOGIN_COMPONENT, ay as LOGIN_FORM_GROUP, az as LOGIN_PROCESS, aA as LOGIN_STORE, aB as LanguageComponent, aC as LoginDataService, aD as LoginOneComponent, aE as LoginStore, aF as LogoComponent, aG as MAG_SOCKET_EVENT, aH as MHeroColorDirective, aI as MHeroComponent, aJ as MODAL_REF, aK as MODAL_STORE_REF, aL as MRefDirective, aM as MStepComponent, aN as ManifestEnrichmentService, aO as MenuComponent, aP as ModalDirective, aQ as ModalRef, aR as ModalStore, aS as MoneyPipe, aT as MultiRangeInputComponent, aU as NAV_DEFAULT_MURL, aV as NAV_DISPLAY_ORDER, aW as NAV_MAIN_BUTTONS, aX as NAV_STORE_REF, aY as NAV_WC_COMPONENTS, aZ as NAV_WIDGET_MAP, a_ as NavComponent, a$ as NavDetailsComponent, b0 as NavMenuComponent, b1 as NavStore, b2 as NavTrailComponent, b3 as NothingComponent, b4 as NotificationElementComponent, b5 as NotificationGroupComponent, b6 as NotificationPopupComponent, b7 as NotificationService, b8 as NotificationStore, b9 as NotificationType, ba as NotificationWidgetComponent, bb as ONE_ASSET_BASE_URL, bc as OPTIONS_SOURCE, bd as OneApp, be as OptionsSourceDirective, bf as OverlayBodyComponent, bg as OverlayRef, bh as OverlayService, bi as PaginationComponent, bj as PanelComponent, bk as PlaygroundComponent, bl as PositionDirective, bm as PwaInstallComponent, bn as ROOT_NAV, bo as RadioGroupComponent, bp as RadioInputComponent, bq as RangeInputComponent, br as RatingInputComponent, bs as ReactiveElementComponent, bt as RemoteComponent, bu as RemoteLoaderService, bv as ResizeElementComponent, bw as RouteContainer, bx as RowComponent, by as SEARCH_QUERY, bz as SEARCH_RESULTS_EVENT, bA as SECTION_ACCORDION_GROUP, bB as SECTION_FORM_CONTEXT, bC as SHARED_ICONS, bD as SIZE_CONTEXT, bE as ScoreComponent, bF as ScrollComponent, bG as ScrollService, bH as SearchPanelComponent, bI as SearchStore, bJ as SearchUserPanelComponent, bK as SectionAccordionDirective, bL as SectionAccordionGroupDirective, bM as SectionBackComponent, bN as SectionBadgesComponent, bO as SectionButtonGroupComponent, bP as SectionCardComponent, bQ as SectionComponent, bR as SectionFilterComponent, bS as SectionFooterComponent, bT as SectionFormComponent, bU as SectionFormItemComponent, bV as SectionHeaderComponent, bW as SectionSearchComponent, bX as SectionStepperComponent, bY as SectionTabsComponent, bZ as SectionToggleComponent, b_ as SectionToggleItemDirective, b$ as SelectableCardInputComponent, c0 as SelectorDirective, c1 as SettingsSearchBarComponent, c2 as SettingsSearchService, c3 as Sex, c4 as ShapeComponent, c5 as SharedStoreRegistry, c6 as SidePanelDirective, c7 as Size, c8 as SocketStore, c9 as SortComponent, ca as StepComponent, cb as StepperComponent, cc as StepsComponent, cd as StorageService, ce as StrokeLinecap, cf as StrokeLinejoin, cg as SummaryComponent, ch as SvgGeneratorComponent, ci as SvgGeneratorService, cj as SvgService, ck as TOTAL_COLUMNS, cl as TRANSLATION_SOURCE, cm as TableComponent, cn as TechnicalMeterComponent, co as TextInputComponent, cp as TextOutputComponent, cq as TextareaInputComponent, cr as ThemeComponent, cs as ThemeService, ct as ThemeStore, cu as TimeAgoPipe, cv as TimelineComponent, cw as ToggleButtonComponent, cx as ToggleInputComponent, cy as ToggleRadioInputComponent, cz as ToolTipDirective, cA as TooltipComponent, T as TranslatePipe, cB as TranslateService, cC as USER_STORE_REF, cD as USER_TAB_MAP, cE as UlComponent, cF as UniverseComponent, cG as UserApiService, cH as UserAvatarComponent, cI as UserComponent, cJ as UserNavComponent, cK as UserSettingsComponent, cL as UserStore, cM as WC_ROUTE_CHANGED_EVENT, cN as WC_SEARCH_GROUPS, cO as WIN_USER_TAB_HOOK, cP as WIN_USER_TAB_KEY, cQ as WatermarkComponent, cR as WcRouterStore, cS as WrapperInputComponent, cT as applyColorsToElement, cU as authGuard, cV as bootstrapMagApp, cW as bootstrapPwaInstall, cX as buildWcBaseUrl, cY as calculateLuminance, cZ as calculateRanks, c_ as checkFilterCondition, c$ as classListSignal, d0 as createMap, d1 as deriveAvatarGradient, d2 as deriveContrastColor, d3 as deriveOppositeColor, d4 as derivePropertyName, d5 as emailValidation, d6 as evaluate, d7 as evaluateBool, d8 as formatBadgeCount, d9 as fullName, da as generateClipPath, db as generateTransform, dc as getClassList, dd as getProperty, de as getScrollParent, df as getTierFromPreviewPath, dg as getUniqueId, dh as getValue, di as hasErrorComputed, dj as hexToRgb, dk as hslToRgb, dl as initMagmoniumApp, dm as initialNotificationState, dn as initials, dp as injectAuthenticate, dq as injectInstallApp, dr as injectParentSize, ds as injectScrollSticky, dt as isButtonName, du as isCancelledComputed, dv as isJson, dw as isLoadingComputed, dx as isLocalhost, dy as isSize, dz as isTierPreview, dA as isUrlLocalhost, dB as isWebComponent, dC as linkToId, dD as linkToNav, dE as loadingActions, dF as loginState, dG as mInterceptor, dH as manualValidation, dI as matchFieldValidation, dJ as maxLengthValidation, dK as maxValidation, dL as mergeUnique, dM as mergeUniqueBy, dN as mergeUniqueWith, dO as minAgeValidation, dP as minLengthValidation, dQ as minValidation, dR as miniMarkToHtml, dS as navToId, dT as parseColor, dU as patternValidation, dV as privateGuard, dW as processImageToSvg, dX as provideAppContext, dY as provideMagAppConfig, dZ as provideMagWcConfig, d_ as provideMagWcRoutes, d$ as provideModalComponents, e0 as provideNavWidgets, e1 as provideSearch, e2 as provideSizeContext, e3 as provideUserTabs, e4 as publicGuard, e5 as requiredValidation, e6 as resolveConfigAsset, e7 as resolvePallet, e8 as resolveSize, e9 as rgbToHex, ea as rgbToHsl, eb as setProperty, ec as settingsWidgets, ed as shouldShowBadge, ee as stringToColor, ef as toAttrBool, eg as toAttrNumber, eh as toCssLength, ei as toLength, ej as urlValidation } from './magmonium-one-magmonium-one-CCzzYU2z.mjs';
 //# sourceMappingURL=magmonium-one.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmonium/one",
-  "version": "0.0.4",
+  "version": "0.0.7",
   "description": "Magmonium One — Angular design-system primitives for mm Apps",
   "author": "magmonium",
   "license": "MIT",
@@ -16,6 +16,7 @@
     "fesm2022",
     "types",
     "assets",
+    "sass",
     "README.md"
   ],
   "peerDependencies": {

package/sass/_index.sass

@@ -0,0 +1,50 @@
+// @magmonium/sass — public kernel for apps and library compile.
+// TokenAliases, functions, and cross-cutting mixins. Component look lives on
+// Angular styleUrls; animations are imported by Jumbotron only.
+
+@forward 'variables'
+@forward 'functions/functions'
+
+// Cross-cutting mixins apps and shared layout still call via `@use 'index' as m`.
+@forward 'mixins/breakpoints'
+@forward 'mixins/device'
+@forward 'mixins/layout'
+@forward 'mixins/grid'
+@forward 'mixins/spacing'
+@forward 'mixins/borders'
+@forward 'mixins/flex'
+@forward 'mixins/position'
+@forward 'mixins/sizing'
+@forward 'mixins/display'
+@forward 'mixins/colors'
+@forward 'mixins/backgrounds'
+@forward 'mixins/backdrops'
+@forward 'mixins/overflow'
+@forward 'mixins/text'
+@forward 'mixins/typography'
+@forward 'mixins/utilities'
+@forward 'mixins/interactive'
+@forward 'mixins/links'
+@forward 'mixins/lists'
+@forward 'mixins/header'
+@forward 'mixins/control'
+// Used by library component styleUrls (not by app styles.sass). Zero CSS until @included.
+@forward 'mixins/button'
+@forward 'mixins/toggle'
+@forward 'mixins/checkbox'
+@forward 'mixins/radio'
+@forward 'mixins/input'
+@forward 'mixins/form'
+@forward 'mixins/label'
+
+// Prefixed re-exports kept for existing app `@include m.colors-*` / spacing call sites.
+@forward 'variables/colors' as colors-*
+@forward 'variables/spacing' as spacing-*
+@forward 'variables/typography' as typography-*
+@forward 'variables/borders' as borders-*
+@forward 'functions/functions' as functions-*
+@forward 'mixins/breakpoints' as breakpoints-*
+@forward 'mixins/utilities' as utilities-*
+@forward 'mixins/borders' as borders-*
+@forward 'mixins/layout' as layout-*
+@forward 'mixins/grid' as grid-*

package/sass/_overlay-hosts.sass

@@ -0,0 +1,78 @@
+// Portal host chrome — DOM service mounts `.modals` / `.m-selector-box` on body,
+// outside any component encapsulation. Positioning only; look stays on components.
+@use 'variables/number' as n
+@use 'variables/colors' as c
+@use 'mixins/backdrops' as backdrops
+
+.m-selector-box
+  position: fixed
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  z-index: n.$base-z-index * 10000
+  pointer-events: none
+
+  > *
+    pointer-events: auto
+    position: absolute
+
+  .m-context-menu,
+  .m-dropdown-input,
+  .m-color-picker,
+  .m-date-input
+    position: fixed
+
+  .m-color-picker
+    .color-picker-box
+      background: c.$background-color
+      border: var(--m-input-border-width, 2px) solid var(--m-text-input-border, var(--m-input-color, var(--m-mm, #4169e1)))
+      border-radius: var(--m-input-radius, 4px)
+      box-shadow: none
+
+  .m-date-input
+    .date-picker
+      background: c.$background-color
+      border: var(--m-input-border-width, 2px) solid var(--m-text-input-border, var(--m-input-color, var(--m-mm, #4169e1)))
+      border-radius: var(--m-input-radius, 8px)
+      box-shadow: none
+      padding: 0.75rem
+      animation: date-picker-in 200ms ease-out
+      --m-button-size: 0.75rem
+
+@keyframes date-picker-in
+  from
+    opacity: 0
+    transform: scale(0.95) translateY(-4px)
+  to
+    opacity: 1
+    transform: scale(1) translateY(0)
+
+.modals
+  position: fixed
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  z-index: n.$base-z-index * 1000
+
+.modal
+  position: absolute
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  overflow: auto
+  @include backdrops.premium-backdrop
+  animation: backdropFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards
+
+  .m-context-menu-box
+    width: 100% !important
+
+@keyframes backdropFadeIn
+  from
+    opacity: 0
+    backdrop-filter: blur(0px)
+  to
+    opacity: 1
+    backdrop-filter: blur(24px)