integra-ng 21.1.2 → 21.1.3

package/fesm2022/integra-ng.mjs

@@ -6515,6 +6515,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                 args: [ITabPanel]
             }] } });
 
+/**
+ * Toggle Component
+ *
+ * A form control toggle switch component that switches between true and false.
+ * Supports multiple sizes and states, and is fully compatible with Angular Reactive Forms.
+ *
+ * @example
+ * ```html
+ * <!-- Basic toggle -->
+ * <i-toggle label="Enable notifications"></i-toggle>
+ *
+ * <!-- Toggle with ngModel -->
+ * <i-toggle
+ *   label="Dark mode"
+ *   [(ngModel)]="darkMode">
+ * </i-toggle>
+ *
+ * <!-- Toggle in reactive form -->
+ * <i-toggle
+ *   label="Accept terms"
+ *   formControlName="acceptTerms">
+ * </i-toggle>
+ *
+ * <!-- Disabled toggle -->
+ * <i-toggle
+ *   label="Disabled option"
+ *   [disabled]="true">
+ * </i-toggle>
+ *
+ * <!-- Different sizes -->
+ * <i-toggle label="Small" size="small"></i-toggle>
+ * <i-toggle label="Medium" size="medium"></i-toggle>
+ * <i-toggle label="Large" size="large"></i-toggle>
+ * ```
+ *
+ * @remarks
+ * This component implements ControlValueAccessor for seamless integration with Angular Forms.
+ */
+class IToggle {
+    /**
+     * Label text displayed next to the toggle
+     */
+    label;
+    /**
+     * HTML id attribute for the toggle element
+     */
+    id;
+    /**
+     * Whether the toggle is disabled
+     * @default false
+     */
+    disabled = false;
+    /**
+     * Whether the toggle is readonly (cannot be changed by user)
+     * @default false
+     */
+    readonly = false;
+    /**
+     * Size of the toggle
+     * @default 'medium'
+     */
+    size = 'medium';
+    /**
+     * Checked (on) state of the toggle
+     */
+    set checked(value) {
+        this._checked = !!value;
+    }
+    get checked() {
+        return this._checked;
+    }
+    /**
+     * Event emitted when toggle state changes
+     */
+    onChange = new EventEmitter();
+    /**
+     * Unique component identifier
+     * @internal
+     */
+    componentId = UniqueComponentId('i-toggle-');
+    /**
+     * Internal checked state
+     * @internal
+     */
+    _checked = false;
+    /**
+     * Callback for ControlValueAccessor
+     * @internal
+     */
+    onChangeCallback = () => { };
+    /**
+     * Callback for ControlValueAccessor
+     * @internal
+     */
+    onTouchedCallback = () => { };
+    /**
+     * Toggles the switch state
+     * @internal
+     */
+    toggle() {
+        if (this.disabled || this.readonly)
+            return;
+        this._checked = !this._checked;
+        this.onChangeCallback(this._checked);
+        this.onTouchedCallback();
+        // Deferred to allow Angular's change detection cycle to process the new
+        // value before external listeners receive the event (mirrors checkbox pattern)
+        setTimeout(() => {
+            this.onChange.emit(this._checked);
+        }, 0);
+    }
+    /**
+     * Handles keyboard events (Space/Enter) — only prevents default when interactive
+     * @internal
+     */
+    handleKeydown(event) {
+        if (this.disabled || this.readonly)
+            return;
+        event.preventDefault();
+        this.toggle();
+    }
+    /**
+     * Writes a value to the toggle (ControlValueAccessor)
+     * @internal
+     */
+    writeValue(value) {
+        this._checked = !!value;
+    }
+    /**
+     * Registers the onChange callback (ControlValueAccessor)
+     * @internal
+     */
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    /**
+     * Registers the onTouched callback (ControlValueAccessor)
+     * @internal
+     */
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    /**
+     * Sets the disabled state (ControlValueAccessor)
+     * @internal
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IToggle, isStandalone: true, selector: "i-toggle", inputs: { label: "label", id: "id", disabled: "disabled", readonly: "readonly", size: "size", checked: "checked" }, outputs: { onChange: "onChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => IToggle),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div\n  class=\"i-toggle-wrapper\"\n  [class.i-toggle--disabled]=\"disabled\"\n  [class.i-toggle--readonly]=\"readonly\"\n  [class.i-toggle--small]=\"size === 'small'\"\n  [class.i-toggle--medium]=\"size === 'medium'\"\n  [class.i-toggle--large]=\"size === 'large'\"\n>\n  <div\n    class=\"i-toggle\"\n    [class.i-toggle--checked]=\"checked\"\n    (click)=\"toggle()\"\n    [attr.id]=\"id || componentId\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n    tabindex=\"0\"\n    (keydown.space)=\"handleKeydown($event)\"\n    (keydown.enter)=\"handleKeydown($event)\"\n  >\n    <span class=\"i-toggle-thumb\"></span>\n  </div>\n  @if (label) {\n  <label\n    [id]=\"(id || componentId) + '-label'\"\n    class=\"i-toggle-label\"\n    (click)=\"toggle()\"\n  >\n    {{ label }}\n  </label>\n  }\n</div>\n", styles: [".i-toggle-wrapper .i-toggle{background-color:var(--surface-border);border:1px solid var(--surface-border)}.i-toggle-wrapper .i-toggle:focus{box-shadow:0 2px 10px #0003}.i-toggle-wrapper .i-toggle:hover:not(.i-toggle--checked){background-color:color-mix(in srgb,var(--surface-border) 80%,var(--color-primary) 20%)}.i-toggle-wrapper .i-toggle.i-toggle--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.i-toggle-wrapper .i-toggle.i-toggle--checked:hover{background-color:color-mix(in srgb,var(--color-primary) 80%,transparent);border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-toggle-wrapper .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper .i-toggle .i-toggle-thumb{background-color:var(--color-contrast-inverse)}.i-toggle-wrapper .i-toggle-label{color:var(--color-text-primary)}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked{background-color:var(--color-disabled-background);border-color:var(--color-disabled-border)}.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper.i-toggle--disabled .i-toggle .i-toggle-thumb{background-color:var(--color-text-disabled)}.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{color:var(--color-text-disabled)}.i-toggle-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-toggle-wrapper.i-toggle--disabled{opacity:.6;cursor:not-allowed}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{cursor:not-allowed;pointer-events:none}.i-toggle-wrapper.i-toggle--readonly .i-toggle,.i-toggle-wrapper.i-toggle--readonly .i-toggle-label{cursor:default}.i-toggle-wrapper.i-toggle--small{font-size:.9em;gap:6px}.i-toggle-wrapper.i-toggle--small .i-toggle{width:28px;height:16px;border-radius:8px}.i-toggle-wrapper.i-toggle--small .i-toggle .i-toggle-thumb{width:10px;height:10px}.i-toggle-wrapper.i-toggle--small .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(13px)}.i-toggle-wrapper.i-toggle--medium{font-size:1em;gap:8px}.i-toggle-wrapper.i-toggle--medium .i-toggle{width:36px;height:20px;border-radius:10px}.i-toggle-wrapper.i-toggle--medium .i-toggle .i-toggle-thumb{width:14px;height:14px}.i-toggle-wrapper.i-toggle--medium .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(17px)}.i-toggle-wrapper.i-toggle--large{font-size:1.2em;gap:10px}.i-toggle-wrapper.i-toggle--large .i-toggle{width:44px;height:24px;border-radius:12px}.i-toggle-wrapper.i-toggle--large .i-toggle .i-toggle-thumb{width:18px;height:18px}.i-toggle-wrapper.i-toggle--large .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(21px)}.i-toggle-wrapper .i-toggle{position:relative;display:inline-flex;align-items:center;padding:0 2px;transition:background-color .2s ease,border-color .2s ease;cursor:pointer;box-sizing:border-box;flex-shrink:0}.i-toggle-wrapper .i-toggle:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-toggle-wrapper .i-toggle .i-toggle-thumb{border-radius:50%;transition:transform .2s ease,background-color .2s ease;flex-shrink:0}.i-toggle-wrapper .i-toggle-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-toggle', standalone: true, imports: [], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => IToggle),
+                            multi: true,
+                        },
+                    ], template: "<div\n  class=\"i-toggle-wrapper\"\n  [class.i-toggle--disabled]=\"disabled\"\n  [class.i-toggle--readonly]=\"readonly\"\n  [class.i-toggle--small]=\"size === 'small'\"\n  [class.i-toggle--medium]=\"size === 'medium'\"\n  [class.i-toggle--large]=\"size === 'large'\"\n>\n  <div\n    class=\"i-toggle\"\n    [class.i-toggle--checked]=\"checked\"\n    (click)=\"toggle()\"\n    [attr.id]=\"id || componentId\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n    tabindex=\"0\"\n    (keydown.space)=\"handleKeydown($event)\"\n    (keydown.enter)=\"handleKeydown($event)\"\n  >\n    <span class=\"i-toggle-thumb\"></span>\n  </div>\n  @if (label) {\n  <label\n    [id]=\"(id || componentId) + '-label'\"\n    class=\"i-toggle-label\"\n    (click)=\"toggle()\"\n  >\n    {{ label }}\n  </label>\n  }\n</div>\n", styles: [".i-toggle-wrapper .i-toggle{background-color:var(--surface-border);border:1px solid var(--surface-border)}.i-toggle-wrapper .i-toggle:focus{box-shadow:0 2px 10px #0003}.i-toggle-wrapper .i-toggle:hover:not(.i-toggle--checked){background-color:color-mix(in srgb,var(--surface-border) 80%,var(--color-primary) 20%)}.i-toggle-wrapper .i-toggle.i-toggle--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.i-toggle-wrapper .i-toggle.i-toggle--checked:hover{background-color:color-mix(in srgb,var(--color-primary) 80%,transparent);border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-toggle-wrapper .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper .i-toggle .i-toggle-thumb{background-color:var(--color-contrast-inverse)}.i-toggle-wrapper .i-toggle-label{color:var(--color-text-primary)}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked{background-color:var(--color-disabled-background);border-color:var(--color-disabled-border)}.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper.i-toggle--disabled .i-toggle .i-toggle-thumb{background-color:var(--color-text-disabled)}.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{color:var(--color-text-disabled)}.i-toggle-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-toggle-wrapper.i-toggle--disabled{opacity:.6;cursor:not-allowed}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{cursor:not-allowed;pointer-events:none}.i-toggle-wrapper.i-toggle--readonly .i-toggle,.i-toggle-wrapper.i-toggle--readonly .i-toggle-label{cursor:default}.i-toggle-wrapper.i-toggle--small{font-size:.9em;gap:6px}.i-toggle-wrapper.i-toggle--small .i-toggle{width:28px;height:16px;border-radius:8px}.i-toggle-wrapper.i-toggle--small .i-toggle .i-toggle-thumb{width:10px;height:10px}.i-toggle-wrapper.i-toggle--small .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(13px)}.i-toggle-wrapper.i-toggle--medium{font-size:1em;gap:8px}.i-toggle-wrapper.i-toggle--medium .i-toggle{width:36px;height:20px;border-radius:10px}.i-toggle-wrapper.i-toggle--medium .i-toggle .i-toggle-thumb{width:14px;height:14px}.i-toggle-wrapper.i-toggle--medium .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(17px)}.i-toggle-wrapper.i-toggle--large{font-size:1.2em;gap:10px}.i-toggle-wrapper.i-toggle--large .i-toggle{width:44px;height:24px;border-radius:12px}.i-toggle-wrapper.i-toggle--large .i-toggle .i-toggle-thumb{width:18px;height:18px}.i-toggle-wrapper.i-toggle--large .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(21px)}.i-toggle-wrapper .i-toggle{position:relative;display:inline-flex;align-items:center;padding:0 2px;transition:background-color .2s ease,border-color .2s ease;cursor:pointer;box-sizing:border-box;flex-shrink:0}.i-toggle-wrapper .i-toggle:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-toggle-wrapper .i-toggle .i-toggle-thumb{border-radius:50%;transition:transform .2s ease,background-color .2s ease;flex-shrink:0}.i-toggle-wrapper .i-toggle-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+
 /**
  * Tree View Component
  *
@@ -9673,5 +9856,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractDialog, CLAIMS_CHECKER, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, IChart, ICheckbox, IChip, IChipsComponent, IDialog, IDialogActions, IDialogBase, IInputText, IListbox, IMessage, IMultiSelect, IOverlayPanel, IPanel, IPlaceholder, IProgressSpinner, IRadioButton, ISelect, ITabPanel, ITable, ITabs, ITag, ITextarea, ITreeView, IWhisper, LayoutComponent, LayoutService, LocalStorageColorSchemeKey, MenuComponent, NoContentComponent, SeoService, SidebarComponent, StructuredDataService, TooltipComponent, TooltipDirective, TopbarComponent, UniqueComponentId, WhisperService, ZIndexUtils, lastId, provideMenuClaimsChecker };
+export { AbstractDialog, CLAIMS_CHECKER, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, IChart, ICheckbox, IChip, IChipsComponent, IDialog, IDialogActions, IDialogBase, IInputText, IListbox, IMessage, IMultiSelect, IOverlayPanel, IPanel, IPlaceholder, IProgressSpinner, IRadioButton, ISelect, ITabPanel, ITable, ITabs, ITag, ITextarea, IToggle, ITreeView, IWhisper, LayoutComponent, LayoutService, LocalStorageColorSchemeKey, MenuComponent, NoContentComponent, SeoService, SidebarComponent, StructuredDataService, TooltipComponent, TooltipDirective, TopbarComponent, UniqueComponentId, WhisperService, ZIndexUtils, lastId, provideMenuClaimsChecker };
 //# sourceMappingURL=integra-ng.mjs.map