@vsn-ux/ngx-gaia 0.11.3 → 0.11.4

package/DOCS.md

@@ -422,6 +422,10 @@ Data select component that automatically generates options from an items array.
 - `closed()` - Emitted when dropdown closes
 - `optionsEndReached()` - Emitted when user scrolls to bottom of options
 
+#### Methods:
+
+- `focus(): void` - Focus the select trigger
+
 ### `IGaSelectOption<T>`
 
 Type for option items with special properties:
@@ -1211,6 +1215,10 @@ Select component.
 - `multiple: boolean` - Multiple selection
 - `clearable: boolean` - Show clear button
 
+#### Methods:
+
+- `focus(): void` - Focus the select trigger
+
 ### `<ga-select-dropdown>`
 
 Dropdown container component.
@@ -1325,9 +1333,9 @@ Switch component for boolean toggle controls.
 
 #### Inputs:
 
-- `label: string` - Switch label (default: '')
 - `checked: boolean` - Checked state (default: false)
 - `disabled: boolean` - Disabled state (default: false)
+- `label: string` - **@deprecated** Use content projection instead (default: '')
 
 #### Outputs:
 
@@ -1335,11 +1343,11 @@ Switch component for boolean toggle controls.
 
 ### Examples:
 
-Switch with label
+Switch with visible label
 
 ```html
-<ga-switch label="Enable notifications" [(checked)]="enabled" />
-<ga-switch [(ngModel)]="value" label="Dark mode" />
+<ga-switch [(checked)]="enabled">Enable notifications</ga-switch>
+<ga-switch [(ngModel)]="value">Dark mode</ga-switch>
 ```
 
 ## Tabs

package/fesm2022/vsn-ux-ngx-gaia.mjs

@@ -1278,13 +1278,14 @@ class GaInputDirective {
         this.elementRef.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaInputDirective, deps: [{ token: 'placeholder', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: GaInputDirective, isStandalone: true, selector: "[gaInput]", inputs: { invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()", "class.ga-input": "!hasWrapper", "class.ga-input--invalid": "!hasWrapper && invalid()", "attr.disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: GaInputDirective, isStandalone: true, selector: "[gaInput]", inputs: { invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()", "class.ga-input": "!hasWrapper", "class.ga-input--invalid": "!hasWrapper && invalid()", "attr.disabled": "disabled() ? \"\" : null" } }, exportAs: ["gaInput"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaInputDirective, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[gaInput]',
+                    exportAs: 'gaInput',
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
@@ -4078,6 +4079,9 @@ class GaSelectComponent {
     focusListbox() {
         this.cdkListbox().focus();
     }
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
     setPreviousItemActive() {
         this.setItemActive(-1);
     }
@@ -5062,6 +5066,9 @@ class GaDataSelectComponent {
     focusListbox() {
         this.cdkListbox().focus();
     }
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
     setActiveItemAsSelected() {
         const options = this.gaOptions();
         let activeOption = options.find((option) => option.cdkOption.isActive());
@@ -5326,6 +5333,12 @@ const SWITCH_CONTROL_VALUE_ACCESSOR = {
 let nextUniqueId$2 = 0;
 class GaSwitchComponent {
     icons = { Check };
+    /** Reference to the label element for content projection detection */
+    labelElement = viewChild('labelElement', ...(ngDevMode ? [{ debugName: "labelElement" }] : []));
+    /** Signal to track if content is projected */
+    hasProjectedContent = signal(false, ...(ngDevMode ? [{ debugName: "hasProjectedContent" }] : []));
+    /** @ignore */
+    destroyRef = inject(DestroyRef);
     /** @ignore */
     formFieldConnector = inject(GaFormFieldConnector, {
         optional: true,
@@ -5343,6 +5356,9 @@ class GaSwitchComponent {
     checked = input(false, { ...(ngDevMode ? { debugName: "checked" } : {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
     ariaInvalid = input(null, { ...(ngDevMode ? { debugName: "ariaInvalid" } : {}), alias: 'aria-invalid' });
+    /**
+     * @deprecated Use content projection instead: `<ga-switch>Label text</ga-switch>`
+     */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
     ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : {}), alias: 'aria-labelledby' });
@@ -5371,6 +5387,22 @@ class GaSwitchComponent {
             effect(() => formFieldConnector.controlDisabled.set(this.disabledModel()));
             effect(() => formFieldConnector.controlId.set(this.inputId()));
         }
+        afterNextRender(() => {
+            const el = this.labelElement()?.nativeElement;
+            if (!el)
+                return;
+            this.updateHasProjectedContent(el);
+            const observer = new MutationObserver(() => this.updateHasProjectedContent(el));
+            observer.observe(el, {
+                childList: true,
+                characterData: true,
+                subtree: true,
+            });
+            this.destroyRef.onDestroy(() => observer.disconnect());
+        });
+    }
+    updateHasProjectedContent(el) {
+        this.hasProjectedContent.set((el.textContent?.trim().length ?? 0) > 0);
     }
     /** @ignore */
     onInputChange(event) {
@@ -5399,7 +5431,7 @@ class GaSwitchComponent {
         this.disabledModel.set(disabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: GaSwitchComponent, isStandalone: true, selector: "ga-switch", inputs: { tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaErrormessage: { classPropertyName: "ariaErrormessage", publicName: "aria-errormessage", isSignal: true, isRequired: false, transformFunction: null }, nameInput: { classPropertyName: "nameInput", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.ga-switch--checked": "checkedModel()", "class.ga-switch--disabled": "disabledModel()", "class.ga-switch--invalid": "invalidComputed()", "attr.id": "null", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.aria-errormessage": "null", "attr.aria-invalid": "null" }, classAttribute: "ga-switch" }, providers: [SWITCH_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<input\n  #input\n  type=\"checkbox\"\n  class=\"ga-switch__input\"\n  [attr.id]=\"inputId()\"\n  [name]=\"name()\"\n  [checked]=\"checkedModel()\"\n  [disabled]=\"disabledModel()\"\n  [attr.tabindex]=\"tabindex()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  [attr.aria-invalid]=\"invalidComputed() ? 'true' : null\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"ga-switch__marker\">\n  <ga-icon\n    [icon]=\"icons.Check\"\n    class=\"ga-switch__check-icon\"\n    [size]=\"16\"\n    aria-hidden=\"true\"\n  />\n  <span class=\"ga-switch__slider\"></span>\n</div>\n@if (label()) {\n  <label [attr.for]=\"inputId()\" class=\"ga-switch__label\">{{ label() }}</label>\n}\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: GaSwitchComponent, isStandalone: true, selector: "ga-switch", inputs: { tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaErrormessage: { classPropertyName: "ariaErrormessage", publicName: "aria-errormessage", isSignal: true, isRequired: false, transformFunction: null }, nameInput: { classPropertyName: "nameInput", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.ga-switch--checked": "checkedModel()", "class.ga-switch--disabled": "disabledModel()", "class.ga-switch--invalid": "invalidComputed()", "attr.id": "null", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.aria-errormessage": "null", "attr.aria-invalid": "null" }, classAttribute: "ga-switch" }, providers: [SWITCH_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #input\n  type=\"checkbox\"\n  class=\"ga-switch__input\"\n  [attr.id]=\"inputId()\"\n  [name]=\"name()\"\n  [checked]=\"checkedModel()\"\n  [disabled]=\"disabledModel()\"\n  [attr.tabindex]=\"tabindex()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  [attr.aria-invalid]=\"invalidComputed() ? 'true' : null\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"ga-switch__marker\">\n  <ga-icon\n    [icon]=\"icons.Check\"\n    class=\"ga-switch__check-icon\"\n    [size]=\"16\"\n    aria-hidden=\"true\"\n  />\n  <span class=\"ga-switch__slider\"></span>\n</div>\n@if (label()) {\n  <label [attr.for]=\"inputId()\" class=\"ga-switch__label\">{{ label() }}</label>\n} @else {\n  <label\n    #labelElement\n    [attr.for]=\"hasProjectedContent() ? inputId() : null\"\n    [class.ga-switch__label]=\"hasProjectedContent()\"\n    [hidden]=\"!hasProjectedContent()\"\n  >\n    <ng-content></ng-content>\n  </label>\n}\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaSwitchComponent, decorators: [{
             type: Component,
@@ -5415,8 +5447,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImpor
                         '[attr.aria-describedby]': 'null',
                         '[attr.aria-errormessage]': 'null',
                         '[attr.aria-invalid]': 'null',
-                    }, template: "<input\n  #input\n  type=\"checkbox\"\n  class=\"ga-switch__input\"\n  [attr.id]=\"inputId()\"\n  [name]=\"name()\"\n  [checked]=\"checkedModel()\"\n  [disabled]=\"disabledModel()\"\n  [attr.tabindex]=\"tabindex()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  [attr.aria-invalid]=\"invalidComputed() ? 'true' : null\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"ga-switch__marker\">\n  <ga-icon\n    [icon]=\"icons.Check\"\n    class=\"ga-switch__check-icon\"\n    [size]=\"16\"\n    aria-hidden=\"true\"\n  />\n  <span class=\"ga-switch__slider\"></span>\n</div>\n@if (label()) {\n  <label [attr.for]=\"inputId()\" class=\"ga-switch__label\">{{ label() }}</label>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaErrormessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-errormessage", required: false }] }], nameInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
+                    }, template: "<input\n  #input\n  type=\"checkbox\"\n  class=\"ga-switch__input\"\n  [attr.id]=\"inputId()\"\n  [name]=\"name()\"\n  [checked]=\"checkedModel()\"\n  [disabled]=\"disabledModel()\"\n  [attr.tabindex]=\"tabindex()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  [attr.aria-invalid]=\"invalidComputed() ? 'true' : null\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"ga-switch__marker\">\n  <ga-icon\n    [icon]=\"icons.Check\"\n    class=\"ga-switch__check-icon\"\n    [size]=\"16\"\n    aria-hidden=\"true\"\n  />\n  <span class=\"ga-switch__slider\"></span>\n</div>\n@if (label()) {\n  <label [attr.for]=\"inputId()\" class=\"ga-switch__label\">{{ label() }}</label>\n} @else {\n  <label\n    #labelElement\n    [attr.for]=\"hasProjectedContent() ? inputId() : null\"\n    [class.ga-switch__label]=\"hasProjectedContent()\"\n    [hidden]=\"!hasProjectedContent()\"\n  >\n    <ng-content></ng-content>\n  </label>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { labelElement: [{ type: i0.ViewChild, args: ['labelElement', { isSignal: true }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaErrormessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-errormessage", required: false }] }], nameInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
 
 class GaSwitchModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });