@magmonium/one 0.0.25 → 0.0.26

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

@@ -1,62 +0,0 @@
-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-U9xfWoBx.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}:host-context(.option-set__edit){display:contents}:host-context(.option-set__edit) .toggle{--m-toggle-input-color: var(--m-input-color, var(--m-mm));display:flex;align-items:center;width:100%;height:calc(var(--input-size, 1em) * 1.5);min-height:calc(var(--input-size, 1em) * 1.5);padding-block:calc(var(--input-size, 1em) * .125);gap:.5em}:host-context(.option-set__edit) .toggle input[type=checkbox]{box-sizing:border-box;width:calc(var(--input-size, 1em) * 2.1);height:calc(var(--input-size, 1em) * 1.15);border-style:solid;border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);border-color:var(--m-text-input-border, var(--m-input-color, var(--m-mm)));background:var(--m-text-input-background, var(--m-background));box-shadow:var(--m-text-input-shadow, none);transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}:host-context(.option-set__edit) .toggle input[type=checkbox]:after{top:calc((calc(var(--input-size, 1em) * 1.15) - calc(var(--input-size, 1em) * .85)) / 2);left:calc((calc(var(--input-size, 1em) * 1.15) - calc(var(--input-size, 1em) * .85)) / 2);width:calc(var(--input-size, 1em) * .85);height:calc(var(--input-size, 1em) * .85);border-radius:calc(var(--m-input-radius, 4px) * .75);background-color:var(--m-input-color, var(--m-mm));box-shadow:none}:host-context(.option-set__edit) .toggle input[type=checkbox]:hover:not(:disabled){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12)));background:var(--m-text-input-hover-background, var(--m-text-input-background, var(--m-background)))}:host-context(.option-set__edit) .toggle input[type=checkbox]:hover:not(:disabled):after{box-shadow:none}:host-context(.option-set__edit) .toggle input[type=checkbox]:focus{border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none);outline:none}:host-context(.option-set__edit) .toggle input[type=checkbox]:checked{border-color:var(--m-input-color, var(--m-mm));background:var(--m-input-color, var(--m-mm))}:host-context(.option-set__edit) .toggle input[type=checkbox]:checked:after{transform:translate(calc(var(--input-size, 1em) * .95));background-color:var(--m-text-input-background, var(--m-background))}:host-context(.option-set__edit) .toggle input[type=checkbox]:checked:hover:not(:disabled){border-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 90%,black 10%);background:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 90%,black 10%)}:host-context(.option-set__edit) .toggle input[type=checkbox]:checked:focus{border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none)}:host-context(.option-set__edit) .toggle input[type=checkbox]:checked:active:not(:disabled):after{transform:translate(calc(var(--input-size, 1em) * .95)) scaleX(1.08)}:host-context(.option-set__edit) .toggle label{font-size:var(--m-label-font-size, calc(var(--input-size, 1em) * .85));font-weight:var(--m-label-weight, var(--m-text-input-label-weight, 500));line-height:1.4;color:var(--m-label-color, var(--m-text))}:host-context(.option-set__edit) .toggle input[type=checkbox]:checked+label{color:var(--m-label-color, var(--m-text))}\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}:host-context(.option-set__edit){display:contents}:host-context(.option-set__edit) .toggle{--m-toggle-input-color: var(--m-input-color, var(--m-mm));display:flex;align-items:center;width:100%;height:calc(var(--input-size, 1em) * 1.5);min-height:calc(var(--input-size, 1em) * 1.5);padding-block:calc(var(--input-size, 1em) * .125);gap:.5em}:host-context(.option-set__edit) .toggle input[type=checkbox]{box-sizing:border-box;width:calc(var(--input-size, 1em) * 2.1);height:calc(var(--input-size, 1em) * 1.15);border-style:solid;border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);border-color:var(--m-text-input-border, var(--m-input-color, var(--m-mm)));background:var(--m-text-input-background, var(--m-background));box-shadow:var(--m-text-input-shadow, none);transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}:host-context(.option-set__edit) .toggle input[type=checkbox]:after{top:calc((calc(var(--input-size, 1em) * 1.15) - calc(var(--input-size, 1em) * .85)) / 2);left:calc((calc(var(--input-size, 1em) * 1.15) - calc(var(--input-size, 1em) * .85)) / 2);width:calc(var(--input-size, 1em) * .85);height:calc(var(--input-size, 1em) * .85);border-radius:calc(var(--m-input-radius, 4px) * .75);background-color:var(--m-input-color, var(--m-mm));box-shadow:none}:host-context(.option-set__edit) .toggle input[type=checkbox]:hover:not(:disabled){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12)));background:var(--m-text-input-hover-background, var(--m-text-input-background, var(--m-background)))}:host-context(.option-set__edit) .toggle input[type=checkbox]:hover:not(:disabled):after{box-shadow:none}:host-context(.option-set__edit) .toggle input[type=checkbox]:focus{border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none);outline:none}:host-context(.option-set__edit) .toggle input[type=checkbox]:checked{border-color:var(--m-input-color, var(--m-mm));background:var(--m-input-color, var(--m-mm))}:host-context(.option-set__edit) .toggle input[type=checkbox]:checked:after{transform:translate(calc(var(--input-size, 1em) * .95));background-color:var(--m-text-input-background, var(--m-background))}:host-context(.option-set__edit) .toggle input[type=checkbox]:checked:hover:not(:disabled){border-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 90%,black 10%);background:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 90%,black 10%)}:host-context(.option-set__edit) .toggle input[type=checkbox]:checked:focus{border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none)}:host-context(.option-set__edit) .toggle input[type=checkbox]:checked:active:not(:disabled):after{transform:translate(calc(var(--input-size, 1em) * .95)) scaleX(1.08)}:host-context(.option-set__edit) .toggle label{font-size:var(--m-label-font-size, calc(var(--input-size, 1em) * .85));font-weight:var(--m-label-weight, var(--m-text-input-label-weight, 500));line-height:1.4;color:var(--m-label-color, var(--m-text))}:host-context(.option-set__edit) .toggle input[type=checkbox]:checked+label{color:var(--m-label-color, var(--m-text))}\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-Dd4zUbd-.mjs.map