ud-components 0.3.14 → 0.3.15

package/fesm2022/ud-components.mjs

@@ -48,6 +48,7 @@ import * as i2$4 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
 import * as i1$4 from '@angular/platform-browser';
 import { MatFormField as MatFormField$1 } from '@angular/material/form-field';
+import { IonInput, IonSpinner, IonSelect, IonSelectOption, IonTextarea, IonToggle, IonSegment, IonSegmentButton, IonLabel } from '@ionic/angular/standalone';
 
 class CarouselComponent {
     pictures = [];
@@ -3012,6 +3013,214 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                 type: Output
             }] } });
 
+class IonTextInputComponent {
+    controlName;
+    label = '';
+    placeholder = '';
+    type = 'text';
+    loading = false;
+    disabled = false;
+    step = 1;
+    controlContainer = inject(ControlContainer);
+    ngOnChanges(changes) {
+        if (changes['disabled']) {
+            this.disabled ? this.control.disable() : this.control.enable();
+        }
+    }
+    get control() {
+        return this.controlContainer.control.get(this.controlName);
+    }
+    increment() {
+        const current = Number(this.control.value ?? 0);
+        this.control.setValue(current + this.step);
+        this.control.markAsDirty();
+    }
+    decrement() {
+        const current = Number(this.control.value ?? 0);
+        this.control.setValue(current - this.step);
+        this.control.markAsDirty();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: IonTextInputComponent, isStandalone: true, selector: "ud-ion-text-input", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", type: "type", loading: "loading", disabled: "disabled", step: "step" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  <ion-input\n    class=\"ud-ion-input\"\n    [formControlName]=\"controlName\"\n    [type]=\"type\"\n    [label]=\"label\"\n    labelPlacement=\"floating\"\n    fill=\"outline\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled || control.disabled\">\n    @if (loading) {\n      <ion-spinner slot=\"end\" name=\"crescent\" class=\"ud-ion-spinner\" />\n    } @else if (type === 'number') {\n      <div slot=\"end\" class=\"ud-number-arrows\">\n        <button\n          type=\"button\"\n          class=\"ud-arrow-btn\"\n          [disabled]=\"disabled || control.disabled\"\n          (mousedown)=\"$event.preventDefault(); increment()\">&#9650;</button>\n        <button\n          type=\"button\"\n          class=\"ud-arrow-btn\"\n          [disabled]=\"disabled || control.disabled\"\n          (mousedown)=\"$event.preventDefault(); decrement()\">&#9660;</button>\n      </div>\n    }\n  </ion-input>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-input.ud-ion-input{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;--highlight-color-valid: #1b2535;--padding-start: 14px;--padding-end: 14px;--padding-top: 10px;--padding-bottom: 10px;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem}ion-input.ud-ion-input::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}.ud-ion-spinner{color:#6b7585;width:16px;height:16px}.ud-number-arrows{display:flex;flex-direction:column;gap:1px;margin-right:2px}.ud-arrow-btn{display:flex;align-items:center;justify-content:center;width:18px;height:14px;background:#f4f5f7;border:1px solid #e2e5ea;border-radius:3px;cursor:pointer;font-size:8px;color:#6b7585;padding:0;line-height:1;transition:background .15s ease}.ud-arrow-btn:hover:not([disabled]){background:#e2e5ea;color:#1b2535}.ud-arrow-btn[disabled]{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonTextInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ud-ion-text-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonInput, IonSpinner], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  <ion-input\n    class=\"ud-ion-input\"\n    [formControlName]=\"controlName\"\n    [type]=\"type\"\n    [label]=\"label\"\n    labelPlacement=\"floating\"\n    fill=\"outline\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled || control.disabled\">\n    @if (loading) {\n      <ion-spinner slot=\"end\" name=\"crescent\" class=\"ud-ion-spinner\" />\n    } @else if (type === 'number') {\n      <div slot=\"end\" class=\"ud-number-arrows\">\n        <button\n          type=\"button\"\n          class=\"ud-arrow-btn\"\n          [disabled]=\"disabled || control.disabled\"\n          (mousedown)=\"$event.preventDefault(); increment()\">&#9650;</button>\n        <button\n          type=\"button\"\n          class=\"ud-arrow-btn\"\n          [disabled]=\"disabled || control.disabled\"\n          (mousedown)=\"$event.preventDefault(); decrement()\">&#9660;</button>\n      </div>\n    }\n  </ion-input>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-input.ud-ion-input{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;--highlight-color-valid: #1b2535;--padding-start: 14px;--padding-end: 14px;--padding-top: 10px;--padding-bottom: 10px;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem}ion-input.ud-ion-input::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}.ud-ion-spinner{color:#6b7585;width:16px;height:16px}.ud-number-arrows{display:flex;flex-direction:column;gap:1px;margin-right:2px}.ud-arrow-btn{display:flex;align-items:center;justify-content:center;width:18px;height:14px;background:#f4f5f7;border:1px solid #e2e5ea;border-radius:3px;cursor:pointer;font-size:8px;color:#6b7585;padding:0;line-height:1;transition:background .15s ease}.ud-arrow-btn:hover:not([disabled]){background:#e2e5ea;color:#1b2535}.ud-arrow-btn[disabled]{opacity:.4;cursor:not-allowed}\n"] }]
+        }], propDecorators: { controlName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }] } });
+
+class IonSelectComponent {
+    controlName;
+    label = '';
+    options = [];
+    multiple = false;
+    placeholder = 'Select...';
+    loading = false;
+    disabled = false;
+    controlContainer = inject(ControlContainer);
+    ngOnChanges(changes) {
+        if (changes['disabled']) {
+            this.disabled ? this.control.disable() : this.control.enable();
+        }
+    }
+    get control() {
+        return this.controlContainer.control.get(this.controlName);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: IonSelectComponent, isStandalone: true, selector: "ud-ion-select", inputs: { controlName: "controlName", label: "label", options: "options", multiple: "multiple", placeholder: "placeholder", loading: "loading", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  @if (loading) {\n    <div class=\"ud-ion-skeleton\"></div>\n  } @else {\n    <ion-select\n      class=\"ud-ion-select\"\n      [formControlName]=\"controlName\"\n      [label]=\"label\"\n      labelPlacement=\"floating\"\n      fill=\"outline\"\n      [multiple]=\"multiple\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled || control.disabled\">\n      @for (option of options; track option.value) {\n        <ion-select-option [value]=\"option.value\">{{ option.label }}</ion-select-option>\n      }\n    </ion-select>\n  }\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-select.ud-ion-select{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;width:100%}ion-select.ud-ion-select::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}.ud-ion-skeleton{height:56px;border-radius:12px;background:linear-gradient(90deg,#f4f5f7 25%,#eaecef,#f4f5f7 75%);background-size:800px 100%;animation:shimmer 1.4s infinite linear}@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ud-ion-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonSelect, IonSelectOption], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  @if (loading) {\n    <div class=\"ud-ion-skeleton\"></div>\n  } @else {\n    <ion-select\n      class=\"ud-ion-select\"\n      [formControlName]=\"controlName\"\n      [label]=\"label\"\n      labelPlacement=\"floating\"\n      fill=\"outline\"\n      [multiple]=\"multiple\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled || control.disabled\">\n      @for (option of options; track option.value) {\n        <ion-select-option [value]=\"option.value\">{{ option.label }}</ion-select-option>\n      }\n    </ion-select>\n  }\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-select.ud-ion-select{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;width:100%}ion-select.ud-ion-select::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}.ud-ion-skeleton{height:56px;border-radius:12px;background:linear-gradient(90deg,#f4f5f7 25%,#eaecef,#f4f5f7 75%);background-size:800px 100%;animation:shimmer 1.4s infinite linear}@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}\n"] }]
+        }], propDecorators: { controlName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], label: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class IonTextareaComponent {
+    controlName;
+    label = '';
+    placeholder = '';
+    rows = 4;
+    disabled = false;
+    controlContainer = inject(ControlContainer);
+    ngOnChanges(changes) {
+        if (changes['disabled']) {
+            this.disabled ? this.control.disable() : this.control.enable();
+        }
+    }
+    get control() {
+        return this.controlContainer.control.get(this.controlName);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: IonTextareaComponent, isStandalone: true, selector: "ud-ion-textarea", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", rows: "rows", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  <ion-textarea\n    class=\"ud-ion-textarea\"\n    [formControlName]=\"controlName\"\n    [label]=\"label\"\n    labelPlacement=\"floating\"\n    fill=\"outline\"\n    [placeholder]=\"placeholder\"\n    [rows]=\"rows\"\n    [disabled]=\"disabled || control.disabled\" />\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-textarea.ud-ion-textarea{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;--padding-start: 14px;--padding-end: 14px;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem}ion-textarea.ud-ion-textarea::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ud-ion-textarea', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonTextarea], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  <ion-textarea\n    class=\"ud-ion-textarea\"\n    [formControlName]=\"controlName\"\n    [label]=\"label\"\n    labelPlacement=\"floating\"\n    fill=\"outline\"\n    [placeholder]=\"placeholder\"\n    [rows]=\"rows\"\n    [disabled]=\"disabled || control.disabled\" />\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-textarea.ud-ion-textarea{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;--padding-start: 14px;--padding-end: 14px;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem}ion-textarea.ud-ion-textarea::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}\n"] }]
+        }], propDecorators: { controlName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class IonToggleComponent {
+    controlName;
+    label = '';
+    labelPosition = 'end';
+    disabled = false;
+    ionChange = new EventEmitter();
+    controlContainer = inject(ControlContainer);
+    destroy$ = new Subject();
+    ngOnInit() {
+        this.control.valueChanges
+            .pipe(startWith(this.control.value), takeUntil(this.destroy$))
+            .subscribe(() => { });
+    }
+    ngOnChanges(changes) {
+        if (changes['disabled']) {
+            this.disabled ? this.control.disable() : this.control.enable();
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    get control() {
+        return this.controlContainer.control.get(this.controlName);
+    }
+    onToggleChange(event) {
+        this.ionChange.emit(event.detail.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: IonToggleComponent, isStandalone: true, selector: "ud-ion-toggle", inputs: { controlName: "controlName", label: "label", labelPosition: "labelPosition", disabled: "disabled" }, outputs: { ionChange: "ionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-ion-toggle-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  <ion-toggle\n    class=\"ud-ion-toggle\"\n    [formControlName]=\"controlName\"\n    [labelPlacement]=\"labelPosition\"\n    [disabled]=\"disabled || control.disabled\"\n    (ionChange)=\"onToggleChange($event)\">\n    {{ label }}\n  </ion-toggle>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-toggle-wrap{display:inline-flex;align-items:center}.ud-ion-toggle-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-toggle.ud-ion-toggle{--track-background: #e2e5ea;--track-background-checked: #1b2535;--handle-background: #ffffff;--handle-background-checked: #ffffff;--handle-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;color:#1b2535}ion-toggle.ud-ion-toggle::part(label){font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;color:#1b2535;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "value"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ud-ion-toggle', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonToggle], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div class=\"ud-ion-toggle-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  <ion-toggle\n    class=\"ud-ion-toggle\"\n    [formControlName]=\"controlName\"\n    [labelPlacement]=\"labelPosition\"\n    [disabled]=\"disabled || control.disabled\"\n    (ionChange)=\"onToggleChange($event)\">\n    {{ label }}\n  </ion-toggle>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-toggle-wrap{display:inline-flex;align-items:center}.ud-ion-toggle-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-toggle.ud-ion-toggle{--track-background: #e2e5ea;--track-background-checked: #1b2535;--handle-background: #ffffff;--handle-background-checked: #ffffff;--handle-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;color:#1b2535}ion-toggle.ud-ion-toggle::part(label){font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;color:#1b2535;font-weight:500}\n"] }]
+        }], propDecorators: { controlName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], label: [{
+                type: Input
+            }], labelPosition: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], ionChange: [{
+                type: Output
+            }] } });
+
+class IonPillToggleComponent {
+    controlName;
+    label = '';
+    options = [];
+    disabled = false;
+    controlContainer = inject(ControlContainer);
+    ngOnChanges(changes) {
+        if (changes['disabled']) {
+            this.disabled ? this.control.disable() : this.control.enable();
+        }
+    }
+    get control() {
+        return this.controlContainer.control.get(this.controlName);
+    }
+    onSegmentChange(event) {
+        if (this.control.disabled)
+            return;
+        this.control.setValue(event.detail.value);
+        this.control.markAsTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonPillToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: IonPillToggleComponent, isStandalone: true, selector: "ud-ion-pill-toggle", inputs: { controlName: "controlName", label: "label", options: "options", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-ion-pill-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  @if (label) {\n    <span class=\"ud-ion-pill-label\">{{ label }}</span>\n  }\n  <ion-segment\n    class=\"ud-ion-segment\"\n    [value]=\"control.value\"\n    [disabled]=\"disabled || control.disabled\"\n    (ionChange)=\"onSegmentChange($event)\">\n    @for (option of options; track option.value) {\n      <ion-segment-button [value]=\"option.value\" class=\"ud-ion-segment-btn\">\n        <ion-label>{{ option.label }}</ion-label>\n      </ion-segment-button>\n    }\n  </ion-segment>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-pill-wrap{display:flex;flex-direction:column;gap:6px}.ud-ion-pill-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.ud-ion-pill-label{font-family:DM Sans,system-ui,sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6b7585}ion-segment.ud-ion-segment{--background: #f4f5f7;border-radius:10px;padding:3px;height:40px}ion-segment-button.ud-ion-segment-btn{--background: transparent;--background-checked: #1b2535;--color: #6b7585;--color-checked: #ffffff;--border-radius: 8px;--indicator-height: 0;--padding-top: 0;--padding-bottom: 0;min-height:unset;font-family:DM Sans,system-ui,sans-serif;font-size:.8rem;font-weight:500;transition:background .15s ease}ion-segment-button.ud-ion-segment-btn ion-label{font-family:DM Sans,system-ui,sans-serif;font-size:.8rem;font-weight:500;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: IonSegmentButton, selector: "ion-segment-button", inputs: ["contentId", "disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonPillToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ud-ion-pill-toggle', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonSegment, IonSegmentButton, IonLabel], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div class=\"ud-ion-pill-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  @if (label) {\n    <span class=\"ud-ion-pill-label\">{{ label }}</span>\n  }\n  <ion-segment\n    class=\"ud-ion-segment\"\n    [value]=\"control.value\"\n    [disabled]=\"disabled || control.disabled\"\n    (ionChange)=\"onSegmentChange($event)\">\n    @for (option of options; track option.value) {\n      <ion-segment-button [value]=\"option.value\" class=\"ud-ion-segment-btn\">\n        <ion-label>{{ option.label }}</ion-label>\n      </ion-segment-button>\n    }\n  </ion-segment>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-pill-wrap{display:flex;flex-direction:column;gap:6px}.ud-ion-pill-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.ud-ion-pill-label{font-family:DM Sans,system-ui,sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6b7585}ion-segment.ud-ion-segment{--background: #f4f5f7;border-radius:10px;padding:3px;height:40px}ion-segment-button.ud-ion-segment-btn{--background: transparent;--background-checked: #1b2535;--color: #6b7585;--color-checked: #ffffff;--border-radius: 8px;--indicator-height: 0;--padding-top: 0;--padding-bottom: 0;min-height:unset;font-family:DM Sans,system-ui,sans-serif;font-size:.8rem;font-weight:500;transition:background .15s ease}ion-segment-button.ud-ion-segment-btn ion-label{font-family:DM Sans,system-ui,sans-serif;font-size:.8rem;font-weight:500;margin:0}\n"] }]
+        }], propDecorators: { controlName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], label: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
 const generateTimeOptions = (start, end, intervalMinutes = 5) => {
     const options = [];
     const cursor = new Date(start);
@@ -3035,5 +3244,5 @@ const generateTimeOptions = (start, end, intervalMinutes = 5) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionType, ApplicationStatus, AutocompleteComponent, CapitalizePipe, CarouselComponent, CustomInputComponent, CustomSnackbarComponent, CustomTableComponent, DateInputComponent, DateOperator, DateRangeInputComponent, DynamicComponentComponent, EditViewComponent, EditViewSectionDirective, FileInputComponent, FilterType, IconColor, KpiComponent, KpiDataType, KpiPillType, KpiProgressBarType, KpiVariant, ModalComponent, ModalInputType, MultiSelectComponent, NumberOperator, PhoneInputComponent, PillComponent, PillToggleComponent, PluralizePipe, ProgressBarComponent, Role, SafePipe, SingularPipe, SnackbarType, StringOperator, SummaryViewComponent, TableDisplayColumnType, TabsComponent, TelInputComponent, TextInputComponent, TextareaComponent, TimePickerComponent, ToggleComponent, TranslateWrapperService, UdButtonComponent, capitalize, formatLocalDate, formatLocalDateTime, formatLocalDateTimeLongForm, formatLocalTime, formatLocalTimeWithMinutes, formatLocalTimeWithMinutesAmPm, formatMonthYear, formatPhoneNumber, formatStringDate, formatStringDateTime, generateTimeOptions, inListValidator, parseLocalDate, pluralize, spaceCase, updateArray };
+export { ActionType, ApplicationStatus, AutocompleteComponent, CapitalizePipe, CarouselComponent, CustomInputComponent, CustomSnackbarComponent, CustomTableComponent, DateInputComponent, DateOperator, DateRangeInputComponent, DynamicComponentComponent, EditViewComponent, EditViewSectionDirective, FileInputComponent, FilterType, IconColor, IonPillToggleComponent, IonSelectComponent, IonTextInputComponent, IonTextareaComponent, IonToggleComponent, KpiComponent, KpiDataType, KpiPillType, KpiProgressBarType, KpiVariant, ModalComponent, ModalInputType, MultiSelectComponent, NumberOperator, PhoneInputComponent, PillComponent, PillToggleComponent, PluralizePipe, ProgressBarComponent, Role, SafePipe, SingularPipe, SnackbarType, StringOperator, SummaryViewComponent, TableDisplayColumnType, TabsComponent, TelInputComponent, TextInputComponent, TextareaComponent, TimePickerComponent, ToggleComponent, TranslateWrapperService, UdButtonComponent, capitalize, formatLocalDate, formatLocalDateTime, formatLocalDateTimeLongForm, formatLocalTime, formatLocalTimeWithMinutes, formatLocalTimeWithMinutesAmPm, formatMonthYear, formatPhoneNumber, formatStringDate, formatStringDateTime, generateTimeOptions, inListValidator, parseLocalDate, pluralize, spaceCase, updateArray };
 //# sourceMappingURL=ud-components.mjs.map