@joanroucoux/cairn-ui 0.8.2 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,103 @@
 # Changelog
 
+## 0.9.0
+
+### Breaking
+
+- `ui-dialog`: the `layout` input (`trade`, `form`, `list`, `confirm`) is replaced by `variant` (`default` |
+  `confirm`) and `sheet` (`fit` | `full`). `DIALOG_LAYOUTS` and `DialogLayout` become `DIALOG_VARIANTS`,
+  `DIALOG_SHEETS`, `DialogVariant` and `DialogSheet`.
+- Migration: `layout="trade"` and `layout="form"` become the default (remove the attribute); `layout="list"` becomes
+  `sheet="full"`; `layout="confirm"` becomes `variant="confirm"`. A list dialog was anchored 96px from the top on a
+  desktop: it is now centred like every dialog.
+- `ui-filter-chips`: `role="group"` and `aria-label` move from the host to an inner wrapper around the chips, so a
+  leading element sits outside the group.
+- Migration: a selector or a test query on `ui-filter-chips[role=group]` targets the inner `div[role=group]` instead;
+  `getByRole('group', { name })` keeps working.
+- `styles/motion.css` no longer ships `ui-enter-panel` nor its `cairn-panel-in` keyframes (an 8px slide for a detail
+  panel beside a list). The detail now opens in `ui-drawer`, which plays its own motion.
+- Migration: replace the side panel animated with `animate.enter="ui-enter-panel"` by a `ui-drawer`; for any other
+  element, use `ui-enter-fade-up` or `ui-enter-fade`.
+- `ui-toaster`: the message text sits in its own `<span>`, beside the icon, inside the surface.
+- Migration: `getByText(message)` now returns that `<span>`, not the surface; a test that checked the surface through
+  it (its classes, its position) reads `getByText(message).parentElement` instead.
+
+### Added
+
+- `UiToasts.showError(message, closeLabel = 'Fermer')`: an error toast with the same surface, an alert icon, no timer
+  and a 28px cross (a 44px hit area on touch, 36px with a fine pointer); it closes only with the cross. One message
+  at a time: an error replaces a confirmation and the other way round. `Toast` becomes a union on `kind`: `'success'`, or `'error'` with its `closeLabel`.
+- `ui-drawer` (`@joanroucoux/cairn-ui/drawer`): a modal side panel on the native `<dialog>`, against the right edge at
+  full height, 440px wide by default, on `--card` with a shadow on its left edge, 24px of padding and a
+  `rgb(0 0 0 / 0.36)` veil. It scrolls on its own with `overscroll-behavior: contain`, without locking the page.
+  Escape, the veil and the optional 36px cross close it; `dismissed` and `closed` (`escape`, `backdrop`, `cross`,
+  `programmatic`) follow the protocol of `ui-dialog`, and `busy` keeps it open. Without `heading` it draws no header
+  and `label` names it; with neither it throws. It enters with opacity and a 24px slide over `--duration-base` on
+  `--ease-out` and leaves the reverse way over `--duration-exit`; under reduced motion it only fades. A `ui-dialog`
+  opened from it opens over it and the drawer stays underneath: Escape closes the dialog, then the drawer.
+- `ModalClose` (`@joanroucoux/cairn-ui/dialog`): the close protocol `ui-dialog` and `ui-drawer` share (Escape,
+  press-and-release on the veil, `busy`, `dismissed`, then `closed` once the exit transition has played). An
+  optional `opening` callback runs just before `showModal()`.
+- `ui-select-pill` (`@joanroucoux/cairn-ui/select-pill`): a compact pill that opens a `ui-menu` of exclusive
+  choices, to head a row of filter chips. The projected text is its label and the projected `ui-menu` is what it
+  opens, as a sheet on a phone like the `…` menus. Outlined with a chevron at rest, solid primary when `active`,
+  where a separate 14px cross (44px hit area on touch, 36px with a fine pointer), named by the required `clearLabel`,
+  replaces the chevron and emits `cleared`, and focus goes back to the trigger. `contextLabel` is read before the
+  label while active. 34px in a 44px target on touch and 32px with a fine pointer, with a 2px focus outline outside
+  the pill at every size, a cross ring in the pill's text colour, and a border of its own in forced colors.
+- `button[uiMenuItem]` accepts `checked`: the item becomes a `menuitemradio` with `aria-checked` and a check mark
+  after its label, and the menu focuses the checked item when it opens.
+- `ui-filter-chips` projects an element marked `uiChipsLeading` first in its row, followed by a 1 x 20px `--border`
+  rule that only shows when something is projected.
+- `td[ui-group-cell]` is collapsible: `collapsible`, `expanded` (a model), `toggleDisabled` and `controls`. The band
+  becomes an `h2 > button[aria-expanded]` with an 18px chevron that turns to -90 degrees in `--duration-fast`, a
+  `--soft` hover and a focus ring. With `toggleDisabled` it keeps neither the pointer cursor nor the hover. The page
+  owns the fold memory.
+- `tbody[uiGroup]` takes `collapsed`: its rows (`tr[uiTr]`) get `hidden` and stay in the DOM, so a `uiFlipList`
+  around the table slides nothing when a group folds. A plain `tr` is not hidden.
+- `ui-group-header` (`@joanroucoux/cairn-ui/group-header`): the header of a grouped card on a phone, with name, meta
+  and a projected total. Collapsible, with a 20px chevron and a press scale (neither the scale nor the pointer cursor
+  with `toggleDisabled`), or static.
+- `ui-result-group` (`@joanroucoux/cairn-ui/result-group`): one source of a search, a two-tone heading over its rows,
+  with a two-row skeleton, a message slot (`resultGroupMessage`) and an inline error whose retry has no icon.
+- `ui-alert` `variant="info"`: a `--muted` box with an 18px info icon, `role="note"`.
+- `ui-row` `trailing="chevron"`: a flush link row with a 16px `--subtle-foreground` chevron and a dimming hover. Rows
+  without it are unchanged.
+- `ui-back-link` `size="inline"` and the `button[ui-back-link]` selector: a 14px 500 muted back step, 18px chevron,
+  44px high (36px with a mouse). A button host gets `type="button"` unless it sets its own.
+- `ui-async` `retryIcon` input (default true): `false` draws a text-only retry in the `inline` variant.
+- `ui-line-chart` `deltaSuffix`: a text shown after the change in the tooltip (for example "depuis le début"). It
+  stays when the amount is masked.
+
+### Changed
+
+- `ui-dialog` has one three-zone structure: header `16 16 16 24`, body `20 24` (the only scroller), footer `16 24`;
+  on a sheet `0 8 12 16`, `16` and `12 16` plus the safe area, under a handle. A hairline runs under the header and
+  above the footer when `closeLabel` draws the cross. The `confirm` variant has one 24px padding and no hairlines,
+  and an empty confirm footer has no top padding.
+- `ui-dialog` is centred on a desktop and capped at `calc(100dvh - 96px)`; the cross icon is 22px in every dialog.
+- `ui-dialog` opened while another modal is open (over a `ui-drawer`) draws a lighter `rgb(0 0 0 / 0.24)` veil over
+  that one's; alone it keeps `rgb(0 0 0 / 0.36)`. It decides when it opens, with no input.
+- `ui-dialog` width: the default stays `lg` (560px) and `confirm` defaults to 440px; `width` still takes `md`, `lg`
+  or any CSS length.
+- `ui-line-chart` shows its tooltip on a tap: `pointerdown` shows it, `pointermove` follows, `pointerleave` and
+  `pointercancel` hide it. The plot is `touch-none` (was `touch-pan-y`), so a vertical swipe on the plot no longer
+  scrolls the page; the page still scrolls everywhere else.
+- `uiStaleLink` with `chevron`: the gap before the chevron is 4px on touch and 2px with a mouse (was 2px everywhere).
+- `ui-toaster` is an inverted surface (`--primary-foreground` on `--primary`, no contour, menu shadow, 44px minimum
+  height, 280 to 400px wide within the viewport minus 32px) with a 16px check icon, and it is centred at the bottom of
+  the content area: from `64rem`, 24px from the bottom and centred between `--sidebar-width` (0 when the app does not
+  set it) and the right edge; below, centred 8px above the tab bar as before. It was `--elevated`, bottom right.
+- Stories and docs no longer use the Instruments samples: the `ui-table` `Instruments` story is removed, the
+  `ui-empty` sample reads "Aucune ligne ne correspond à ...", the `ui-back-link` small story reads "Comptes". The
+  Storybook favicon is the Cairn tile.
+
+### Fixed
+
+- `ui-toaster` shows above an open `ui-dialog` or `ui-drawer`: it is a `popover="manual"` in the top layer, shown
+  again each time a message arrives. A modal that opens afterwards does not raise it again: the toast never covers a
+  dialog's button. Behind a modal the page is inert, so the pause and the error cross do not work over an open modal.
+
 ## 0.8.2
 
 ### Changed
@@ -70,6 +168,7 @@ Every symbol that was exported from the root now lives under exactly one subpath
 - `@joanroucoux/cairn-ui/row`: `ROW_GAPS`, `ROW_PADDINGS`, `ROW_SIZES`, `UiListRow`, `UiRow`, `UiRowItem`, `UiRowTile`, `RowGap`, `RowPadding`, `RowSize`
 - `@joanroucoux/cairn-ui/segmented`: `SEGMENTED_SIZES`, `UiSegmented`, `SegmentedOption`, `SegmentedSize`
 - `@joanroucoux/cairn-ui/select`: `UiSelect`
+- `@joanroucoux/cairn-ui/select-pill`: `UiSelectPill`
 - `@joanroucoux/cairn-ui/skeleton`: `SKELETON_SHAPES`, `UiSkeleton`, `SkeletonShape`
 - `@joanroucoux/cairn-ui/stale-link`: `STALE_LINK_SIZES`, `UiStaleLink`, `StaleLinkSize`
 - `@joanroucoux/cairn-ui/stat`: `STAT_SIZES`, `UiStat`, `StatSize`

package/fesm2022/joanroucoux-cairn-ui-action-bar.mjs

@@ -1,54 +1,58 @@
-import { DOCUMENT } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, ElementRef, DestroyRef, afterNextRender, Component } from '@angular/core';
-
-const HEIGHT_PROPERTY = '--action-bar-height';
-/**
- * Bar of actions fixed above the tab bar on iPhone: the primary actions of a detail screen, within
- * thumb reach. It sits `--tab-bar-height` (52px plus the safe area) above the bottom edge, so it clears `ui-tab-bar`, and
- * it is hidden from `64rem`, where the same actions live in the page itself. Its children share the
- * width equally. While it is on the page it publishes its height as `--action-bar-height` on the
- * root element, which `ui-toaster` adds to its offset so a confirmation never covers the actions.
- *
- * @example
- * <ui-action-bar>
- *   <button ui-button variant="outline" size="tall">Sell</button>
- *   <button ui-button size="tall">Buy</button>
- * </ui-action-bar>
- */
-class UiActionBar {
-    constructor() {
-        const host = inject(ElementRef).nativeElement;
-        const root = inject(DOCUMENT).documentElement;
-        const destroyRef = inject(DestroyRef);
-        const publish = () => root.style.setProperty(HEIGHT_PROPERTY, `${host.offsetHeight}px`);
-        afterNextRender(() => {
-            publish();
-            if (typeof ResizeObserver !== 'undefined') {
-                const observer = new ResizeObserver(publish);
-                observer.observe(host);
-                destroyRef.onDestroy(() => observer.disconnect());
-            }
-        });
-        destroyRef.onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiActionBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: UiActionBar, isStandalone: true, selector: "ui-action-bar", host: { classAttribute: "fixed inset-x-0 bottom-[var(--tab-bar-height,calc(52px+env(safe-area-inset-bottom)))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden" }, ngImport: i0, template: '<ng-content />', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiActionBar, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-action-bar',
-                    template: '<ng-content />',
-                    host: {
-                        class: 'fixed inset-x-0 bottom-[var(--tab-bar-height,calc(52px+env(safe-area-inset-bottom)))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden',
-                    },
-                }]
-        }], ctorParameters: () => [] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import { DOCUMENT } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, ElementRef, afterNextRender, inject } from "@angular/core";
+const HEIGHT_PROPERTY = "--action-bar-height";
+var UiActionBar = class UiActionBar {
+	constructor() {
+		const host = inject(ElementRef).nativeElement;
+		const root = inject(DOCUMENT).documentElement;
+		const destroyRef = inject(DestroyRef);
+		const publish = () => root.style.setProperty(HEIGHT_PROPERTY, `${host.offsetHeight}px`);
+		afterNextRender(() => {
+			publish();
+			if (typeof ResizeObserver !== "undefined") {
+				const observer = new ResizeObserver(publish);
+				observer.observe(host);
+				destroyRef.onDestroy(() => observer.disconnect());
+			}
+		});
+		destroyRef.onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiActionBar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: UiActionBar,
+		isStandalone: true,
+		selector: "ui-action-bar",
+		host: { classAttribute: "fixed inset-x-0 bottom-[var(--tab-bar-height,calc(52px+env(safe-area-inset-bottom)))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden" },
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiActionBar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-action-bar",
+			template: "<ng-content />",
+			host: { class: "fixed inset-x-0 bottom-[var(--tab-bar-height,calc(52px+env(safe-area-inset-bottom)))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden" }
+		}]
+	}],
+	ctorParameters: () => []
+});
 export { UiActionBar };
-//# sourceMappingURL=joanroucoux-cairn-ui-action-bar.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-action-bar.mjs.map

package/fesm2022/joanroucoux-cairn-ui-action-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-action-bar.mjs","sources":["../../../projects/ui/action-bar/action-bar.ts","../../../projects/ui/action-bar/joanroucoux-cairn-ui-action-bar.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { Component, DestroyRef, ElementRef, afterNextRender, inject } from '@angular/core';\n\nconst HEIGHT_PROPERTY = '--action-bar-height';\n\n/**\n * Bar of actions fixed above the tab bar on iPhone: the primary actions of a detail screen, within\n * thumb reach. It sits `--tab-bar-height` (52px plus the safe area) above the bottom edge, so it clears `ui-tab-bar`, and\n * it is hidden from `64rem`, where the same actions live in the page itself. Its children share the\n * width equally. While it is on the page it publishes its height as `--action-bar-height` on the\n * root element, which `ui-toaster` adds to its offset so a confirmation never covers the actions.\n *\n * @example\n * <ui-action-bar>\n *   <button ui-button variant=\"outline\" size=\"tall\">Sell</button>\n *   <button ui-button size=\"tall\">Buy</button>\n * </ui-action-bar>\n */\n@Component({\n  selector: 'ui-action-bar',\n  template: '<ng-content />',\n  host: {\n    class:\n      'fixed inset-x-0 bottom-[var(--tab-bar-height,calc(52px+env(safe-area-inset-bottom)))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden',\n  },\n})\nexport class UiActionBar {\n  constructor() {\n    const host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n    const root = inject(DOCUMENT).documentElement;\n    const destroyRef = inject(DestroyRef);\n    const publish = (): void => root.style.setProperty(HEIGHT_PROPERTY, `${host.offsetHeight}px`);\n\n    afterNextRender(() => {\n      publish();\n\n      if (typeof ResizeObserver !== 'undefined') {\n        const observer = new ResizeObserver(publish);\n        observer.observe(host);\n        destroyRef.onDestroy(() => observer.disconnect());\n      }\n    });\n\n    destroyRef.onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY));\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA,MAAM,eAAe,GAAG,qBAAqB;AAE7C;;;;;;;;;;;;AAYG;MASU,WAAW,CAAA;AACtB,IAAA,WAAA,GAAA;QACE,MAAM,IAAI,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC,aAAa;QACtE,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,eAAe;AAC7C,QAAA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AACrC,QAAA,MAAM,OAAO,GAAG,MAAY,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,eAAe,EAAE,CAAA,EAAG,IAAI,CAAC,YAAY,CAAA,EAAA,CAAI,CAAC;QAE7F,eAAe,CAAC,MAAK;AACnB,YAAA,OAAO,EAAE;AAET,YAAA,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;AACzC,gBAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC;AAC5C,gBAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC;gBACtB,UAAU,CAAC,SAAS,CAAC,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;YACnD;AACF,QAAA,CAAC,CAAC;AAEF,QAAA,UAAU,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IACxE;uGAlBW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,wTANZ,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAMf,WAAW,EAAA,UAAA,EAAA,CAAA;kBARvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EACH,mNAAmN;AACtN,qBAAA;AACF,iBAAA;;;ACzBD;;AAEG;;;;"}
+{"version":3,"file":"joanroucoux-cairn-ui-action-bar.mjs","names":[],"sources":["../../../projects/ui/action-bar/action-bar.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { Component, DestroyRef, ElementRef, afterNextRender, inject } from '@angular/core';\n\nconst HEIGHT_PROPERTY = '--action-bar-height';\n\n/**\n * Bar of actions fixed above the tab bar on iPhone, hidden from `64rem`, where the same actions\n * live in the page itself. Its children share the width equally. While it is on the page it\n * publishes its height as `--action-bar-height` on the root element, which `ui-toaster` clears.\n *\n * @example\n * <ui-action-bar>\n *   <button ui-button variant=\"outline\" size=\"tall\">Sell</button>\n *   <button ui-button size=\"tall\">Buy</button>\n * </ui-action-bar>\n */\n@Component({\n  selector: 'ui-action-bar',\n  template: '<ng-content />',\n  host: {\n    class:\n      'fixed inset-x-0 bottom-[var(--tab-bar-height,calc(52px+env(safe-area-inset-bottom)))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden',\n  },\n})\nexport class UiActionBar {\n  constructor() {\n    const host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n    const root = inject(DOCUMENT).documentElement;\n    const destroyRef = inject(DestroyRef);\n    const publish = (): void => root.style.setProperty(HEIGHT_PROPERTY, `${host.offsetHeight}px`);\n\n    afterNextRender(() => {\n      publish();\n\n      if (typeof ResizeObserver !== 'undefined') {\n        const observer = new ResizeObserver(publish);\n        observer.observe(host);\n        destroyRef.onDestroy(() => observer.disconnect());\n      }\n    });\n\n    destroyRef.onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY));\n  }\n}\n"],"mappings":";;;AAGA,MAAM,kBAAkB;AAqBxB,IAAa,cAAb,MAAa,YAAW;CACtB,cAAA;EACE,MAAM,OAAO,OAAgC,UAAU,CAAC,CAAC;EACzD,MAAM,OAAO,OAAO,QAAQ,CAAC,CAAC;EAC9B,MAAM,aAAa,OAAO,UAAU;EACpC,MAAM,gBAAsB,KAAK,MAAM,YAAY,iBAAiB,GAAG,KAAK,aAAY,GAAI;EAE5F,sBAAqB;GACnB,QAAO;GAEP,IAAI,OAAO,mBAAmB,aAAa;IACzC,MAAM,WAAW,IAAI,eAAe,OAAO;IAC3C,SAAS,QAAQ,IAAI;IACrB,WAAW,gBAAgB,SAAS,WAAU,CAAE;GAClD;EACF,CAAC;EAED,WAAW,gBAAgB,KAAK,MAAM,eAAe,eAAe,CAAC;CACvE;CAlBW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAW,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAX,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAW,cAAA;EAAA,UAAA;EAAA,MAAA,EAAA,gBAAA,oNAAA;EAAA,UAAA;EAAA,UANZ;EAAgB,UAAA;CAAA,CAAA;;AAMf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAW,YAAA,CAAA;EARvB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;GACV,MAAM,EACJ,OACE,oNACH;EACF,CAAA"}

package/fesm2022/joanroucoux-cairn-ui-alert.mjs

@@ -1,31 +1,93 @@
-import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, Component } from '@angular/core';
-
-const ALERT_VARIANTS = ['error', 'warning'];
-const BASE_CLASSES = 'flex items-start gap-2.5 text-left text-label';
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, computed, input } from "@angular/core";
+const ALERT_VARIANTS = [
+	"error",
+	"warning",
+	"info"
+];
+const BASE_CLASSES = "flex items-start gap-2.5 text-left text-label";
 const VARIANT_CLASSES = {
-    error: 'rounded-control bg-(--card) px-3.5 py-3 shadow-[inset_0_0_0_1px_var(--border)]',
-    warning: 'text-(--foreground)',
+	error: "rounded-control bg-(--card) px-3.5 py-3 shadow-[inset_0_0_0_1px_var(--border)]",
+	warning: "text-(--foreground)",
+	info: "rounded-control bg-(--muted) p-3 text-(--foreground)"
+};
+const ROLES = {
+	error: "alert",
+	warning: "status",
+	info: "note"
 };
-/**
- * Inline message explaining a failure or a consequence: an icon, an optional heading and a text.
- * It fades in when it appears; set `[fadeIn]="false"` on an alert that is part of the page as it
- * opens (an error state after a load), which shows without motion.
- *
- * @example
- * <ui-alert heading="Sign-in failed">Try again.</ui-alert>
- */
-class UiAlert {
-    variant = input('error', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    heading = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "heading" }] : /* istanbul ignore next */ []));
-    fadeIn = input(true, { ...(ngDevMode ? { debugName: "fadeIn" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    classes = computed(() => `${BASE_CLASSES} ${VARIANT_CLASSES[this.variant()]}${this.fadeIn() ? ' ui-enter-fade' : ''}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiAlert, isStandalone: true, selector: "ui-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, fadeIn: { classPropertyName: "fadeIn", publicName: "fadeIn", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "animate.leave": "ui-leave-fade" }, properties: { "class": "classes()", "attr.role": "variant() === 'warning' ? 'status' : 'alert'" } }, ngImport: i0, template: `
-    @if (variant() === 'warning') {
+var UiAlert = class UiAlert {
+	variant = input("error", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	heading = input(...ngDevMode ? [void 0, { debugName: "heading" }] : /* istanbul ignore next */ []);
+	fadeIn = input(true, {
+		...ngDevMode ? { debugName: "fadeIn" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	role = computed(() => ROLES[this.variant()], ...ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []);
+	classes = computed(() => `${BASE_CLASSES} ${VARIANT_CLASSES[this.variant()]}${this.fadeIn() ? " ui-enter-fade" : ""}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiAlert,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: UiAlert,
+		isStandalone: true,
+		selector: "ui-alert",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fadeIn: {
+				classPropertyName: "fadeIn",
+				publicName: "fadeIn",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "animate.leave": "ui-leave-fade" },
+			properties: {
+				"class": "classes()",
+				"attr.role": "role()"
+			}
+		},
+		ngImport: i0,
+		template: `
+    @if (variant() === 'info') {
+      <svg
+        aria-hidden="true"
+        class="mt-px block flex-none stroke-current"
+        fill="none"
+        height="18"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.75"
+        viewBox="0 0 24 24"
+        width="18"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 16v-4" />
+        <path d="M12 8h.01" />
+      </svg>
+    } @else if (variant() === 'warning') {
       <svg
         aria-hidden="true"
         class="mt-px block flex-none stroke-(--negative)"
@@ -65,14 +127,37 @@ class UiAlert {
       }
       <span class="text-pretty" [class.text-(--muted-foreground)]="heading()"><ng-content /></span>
     </div>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAlert, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-alert',
-                    template: `
-    @if (variant() === 'warning') {
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiAlert,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-alert",
+			template: `
+    @if (variant() === 'info') {
+      <svg
+        aria-hidden="true"
+        class="mt-px block flex-none stroke-current"
+        fill="none"
+        height="18"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.75"
+        viewBox="0 0 24 24"
+        width="18"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 16v-4" />
+        <path d="M12 8h.01" />
+      </svg>
+    } @else if (variant() === 'warning') {
       <svg
         aria-hidden="true"
         class="mt-px block flex-none stroke-(--negative)"
@@ -113,17 +198,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       <span class="text-pretty" [class.text-(--muted-foreground)]="heading()"><ng-content /></span>
     </div>
   `,
-                    host: {
-                        'animate.leave': 'ui-leave-fade',
-                        '[class]': 'classes()',
-                        '[attr.role]': "variant() === 'warning' ? 'status' : 'alert'",
-                    },
-                }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], fadeIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "fadeIn", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+			host: {
+				"animate.leave": "ui-leave-fade",
+				"[class]": "classes()",
+				"[attr.role]": "role()"
+			}
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: false
+			}]
+		}],
+		fadeIn: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fadeIn",
+				required: false
+			}]
+		}]
+	}
+});
 export { ALERT_VARIANTS, UiAlert };
-//# sourceMappingURL=joanroucoux-cairn-ui-alert.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-alert.mjs.map

package/fesm2022/joanroucoux-cairn-ui-alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-alert.mjs","sources":["../../../projects/ui/alert/alert.ts","../../../projects/ui/alert/joanroucoux-cairn-ui-alert.ts"],"sourcesContent":["import { Component, booleanAttribute, computed, input } from '@angular/core';\n\nexport const ALERT_VARIANTS = ['error', 'warning'] as const;\nexport type AlertVariant = (typeof ALERT_VARIANTS)[number];\n\nconst BASE_CLASSES = 'flex items-start gap-2.5 text-left text-label';\n\nconst VARIANT_CLASSES: Record<AlertVariant, string> = {\n  error: 'rounded-control bg-(--card) px-3.5 py-3 shadow-[inset_0_0_0_1px_var(--border)]',\n  warning: 'text-(--foreground)',\n};\n\n/**\n * Inline message explaining a failure or a consequence: an icon, an optional heading and a text.\n * It fades in when it appears; set `[fadeIn]=\"false\"` on an alert that is part of the page as it\n * opens (an error state after a load), which shows without motion.\n *\n * @example\n * <ui-alert heading=\"Sign-in failed\">Try again.</ui-alert>\n */\n@Component({\n  selector: 'ui-alert',\n  template: `\n    @if (variant() === 'warning') {\n      <svg\n        aria-hidden=\"true\"\n        class=\"mt-px block flex-none stroke-(--negative)\"\n        fill=\"none\"\n        height=\"18\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"1.75\"\n        viewBox=\"0 0 24 24\"\n        width=\"18\"\n      >\n        <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n        <path d=\"M12 9v4\" />\n        <path d=\"M12 17h.01\" />\n      </svg>\n    } @else {\n      <svg\n        aria-hidden=\"true\"\n        class=\"block flex-none stroke-(--negative)\"\n        fill=\"none\"\n        height=\"18\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"1.75\"\n        viewBox=\"0 0 24 24\"\n        width=\"18\"\n        [class.mt-px]=\"heading()\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <line x1=\"12\" x2=\"12\" y1=\"8\" y2=\"12\" />\n        <line x1=\"12\" x2=\"12.01\" y1=\"16\" y2=\"16\" />\n      </svg>\n    }\n    <div class=\"flex flex-col gap-0.5\">\n      @if (heading()) {\n        <span class=\"font-medium\">{{ heading() }}</span>\n      }\n      <span class=\"text-pretty\" [class.text-(--muted-foreground)]=\"heading()\"><ng-content /></span>\n    </div>\n  `,\n  host: {\n    'animate.leave': 'ui-leave-fade',\n    '[class]': 'classes()',\n    '[attr.role]': \"variant() === 'warning' ? 'status' : 'alert'\",\n  },\n})\nexport class UiAlert {\n  readonly variant = input<AlertVariant>('error');\n  readonly heading = input<string>();\n  readonly fadeIn = input(true, { transform: booleanAttribute });\n\n  protected readonly classes = computed(\n    () => `${BASE_CLASSES} ${VARIANT_CLASSES[this.variant()]}${this.fadeIn() ? ' ui-enter-fade' : ''}`,\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAEa,cAAc,GAAG,CAAC,OAAO,EAAE,SAAS;AAGjD,MAAM,YAAY,GAAG,+CAA+C;AAEpE,MAAM,eAAe,GAAiC;AACpD,IAAA,KAAK,EAAE,gFAAgF;AACvF,IAAA,OAAO,EAAE,qBAAqB;CAC/B;AAED;;;;;;;AAOG;MAmDU,OAAO,CAAA;IACT,OAAO,GAAG,KAAK,CAAe,OAAO;gFAAC;AACtC,IAAA,OAAO,GAAG,KAAK;2FAAU;IACzB,MAAM,GAAG,KAAK,CAAC,IAAI,8EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAE3C,IAAA,OAAO,GAAG,QAAQ,CACnC,MAAM,CAAA,EAAG,YAAY,CAAA,CAAA,EAAI,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAA,EAAG,IAAI,CAAC,MAAM,EAAE,GAAG,gBAAgB,GAAG,EAAE,CAAA,CAAE;gFACnG;uGAPU,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,eAAA,EAAA,eAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,WAAA,EAAA,8CAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAhDR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAOU,OAAO,EAAA,UAAA,EAAA,CAAA;kBAlDnB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCT,EAAA,CAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,eAAe,EAAE,eAAe;AAChC,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,aAAa,EAAE,8CAA8C;AAC9D,qBAAA;AACF,iBAAA;;;ACrED;;AAEG;;;;"}
+{"version":3,"file":"joanroucoux-cairn-ui-alert.mjs","names":[],"sources":["../../../projects/ui/alert/alert.ts"],"sourcesContent":["import { Component, booleanAttribute, computed, input } from '@angular/core';\n\nexport const ALERT_VARIANTS = ['error', 'warning', 'info'] as const;\nexport type AlertVariant = (typeof ALERT_VARIANTS)[number];\n\nconst BASE_CLASSES = 'flex items-start gap-2.5 text-left text-label';\n\nconst VARIANT_CLASSES: Record<AlertVariant, string> = {\n  error: 'rounded-control bg-(--card) px-3.5 py-3 shadow-[inset_0_0_0_1px_var(--border)]',\n  warning: 'text-(--foreground)',\n  info: 'rounded-control bg-(--muted) p-3 text-(--foreground)',\n};\n\nconst ROLES: Record<AlertVariant, string> = { error: 'alert', warning: 'status', info: 'note' };\n\n/**\n * Inline message explaining a failure or a consequence, or static help with `info`: an icon, an optional heading and a text.\n * It fades in when it appears; set `[fadeIn]=\"false\"` on an alert that is part of the page as it\n * opens.\n *\n * @example\n * <ui-alert heading=\"Sign-in failed\">Try again.</ui-alert>\n */\n@Component({\n  selector: 'ui-alert',\n  template: `\n    @if (variant() === 'info') {\n      <svg\n        aria-hidden=\"true\"\n        class=\"mt-px block flex-none stroke-current\"\n        fill=\"none\"\n        height=\"18\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"1.75\"\n        viewBox=\"0 0 24 24\"\n        width=\"18\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <path d=\"M12 16v-4\" />\n        <path d=\"M12 8h.01\" />\n      </svg>\n    } @else if (variant() === 'warning') {\n      <svg\n        aria-hidden=\"true\"\n        class=\"mt-px block flex-none stroke-(--negative)\"\n        fill=\"none\"\n        height=\"18\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"1.75\"\n        viewBox=\"0 0 24 24\"\n        width=\"18\"\n      >\n        <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n        <path d=\"M12 9v4\" />\n        <path d=\"M12 17h.01\" />\n      </svg>\n    } @else {\n      <svg\n        aria-hidden=\"true\"\n        class=\"block flex-none stroke-(--negative)\"\n        fill=\"none\"\n        height=\"18\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"1.75\"\n        viewBox=\"0 0 24 24\"\n        width=\"18\"\n        [class.mt-px]=\"heading()\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <line x1=\"12\" x2=\"12\" y1=\"8\" y2=\"12\" />\n        <line x1=\"12\" x2=\"12.01\" y1=\"16\" y2=\"16\" />\n      </svg>\n    }\n    <div class=\"flex flex-col gap-0.5\">\n      @if (heading()) {\n        <span class=\"font-medium\">{{ heading() }}</span>\n      }\n      <span class=\"text-pretty\" [class.text-(--muted-foreground)]=\"heading()\"><ng-content /></span>\n    </div>\n  `,\n  host: {\n    'animate.leave': 'ui-leave-fade',\n    '[class]': 'classes()',\n    '[attr.role]': 'role()',\n  },\n})\nexport class UiAlert {\n  readonly variant = input<AlertVariant>('error');\n  readonly heading = input<string>();\n  readonly fadeIn = input(true, { transform: booleanAttribute });\n\n  protected readonly role = computed(() => ROLES[this.variant()]);\n\n  protected readonly classes = computed(\n    () => `${BASE_CLASSES} ${VARIANT_CLASSES[this.variant()]}${this.fadeIn() ? ' ui-enter-fade' : ''}`,\n  );\n}\n"],"mappings":";;AAEA,MAAa,iBAAiB;CAAC;CAAS;CAAW;AAAM;AAGzD,MAAM,eAAe;AAErB,MAAM,kBAAgD;CACpD,OAAO;CACP,SAAS;CACT,MAAM;AACP;AAED,MAAM,QAAsC;CAAE,OAAO;CAAS,SAAS;CAAU,MAAM;AAAM;AA4E7F,IAAa,UAAb,MAAa,QAAO;CACT,UAAU,MAAoB,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACtC,UAAU,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACzB,SAAS,MAAM,MAAI;EAAA,GAAA,YAAA,EAAA,WAAA,SAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAExC,OAAO,eAAe,MAAM,KAAK,QAAO,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAE5C,UAAU,eACrB,GAAG,aAAY,GAAI,gBAAgB,KAAK,QAAO,KAAM,KAAK,OAAM,IAAK,mBAAmB,MAC/F,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CATU,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAO,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAP,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAO,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,iBAAA,gBAAA;GAAA,YAAA;IAAA,SAAA;IAAA,aAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UAhER;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDT,UAAA;CAAA,CAAA;;AAOU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAO,YAAA,CAAA;EAlEnB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DV,MAAM;IACJ,iBAAiB;IACjB,WAAW;IACX,eAAe;GAChB;EACF,CAAA"}