@joanroucoux/cairn-ui 0.8.2 → 0.9.1

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

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-menu.mjs","sources":["../../../projects/ui/menu/menu.ts","../../../projects/ui/menu/joanroucoux-cairn-ui-menu.ts"],"sourcesContent":["import {\n  Component,\n  Directive,\n  ElementRef,\n  booleanAttribute,\n  computed,\n  contentChildren,\n  inject,\n  input,\n  numberAttribute,\n  signal,\n} from '@angular/core';\n\nconst MENU_CLASSES =\n  'm-0 min-w-44 p-1 rounded-container bg-(--elevated) shadow-[0_8px_24px_rgb(0_0_0/0.16),inset_0_0_0_1px_var(--border)] text-(--foreground) transition-[opacity,scale,overlay,display] transition-discrete duration-(--duration-fast) not-open:duration-[120ms] ease-out starting:open:opacity-0 starting:open:scale-(--enter-scale) opacity-0 scale-(--enter-scale) open:opacity-100 open:scale-100';\n\nconst SHEET_CLASSES =\n  'max-lg:fixed max-lg:inset-x-4 max-lg:top-auto max-lg:w-auto max-lg:bottom-[calc(76px+env(safe-area-inset-bottom))] max-lg:min-w-0 max-lg:p-1.5 max-lg:bg-(--card) max-lg:shadow-[0_12px_32px_rgb(0_0_0/0.2),inset_0_0_0_1px_var(--border)] max-lg:backdrop:bg-[rgb(0_0_0/0.36)] max-lg:transition-[opacity,translate,overlay,display] max-lg:scale-100 max-lg:translate-y-4 max-lg:open:translate-y-0 max-lg:starting:open:scale-100 max-lg:starting:open:translate-y-4 max-lg:motion-reduce:translate-y-0 max-lg:motion-reduce:starting:open:translate-y-0';\n\nconst SHEET_ITEM_CLASSES =\n  'flex w-full items-center gap-3 lg:pointer-fine:gap-2.5 min-h-12 lg:min-h-11 lg:pointer-fine:min-h-9 px-3 lg:pointer-fine:px-2.5 rounded-[calc(var(--radius-container)-6px)] lg:rounded-[calc(var(--radius-container)-4px)] text-body lg:pointer-fine:text-label text-left whitespace-nowrap hover:bg-(--glow) focus-visible:bg-(--glow) active:bg-(--soft) transition-[background-color] duration-(--duration-fast) ease-out outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) [:where(&>svg)]:size-5 [:where(&>svg)]:flex-none lg:[:where(&>svg)]:size-[18px] lg:pointer-fine:[:where(&>svg)]:size-4';\n\nconst ITEM_CLASSES =\n  'flex w-full items-center gap-3 pointer-fine:gap-2.5 min-h-11 pointer-fine:min-h-9 px-3 pointer-fine:px-2.5 rounded-[calc(var(--radius-container)-4px)] text-body pointer-fine:text-label text-left whitespace-nowrap hover:bg-(--glow) focus-visible:bg-(--glow) active:bg-(--soft) transition-[background-color] duration-(--duration-fast) ease-out outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) [:where(&>svg)]:size-[18px] [:where(&>svg)]:flex-none pointer-fine:[:where(&>svg)]:size-4';\n\nconst nextId = (() => {\n  let count = 0;\n\n  return () => `ui-menu-${++count}`;\n})();\n\n/**\n * One action of a `ui-menu`; `destructive` paints it in `--negative`.\n *\n * @example\n * <button uiMenuItem destructive (click)=\"remove()\">Delete the line</button>\n */\n@Directive({\n  selector: 'button[uiMenuItem]',\n  host: {\n    role: 'menuitem',\n    tabindex: '-1',\n    '[class]': 'classes()',\n    '(click)': 'onClick()',\n  },\n})\nexport class UiMenuItem {\n  readonly destructive = input(false, { transform: booleanAttribute });\n\n  readonly #host = inject<ElementRef<HTMLButtonElement>>(ElementRef).nativeElement;\n  readonly #menu = inject(UiMenu);\n\n  protected readonly classes = computed(\n    () => `${this.#menu.sheet() ? SHEET_ITEM_CLASSES : ITEM_CLASSES}${this.destructive() ? ' text-(--negative)' : ''}`,\n  );\n\n  focus(): void {\n    this.#host.focus();\n  }\n\n  hasFocus(): boolean {\n    return this.#host === document.activeElement;\n  }\n\n  protected onClick(): void {\n    this.#menu.close();\n  }\n}\n\n/**\n * Secondary actions menu, opened from its trigger through the native Popover API. With `sheet`, below\n * 64rem it opens as a bottom action sheet above the tab bar instead of beside its trigger, and\n * `heading` names what the actions apply to. `width` fixes the outer popover width in pixels (the sheet\n * always spans the screen below 64rem); without it the menu fits its content.\n *\n * @example\n * <button ui-button size=\"icon\" aria-label=\"More\" [uiMenuTrigger]=\"menu\">...</button>\n * <ui-menu #menu label=\"Line actions\">\n *   <button uiMenuItem (click)=\"edit()\">Edit</button>\n *   <button uiMenuItem destructive (click)=\"remove()\">Delete the line</button>\n * </ui-menu>\n */\n@Component({\n  selector: 'ui-menu',\n  template: `\n    @if (sheet() && heading()) {\n      <div aria-hidden=\"true\" class=\"text-label px-3 pt-2 pb-1.5 leading-[17px] text-(--muted-foreground) lg:hidden\">\n        {{ heading() }}\n      </div>\n    }\n    <ng-content />\n  `,\n  host: {\n    role: 'menu',\n    popover: 'auto',\n    '[id]': 'menuId',\n    '[style.--ui-menu-width]': 'widthVar()',\n    '[class]': 'classes()',\n    '[attr.aria-label]': 'label()',\n    '(toggle)': 'onToggle($event)',\n    '(keydown)': 'onKeydown($event)',\n  },\n})\nexport class UiMenu {\n  readonly label = input.required<string>();\n  readonly sheet = input(false, { transform: booleanAttribute });\n  readonly heading = input<string>();\n  readonly width = input<number | undefined, unknown>(undefined, { transform: numberAttribute });\n\n  readonly menuId = nextId();\n  readonly isOpen = signal(false);\n\n  protected readonly hasWidth = computed(() => Number.isFinite(this.width()));\n  protected readonly widthVar = computed(() => (this.hasWidth() ? `${this.width()}px` : null));\n  protected readonly classes = computed(() => {\n    const width = !this.hasWidth() ? '' : this.sheet() ? ' lg:w-(--ui-menu-width)' : ' w-(--ui-menu-width)';\n    return `${MENU_CLASSES}${this.sheet() ? ` ${SHEET_CLASSES}` : ''}${width}`;\n  });\n  protected readonly items = contentChildren(UiMenuItem);\n\n  readonly #host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  #trigger: HTMLElement | null = null;\n\n  open(trigger: HTMLElement): void {\n    this.#trigger = trigger;\n    this.isOpen.set(true);\n    if (typeof this.#host.showPopover === 'function') {\n      this.#host.showPopover();\n    }\n    if (this.#isSheet()) {\n      this.#host.style.position = '';\n      this.#host.style.top = '';\n      this.#host.style.left = '';\n      this.#host.style.right = '';\n      this.#host.style.bottom = '';\n    } else {\n      this.#position(trigger);\n    }\n    this.items()[0]?.focus();\n  }\n\n  close(): void {\n    const wasOpen = this.isOpen();\n\n    this.#applyClosed();\n\n    if (wasOpen && typeof this.#host.hidePopover === 'function') {\n      this.#host.hidePopover();\n    }\n  }\n\n  #applyClosed(): void {\n    this.isOpen.set(false);\n    this.#trigger?.focus();\n    this.#trigger = null;\n  }\n\n  protected onToggle(event: Event): void {\n    if ((event as ToggleEvent).newState === 'closed') {\n      this.#applyClosed();\n    }\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Tab' || event.key === 'Escape') {\n      event.preventDefault();\n      this.close();\n      return;\n    }\n\n    const items = this.items();\n    const currentIndex = items.findIndex((item) => item.hasFocus());\n    const lastIndex = items.length - 1;\n\n    let nextIndex: number | undefined;\n    switch (event.key) {\n      case 'ArrowDown':\n        nextIndex = currentIndex >= lastIndex ? 0 : currentIndex + 1;\n        break;\n      case 'ArrowUp':\n        nextIndex = currentIndex <= 0 ? lastIndex : currentIndex - 1;\n        break;\n      case 'Home':\n        nextIndex = 0;\n        break;\n      case 'End':\n        nextIndex = lastIndex;\n        break;\n    }\n\n    if (nextIndex === undefined) {\n      return;\n    }\n    event.preventDefault();\n    items[nextIndex]?.focus();\n  }\n\n  #isSheet(): boolean {\n    return this.sheet() && typeof window.matchMedia === 'function' && !window.matchMedia('(min-width: 64rem)').matches;\n  }\n\n  #position(trigger: HTMLElement): void {\n    const margin = 8;\n    const triggerRect = trigger.getBoundingClientRect();\n    const menuRect = { width: this.#host.offsetWidth, height: this.#host.offsetHeight };\n    const fitsBelow = window.innerHeight - triggerRect.bottom >= menuRect.height + margin;\n\n    const top = fitsBelow ? triggerRect.bottom + 4 : Math.max(margin, triggerRect.top - menuRect.height - 4);\n    const left = Math.min(\n      Math.max(triggerRect.right - menuRect.width, margin),\n      window.innerWidth - menuRect.width - margin,\n    );\n\n    this.#host.style.position = 'fixed';\n    this.#host.style.top = `${Math.min(top, window.innerHeight - menuRect.height - margin)}px`;\n    this.#host.style.left = `${left}px`;\n    this.#host.style.right = 'auto';\n    this.#host.style.bottom = 'auto';\n    this.#host.style.transformOrigin = fitsBelow ? 'top right' : 'bottom right';\n  }\n}\n\n/**\n * Opens a `ui-menu` from a trigger element and wires `aria-haspopup`, `aria-expanded` and\n * `aria-controls` on it.\n *\n * @example\n * <button ui-button size=\"icon\" aria-label=\"More\" [uiMenuTrigger]=\"menu\">...</button>\n */\n@Directive({\n  selector: '[uiMenuTrigger]',\n  host: {\n    'aria-haspopup': 'menu',\n    '[attr.aria-expanded]': 'uiMenuTrigger().isOpen()',\n    '[attr.aria-controls]': 'uiMenuTrigger().menuId',\n    '(click)': 'toggle()',\n  },\n})\nexport class UiMenuTrigger {\n  readonly uiMenuTrigger = input.required<UiMenu>();\n\n  readonly #host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n\n  protected toggle(): void {\n    const menu = this.uiMenuTrigger();\n\n    if (menu.isOpen()) {\n      menu.close();\n    } else {\n      menu.open(this.#host);\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"joanroucoux-cairn-ui-menu.mjs","names":[],"sources":["../../../projects/ui/menu/menu.ts"],"sourcesContent":["import {\n  Component,\n  Directive,\n  ElementRef,\n  booleanAttribute,\n  computed,\n  contentChildren,\n  inject,\n  input,\n  numberAttribute,\n  signal,\n} from '@angular/core';\n\nconst MENU_CLASSES =\n  'm-0 min-w-44 p-1 rounded-container bg-(--elevated) shadow-[0_8px_24px_rgb(0_0_0/0.16),inset_0_0_0_1px_var(--border)] text-(--foreground) transition-[opacity,scale,overlay,display] transition-discrete duration-(--duration-fast) not-open:duration-[120ms] ease-out starting:open:opacity-0 starting:open:scale-(--enter-scale) opacity-0 scale-(--enter-scale) open:opacity-100 open:scale-100';\n\nconst SHEET_CLASSES =\n  'max-lg:fixed max-lg:inset-x-4 max-lg:top-auto max-lg:w-auto max-lg:bottom-[calc(76px+env(safe-area-inset-bottom))] max-lg:min-w-0 max-lg:p-1.5 max-lg:bg-(--card) max-lg:shadow-[0_12px_32px_rgb(0_0_0/0.2),inset_0_0_0_1px_var(--border)] max-lg:backdrop:bg-[rgb(0_0_0/0.36)] max-lg:transition-[opacity,translate,overlay,display] max-lg:scale-100 max-lg:translate-y-4 max-lg:open:translate-y-0 max-lg:starting:open:scale-100 max-lg:starting:open:translate-y-4 max-lg:motion-reduce:translate-y-0 max-lg:motion-reduce:starting:open:translate-y-0';\n\nconst SHEET_ITEM_CLASSES =\n  'flex w-full items-center gap-3 lg:pointer-fine:gap-2.5 min-h-12 lg:min-h-11 lg:pointer-fine:min-h-9 px-3 lg:pointer-fine:px-2.5 rounded-[calc(var(--radius-container)-6px)] lg:rounded-[calc(var(--radius-container)-4px)] text-body lg:pointer-fine:text-label text-left whitespace-nowrap hover:bg-(--glow) focus-visible:bg-(--glow) active:bg-(--soft) transition-[background-color] duration-(--duration-fast) ease-out outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) [:where(&>svg)]:size-5 [:where(&>svg)]:flex-none lg:[:where(&>svg)]:size-[18px] lg:pointer-fine:[:where(&>svg)]:size-4';\n\nconst ITEM_CLASSES =\n  'flex w-full items-center gap-3 pointer-fine:gap-2.5 min-h-11 pointer-fine:min-h-9 px-3 pointer-fine:px-2.5 rounded-[calc(var(--radius-container)-4px)] text-body pointer-fine:text-label text-left whitespace-nowrap hover:bg-(--glow) focus-visible:bg-(--glow) active:bg-(--soft) transition-[background-color] duration-(--duration-fast) ease-out outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) [:where(&>svg)]:size-[18px] [:where(&>svg)]:flex-none pointer-fine:[:where(&>svg)]:size-4';\n\nconst CHECK_CLASSES =\n  \"after:ms-auto after:block after:h-3 after:w-1.5 after:flex-none after:rotate-45 after:border-r-2 after:border-b-2 after:border-current after:content-['']\";\n\nconst nextId = (() => {\n  let count = 0;\n\n  return () => `ui-menu-${++count}`;\n})();\n\n/**\n * One action of a `ui-menu`; `destructive` paints it in `--negative`. Giving it `checked` makes it a radio\n * choice (`menuitemradio`): the current one carries a check mark and `aria-checked=\"true\"`.\n *\n * @example\n * <button uiMenuItem destructive (click)=\"remove()\">Delete the line</button>\n * <button uiMenuItem [checked]=\"account() === 'pea'\" (click)=\"account.set('pea')\">Northwind PEA</button>\n */\n@Directive({\n  selector: 'button[uiMenuItem]',\n  host: {\n    '[attr.role]': 'role()',\n    '[attr.aria-checked]': 'checked() === undefined ? null : checked()',\n    tabindex: '-1',\n    '[class]': 'classes()',\n    '(click)': 'onClick()',\n  },\n})\nexport class UiMenuItem {\n  readonly destructive = input(false, { transform: booleanAttribute });\n  readonly checked = input<boolean>();\n\n  readonly #host = inject<ElementRef<HTMLButtonElement>>(ElementRef).nativeElement;\n  readonly #menu = inject(UiMenu);\n\n  protected readonly role = computed(() => (this.checked() === undefined ? 'menuitem' : 'menuitemradio'));\n\n  protected readonly classes = computed(\n    () =>\n      `${this.#menu.sheet() ? SHEET_ITEM_CLASSES : ITEM_CLASSES}${this.destructive() ? ' text-(--negative)' : ''}${this.checked() ? ` ${CHECK_CLASSES}` : ''}`,\n  );\n\n  focus(): void {\n    this.#host.focus();\n  }\n\n  hasFocus(): boolean {\n    return this.#host === document.activeElement;\n  }\n\n  protected onClick(): void {\n    this.#menu.close();\n  }\n}\n\n/**\n * Secondary actions menu, opened from its trigger through the native Popover API. With `sheet`, below\n * 64rem it opens as a bottom action sheet instead of beside its trigger, and `heading` names what\n * the actions apply to. `width` fixes the popover width in pixels; without it the menu fits its content.\n *\n * @example\n * <button ui-button size=\"icon\" aria-label=\"More\" [uiMenuTrigger]=\"menu\">...</button>\n * <ui-menu #menu label=\"Line actions\">\n *   <button uiMenuItem (click)=\"edit()\">Edit</button>\n *   <button uiMenuItem destructive (click)=\"remove()\">Delete the line</button>\n * </ui-menu>\n */\n@Component({\n  selector: 'ui-menu',\n  template: `\n    @if (sheet() && heading()) {\n      <div aria-hidden=\"true\" class=\"text-label px-3 pt-2 pb-1.5 leading-[17px] text-(--muted-foreground) lg:hidden\">\n        {{ heading() }}\n      </div>\n    }\n    <ng-content />\n  `,\n  host: {\n    role: 'menu',\n    popover: 'auto',\n    '[id]': 'menuId',\n    '[style.--ui-menu-width]': 'widthVar()',\n    '[class]': 'classes()',\n    '[attr.aria-label]': 'label()',\n    '(toggle)': 'onToggle($event)',\n    '(keydown)': 'onKeydown($event)',\n  },\n})\nexport class UiMenu {\n  readonly label = input.required<string>();\n  readonly sheet = input(false, { transform: booleanAttribute });\n  readonly heading = input<string>();\n  readonly width = input<number | undefined, unknown>(undefined, { transform: numberAttribute });\n\n  readonly menuId = nextId();\n  readonly isOpen = signal(false);\n\n  protected readonly hasWidth = computed(() => Number.isFinite(this.width()));\n  protected readonly widthVar = computed(() => (this.hasWidth() ? `${this.width()}px` : null));\n  protected readonly classes = computed(() => {\n    const width = !this.hasWidth() ? '' : this.sheet() ? ' lg:w-(--ui-menu-width)' : ' w-(--ui-menu-width)';\n    return `${MENU_CLASSES}${this.sheet() ? ` ${SHEET_CLASSES}` : ''}${width}`;\n  });\n  protected readonly items = contentChildren(UiMenuItem);\n\n  readonly #host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  #trigger: HTMLElement | null = null;\n\n  open(trigger: HTMLElement): void {\n    this.#trigger = trigger;\n    this.isOpen.set(true);\n    if (typeof this.#host.showPopover === 'function') {\n      this.#host.showPopover();\n    }\n    if (this.#isSheet()) {\n      this.#host.style.position = '';\n      this.#host.style.top = '';\n      this.#host.style.left = '';\n      this.#host.style.right = '';\n      this.#host.style.bottom = '';\n    } else {\n      this.#position(trigger);\n    }\n    (this.items().find((item) => item.checked()) ?? this.items()[0])?.focus();\n  }\n\n  close(): void {\n    const wasOpen = this.isOpen();\n\n    this.#applyClosed();\n\n    if (wasOpen && typeof this.#host.hidePopover === 'function') {\n      this.#host.hidePopover();\n    }\n  }\n\n  #applyClosed(): void {\n    this.isOpen.set(false);\n    this.#trigger?.focus();\n    this.#trigger = null;\n  }\n\n  protected onToggle(event: Event): void {\n    if ((event as ToggleEvent).newState === 'closed') {\n      this.#applyClosed();\n    }\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Tab' || event.key === 'Escape') {\n      event.preventDefault();\n      this.close();\n      return;\n    }\n\n    const items = this.items();\n    const currentIndex = items.findIndex((item) => item.hasFocus());\n    const lastIndex = items.length - 1;\n\n    let nextIndex: number | undefined;\n    switch (event.key) {\n      case 'ArrowDown':\n        nextIndex = currentIndex >= lastIndex ? 0 : currentIndex + 1;\n        break;\n      case 'ArrowUp':\n        nextIndex = currentIndex <= 0 ? lastIndex : currentIndex - 1;\n        break;\n      case 'Home':\n        nextIndex = 0;\n        break;\n      case 'End':\n        nextIndex = lastIndex;\n        break;\n    }\n\n    if (nextIndex === undefined) {\n      return;\n    }\n    event.preventDefault();\n    items[nextIndex]?.focus();\n  }\n\n  #isSheet(): boolean {\n    return this.sheet() && typeof window.matchMedia === 'function' && !window.matchMedia('(min-width: 64rem)').matches;\n  }\n\n  #position(trigger: HTMLElement): void {\n    const margin = 8;\n    const triggerRect = trigger.getBoundingClientRect();\n    const menuRect = { width: this.#host.offsetWidth, height: this.#host.offsetHeight };\n    const fitsBelow = window.innerHeight - triggerRect.bottom >= menuRect.height + margin;\n\n    const top = fitsBelow ? triggerRect.bottom + 4 : Math.max(margin, triggerRect.top - menuRect.height - 4);\n    const left = Math.min(\n      Math.max(triggerRect.right - menuRect.width, margin),\n      window.innerWidth - menuRect.width - margin,\n    );\n\n    this.#host.style.position = 'fixed';\n    this.#host.style.top = `${Math.min(top, window.innerHeight - menuRect.height - margin)}px`;\n    this.#host.style.left = `${left}px`;\n    this.#host.style.right = 'auto';\n    this.#host.style.bottom = 'auto';\n    this.#host.style.transformOrigin = fitsBelow ? 'top right' : 'bottom right';\n  }\n}\n\n/**\n * Opens a `ui-menu` from a trigger element and wires its ARIA attributes.\n *\n * @example\n * <button ui-button size=\"icon\" aria-label=\"More\" [uiMenuTrigger]=\"menu\">...</button>\n */\n@Directive({\n  selector: '[uiMenuTrigger]',\n  host: {\n    'aria-haspopup': 'menu',\n    '[attr.aria-expanded]': 'uiMenuTrigger().isOpen()',\n    '[attr.aria-controls]': 'uiMenuTrigger().menuId',\n    '(click)': 'toggle()',\n  },\n})\nexport class UiMenuTrigger {\n  readonly uiMenuTrigger = input.required<UiMenu>();\n\n  readonly #host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n\n  protected toggle(): void {\n    const menu = this.uiMenuTrigger();\n\n    if (menu.isOpen()) {\n      menu.close();\n    } else {\n      menu.open(this.#host);\n    }\n  }\n}\n"],"mappings":"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"}

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

@@ -1,48 +1,88 @@
-import * as i0 from '@angular/core';
-import { input, computed, Component } from '@angular/core';
-
-/** Track thicknesses. `MeterSize` is derived from this tuple. */
-const METER_SIZES = ['md', 'sm'];
+import * as i0 from "@angular/core";
+import { Component, computed, input } from "@angular/core";
+const METER_SIZES = ["md", "sm"];
 const TRACK_CLASSES = {
-    md: 'h-1.5',
-    sm: 'h-1',
+	md: "h-1.5",
+	sm: "h-1"
 };
-/** Ramp step used to paint the fill. `MeterTone` is derived from this tuple. */
-const METER_TONES = [1, 2, 3, 4, 5, 6];
+const METER_TONES = [
+	1,
+	2,
+	3,
+	4,
+	5,
+	6
+];
 const TONE_CLASSES = {
-    1: 'bg-(--ramp-1)',
-    2: 'bg-(--ramp-2)',
-    3: 'bg-(--ramp-3)',
-    4: 'bg-(--ramp-4)',
-    5: 'bg-(--ramp-5)',
-    6: 'bg-(--ramp-6)',
+	1: "bg-(--ramp-1)",
+	2: "bg-(--ramp-2)",
+	3: "bg-(--ramp-3)",
+	4: "bg-(--ramp-4)",
+	5: "bg-(--ramp-5)",
+	6: "bg-(--ramp-6)"
 };
-/**
- * Proportion of a whole, drawn as a single bar. One bar per category, never a stacked
- * strip: without hue to separate segments, length has to do the work alone.
- *
- * @example
- * <ui-meter [value]="0.463" label="Funds" valueText="46.3% - 128,656.00 EUR" [tone]="1" />
- */
-class UiMeter {
-    value = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    label = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    valueText = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
-    tone = input(1, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    trackClasses = computed(() => TRACK_CLASSES[this.size()], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
-    percent = computed(() => Math.min(100, Math.max(0, this.value() * 100)), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
-    fillClasses = computed(() => `h-full rounded-pill ${TONE_CLASSES[this.tone()]}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fillClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiMeter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiMeter, isStandalone: true, selector: "ui-meter", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: true, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+var UiMeter = class UiMeter {
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	valueText = input.required(...ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []);
+	tone = input(1, ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	trackClasses = computed(() => TRACK_CLASSES[this.size()], ...ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []);
+	percent = computed(() => Math.min(100, Math.max(0, this.value() * 100)), ...ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []);
+	fillClasses = computed(() => `h-full rounded-pill ${TONE_CLASSES[this.tone()]}`, ...ngDevMode ? [{ debugName: "fillClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiMeter,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: UiMeter,
+		isStandalone: true,
+		selector: "ui-meter",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			valueText: {
+				classPropertyName: "valueText",
+				publicName: "valueText",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			tone: {
+				classPropertyName: "tone",
+				publicName: "tone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
     <div
       class="rounded-pill w-full overflow-hidden bg-(--muted)"
       role="meter"
@@ -55,13 +95,20 @@ class UiMeter {
     >
       <div data-testid="meter-fill" [class]="fillClasses()" [style.width.%]="percent()"></div>
     </div>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiMeter, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-meter',
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiMeter,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-meter",
+			template: `
     <div
       class="rounded-pill w-full overflow-hidden bg-(--muted)"
       role="meter"
@@ -74,13 +121,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     >
       <div data-testid="meter-fill" [class]="fillClasses()" [style.width.%]="percent()"></div>
     </div>
-  `,
-                }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: true }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		valueText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueText",
+				required: true
+			}]
+		}],
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}]
+	}
+});
 export { METER_SIZES, METER_TONES, UiMeter };
-//# sourceMappingURL=joanroucoux-cairn-ui-meter.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-meter.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-meter.mjs","sources":["../../../projects/ui/meter/meter.ts","../../../projects/ui/meter/joanroucoux-cairn-ui-meter.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\n/** Track thicknesses. `MeterSize` is derived from this tuple. */\nexport const METER_SIZES = ['md', 'sm'] as const;\nexport type MeterSize = (typeof METER_SIZES)[number];\n\nconst TRACK_CLASSES: Record<MeterSize, string> = {\n  md: 'h-1.5',\n  sm: 'h-1',\n};\n\n/** Ramp step used to paint the fill. `MeterTone` is derived from this tuple. */\nexport const METER_TONES = [1, 2, 3, 4, 5, 6] as const;\nexport type MeterTone = (typeof METER_TONES)[number];\n\nconst TONE_CLASSES: Record<MeterTone, string> = {\n  1: 'bg-(--ramp-1)',\n  2: 'bg-(--ramp-2)',\n  3: 'bg-(--ramp-3)',\n  4: 'bg-(--ramp-4)',\n  5: 'bg-(--ramp-5)',\n  6: 'bg-(--ramp-6)',\n};\n\n/**\n * Proportion of a whole, drawn as a single bar. One bar per category, never a stacked\n * strip: without hue to separate segments, length has to do the work alone.\n *\n * @example\n * <ui-meter [value]=\"0.463\" label=\"Funds\" valueText=\"46.3% - 128,656.00 EUR\" [tone]=\"1\" />\n */\n@Component({\n  selector: 'ui-meter',\n  template: `\n    <div\n      class=\"rounded-pill w-full overflow-hidden bg-(--muted)\"\n      role=\"meter\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-valuemax]=\"1\"\n      [attr.aria-valuemin]=\"0\"\n      [attr.aria-valuenow]=\"value()\"\n      [attr.aria-valuetext]=\"valueText()\"\n      [class]=\"trackClasses()\"\n    >\n      <div data-testid=\"meter-fill\" [class]=\"fillClasses()\" [style.width.%]=\"percent()\"></div>\n    </div>\n  `,\n})\nexport class UiMeter {\n  readonly value = input.required<number>();\n  readonly label = input.required<string>();\n  readonly valueText = input.required<string>();\n  readonly tone = input<MeterTone>(1);\n  readonly size = input<MeterSize>('md');\n\n  protected readonly trackClasses = computed(() => TRACK_CLASSES[this.size()]);\n\n  protected readonly percent = computed(() => Math.min(100, Math.max(0, this.value() * 100)));\n\n  protected readonly fillClasses = computed(() => `h-full rounded-pill ${TONE_CLASSES[this.tone()]}`);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;MACa,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI;AAGtC,MAAM,aAAa,GAA8B;AAC/C,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,KAAK;CACV;AAED;AACO,MAAM,WAAW,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;AAG5C,MAAM,YAAY,GAA8B;AAC9C,IAAA,CAAC,EAAE,eAAe;AAClB,IAAA,CAAC,EAAE,eAAe;AAClB,IAAA,CAAC,EAAE,eAAe;AAClB,IAAA,CAAC,EAAE,eAAe;AAClB,IAAA,CAAC,EAAE,eAAe;AAClB,IAAA,CAAC,EAAE,eAAe;CACnB;AAED;;;;;;AAMG;MAkBU,OAAO,CAAA;IACT,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU;IAChC,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU;IAChC,SAAS,GAAG,KAAK,CAAC,QAAQ;kFAAU;IACpC,IAAI,GAAG,KAAK,CAAY,CAAC;6EAAC;IAC1B,IAAI,GAAG,KAAK,CAAY,IAAI;6EAAC;AAEnB,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;qFAAC;IAEzD,OAAO,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,CAAC,CAAC;gFAAC;AAExE,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAA,oBAAA,EAAuB,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA,CAAE;oFAAC;uGAXxF,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,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAfR;;;;;;;;;;;;;AAaT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAEU,OAAO,EAAA,UAAA,EAAA,CAAA;kBAjBnB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;AAaT,EAAA,CAAA;AACF,iBAAA;;;AC/CD;;AAEG;;;;"}
+{"version":3,"file":"joanroucoux-cairn-ui-meter.mjs","names":[],"sources":["../../../projects/ui/meter/meter.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\n/** Track thicknesses. */\nexport const METER_SIZES = ['md', 'sm'] as const;\nexport type MeterSize = (typeof METER_SIZES)[number];\n\nconst TRACK_CLASSES: Record<MeterSize, string> = {\n  md: 'h-1.5',\n  sm: 'h-1',\n};\n\n/** Ramp step used to paint the fill. */\nexport const METER_TONES = [1, 2, 3, 4, 5, 6] as const;\nexport type MeterTone = (typeof METER_TONES)[number];\n\nconst TONE_CLASSES: Record<MeterTone, string> = {\n  1: 'bg-(--ramp-1)',\n  2: 'bg-(--ramp-2)',\n  3: 'bg-(--ramp-3)',\n  4: 'bg-(--ramp-4)',\n  5: 'bg-(--ramp-5)',\n  6: 'bg-(--ramp-6)',\n};\n\n/**\n * Proportion of a whole, drawn as a single bar. One bar per category, never a stacked strip.\n *\n * @example\n * <ui-meter [value]=\"0.463\" label=\"Funds\" valueText=\"46.3% - 128,656.00 EUR\" [tone]=\"1\" />\n */\n@Component({\n  selector: 'ui-meter',\n  template: `\n    <div\n      class=\"rounded-pill w-full overflow-hidden bg-(--muted)\"\n      role=\"meter\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-valuemax]=\"1\"\n      [attr.aria-valuemin]=\"0\"\n      [attr.aria-valuenow]=\"value()\"\n      [attr.aria-valuetext]=\"valueText()\"\n      [class]=\"trackClasses()\"\n    >\n      <div data-testid=\"meter-fill\" [class]=\"fillClasses()\" [style.width.%]=\"percent()\"></div>\n    </div>\n  `,\n})\nexport class UiMeter {\n  readonly value = input.required<number>();\n  readonly label = input.required<string>();\n  readonly valueText = input.required<string>();\n  readonly tone = input<MeterTone>(1);\n  readonly size = input<MeterSize>('md');\n\n  protected readonly trackClasses = computed(() => TRACK_CLASSES[this.size()]);\n\n  protected readonly percent = computed(() => Math.min(100, Math.max(0, this.value() * 100)));\n\n  protected readonly fillClasses = computed(() => `h-full rounded-pill ${TONE_CLASSES[this.tone()]}`);\n}\n"],"mappings":";;AAGA,MAAa,cAAc,CAAC,MAAM,IAAI;AAGtC,MAAM,gBAA2C;CAC/C,IAAI;CACJ,IAAI;AACL;AAGD,MAAa,cAAc;CAAC;CAAG;CAAG;CAAG;CAAG;CAAG;AAAC;AAG5C,MAAM,eAA0C;CAC9C,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACJ;AAyBD,IAAa,UAAb,MAAa,QAAO;CACT,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,YAAY,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CACpC,OAAO,MAAiB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC1B,OAAO,MAAiB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEnB,eAAe,eAAe,cAAc,KAAK,KAAI,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEzD,UAAU,eAAe,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,MAAK,IAAK,GAAG,CAAC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAExE,cAAc,eAAe,uBAAuB,aAAa,KAAK,KAAI,MAAM,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAXxF,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,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;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,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UAfR;;;;;;;;;;;;;;EAaT,UAAA;CAAA,CAAA;;AAEU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAO,YAAA,CAAA;EAjBnB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;;;;;;;;;;;;;;EAcX,CAAA"}