@ojiepermana/angular 21.3.3 → 22.0.1

package/fesm2022/ojiepermana-angular-component-scroll-area.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular-component-scroll-area.mjs","sources":["../../../projects/angular/component/scroll-area/src/lib/scroll-area.component.ts","../../../projects/angular/component/scroll-area/ojiepermana-angular-component-scroll-area.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, numberAttribute } from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n/**\n * Lightweight scroll area using native scrollbars styled via CSS.\n * Fully accessible — real scrolling, keyboard, wheel, momentum.\n */\n@Component({\n  selector: 'ui-scroll-area',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n  },\n  template: `\n    <div\n      [class]=\"viewportClasses()\"\n      [attr.aria-label]=\"viewportAriaLabel()\"\n      [attr.role]=\"viewportRole()\"\n      [attr.tabindex]=\"viewportTabIndex()\">\n      <ng-content />\n    </div>\n  `,\n  styles: [\n    `\n      :host {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n      .ui-scroll-area-viewport {\n        overflow: auto;\n        scrollbar-width: thin;\n        scrollbar-color: var(--tw-scrollbar-thumb, hsl(var(--border))) var(--tw-scrollbar-track, transparent);\n      }\n      .ui-scroll-area-viewport::-webkit-scrollbar {\n        width: 10px;\n        height: 10px;\n      }\n      .ui-scroll-area-viewport::-webkit-scrollbar-track {\n        background: var(--tw-scrollbar-track, transparent);\n      }\n      .ui-scroll-area-viewport::-webkit-scrollbar-thumb {\n        background: var(--tw-scrollbar-thumb, hsl(var(--border)));\n        border: var(--border-width) solid transparent;\n        background-clip: padding-box;\n        border-radius: var(--radius-lg);\n      }\n      .ui-scroll-area-viewport::-webkit-scrollbar-thumb:hover {\n        background: var(--ui-scrollbar-thumb-hover, var(--tw-scrollbar-thumb, hsl(var(--muted-foreground))));\n        background-clip: padding-box;\n      }\n      @media (forced-colors: active) {\n        .ui-scroll-area-viewport {\n          scrollbar-width: auto;\n          scrollbar-color: auto;\n        }\n        .ui-scroll-area-viewport::-webkit-scrollbar-thumb {\n          background: CanvasText;\n          border-color: transparent;\n        }\n      }\n    `,\n  ],\n})\nexport class ScrollAreaComponent {\n  readonly class = input<string>('');\n  readonly viewportClass = input<string>('');\n  readonly viewportAriaLabel = input<string | null>(null);\n  readonly viewportTabIndex = input(0, { transform: numberAttribute });\n  protected readonly classes = computed(() => cn('relative overflow-hidden', this.class()));\n  protected readonly viewportRole = computed(() => (this.viewportAriaLabel() ? 'region' : null));\n  protected readonly viewportClasses = computed(() =>\n    cn(\n      'ui-scroll-area-viewport h-full w-full rounded-[inherit]',\n      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',\n      this.viewportClass(),\n    ),\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAGA;;;AAGG;MA0DU,mBAAmB,CAAA;AACrB,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;AACzB,IAAA,aAAa,GAAG,KAAK,CAAS,EAAE,oFAAC;AACjC,IAAA,iBAAiB,GAAG,KAAK,CAAgB,IAAI,wFAAC;IAC9C,gBAAgB,GAAG,KAAK,CAAC,CAAC,wFAAI,SAAS,EAAE,eAAe,EAAA,CAAG;AACjD,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,0BAA0B,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,8EAAC;IACtE,YAAY,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,iBAAiB,EAAE,GAAG,QAAQ,GAAG,IAAI,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,cAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;AAC3E,IAAA,eAAe,GAAG,QAAQ,CAAC,MAC5C,EAAE,CACA,yDAAyD,EACzD,kGAAkG,EAClG,IAAI,CAAC,aAAa,EAAE,CACrB,sFACF;wGAbU,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAnDpB;;;;;;;;AAQT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,+8BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FA2CU,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAzD/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,eAAA,EACT,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,SAAS,EAAE,WAAW;qBACvB,EAAA,QAAA,EACS;;;;;;;;AAQT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,+8BAAA,CAAA,EAAA;;;ACrBH;;AAEG;;;;"}
+{"version":3,"file":"ojiepermana-angular-component-scroll-area.mjs","sources":["../../../projects/angular/component/scroll-area/scroll-area.component.ts","../../../projects/angular/component/scroll-area/ojiepermana-angular-component-scroll-area.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, numberAttribute } from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n/**\n * Lightweight scroll area using native scrollbars styled via CSS.\n * Fully accessible — real scrolling, keyboard, wheel, momentum.\n */\n@Component({\n  selector: 'ui-scroll-area',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n  },\n  template: `\n    <div\n      [class]=\"viewportClasses()\"\n      [attr.aria-label]=\"viewportAriaLabel()\"\n      [attr.role]=\"viewportRole()\"\n      [attr.tabindex]=\"viewportTabIndex()\">\n      <ng-content />\n    </div>\n  `,\n  styles: [\n    `\n      :host {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n      .ui-scroll-area-viewport {\n        overflow: auto;\n        scrollbar-width: thin;\n        scrollbar-color: var(--tw-scrollbar-thumb, hsl(var(--border))) var(--tw-scrollbar-track, transparent);\n      }\n      .ui-scroll-area-viewport::-webkit-scrollbar {\n        width: 10px;\n        height: 10px;\n      }\n      .ui-scroll-area-viewport::-webkit-scrollbar-track {\n        background: var(--tw-scrollbar-track, transparent);\n      }\n      .ui-scroll-area-viewport::-webkit-scrollbar-thumb {\n        background: var(--tw-scrollbar-thumb, hsl(var(--border)));\n        border: var(--border-width) solid transparent;\n        background-clip: padding-box;\n        border-radius: var(--radius-lg);\n      }\n      .ui-scroll-area-viewport::-webkit-scrollbar-thumb:hover {\n        background: var(--ui-scrollbar-thumb-hover, var(--tw-scrollbar-thumb, hsl(var(--muted-foreground))));\n        background-clip: padding-box;\n      }\n      @media (forced-colors: active) {\n        .ui-scroll-area-viewport {\n          scrollbar-width: auto;\n          scrollbar-color: auto;\n        }\n        .ui-scroll-area-viewport::-webkit-scrollbar-thumb {\n          background: CanvasText;\n          border-color: transparent;\n        }\n      }\n    `,\n  ],\n})\nexport class ScrollAreaComponent {\n  readonly class = input<string>('');\n  readonly viewportClass = input<string>('');\n  readonly viewportAriaLabel = input<string | null>(null);\n  readonly viewportTabIndex = input(0, { transform: numberAttribute });\n  protected readonly classes = computed(() => cn('relative overflow-hidden', this.class()));\n  protected readonly viewportRole = computed(() => (this.viewportAriaLabel() ? 'region' : null));\n  protected readonly viewportClasses = computed(() =>\n    cn(\n      'ui-scroll-area-viewport h-full w-full rounded-[inherit]',\n      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',\n      this.viewportClass(),\n    ),\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA;;;AAGG;MA0DU,mBAAmB,CAAA;IACrB,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;IACzB,aAAa,GAAG,KAAK,CAAS,EAAE;sFAAC;IACjC,iBAAiB,GAAG,KAAK,CAAgB,IAAI;0FAAC;IAC9C,gBAAgB,GAAG,KAAK,CAAC,CAAC,wFAAI,SAAS,EAAE,eAAe,EAAA,CAAG;AACjD,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,0BAA0B,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;gFAAC;AACtE,IAAA,YAAY,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,iBAAiB,EAAE,GAAG,QAAQ,GAAG,IAAI,CAAC;qFAAC;AAC3E,IAAA,eAAe,GAAG,QAAQ,CAAC,MAC5C,EAAE,CACA,yDAAyD,EACzD,kGAAkG,EAClG,IAAI,CAAC,aAAa,EAAE,CACrB;wFACF;uGAbU,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAnDpB;;;;;;;;AAQT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,+8BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FA2CU,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAzD/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,eAAA,EACT,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,SAAS,EAAE,WAAW;qBACvB,EAAA,QAAA,EACS;;;;;;;;AAQT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,+8BAAA,CAAA,EAAA;;;ACrBH;;AAEG;;;;"}

package/fesm2022/ojiepermana-angular-component-select.mjs

@@ -1,26 +1,63 @@
 import * as i0 from '@angular/core';
-import { input, output, viewChild, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { inject, Injector, input, booleanAttribute, output, viewChild, signal, computed, effect, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatFormField } from '@angular/material/form-field';
+import { FormFieldContext } from '@ojiepermana/angular/component/form';
 import { MatSelect } from '@angular/material/select';
 import { cn } from '@ojiepermana/angular/component/utils';
 import { MatOption } from '@angular/material/core';
 
+let nextId = 0;
 class SelectComponent {
-    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
-    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    injector = inject(Injector);
+    formFieldContext = inject(FormFieldContext, { optional: true });
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    id = input(null, { ...(ngDevMode ? { debugName: "id" } : /* istanbul ignore next */ {}), alias: 'id' });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
     ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     valueChange = output();
     openedChange = output();
     ref = viewChild.required('ref');
-    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('ui-select-field w-full', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    generatedId = `ui-select-${++nextId}`;
+    value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabledFromControl = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledFromControl" }] : /* istanbul ignore next */ []));
+    disabledState = computed(() => this.disabled() || this.disabledFromControl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    resolvedId = computed(() => this.id() ?? this.formFieldContext?.controlId ?? this.generatedId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        const values = [this.ariaDescribedby(), this.formFieldContext?.describedBy() ?? null].filter((value) => !!value && value.trim().length > 0);
+        return values.length > 0 ? values.join(' ') : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('ui-select-field w-full', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    ngControl = null;
     onChange = () => { };
     onTouched = () => { };
+    constructor() {
+        effect(() => {
+            const invalid = this.formFieldContext?.invalid() ?? false;
+            const ref = this.ref();
+            ref.errorState = invalid;
+            ref.stateChanges.next();
+        });
+    }
+    ngOnInit() {
+        this.ngControl = this.injector.get(NgControl, null, { optional: true, self: true });
+        if (this.formFieldContext) {
+            this.formFieldContext.control.set(this.ngControl?.control ?? null);
+        }
+    }
     handleChange(e) {
         this.value.set(e.value);
         this.onChange(e.value);
@@ -46,69 +83,77 @@ class SelectComponent {
         this.onTouched = fn;
     }
     setDisabledState(d) {
-        this.disabled.set(d);
+        this.disabledFromControl.set(d);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: SelectComponent, isStandalone: true, selector: "ui-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openedChange: "openedChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: SelectComponent, isStandalone: true, selector: "ui-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openedChange: "openedChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <mat-form-field [class]="classes()" subscriptSizing="dynamic">
       <mat-select
         #ref
+        [id]="resolvedId()"
         disableRipple
         panelClass="ui-select-panel"
         [value]="value()"
-        [disabled]="disabled()"
+        [disabled]="disabledState()"
         [multiple]="multiple()"
         [placeholder]="placeholder()"
         [required]="required()"
         [attr.aria-label]="ariaLabel()"
+        [attr.aria-describedby]="describedBy()"
         [attr.aria-labelledby]="ariaLabelledby()"
         (selectionChange)="handleChange($event)"
         (openedChange)="openedChange.emit($event)">
         <ng-content />
       </mat-select>
     </mat-form-field>
-  `, isInline: true, styles: [":host{display:block;width:100%}:host ::ng-deep .mat-mdc-form-field{--mat-form-field-container-height: 2.25rem;--mat-form-field-container-vertical-padding: 0;--mat-form-field-filled-with-label-container-padding-top: 0;--mat-form-field-filled-with-label-container-padding-bottom: 0;--mdc-outlined-text-field-container-shape: calc(var(--radius) - .125rem);--mdc-outlined-text-field-outline-color: hsl(var(--input));--mdc-outlined-text-field-hover-outline-color: hsl(var(--input));--mdc-outlined-text-field-focus-outline-color: hsl(var(--ring));--mdc-outlined-text-field-input-text-color: hsl(var(--foreground));--mdc-outlined-text-field-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-hover-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-focus-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-disabled-outline-color: hsl(var(--input) / .5);--mdc-outlined-text-field-disabled-input-text-color: hsl(var(--muted-foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);width:100%}:host ::ng-deep .mat-mdc-text-field-wrapper{background:transparent;padding:0 .75rem}:host ::ng-deep .mat-mdc-form-field-infix{min-height:2.25rem;padding:.5rem 0;width:auto}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mdc-floating-label,:host ::ng-deep .mat-mdc-floating-label,:host ::ng-deep .mdc-notched-outline__notch .mdc-floating-label{display:none}:host ::ng-deep .mdc-notched-outline__notch{padding:0;border-left:none;border-right:none}:host ::ng-deep .mat-mdc-select-value{color:hsl(var(--foreground))}:host ::ng-deep .mat-mdc-select-placeholder{color:hsl(var(--muted-foreground))}:host ::ng-deep .mat-mdc-select-arrow{color:hsl(var(--muted-foreground))}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;width:100%}:host ::ng-deep .mat-mdc-form-field{--mat-form-field-container-height: 2.25rem;--mat-form-field-container-vertical-padding: 0;--mat-form-field-filled-with-label-container-padding-top: 0;--mat-form-field-filled-with-label-container-padding-bottom: 0;--mdc-outlined-text-field-container-shape: calc(var(--radius) - .125rem);--mdc-outlined-text-field-outline-color: hsl(var(--input));--mdc-outlined-text-field-hover-outline-color: hsl(var(--input));--mdc-outlined-text-field-focus-outline-color: hsl(var(--ring));--mdc-outlined-text-field-input-text-color: hsl(var(--foreground));--mdc-outlined-text-field-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-hover-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-focus-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-disabled-outline-color: hsl(var(--input) / .5);--mdc-outlined-text-field-disabled-input-text-color: hsl(var(--muted-foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);width:100%}:host ::ng-deep .mat-mdc-text-field-wrapper{background:transparent;display:flex;align-items:center;height:2.25rem;padding:0 .75rem}:host ::ng-deep .mat-mdc-form-field-flex{align-items:center;height:2.25rem}:host ::ng-deep .mat-mdc-form-field-infix{display:flex;align-items:center;min-height:2.25rem;height:2.25rem;padding:0;width:auto}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mdc-floating-label,:host ::ng-deep .mat-mdc-floating-label,:host ::ng-deep .mdc-notched-outline__notch .mdc-floating-label{display:none}:host ::ng-deep .mdc-notched-outline__notch{padding:0;border-left:none;border-right:none}:host ::ng-deep .mat-mdc-select-value{display:flex;align-items:center;color:hsl(var(--foreground))}:host ::ng-deep .mat-mdc-select-trigger{display:flex;align-items:center;min-height:inherit}:host ::ng-deep .mat-mdc-select-placeholder{color:hsl(var(--muted-foreground))}:host ::ng-deep .mat-mdc-select-arrow{color:hsl(var(--muted-foreground))}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-select', imports: [MatFormField, MatSelect], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }], template: `
     <mat-form-field [class]="classes()" subscriptSizing="dynamic">
       <mat-select
         #ref
+        [id]="resolvedId()"
         disableRipple
         panelClass="ui-select-panel"
         [value]="value()"
-        [disabled]="disabled()"
+        [disabled]="disabledState()"
         [multiple]="multiple()"
         [placeholder]="placeholder()"
         [required]="required()"
         [attr.aria-label]="ariaLabel()"
+        [attr.aria-describedby]="describedBy()"
         [attr.aria-labelledby]="ariaLabelledby()"
         (selectionChange)="handleChange($event)"
         (openedChange)="openedChange.emit($event)">
         <ng-content />
       </mat-select>
     </mat-form-field>
-  `, styles: [":host{display:block;width:100%}:host ::ng-deep .mat-mdc-form-field{--mat-form-field-container-height: 2.25rem;--mat-form-field-container-vertical-padding: 0;--mat-form-field-filled-with-label-container-padding-top: 0;--mat-form-field-filled-with-label-container-padding-bottom: 0;--mdc-outlined-text-field-container-shape: calc(var(--radius) - .125rem);--mdc-outlined-text-field-outline-color: hsl(var(--input));--mdc-outlined-text-field-hover-outline-color: hsl(var(--input));--mdc-outlined-text-field-focus-outline-color: hsl(var(--ring));--mdc-outlined-text-field-input-text-color: hsl(var(--foreground));--mdc-outlined-text-field-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-hover-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-focus-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-disabled-outline-color: hsl(var(--input) / .5);--mdc-outlined-text-field-disabled-input-text-color: hsl(var(--muted-foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);width:100%}:host ::ng-deep .mat-mdc-text-field-wrapper{background:transparent;padding:0 .75rem}:host ::ng-deep .mat-mdc-form-field-infix{min-height:2.25rem;padding:.5rem 0;width:auto}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mdc-floating-label,:host ::ng-deep .mat-mdc-floating-label,:host ::ng-deep .mdc-notched-outline__notch .mdc-floating-label{display:none}:host ::ng-deep .mdc-notched-outline__notch{padding:0;border-left:none;border-right:none}:host ::ng-deep .mat-mdc-select-value{color:hsl(var(--foreground))}:host ::ng-deep .mat-mdc-select-placeholder{color:hsl(var(--muted-foreground))}:host ::ng-deep .mat-mdc-select-arrow{color:hsl(var(--muted-foreground))}\n"] }]
-        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", 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 }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
+  `, styles: [":host{display:block;width:100%}:host ::ng-deep .mat-mdc-form-field{--mat-form-field-container-height: 2.25rem;--mat-form-field-container-vertical-padding: 0;--mat-form-field-filled-with-label-container-padding-top: 0;--mat-form-field-filled-with-label-container-padding-bottom: 0;--mdc-outlined-text-field-container-shape: calc(var(--radius) - .125rem);--mdc-outlined-text-field-outline-color: hsl(var(--input));--mdc-outlined-text-field-hover-outline-color: hsl(var(--input));--mdc-outlined-text-field-focus-outline-color: hsl(var(--ring));--mdc-outlined-text-field-input-text-color: hsl(var(--foreground));--mdc-outlined-text-field-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-hover-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-focus-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-disabled-outline-color: hsl(var(--input) / .5);--mdc-outlined-text-field-disabled-input-text-color: hsl(var(--muted-foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);width:100%}:host ::ng-deep .mat-mdc-text-field-wrapper{background:transparent;display:flex;align-items:center;height:2.25rem;padding:0 .75rem}:host ::ng-deep .mat-mdc-form-field-flex{align-items:center;height:2.25rem}:host ::ng-deep .mat-mdc-form-field-infix{display:flex;align-items:center;min-height:2.25rem;height:2.25rem;padding:0;width:auto}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mdc-floating-label,:host ::ng-deep .mat-mdc-floating-label,:host ::ng-deep .mdc-notched-outline__notch .mdc-floating-label{display:none}:host ::ng-deep .mdc-notched-outline__notch{padding:0;border-left:none;border-right:none}:host ::ng-deep .mat-mdc-select-value{display:flex;align-items:center;color:hsl(var(--foreground))}:host ::ng-deep .mat-mdc-select-trigger{display:flex;align-items:center;min-height:inherit}:host ::ng-deep .mat-mdc-select-placeholder{color:hsl(var(--muted-foreground))}:host ::ng-deep .mat-mdc-select-arrow{color:hsl(var(--muted-foreground))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
 
 /**
  * Option for `<ui-select>`. Wraps `mat-option` so the underlying `mat-select`
- * can still discover it via `@ContentChildren(MatOption, { descendants: true })`.
+ * can still discover it via `contentChildren(MatOption, { descendants: true })`.
  */
 class OptionComponent {
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('contents', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: OptionComponent, isStandalone: true, selector: "ui-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('contents', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: OptionComponent, isStandalone: true, selector: "ui-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
     <mat-option [value]="value()" [disabled]="disabled()">
       <ng-content />
     </mat-option>
   `, isInline: true, dependencies: [{ kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: OptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-option',

package/fesm2022/ojiepermana-angular-component-select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular-component-select.mjs","sources":["../../../projects/angular/component/select/src/lib/select.component.ts","../../../projects/angular/component/select/src/lib/option.component.ts","../../../projects/angular/component/select/ojiepermana-angular-component-select.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatFormField } from '@angular/material/form-field';\nimport { MatSelect, MatSelectChange } from '@angular/material/select';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n@Component({\n  selector: 'ui-select',\n  imports: [MatFormField, MatSelect],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }],\n  template: `\n    <mat-form-field [class]=\"classes()\" subscriptSizing=\"dynamic\">\n      <mat-select\n        #ref\n        disableRipple\n        panelClass=\"ui-select-panel\"\n        [value]=\"value()\"\n        [disabled]=\"disabled()\"\n        [multiple]=\"multiple()\"\n        [placeholder]=\"placeholder()\"\n        [required]=\"required()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"ariaLabelledby()\"\n        (selectionChange)=\"handleChange($event)\"\n        (openedChange)=\"openedChange.emit($event)\">\n        <ng-content />\n      </mat-select>\n    </mat-form-field>\n  `,\n  styleUrl: './select.component.css',\n})\nexport class SelectComponent implements ControlValueAccessor {\n  readonly placeholder = input<string>('');\n  readonly multiple = input<boolean>(false);\n  readonly required = input<boolean>(false);\n  readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n  readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });\n  readonly class = input<string>('');\n\n  readonly valueChange = output<unknown>();\n  readonly openedChange = output<boolean>();\n\n  private readonly ref = viewChild.required<MatSelect>('ref');\n\n  protected readonly value = signal<unknown>(null);\n  protected readonly disabled = signal<boolean>(false);\n  protected readonly classes = computed(() => cn('ui-select-field w-full', this.class()));\n\n  private onChange: (v: unknown) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  protected handleChange(e: MatSelectChange): void {\n    this.value.set(e.value);\n    this.onChange(e.value);\n    this.onTouched();\n    this.valueChange.emit(e.value);\n  }\n\n  open(): void {\n    this.ref().open();\n  }\n\n  close(): void {\n    this.ref().close();\n  }\n\n  focus(): void {\n    this.ref().focus();\n  }\n\n  writeValue(v: unknown): void {\n    this.value.set(v);\n  }\n  registerOnChange(fn: (v: unknown) => void): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n  setDisabledState(d: boolean): void {\n    this.disabled.set(d);\n  }\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { MatOption } from '@angular/material/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n/**\n * Option for `<ui-select>`. Wraps `mat-option` so the underlying `mat-select`\n * can still discover it via `@ContentChildren(MatOption, { descendants: true })`.\n */\n@Component({\n  selector: 'ui-option',\n  imports: [MatOption],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { '[class]': 'classes()' },\n  template: `\n    <mat-option [value]=\"value()\" [disabled]=\"disabled()\">\n      <ng-content />\n    </mat-option>\n  `,\n})\nexport class OptionComponent {\n  readonly value = input.required<unknown>();\n  readonly disabled = input<boolean>(false);\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() => cn('contents', this.class()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ojiepermana-angular-component-select.mjs","sources":["../../../projects/angular/component/select/select.component.ts","../../../projects/angular/component/select/option.component.ts","../../../projects/angular/component/select/ojiepermana-angular-component-select.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  forwardRef,\n  inject,\n  Injector,\n  input,\n  OnInit,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';\nimport { MatFormField } from '@angular/material/form-field';\nimport { FormFieldContext } from '@ojiepermana/angular/component/form';\nimport { MatSelect, MatSelectChange } from '@angular/material/select';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\nlet nextId = 0;\n\n@Component({\n  selector: 'ui-select',\n  imports: [MatFormField, MatSelect],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }],\n  template: `\n    <mat-form-field [class]=\"classes()\" subscriptSizing=\"dynamic\">\n      <mat-select\n        #ref\n        [id]=\"resolvedId()\"\n        disableRipple\n        panelClass=\"ui-select-panel\"\n        [value]=\"value()\"\n        [disabled]=\"disabledState()\"\n        [multiple]=\"multiple()\"\n        [placeholder]=\"placeholder()\"\n        [required]=\"required()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [attr.aria-labelledby]=\"ariaLabelledby()\"\n        (selectionChange)=\"handleChange($event)\"\n        (openedChange)=\"openedChange.emit($event)\">\n        <ng-content />\n      </mat-select>\n    </mat-form-field>\n  `,\n  styleUrl: './select.component.css',\n})\nexport class SelectComponent implements ControlValueAccessor {\n  private readonly injector = inject(Injector);\n  private readonly formFieldContext = inject(FormFieldContext, { optional: true });\n\n  readonly placeholder = input<string>('');\n  readonly id = input<string | null>(null, { alias: 'id' });\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly multiple = input(false, { transform: booleanAttribute });\n  readonly required = input(false, { transform: booleanAttribute });\n  readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n  readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });\n  readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });\n  readonly class = input<string>('');\n\n  readonly valueChange = output<unknown>();\n  readonly openedChange = output<boolean>();\n\n  private readonly ref = viewChild.required<MatSelect>('ref');\n  private readonly generatedId = `ui-select-${++nextId}`;\n\n  protected readonly value = signal<unknown>(null);\n  private readonly disabledFromControl = signal(false);\n  protected readonly disabledState = computed(() => this.disabled() || this.disabledFromControl());\n  protected readonly resolvedId = computed(() => this.id() ?? this.formFieldContext?.controlId ?? this.generatedId);\n  protected readonly describedBy = computed(() => {\n    const values = [this.ariaDescribedby(), this.formFieldContext?.describedBy() ?? null].filter(\n      (value): value is string => !!value && value.trim().length > 0,\n    );\n\n    return values.length > 0 ? values.join(' ') : null;\n  });\n  protected readonly classes = computed(() => cn('ui-select-field w-full', this.class()));\n\n  private ngControl: NgControl | null = null;\n  private onChange: (v: unknown) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  constructor() {\n    effect(() => {\n      const invalid = this.formFieldContext?.invalid() ?? false;\n      const ref = this.ref();\n\n      ref.errorState = invalid;\n      ref.stateChanges.next();\n    });\n  }\n\n  ngOnInit(): void {\n    this.ngControl = this.injector.get(NgControl, null, { optional: true, self: true });\n\n    if (this.formFieldContext) {\n      this.formFieldContext.control.set(this.ngControl?.control ?? null);\n    }\n  }\n\n  protected handleChange(e: MatSelectChange): void {\n    this.value.set(e.value);\n    this.onChange(e.value);\n    this.onTouched();\n    this.valueChange.emit(e.value);\n  }\n\n  open(): void {\n    this.ref().open();\n  }\n\n  close(): void {\n    this.ref().close();\n  }\n\n  focus(): void {\n    this.ref().focus();\n  }\n\n  writeValue(v: unknown): void {\n    this.value.set(v);\n  }\n  registerOnChange(fn: (v: unknown) => void): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n  setDisabledState(d: boolean): void {\n    this.disabledFromControl.set(d);\n  }\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { MatOption } from '@angular/material/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n/**\n * Option for `<ui-select>`. Wraps `mat-option` so the underlying `mat-select`\n * can still discover it via `contentChildren(MatOption, { descendants: true })`.\n */\n@Component({\n  selector: 'ui-option',\n  imports: [MatOption],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { '[class]': 'classes()' },\n  template: `\n    <mat-option [value]=\"value()\" [disabled]=\"disabled()\">\n      <ng-content />\n    </mat-option>\n  `,\n})\nexport class OptionComponent {\n  readonly value = input.required<unknown>();\n  readonly disabled = input<boolean>(false);\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() => cn('contents', this.class()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ojiepermana-angular-component-separator.mjs

@@ -3,14 +3,18 @@ import { input, computed, ChangeDetectionStrategy, Component } from '@angular/co
 import { cn } from '@ojiepermana/angular/component/utils';
 
 class SeparatorComponent {
-    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    decorative = input(true, ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('shrink-0 bg-border', this.orientation() === 'horizontal' ? 'h-px w-full' : 'h-full w-px', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: SeparatorComponent, isStandalone: true, selector: "ui-separator", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "decorative() ? \"none\" : \"separator\"", "attr.aria-orientation": "decorative() ? null : orientation()", "attr.data-orientation": "orientation()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    decorative = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('block shrink-0 bg-border', this.orientation() === 'horizontal' ? 'h-px w-full' : 'h-full w-px', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: SeparatorComponent, isStandalone: true, selector: "ui-separator", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "decorative() ? \"none\" : \"separator\"", "attr.aria-orientation": "decorative() ? null : orientation()", "attr.data-orientation": "orientation()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SeparatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-separator',

package/fesm2022/ojiepermana-angular-component-separator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular-component-separator.mjs","sources":["../../../projects/angular/component/separator/src/lib/separator.component.ts","../../../projects/angular/component/separator/ojiepermana-angular-component-separator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\nexport type SeparatorOrientation = 'horizontal' | 'vertical';\n\n@Component({\n  selector: 'ui-separator',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.role]': 'decorative() ? \"none\" : \"separator\"',\n    '[attr.aria-orientation]': 'decorative() ? null : orientation()',\n    '[attr.data-orientation]': 'orientation()',\n  },\n  template: '',\n})\nexport class SeparatorComponent {\n  readonly orientation = input<SeparatorOrientation>('horizontal');\n  readonly decorative = input<boolean>(true);\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn('shrink-0 bg-border', this.orientation() === 'horizontal' ? 'h-px w-full' : 'h-full w-px', this.class()),\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAgBa,kBAAkB,CAAA;AACpB,IAAA,WAAW,GAAG,KAAK,CAAuB,YAAY,kFAAC;AACvD,IAAA,UAAU,GAAG,KAAK,CAAU,IAAI,iFAAC;AACjC,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CAAC,oBAAoB,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,YAAY,GAAG,aAAa,GAAG,aAAa,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,8EAC5G;wGAPU,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,+qBAFnB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAED,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAX9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;oBACxB,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,aAAa,EAAE,qCAAqC;AACpD,wBAAA,yBAAyB,EAAE,qCAAqC;AAChE,wBAAA,yBAAyB,EAAE,eAAe;AAC3C,qBAAA;AACD,oBAAA,QAAQ,EAAE,EAAE;AACb,iBAAA;;;ACfD;;AAEG;;;;"}
+{"version":3,"file":"ojiepermana-angular-component-separator.mjs","sources":["../../../projects/angular/component/separator/separator.component.ts","../../../projects/angular/component/separator/ojiepermana-angular-component-separator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\nexport type SeparatorOrientation = 'horizontal' | 'vertical';\n\n@Component({\n  selector: 'ui-separator',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.role]': 'decorative() ? \"none\" : \"separator\"',\n    '[attr.aria-orientation]': 'decorative() ? null : orientation()',\n    '[attr.data-orientation]': 'orientation()',\n  },\n  template: '',\n})\nexport class SeparatorComponent {\n  readonly orientation = input<SeparatorOrientation>('horizontal');\n  readonly decorative = input<boolean>(true);\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn('block shrink-0 bg-border', this.orientation() === 'horizontal' ? 'h-px w-full' : 'h-full w-px', this.class()),\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAgBa,kBAAkB,CAAA;IACpB,WAAW,GAAG,KAAK,CAAuB,YAAY;oFAAC;IACvD,UAAU,GAAG,KAAK,CAAU,IAAI;mFAAC;IACjC,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CAAC,0BAA0B,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,YAAY,GAAG,aAAa,GAAG,aAAa,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;gFAClH;uGAPU,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,+qBAFnB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAED,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAX9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;oBACxB,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,aAAa,EAAE,qCAAqC;AACpD,wBAAA,yBAAyB,EAAE,qCAAqC;AAChE,wBAAA,yBAAyB,EAAE,eAAe;AAC3C,qBAAA;AACD,oBAAA,QAAQ,EAAE,EAAE;AACb,iBAAA;;;ACfD;;AAEG;;;;"}