@magmonium/one 0.4.30 → 0.4.31

package/fesm2022/magmonium-one-radio-CYnWLXPZ.mjs

@@ -0,0 +1,111 @@
+import { t as __exportAll } from "./magmonium-one-rolldown-runtime-DpJrqANO.mjs";
+import { t as LabelComponent } from "./magmonium-one-label-B30Q4Vut.mjs";
+import { t as BaseCheckboxInputComponent } from "./magmonium-one-base-checkbox-D7NYJdU3.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed } from "@angular/core";
+var radio_exports = /* @__PURE__ */ __exportAll({ RadioInputComponent: () => RadioInputComponent });
+var RadioInputComponent = class RadioInputComponent extends BaseCheckboxInputComponent {
+	radioConfig = computed(() => this.config(), ...ngDevMode ? [{ debugName: "radioConfig" }] : /* istanbul ignore next */ []);
+	onChange(event) {
+		const target = event.target;
+		this.setValue(target?.checked ?? false);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: RadioInputComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: RadioInputComponent,
+		isStandalone: true,
+		selector: "m-radio",
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    @if (radioConfig(); as radio) {
+      <div class="radio">
+        <input
+          [checked]="checked()"
+          #inputElement
+          [class.error]="showErrors()"
+          [disabled]="disabled()"
+          (change)="onChange($event)"
+          type="radio"
+          [name]="radio.name"
+          [id]="radio.id"
+        />
+        <m-label
+          [for]="radio.id"
+          [placeholder]="radio.label"
+          [params]="radio.params"
+          [required]="required()"
+          [disabled]="disabled()"
+        />
+      </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}.checkbox{--m-checkbox-input-color: var(--m-input-color, var(--m-focus));display:inline-flex;align-items:center;gap:calc(var(--m-checkbox-size, calc(var(--input-size, 1em) * 1.25)) * .375);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;width:var(--m-checkbox-size, calc(var(--input-size, 1em) * 1.25));height:var(--m-checkbox-size, calc(var(--input-size, 1em) * 1.25));background:var(--m-checkbox-background, var(--m-text-input-background, color-mix(in srgb, var(--m-focus) 2%, var(--m-background))));border-radius:var(--m-checkbox-radius, var(--m-input-radius, .35rem));border:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));cursor:pointer;outline:none;box-sizing:border-box;flex-shrink:0;margin:0;box-shadow:none;transition:var(--m-checkbox-transition, var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease, background-color .2s ease))}.checkbox input[type=checkbox]:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-60%) scale(0) rotate(-45deg);width:calc(var(--m-checkbox-size, calc(var(--input-size, 1em) * 1.25)) * .45);height:calc(var(--m-checkbox-size, calc(var(--input-size, 1em) * 1.25)) * .25);border-left:calc(var(--m-checkbox-size, calc(var(--input-size, 1em) * 1.25)) * .12) solid #ffffff;border-bottom:calc(var(--m-checkbox-size, calc(var(--input-size, 1em) * 1.25)) * .12) solid #ffffff;transition:transform .2s ease;box-shadow:none}.checkbox{--m-label-margin: 0}.checkbox input[type=checkbox]:hover:not(:disabled):not(:checked){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-focus) 55%, var(--m-background)));background:var(--m-text-input-hover-background, color-mix(in srgb, var(--m-focus) 4%, var(--m-background)));box-shadow:none}.checkbox input[type=checkbox]:focus,.checkbox input[type=checkbox]:focus-visible{border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:none;outline:none}.checkbox input[type=checkbox]:active:not(:disabled):after{transform:translate(-50%,-60%) scale(.85) rotate(-45deg)}.checkbox input[type=checkbox]:checked{border-color:var(--m-checkbox-checked-border, var(--m-focus));background:var(--m-checkbox-checked-background, var(--m-focus));background-color:var(--m-checkbox-checked-background, var(--m-focus));box-shadow:none}.checkbox input[type=checkbox]:checked:after{transform:translate(-50%,-60%) scale(1) rotate(-45deg);border-left-color:#fff;border-bottom-color:#fff;opacity:1}.checkbox input[type=checkbox]:checked:hover:not(:disabled){background:color-mix(in srgb,var(--m-checkbox-checked-background, var(--m-focus)) 88%,black 12%);background-color:color-mix(in srgb,var(--m-checkbox-checked-background, var(--m-focus)) 88%,black 12%);border-color:color-mix(in srgb,var(--m-checkbox-checked-border, var(--m-focus)) 88%,black 12%);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-focus) 18%,transparent)}.checkbox input[type=checkbox]:checked:focus,.checkbox input[type=checkbox]:checked:focus-visible{box-shadow:none}.checkbox input[type=checkbox]:indeterminate{border-color:var(--m-checkbox-checked-border, var(--m-focus));background:var(--m-checkbox-checked-background, var(--m-focus));background-color:var(--m-checkbox-checked-background, var(--m-focus))}.checkbox input[type=checkbox]:indeterminate:after{transform:translate(-50%,-50%) scale(1) rotate(0);width:calc(var(--input-size, 1em) * .5);height:0;border-left:none;border-bottom:calc(var(--input-size, 1em) * .12) solid #ffffff}.checkbox input[type=checkbox]:indeterminate:hover:not(:disabled){background:color-mix(in srgb,var(--m-checkbox-checked-background, var(--m-focus)) 88%,black 12%);background-color:color-mix(in srgb,var(--m-checkbox-checked-background, var(--m-focus)) 88%,black 12%);border-color:color-mix(in srgb,var(--m-checkbox-checked-border, var(--m-focus)) 88%,black 12%);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-focus) 18%,transparent)}.checkbox input[type=checkbox]:indeterminate:focus,.checkbox input[type=checkbox]:indeterminate:focus-visible{box-shadow:none}.checkbox input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed;border-color:color-mix(in srgb,var(--m-text) 12%,var(--m-background))}.checkbox input[type=checkbox]:disabled:checked:after{opacity:.7}.checkbox input[type=checkbox].error{border-color:var(--m-error)}.checkbox{min-height:var(--input-size, 1em)}.radio{--m-radio-input-color: var(--m-input-color, var(--m-focus));display:inline-flex;align-items:center;gap:calc(var(--m-radio-size, calc(var(--input-size, 1em) * 1.25)) * .375);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.radio input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;margin:0;padding:0;position:relative;width:var(--m-radio-size, calc(var(--input-size, 1em) * 1.25));height:var(--m-radio-size, calc(var(--input-size, 1em) * 1.25));flex-shrink:0;box-sizing:border-box;background:var(--m-radio-background, var(--m-text-input-background, color-mix(in srgb, var(--m-focus) 2%, var(--m-background))));border-radius:50%;border:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));cursor:pointer;outline:none;box-shadow:none;transition:var(--m-radio-transition, var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease, background-color .2s ease))}.radio input[type=radio]:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:calc(var(--m-radio-size, calc(var(--input-size, 1em) * 1.25)) * .45);height:calc(var(--m-radio-size, calc(var(--input-size, 1em) * 1.25)) * .45);background-color:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:none}.radio{--m-label-margin: 0}.radio input[type=radio]:hover:not(:disabled):not(:checked){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-focus) 55%, var(--m-background)));background:var(--m-text-input-hover-background, color-mix(in srgb, var(--m-focus) 4%, var(--m-background)));box-shadow:none}.radio input[type=radio]:focus,.radio input[type=radio]:focus-visible{border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:none;outline:none}.radio input[type=radio]:active:not(:disabled):after{transform:translate(-50%,-50%) scale(.85)}.radio input[type=radio]:checked{border-color:var(--m-radio-checked-border, var(--m-focus));background:var(--m-radio-checked-background, var(--m-focus));background-color:var(--m-radio-checked-background, var(--m-focus));box-shadow:none}.radio input[type=radio]:checked:after{transform:translate(-50%,-50%) scale(1);background-color:#fff;opacity:1}.radio input[type=radio]:checked:hover:not(:disabled){background:color-mix(in srgb,var(--m-radio-checked-background, var(--m-focus)) 88%,black 12%);background-color:color-mix(in srgb,var(--m-radio-checked-background, var(--m-focus)) 88%,black 12%);border-color:color-mix(in srgb,var(--m-radio-checked-border, var(--m-focus)) 88%,black 12%);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-focus) 18%,transparent)}.radio input[type=radio]:checked:focus,.radio input[type=radio]:checked:focus-visible{box-shadow:none}.radio input[type=radio]:disabled{opacity:.5;cursor:not-allowed;border-color:color-mix(in srgb,var(--m-text) 12%,var(--m-background))}.radio input[type=radio]:disabled:checked:after{opacity:.7}.radio input[type=radio].error{border-color:var(--m-error)}.radio{min-height:var(--input-size, 1em)}:host-context(.section-form-item__input),:host-context(.m-dynamic-input){display:contents}:host-context(.section-form-item__input) .checkbox,:host-context(.section-form-item__input) .radio,:host-context(.m-dynamic-input) .checkbox,:host-context(.m-dynamic-input) .radio{display:flex;align-items:center;width:100%;height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-block:0;padding-inline:0;background:transparent;border:none;box-shadow:none;--m-label-margin: 0;--m-label-font-size: var(--m-label-font-size, calc(var(--input-size, 1em) * .875));gap:var(--m-checkbox-input-gap, .375em )}:host-context(.section-form-item__input) .checkbox input[type=checkbox],:host-context(.section-form-item__input) .checkbox input[type=radio],:host-context(.section-form-item__input) .radio input[type=checkbox],:host-context(.section-form-item__input) .radio input[type=radio],:host-context(.m-dynamic-input) .checkbox input[type=checkbox],:host-context(.m-dynamic-input) .checkbox input[type=radio],:host-context(.m-dynamic-input) .radio input[type=checkbox],:host-context(.m-dynamic-input) .radio input[type=radio]{flex:0 0 auto;margin:0;transform:none;width:var(--m-checkbox-size, var(--m-radio-size, calc(var(--input-size, 1em) * 1.25)));height:var(--m-checkbox-size, var(--m-radio-size, calc(var(--input-size, 1em) * 1.25)));border-width:var(--m-input-border-width, 1px);border-style:solid;border-color:var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));background:var(--m-checkbox-square-background, var(--m-text-input-background, color-mix(in srgb, var(--m-focus) 2%, var(--m-background))));box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;cursor:pointer;outline:none;box-sizing:border-box;position:relative;transition:var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease, background-color .2s ease)}:host-context(.section-form-item__input) .checkbox input[type=checkbox],:host-context(.section-form-item__input) .radio input[type=checkbox],:host-context(.m-dynamic-input) .checkbox input[type=checkbox],:host-context(.m-dynamic-input) .radio input[type=checkbox]{border-radius:var(--m-checkbox-radius, var(--m-input-radius, .35rem))}:host-context(.section-form-item__input) .checkbox input[type=radio],:host-context(.section-form-item__input) .radio input[type=radio],:host-context(.m-dynamic-input) .checkbox input[type=radio],:host-context(.m-dynamic-input) .radio input[type=radio]{border-radius:50%}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:after,:host-context(.section-form-item__input) .radio input[type=checkbox]:after,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:after,:host-context(.m-dynamic-input) .radio input[type=checkbox]:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-60%) scale(0) rotate(-45deg);width:calc(var(--m-checkbox-size, var(--m-radio-size, calc(var(--input-size, 1em) * 1.25))) * .45);height:calc(var(--m-checkbox-size, var(--m-radio-size, calc(var(--input-size, 1em) * 1.25))) * .25);border-left:calc(var(--m-checkbox-size, var(--m-radio-size, calc(var(--input-size, 1em) * 1.25))) * .12) solid #ffffff;border-bottom:calc(var(--m-checkbox-size, var(--m-radio-size, calc(var(--input-size, 1em) * 1.25))) * .12) solid #ffffff;box-shadow:none;transition:transform .2s ease}:host-context(.section-form-item__input) .checkbox input[type=radio]:after,:host-context(.section-form-item__input) .radio input[type=radio]:after,:host-context(.m-dynamic-input) .checkbox input[type=radio]:after,:host-context(.m-dynamic-input) .radio input[type=radio]:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:calc(var(--m-checkbox-size, var(--m-radio-size, calc(var(--input-size, 1em) * 1.25))) * .45);height:calc(var(--m-checkbox-size, var(--m-radio-size, calc(var(--input-size, 1em) * 1.25))) * .45);border-radius:50%;background-color:#fff;box-shadow:none;transition:transform .2s ease}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:hover:not(:disabled),:host-context(.section-form-item__input) .checkbox input[type=radio]:hover:not(:disabled),:host-context(.section-form-item__input) .radio input[type=checkbox]:hover:not(:disabled),:host-context(.section-form-item__input) .radio input[type=radio]:hover:not(:disabled),:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:hover:not(:disabled),:host-context(.m-dynamic-input) .checkbox input[type=radio]:hover:not(:disabled),:host-context(.m-dynamic-input) .radio input[type=checkbox]:hover:not(:disabled),:host-context(.m-dynamic-input) .radio input[type=radio]:hover:not(:disabled){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-focus) 55%, var(--m-background)));background:var(--m-text-input-hover-background, color-mix(in srgb, var(--m-focus) 4%, var(--m-background)));box-shadow:none;transform:none}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:focus,:host-context(.section-form-item__input) .checkbox input[type=checkbox]:focus-visible,:host-context(.section-form-item__input) .checkbox input[type=radio]:focus,:host-context(.section-form-item__input) .checkbox input[type=radio]:focus-visible,:host-context(.section-form-item__input) .radio input[type=checkbox]:focus,:host-context(.section-form-item__input) .radio input[type=checkbox]:focus-visible,:host-context(.section-form-item__input) .radio input[type=radio]:focus,:host-context(.section-form-item__input) .radio input[type=radio]:focus-visible,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:focus,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:focus-visible,:host-context(.m-dynamic-input) .checkbox input[type=radio]:focus,:host-context(.m-dynamic-input) .checkbox input[type=radio]:focus-visible,:host-context(.m-dynamic-input) .radio input[type=checkbox]:focus,:host-context(.m-dynamic-input) .radio input[type=checkbox]:focus-visible,:host-context(.m-dynamic-input) .radio input[type=radio]:focus,:host-context(.m-dynamic-input) .radio input[type=radio]:focus-visible{border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:none;outline:none}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:checked,:host-context(.section-form-item__input) .checkbox input[type=radio]:checked,:host-context(.section-form-item__input) .radio input[type=checkbox]:checked,:host-context(.section-form-item__input) .radio input[type=radio]:checked,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:checked,:host-context(.m-dynamic-input) .checkbox input[type=radio]:checked,:host-context(.m-dynamic-input) .radio input[type=checkbox]:checked,:host-context(.m-dynamic-input) .radio input[type=radio]:checked{border-color:var(--m-checkbox-checked-border, var(--m-focus));background-color:var(--m-checkbox-checked-background, var(--m-focus));box-shadow:none;transform:none}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:checked:hover:not(:disabled),:host-context(.section-form-item__input) .checkbox input[type=radio]:checked:hover:not(:disabled),:host-context(.section-form-item__input) .radio input[type=checkbox]:checked:hover:not(:disabled),:host-context(.section-form-item__input) .radio input[type=radio]:checked:hover:not(:disabled),:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:checked:hover:not(:disabled),:host-context(.m-dynamic-input) .checkbox input[type=radio]:checked:hover:not(:disabled),:host-context(.m-dynamic-input) .radio input[type=checkbox]:checked:hover:not(:disabled),:host-context(.m-dynamic-input) .radio input[type=radio]:checked:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-checkbox-checked-background, var(--m-focus)) 88%,black 12%);border-color:color-mix(in srgb,var(--m-checkbox-checked-border, var(--m-focus)) 88%,black 12%);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-focus) 18%,transparent)}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:checked:focus,:host-context(.section-form-item__input) .checkbox input[type=checkbox]:checked:focus-visible,:host-context(.section-form-item__input) .checkbox input[type=radio]:checked:focus,:host-context(.section-form-item__input) .checkbox input[type=radio]:checked:focus-visible,:host-context(.section-form-item__input) .radio input[type=checkbox]:checked:focus,:host-context(.section-form-item__input) .radio input[type=checkbox]:checked:focus-visible,:host-context(.section-form-item__input) .radio input[type=radio]:checked:focus,:host-context(.section-form-item__input) .radio input[type=radio]:checked:focus-visible,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:checked:focus,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:checked:focus-visible,:host-context(.m-dynamic-input) .checkbox input[type=radio]:checked:focus,:host-context(.m-dynamic-input) .checkbox input[type=radio]:checked:focus-visible,:host-context(.m-dynamic-input) .radio input[type=checkbox]:checked:focus,:host-context(.m-dynamic-input) .radio input[type=checkbox]:checked:focus-visible,:host-context(.m-dynamic-input) .radio input[type=radio]:checked:focus,:host-context(.m-dynamic-input) .radio input[type=radio]:checked:focus-visible{box-shadow:none}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:checked:after,:host-context(.section-form-item__input) .radio input[type=checkbox]:checked:after,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:checked:after,:host-context(.m-dynamic-input) .radio input[type=checkbox]:checked:after{transform:translate(-50%,-60%) scale(1) rotate(-45deg)}:host-context(.section-form-item__input) .checkbox input[type=radio]:checked:after,:host-context(.section-form-item__input) .radio input[type=radio]:checked:after,:host-context(.m-dynamic-input) .checkbox input[type=radio]:checked:after,:host-context(.m-dynamic-input) .radio input[type=radio]:checked:after{transform:translate(-50%,-50%) scale(1)}:host-context(.checkbox-group) .checkbox{width:auto;height:auto;min-height:0}\n"],
+		dependencies: [{
+			kind: "component",
+			type: LabelComponent,
+			selector: "m-label",
+			inputs: [
+				"for",
+				"placeholder",
+				"params",
+				"required",
+				"disabled",
+				"color",
+				"noTranslate"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: RadioInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-radio",
+			template: `
+    @if (radioConfig(); as radio) {
+      <div class="radio">
+        <input
+          [checked]="checked()"
+          #inputElement
+          [class.error]="showErrors()"
+          [disabled]="disabled()"
+          (change)="onChange($event)"
+          type="radio"
+          [name]="radio.name"
+          [id]="radio.id"
+        />
+        <m-label
+          [for]="radio.id"
+          [placeholder]="radio.label"
+          [params]="radio.params"
+          [required]="required()"
+          [disabled]="disabled()"
+        />
+      </div>
+    }
+  `,
+			imports: [LabelComponent],
+			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}.checkbox{--m-checkbox-input-color: var(--m-input-color, var(--m-focus));display:inline-flex;align-items:center;gap:calc(var(--m-checkbox-size, calc(var(--input-size, 1em) * 1.25)) * .375);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;width:var(--m-checkbox-size, calc(var(--input-size, 1em) * 1.25));height:var(--m-checkbox-size, calc(var(--input-size, 1em) * 1.25));background:var(--m-checkbox-background, var(--m-text-input-background, color-mix(in srgb, var(--m-focus) 2%, var(--m-background))));border-radius:var(--m-checkbox-radius, var(--m-input-radius, .35rem));border:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));cursor:pointer;outline:none;box-sizing:border-box;flex-shrink:0;margin:0;box-shadow:none;transition:var(--m-checkbox-transition, var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease, background-color .2s ease))}.checkbox input[type=checkbox]:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-60%) scale(0) rotate(-45deg);width:calc(var(--m-checkbox-size, calc(var(--input-size, 1em) * 1.25)) * .45);height:calc(var(--m-checkbox-size, calc(var(--input-size, 1em) * 1.25)) * .25);border-left:calc(var(--m-checkbox-size, calc(var(--input-size, 1em) * 1.25)) * .12) solid #ffffff;border-bottom:calc(var(--m-checkbox-size, calc(var(--input-size, 1em) * 1.25)) * .12) solid #ffffff;transition:transform .2s ease;box-shadow:none}.checkbox{--m-label-margin: 0}.checkbox input[type=checkbox]:hover:not(:disabled):not(:checked){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-focus) 55%, var(--m-background)));background:var(--m-text-input-hover-background, color-mix(in srgb, var(--m-focus) 4%, var(--m-background)));box-shadow:none}.checkbox input[type=checkbox]:focus,.checkbox input[type=checkbox]:focus-visible{border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:none;outline:none}.checkbox input[type=checkbox]:active:not(:disabled):after{transform:translate(-50%,-60%) scale(.85) rotate(-45deg)}.checkbox input[type=checkbox]:checked{border-color:var(--m-checkbox-checked-border, var(--m-focus));background:var(--m-checkbox-checked-background, var(--m-focus));background-color:var(--m-checkbox-checked-background, var(--m-focus));box-shadow:none}.checkbox input[type=checkbox]:checked:after{transform:translate(-50%,-60%) scale(1) rotate(-45deg);border-left-color:#fff;border-bottom-color:#fff;opacity:1}.checkbox input[type=checkbox]:checked:hover:not(:disabled){background:color-mix(in srgb,var(--m-checkbox-checked-background, var(--m-focus)) 88%,black 12%);background-color:color-mix(in srgb,var(--m-checkbox-checked-background, var(--m-focus)) 88%,black 12%);border-color:color-mix(in srgb,var(--m-checkbox-checked-border, var(--m-focus)) 88%,black 12%);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-focus) 18%,transparent)}.checkbox input[type=checkbox]:checked:focus,.checkbox input[type=checkbox]:checked:focus-visible{box-shadow:none}.checkbox input[type=checkbox]:indeterminate{border-color:var(--m-checkbox-checked-border, var(--m-focus));background:var(--m-checkbox-checked-background, var(--m-focus));background-color:var(--m-checkbox-checked-background, var(--m-focus))}.checkbox input[type=checkbox]:indeterminate:after{transform:translate(-50%,-50%) scale(1) rotate(0);width:calc(var(--input-size, 1em) * .5);height:0;border-left:none;border-bottom:calc(var(--input-size, 1em) * .12) solid #ffffff}.checkbox input[type=checkbox]:indeterminate:hover:not(:disabled){background:color-mix(in srgb,var(--m-checkbox-checked-background, var(--m-focus)) 88%,black 12%);background-color:color-mix(in srgb,var(--m-checkbox-checked-background, var(--m-focus)) 88%,black 12%);border-color:color-mix(in srgb,var(--m-checkbox-checked-border, var(--m-focus)) 88%,black 12%);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-focus) 18%,transparent)}.checkbox input[type=checkbox]:indeterminate:focus,.checkbox input[type=checkbox]:indeterminate:focus-visible{box-shadow:none}.checkbox input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed;border-color:color-mix(in srgb,var(--m-text) 12%,var(--m-background))}.checkbox input[type=checkbox]:disabled:checked:after{opacity:.7}.checkbox input[type=checkbox].error{border-color:var(--m-error)}.checkbox{min-height:var(--input-size, 1em)}.radio{--m-radio-input-color: var(--m-input-color, var(--m-focus));display:inline-flex;align-items:center;gap:calc(var(--m-radio-size, calc(var(--input-size, 1em) * 1.25)) * .375);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.radio input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;margin:0;padding:0;position:relative;width:var(--m-radio-size, calc(var(--input-size, 1em) * 1.25));height:var(--m-radio-size, calc(var(--input-size, 1em) * 1.25));flex-shrink:0;box-sizing:border-box;background:var(--m-radio-background, var(--m-text-input-background, color-mix(in srgb, var(--m-focus) 2%, var(--m-background))));border-radius:50%;border:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));cursor:pointer;outline:none;box-shadow:none;transition:var(--m-radio-transition, var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease, background-color .2s ease))}.radio input[type=radio]:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:calc(var(--m-radio-size, calc(var(--input-size, 1em) * 1.25)) * .45);height:calc(var(--m-radio-size, calc(var(--input-size, 1em) * 1.25)) * .45);background-color:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:none}.radio{--m-label-margin: 0}.radio input[type=radio]:hover:not(:disabled):not(:checked){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-focus) 55%, var(--m-background)));background:var(--m-text-input-hover-background, color-mix(in srgb, var(--m-focus) 4%, var(--m-background)));box-shadow:none}.radio input[type=radio]:focus,.radio input[type=radio]:focus-visible{border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:none;outline:none}.radio input[type=radio]:active:not(:disabled):after{transform:translate(-50%,-50%) scale(.85)}.radio input[type=radio]:checked{border-color:var(--m-radio-checked-border, var(--m-focus));background:var(--m-radio-checked-background, var(--m-focus));background-color:var(--m-radio-checked-background, var(--m-focus));box-shadow:none}.radio input[type=radio]:checked:after{transform:translate(-50%,-50%) scale(1);background-color:#fff;opacity:1}.radio input[type=radio]:checked:hover:not(:disabled){background:color-mix(in srgb,var(--m-radio-checked-background, var(--m-focus)) 88%,black 12%);background-color:color-mix(in srgb,var(--m-radio-checked-background, var(--m-focus)) 88%,black 12%);border-color:color-mix(in srgb,var(--m-radio-checked-border, var(--m-focus)) 88%,black 12%);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-focus) 18%,transparent)}.radio input[type=radio]:checked:focus,.radio input[type=radio]:checked:focus-visible{box-shadow:none}.radio input[type=radio]:disabled{opacity:.5;cursor:not-allowed;border-color:color-mix(in srgb,var(--m-text) 12%,var(--m-background))}.radio input[type=radio]:disabled:checked:after{opacity:.7}.radio input[type=radio].error{border-color:var(--m-error)}.radio{min-height:var(--input-size, 1em)}:host-context(.section-form-item__input),:host-context(.m-dynamic-input){display:contents}:host-context(.section-form-item__input) .checkbox,:host-context(.section-form-item__input) .radio,:host-context(.m-dynamic-input) .checkbox,:host-context(.m-dynamic-input) .radio{display:flex;align-items:center;width:100%;height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-block:0;padding-inline:0;background:transparent;border:none;box-shadow:none;--m-label-margin: 0;--m-label-font-size: var(--m-label-font-size, calc(var(--input-size, 1em) * .875));gap:var(--m-checkbox-input-gap, .375em )}:host-context(.section-form-item__input) .checkbox input[type=checkbox],:host-context(.section-form-item__input) .checkbox input[type=radio],:host-context(.section-form-item__input) .radio input[type=checkbox],:host-context(.section-form-item__input) .radio input[type=radio],:host-context(.m-dynamic-input) .checkbox input[type=checkbox],:host-context(.m-dynamic-input) .checkbox input[type=radio],:host-context(.m-dynamic-input) .radio input[type=checkbox],:host-context(.m-dynamic-input) .radio input[type=radio]{flex:0 0 auto;margin:0;transform:none;width:var(--m-checkbox-size, var(--m-radio-size, calc(var(--input-size, 1em) * 1.25)));height:var(--m-checkbox-size, var(--m-radio-size, calc(var(--input-size, 1em) * 1.25)));border-width:var(--m-input-border-width, 1px);border-style:solid;border-color:var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));background:var(--m-checkbox-square-background, var(--m-text-input-background, color-mix(in srgb, var(--m-focus) 2%, var(--m-background))));box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;cursor:pointer;outline:none;box-sizing:border-box;position:relative;transition:var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease, background-color .2s ease)}:host-context(.section-form-item__input) .checkbox input[type=checkbox],:host-context(.section-form-item__input) .radio input[type=checkbox],:host-context(.m-dynamic-input) .checkbox input[type=checkbox],:host-context(.m-dynamic-input) .radio input[type=checkbox]{border-radius:var(--m-checkbox-radius, var(--m-input-radius, .35rem))}:host-context(.section-form-item__input) .checkbox input[type=radio],:host-context(.section-form-item__input) .radio input[type=radio],:host-context(.m-dynamic-input) .checkbox input[type=radio],:host-context(.m-dynamic-input) .radio input[type=radio]{border-radius:50%}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:after,:host-context(.section-form-item__input) .radio input[type=checkbox]:after,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:after,:host-context(.m-dynamic-input) .radio input[type=checkbox]:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-60%) scale(0) rotate(-45deg);width:calc(var(--m-checkbox-size, var(--m-radio-size, calc(var(--input-size, 1em) * 1.25))) * .45);height:calc(var(--m-checkbox-size, var(--m-radio-size, calc(var(--input-size, 1em) * 1.25))) * .25);border-left:calc(var(--m-checkbox-size, var(--m-radio-size, calc(var(--input-size, 1em) * 1.25))) * .12) solid #ffffff;border-bottom:calc(var(--m-checkbox-size, var(--m-radio-size, calc(var(--input-size, 1em) * 1.25))) * .12) solid #ffffff;box-shadow:none;transition:transform .2s ease}:host-context(.section-form-item__input) .checkbox input[type=radio]:after,:host-context(.section-form-item__input) .radio input[type=radio]:after,:host-context(.m-dynamic-input) .checkbox input[type=radio]:after,:host-context(.m-dynamic-input) .radio input[type=radio]:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:calc(var(--m-checkbox-size, var(--m-radio-size, calc(var(--input-size, 1em) * 1.25))) * .45);height:calc(var(--m-checkbox-size, var(--m-radio-size, calc(var(--input-size, 1em) * 1.25))) * .45);border-radius:50%;background-color:#fff;box-shadow:none;transition:transform .2s ease}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:hover:not(:disabled),:host-context(.section-form-item__input) .checkbox input[type=radio]:hover:not(:disabled),:host-context(.section-form-item__input) .radio input[type=checkbox]:hover:not(:disabled),:host-context(.section-form-item__input) .radio input[type=radio]:hover:not(:disabled),:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:hover:not(:disabled),:host-context(.m-dynamic-input) .checkbox input[type=radio]:hover:not(:disabled),:host-context(.m-dynamic-input) .radio input[type=checkbox]:hover:not(:disabled),:host-context(.m-dynamic-input) .radio input[type=radio]:hover:not(:disabled){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-focus) 55%, var(--m-background)));background:var(--m-text-input-hover-background, color-mix(in srgb, var(--m-focus) 4%, var(--m-background)));box-shadow:none;transform:none}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:focus,:host-context(.section-form-item__input) .checkbox input[type=checkbox]:focus-visible,:host-context(.section-form-item__input) .checkbox input[type=radio]:focus,:host-context(.section-form-item__input) .checkbox input[type=radio]:focus-visible,:host-context(.section-form-item__input) .radio input[type=checkbox]:focus,:host-context(.section-form-item__input) .radio input[type=checkbox]:focus-visible,:host-context(.section-form-item__input) .radio input[type=radio]:focus,:host-context(.section-form-item__input) .radio input[type=radio]:focus-visible,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:focus,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:focus-visible,:host-context(.m-dynamic-input) .checkbox input[type=radio]:focus,:host-context(.m-dynamic-input) .checkbox input[type=radio]:focus-visible,:host-context(.m-dynamic-input) .radio input[type=checkbox]:focus,:host-context(.m-dynamic-input) .radio input[type=checkbox]:focus-visible,:host-context(.m-dynamic-input) .radio input[type=radio]:focus,:host-context(.m-dynamic-input) .radio input[type=radio]:focus-visible{border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:none;outline:none}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:checked,:host-context(.section-form-item__input) .checkbox input[type=radio]:checked,:host-context(.section-form-item__input) .radio input[type=checkbox]:checked,:host-context(.section-form-item__input) .radio input[type=radio]:checked,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:checked,:host-context(.m-dynamic-input) .checkbox input[type=radio]:checked,:host-context(.m-dynamic-input) .radio input[type=checkbox]:checked,:host-context(.m-dynamic-input) .radio input[type=radio]:checked{border-color:var(--m-checkbox-checked-border, var(--m-focus));background-color:var(--m-checkbox-checked-background, var(--m-focus));box-shadow:none;transform:none}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:checked:hover:not(:disabled),:host-context(.section-form-item__input) .checkbox input[type=radio]:checked:hover:not(:disabled),:host-context(.section-form-item__input) .radio input[type=checkbox]:checked:hover:not(:disabled),:host-context(.section-form-item__input) .radio input[type=radio]:checked:hover:not(:disabled),:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:checked:hover:not(:disabled),:host-context(.m-dynamic-input) .checkbox input[type=radio]:checked:hover:not(:disabled),:host-context(.m-dynamic-input) .radio input[type=checkbox]:checked:hover:not(:disabled),:host-context(.m-dynamic-input) .radio input[type=radio]:checked:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-checkbox-checked-background, var(--m-focus)) 88%,black 12%);border-color:color-mix(in srgb,var(--m-checkbox-checked-border, var(--m-focus)) 88%,black 12%);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-focus) 18%,transparent)}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:checked:focus,:host-context(.section-form-item__input) .checkbox input[type=checkbox]:checked:focus-visible,:host-context(.section-form-item__input) .checkbox input[type=radio]:checked:focus,:host-context(.section-form-item__input) .checkbox input[type=radio]:checked:focus-visible,:host-context(.section-form-item__input) .radio input[type=checkbox]:checked:focus,:host-context(.section-form-item__input) .radio input[type=checkbox]:checked:focus-visible,:host-context(.section-form-item__input) .radio input[type=radio]:checked:focus,:host-context(.section-form-item__input) .radio input[type=radio]:checked:focus-visible,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:checked:focus,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:checked:focus-visible,:host-context(.m-dynamic-input) .checkbox input[type=radio]:checked:focus,:host-context(.m-dynamic-input) .checkbox input[type=radio]:checked:focus-visible,:host-context(.m-dynamic-input) .radio input[type=checkbox]:checked:focus,:host-context(.m-dynamic-input) .radio input[type=checkbox]:checked:focus-visible,:host-context(.m-dynamic-input) .radio input[type=radio]:checked:focus,:host-context(.m-dynamic-input) .radio input[type=radio]:checked:focus-visible{box-shadow:none}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:checked:after,:host-context(.section-form-item__input) .radio input[type=checkbox]:checked:after,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:checked:after,:host-context(.m-dynamic-input) .radio input[type=checkbox]:checked:after{transform:translate(-50%,-60%) scale(1) rotate(-45deg)}:host-context(.section-form-item__input) .checkbox input[type=radio]:checked:after,:host-context(.section-form-item__input) .radio input[type=radio]:checked:after,:host-context(.m-dynamic-input) .checkbox input[type=radio]:checked:after,:host-context(.m-dynamic-input) .radio input[type=radio]:checked:after{transform:translate(-50%,-50%) scale(1)}:host-context(.checkbox-group) .checkbox{width:auto;height:auto;min-height:0}\n"]
+		}]
+	}]
+});
+export { radio_exports as n, RadioInputComponent as t };
+
+//# sourceMappingURL=magmonium-one-radio-CYnWLXPZ.mjs.map

package/fesm2022/magmonium-one-radio-CYnWLXPZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"magmonium-one-radio-CYnWLXPZ.mjs","names":[],"sources":["../../../../libs/one/src/lib/shared/ui/input/ui/checkbox/radio.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed } from '@angular/core';\nimport { BaseCheckboxInputComponent } from './base-checkbox';\nimport { LabelComponent } from '../label';\nimport { RadioInput } from '../../model/input';\n\n@Component({\n  selector: 'm-radio',\n  template: `\n    @if (radioConfig(); as radio) {\n      <div class=\"radio\">\n        <input\n          [checked]=\"checked()\"\n          #inputElement\n          [class.error]=\"showErrors()\"\n          [disabled]=\"disabled()\"\n          (change)=\"onChange($event)\"\n          type=\"radio\"\n          [name]=\"radio.name\"\n          [id]=\"radio.id\"\n        />\n        <m-label\n          [for]=\"radio.id\"\n          [placeholder]=\"radio.label\"\n          [params]=\"radio.params\"\n          [required]=\"required()\"\n          [disabled]=\"disabled()\"\n        />\n      </div>\n    }\n  `,\n  styleUrl: './checkbox.sass',\n  imports: [LabelComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RadioInputComponent extends BaseCheckboxInputComponent {\n  protected readonly radioConfig = computed(() => this.config() as RadioInput);\n\n  protected onChange(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    this.setValue(target?.checked ?? false);\n  }\n}\n"],"mappings":";;;;;;AAkCA,IAAa,sBAAb,MAAa,4BAA4B,2BAA0B;CAC9C,cAAc,eAAe,KAAK,OAAM,GAAiB,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAElE,SAAS,OAAY;EAC7B,MAAM,SAAS,MAAM;EACrB,KAAK,SAAS,QAAQ,WAAW,KAAK;CACxC;CANW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAmB,MAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAnB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAmB,cAAA;EAAA,UAAA;EAAA,iBAAA;EAAA,UAAA;EAAA,UA3BpB;;;;;;;;;;;;;;;;;;;;;;;EAsBT,UAAA;EAAA,QAAA,CAAA,oljBAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MAES;GAAc,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAGb,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EA7B/B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAS,UACT;;;;;;;;;;;;;;;;;;;;;;;GAsBT,SAEQ,CAAC,cAAc;GAAC,iBACR,wBAAwB;GAAM,QAAA,CAAA,oljBAAA;EAAA,CAAA"}

package/fesm2022/magmonium-one-range-CmmZAr57.mjs

@@ -0,0 +1,216 @@
+import { t as __exportAll } from "./magmonium-one-rolldown-runtime-DpJrqANO.mjs";
+import { t as LabelComponent } from "./magmonium-one-label-B30Q4Vut.mjs";
+import { p as DraggableDirective } from "./magmonium-one-directives-DOBENX_K.mjs";
+import { t as BaseTextInputComponent } from "./magmonium-one-base-text-D6p6_vsb.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostListener, computed, effect, linkedSignal, signal, viewChild } from "@angular/core";
+var range_exports = /* @__PURE__ */ __exportAll({ RangeInputComponent: () => RangeInputComponent });
+var RangeInputComponent = class RangeInputComponent extends BaseTextInputComponent {
+	_track = viewChild("track", ...ngDevMode ? [{ debugName: "_track" }] : /* istanbul ignore next */ []);
+	_trackWidth = signal(0, ...ngDevMode ? [{ debugName: "_trackWidth" }] : /* istanbul ignore next */ []);
+	_TRACK_HALF_H = 3;
+	_measure = effect((onCleanup) => {
+		const track = this._track();
+		if (!track) return;
+		const el = track.nativeElement;
+		this._trackWidth.set(el.getBoundingClientRect().width);
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(([entry]) => this._trackWidth.set(entry.contentRect.width));
+		observer.observe(el);
+		onCleanup(() => observer.disconnect());
+	}, ...ngDevMode ? [{ debugName: "_measure" }] : /* istanbul ignore next */ []);
+	thumbDraggable = linkedSignal({
+		...ngDevMode ? { debugName: "thumbDraggable" } : /* istanbul ignore next */ {},
+		source: () => ({
+			val: this.value(),
+			tw: this._trackWidth(),
+			cfg: this.config()
+		}),
+		computation: ({ val, tw, cfg }) => {
+			const rangeCfg = cfg;
+			const min = rangeCfg?.min ?? 0;
+			const max = rangeCfg?.max ?? 100;
+			const numVal = Number(val) || min;
+			return {
+				direction: "x",
+				position: {
+					x: tw > 0 ? tw * (numVal - min) / (max - min) : 0,
+					y: this._TRACK_HALF_H
+				}
+			};
+		}
+	});
+	_displayValue = computed(() => {
+		const cfg = this.config();
+		const min = cfg?.min ?? 0;
+		const max = cfg?.max ?? 100;
+		const tw = this._trackWidth();
+		if (tw === 0) return Number(this.value()) || min;
+		const x = this.thumbDraggable().position.x ?? 0;
+		return Math.round(min + (max - min) * x / tw);
+	}, ...ngDevMode ? [{ debugName: "_displayValue" }] : /* istanbul ignore next */ []);
+	constructor() {
+		super();
+		effect(() => {
+			const pos = this.thumbDraggable().position;
+			const cfg = this.config();
+			const min = cfg?.min ?? 0;
+			const max = cfg?.max ?? 100;
+			const tw = this._trackWidth();
+			if (tw === 0) return;
+			const numVal = Number(this.value()) || min;
+			const expectedX = tw > 0 ? tw * (numVal - min) / (max - min) : 0;
+			if (pos.x !== expectedX) {
+				const val = Math.round(min + (max - min) * (pos.x ?? 0) / tw);
+				this.setValue(String(val));
+			}
+		});
+	}
+	_onResize() {
+		const track = this._track();
+		if (track) this._trackWidth.set(track.nativeElement.getBoundingClientRect().width);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: RangeInputComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: RangeInputComponent,
+		isStandalone: true,
+		selector: "m-range",
+		host: { listeners: { "window:resize": "_onResize()" } },
+		viewQueries: [{
+			propertyName: "_track",
+			first: true,
+			predicate: ["track"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    @if (config(); as range) {
+      <div class="m-range">
+        <m-label
+          class="m-range__label"
+          [placeholder]="range.label"
+          [params]="range.params"
+          [required]="required()"
+          [disabled]="disabled()"
+        />
+        <div class="m-range__control">
+          <div class="m-range__track" #track>
+            <div
+              class="m-range__fill"
+              [style.width.px]="thumbDraggable().position.x"
+            ></div>
+            <div
+              class="m-range__thumb"
+              [(mDraggable)]="thumbDraggable"
+              [min]="{ x: 0, y: _TRACK_HALF_H }"
+              [max]="{ x: _trackWidth(), y: _TRACK_HALF_H }"
+            ></div>
+          </div>
+          <span class="m-range__value" [class.hidden]="_displayValue() === 0">{{ _displayValue() !== 0 ? _displayValue() : '' }}</span>
+        </div>
+      </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:block;width:100%}:host-context(.m-dynamic-input),:host-context(.section-form-item__input){display:contents}:host-context(.m-dynamic-input) .m-range,:host-context(.section-form-item__input) .m-range{width:100%}.m-range{display:flex;flex-direction:column;gap:0;-webkit-user-select:none;user-select:none}.m-range .m-range__label{--m-label-margin: 0;--m-label-font-size: calc(var(--input-size, 1em) * .8);--m-label-color: var(--m-text-secondary)}.m-range__control{display:flex;align-items:center;height:calc(var(--input-size, 1em) * 2.75);min-height:calc(var(--input-size, 1em) * 2.75);padding-inline:calc(calc(var(--input-size, 1em) * .95) / 2);cursor:pointer;gap:0}.m-range__control:has(.m-range__value:not(.hidden)){gap:calc(var(--input-size, 1em) * .5)}.m-range__control:hover .m-range__track{height:6px}.m-range__track{flex:1;position:relative;height:2px;background-color:var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));border-radius:3px;overflow:visible;transition:height .15s ease}.m-range__fill{position:absolute;top:0;left:0;height:100%;background-color:var(--m-input-color, var(--m-mm));border-radius:inherit;pointer-events:none}.m-range__thumb{position:absolute;width:calc(var(--input-size, 1em) * .95);height:calc(var(--input-size, 1em) * .95);border-radius:50%;background-color:var(--m-input-color, var(--m-mm));border:2px solid var(--m-text-input-background, var(--m-background));box-shadow:0 0 0 1.5px var(--m-input-color, var(--m-mm)),0 1px 3px #00000026;top:50%;transform:translateY(-50%) translate(-50%);transition:box-shadow .15s ease;cursor:grab;z-index:1}.m-range__thumb:hover{box-shadow:0 0 0 1.5px var(--m-input-color, var(--m-mm)),0 0 0 calc(var(--input-size, 1em) * .45) color-mix(in srgb,var(--m-mm) 14%,transparent),0 1px 3px #00000026}.m-range__thumb.dragging{cursor:grabbing;box-shadow:0 0 0 1.5px var(--m-input-color, var(--m-mm)),var(--m-text-input-focus-shadow, 0 0 0 calc(var(--input-size, 1em) * .55) color-mix(in srgb, var(--m-mm) 25%, transparent));z-index:2}.m-range__value{font-size:calc(var(--input-size, 1em) * .8);font-weight:600;color:var(--m-input-color, var(--m-mm));font-variant-numeric:tabular-nums;flex-shrink:0;min-width:0}.m-range__value.hidden{display:none}.m-range--multi .m-range__control{height:calc(var(--input-size, 1em) * 2.75);min-height:calc(var(--input-size, 1em) * 2.75)}.m-range--multi .m-range__value{align-self:flex-end;font-size:calc(var(--input-size, 1em) * .75)}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: DraggableDirective,
+			selector: "[mDraggable]",
+			inputs: [
+				"mDraggable",
+				"handleSelector",
+				"min",
+				"max",
+				"pos"
+			],
+			outputs: [
+				"mDraggableChange",
+				"dragStart",
+				"dragEnd"
+			]
+		}, {
+			kind: "component",
+			type: LabelComponent,
+			selector: "m-label",
+			inputs: [
+				"for",
+				"placeholder",
+				"params",
+				"required",
+				"disabled",
+				"color",
+				"noTranslate"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: RangeInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-range",
+			imports: [DraggableDirective, LabelComponent],
+			template: `
+    @if (config(); as range) {
+      <div class="m-range">
+        <m-label
+          class="m-range__label"
+          [placeholder]="range.label"
+          [params]="range.params"
+          [required]="required()"
+          [disabled]="disabled()"
+        />
+        <div class="m-range__control">
+          <div class="m-range__track" #track>
+            <div
+              class="m-range__fill"
+              [style.width.px]="thumbDraggable().position.x"
+            ></div>
+            <div
+              class="m-range__thumb"
+              [(mDraggable)]="thumbDraggable"
+              [min]="{ x: 0, y: _TRACK_HALF_H }"
+              [max]="{ x: _trackWidth(), y: _TRACK_HALF_H }"
+            ></div>
+          </div>
+          <span class="m-range__value" [class.hidden]="_displayValue() === 0">{{ _displayValue() !== 0 ? _displayValue() : '' }}</span>
+        </div>
+      </div>
+    }
+  `,
+			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%}:host-context(.m-dynamic-input),:host-context(.section-form-item__input){display:contents}:host-context(.m-dynamic-input) .m-range,:host-context(.section-form-item__input) .m-range{width:100%}.m-range{display:flex;flex-direction:column;gap:0;-webkit-user-select:none;user-select:none}.m-range .m-range__label{--m-label-margin: 0;--m-label-font-size: calc(var(--input-size, 1em) * .8);--m-label-color: var(--m-text-secondary)}.m-range__control{display:flex;align-items:center;height:calc(var(--input-size, 1em) * 2.75);min-height:calc(var(--input-size, 1em) * 2.75);padding-inline:calc(calc(var(--input-size, 1em) * .95) / 2);cursor:pointer;gap:0}.m-range__control:has(.m-range__value:not(.hidden)){gap:calc(var(--input-size, 1em) * .5)}.m-range__control:hover .m-range__track{height:6px}.m-range__track{flex:1;position:relative;height:2px;background-color:var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));border-radius:3px;overflow:visible;transition:height .15s ease}.m-range__fill{position:absolute;top:0;left:0;height:100%;background-color:var(--m-input-color, var(--m-mm));border-radius:inherit;pointer-events:none}.m-range__thumb{position:absolute;width:calc(var(--input-size, 1em) * .95);height:calc(var(--input-size, 1em) * .95);border-radius:50%;background-color:var(--m-input-color, var(--m-mm));border:2px solid var(--m-text-input-background, var(--m-background));box-shadow:0 0 0 1.5px var(--m-input-color, var(--m-mm)),0 1px 3px #00000026;top:50%;transform:translateY(-50%) translate(-50%);transition:box-shadow .15s ease;cursor:grab;z-index:1}.m-range__thumb:hover{box-shadow:0 0 0 1.5px var(--m-input-color, var(--m-mm)),0 0 0 calc(var(--input-size, 1em) * .45) color-mix(in srgb,var(--m-mm) 14%,transparent),0 1px 3px #00000026}.m-range__thumb.dragging{cursor:grabbing;box-shadow:0 0 0 1.5px var(--m-input-color, var(--m-mm)),var(--m-text-input-focus-shadow, 0 0 0 calc(var(--input-size, 1em) * .55) color-mix(in srgb, var(--m-mm) 25%, transparent));z-index:2}.m-range__value{font-size:calc(var(--input-size, 1em) * .8);font-weight:600;color:var(--m-input-color, var(--m-mm));font-variant-numeric:tabular-nums;flex-shrink:0;min-width:0}.m-range__value.hidden{display:none}.m-range--multi .m-range__control{height:calc(var(--input-size, 1em) * 2.75);min-height:calc(var(--input-size, 1em) * 2.75)}.m-range--multi .m-range__value{align-self:flex-end;font-size:calc(var(--input-size, 1em) * .75)}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		_track: [{
+			type: i0.ViewChild,
+			args: ["track", { isSignal: true }]
+		}],
+		_onResize: [{
+			type: HostListener,
+			args: ["window:resize"]
+		}]
+	}
+});
+export { range_exports as n, RangeInputComponent as t };
+
+//# sourceMappingURL=magmonium-one-range-CmmZAr57.mjs.map

package/fesm2022/magmonium-one-range-CmmZAr57.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"magmonium-one-range-CmmZAr57.mjs","names":[],"sources":["../../../../libs/one/src/lib/shared/ui/input/ui/range/range.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  HostListener,\n  linkedSignal,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { BaseTextInputComponent } from '../text/base-text';\nimport { DraggableDirective, Draggable } from '../../../../directives';\nimport { LabelComponent } from '../label';\nimport { RangeInput } from '../../model/input';\nimport { Direction } from '../../../../type';\n\n@Component({\n  selector: 'm-range',\n  imports: [DraggableDirective, LabelComponent],\n  template: `\n    @if (config(); as range) {\n      <div class=\"m-range\">\n        <m-label\n          class=\"m-range__label\"\n          [placeholder]=\"range.label\"\n          [params]=\"range.params\"\n          [required]=\"required()\"\n          [disabled]=\"disabled()\"\n        />\n        <div class=\"m-range__control\">\n          <div class=\"m-range__track\" #track>\n            <div\n              class=\"m-range__fill\"\n              [style.width.px]=\"thumbDraggable().position.x\"\n            ></div>\n            <div\n              class=\"m-range__thumb\"\n              [(mDraggable)]=\"thumbDraggable\"\n              [min]=\"{ x: 0, y: _TRACK_HALF_H }\"\n              [max]=\"{ x: _trackWidth(), y: _TRACK_HALF_H }\"\n            ></div>\n          </div>\n          <span class=\"m-range__value\" [class.hidden]=\"_displayValue() === 0\">{{ _displayValue() !== 0 ? _displayValue() : '' }}</span>\n        </div>\n      </div>\n    }\n  `,\n  styleUrl: './range.sass',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RangeInputComponent extends BaseTextInputComponent<RangeInput> {\n  private readonly _track = viewChild<ElementRef<HTMLDivElement>>('track');\n  protected readonly _trackWidth = signal(0);\n  protected readonly _TRACK_HALF_H = 3;\n\n  /**\n   * Measured live rather than once. The track shares its row with the value\n   * readout and opens inside panels that animate in, and a width read mid\n   * animation is the scaled one — `getBoundingClientRect` counts transforms\n   * where a ResizeObserver's box does not. A stale width is a thumb that stops\n   * short of the track's end or, before the bounds became inputs on the\n   * Draggable, ran clean past it.\n   */\n  private readonly _measure = effect((onCleanup) => {\n    const track = this._track();\n    if (!track) return;\n\n    const el = track.nativeElement;\n    this._trackWidth.set(el.getBoundingClientRect().width);\n\n    // Absent under jsdom, where the window resize below is the only signal.\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(([entry]) =>\n      this._trackWidth.set(entry.contentRect.width)\n    );\n    observer.observe(el);\n    onCleanup(() => observer.disconnect());\n  });\n\n  thumbDraggable = linkedSignal({\n    source: () => ({\n      val: this.value(),\n      tw: this._trackWidth(),\n      cfg: this.config(),\n    }),\n    computation: ({\n      val,\n      tw,\n      cfg,\n    }: {\n      val: string;\n      tw: number;\n      cfg: unknown;\n    }): Draggable => {\n      const rangeCfg = cfg as RangeInput | undefined;\n      const min = rangeCfg?.min ?? 0;\n      const max = rangeCfg?.max ?? 100;\n      const numVal = Number(val) || min;\n      const x = tw > 0 ? (tw * (numVal - min)) / (max - min) : 0;\n      return {\n        direction: 'x' as Direction,\n        position: { x, y: this._TRACK_HALF_H },\n      };\n    },\n  });\n\n  readonly _displayValue = computed(() => {\n    const cfg = this.config() as RangeInput | undefined;\n    const min = cfg?.min ?? 0;\n    const max = cfg?.max ?? 100;\n    const tw = this._trackWidth();\n    if (tw === 0) return Number(this.value()) || min;\n    const x = this.thumbDraggable().position.x ?? 0;\n    return Math.round(min + ((max - min) * x) / tw);\n  });\n\n  constructor() {\n    super();\n    effect(() => {\n      const pos = this.thumbDraggable().position;\n      const cfg = this.config() as RangeInput | undefined;\n      const min = cfg?.min ?? 0;\n      const max = cfg?.max ?? 100;\n      const tw = this._trackWidth();\n      if (tw === 0) return;\n      const numVal = Number(this.value()) || min;\n      const expectedX = tw > 0 ? (tw * (numVal - min)) / (max - min) : 0;\n      if (pos.x !== expectedX) {\n        const val = Math.round(min + ((max - min) * (pos.x ?? 0)) / tw);\n        this.setValue(String(val));\n      }\n    });\n  }\n\n  @HostListener('window:resize')\n  protected _onResize(): void {\n    const track = this._track();\n    if (track) {\n      this._trackWidth.set(track.nativeElement.getBoundingClientRect().width);\n    }\n  }\n}\n"],"mappings":"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"}

package/fesm2022/magmonium-one-rolldown-runtime-DpJrqANO.mjs

@@ -0,0 +1,11 @@
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+export { __exportAll as t };