@ojiepermana/angular-component 22.0.45 → 22.0.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dialog/README.md +29 -10
  2. package/fesm2022/ojiepermana-angular-component-alert-dialog.mjs +15 -3
  3. package/fesm2022/ojiepermana-angular-component-combobox.mjs +10 -3
  4. package/fesm2022/ojiepermana-angular-component-command.mjs +19 -7
  5. package/fesm2022/ojiepermana-angular-component-dialog.mjs +17 -3
  6. package/fesm2022/ojiepermana-angular-component-form.mjs +19 -3
  7. package/fesm2022/ojiepermana-angular-component-pillbox.mjs +6 -0
  8. package/fesm2022/ojiepermana-angular-component-radio.mjs +9 -2
  9. package/fesm2022/ojiepermana-angular-component-sheet.mjs +21 -4
  10. package/fesm2022/ojiepermana-angular-component-timeline.mjs +7 -2
  11. package/fesm2022/ojiepermana-angular-component-toggle-group.mjs +3 -2
  12. package/package.json +1 -1
  13. package/types/ojiepermana-angular-component-alert-dialog.d.ts +4 -1
  14. package/types/ojiepermana-angular-component-combobox.d.ts +4 -1
  15. package/types/ojiepermana-angular-component-command.d.ts +6 -1
  16. package/types/ojiepermana-angular-component-dialog.d.ts +15 -1
  17. package/types/ojiepermana-angular-component-form.d.ts +9 -0
  18. package/types/ojiepermana-angular-component-radio.d.ts +4 -1
  19. package/types/ojiepermana-angular-component-sheet.d.ts +15 -2
  20. package/types/ojiepermana-angular-component-timeline.d.ts +2 -1
package/dialog/README.md CHANGED
@@ -128,6 +128,24 @@ Use `[showCloseButton]="false"` without an internal close action when Escape and
128
128
  </Dialog>
129
129
  ```
130
130
 
131
+ ### Backdrop appearance
132
+
133
+ The area outside the surface is dimmed by default (`backdrop="dim"`), using the shared
134
+ `--overlay-backdrop` theme token so it recolors with the active theme and light/dark mode. Switch
135
+ to a frosted overlay with `backdrop="blur"`, or disable dimming entirely with
136
+ `backdrop="transparent"` when the dialog should float over a fully visible page.
137
+
138
+ ```html
139
+ <!-- Dimmed (default) -->
140
+ <Dialog [(open)]="open">…</Dialog>
141
+
142
+ <!-- Frosted blur behind the surface -->
143
+ <Dialog [(open)]="open" backdrop="blur">…</Dialog>
144
+
145
+ <!-- No dimming; page stays fully visible -->
146
+ <Dialog [(open)]="open" backdrop="transparent">…</Dialog>
147
+ ```
148
+
131
149
  ### Sticky footer for long content
132
150
 
133
151
  Move the scroll region into `DialogContent` and keep the footer outside that overflow container so primary actions remain visible.
@@ -177,16 +195,17 @@ Wrap the trigger and dialog in a `dir="rtl"` container or set direction globally
177
195
 
178
196
  ### `DialogComponent`
179
197
 
180
- | Input | Type | Default |
181
- | ---------------------- | ---------------- | --------- |
182
- | `open` (model) | `boolean` | `false` |
183
- | `closeOnEscape` | `boolean` | `true` |
184
- | `closeOnBackdropClick` | `boolean` | `true` |
185
- | `showCloseButton` | `boolean` | `true` |
186
- | `closeButtonLabel` | `string` | `'Close'` |
187
- | `aria-labelledby` | `string \| null` | `null` |
188
- | `aria-describedby` | `string \| null` | `null` |
189
- | `class` | `string` | `''` |
198
+ | Input | Type | Default |
199
+ | ---------------------- | ------------------------------------- | --------- |
200
+ | `open` (model) | `boolean` | `false` |
201
+ | `closeOnEscape` | `boolean` | `true` |
202
+ | `closeOnBackdropClick` | `boolean` | `true` |
203
+ | `backdrop` | `'dim' \| 'blur' \| 'transparent'` | `'dim'` |
204
+ | `showCloseButton` | `boolean` | `true` |
205
+ | `closeButtonLabel` | `string` | `'Close'` |
206
+ | `aria-labelledby` | `string \| null` | `null` |
207
+ | `aria-describedby` | `string \| null` | `null` |
208
+ | `class` | `string` | `''` |
190
209
 
191
210
  Output: `openedChange: boolean`. Method: `close()`.
192
211
 
package/fesm2022/ojiepermana-angular-component-alert-dialog.mjs CHANGED
@@ -24,6 +24,9 @@ class AlertDialogComponent {
24
24
  ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
25
25
  closeOnBackdropClick = input(false, /* @ts-ignore */
26
26
  ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
27
+ /** Appearance of the area outside the surface. Defaults to a dimmed overlay. */
28
+ backdrop = input('dim', /* @ts-ignore */
29
+ ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
27
30
  showCloseButton = input(false, /* @ts-ignore */
28
31
  ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
29
32
  closeButtonLabel = input('Close', /* @ts-ignore */
@@ -83,12 +86,13 @@ class AlertDialogComponent {
83
86
  this.open.set(false);
84
87
  }
85
88
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
86
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogComponent, isStandalone: true, selector: "AlertDialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, ngImport: i0, template: `
89
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogComponent, isStandalone: true, selector: "AlertDialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, host: { properties: { "attr.aria-labelledby": "null", "attr.aria-describedby": "null" } }, ngImport: i0, template: `
87
90
  <Dialog
88
91
  [(open)]="open"
89
92
  [role]="role()"
90
93
  [closeOnEscape]="closeOnEscape()"
91
94
  [closeOnBackdropClick]="closeOnBackdropClick()"
95
+ [backdrop]="backdrop()"
92
96
  [showCloseButton]="showCloseButton()"
93
97
  [closeButtonLabel]="closeButtonLabel()"
94
98
  [aria-labelledby]="resolvedLabelledBy()"
@@ -100,12 +104,19 @@ class AlertDialogComponent {
100
104
  >
101
105
  <ng-content />
102
106
  </Dialog>
103
- `, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "Dialog", inputs: ["open", "closeOnEscape", "closeOnBackdropClick", "showCloseButton", "closeButtonLabel", "aria-labelledby", "aria-describedby", "role", "class", "radius", "density"], outputs: ["openChange", "openedChange"] }] });
107
+ `, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "Dialog", inputs: ["open", "closeOnEscape", "closeOnBackdropClick", "backdrop", "showCloseButton", "closeButtonLabel", "aria-labelledby", "aria-describedby", "role", "class", "radius", "density"], outputs: ["openChange", "openedChange"] }] });
104
108
  }
105
109
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AlertDialogComponent, decorators: [{
106
110
  type: Component,
107
111
  args: [{
108
112
  selector: 'AlertDialog',
113
+ // `<AlertDialog>` is a roleless host element; the consumer's
114
+ // aria-labelledby/aria-describedby are re-applied on the inner dialog surface,
115
+ // so strip them from the host (axe `aria-prohibited-attr`).
116
+ host: {
117
+ '[attr.aria-labelledby]': 'null',
118
+ '[attr.aria-describedby]': 'null',
119
+ },
109
120
  imports: [DialogComponent],
110
121
  template: `
111
122
  <Dialog
@@ -113,6 +124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
113
124
  [role]="role()"
114
125
  [closeOnEscape]="closeOnEscape()"
115
126
  [closeOnBackdropClick]="closeOnBackdropClick()"
127
+ [backdrop]="backdrop()"
116
128
  [showCloseButton]="showCloseButton()"
117
129
  [closeButtonLabel]="closeButtonLabel()"
118
130
  [aria-labelledby]="resolvedLabelledBy()"
@@ -126,7 +138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
126
138
  </Dialog>
127
139
  `,
128
140
  }]
129
- }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
141
+ }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
130
142
 
131
143
  const ALERT_DIALOG_MEDIA_SIZE_CLASSES = {
132
144
  default: 'h-12 w-12 [&_svg]:h-5 [&_svg]:w-5',
package/fesm2022/ojiepermana-angular-component-combobox.mjs CHANGED
@@ -23,6 +23,9 @@ class ComboboxComponent {
23
23
  ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
24
24
  placeholder = input('Select…', /* @ts-ignore */
25
25
  ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
26
+ /** Accessible name for the combobox trigger (its text content is the value, not a name). */
27
+ ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
28
+ ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
26
29
  searchPlaceholder = input('Search…', /* @ts-ignore */
27
30
  ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
28
31
  emptyText = input('No results found.', /* @ts-ignore */
@@ -119,7 +122,7 @@ class ComboboxComponent {
119
122
  this.cvaDisabled.set(state);
120
123
  }
121
124
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
122
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ComboboxComponent, isStandalone: true, selector: "Combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { properties: { "class": "classes()" } }, providers: [
125
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ComboboxComponent, isStandalone: true, selector: "Combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { properties: { "class": "classes()" } }, providers: [
123
126
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ComboboxComponent), multi: true },
124
127
  ], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
125
128
  <button
@@ -128,6 +131,8 @@ class ComboboxComponent {
128
131
  [attr.id]="triggerId"
129
132
  role="combobox"
130
133
  aria-haspopup="listbox"
134
+ [attr.aria-label]="ariaLabelledby() ? null : (ariaLabel() ?? placeholder())"
135
+ [attr.aria-labelledby]="ariaLabelledby()"
131
136
  [attr.aria-expanded]="isOpen()"
132
137
  [attr.aria-controls]="isOpen() ? panelId : null"
133
138
  [class]="triggerClasses()"
@@ -189,7 +194,7 @@ class ComboboxComponent {
189
194
  </Command>
190
195
  </div>
191
196
  </ng-template>
192
- `, isInline: true, dependencies: [{ kind: "component", type: CommandComponent, selector: "Command", inputs: ["query", "class"], outputs: ["queryChange"] }, { kind: "component", type: CommandInputComponent, selector: "input[CommandInput]", inputs: ["placeholder", "class"] }, { kind: "component", type: CommandListComponent, selector: "CommandList", inputs: ["class"] }, { kind: "component", type: CommandEmptyComponent, selector: "CommandEmpty", inputs: ["class"] }, { kind: "component", type: CommandGroupComponent, selector: "CommandGroup", inputs: ["heading", "class"] }, { kind: "component", type: CommandItemComponent, selector: "CommandItem, button[CommandItem]", inputs: ["value", "disabled", "class"], outputs: ["selected"] }] });
197
+ `, isInline: true, dependencies: [{ kind: "component", type: CommandComponent, selector: "Command", inputs: ["query", "class"], outputs: ["queryChange"] }, { kind: "component", type: CommandInputComponent, selector: "input[CommandInput]", inputs: ["placeholder", "class"] }, { kind: "component", type: CommandListComponent, selector: "CommandList", inputs: ["class", "aria-label"] }, { kind: "component", type: CommandEmptyComponent, selector: "CommandEmpty", inputs: ["class"] }, { kind: "component", type: CommandGroupComponent, selector: "CommandGroup", inputs: ["heading", "class"] }, { kind: "component", type: CommandItemComponent, selector: "CommandItem, button[CommandItem]", inputs: ["value", "disabled", "class"], outputs: ["selected"] }] });
193
198
  }
194
199
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComboboxComponent, decorators: [{
195
200
  type: Component,
@@ -214,6 +219,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
214
219
  [attr.id]="triggerId"
215
220
  role="combobox"
216
221
  aria-haspopup="listbox"
222
+ [attr.aria-label]="ariaLabelledby() ? null : (ariaLabel() ?? placeholder())"
223
+ [attr.aria-labelledby]="ariaLabelledby()"
217
224
  [attr.aria-expanded]="isOpen()"
218
225
  [attr.aria-controls]="isOpen() ? panelId : null"
219
226
  [class]="triggerClasses()"
@@ -277,7 +284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
277
284
  </ng-template>
278
285
  `,
279
286
  }]
280
- }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
287
+ }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
281
288
 
282
289
  /**
283
290
  * Generated bundle index. Do not edit.
package/fesm2022/ojiepermana-angular-component-command.mjs CHANGED
@@ -1,9 +1,11 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Directive, model, input, signal, computed, forwardRef, Component, inject, ElementRef, output, DestroyRef } from '@angular/core';
3
- import { cn, uniqueId } from '@ojiepermana/angular-component/utils';
3
+ import { uniqueId, cn } from '@ojiepermana/angular-component/utils';
4
4
 
5
5
  /** Base class exposed to children for context lookup. */
6
6
  class CommandContextBase {
7
+ /** Shared id linking the combobox input (aria-controls) to the listbox. */
8
+ listboxId = uniqueId('CommandList');
7
9
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
8
10
  static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: CommandContextBase, isStandalone: true, ngImport: i0 });
9
11
  }
@@ -98,7 +100,7 @@ class CommandInputComponent {
98
100
  }
99
101
  }
100
102
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
101
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandInputComponent, isStandalone: true, selector: "input[CommandInput]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "text", "role": "combobox", "aria-autocomplete": "list", "aria-expanded": "true", "autocomplete": "off" }, listeners: { "input": "onInput($any($event))", "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.enter": "onEnter($any($event))" }, properties: { "class": "classes()", "attr.aria-activedescendant": "ctx.activeDescendantId()", "value": "ctx.query()", "placeholder": "placeholder()" } }, ngImport: i0, template: ``, isInline: true });
103
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandInputComponent, isStandalone: true, selector: "input[CommandInput]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "text", "role": "combobox", "aria-autocomplete": "list", "aria-expanded": "true", "autocomplete": "off" }, listeners: { "input": "onInput($any($event))", "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.enter": "onEnter($any($event))" }, properties: { "class": "classes()", "attr.aria-controls": "ctx.listboxId", "attr.aria-activedescendant": "ctx.activeDescendantId()", "value": "ctx.query()", "placeholder": "placeholder()" } }, ngImport: i0, template: ``, isInline: true });
102
104
  }
103
105
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandInputComponent, decorators: [{
104
106
  type: Component,
@@ -110,6 +112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
110
112
  role: 'combobox',
111
113
  'aria-autocomplete': 'list',
112
114
  'aria-expanded': 'true',
115
+ '[attr.aria-controls]': 'ctx.listboxId',
113
116
  '[attr.aria-activedescendant]': 'ctx.activeDescendantId()',
114
117
  autocomplete: 'off',
115
118
  '[value]': 'ctx.query()',
@@ -123,21 +126,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
123
126
  }]
124
127
  }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
125
128
  class CommandListComponent {
129
+ ctx = inject(CommandContextBase);
126
130
  class = input('', /* @ts-ignore */
127
131
  ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
132
+ /** Accessible name for the listbox (required on role="listbox"). */
133
+ ariaLabel = input('Suggestions', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
128
134
  classes = computed(() => cn('max-h-[300px] overflow-y-auto overflow-x-hidden p-1', this.class()), /* @ts-ignore */
129
135
  ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
130
136
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
131
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandListComponent, isStandalone: true, selector: "CommandList", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
137
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandListComponent, isStandalone: true, selector: "CommandList", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "class": "classes()", "attr.id": "ctx.listboxId", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
132
138
  }
133
139
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandListComponent, decorators: [{
134
140
  type: Component,
135
141
  args: [{
136
142
  selector: 'CommandList',
137
- host: { '[class]': 'classes()', role: 'listbox' },
143
+ host: {
144
+ '[class]': 'classes()',
145
+ role: 'listbox',
146
+ '[attr.id]': 'ctx.listboxId',
147
+ '[attr.aria-label]': 'ariaLabel()',
148
+ },
138
149
  template: `<ng-content />`,
139
150
  }]
140
- }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
151
+ }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
141
152
  class CommandEmptyComponent {
142
153
  ctx = inject(CommandComponent);
143
154
  class = input('', /* @ts-ignore */
@@ -192,13 +203,14 @@ class CommandSeparatorComponent {
192
203
  classes = computed(() => cn('-mx-1 h-px bg-border block', this.class()), /* @ts-ignore */
193
204
  ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
194
205
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
195
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandSeparatorComponent, isStandalone: true, selector: "CommandSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true });
206
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandSeparatorComponent, isStandalone: true, selector: "CommandSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true });
196
207
  }
197
208
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandSeparatorComponent, decorators: [{
198
209
  type: Component,
199
210
  args: [{
200
211
  selector: 'CommandSeparator',
201
- host: { '[class]': 'classes()', role: 'separator' },
212
+ // Decorative divider — a separator is not an allowed child of role="listbox".
213
+ host: { '[class]': 'classes()', 'aria-hidden': 'true' },
202
214
  template: '',
203
215
  }]
204
216
  }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
package/fesm2022/ojiepermana-angular-component-dialog.mjs CHANGED
@@ -38,6 +38,9 @@ class DialogComponent {
38
38
  ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
39
39
  closeOnBackdropClick = input(true, /* @ts-ignore */
40
40
  ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
41
+ /** Appearance of the area outside the surface. Defaults to a dimmed overlay. */
42
+ backdrop = input('dim', /* @ts-ignore */
43
+ ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
41
44
  showCloseButton = input(true, /* @ts-ignore */
42
45
  ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
43
46
  closeButtonLabel = input('Close', /* @ts-ignore */
@@ -94,6 +97,17 @@ class DialogComponent {
94
97
  ...(ngDevMode ? [{ debugName: "radiusBase" }] : /* istanbul ignore next */ []));
95
98
  densityBase = computed(() => densityBaseValue(this.density()), /* @ts-ignore */
96
99
  ...(ngDevMode ? [{ debugName: "densityBase" }] : /* istanbul ignore next */ []));
100
+ /** CDK `backdropClass` list: shared marker plus the selected appearance modifier. */
101
+ backdropClass = computed(() => {
102
+ const classes = ['dialog-backdrop'];
103
+ const kind = this.backdrop();
104
+ if (kind === 'blur')
105
+ classes.push('dialog-backdrop-blur');
106
+ else if (kind === 'transparent')
107
+ classes.push('dialog-backdrop-transparent');
108
+ return classes;
109
+ }, /* @ts-ignore */
110
+ ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
97
111
  constructor() {
98
112
  this.destroyRef.onDestroy(() => this.detach(false));
99
113
  effect(() => {
@@ -106,7 +120,7 @@ class DialogComponent {
106
120
  this.previousFocus = this.doc.activeElement;
107
121
  this.overlayRef = this.overlay.create({
108
122
  hasBackdrop: true,
109
- backdropClass: 'dialog-backdrop',
123
+ backdropClass: this.backdropClass(),
110
124
  panelClass: 'dialog-panel',
111
125
  scrollStrategy: this.overlay.scrollStrategies.block(),
112
126
  positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
@@ -150,7 +164,7 @@ class DialogComponent {
150
164
  this.requestClose();
151
165
  }
152
166
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
153
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DialogComponent, isStandalone: true, selector: "Dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
167
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DialogComponent, isStandalone: true, selector: "Dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
154
168
  <ng-template #tpl>
155
169
  <div
156
170
  class="dialog-surface"
@@ -217,7 +231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
217
231
  </ng-template>
218
232
  `,
219
233
  }]
220
- }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
234
+ }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
221
235
 
222
236
  class DialogCloseDirective {
223
237
  dialog = inject(DialogComponent);
package/fesm2022/ojiepermana-angular-component-form.mjs CHANGED
@@ -9,16 +9,26 @@ import { NgControl } from '@angular/forms';
9
9
  */
10
10
  class FormFieldContext {
11
11
  controlId = uniqueId('FormField');
12
+ labelId = `${this.controlId}-label`;
12
13
  descriptionId = `${this.controlId}-description`;
13
14
  messageId = `${this.controlId}-message`;
14
15
  control = signal(null, /* @ts-ignore */
15
16
  ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
16
17
  manualInvalid = signal(false, /* @ts-ignore */
17
18
  ...(ngDevMode ? [{ debugName: "manualInvalid" }] : /* istanbul ignore next */ []));
19
+ hasLabel = signal(false, /* @ts-ignore */
20
+ ...(ngDevMode ? [{ debugName: "hasLabel" }] : /* istanbul ignore next */ []));
18
21
  hasDescription = signal(false, /* @ts-ignore */
19
22
  ...(ngDevMode ? [{ debugName: "hasDescription" }] : /* istanbul ignore next */ []));
20
23
  hasMessage = signal(false, /* @ts-ignore */
21
24
  ...(ngDevMode ? [{ debugName: "hasMessage" }] : /* istanbul ignore next */ []));
25
+ /**
26
+ * `aria-labelledby` for the control. `<FormLabel>` renders as a custom element,
27
+ * so the native `for`/`id` pairing does not associate it — point the control at
28
+ * the label's id explicitly so it has an accessible name (axe `select-name`/`label`).
29
+ */
30
+ labelledBy = computed(() => (this.hasLabel() ? this.labelId : null), /* @ts-ignore */
31
+ ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
22
32
  statusTick = signal(0, /* @ts-ignore */
23
33
  ...(ngDevMode ? [{ debugName: "statusTick" }] : /* istanbul ignore next */ []));
24
34
  invalid = computed(() => {
@@ -222,10 +232,14 @@ class FormLabelComponent {
222
232
  ctx = inject(FormFieldContext);
223
233
  class = input('', /* @ts-ignore */
224
234
  ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
235
+ constructor() {
236
+ // Let the control reference this label via aria-labelledby.
237
+ this.ctx.hasLabel.set(true);
238
+ }
225
239
  classes = computed(() => cn('text-sm font-medium leading-none', this.ctx.invalid() ? 'text-destructive' : 'text-foreground', 'peer-disabled:cursor-not-allowed peer-disabled:opacity-70', this.class()), /* @ts-ignore */
226
240
  ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
227
241
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
228
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FormLabelComponent, isStandalone: true, selector: "FormLabel, label[FormLabel]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.for": "ctx.controlId" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
242
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FormLabelComponent, isStandalone: true, selector: "FormLabel, label[FormLabel]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "ctx.labelId", "attr.for": "ctx.controlId" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
229
243
  }
230
244
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormLabelComponent, decorators: [{
231
245
  type: Component,
@@ -233,11 +247,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
233
247
  selector: 'FormLabel, label[FormLabel]',
234
248
  host: {
235
249
  '[class]': 'classes()',
250
+ '[attr.id]': 'ctx.labelId',
236
251
  '[attr.for]': 'ctx.controlId',
237
252
  },
238
253
  template: `<ng-content />`,
239
254
  }]
240
- }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
255
+ }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
241
256
 
242
257
  class FormDescriptionComponent {
243
258
  ctx = inject(FormFieldContext, { optional: true });
@@ -334,7 +349,7 @@ class FormControlDirective {
334
349
  }
335
350
  }
336
351
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
337
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: FormControlDirective, isStandalone: true, selector: "[FormControl]", host: { properties: { "attr.id": "ctx.controlId", "attr.aria-describedby": "ctx.describedBy()", "attr.aria-invalid": "ctx.invalid() ? \"true\" : null" } }, ngImport: i0 });
352
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: FormControlDirective, isStandalone: true, selector: "[FormControl]", host: { properties: { "attr.id": "ctx.controlId", "attr.aria-labelledby": "ctx.labelledBy()", "attr.aria-describedby": "ctx.describedBy()", "attr.aria-invalid": "ctx.invalid() ? \"true\" : null" } }, ngImport: i0 });
338
353
  }
339
354
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormControlDirective, decorators: [{
340
355
  type: Directive,
@@ -342,6 +357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
342
357
  selector: '[FormControl]',
343
358
  host: {
344
359
  '[attr.id]': 'ctx.controlId',
360
+ '[attr.aria-labelledby]': 'ctx.labelledBy()',
345
361
  '[attr.aria-describedby]': 'ctx.describedBy()',
346
362
  '[attr.aria-invalid]': 'ctx.invalid() ? "true" : null',
347
363
  },
package/fesm2022/ojiepermana-angular-component-pillbox.mjs CHANGED
@@ -529,6 +529,8 @@ class PillboxComponent extends PillboxContext {
529
529
  <input
530
530
  #inlineSearch
531
531
  class="min-w-28 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
532
+ [attr.aria-label]="ariaLabel() ?? placeholder()"
533
+ [attr.aria-labelledby]="ariaLabelledby()"
532
534
  [placeholder]="selectedItems().length === 0 ? placeholder() : ''"
533
535
  [value]="query()"
534
536
  [disabled]="disabledState() || null"
@@ -601,6 +603,7 @@ class PillboxComponent extends PillboxContext {
601
603
  <input
602
604
  #panelSearch
603
605
  class="h-9 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
606
+ [attr.aria-label]="searchPlaceholder()"
604
607
  [placeholder]="searchPlaceholder()"
605
608
  [value]="query()"
606
609
  (input)="handleSearchInput($event)"
@@ -715,6 +718,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
715
718
  <input
716
719
  #inlineSearch
717
720
  class="min-w-28 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
721
+ [attr.aria-label]="ariaLabel() ?? placeholder()"
722
+ [attr.aria-labelledby]="ariaLabelledby()"
718
723
  [placeholder]="selectedItems().length === 0 ? placeholder() : ''"
719
724
  [value]="query()"
720
725
  [disabled]="disabledState() || null"
@@ -787,6 +792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
787
792
  <input
788
793
  #panelSearch
789
794
  class="h-9 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
795
+ [attr.aria-label]="searchPlaceholder()"
790
796
  [placeholder]="searchPlaceholder()"
791
797
  [value]="query()"
792
798
  (input)="handleSearchInput($event)"
package/fesm2022/ojiepermana-angular-component-radio.mjs CHANGED
@@ -97,6 +97,9 @@ class RadioComponent {
97
97
  ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
98
98
  class = input('', /* @ts-ignore */
99
99
  ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
100
+ /** Accessible name for the radio input when no text is projected into `<Radio>`. */
101
+ ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
102
+ ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
100
103
  selected = computed(() => this.group.value() === this.value(), /* @ts-ignore */
101
104
  ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
102
105
  isDisabled = computed(() => this.disabled() || this.group.disabled(), /* @ts-ignore */
@@ -118,13 +121,15 @@ class RadioComponent {
118
121
  this.ref().nativeElement.focus();
119
122
  }
120
123
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
121
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: RadioComponent, isStandalone: true, selector: "Radio", 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": "hostClasses()" } }, viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
124
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: RadioComponent, isStandalone: true, selector: "Radio", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
122
125
  <label [class]="labelClasses()">
123
126
  <input
124
127
  #ref
125
128
  type="radio"
126
129
  class="peer sr-only"
127
130
  [attr.name]="group.resolvedName()"
131
+ [attr.aria-label]="ariaLabel()"
132
+ [attr.aria-labelledby]="ariaLabelledby()"
128
133
  [value]="value()"
129
134
  [checked]="selected()"
130
135
  [disabled]="isDisabled()"
@@ -152,6 +157,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
152
157
  type="radio"
153
158
  class="peer sr-only"
154
159
  [attr.name]="group.resolvedName()"
160
+ [attr.aria-label]="ariaLabel()"
161
+ [attr.aria-labelledby]="ariaLabelledby()"
155
162
  [value]="value()"
156
163
  [checked]="selected()"
157
164
  [disabled]="isDisabled()"
@@ -167,7 +174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
167
174
  </label>
168
175
  `,
169
176
  }]
170
- }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
177
+ }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", 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 }] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
171
178
 
172
179
  /**
173
180
  * Generated bundle index. Do not edit.
package/fesm2022/ojiepermana-angular-component-sheet.mjs CHANGED
@@ -45,6 +45,9 @@ class SheetComponent {
45
45
  ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
46
46
  closeOnBackdropClick = input(true, /* @ts-ignore */
47
47
  ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
48
+ /** Appearance of the area outside the surface. Defaults to a dimmed overlay. */
49
+ backdrop = input('dim', /* @ts-ignore */
50
+ ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
48
51
  showCloseButton = input(true, /* @ts-ignore */
49
52
  ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
50
53
  closeButtonLabel = input('Close', /* @ts-ignore */
@@ -85,6 +88,17 @@ class SheetComponent {
85
88
  ...(ngDevMode ? [{ debugName: "radiusBase" }] : /* istanbul ignore next */ []));
86
89
  densityBase = computed(() => densityBaseValue(this.density()), /* @ts-ignore */
87
90
  ...(ngDevMode ? [{ debugName: "densityBase" }] : /* istanbul ignore next */ []));
91
+ /** CDK `backdropClass` list: shared marker plus the selected appearance modifier. */
92
+ backdropClass = computed(() => {
93
+ const classes = ['dialog-backdrop'];
94
+ const kind = this.backdrop();
95
+ if (kind === 'blur')
96
+ classes.push('dialog-backdrop-blur');
97
+ else if (kind === 'transparent')
98
+ classes.push('dialog-backdrop-transparent');
99
+ return classes;
100
+ }, /* @ts-ignore */
101
+ ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
88
102
  constructor() {
89
103
  this.destroyRef.onDestroy(() => this.detach(false));
90
104
  effect(() => {
@@ -97,7 +111,7 @@ class SheetComponent {
97
111
  this.previousFocus = this.doc.activeElement;
98
112
  this.overlayRef = this.overlay.create({
99
113
  hasBackdrop: true,
100
- backdropClass: 'dialog-backdrop',
114
+ backdropClass: this.backdropClass(),
101
115
  panelClass: 'sheet-panel',
102
116
  scrollStrategy: this.overlay.scrollStrategies.block(),
103
117
  positionStrategy: this.overlay.position().global(),
@@ -167,7 +181,7 @@ class SheetComponent {
167
181
  return this.host.nativeElement.localName === 'drawer';
168
182
  }
169
183
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
170
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: SheetComponent, isStandalone: true, selector: "Sheet, Drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
184
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: SheetComponent, isStandalone: true, selector: "Sheet, Drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, host: { properties: { "attr.aria-labelledby": "null", "attr.aria-describedby": "null" } }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
171
185
  <ng-template #tpl>
172
186
  <div
173
187
  class="sheet-surface fixed z-50 bg-background shadow-lg transition ease-in-out"
@@ -201,7 +215,10 @@ class SheetComponent {
201
215
  }
202
216
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SheetComponent, decorators: [{
203
217
  type: Component,
204
- args: [{ selector: 'Sheet, Drawer', imports: [ButtonComponent], template: `
218
+ args: [{ selector: 'Sheet, Drawer', host: {
219
+ '[attr.aria-labelledby]': 'null',
220
+ '[attr.aria-describedby]': 'null',
221
+ }, imports: [ButtonComponent], template: `
205
222
  <ng-template #tpl>
206
223
  <div
207
224
  class="sheet-surface fixed z-50 bg-background shadow-lg transition ease-in-out"
@@ -232,7 +249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
232
249
  </div>
233
250
  </ng-template>
234
251
  `, styles: [".sheet-surface{animation:sheet-in .3s cubic-bezier(.2,0,0,1)}@keyframes sheet-in{0%{transform:var(--sheet-from)}to{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.sheet-surface{animation-duration:0ms}}\n"] }]
235
- }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
252
+ }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
236
253
 
237
254
  class SheetCloseDirective {
238
255
  sheet = inject(SheetComponent);
package/fesm2022/ojiepermana-angular-component-timeline.mjs CHANGED
@@ -134,6 +134,7 @@ class TimelineIndicatorComponent {
134
134
  ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
135
135
  color = input(null, /* @ts-ignore */
136
136
  ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
137
+ ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
137
138
  class = input('', /* @ts-ignore */
138
139
  ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
139
140
  resolvedStatus = computed(() => this.status() ?? this.item?.status() ?? 'incomplete', /* @ts-ignore */
@@ -151,7 +152,7 @@ class TimelineIndicatorComponent {
151
152
  }, /* @ts-ignore */
152
153
  ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
153
154
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TimelineIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
154
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: TimelineIndicatorComponent, isStandalone: true, selector: "TimelineIndicator", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-indicator\"", "attr.data-variant": "variant()", "attr.data-status": "resolvedStatus()", "attr.data-color": "color() ?? null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
155
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: TimelineIndicatorComponent, isStandalone: true, selector: "TimelineIndicator", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "ariaLabel() ? \"img\" : null", "attr.aria-label": "ariaLabel()", "attr.data-slot": "\"timeline-indicator\"", "attr.data-variant": "variant()", "attr.data-status": "resolvedStatus()", "attr.data-color": "color() ?? null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
155
156
  }
156
157
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TimelineIndicatorComponent, decorators: [{
157
158
  type: Component,
@@ -159,6 +160,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
159
160
  selector: 'TimelineIndicator',
160
161
  host: {
161
162
  '[class]': 'classes()',
163
+ // A labeled indicator is a status graphic (role="img" so aria-label is valid);
164
+ // without a label it stays a decorative marker.
165
+ '[attr.role]': 'ariaLabel() ? "img" : null',
166
+ '[attr.aria-label]': 'ariaLabel()',
162
167
  '[attr.data-slot]': '"timeline-indicator"',
163
168
  '[attr.data-variant]': 'variant()',
164
169
  '[attr.data-status]': 'resolvedStatus()',
@@ -166,7 +171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
166
171
  },
167
172
  template: `<ng-content />`,
168
173
  }]
169
- }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
174
+ }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
170
175
  class TimelineContentComponent {
171
176
  item = inject(TimelineItemComponent, { optional: true });
172
177
  class = input('', /* @ts-ignore */
package/fesm2022/ojiepermana-angular-component-toggle-group.mjs CHANGED
@@ -176,7 +176,7 @@ class ToggleGroupComponent extends ToggleGroupContextBase {
176
176
  this.registrationVersion.update((version) => version + 1);
177
177
  }
178
178
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ToggleGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
179
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ToggleGroupComponent, isStandalone: true, selector: "ToggleGroup", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange" }, host: { properties: { "class": "classes()", "attr.role": "\"group\"", "attr.dir": "dir() ?? null", "attr.aria-orientation": "orientation()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-orientation": "orientation()", "attr.data-slot": "\"toggle-group\"", "attr.data-type": "type()" } }, providers: [
179
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ToggleGroupComponent, isStandalone: true, selector: "ToggleGroup", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange" }, host: { properties: { "class": "classes()", "attr.role": "\"group\"", "attr.dir": "dir() ?? null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-orientation": "orientation()", "attr.data-slot": "\"toggle-group\"", "attr.data-type": "type()" } }, providers: [
180
180
  { provide: ToggleGroupContextBase, useExisting: forwardRef(() => ToggleGroupComponent) },
181
181
  ], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
182
182
  }
@@ -191,7 +191,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
191
191
  '[class]': 'classes()',
192
192
  '[attr.role]': '"group"',
193
193
  '[attr.dir]': 'dir() ?? null',
194
- '[attr.aria-orientation]': 'orientation()',
194
+ // aria-orientation is not allowed on role="group" (axe aria-allowed-attr);
195
+ // data-orientation below drives the visual layout instead.
195
196
  '[attr.data-disabled]': 'disabled() ? "" : null',
196
197
  '[attr.data-orientation]': 'orientation()',
197
198
  '[attr.data-slot]': '"toggle-group"',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ojiepermana/angular-component",
3
- "version": "22.0.45",
3
+ "version": "22.0.47",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/edsis/angular.git"
package/types/ojiepermana-angular-component-alert-dialog.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as _angular_core from '@angular/core';
2
+ import { DialogBackdrop } from '@ojiepermana/angular-component/dialog';
2
3
  import { ButtonVariant, ButtonSize } from '@ojiepermana/angular-component/button';
3
4
 
4
5
  type AlertDialogSize = 'default' | 'sm';
@@ -16,6 +17,8 @@ declare class AlertDialogComponent {
16
17
  readonly open: _angular_core.ModelSignal<boolean>;
17
18
  readonly closeOnEscape: _angular_core.InputSignal<boolean>;
18
19
  readonly closeOnBackdropClick: _angular_core.InputSignal<boolean>;
20
+ /** Appearance of the area outside the surface. Defaults to a dimmed overlay. */
21
+ readonly backdrop: _angular_core.InputSignal<DialogBackdrop>;
19
22
  readonly showCloseButton: _angular_core.InputSignal<boolean>;
20
23
  readonly closeButtonLabel: _angular_core.InputSignal<string>;
21
24
  readonly labelledBy: _angular_core.InputSignal<string | null>;
@@ -46,7 +49,7 @@ declare class AlertDialogComponent {
46
49
  unregisterDescriptionId(id: string): void;
47
50
  close(): void;
48
51
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertDialogComponent, never>;
49
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogComponent, "AlertDialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
52
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogComponent, "AlertDialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
50
53
  }
51
54
 
52
55
  declare class AlertDialogContentComponent {
package/types/ojiepermana-angular-component-combobox.d.ts CHANGED
@@ -18,6 +18,9 @@ declare class ComboboxComponent<T = unknown> implements ControlValueAccessor {
18
18
  readonly options: _angular_core.InputSignal<readonly ComboboxOption<T>[]>;
19
19
  readonly value: _angular_core.ModelSignal<T | null>;
20
20
  readonly placeholder: _angular_core.InputSignal<string>;
21
+ /** Accessible name for the combobox trigger (its text content is the value, not a name). */
22
+ readonly ariaLabel: _angular_core.InputSignal<string | null>;
23
+ readonly ariaLabelledby: _angular_core.InputSignal<string | null>;
21
24
  readonly searchPlaceholder: _angular_core.InputSignal<string>;
22
25
  readonly emptyText: _angular_core.InputSignal<string>;
23
26
  readonly disabled: _angular_core.ModelSignal<boolean>;
@@ -46,7 +49,7 @@ declare class ComboboxComponent<T = unknown> implements ControlValueAccessor {
46
49
  registerOnTouched(fn: () => void): void;
47
50
  setDisabledState(state: boolean): void;
48
51
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxComponent<any>, never>;
49
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboboxComponent<any>, "Combobox", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; }, never, never, true, never>;
52
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboboxComponent<any>, "Combobox", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; }, never, never, true, never>;
50
53
  }
51
54
 
52
55
  export { ComboboxComponent };
package/types/ojiepermana-angular-component-command.d.ts CHANGED
@@ -3,6 +3,8 @@ import { model } from '@angular/core';
3
3
 
4
4
  /** Base class exposed to children for context lookup. */
5
5
  declare abstract class CommandContextBase {
6
+ /** Shared id linking the combobox input (aria-controls) to the listbox. */
7
+ readonly listboxId: string;
6
8
  abstract query: ReturnType<typeof model<string>>;
7
9
  abstract matches(text: string): boolean;
8
10
  abstract registerItem(item: CommandItemComponent): void;
@@ -48,10 +50,13 @@ declare class CommandInputComponent {
48
50
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<CommandInputComponent, "input[CommandInput]", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
49
51
  }
50
52
  declare class CommandListComponent {
53
+ protected readonly ctx: CommandContextBase;
51
54
  readonly class: _angular_core.InputSignal<string>;
55
+ /** Accessible name for the listbox (required on role="listbox"). */
56
+ readonly ariaLabel: _angular_core.InputSignal<string>;
52
57
  protected readonly classes: _angular_core.Signal<string>;
53
58
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<CommandListComponent, never>;
54
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<CommandListComponent, "CommandList", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
59
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CommandListComponent, "CommandList", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
55
60
  }
56
61
  declare class CommandEmptyComponent {
57
62
  protected readonly ctx: CommandComponent;
package/types/ojiepermana-angular-component-dialog.d.ts CHANGED
@@ -1,5 +1,14 @@
1
1
  import * as _angular_core from '@angular/core';
2
2
 
3
+ /**
4
+ * Backdrop appearance for the area outside the dialog surface.
5
+ *
6
+ * - `'dim'`: dark, semi-transparent overlay (default) driven by the
7
+ * `--overlay-backdrop` theme token, so it recolors with theme/mode.
8
+ * - `'blur'`: the dim overlay plus a frosted `backdrop-filter` blur.
9
+ * - `'transparent'`: no dimming; the page behind stays fully visible.
10
+ */
11
+ type DialogBackdrop = 'dim' | 'blur' | 'transparent';
3
12
  /**
4
13
  * Declarative modal dialog. Renders into the body via CDK overlay when
5
14
  * `open` becomes `true`. Focus is trapped inside; restored to trigger on close.
@@ -26,6 +35,8 @@ declare class DialogComponent {
26
35
  readonly open: _angular_core.ModelSignal<boolean>;
27
36
  readonly closeOnEscape: _angular_core.InputSignal<boolean>;
28
37
  readonly closeOnBackdropClick: _angular_core.InputSignal<boolean>;
38
+ /** Appearance of the area outside the surface. Defaults to a dimmed overlay. */
39
+ readonly backdrop: _angular_core.InputSignal<DialogBackdrop>;
29
40
  readonly showCloseButton: _angular_core.InputSignal<boolean>;
30
41
  readonly closeButtonLabel: _angular_core.InputSignal<string>;
31
42
  readonly labelledBy: _angular_core.InputSignal<string | null>;
@@ -57,13 +68,15 @@ declare class DialogComponent {
57
68
  protected readonly surfaceClasses: _angular_core.Signal<string>;
58
69
  protected readonly radiusBase: _angular_core.Signal<string | null>;
59
70
  protected readonly densityBase: _angular_core.Signal<string | null>;
71
+ /** CDK `backdropClass` list: shared marker plus the selected appearance modifier. */
72
+ private readonly backdropClass;
60
73
  constructor();
61
74
  private attach;
62
75
  private detach;
63
76
  private requestClose;
64
77
  close(): void;
65
78
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogComponent, never>;
66
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogComponent, "Dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
79
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogComponent, "Dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
67
80
  }
68
81
 
69
82
  declare class DialogCloseDirective {
@@ -119,3 +132,4 @@ declare class DialogFooterComponent {
119
132
  }
120
133
 
121
134
  export { DialogCloseDirective, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent };
135
+ export type { DialogBackdrop };
package/types/ojiepermana-angular-component-form.d.ts CHANGED
@@ -8,12 +8,20 @@ import { AbstractControl } from '@angular/forms';
8
8
  */
9
9
  declare class FormFieldContext {
10
10
  readonly controlId: string;
11
+ readonly labelId: string;
11
12
  readonly descriptionId: string;
12
13
  readonly messageId: string;
13
14
  readonly control: _angular_core.WritableSignal<AbstractControl<any, any, any> | null>;
14
15
  readonly manualInvalid: _angular_core.WritableSignal<boolean>;
16
+ readonly hasLabel: _angular_core.WritableSignal<boolean>;
15
17
  readonly hasDescription: _angular_core.WritableSignal<boolean>;
16
18
  readonly hasMessage: _angular_core.WritableSignal<boolean>;
19
+ /**
20
+ * `aria-labelledby` for the control. `<FormLabel>` renders as a custom element,
21
+ * so the native `for`/`id` pairing does not associate it — point the control at
22
+ * the label's id explicitly so it has an accessible name (axe `select-name`/`label`).
23
+ */
24
+ readonly labelledBy: _angular_core.Signal<string | null>;
17
25
  private readonly statusTick;
18
26
  readonly invalid: _angular_core.Signal<boolean>;
19
27
  readonly firstError: _angular_core.Signal<string | null>;
@@ -84,6 +92,7 @@ declare class FormTitleComponent {
84
92
  declare class FormLabelComponent {
85
93
  protected readonly ctx: FormFieldContext;
86
94
  readonly class: _angular_core.InputSignal<string>;
95
+ constructor();
87
96
  protected readonly classes: _angular_core.Signal<string>;
88
97
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormLabelComponent, never>;
89
98
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormLabelComponent, "FormLabel, label[FormLabel]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
package/types/ojiepermana-angular-component-radio.d.ts CHANGED
@@ -41,6 +41,9 @@ declare class RadioComponent {
41
41
  readonly value: _angular_core.InputSignal<string>;
42
42
  readonly disabled: _angular_core.InputSignal<boolean>;
43
43
  readonly class: _angular_core.InputSignal<string>;
44
+ /** Accessible name for the radio input when no text is projected into `<Radio>`. */
45
+ readonly ariaLabel: _angular_core.InputSignal<string | null>;
46
+ readonly ariaLabelledby: _angular_core.InputSignal<string | null>;
44
47
  protected readonly selected: _angular_core.Signal<boolean>;
45
48
  protected readonly isDisabled: _angular_core.Signal<boolean>;
46
49
  protected readonly hostClasses: _angular_core.Signal<string>;
@@ -51,7 +54,7 @@ declare class RadioComponent {
51
54
  protected handleBlur(): void;
52
55
  focus(): void;
53
56
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioComponent, never>;
54
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioComponent, "Radio", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
57
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioComponent, "Radio", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
55
58
  }
56
59
 
57
60
  export { RadioComponent, RadioGroupComponent };
package/types/ojiepermana-angular-component-sheet.d.ts CHANGED
@@ -8,6 +8,15 @@ declare class SheetCloseDirective {
8
8
  }
9
9
 
10
10
  type SheetSide = 'top' | 'right' | 'bottom' | 'left';
11
+ /**
12
+ * Backdrop appearance for the area outside the sheet/drawer surface.
13
+ *
14
+ * - `'dim'`: dark, semi-transparent overlay (default) driven by the
15
+ * `--overlay-backdrop` theme token, so it recolors with theme/mode.
16
+ * - `'blur'`: the dim overlay plus a frosted `backdrop-filter` blur.
17
+ * - `'transparent'`: no dimming; the page behind stays fully visible.
18
+ */
19
+ type SheetBackdrop = 'dim' | 'blur' | 'transparent';
11
20
  declare class SheetComponent {
12
21
  private readonly overlay;
13
22
  private readonly vcr;
@@ -21,6 +30,8 @@ declare class SheetComponent {
21
30
  readonly variant: _angular_core.InputSignal<"sheet" | "drawer" | null>;
22
31
  readonly closeOnEscape: _angular_core.InputSignal<boolean>;
23
32
  readonly closeOnBackdropClick: _angular_core.InputSignal<boolean>;
33
+ /** Appearance of the area outside the surface. Defaults to a dimmed overlay. */
34
+ readonly backdrop: _angular_core.InputSignal<SheetBackdrop>;
24
35
  readonly showCloseButton: _angular_core.InputSignal<boolean>;
25
36
  readonly closeButtonLabel: _angular_core.InputSignal<string>;
26
37
  readonly labelledBy: _angular_core.InputSignal<string | null>;
@@ -46,6 +57,8 @@ declare class SheetComponent {
46
57
  protected readonly enterFrom: _angular_core.Signal<string>;
47
58
  protected readonly radiusBase: _angular_core.Signal<string | null>;
48
59
  protected readonly densityBase: _angular_core.Signal<string | null>;
60
+ /** CDK `backdropClass` list: shared marker plus the selected appearance modifier. */
61
+ private readonly backdropClass;
49
62
  constructor();
50
63
  private attach;
51
64
  private detach;
@@ -60,7 +73,7 @@ declare class SheetComponent {
60
73
  unregisterDescriptionId(id: string): void;
61
74
  private isDrawerHost;
62
75
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<SheetComponent, never>;
63
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<SheetComponent, "Sheet, Drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
76
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<SheetComponent, "Sheet, Drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
64
77
  }
65
78
 
66
79
  declare class SheetHeaderComponent {
@@ -109,4 +122,4 @@ declare class SheetFooterComponent {
109
122
  }
110
123
 
111
124
  export { SheetCloseDirective, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetTitleComponent };
112
- export type { SheetSide };
125
+ export type { SheetBackdrop, SheetSide };
package/types/ojiepermana-angular-component-timeline.d.ts CHANGED
@@ -32,11 +32,12 @@ declare class TimelineIndicatorComponent {
32
32
  readonly variant: _angular_core.InputSignal<TimelineIndicatorVariant>;
33
33
  readonly status: _angular_core.InputSignal<TimelineStatus | null>;
34
34
  readonly color: _angular_core.InputSignal<TimelineIndicatorColor | null>;
35
+ readonly ariaLabel: _angular_core.InputSignal<string | null>;
35
36
  readonly class: _angular_core.InputSignal<string>;
36
37
  protected readonly resolvedStatus: _angular_core.Signal<TimelineStatus>;
37
38
  protected readonly classes: _angular_core.Signal<string>;
38
39
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimelineIndicatorComponent, never>;
39
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimelineIndicatorComponent, "TimelineIndicator", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
40
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimelineIndicatorComponent, "TimelineIndicator", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
40
41
  }
41
42
  declare class TimelineContentComponent {
42
43
  private readonly item;