@ojiepermana/angular-component 22.0.35 → 22.0.40

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 (57) hide show
  1. package/README.md +3 -3
  2. package/alert-dialog/README.md +14 -14
  3. package/checkbox/README.md +16 -15
  4. package/command/README.md +4 -4
  5. package/dialog/README.md +12 -12
  6. package/drawer/README.md +1 -1
  7. package/fesm2022/ojiepermana-angular-component-accordion.mjs +16 -4
  8. package/fesm2022/ojiepermana-angular-component-alert-dialog.mjs +11 -3
  9. package/fesm2022/ojiepermana-angular-component-alert.mjs +13 -3
  10. package/fesm2022/ojiepermana-angular-component-avatar.mjs +13 -3
  11. package/fesm2022/ojiepermana-angular-component-badge.mjs +16 -4
  12. package/fesm2022/ojiepermana-angular-component-button.mjs +13 -3
  13. package/fesm2022/ojiepermana-angular-component-calendar.mjs +2 -2
  14. package/fesm2022/ojiepermana-angular-component-card.mjs +14 -4
  15. package/fesm2022/ojiepermana-angular-component-dialog.mjs +18 -6
  16. package/fesm2022/ojiepermana-angular-component-dropdown-menu.mjs +13 -3
  17. package/fesm2022/ojiepermana-angular-component-input.mjs +16 -4
  18. package/fesm2022/ojiepermana-angular-component-item.mjs +14 -4
  19. package/fesm2022/ojiepermana-angular-component-kanban.mjs +1 -1
  20. package/fesm2022/ojiepermana-angular-component-popover.mjs +16 -4
  21. package/fesm2022/ojiepermana-angular-component-select.mjs +22 -5
  22. package/fesm2022/ojiepermana-angular-component-sheet.mjs +18 -6
  23. package/fesm2022/ojiepermana-angular-component-table.mjs +16 -4
  24. package/fesm2022/ojiepermana-angular-component-tabs.mjs +13 -3
  25. package/fesm2022/ojiepermana-angular-component-textarea.mjs +16 -4
  26. package/fesm2022/ojiepermana-angular-component-timeline.mjs +2 -2
  27. package/fesm2022/ojiepermana-angular-component-tooltip.mjs +44 -4
  28. package/fesm2022/ojiepermana-angular-component-utils.mjs +51 -1
  29. package/form/README.md +13 -13
  30. package/hover-card/README.md +1 -1
  31. package/package.json +1 -1
  32. package/radio/README.md +11 -11
  33. package/scroll-area/README.md +4 -2
  34. package/sheet/README.md +11 -11
  35. package/slider/README.md +2 -2
  36. package/switch/README.md +10 -10
  37. package/toast/README.md +59 -210
  38. package/tooltip/README.md +13 -8
  39. package/types/ojiepermana-angular-component-accordion.d.ts +5 -1
  40. package/types/ojiepermana-angular-component-alert-dialog.d.ts +3 -1
  41. package/types/ojiepermana-angular-component-alert.d.ts +5 -1
  42. package/types/ojiepermana-angular-component-avatar.d.ts +5 -1
  43. package/types/ojiepermana-angular-component-badge.d.ts +5 -1
  44. package/types/ojiepermana-angular-component-button.d.ts +5 -1
  45. package/types/ojiepermana-angular-component-card.d.ts +5 -1
  46. package/types/ojiepermana-angular-component-dialog.d.ts +5 -1
  47. package/types/ojiepermana-angular-component-dropdown-menu.d.ts +5 -1
  48. package/types/ojiepermana-angular-component-input.d.ts +5 -1
  49. package/types/ojiepermana-angular-component-item.d.ts +5 -1
  50. package/types/ojiepermana-angular-component-popover.d.ts +5 -1
  51. package/types/ojiepermana-angular-component-select.d.ts +11 -5
  52. package/types/ojiepermana-angular-component-sheet.d.ts +5 -1
  53. package/types/ojiepermana-angular-component-table.d.ts +5 -1
  54. package/types/ojiepermana-angular-component-tabs.d.ts +5 -1
  55. package/types/ojiepermana-angular-component-textarea.d.ts +5 -1
  56. package/types/ojiepermana-angular-component-tooltip.d.ts +13 -1
  57. package/types/ojiepermana-angular-component-utils.d.ts +34 -2
@@ -1,5 +1,5 @@
1
+ import * as _angular_core from '@angular/core';
1
2
  import { MatSelect } from '@angular/material/select';
2
- import * as i0 from '@angular/core';
3
3
  import { MatOption } from '@angular/material/core';
4
4
 
5
5
  /**
@@ -24,10 +24,16 @@ import { MatOption } from '@angular/material/core';
24
24
  declare class SelectComponent extends MatSelect {
25
25
  /** Optional bridge to an enclosing edsis `<FormField>` (validation + a11y). */
26
26
  private readonly formFieldContext;
27
+ /** Per-component corner-radius override; `'inherit'` follows the global axis. */
28
+ readonly radius: _angular_core.InputSignal<"inherit" | "none" | "sm" | "md" | "lg" | "xl" | "full">;
29
+ /** Per-component spacing-density override; `'inherit'` follows the global axis. */
30
+ readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
31
+ protected readonly radiusBase: _angular_core.Signal<string | null>;
32
+ protected readonly densityBase: _angular_core.Signal<string | null>;
27
33
  constructor();
28
34
  ngOnInit(): void;
29
- static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
30
- static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "SelectField", ["matSelect"], {}, {}, never, ["mat-select-trigger", "*"], true, never>;
35
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent, never>;
36
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent, "SelectField", ["matSelect"], { "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, {}, never, ["mat-select-trigger", "*"], true, never>;
31
37
  }
32
38
 
33
39
  /**
@@ -49,8 +55,8 @@ declare class SelectComponent extends MatSelect {
49
55
  * Material's own option so rendering stays pixel-identical.
50
56
  */
51
57
  declare class OptionComponent extends MatOption {
52
- static ɵfac: i0.ɵɵFactoryDeclaration<OptionComponent, never>;
53
- static ɵcmp: i0.ɵɵComponentDeclaration<OptionComponent, "SelectItem", ["matOption"], {}, {}, never, ["mat-icon", "*"], true, never>;
58
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<OptionComponent, never>;
59
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<OptionComponent, "SelectItem", ["matOption"], {}, {}, never, ["mat-icon", "*"], true, never>;
54
60
  }
55
61
 
56
62
  export { OptionComponent, SelectComponent };
@@ -26,6 +26,8 @@ declare class SheetComponent {
26
26
  readonly labelledBy: _angular_core.InputSignal<string | null>;
27
27
  readonly describedBy: _angular_core.InputSignal<string | null>;
28
28
  readonly class: _angular_core.InputSignal<string>;
29
+ readonly radius: _angular_core.InputSignal<"inherit" | "none" | "sm" | "md" | "lg" | "xl" | "full">;
30
+ readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
29
31
  readonly openedChange: _angular_core.OutputEmitterRef<boolean>;
30
32
  private readonly tpl;
31
33
  private overlayRef;
@@ -34,13 +36,15 @@ declare class SheetComponent {
34
36
  private readonly resolvedSide;
35
37
  protected readonly surfaceClasses: _angular_core.Signal<string>;
36
38
  protected readonly enterFrom: _angular_core.Signal<string>;
39
+ protected readonly radiusBase: _angular_core.Signal<string | null>;
40
+ protected readonly densityBase: _angular_core.Signal<string | null>;
37
41
  constructor();
38
42
  private attach;
39
43
  private detach;
40
44
  close(): void;
41
45
  private isDrawerHost;
42
46
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<SheetComponent, never>;
43
- 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; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
47
+ 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; }; "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>;
44
48
  }
45
49
 
46
50
  declare class SheetHeaderComponent {
@@ -2,9 +2,13 @@ import * as _angular_core from '@angular/core';
2
2
 
3
3
  declare class TableComponent {
4
4
  readonly class: _angular_core.InputSignal<string>;
5
+ readonly radius: _angular_core.InputSignal<"inherit" | "none" | "sm" | "md" | "lg" | "xl" | "full">;
6
+ readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
5
7
  protected readonly classes: _angular_core.Signal<string>;
8
+ protected readonly radiusBase: _angular_core.Signal<string | null>;
9
+ protected readonly densityBase: _angular_core.Signal<string | null>;
6
10
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent, never>;
7
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "Table", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
11
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "Table", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
8
12
  }
9
13
  declare class TableHeaderComponent {
10
14
  readonly class: _angular_core.InputSignal<string>;
@@ -27,9 +27,13 @@ declare abstract class TabsListContextBase {
27
27
  declare class TabsComponent extends TabsContextBase {
28
28
  readonly value: _angular_core.ModelSignal<string | null>;
29
29
  readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
30
+ readonly radius: _angular_core.InputSignal<"inherit" | "none" | "sm" | "md" | "lg" | "xl" | "full">;
31
+ readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
30
32
  readonly class: _angular_core.InputSignal<string>;
31
33
  private readonly idPrefix;
32
34
  private readonly triggers;
35
+ protected readonly radiusBase: _angular_core.Signal<string | null>;
36
+ protected readonly densityBase: _angular_core.Signal<string | null>;
33
37
  protected readonly classes: _angular_core.Signal<string>;
34
38
  register(element: HTMLElement, value: () => string, disabled: () => boolean): void;
35
39
  unregister(element: HTMLElement): void;
@@ -43,7 +47,7 @@ declare class TabsComponent extends TabsContextBase {
43
47
  private triggerForValue;
44
48
  private normalizeValue;
45
49
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsComponent, never>;
46
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "Tabs", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
50
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "Tabs", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
47
51
  }
48
52
  declare class TabsListComponent extends TabsListContextBase {
49
53
  protected readonly ctx: TabsComponent;
@@ -3,10 +3,14 @@ import * as _angular_core from '@angular/core';
3
3
  declare class TextareaComponent {
4
4
  private readonly el;
5
5
  readonly class: _angular_core.InputSignal<string>;
6
+ readonly radius: _angular_core.InputSignal<"inherit" | "none" | "sm" | "md" | "lg" | "xl" | "full">;
7
+ readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
8
+ protected readonly radiusBase: _angular_core.Signal<string | null>;
9
+ protected readonly densityBase: _angular_core.Signal<string | null>;
6
10
  protected readonly classes: _angular_core.Signal<string>;
7
11
  focus(): void;
8
12
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextareaComponent, never>;
9
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextareaComponent, "textarea[Textarea]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
13
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextareaComponent, "textarea[Textarea]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
10
14
  }
11
15
 
12
16
  export { TextareaComponent };
@@ -23,8 +23,19 @@ declare class TooltipComponent implements TooltipDefaults {
23
23
 
24
24
  declare class TooltipContentDirective {
25
25
  readonly template: TemplateRef<unknown>;
26
+ readonly radius: _angular_core.InputSignal<"inherit" | "none" | "sm" | "md" | "lg" | "xl" | "full">;
27
+ readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
28
+ /**
29
+ * Resolved `--radius-base` / `--spacing-base` knob values (or `null` to
30
+ * inherit the global axis). Public so {@link TooltipTriggerDirective} can mirror
31
+ * them onto the CDK overlay panel — the element that actually paints the rounded
32
+ * background + padding — since this directive sits on an `<ng-template>` whose
33
+ * host bindings never reach the imperatively-created overlay subtree.
34
+ */
35
+ readonly radiusBase: _angular_core.Signal<string | null>;
36
+ readonly densityBase: _angular_core.Signal<string | null>;
26
37
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipContentDirective, never>;
27
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipContentDirective, "ng-template[TooltipContent]", ["TooltipContent"], {}, {}, never, never, true, never>;
38
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipContentDirective, "ng-template[TooltipContent]", ["TooltipContent"], { "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
28
39
  }
29
40
 
30
41
  declare class TooltipTriggerDirective {
@@ -56,6 +67,7 @@ declare class TooltipTriggerDirective {
56
67
  handleFocusOut(event: FocusEvent): void;
57
68
  open(): void;
58
69
  close(): void;
70
+ private applySurfaceVars;
59
71
  private bindOverlayLifecycle;
60
72
  private scheduleOpen;
61
73
  private scheduleClose;
@@ -20,11 +20,43 @@ declare function oppositeSide(side: OverlaySide): OverlaySide;
20
20
  */
21
21
  declare function overlayDismissals(overlayRef: OverlayRef, origin?: HTMLElement): Observable<unknown>;
22
22
 
23
+ /**
24
+ * Per-component corner-radius / spacing-density override helpers.
25
+ *
26
+ * These mirror the global `theme-radius` / `theme-space` preset values from
27
+ * `@ojiepermana/angular-theme` — kept as a local copy so this package stays
28
+ * decoupled from the theme package (see its empty peer/deps on -theme).
29
+ *
30
+ * A component that accepts a `radius` / `density` input binds the resolved value
31
+ * onto its surface element via `[style.--radius-base]` / `[style.--spacing-base]`.
32
+ * Tailwind's `rounded-*` utilities resolve `calc(var(--radius-base) * n)` and the
33
+ * spacing utilities resolve `calc(var(--spacing-base) * n)` (see the theme's
34
+ * `base/tailwind.css` `@theme inline` mapping), so the override rescales that
35
+ * subtree and shadows the global `<html theme-radius|theme-space>` axis. The
36
+ * `'inherit'` preset binds nothing, so the component keeps following the axis.
37
+ */
38
+ /** Corner-radius presets for a per-component `radius` input. */
39
+ declare const COMPONENT_RADII: readonly ["inherit", "none", "sm", "md", "lg", "xl", "full"];
40
+ type ComponentRadius = (typeof COMPONENT_RADII)[number];
41
+ /** Spacing-density presets for a per-component `density` input. */
42
+ declare const COMPONENT_DENSITIES: readonly ["inherit", "compact", "normal", "relaxed", "spacious"];
43
+ type ComponentDensity = (typeof COMPONENT_DENSITIES)[number];
44
+ /**
45
+ * Resolves a `radius` input to a `--radius-base` value, or `null` to inherit the
46
+ * global axis. Bind the result to the surface host: `[style.--radius-base]`.
47
+ */
48
+ declare function radiusBaseValue(radius: ComponentRadius): string | null;
49
+ /**
50
+ * Resolves a `density` input to a `--spacing-base` value, or `null` to inherit
51
+ * the global axis. Bind the result to the surface host: `[style.--spacing-base]`.
52
+ */
53
+ declare function densityBaseValue(density: ComponentDensity): string | null;
54
+
23
55
  /**
24
56
  * Returns a document-unique id with the given prefix, e.g. `uniqueId('Checkbox')`
25
57
  * → `"checkbox-1"`. Single shared counter for every component in the library.
26
58
  */
27
59
  declare function uniqueId(prefix: string): string;
28
60
 
29
- export { cn, connectedPositionFor, oppositeSide, overlayDismissals, uniqueId };
30
- export type { OverlayAlign, OverlaySide };
61
+ export { COMPONENT_DENSITIES, COMPONENT_RADII, cn, connectedPositionFor, densityBaseValue, oppositeSide, overlayDismissals, radiusBaseValue, uniqueId };
62
+ export type { ComponentDensity, ComponentRadius, OverlayAlign, OverlaySide };