@hyalo/angular 0.1.0 → 0.3.1

package/CHANGELOG.md

@@ -1,41 +1,95 @@
-# Changelog
-
-All notable changes to `@hyalo/angular` are listed here. The format follows [Keep a Changelog](https://keepachangelog.com), and versions follow [Semantic Versioning](https://semver.org). Until 1.0, a minor version can include breaking changes.
-
-## 0.1.0 (unreleased)
-
-The first release.
-
-### Foundations (`@hyalo/angular`)
-
-- `provideHyalo()` for global config, with the material, size and tone axes.
-- `HyFidelity`, which steps the glass down on devices or settings where blur would hurt.
-- `HyMotion` with motion presets, a spring helper and an optional, lazily loaded GSAP.
-- The glass material directive and interaction state.
-
-### Components
-
-Each one is standalone and has its own entry point.
-
-- `@hyalo/angular/accordion`: `hy-accordion` and `hy-accordion-item` on Angular Aria.
-- `@hyalo/angular/button`: `hyButton` for buttons and link buttons, with an inline loading spinner.
-- `@hyalo/angular/card`: `hy-card` with media, header, body and footer slots.
-- `@hyalo/angular/choice`: `hy-checkbox`, `hy-radio-group` with `hy-radio`, and `hy-switch`.
-- `@hyalo/angular/dialog`: the `HyDialog` and `HyDrawer` services, content parts, a confirm helper, side drawers and bottom sheets.
-- `@hyalo/angular/field`: `hy-field` and `hyInput` for text fields, with Signal Forms support.
-- `@hyalo/angular/icon`: `hy-icon` with a name registry and Lucide-compatible data.
-- `@hyalo/angular/interaction`: reveal, tilt, magnetic and ripple directives.
-- `@hyalo/angular/navbar`: `hy-navbar` with a collapsible menu and scroll behaviour.
-- `@hyalo/angular/overlay`: logical placement helpers for CDK overlays.
-- `@hyalo/angular/popover`: `hyTooltip` and `hyPopover`, loading the CDK overlay on first open.
-- `@hyalo/angular/segmented`: `hy-segmented`.
-- `@hyalo/angular/select`: `hy-select` on the Angular Aria combobox and listbox.
-- `@hyalo/angular/tabs`: `hy-tabs` on Angular Aria.
-- `@hyalo/angular/theme`: `HyPalette` for switching palettes at runtime.
-- `@hyalo/angular/toast`: the `HyToaster` service with swipe to dismiss.
-
-### Styles
-
-- `styles/hyalo.css` with everything, or `styles/hyalo-core.css` plus one file per overlay from `styles/overlays/`.
-- Design tokens, light and dark themes, and component tokens, all in cascade layers.
-- Six on-demand palettes in `styles/palettes/`: aurora, ember, orchid, ocean, rose and graphite.
+# Changelog
+
+All notable changes to `@hyalo/angular` are listed here. The format follows [Keep a Changelog](https://keepachangelog.com), and versions follow [Semantic Versioning](https://semver.org). Until 1.0, a minor version can include breaking changes.
+
+## 0.3.1 (2026-11-15)
+
+### App shell and data
+
+- Added sidebar, breadcrumb, dropdown and navigation menus, command palette,
+  pagination, tables, charts, sparklines, statistics, progress, alerts and lists.
+- Added filters, copy controls, number tickers, progressive blur and composed blocks.
+- Separated core and motion entry points; chart and syntax engines remain optional.
+
+### Polish and fixes
+
+- Sorted documentation navigation and completed all component catalog previews.
+- Refined dashboard spacing, sidebar surfaces, collapsed navigation and responsive layout.
+- Matched input focus rings to rounded field surfaces and standardized SVG chevrons.
+- Fixed Signal Forms integration, command dismissal and exact code-block whitespace.
+- Batched pointer and WebGL geometry reads, canceled pending indicator work on destroy,
+  cached shader uniforms and released WebGL resources explicitly.
+- Extracted larger templates and styles and aligned lint checks with package boundaries.
+
+## 0.2.0
+
+### Showcase and marketing
+
+- Rebuilt chapter navigation with explicit smooth scrolling, nested reading panes,
+  stable selection, history and focus handling, and optional sticky links.
+
+- Hotspots can open anchored, solid detail panels with Escape dismissal and focus
+  return, and support labelled or compact pin modes.
+- Carousel hides its native scrollbar by default, offers dot/counter pagination,
+  slide/fade modes and optional loop navigation. Scroll position updates use cached
+  dimensions and one animation-frame callback instead of scanning every slide.
+- Skeletons offer shimmer, pulse and static modes.
+- Docs code panels have HTML, TypeScript and conditional CSS tabs, keyboard navigation,
+  copy feedback without highlighting the preview card. Their sources are generated
+  from live demos; import snippets have their own copy buttons.
+- Added selectable `HyChip` controls, custom carousel navigation templates, icon and
+  hidden button modes, three navigation positions, and passive catalog previews.
+- Fixed loop-mode scroll feedback, first-frame popover placement, accordion padding
+  jumps and mesh animation visibility. Mesh pause/resume retains its animation position.
+- Fixed chapter links resolving against the app base URL instead of the current route;
+  selection now follows clicks and fragment history without leaving the page.
+
+- Added independently importable carousel, lightbox/gallery, image compare, marquee,
+  split-text reveal, refraction, scene hotspot, mesh background, timeline, stepper,
+  badge/chip, avatar/group and skeleton components.
+- Added button group, link, divider, aspect-ratio frame, chapter navigation and
+  scroll-to-top helpers. Toggle groups use the existing segmented control.
+- Carousel supports native touch inertia, mouse drag velocity, keyboard navigation
+  and RTL. Lightbox reuses CDK dialog focus trapping, dismissal and focus restore.
+- Stepper gates incomplete steps, retains form DOM and focuses the selected header.
+- Refraction shares one WebGL context across image-backed surfaces on high fidelity,
+  with CSS glass fallbacks. Decorative motion follows fidelity and reduced motion.
+- Added 19 lazy docs pages with live demos, API tables and accessibility notes.
+
+## 0.1.0
+
+The first release.
+
+### Foundations (`@hyalo/angular`)
+
+- `provideHyalo()` for global config, with the material, size and tone axes.
+- `HyFidelity`, which steps the glass down on devices or settings where blur would hurt.
+- `HyMotion` with motion presets, a spring helper and an optional, lazily loaded GSAP.
+- The glass material directive and interaction state.
+
+### Components
+
+Each one is standalone and has its own entry point.
+
+- `@hyalo/angular/accordion`: `hy-accordion` and `hy-accordion-item` on Angular Aria.
+- `@hyalo/angular/button`: `hyButton` for buttons and link buttons, with an inline loading spinner.
+- `@hyalo/angular/card`: `hy-card` with media, header, body and footer slots.
+- `@hyalo/angular/choice`: `hy-checkbox`, `hy-radio-group` with `hy-radio`, and `hy-switch`.
+- `@hyalo/angular/dialog`: the `HyDialog` and `HyDrawer` services, content parts, a confirm helper, side drawers and bottom sheets.
+- `@hyalo/angular/field`: `hy-field` and `hyInput` for text fields, with Signal Forms support.
+- `@hyalo/angular/icon`: `hy-icon` with a name registry and Lucide-compatible data.
+- `@hyalo/angular/interaction`: reveal, tilt, magnetic and ripple directives.
+- `@hyalo/angular/navbar`: `hy-navbar` with a collapsible menu and scroll behaviour.
+- `@hyalo/angular/overlay`: logical placement helpers for CDK overlays.
+- `@hyalo/angular/popover`: `hyTooltip` and `hyPopover`, loading the CDK overlay on first open.
+- `@hyalo/angular/segmented`: `hy-segmented`.
+- `@hyalo/angular/select`: `hy-select` on the Angular Aria combobox and listbox.
+- `@hyalo/angular/tabs`: `hy-tabs` on Angular Aria.
+- `@hyalo/angular/theme`: `HyPalette` for switching palettes at runtime.
+- `@hyalo/angular/toast`: the `HyToaster` service with swipe to dismiss.
+
+### Styles
+
+- `styles/hyalo.css` with everything, or `styles/hyalo-core.css` plus one file per overlay from `styles/overlays/`.
+- Design tokens, light and dark themes, and component tokens, all in cascade layers.
+- Six on-demand palettes in `styles/palettes/`: aurora, ember, orchid, ocean, rose and graphite.

package/README.md

@@ -1,32 +1,46 @@
-<p align="center">
-  <img src="https://raw.githubusercontent.com/HamedRsl/Hyalo/main/.github/assets/hyalo-logo.jpg" alt="Hyalo, Angular UI kit" width="240" />
-</p>
-
-# @hyalo/angular
-
-Liquid glass components for Angular, built on Angular Aria and the CDK. Signal based, zoneless, server-render safe, accessible, and ready for RTL.
-
-```sh
-npm install @hyalo/angular @angular/cdk @angular/aria
-```
-
-Add the stylesheet before your own styles in `angular.json`:
-
-```json
-"styles": ["node_modules/@hyalo/angular/styles/hyalo.css", "src/styles.css"]
-```
-
-`hyalo.css` includes every overlay's styles. To leave out the ones you don't use, list `hyalo-core.css` plus the files you need from `styles/overlays/` (`select.css`, `popover.css`, `dialog.css`, `toast.css`) instead.
-
-Then import the standalone components you need. Each one has its own entry point, so a lazy route only loads what it uses:
-
-```ts
-import { HyButton } from '@hyalo/angular/button';
-import { HY_CARD } from '@hyalo/angular/card';
-```
-
-`@hyalo/angular` itself holds the shared foundations, such as `provideHyalo()`, `HyFidelity` and `HyMotion`.
-
-Configuration, theming, RTL, motion and the full component list are in the [repository README](https://github.com/HamedRsl/Hyalo#readme).
-
-MIT licensed.
+<p align="center">
+  <img src="https://raw.githubusercontent.com/HamedRsl/Hyalo/main/.github/assets/hyalo-logo.jpg" alt="Hyalo, Angular UI kit" width="240" />
+</p>
+
+# @hyalo/angular
+
+Liquid glass components for Angular, built on Angular Aria and the CDK. Signal based, zoneless, server-render safe, accessible, and ready for RTL.
+
+```sh
+npm install @hyalo/angular
+```
+
+Add the stylesheet before your own styles in `angular.json`:
+
+```json
+"styles": ["node_modules/@hyalo/angular/styles/hyalo.css", "src/styles.css"]
+```
+
+`hyalo.css` includes every overlay's styles. To leave out the ones you don't use, list `hyalo-core.css` plus the files you need from `styles/overlays/` (`select.css`, `popover.css`, `dialog.css`, `toast.css`) instead.
+
+Then import the standalone components you need. Each one has its own entry point, so a lazy route only loads what it uses:
+
+```ts
+import { HyButton } from '@hyalo/angular/button';
+import { HY_CARD } from '@hyalo/angular/card';
+```
+
+`@hyalo/angular` itself holds the shared foundations, such as `provideHyalo()`, `HyFidelity` and `HyMotion`.
+
+Version 0.2 adds carousel, gallery and lightbox, image comparison, marquee, split text,
+refraction, scene hotspots, mesh backgrounds, timeline, stepper, badges, avatars and
+skeletons. Each has its own package entry point, such as `@hyalo/angular/carousel`.
+Button groups, links, dividers, aspect-ratio frames, chapter navigation and scroll-to-top
+controls are included too. The existing segmented control provides toggle groups.
+
+Refraction uses a supplied same-origin or CORS-enabled image and one shared WebGL
+context on high fidelity. CSS glass remains available on other tiers or when WebGL
+cannot run. The gallery uses the existing dialog overlay styles.
+
+Version 0.3 adds app navigation, tables, optional Chart.js charts, filters, command search,
+statistics, copy controls, and composed blocks. Import foundations from
+`@hyalo/angular/core` and optional motion from `@hyalo/angular/motion`.
+
+Configuration, theming, RTL, motion and the full component list are in the [repository README](https://github.com/HamedRsl/Hyalo#readme).
+
+MIT licensed.

package/fesm2022/hyalo-angular-accordion.mjs

@@ -3,8 +3,8 @@ import { ChangeDetectionStrategy, Component, booleanAttribute, input, model, num
 import * as i1 from "@angular/aria/accordion";
 import { AccordionGroup, AccordionPanel, AccordionTrigger } from "@angular/aria/accordion";
 import { HyIcon } from "@hyalo/angular/icon";
-import * as i2 from "@hyalo/angular";
-import { HyMaterialDirective } from "@hyalo/angular";
+import * as i2 from "@hyalo/angular/core";
+import { HyMaterialDirective } from "@hyalo/angular/core";
 var HyAccordionItem = class HyAccordionItem {
 	heading = input("", ...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
 	headingLevel = input(3, {
@@ -66,8 +66,8 @@ var HyAccordionItem = class HyAccordionItem {
 			classAttribute: "hy-accordion-item"
 		},
 		ngImport: i0,
-		template: "<div class=\"hy-accordion__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"hy-accordion__trigger\"\r\n    ngAccordionTrigger\r\n    [panel]=\"panel\"\r\n    [(expanded)]=\"expanded\"\r\n    [disabled]=\"disabled()\"\r\n  >\r\n    <span class=\"hy-accordion__label\">\r\n      {{ heading() }}\r\n      <ng-content select=\"[hyAccordionHeading]\" />\r\n    </span>\r\n    <hy-icon class=\"hy-accordion__chevron\" name=\"chevron-down\" />\r\n  </button>\r\n</div>\r\n<div ngAccordionPanel #panel=\"ngAccordionPanel\" class=\"hy-accordion__panel\">\r\n  <div class=\"hy-accordion__body\">\r\n    <div class=\"hy-accordion__content\"><ng-content /></div>\r\n  </div>\r\n</div>\r\n",
-		styles: [":host{display:block}:host+:host{border-block-start:1px solid var(--hy-accordion-divider, var(--hy-line))}.hy-accordion__heading{margin:0}.hy-accordion__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--hy-space-4);inline-size:100%;min-block-size:var(--hy-accordion-trigger-height, 3.5rem);padding:var(--hy-space-3) 0;border:0;background:transparent;color:var(--hy-ink);font:inherit;font-size:var(--hy-step-1);font-weight:580;text-align:start;cursor:pointer}.hy-accordion__trigger:focus-visible{outline:none;border-radius:var(--hy-radius-s);box-shadow:var(--hy-focus-ring)}.hy-accordion__trigger[aria-disabled=true]{opacity:.45;cursor:not-allowed}.hy-accordion__chevron{flex:none;color:var(--hy-ink-3);transition:rotate var(--hy-dur-settle) var(--hy-ease-out)}:host([data-open]) .hy-accordion__chevron{rotate:180deg}.hy-accordion__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--hy-dur-settle) var(--hy-ease-out)}:host([data-open]) .hy-accordion__body{grid-template-rows:1fr}.hy-accordion__content{min-block-size:0;overflow:hidden;color:var(--hy-ink-2)}:host([data-open]) .hy-accordion__content{padding-block-end:var(--hy-space-5)}.hy-accordion__panel[inert] .hy-accordion__content{visibility:hidden;transition:visibility 0s linear var(--hy-dur-settle)}@media print{.hy-accordion__body{grid-template-rows:1fr}.hy-accordion__panel[inert] .hy-accordion__content{visibility:visible}}\n"],
+		template: "<div class=\"hy-accordion__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"hy-accordion__trigger\"\r\n    ngAccordionTrigger\r\n    [panel]=\"panel\"\r\n    [(expanded)]=\"expanded\"\r\n    [disabled]=\"disabled()\"\r\n  >\r\n    <span class=\"hy-accordion__label\">\r\n      {{ heading() }}\r\n      <ng-content select=\"[hyAccordionHeading]\" />\r\n    </span>\r\n    <hy-icon class=\"hy-accordion__chevron\" name=\"chevron-down\" />\r\n  </button>\r\n</div>\r\n<div ngAccordionPanel #panel=\"ngAccordionPanel\" class=\"hy-accordion__panel\">\r\n  <div class=\"hy-accordion__body\">\r\n    <div class=\"hy-accordion__content\">\r\n      <div class=\"hy-accordion__inner\"><ng-content /></div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+		styles: [":host{display:block}:host+:host{border-block-start:1px solid var(--hy-accordion-divider, var(--hy-line))}.hy-accordion__heading{margin:0}.hy-accordion__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--hy-space-4);inline-size:100%;min-block-size:var(--hy-accordion-trigger-height, 3.5rem);padding:var(--hy-space-3) 0;border:0;background:transparent;color:var(--hy-ink);font:inherit;font-size:var(--hy-step-1);font-weight:580;text-align:start;cursor:pointer}.hy-accordion__trigger:focus-visible{outline:none;border-radius:var(--hy-radius-s);box-shadow:var(--hy-focus-ring)}.hy-accordion__trigger[aria-disabled=true]{opacity:.45;cursor:not-allowed}.hy-accordion__chevron{--hy-icon-size: 1rem;transform-origin:center;flex:none;color:var(--hy-ink-3);transition:rotate var(--hy-dur-quick) var(--hy-ease-out)}:host([data-open]) .hy-accordion__chevron{rotate:180deg}.hy-accordion__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--hy-dur-quick) var(--hy-ease-out)}:host([data-open]) .hy-accordion__body{grid-template-rows:1fr}.hy-accordion__content{min-block-size:0;overflow:hidden;color:var(--hy-ink-2)}.hy-accordion__inner{display:flow-root;padding-block-end:var(--hy-space-5)}.hy-accordion__panel[inert] .hy-accordion__content{visibility:hidden;transition:visibility 0s linear var(--hy-dur-quick)}@media print{.hy-accordion__body{grid-template-rows:1fr}.hy-accordion__panel[inert] .hy-accordion__content{visibility:visible}}@media(prefers-reduced-motion:reduce){.hy-accordion__chevron{transition:none}}\n"],
 		dependencies: [
 			{
 				kind: "directive",
@@ -124,8 +124,8 @@ i0.ɵɵngDeclareClassMetadata({
 				class: "hy-accordion-item",
 				"[attr.data-open]": "expanded() || null"
 			},
-			template: "<div class=\"hy-accordion__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"hy-accordion__trigger\"\r\n    ngAccordionTrigger\r\n    [panel]=\"panel\"\r\n    [(expanded)]=\"expanded\"\r\n    [disabled]=\"disabled()\"\r\n  >\r\n    <span class=\"hy-accordion__label\">\r\n      {{ heading() }}\r\n      <ng-content select=\"[hyAccordionHeading]\" />\r\n    </span>\r\n    <hy-icon class=\"hy-accordion__chevron\" name=\"chevron-down\" />\r\n  </button>\r\n</div>\r\n<div ngAccordionPanel #panel=\"ngAccordionPanel\" class=\"hy-accordion__panel\">\r\n  <div class=\"hy-accordion__body\">\r\n    <div class=\"hy-accordion__content\"><ng-content /></div>\r\n  </div>\r\n</div>\r\n",
-			styles: [":host{display:block}:host+:host{border-block-start:1px solid var(--hy-accordion-divider, var(--hy-line))}.hy-accordion__heading{margin:0}.hy-accordion__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--hy-space-4);inline-size:100%;min-block-size:var(--hy-accordion-trigger-height, 3.5rem);padding:var(--hy-space-3) 0;border:0;background:transparent;color:var(--hy-ink);font:inherit;font-size:var(--hy-step-1);font-weight:580;text-align:start;cursor:pointer}.hy-accordion__trigger:focus-visible{outline:none;border-radius:var(--hy-radius-s);box-shadow:var(--hy-focus-ring)}.hy-accordion__trigger[aria-disabled=true]{opacity:.45;cursor:not-allowed}.hy-accordion__chevron{flex:none;color:var(--hy-ink-3);transition:rotate var(--hy-dur-settle) var(--hy-ease-out)}:host([data-open]) .hy-accordion__chevron{rotate:180deg}.hy-accordion__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--hy-dur-settle) var(--hy-ease-out)}:host([data-open]) .hy-accordion__body{grid-template-rows:1fr}.hy-accordion__content{min-block-size:0;overflow:hidden;color:var(--hy-ink-2)}:host([data-open]) .hy-accordion__content{padding-block-end:var(--hy-space-5)}.hy-accordion__panel[inert] .hy-accordion__content{visibility:hidden;transition:visibility 0s linear var(--hy-dur-settle)}@media print{.hy-accordion__body{grid-template-rows:1fr}.hy-accordion__panel[inert] .hy-accordion__content{visibility:visible}}\n"]
+			template: "<div class=\"hy-accordion__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"hy-accordion__trigger\"\r\n    ngAccordionTrigger\r\n    [panel]=\"panel\"\r\n    [(expanded)]=\"expanded\"\r\n    [disabled]=\"disabled()\"\r\n  >\r\n    <span class=\"hy-accordion__label\">\r\n      {{ heading() }}\r\n      <ng-content select=\"[hyAccordionHeading]\" />\r\n    </span>\r\n    <hy-icon class=\"hy-accordion__chevron\" name=\"chevron-down\" />\r\n  </button>\r\n</div>\r\n<div ngAccordionPanel #panel=\"ngAccordionPanel\" class=\"hy-accordion__panel\">\r\n  <div class=\"hy-accordion__body\">\r\n    <div class=\"hy-accordion__content\">\r\n      <div class=\"hy-accordion__inner\"><ng-content /></div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+			styles: [":host{display:block}:host+:host{border-block-start:1px solid var(--hy-accordion-divider, var(--hy-line))}.hy-accordion__heading{margin:0}.hy-accordion__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--hy-space-4);inline-size:100%;min-block-size:var(--hy-accordion-trigger-height, 3.5rem);padding:var(--hy-space-3) 0;border:0;background:transparent;color:var(--hy-ink);font:inherit;font-size:var(--hy-step-1);font-weight:580;text-align:start;cursor:pointer}.hy-accordion__trigger:focus-visible{outline:none;border-radius:var(--hy-radius-s);box-shadow:var(--hy-focus-ring)}.hy-accordion__trigger[aria-disabled=true]{opacity:.45;cursor:not-allowed}.hy-accordion__chevron{--hy-icon-size: 1rem;transform-origin:center;flex:none;color:var(--hy-ink-3);transition:rotate var(--hy-dur-quick) var(--hy-ease-out)}:host([data-open]) .hy-accordion__chevron{rotate:180deg}.hy-accordion__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--hy-dur-quick) var(--hy-ease-out)}:host([data-open]) .hy-accordion__body{grid-template-rows:1fr}.hy-accordion__content{min-block-size:0;overflow:hidden;color:var(--hy-ink-2)}.hy-accordion__inner{display:flow-root;padding-block-end:var(--hy-space-5)}.hy-accordion__panel[inert] .hy-accordion__content{visibility:hidden;transition:visibility 0s linear var(--hy-dur-quick)}@media print{.hy-accordion__body{grid-template-rows:1fr}.hy-accordion__panel[inert] .hy-accordion__content{visibility:visible}}@media(prefers-reduced-motion:reduce){.hy-accordion__chevron{transition:none}}\n"]
 		}]
 	}],
 	propDecorators: {

package/fesm2022/hyalo-angular-accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"hyalo-angular-accordion.mjs","names":[],"sources":["../../../projects/hyalo/accordion/accordion.ts","../../../projects/hyalo/accordion/accordion-item.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  booleanAttribute,\r\n  input,\r\n  model,\r\n  numberAttribute,\r\n} from '@angular/core';\r\nimport { AccordionGroup, AccordionPanel, AccordionTrigger } from '@angular/aria/accordion';\r\nimport { HyIcon } from '@hyalo/angular/icon';\r\n\r\nimport { HyMaterialDirective } from '@hyalo/angular';\r\n\r\n/**\r\n * One collapsible section. The panel content stays in the DOM while closed\r\n * (marked `inert`), so in-page search and FAQ structured data still see it.\r\n */\r\n@Component({\r\n  selector: 'hy-accordion-item',\r\n  imports: [AccordionTrigger, AccordionPanel, HyIcon],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'hy-accordion-item',\r\n    '[attr.data-open]': 'expanded() || null',\r\n  },\r\n  templateUrl: './accordion-item.html',\r\n  styleUrl: './accordion.css',\r\n})\r\nexport class HyAccordionItem {\r\n  /** Text of the header button. */\r\n  readonly heading = input('');\r\n  /** Heading level of the header, 2 to 6. Pick the one that fits the page outline. */\r\n  readonly headingLevel = input(3, { transform: numberAttribute });\r\n  /** Whether the section is open. Two-way bindable. */\r\n  readonly expanded = model(false);\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n}\r\n\r\n/**\r\n * A stack of collapsible sections on Angular Aria. Arrow keys move between\r\n * headers, Home and End jump to the ends, Enter or Space toggles.\r\n *\r\n * ```html\r\n * <hy-accordion>\r\n *   <hy-accordion-item heading=\"How long does delivery take?\">Three to five working days.</hy-accordion-item>\r\n *   <hy-accordion-item heading=\"Can I return it?\">Within 30 days, free of charge.</hy-accordion-item>\r\n * </hy-accordion>\r\n * ```\r\n *\r\n * Only one section is open at a time unless `multiple` is set. Opening and\r\n * closing animate the height with CSS grid, which costs no layout script.\r\n */\r\n@Component({\r\n  selector: 'hy-accordion',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  hostDirectives: [\r\n    { directive: AccordionGroup, inputs: ['multiExpandable: multiple', 'disabled'] },\r\n    { directive: HyMaterialDirective, inputs: ['hyMaterial: material'] },\r\n  ],\r\n  host: { class: 'hy-accordion' },\r\n  template: `<ng-content />`,\r\n  styles: `\r\n    :host {\r\n      display: block;\r\n      border-radius: var(--hy-radius-l);\r\n      padding-inline: var(--hy-space-5);\r\n    }\r\n  `,\r\n})\r\nexport class HyAccordion {}\r\n\r\n/** Everything needed to build an accordion. */\r\nexport const HY_ACCORDION = [HyAccordion, HyAccordionItem] as const;\r\n","<div class=\"hy-accordion__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"hy-accordion__trigger\"\r\n    ngAccordionTrigger\r\n    [panel]=\"panel\"\r\n    [(expanded)]=\"expanded\"\r\n    [disabled]=\"disabled()\"\r\n  >\r\n    <span class=\"hy-accordion__label\">\r\n      {{ heading() }}\r\n      <ng-content select=\"[hyAccordionHeading]\" />\r\n    </span>\r\n    <hy-icon class=\"hy-accordion__chevron\" name=\"chevron-down\" />\r\n  </button>\r\n</div>\r\n<div ngAccordionPanel #panel=\"ngAccordionPanel\" class=\"hy-accordion__panel\">\r\n  <div class=\"hy-accordion__body\">\r\n    <div class=\"hy-accordion__content\"><ng-content /></div>\r\n  </div>\r\n</div>\r\n"],"mappings":"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"}
+{"version":3,"file":"hyalo-angular-accordion.mjs","names":[],"sources":["../../../projects/hyalo/accordion/accordion.ts","../../../projects/hyalo/accordion/accordion-item.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  booleanAttribute,\r\n  input,\r\n  model,\r\n  numberAttribute,\r\n} from '@angular/core';\r\nimport { AccordionGroup, AccordionPanel, AccordionTrigger } from '@angular/aria/accordion';\r\nimport { HyIcon } from '@hyalo/angular/icon';\r\n\r\nimport { HyMaterialDirective } from '@hyalo/angular/core';\r\n\r\n/**\r\n * One collapsible section. The panel content stays in the DOM while closed\r\n * (marked `inert`), so in-page search and FAQ structured data still see it.\r\n */\r\n@Component({\r\n  selector: 'hy-accordion-item',\r\n  imports: [AccordionTrigger, AccordionPanel, HyIcon],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'hy-accordion-item',\r\n    '[attr.data-open]': 'expanded() || null',\r\n  },\r\n  templateUrl: './accordion-item.html',\r\n  styleUrl: './accordion.css',\r\n})\r\nexport class HyAccordionItem {\r\n  /** Text of the header button. */\r\n  readonly heading = input('');\r\n  /** Heading level of the header, 2 to 6. Pick the one that fits the page outline. */\r\n  readonly headingLevel = input(3, { transform: numberAttribute });\r\n  /** Whether the section is open. Two-way bindable. */\r\n  readonly expanded = model(false);\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n}\r\n\r\n/**\r\n * A stack of collapsible sections on Angular Aria. Arrow keys move between\r\n * headers, Home and End jump to the ends, Enter or Space toggles.\r\n *\r\n * ```html\r\n * <hy-accordion>\r\n *   <hy-accordion-item heading=\"How long does delivery take?\">Three to five working days.</hy-accordion-item>\r\n *   <hy-accordion-item heading=\"Can I return it?\">Within 30 days, free of charge.</hy-accordion-item>\r\n * </hy-accordion>\r\n * ```\r\n *\r\n * Only one section is open at a time unless `multiple` is set. Opening and\r\n * closing animate the height with CSS grid, which costs no layout script.\r\n */\r\n@Component({\r\n  selector: 'hy-accordion',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  hostDirectives: [\r\n    { directive: AccordionGroup, inputs: ['multiExpandable: multiple', 'disabled'] },\r\n    { directive: HyMaterialDirective, inputs: ['hyMaterial: material'] },\r\n  ],\r\n  host: { class: 'hy-accordion' },\r\n  template: `<ng-content />`,\r\n  styles: `\r\n    :host {\r\n      display: block;\r\n      border-radius: var(--hy-radius-l);\r\n      padding-inline: var(--hy-space-5);\r\n    }\r\n  `,\r\n})\r\nexport class HyAccordion {}\r\n\r\n/** Everything needed to build an accordion. */\r\nexport const HY_ACCORDION = [HyAccordion, HyAccordionItem] as const;\r\n","<div class=\"hy-accordion__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"hy-accordion__trigger\"\r\n    ngAccordionTrigger\r\n    [panel]=\"panel\"\r\n    [(expanded)]=\"expanded\"\r\n    [disabled]=\"disabled()\"\r\n  >\r\n    <span class=\"hy-accordion__label\">\r\n      {{ heading() }}\r\n      <ng-content select=\"[hyAccordionHeading]\" />\r\n    </span>\r\n    <hy-icon class=\"hy-accordion__chevron\" name=\"chevron-down\" />\r\n  </button>\r\n</div>\r\n<div ngAccordionPanel #panel=\"ngAccordionPanel\" class=\"hy-accordion__panel\">\r\n  <div class=\"hy-accordion__body\">\r\n    <div class=\"hy-accordion__content\">\r\n      <div class=\"hy-accordion__inner\"><ng-content /></div>\r\n    </div>\r\n  </div>\r\n</div>\r\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-alert.mjs

@@ -0,0 +1,171 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, input, model, output } from "@angular/core";
+var HyAlert = class HyAlert {
+	heading = input("", ...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	tone = input("info", ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+	announce = input(false, {
+		...ngDevMode ? { debugName: "announce" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	dismissible = input(false, {
+		...ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	dismissLabel = input("Dismiss message", ...ngDevMode ? [{ debugName: "dismissLabel" }] : /* istanbul ignore next */ []);
+	visible = model(true, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	dismissed = output();
+	dismiss() {
+		this.visible.set(false);
+		this.dismissed.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyAlert,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyAlert,
+		isStandalone: true,
+		selector: "hy-alert",
+		inputs: {
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tone: {
+				classPropertyName: "tone",
+				publicName: "tone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			announce: {
+				classPropertyName: "announce",
+				publicName: "announce",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dismissible: {
+				classPropertyName: "dismissible",
+				publicName: "dismissible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dismissLabel: {
+				classPropertyName: "dismissLabel",
+				publicName: "dismissLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			visible: {
+				classPropertyName: "visible",
+				publicName: "visible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			visible: "visibleChange",
+			dismissed: "dismissed"
+		},
+		host: { properties: {
+			"hidden": "!visible()",
+			"attr.data-tone": "tone()"
+		} },
+		ngImport: i0,
+		template: "@if (visible()) {\r\n  <section [attr.role]=\"announce() ? (tone() === 'danger' ? 'alert' : 'status') : null\">\r\n    <div>\r\n      @if (heading()) {\r\n        <strong>{{ heading() }}</strong>\r\n      }\r\n      <div><ng-content /></div>\r\n    </div>\r\n    @if (dismissible()) {\r\n      <button type=\"button\" [attr.aria-label]=\"dismissLabel()\" (click)=\"dismiss()\">\r\n        <span aria-hidden=\"true\">×</span>\r\n      </button>\r\n    }\r\n  </section>\r\n}\r\n",
+		styles: [":host{--alert-color: var(--hy-primary);display:block;color:var(--hy-ink)}:host([hidden]){display:none}:host([data-tone=\"success\"]){--alert-color: var(--hy-success)}:host([data-tone=\"warning\"]){--alert-color: var(--hy-warning)}:host([data-tone=\"danger\"]){--alert-color: var(--hy-danger)}section{display:flex;gap:1rem;justify-content:space-between;padding:1rem;border:1px solid var(--hy-line);border-inline-start:3px solid var(--alert-color);border-radius:var(--hy-radius-m);background:var(--hy-surface-1)}strong{display:block;margin-block-end:.25rem}button{flex:none;min-inline-size:44px;block-size:44px;border:0;border-radius:var(--hy-radius-s);color:var(--hy-ink);background:transparent;font:inherit;font-size:1.5rem;cursor:pointer}button:hover{background:var(--hy-surface-3)}:is(button,a,input):focus-visible{outline:2px solid var(--hy-primary);outline-offset:3px}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyAlert,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-alert",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[hidden]": "!visible()",
+				"[attr.data-tone]": "tone()"
+			},
+			template: "@if (visible()) {\r\n  <section [attr.role]=\"announce() ? (tone() === 'danger' ? 'alert' : 'status') : null\">\r\n    <div>\r\n      @if (heading()) {\r\n        <strong>{{ heading() }}</strong>\r\n      }\r\n      <div><ng-content /></div>\r\n    </div>\r\n    @if (dismissible()) {\r\n      <button type=\"button\" [attr.aria-label]=\"dismissLabel()\" (click)=\"dismiss()\">\r\n        <span aria-hidden=\"true\">×</span>\r\n      </button>\r\n    }\r\n  </section>\r\n}\r\n",
+			styles: [":host{--alert-color: var(--hy-primary);display:block;color:var(--hy-ink)}:host([hidden]){display:none}:host([data-tone=\"success\"]){--alert-color: var(--hy-success)}:host([data-tone=\"warning\"]){--alert-color: var(--hy-warning)}:host([data-tone=\"danger\"]){--alert-color: var(--hy-danger)}section{display:flex;gap:1rem;justify-content:space-between;padding:1rem;border:1px solid var(--hy-line);border-inline-start:3px solid var(--alert-color);border-radius:var(--hy-radius-m);background:var(--hy-surface-1)}strong{display:block;margin-block-end:.25rem}button{flex:none;min-inline-size:44px;block-size:44px;border:0;border-radius:var(--hy-radius-s);color:var(--hy-ink);background:transparent;font:inherit;font-size:1.5rem;cursor:pointer}button:hover{background:var(--hy-surface-3)}:is(button,a,input):focus-visible{outline:2px solid var(--hy-primary);outline-offset:3px}\n"]
+		}]
+	}],
+	propDecorators: {
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: false
+			}]
+		}],
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}],
+		announce: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "announce",
+				required: false
+			}]
+		}],
+		dismissible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissible",
+				required: false
+			}]
+		}],
+		dismissLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissLabel",
+				required: false
+			}]
+		}],
+		visible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "visible",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["visibleChange"]
+		}],
+		dismissed: [{
+			type: i0.Output,
+			args: ["dismissed"]
+		}]
+	}
+});
+export { HyAlert };
+
+//# sourceMappingURL=hyalo-angular-alert.mjs.map

package/fesm2022/hyalo-angular-alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-alert.mjs","names":[],"sources":["../../../projects/hyalo/alert/alert.ts","../../../projects/hyalo/alert/alert.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  booleanAttribute,\r\n  input,\r\n  model,\r\n  output,\r\n} from '@angular/core';\r\n@Component({\r\n  selector: 'hy-alert',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './alert.html',\r\n  styleUrl: './alert.css',\r\n  host: { '[hidden]': '!visible()', '[attr.data-tone]': 'tone()' },\r\n})\r\nexport class HyAlert {\r\n  readonly heading = input('');\r\n  readonly tone = input<'info' | 'success' | 'warning' | 'danger'>('info');\r\n  readonly announce = input(false, { transform: booleanAttribute });\r\n  readonly dismissible = input(false, { transform: booleanAttribute });\r\n  readonly dismissLabel = input('Dismiss message');\r\n  readonly visible = model(true);\r\n  readonly dismissed = output<void>();\r\n  dismiss(): void {\r\n    this.visible.set(false);\r\n    this.dismissed.emit();\r\n  }\r\n}\r\n","@if (visible()) {\r\n  <section [attr.role]=\"announce() ? (tone() === 'danger' ? 'alert' : 'status') : null\">\r\n    <div>\r\n      @if (heading()) {\r\n        <strong>{{ heading() }}</strong>\r\n      }\r\n      <div><ng-content /></div>\r\n    </div>\r\n    @if (dismissible()) {\r\n      <button type=\"button\" [attr.aria-label]=\"dismissLabel()\" (click)=\"dismiss()\">\r\n        <span aria-hidden=\"true\">×</span>\r\n      </button>\r\n    }\r\n  </section>\r\n}\r\n"],"mappings":";;AAeA,IAAa,UAAb,MAAa,QAAO;CACT,UAAU,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACnB,OAAO,MAAiD,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC/D,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACrD,cAAc,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,cAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACxD,eAAe,MAAM,mBAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CACvC,UAAU,MAAM,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACrB,YAAY,OAAM;CAC3B,UAAO;EACL,KAAK,QAAQ,IAAI,KAAK;EACtB,KAAK,UAAU,KAAI;CACrB;CAXW,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,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,SAAA;GAAA,WAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,UAAA;GAAA,kBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UCfpB;EAeA,QAAA,CAAA,42BAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADAa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAO,YAAA,CAAA;EAPnB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAU,iBACH,wBAAwB;GAAM,MAGzC;IAAE,YAAY;IAAc,oBAAoB;GAAQ;GAAE,UAAA;GAAA,QAAA,CAAA,42BAAA;EAAA,CAAA"}

package/fesm2022/hyalo-angular-aspect-ratio.mjs

@@ -0,0 +1,64 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, numberAttribute } from "@angular/core";
+var HyAspectRatio = class HyAspectRatio {
+	ratio = input(16 / 9, {
+		...ngDevMode ? { debugName: "ratio" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	safeRatio = computed(() => Number.isFinite(this.ratio()) && this.ratio() > 0 ? this.ratio() : 16 / 9, ...ngDevMode ? [{ debugName: "safeRatio" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyAspectRatio,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyAspectRatio,
+		isStandalone: true,
+		selector: "hy-aspect-ratio",
+		inputs: { ratio: {
+			classPropertyName: "ratio",
+			publicName: "ratio",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "style.aspect-ratio": "safeRatio()" } },
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: [":host{display:grid;overflow:clip;border-radius:var(--hy-radius-m)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyAspectRatio,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-aspect-ratio",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[style.aspect-ratio]": "safeRatio()" },
+			template: "<ng-content />",
+			styles: [":host{display:grid;overflow:clip;border-radius:var(--hy-radius-m)}\n"]
+		}]
+	}],
+	propDecorators: { ratio: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "ratio",
+			required: false
+		}]
+	}] }
+});
+export { HyAspectRatio };
+
+//# sourceMappingURL=hyalo-angular-aspect-ratio.mjs.map

package/fesm2022/hyalo-angular-aspect-ratio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-aspect-ratio.mjs","names":[],"sources":["../../../projects/hyalo/aspect-ratio/aspect-ratio.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  input,\r\n  numberAttribute,\r\n} from '@angular/core';\r\n@Component({\r\n  selector: 'hy-aspect-ratio',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: { '[style.aspect-ratio]': 'safeRatio()' },\r\n  template: '<ng-content />',\r\n  styleUrl: './aspect-ratio.css',\r\n})\r\nexport class HyAspectRatio {\r\n  readonly ratio = input(16 / 9, { transform: numberAttribute });\r\n  protected readonly safeRatio = computed(() =>\r\n    Number.isFinite(this.ratio()) && this.ratio() > 0 ? this.ratio() : 16 / 9,\r\n  );\r\n}\r\n"],"mappings":";;AAcA,IAAa,gBAAb,MAAa,cAAa;CACf,QAAQ,MAAM,KAAK,GAAC;EAAA,GAAA,YAAA,EAAA,WAAA,QAAA,+BAAA,CAAA;EAAI,WAAW;CAAe,CAAA;CACxC,YAAY,eAC7B,OAAO,SAAS,KAAK,MAAK,CAAE,KAAK,KAAK,MAAK,IAAK,IAAI,KAAK,MAAK,IAAK,KAAK,GACzE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAJU,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAa,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAb,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAa,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,OAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,sBAAA,cAAA,EAAA;EAAA,UAAA;EAAA,UAHd;EAAgB,UAAA;EAAA,QAAA,CAAA,sEAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAGf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAa,YAAA,CAAA;EAPzB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAiB,iBACV,wBAAwB;GAAM,MACzC,EAAE,wBAAwB,cAAa;GAAE,UACrC;GAAgB,QAAA,CAAA,sEAAA;EAAA,CAAA"}