@raqm/ui 0.1.2 → 0.2.1

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 (100) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/README.md +87 -126
  3. package/fesm2022/raqm-ui-badge.mjs +3 -1
  4. package/fesm2022/raqm-ui-badge.mjs.map +1 -1
  5. package/fesm2022/raqm-ui-calendar.mjs +79 -12
  6. package/fesm2022/raqm-ui-calendar.mjs.map +1 -1
  7. package/fesm2022/raqm-ui-combobox.mjs +47 -23
  8. package/fesm2022/raqm-ui-combobox.mjs.map +1 -1
  9. package/fesm2022/raqm-ui-command.mjs +60 -12
  10. package/fesm2022/raqm-ui-command.mjs.map +1 -1
  11. package/fesm2022/raqm-ui-dialog.mjs +1 -3
  12. package/fesm2022/raqm-ui-dialog.mjs.map +1 -1
  13. package/fesm2022/raqm-ui-dropdown-menu.mjs.map +1 -1
  14. package/fesm2022/raqm-ui-hover-card.mjs.map +1 -1
  15. package/fesm2022/raqm-ui-icon.mjs +160 -0
  16. package/fesm2022/raqm-ui-icon.mjs.map +1 -0
  17. package/fesm2022/raqm-ui-input-otp.mjs +7 -4
  18. package/fesm2022/raqm-ui-input-otp.mjs.map +1 -1
  19. package/fesm2022/raqm-ui-menubar.mjs.map +1 -1
  20. package/fesm2022/raqm-ui-overlay-internal.mjs +15 -5
  21. package/fesm2022/raqm-ui-overlay-internal.mjs.map +1 -1
  22. package/fesm2022/raqm-ui-popover.mjs +51 -19
  23. package/fesm2022/raqm-ui-popover.mjs.map +1 -1
  24. package/fesm2022/raqm-ui-resizable.mjs +14 -4
  25. package/fesm2022/raqm-ui-resizable.mjs.map +1 -1
  26. package/fesm2022/raqm-ui-scroll-area.mjs +85 -29
  27. package/fesm2022/raqm-ui-scroll-area.mjs.map +1 -1
  28. package/fesm2022/raqm-ui-select.mjs +46 -19
  29. package/fesm2022/raqm-ui-select.mjs.map +1 -1
  30. package/fesm2022/raqm-ui-sidebar.mjs +13 -3
  31. package/fesm2022/raqm-ui-sidebar.mjs.map +1 -1
  32. package/fesm2022/raqm-ui-slider.mjs +59 -12
  33. package/fesm2022/raqm-ui-slider.mjs.map +1 -1
  34. package/fesm2022/raqm-ui-toast.mjs +60 -20
  35. package/fesm2022/raqm-ui-toast.mjs.map +1 -1
  36. package/fesm2022/raqm-ui-tooltip.mjs +28 -3
  37. package/fesm2022/raqm-ui-tooltip.mjs.map +1 -1
  38. package/fesm2022/raqm-ui.mjs +1 -0
  39. package/package.json +52 -18
  40. package/styles/accordion.css +1 -0
  41. package/styles/alert-dialog.css +1 -0
  42. package/styles/alert.css +1 -0
  43. package/styles/attachment.css +1 -0
  44. package/styles/avatar.css +1 -0
  45. package/styles/badge.css +1 -0
  46. package/styles/base.css +1 -0
  47. package/styles/button-group.css +1 -0
  48. package/styles/button.css +1 -0
  49. package/styles/checkbox.css +1 -0
  50. package/styles/combobox.css +1 -0
  51. package/styles/command.css +1 -0
  52. package/styles/common.css +17 -0
  53. package/styles/context-menu.css +1 -0
  54. package/styles/dialog.css +1 -0
  55. package/styles/drawer.css +1 -0
  56. package/styles/dropdown-menu.css +1 -0
  57. package/styles/empty.css +1 -0
  58. package/styles/field-parts.css +1 -0
  59. package/styles/field-relationships.css +1 -0
  60. package/styles/input-group-button.css +1 -0
  61. package/styles/input-group-relationships.css +1 -0
  62. package/styles/input-otp.css +1 -0
  63. package/styles/input.css +1 -0
  64. package/styles/item.css +1 -0
  65. package/styles/kbd.css +1 -0
  66. package/styles/menubar.css +1 -0
  67. package/styles/native-select.css +1 -0
  68. package/styles/navigation-menu.css +1 -0
  69. package/styles/overlay.css +1 -0
  70. package/styles/pagination.css +1 -0
  71. package/styles/popover.css +1 -0
  72. package/styles/questionnaire.css +1 -0
  73. package/styles/radio-group.css +1 -0
  74. package/styles/resizable.css +1 -0
  75. package/styles/sheet.css +1 -0
  76. package/styles/sidebar.css +1 -0
  77. package/styles/spinner.css +1 -0
  78. package/styles/switch.css +1 -0
  79. package/styles/table.css +1 -0
  80. package/styles/tabs.css +1 -0
  81. package/styles/textarea.css +1 -0
  82. package/styles/theme.css +50 -4324
  83. package/styles/toggle-group.css +1 -0
  84. package/styles/toggle.css +1 -0
  85. package/styles/tooltip.css +1 -0
  86. package/types/raqm-ui-calendar.d.ts +1 -0
  87. package/types/raqm-ui-combobox.d.ts +8 -4
  88. package/types/raqm-ui-command.d.ts +4 -0
  89. package/types/raqm-ui-dialog.d.ts +7 -1
  90. package/types/raqm-ui-icon.d.ts +65 -0
  91. package/types/raqm-ui-input-otp.d.ts +1 -0
  92. package/types/raqm-ui-resizable.d.ts +4 -0
  93. package/types/raqm-ui-rolldown-runtime-C25Le4-w.d.ts +1 -0
  94. package/types/raqm-ui-scroll-area.d.ts +11 -0
  95. package/types/raqm-ui-slider.d.ts +1 -1
  96. package/types/raqm-ui-toast.d.ts +6 -0
  97. package/types/raqm-ui.d.ts +1 -0
  98. package/fesm2022/raqm-ui-carousel.mjs +0 -410
  99. package/fesm2022/raqm-ui-carousel.mjs.map +0 -1
  100. package/types/raqm-ui-carousel.d.ts +0 -81
@@ -0,0 +1 @@
1
+ .raqm-toggle-group .raqm-toggle-group-item:focus,.raqm-toggle-group .raqm-toggle-group-item:focus-visible{position:relative;z-index:10}.raqm-toggle-group-item svg:not([class*=size-]){inline-size:calc(var(--raqm-spacing)*4);block-size:calc(var(--raqm-spacing)*4);pointer-events:none;flex-shrink:0}.raqm-toggle-group-item[data-raqm-small] svg:not([class*=size-]){inline-size:calc(var(--raqm-spacing)*3.5);block-size:calc(var(--raqm-spacing)*3.5)}.raqm-toggle-group[data-raqm-spacing="0"] .raqm-toggle-group-item{border-radius:0;padding-inline:calc(var(--raqm-spacing)*2)}.raqm-toggle-group:not([data-raqm-vertical])[data-raqm-spacing="0"][data-raqm-variant=outline] .raqm-toggle-group-item{border-inline-start-width:0}.raqm-toggle-group:not([data-raqm-vertical])[data-raqm-spacing="0"][data-raqm-variant=outline] .raqm-toggle-group-item:first-child{border-inline-start-width:1px}.raqm-toggle-group[data-raqm-vertical][data-raqm-spacing="0"][data-raqm-variant=outline] .raqm-toggle-group-item{border-block-start-width:0}.raqm-toggle-group[data-raqm-vertical][data-raqm-spacing="0"][data-raqm-variant=outline] .raqm-toggle-group-item:first-child{border-block-start-width:1px}.raqm-toggle-group:not([data-raqm-vertical])[data-raqm-spacing="0"] .raqm-toggle-group-item:first-child{border-start-start-radius:var(--raqm-radius-lg);border-end-start-radius:var(--raqm-radius-lg)}.raqm-toggle-group:not([data-raqm-vertical])[data-raqm-spacing="0"] .raqm-toggle-group-item:last-child{border-start-end-radius:var(--raqm-radius-lg);border-end-end-radius:var(--raqm-radius-lg)}.raqm-toggle-group[data-raqm-vertical][data-raqm-spacing="0"] .raqm-toggle-group-item:first-child{border-start-start-radius:var(--raqm-radius-lg);border-start-end-radius:var(--raqm-radius-lg)}.raqm-toggle-group[data-raqm-vertical][data-raqm-spacing="0"] .raqm-toggle-group-item:last-child{border-end-start-radius:var(--raqm-radius-lg);border-end-end-radius:var(--raqm-radius-lg)}
@@ -0,0 +1 @@
1
+ .raqm-toggle svg:not([class*=size-]){inline-size:calc(var(--raqm-spacing)*4);block-size:calc(var(--raqm-spacing)*4);pointer-events:none;flex-shrink:0}.raqm-toggle[data-raqm-small] svg:not([class*=size-]){inline-size:calc(var(--raqm-spacing)*3.5);block-size:calc(var(--raqm-spacing)*3.5)}
@@ -0,0 +1 @@
1
+ span.raqm-tooltip-trigger{display:inline-block;inline-size:fit-content}.cdk-overlay-pane.raqm-tooltip-overlay-pane{background:none;border:0;padding:0}.raqm-tooltip-content:has(.raqm-kbd){padding-inline-end:calc(var(--raqm-spacing)*1.5)}.raqm-tooltip-content .raqm-kbd{position:relative;isolation:isolate;z-index:50;border-radius:var(--raqm-radius-sm);background-color:var(--raqm-tooltip-kbd-bg);color:var(--raqm-background)}@media(forced-colors: active){.raqm-tooltip-arrow{background-color:CanvasText}}
@@ -130,6 +130,7 @@ export declare class RaqmCalendarComponent {
130
130
  private readonly keyboard;
131
131
  constructor();
132
132
  ngOnChanges(changes: SimpleChanges): void;
133
+ ngDoCheck(): void;
133
134
  ngOnInit(): void;
134
135
  isDisabled(date: Date): boolean;
135
136
  format(date: Date, options: Intl.DateTimeFormatOptions): string;
@@ -54,11 +54,13 @@ interface RaqmComboboxChipView {
54
54
  declare function flattenItems(items: readonly RaqmComboboxEntry[]): readonly RaqmComboboxOption[];
55
55
  declare function filterOptions(items: readonly RaqmComboboxOption[], query: string, mode: RaqmComboboxMode, selectedLabel: string | null): readonly RaqmComboboxOption[];
56
56
  declare function optionDomId(inputId: string, value: string): string;
57
- declare function buildOptionViews(items: readonly RaqmComboboxOption[], inputId: string): readonly RaqmComboboxOptionView[];
57
+ declare function createOptionIdResolver(inputId: string): (value: string) => string;
58
+ declare function buildOptionViews(items: readonly RaqmComboboxOption[], optionIdFor: (value: string) => string): readonly RaqmComboboxOptionView[];
58
59
  declare function buildRenderEntries(items: readonly RaqmComboboxEntry[], views: readonly RaqmComboboxOptionView[], listboxId: string): readonly RaqmComboboxRenderEntry[];
59
- declare function buildSelectedLabel(selected: RaqmComboboxModel, items: readonly RaqmComboboxOption[]): string | null;
60
- declare function buildSelectionRemovable(selected: RaqmComboboxModel, items: readonly RaqmComboboxOption[]): boolean;
61
- declare function buildChipViews(selected: RaqmComboboxModel, items: readonly RaqmComboboxOption[]): readonly RaqmComboboxChipView[];
60
+ declare function indexOptionsByValue(items: readonly RaqmComboboxOption[]): ReadonlyMap<string, RaqmComboboxOption>;
61
+ declare function buildSelectedLabel(selected: RaqmComboboxModel, itemsByValue: ReadonlyMap<string, RaqmComboboxOption>): string | null;
62
+ declare function buildSelectionRemovable(selected: RaqmComboboxModel, itemsByValue: ReadonlyMap<string, RaqmComboboxOption>): boolean;
63
+ declare function buildChipViews(selected: RaqmComboboxModel, itemsByValue: ReadonlyMap<string, RaqmComboboxOption>): readonly RaqmComboboxChipView[];
62
64
  interface RaqmComboboxFieldHost {
63
65
  open(): boolean;
64
66
  disabled(): boolean;
@@ -67,6 +69,8 @@ interface RaqmComboboxFieldHost {
67
69
  optionViews(): readonly RaqmComboboxOptionView[];
68
70
  activeId(): string | null;
69
71
  selected(): RaqmComboboxModel;
72
+ /** Precomputed selection membership, so per-option checks are O(1). */
73
+ selectedValues(): ReadonlySet<string>;
70
74
  isOptionDisabled(item: RaqmComboboxOption): boolean;
71
75
  trigger(): HTMLButtonElement | null;
72
76
  element(): HTMLElement;
@@ -34,6 +34,8 @@ export declare class RaqmCommandComponent {
34
34
  readonly visibleItems: import("@angular/core").Signal<RaqmCommandOption[]>;
35
35
  /** Whether any registered row is checked; switches the list to multi-select. */
36
36
  readonly hasChecked: import("@angular/core").Signal<boolean>;
37
+ private readonly normalizedSearch;
38
+ private readonly preparedItems;
37
39
  private readonly scores;
38
40
  private readonly rankedItems;
39
41
  private readonly injector;
@@ -44,6 +46,8 @@ export declare class RaqmCommandComponent {
44
46
  private readonly originalChildren;
45
47
  constructor();
46
48
  private lastSearch;
49
+ /** Appends in order, but only when the matching suffix is not already in place. */
50
+ private placeAtEnd;
47
51
  register(item: RaqmCommandOption): void;
48
52
  unregister(item: RaqmCommandOption): void;
49
53
  mintId(): string;
@@ -67,7 +67,13 @@ declare class RaqmDialogScrollLease implements ScrollStrategy {
67
67
  }
68
68
  /** @internal Root-scoped token so every dialog root shares one scroll-lock count. */
69
69
  declare const RAQM_DIALOG_SCROLL_LOCK: InjectionToken<RaqmDialogScrollLock>;
70
- /** Modal dialog root shared by Dialog, Alert Dialog, Sheet, Drawer and Command Dialog. */
70
+ /**
71
+ * Modal dialog root shared by Dialog, Alert Dialog, Sheet, Drawer and Command Dialog.
72
+ *
73
+ * No `styleUrl` here: the abstract base is never rendered. Every concrete subclass
74
+ * declares the shared surface stylesheet itself, so decorating the base would compile a
75
+ * duplicate, unused copy of the dialog surface into the `dialog` entrypoint.
76
+ */
71
77
  export declare abstract class RaqmDialogBaseComponent implements RaqmDialogContext, OnDestroy {
72
78
  protected readonly policy: import("@raqm/ui/dialog").RaqmDialogPolicy | null;
73
79
  private readonly host;
@@ -0,0 +1,65 @@
1
+ import * as i0 from "@angular/core";
2
+ import { InjectionToken, Provider } from "@angular/core";
3
+ /**
4
+ * One icon artwork, expressed as SVG path data. The package ships no icons; consumers
5
+ * register their own map with {@link provideRaqmIcons}.
6
+ */
7
+ interface RaqmIconDefinition {
8
+ /** The SVG `viewBox`, for example `0 0 24 24`. */
9
+ readonly viewBox: string;
10
+ /** One or more path `d` values; every path is filled with `currentColor`. */
11
+ readonly paths: readonly string[];
12
+ /** Fill rule for multi-path marks that rely on even-odd holes. */
13
+ readonly fillRule?: 'nonzero' | 'evenodd';
14
+ /** Clip rule for multi-path marks that rely on even-odd holes. */
15
+ readonly clipRule?: 'nonzero' | 'evenodd';
16
+ /** Fallback accessible name used when the consumer does not pass `label`. */
17
+ readonly title?: string;
18
+ }
19
+ /** Consumer icon registry, keyed by the `name` used on `<raqm-icon>`. */
20
+ type RaqmIconMap = Readonly<Record<string, RaqmIconDefinition>>;
21
+ /** Icon registry token. Empty by default; fill it with {@link provideRaqmIcons}. */
22
+ export declare const RAQM_ICONS: InjectionToken<Readonly<Record<string, RaqmIconDefinition>>>;
23
+ /**
24
+ * Registers consumer icon data for `RaqmIcon`.
25
+ *
26
+ * ```ts
27
+ * bootstrapApplication(App, {
28
+ * providers: [provideRaqmIcons({ home: HOME_ICON })],
29
+ * });
30
+ * ```
31
+ *
32
+ * Call it once at the application or route level; a later call replaces the whole map.
33
+ */
34
+ export declare function provideRaqmIcons(icons: RaqmIconMap): Provider;
35
+ /**
36
+ * Inline SVG icon rendered from consumer-supplied path data.
37
+ *
38
+ * Decorative by default (`aria-hidden`); pass `label` (or set `title` on the definition)
39
+ * to expose it as `role="img"` with an accessible name. Unknown names render nothing and
40
+ * warn in development.
41
+ */
42
+ export declare class RaqmIcon {
43
+ /** Registry key of the artwork to render. */
44
+ readonly name: import("@angular/core").InputSignal<string>;
45
+ /** Accessible name. Omit it for decorative icons. */
46
+ readonly label: import("@angular/core").InputSignal<string | null>;
47
+ private readonly icons;
48
+ protected readonly definition: import("@angular/core").Signal<RaqmIconDefinition | null>;
49
+ protected readonly accessibleName: import("@angular/core").Signal<string | null>;
50
+ constructor();
51
+ static ɵfac: i0.ɵɵFactoryDeclaration<RaqmIcon, never>;
52
+ static ɵcmp: i0.ɵɵComponentDeclaration<RaqmIcon, "raqm-icon", never, {
53
+ "name": {
54
+ "alias": "name";
55
+ "required": true;
56
+ "isSignal": true;
57
+ };
58
+ "label": {
59
+ "alias": "label";
60
+ "required": false;
61
+ "isSignal": true;
62
+ };
63
+ }, {}, never, never, true, never>;
64
+ }
65
+ export type { RaqmIconDefinition, RaqmIconMap };
@@ -81,6 +81,7 @@ export declare class RaqmInputOtpComponent {
81
81
  readonly length: import("@angular/core").Signal<number>;
82
82
  readonly currentValue: import("@angular/core").Signal<string>;
83
83
  readonly patternSource: import("@angular/core").Signal<string | null>;
84
+ private readonly validationRegex;
84
85
  readonly invalidState: import("@angular/core").Signal<boolean>;
85
86
  constructor();
86
87
  private matches;
@@ -10,8 +10,12 @@ export declare class RaqmResizablePanelGroupComponent {
10
10
  readonly element: ElementRef<any>;
11
11
  readonly panels: import("@angular/core").Signal<readonly RaqmResizablePanelDirective[]>;
12
12
  readonly handles: import("@angular/core").Signal<readonly RaqmResizableHandleDirective[]>;
13
+ private readonly panelIndices;
14
+ private readonly handleIndices;
13
15
  private readonly changed;
14
16
  readonly sizes: import("@angular/core").Signal<number[]>;
17
+ private indexByPanel;
18
+ private indexByHandle;
15
19
  panelIndex(panel: RaqmResizablePanelDirective): number;
16
20
  handleIndex(handle: RaqmResizableHandleDirective): number;
17
21
  bounds(index: number): {
@@ -0,0 +1 @@
1
+ export { __reExport as n, __exportAll as t };
@@ -41,7 +41,9 @@ export declare class RaqmScrollAreaComponent {
41
41
  readonly vertical: import("@angular/core").Signal<boolean>;
42
42
  readonly scrolling: import("@angular/core").WritableSignal<boolean>;
43
43
  readonly hovering: import("@angular/core").WritableSignal<boolean>;
44
+ private geometry;
44
45
  private scrollTimer;
46
+ private frame;
45
47
  readonly edges: import("@angular/core").Signal<{
46
48
  xStart: boolean;
47
49
  xEnd: boolean;
@@ -51,7 +53,12 @@ export declare class RaqmScrollAreaComponent {
51
53
  constructor();
52
54
  /** Tracks the native scroll lifecycle without changing wheel or touch events. */
53
55
  protected onScroll(): void;
56
+ /** Coalesces scroll and observer notifications; callers that need fresh data call `refresh` directly. */
57
+ private scheduleRefresh;
58
+ /** Re-reads layout and direction, then publishes the current offsets. */
54
59
  refresh(): void;
60
+ /** Reads only the offsets, reusing the last measured layout. */
61
+ private refreshOffsets;
55
62
  /** Sets a clamped native offset measured from the logical start of the chosen axis. */
56
63
  scrollTo(orientation: 'horizontal' | 'vertical', offset: number): void;
57
64
  static ɵfac: i0.ɵɵFactoryDeclaration<RaqmScrollAreaComponent, never>;
@@ -92,6 +99,8 @@ export declare class RaqmScrollBarComponent {
92
99
  private readonly destroyRef;
93
100
  private readonly trackSize;
94
101
  private drag;
102
+ private coordinates;
103
+ private coordinateFrame;
95
104
  protected readonly overflow: import("@angular/core").Signal<boolean>;
96
105
  private readonly geometry;
97
106
  protected readonly thumbStyle: import("@angular/core").Signal<{
@@ -110,6 +119,8 @@ export declare class RaqmScrollBarComponent {
110
119
  private onTrackWheel;
111
120
  private measure;
112
121
  private coordinate;
122
+ private measureCoordinates;
123
+ private clearCoordinates;
113
124
  protected onPointerDown(event: PointerEvent): void;
114
125
  protected onPointerMove(event: PointerEvent): void;
115
126
  protected endPointer(event: PointerEvent): void;
@@ -42,7 +42,7 @@ export declare class RaqmSlider {
42
42
  private readonly lastUsedIndex;
43
43
  private readonly thumbElements;
44
44
  private readonly thumbInputs;
45
- protected readonly orientation: import("@angular/core").Signal<"horizontal" | "vertical">;
45
+ protected readonly orientation: import("@angular/core").Signal<"vertical" | "horizontal">;
46
46
  protected readonly values: import("@angular/core").Signal<readonly number[]>;
47
47
  protected readonly thumbs: import("@angular/core").Signal<readonly SliderThumb[]>;
48
48
  /** min → thumb for one value, first → last thumb for a range. */
@@ -147,6 +147,10 @@ export declare class RaqmToasterComponent implements OnDestroy {
147
147
  private readonly panel;
148
148
  private overlayRef?;
149
149
  private observer?;
150
+ private observedContents;
151
+ private appliedDirection;
152
+ private renderedSnapshot;
153
+ private measuredRootsKey;
150
154
  private announcementTimer?;
151
155
  private previousFocus;
152
156
  private hovered;
@@ -168,6 +172,8 @@ export declare class RaqmToasterComponent implements OnDestroy {
168
172
  protected toastIndex(toast: RaqmToastRecord): number;
169
173
  protected swipe(value: boolean): void;
170
174
  private syncPause;
175
+ private resolveDirection;
176
+ private syncObservedContents;
171
177
  private measure;
172
178
  private ensureFocus;
173
179
  private restoreFocus;
@@ -19,6 +19,7 @@ export * from "@raqm/ui/dropdown-menu";
19
19
  export * from "@raqm/ui/empty";
20
20
  export * from "@raqm/ui/field";
21
21
  export * from "@raqm/ui/hover-card";
22
+ export * from "@raqm/ui/icon";
22
23
  export * from "@raqm/ui/input";
23
24
  export * from "@raqm/ui/input-group";
24
25
  export * from "@raqm/ui/input-otp";
@@ -1,410 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- import { ChangeDetectionStrategy, Component, Directive, ElementRef, afterRenderEffect, booleanAttribute, computed, contentChild, inject, input, output, signal, untracked } from "@angular/core";
3
- import EmblaCarousel from "embla-carousel";
4
- var RaqmCarouselItemDirective = class RaqmCarouselItemDirective {
5
- static ɵfac = i0.ɵɵngDeclareFactory({
6
- minVersion: "12.0.0",
7
- version: "22.2.2",
8
- ngImport: i0,
9
- type: RaqmCarouselItemDirective,
10
- deps: [],
11
- target: i0.ɵɵFactoryTarget.Directive
12
- });
13
- static ɵdir = i0.ɵɵngDeclareDirective({
14
- minVersion: "14.0.0",
15
- version: "22.2.2",
16
- type: RaqmCarouselItemDirective,
17
- isStandalone: true,
18
- selector: "[raqm-carousel-item]",
19
- host: {
20
- attributes: {
21
- "role": "group",
22
- "aria-roledescription": "slide"
23
- },
24
- classAttribute: "raqm-carousel-item"
25
- },
26
- ngImport: i0
27
- });
28
- };
29
- i0.ɵɵngDeclareClassMetadata({
30
- minVersion: "12.0.0",
31
- version: "22.2.2",
32
- ngImport: i0,
33
- type: RaqmCarouselItemDirective,
34
- decorators: [{
35
- type: Directive,
36
- args: [{
37
- selector: "[raqm-carousel-item]",
38
- host: {
39
- class: "raqm-carousel-item",
40
- role: "group",
41
- "aria-roledescription": "slide"
42
- }
43
- }]
44
- }]
45
- });
46
- var RaqmCarouselContentComponent = class RaqmCarouselContentComponent {
47
- element = inject(ElementRef);
48
- static ɵfac = i0.ɵɵngDeclareFactory({
49
- minVersion: "12.0.0",
50
- version: "22.2.2",
51
- ngImport: i0,
52
- type: RaqmCarouselContentComponent,
53
- deps: [],
54
- target: i0.ɵɵFactoryTarget.Component
55
- });
56
- static ɵcmp = i0.ɵɵngDeclareComponent({
57
- minVersion: "14.0.0",
58
- version: "22.2.2",
59
- type: RaqmCarouselContentComponent,
60
- isStandalone: true,
61
- selector: "[raqm-carousel-content]",
62
- host: { classAttribute: "raqm-carousel-content" },
63
- ngImport: i0,
64
- template: "<div class=\"raqm-carousel-track\"><ng-content /></div>",
65
- isInline: true,
66
- styles: [":host{display:block;overflow:hidden}.raqm-carousel-track{display:flex;touch-action:pan-y pinch-zoom}\n"]
67
- });
68
- };
69
- i0.ɵɵngDeclareClassMetadata({
70
- minVersion: "12.0.0",
71
- version: "22.2.2",
72
- ngImport: i0,
73
- type: RaqmCarouselContentComponent,
74
- decorators: [{
75
- type: Component,
76
- args: [{
77
- selector: "[raqm-carousel-content]",
78
- template: "<div class=\"raqm-carousel-track\"><ng-content /></div>",
79
- host: { class: "raqm-carousel-content" },
80
- styles: [":host{display:block;overflow:hidden}.raqm-carousel-track{display:flex;touch-action:pan-y pinch-zoom}\n"]
81
- }]
82
- }]
83
- });
84
- var RaqmCarouselComponent = class RaqmCarouselComponent {
85
- vertical = input(false, {
86
- ...ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {},
87
- transform: booleanAttribute
88
- });
89
- options = input({}, ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
90
- plugins = input([], ...ngDevMode ? [{ debugName: "plugins" }] : /* istanbul ignore next */ []);
91
- apiReady = output();
92
- selectedIndexChange = output();
93
- content = contentChild(RaqmCarouselContentComponent, {
94
- ...ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {},
95
- descendants: true
96
- });
97
- api = signal(void 0, ...ngDevMode ? [{ debugName: "api" }] : /* istanbul ignore next */ []);
98
- index = signal(0, ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
99
- previousAvailable = signal(false, ...ngDevMode ? [{ debugName: "previousAvailable" }] : /* istanbul ignore next */ []);
100
- nextAvailable = signal(false, ...ngDevMode ? [{ debugName: "nextAvailable" }] : /* istanbul ignore next */ []);
101
- viewport;
102
- update = (api) => {
103
- const index = api.selectedScrollSnap();
104
- if (index !== this.index()) {
105
- this.index.set(index);
106
- this.selectedIndexChange.emit(index);
107
- }
108
- this.previousAvailable.set(api.canScrollPrev());
109
- this.nextAvailable.set(api.canScrollNext());
110
- };
111
- constructor() {
112
- afterRenderEffect(() => {
113
- const content = this.content();
114
- const options = this.options();
115
- const plugins = this.plugins();
116
- const vertical = this.vertical();
117
- const element = content?.element.nativeElement;
118
- if (!element) {
119
- untracked(() => {
120
- this.api()?.destroy();
121
- this.api.set(void 0);
122
- this.viewport = void 0;
123
- this.previousAvailable.set(false);
124
- this.nextAvailable.set(false);
125
- this.index.set(0);
126
- });
127
- return;
128
- }
129
- const direction = options.direction ?? (getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr");
130
- const effectiveOptions = {
131
- ...options,
132
- axis: vertical ? "y" : "x",
133
- direction
134
- };
135
- untracked(() => {
136
- const existing = this.api();
137
- if (existing && this.viewport === element) existing.reInit(effectiveOptions, plugins);
138
- else {
139
- existing?.destroy();
140
- const api = EmblaCarousel(element, effectiveOptions, plugins);
141
- this.viewport = element;
142
- api.on("select", this.update).on("reInit", this.update);
143
- this.api.set(api);
144
- this.update(api);
145
- this.apiReady.emit(api);
146
- }
147
- });
148
- });
149
- }
150
- ngOnDestroy() {
151
- this.api()?.destroy();
152
- }
153
- canPrevious() {
154
- return this.previousAvailable();
155
- }
156
- canNext() {
157
- return this.nextAvailable();
158
- }
159
- previous() {
160
- this.api()?.scrollPrev();
161
- }
162
- next() {
163
- this.api()?.scrollNext();
164
- }
165
- go(index) {
166
- this.api()?.scrollTo(index);
167
- }
168
- selectedScrollSnap() {
169
- return this.api()?.selectedScrollSnap() ?? 0;
170
- }
171
- scrollSnapList() {
172
- return this.api()?.scrollSnapList() ?? [];
173
- }
174
- onKey(event) {
175
- if (event.target instanceof HTMLElement && (/^(INPUT|TEXTAREA|SELECT)$/.test(event.target.tagName) || event.target.isContentEditable)) return;
176
- const rtl = (this.api()?.internalEngine().options.direction ?? getComputedStyle(event.currentTarget).direction) === "rtl";
177
- const previous = this.vertical() ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
178
- const next = this.vertical() ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
179
- if (event.key === previous || event.key === next) {
180
- event.preventDefault();
181
- if (event.key === next) this.next();
182
- else this.previous();
183
- }
184
- }
185
- static ɵfac = i0.ɵɵngDeclareFactory({
186
- minVersion: "12.0.0",
187
- version: "22.2.2",
188
- ngImport: i0,
189
- type: RaqmCarouselComponent,
190
- deps: [],
191
- target: i0.ɵɵFactoryTarget.Component
192
- });
193
- static ɵcmp = i0.ɵɵngDeclareComponent({
194
- minVersion: "17.2.0",
195
- version: "22.2.2",
196
- type: RaqmCarouselComponent,
197
- isStandalone: true,
198
- selector: "raqm-carousel",
199
- inputs: {
200
- vertical: {
201
- classPropertyName: "vertical",
202
- publicName: "vertical",
203
- isSignal: true,
204
- isRequired: false,
205
- transformFunction: null
206
- },
207
- options: {
208
- classPropertyName: "options",
209
- publicName: "options",
210
- isSignal: true,
211
- isRequired: false,
212
- transformFunction: null
213
- },
214
- plugins: {
215
- classPropertyName: "plugins",
216
- publicName: "plugins",
217
- isSignal: true,
218
- isRequired: false,
219
- transformFunction: null
220
- }
221
- },
222
- outputs: {
223
- apiReady: "apiReady",
224
- selectedIndexChange: "selectedIndexChange"
225
- },
226
- host: {
227
- attributes: {
228
- "role": "region",
229
- "aria-roledescription": "carousel"
230
- },
231
- listeners: { "keydown": "onKey($event)" },
232
- properties: { "attr.data-raqm-vertical": "vertical() ? \"\" : null" },
233
- classAttribute: "raqm-carousel"
234
- },
235
- queries: [{
236
- propertyName: "content",
237
- first: true,
238
- predicate: RaqmCarouselContentComponent,
239
- descendants: true,
240
- isSignal: true
241
- }],
242
- ngImport: i0,
243
- template: "<ng-content />",
244
- isInline: true,
245
- styles: [":host{position:relative;display:block;min-inline-size:0}\n"],
246
- changeDetection: i0.ChangeDetectionStrategy.OnPush
247
- });
248
- };
249
- i0.ɵɵngDeclareClassMetadata({
250
- minVersion: "12.0.0",
251
- version: "22.2.2",
252
- ngImport: i0,
253
- type: RaqmCarouselComponent,
254
- decorators: [{
255
- type: Component,
256
- args: [{
257
- selector: "raqm-carousel",
258
- template: "<ng-content />",
259
- changeDetection: ChangeDetectionStrategy.OnPush,
260
- host: {
261
- class: "raqm-carousel",
262
- role: "region",
263
- "aria-roledescription": "carousel",
264
- "[attr.data-raqm-vertical]": "vertical() ? \"\" : null",
265
- "(keydown)": "onKey($event)"
266
- },
267
- styles: [":host{position:relative;display:block;min-inline-size:0}\n"]
268
- }]
269
- }],
270
- ctorParameters: () => [],
271
- propDecorators: {
272
- vertical: [{
273
- type: i0.Input,
274
- args: [{
275
- isSignal: true,
276
- alias: "vertical",
277
- required: false
278
- }]
279
- }],
280
- options: [{
281
- type: i0.Input,
282
- args: [{
283
- isSignal: true,
284
- alias: "options",
285
- required: false
286
- }]
287
- }],
288
- plugins: [{
289
- type: i0.Input,
290
- args: [{
291
- isSignal: true,
292
- alias: "plugins",
293
- required: false
294
- }]
295
- }],
296
- apiReady: [{
297
- type: i0.Output,
298
- args: ["apiReady"]
299
- }],
300
- selectedIndexChange: [{
301
- type: i0.Output,
302
- args: ["selectedIndexChange"]
303
- }],
304
- content: [{
305
- type: i0.ContentChild,
306
- args: [i0.forwardRef(() => RaqmCarouselContentComponent), {
307
- descendants: true,
308
- isSignal: true
309
- }]
310
- }]
311
- }
312
- });
313
- var RaqmCarouselPreviousDirective = class RaqmCarouselPreviousDirective {
314
- carousel = inject(RaqmCarouselComponent);
315
- host = inject(ElementRef);
316
- authoredDisabled = this.host.nativeElement.disabled;
317
- unavailable = computed(() => this.authoredDisabled || !this.carousel.canPrevious(), ...ngDevMode ? [{ debugName: "unavailable" }] : /* istanbul ignore next */ []);
318
- static ɵfac = i0.ɵɵngDeclareFactory({
319
- minVersion: "12.0.0",
320
- version: "22.2.2",
321
- ngImport: i0,
322
- type: RaqmCarouselPreviousDirective,
323
- deps: [],
324
- target: i0.ɵɵFactoryTarget.Directive
325
- });
326
- static ɵdir = i0.ɵɵngDeclareDirective({
327
- minVersion: "14.0.0",
328
- version: "22.2.2",
329
- type: RaqmCarouselPreviousDirective,
330
- isStandalone: true,
331
- selector: "button[raqm-carousel-previous]",
332
- host: {
333
- attributes: { "type": "button" },
334
- listeners: { "click": "carousel.previous()" },
335
- properties: { "disabled": "unavailable()" }
336
- },
337
- ngImport: i0
338
- });
339
- };
340
- i0.ɵɵngDeclareClassMetadata({
341
- minVersion: "12.0.0",
342
- version: "22.2.2",
343
- ngImport: i0,
344
- type: RaqmCarouselPreviousDirective,
345
- decorators: [{
346
- type: Directive,
347
- args: [{
348
- selector: "button[raqm-carousel-previous]",
349
- host: {
350
- type: "button",
351
- "[disabled]": "unavailable()",
352
- "(click)": "carousel.previous()"
353
- }
354
- }]
355
- }]
356
- });
357
- var RaqmCarouselNextDirective = class RaqmCarouselNextDirective {
358
- carousel = inject(RaqmCarouselComponent);
359
- host = inject(ElementRef);
360
- authoredDisabled = this.host.nativeElement.disabled;
361
- unavailable = computed(() => this.authoredDisabled || !this.carousel.canNext(), ...ngDevMode ? [{ debugName: "unavailable" }] : /* istanbul ignore next */ []);
362
- static ɵfac = i0.ɵɵngDeclareFactory({
363
- minVersion: "12.0.0",
364
- version: "22.2.2",
365
- ngImport: i0,
366
- type: RaqmCarouselNextDirective,
367
- deps: [],
368
- target: i0.ɵɵFactoryTarget.Directive
369
- });
370
- static ɵdir = i0.ɵɵngDeclareDirective({
371
- minVersion: "14.0.0",
372
- version: "22.2.2",
373
- type: RaqmCarouselNextDirective,
374
- isStandalone: true,
375
- selector: "button[raqm-carousel-next]",
376
- host: {
377
- attributes: { "type": "button" },
378
- listeners: { "click": "carousel.next()" },
379
- properties: { "disabled": "unavailable()" }
380
- },
381
- ngImport: i0
382
- });
383
- };
384
- i0.ɵɵngDeclareClassMetadata({
385
- minVersion: "12.0.0",
386
- version: "22.2.2",
387
- ngImport: i0,
388
- type: RaqmCarouselNextDirective,
389
- decorators: [{
390
- type: Directive,
391
- args: [{
392
- selector: "button[raqm-carousel-next]",
393
- host: {
394
- type: "button",
395
- "[disabled]": "unavailable()",
396
- "(click)": "carousel.next()"
397
- }
398
- }]
399
- }]
400
- });
401
- const RaqmCarousel = [
402
- RaqmCarouselComponent,
403
- RaqmCarouselContentComponent,
404
- RaqmCarouselItemDirective,
405
- RaqmCarouselPreviousDirective,
406
- RaqmCarouselNextDirective
407
- ];
408
- export { RaqmCarousel, RaqmCarouselComponent, RaqmCarouselContentComponent, RaqmCarouselItemDirective, RaqmCarouselNextDirective, RaqmCarouselPreviousDirective };
409
-
410
- //# sourceMappingURL=raqm-ui-carousel.mjs.map