@joanroucoux/cairn-ui 0.8.2 → 0.9.1

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

@@ -1,73 +1,121 @@
-import * as i0 from '@angular/core';
-import { input, booleanAttribute, model, viewChildren, computed, Component } from '@angular/core';
-import { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';
-
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, computed, input, model, viewChildren } from "@angular/core";
+import { holdTransitionsUntilRendered } from "@joanroucoux/cairn-ui/motion";
 const nextId = (() => {
-    let count = 0;
-    return () => `ui-segmented-${++count}`;
+	let count = 0;
+	return () => `ui-segmented-${++count}`;
 })();
 const OPTION_CLASSES = "relative z-10 flex-1 cursor-pointer px-3 text-label font-medium transition-[scale] duration-(--duration-press) ease-out after:absolute after:inset-x-0 after:top-1/2 after:h-(--row-min) after:-translate-y-1/2 after:content-[''] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) active:scale-(--press-scale)";
-const SEGMENTED_SIZES = ['md', 'sm'];
+const SEGMENTED_SIZES = ["md", "sm"];
 const SIZE_CLASSES = {
-    md: 'h-10 pointer-fine:h-8',
-    sm: 'h-10 pointer-fine:h-[30px]',
+	md: "h-10 pointer-fine:h-8",
+	sm: "h-10 pointer-fine:h-[30px]"
 };
-const SELECTED_CLASSES = 'text-(--foreground)';
-const UNSELECTED_CLASSES = 'text-(--muted-foreground) hover:text-(--foreground)';
-/**
- * Exclusive choice within a small, known set: a time range, a unit, a mode. The selected option's
- * background is a single thumb that slides under it in `transform`, instead of being redrawn.
- *
- * @example
- * <ui-segmented [options]="ranges" label="Time range" [(value)]="range" />
- */
-class UiSegmented {
-    options = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    label = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    showLabel = input(false, { ...(ngDevMode ? { debugName: "showLabel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    labelId = nextId();
-    value = model.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    radios = viewChildren('radio', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "radios" }] : /* istanbul ignore next */ []));
-    thumbIndex = computed(() => {
-        const index = this.options().findIndex((option) => option.value === this.value());
-        return index === -1 ? 0 : index + 1;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "thumbIndex" }] : /* istanbul ignore next */ []));
-    constructor() {
-        holdTransitionsUntilRendered();
-    }
-    optionClasses(optionValue) {
-        return `${OPTION_CLASSES} ${SIZE_CLASSES[this.size()]} ${optionValue === this.value() ? SELECTED_CLASSES : UNSELECTED_CLASSES}`;
-    }
-    tabIndexFor(optionValue) {
-        const opts = this.options();
-        const tabStopValue = opts.some((option) => option.value === this.value()) ? this.value() : opts[0]?.value;
-        return optionValue === tabStopValue ? 0 : -1;
-    }
-    select(optionValue) {
-        this.value.set(optionValue);
-    }
-    onKeydown(event) {
-        const delta = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[event.key];
-        if (delta === undefined) {
-            return;
-        }
-        event.preventDefault();
-        const opts = this.options();
-        const currentIndex = opts.findIndex((option) => option.value === this.value());
-        const nextIndex = (currentIndex + delta + opts.length) % opts.length;
-        const next = opts[nextIndex];
-        this.value.set(next.value);
-        this.radios()[nextIndex]?.nativeElement.focus();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiSegmented, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiSegmented, isStandalone: true, selector: "ui-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "radios", predicate: ["radio"], descendants: true, isSignal: true }], ngImport: i0, template: `
+const SELECTED_CLASSES = "text-(--foreground)";
+const UNSELECTED_CLASSES = "text-(--muted-foreground) hover:text-(--foreground)";
+var UiSegmented = class UiSegmented {
+	options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	showLabel = input(false, {
+		...ngDevMode ? { debugName: "showLabel" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	labelId = nextId();
+	value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	radios = viewChildren("radio", ...ngDevMode ? [{ debugName: "radios" }] : /* istanbul ignore next */ []);
+	thumbIndex = computed(() => {
+		const index = this.options().findIndex((option) => option.value === this.value());
+		return index === -1 ? 0 : index + 1;
+	}, ...ngDevMode ? [{ debugName: "thumbIndex" }] : /* istanbul ignore next */ []);
+	constructor() {
+		holdTransitionsUntilRendered();
+	}
+	optionClasses(optionValue) {
+		return `${OPTION_CLASSES} ${SIZE_CLASSES[this.size()]} ${optionValue === this.value() ? SELECTED_CLASSES : UNSELECTED_CLASSES}`;
+	}
+	tabIndexFor(optionValue) {
+		const opts = this.options();
+		return optionValue === (opts.some((option) => option.value === this.value()) ? this.value() : opts[0]?.value) ? 0 : -1;
+	}
+	select(optionValue) {
+		this.value.set(optionValue);
+	}
+	onKeydown(event) {
+		const delta = {
+			ArrowRight: 1,
+			ArrowDown: 1,
+			ArrowLeft: -1,
+			ArrowUp: -1
+		}[event.key];
+		if (delta === void 0) return;
+		event.preventDefault();
+		const opts = this.options();
+		const nextIndex = (opts.findIndex((option) => option.value === this.value()) + delta + opts.length) % opts.length;
+		const next = opts[nextIndex];
+		this.value.set(next.value);
+		this.radios()[nextIndex]?.nativeElement.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiSegmented,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: UiSegmented,
+		isStandalone: true,
+		selector: "ui-segmented",
+		inputs: {
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			showLabel: {
+				classPropertyName: "showLabel",
+				publicName: "showLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		viewQueries: [{
+			propertyName: "radios",
+			predicate: ["radio"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
     <div [class]="showLabel() ? 'flex flex-col gap-1.5' : ''">
       @if (showLabel()) {
         <span class="text-label leading-[17px] font-medium text-(--muted-foreground)" [id]="labelId">{{
@@ -107,13 +155,20 @@ class UiSegmented {
         }
       </div>
     </div>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiSegmented, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-segmented',
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiSegmented,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-segmented",
+			template: `
     <div [class]="showLabel() ? 'flex flex-col gap-1.5' : ''">
       @if (showLabel()) {
         <span class="text-label leading-[17px] font-medium text-(--muted-foreground)" [id]="labelId">{{
@@ -153,13 +208,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }
       </div>
     </div>
-  `,
-                }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radios: [{ type: i0.ViewChildren, args: ['radio', { isSignal: true }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		showLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLabel",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		radios: [{
+			type: i0.ViewChildren,
+			args: ["radio", { isSignal: true }]
+		}]
+	}
+});
 export { SEGMENTED_SIZES, UiSegmented };
-//# sourceMappingURL=joanroucoux-cairn-ui-segmented.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-segmented.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-segmented.mjs","sources":["../../../projects/ui/segmented/segmented.ts","../../../projects/ui/segmented/joanroucoux-cairn-ui-segmented.ts"],"sourcesContent":["import { Component, ElementRef, booleanAttribute, computed, input, model, viewChildren } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\nconst nextId = (() => {\n  let count = 0;\n\n  return () => `ui-segmented-${++count}`;\n})();\n\nexport type SegmentedOption = {\n  value: string;\n  label: string;\n};\n\nconst OPTION_CLASSES =\n  \"relative z-10 flex-1 cursor-pointer px-3 text-label font-medium transition-[scale] duration-(--duration-press) ease-out after:absolute after:inset-x-0 after:top-1/2 after:h-(--row-min) after:-translate-y-1/2 after:content-[''] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) active:scale-(--press-scale)\";\n\nexport const SEGMENTED_SIZES = ['md', 'sm'] as const;\nexport type SegmentedSize = (typeof SEGMENTED_SIZES)[number];\n\nconst SIZE_CLASSES: Record<SegmentedSize, string> = {\n  md: 'h-10 pointer-fine:h-8',\n  sm: 'h-10 pointer-fine:h-[30px]',\n};\n\nconst SELECTED_CLASSES = 'text-(--foreground)';\n\nconst UNSELECTED_CLASSES = 'text-(--muted-foreground) hover:text-(--foreground)';\n\n/**\n * Exclusive choice within a small, known set: a time range, a unit, a mode. The selected option's\n * background is a single thumb that slides under it in `transform`, instead of being redrawn.\n *\n * @example\n * <ui-segmented [options]=\"ranges\" label=\"Time range\" [(value)]=\"range\" />\n */\n@Component({\n  selector: 'ui-segmented',\n  template: `\n    <div [class]=\"showLabel() ? 'flex flex-col gap-1.5' : ''\">\n      @if (showLabel()) {\n        <span class=\"text-label leading-[17px] font-medium text-(--muted-foreground)\" [id]=\"labelId\">{{\n          label()\n        }}</span>\n      }\n      <div\n        class=\"rounded-control relative grid bg-(--muted) p-0.5\"\n        role=\"radiogroup\"\n        [attr.aria-label]=\"showLabel() ? null : label()\"\n        [attr.aria-labelledby]=\"showLabel() ? labelId : null\"\n        [style.grid-template-columns]=\"'repeat(' + options().length + ', 1fr)'\"\n      >\n        @if (thumbIndex(); as index) {\n          <span\n            aria-hidden=\"true\"\n            class=\"absolute top-0.5 bottom-0.5 left-0.5 rounded-[calc(var(--radius-control)-2px)] bg-(--card) shadow-[0_1px_2px_rgb(0_0_0/0.08),inset_0_0_0_1px_var(--border)] transition-transform duration-(--duration-fast) ease-out\"\n            data-thumb\n            [style.transform]=\"'translateX(' + (index - 1) * 100 + '%)'\"\n            [style.width]=\"'calc((100% - 4px) / ' + options().length + ')'\"\n          ></span>\n        }\n\n        @for (option of options(); track option.value) {\n          <button\n            #radio\n            role=\"radio\"\n            type=\"button\"\n            [attr.aria-checked]=\"option.value === value()\"\n            [attr.tabindex]=\"tabIndexFor(option.value)\"\n            [class]=\"optionClasses(option.value)\"\n            (click)=\"select(option.value)\"\n            (keydown)=\"onKeydown($event)\"\n          >\n            {{ option.label }}\n          </button>\n        }\n      </div>\n    </div>\n  `,\n})\nexport class UiSegmented {\n  readonly options = input.required<SegmentedOption[]>();\n  readonly label = input.required<string>();\n  readonly showLabel = input(false, { transform: booleanAttribute });\n\n  protected readonly labelId = nextId();\n  readonly value = model.required<string>();\n  readonly size = input<SegmentedSize>('md');\n\n  protected readonly radios = viewChildren<ElementRef<HTMLButtonElement>>('radio');\n\n  protected readonly thumbIndex = computed(() => {\n    const index = this.options().findIndex((option) => option.value === this.value());\n\n    return index === -1 ? 0 : index + 1;\n  });\n\n  constructor() {\n    holdTransitionsUntilRendered();\n  }\n\n  protected optionClasses(optionValue: string): string {\n    return `${OPTION_CLASSES} ${SIZE_CLASSES[this.size()]} ${optionValue === this.value() ? SELECTED_CLASSES : UNSELECTED_CLASSES}`;\n  }\n\n  protected tabIndexFor(optionValue: string): number {\n    const opts = this.options();\n    const tabStopValue = opts.some((option) => option.value === this.value()) ? this.value() : opts[0]?.value;\n\n    return optionValue === tabStopValue ? 0 : -1;\n  }\n\n  protected select(optionValue: string): void {\n    this.value.set(optionValue);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    const delta = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[event.key];\n    if (delta === undefined) {\n      return;\n    }\n    event.preventDefault();\n\n    const opts = this.options();\n    const currentIndex = opts.findIndex((option) => option.value === this.value());\n    const nextIndex = (currentIndex + delta + opts.length) % opts.length;\n    const next = opts[nextIndex]!;\n\n    this.value.set(next.value);\n    this.radios()[nextIndex]?.nativeElement.focus();\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-segmented.mjs","names":[],"sources":["../../../projects/ui/segmented/segmented.ts"],"sourcesContent":["import { Component, ElementRef, booleanAttribute, computed, input, model, viewChildren } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\nconst nextId = (() => {\n  let count = 0;\n\n  return () => `ui-segmented-${++count}`;\n})();\n\nexport type SegmentedOption = {\n  value: string;\n  label: string;\n};\n\nconst OPTION_CLASSES =\n  \"relative z-10 flex-1 cursor-pointer px-3 text-label font-medium transition-[scale] duration-(--duration-press) ease-out after:absolute after:inset-x-0 after:top-1/2 after:h-(--row-min) after:-translate-y-1/2 after:content-[''] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) active:scale-(--press-scale)\";\n\nexport const SEGMENTED_SIZES = ['md', 'sm'] as const;\nexport type SegmentedSize = (typeof SEGMENTED_SIZES)[number];\n\nconst SIZE_CLASSES: Record<SegmentedSize, string> = {\n  md: 'h-10 pointer-fine:h-8',\n  sm: 'h-10 pointer-fine:h-[30px]',\n};\n\nconst SELECTED_CLASSES = 'text-(--foreground)';\n\nconst UNSELECTED_CLASSES = 'text-(--muted-foreground) hover:text-(--foreground)';\n\n/**\n * Exclusive choice within a small, known set: a time range, a unit, a mode.\n *\n * @example\n * <ui-segmented [options]=\"ranges\" label=\"Time range\" [(value)]=\"range\" />\n */\n@Component({\n  selector: 'ui-segmented',\n  template: `\n    <div [class]=\"showLabel() ? 'flex flex-col gap-1.5' : ''\">\n      @if (showLabel()) {\n        <span class=\"text-label leading-[17px] font-medium text-(--muted-foreground)\" [id]=\"labelId\">{{\n          label()\n        }}</span>\n      }\n      <div\n        class=\"rounded-control relative grid bg-(--muted) p-0.5\"\n        role=\"radiogroup\"\n        [attr.aria-label]=\"showLabel() ? null : label()\"\n        [attr.aria-labelledby]=\"showLabel() ? labelId : null\"\n        [style.grid-template-columns]=\"'repeat(' + options().length + ', 1fr)'\"\n      >\n        @if (thumbIndex(); as index) {\n          <span\n            aria-hidden=\"true\"\n            class=\"absolute top-0.5 bottom-0.5 left-0.5 rounded-[calc(var(--radius-control)-2px)] bg-(--card) shadow-[0_1px_2px_rgb(0_0_0/0.08),inset_0_0_0_1px_var(--border)] transition-transform duration-(--duration-fast) ease-out\"\n            data-thumb\n            [style.transform]=\"'translateX(' + (index - 1) * 100 + '%)'\"\n            [style.width]=\"'calc((100% - 4px) / ' + options().length + ')'\"\n          ></span>\n        }\n\n        @for (option of options(); track option.value) {\n          <button\n            #radio\n            role=\"radio\"\n            type=\"button\"\n            [attr.aria-checked]=\"option.value === value()\"\n            [attr.tabindex]=\"tabIndexFor(option.value)\"\n            [class]=\"optionClasses(option.value)\"\n            (click)=\"select(option.value)\"\n            (keydown)=\"onKeydown($event)\"\n          >\n            {{ option.label }}\n          </button>\n        }\n      </div>\n    </div>\n  `,\n})\nexport class UiSegmented {\n  readonly options = input.required<SegmentedOption[]>();\n  readonly label = input.required<string>();\n  readonly showLabel = input(false, { transform: booleanAttribute });\n\n  protected readonly labelId = nextId();\n  readonly value = model.required<string>();\n  readonly size = input<SegmentedSize>('md');\n\n  protected readonly radios = viewChildren<ElementRef<HTMLButtonElement>>('radio');\n\n  protected readonly thumbIndex = computed(() => {\n    const index = this.options().findIndex((option) => option.value === this.value());\n\n    return index === -1 ? 0 : index + 1;\n  });\n\n  constructor() {\n    holdTransitionsUntilRendered();\n  }\n\n  protected optionClasses(optionValue: string): string {\n    return `${OPTION_CLASSES} ${SIZE_CLASSES[this.size()]} ${optionValue === this.value() ? SELECTED_CLASSES : UNSELECTED_CLASSES}`;\n  }\n\n  protected tabIndexFor(optionValue: string): number {\n    const opts = this.options();\n    const tabStopValue = opts.some((option) => option.value === this.value()) ? this.value() : opts[0]?.value;\n\n    return optionValue === tabStopValue ? 0 : -1;\n  }\n\n  protected select(optionValue: string): void {\n    this.value.set(optionValue);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    const delta = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[event.key];\n    if (delta === undefined) {\n      return;\n    }\n    event.preventDefault();\n\n    const opts = this.options();\n    const currentIndex = opts.findIndex((option) => option.value === this.value());\n    const nextIndex = (currentIndex + delta + opts.length) % opts.length;\n    const next = opts[nextIndex]!;\n\n    this.value.set(next.value);\n    this.radios()[nextIndex]?.nativeElement.focus();\n  }\n}\n"],"mappings":"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"}

package/fesm2022/joanroucoux-cairn-ui-select-pill.mjs

@@ -0,0 +1,270 @@
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, computed, contentChild, input, output, viewChild } from "@angular/core";
+import { UiMenu, UiMenuTrigger } from "@joanroucoux/cairn-ui/menu";
+const HOST_CLASSES = "relative flex-none inline-flex h-11 items-center pointer-fine:h-8";
+const DISABLED_HOST_CLASSES = "opacity-40";
+const TRIGGER_CLASSES = "-mx-[5px] flex h-11 cursor-pointer items-center rounded-pill border-x-[5px] border-y-0 border-transparent bg-transparent p-0 font-[inherit] focus-visible:outline-2 focus-visible:-outline-offset-5 focus-visible:outline-(--ring) pointer-fine:mx-0 pointer-fine:h-8 pointer-fine:border-x-0 pointer-fine:focus-visible:outline-offset-0 disabled:pointer-events-none";
+const PILL_CLASSES = "flex h-[34px] items-center rounded-pill pr-[30px] pl-3 text-label font-medium whitespace-nowrap forced-colors:border pointer-fine:h-8";
+const REST_PILL_CLASSES = "bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)]";
+const ACTIVE_PILL_CLASSES = "bg-(--primary) text-(--primary-foreground)";
+const CLEAR_CLASSES = "absolute end-0 flex size-[34px] cursor-pointer items-center justify-center rounded-pill border-0 bg-transparent p-0 text-(--primary-foreground) focus-visible:outline-2 focus-visible:-outline-offset-7 focus-visible:outline-(--primary-foreground) pointer-fine:size-8 pointer-fine:focus-visible:-outline-offset-6 after:absolute after:-inset-[5px] pointer-fine:after:-inset-0.5";
+var UiSelectPill = class UiSelectPill {
+	active = input(false, {
+		...ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	clearLabel = input.required(...ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []);
+	contextLabel = input(...ngDevMode ? [void 0, { debugName: "contextLabel" }] : /* istanbul ignore next */ []);
+	cleared = output();
+	menu = contentChild.required(UiMenu, ...ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []);
+	trigger = viewChild.required("trigger", ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => this.disabled() ? `${HOST_CLASSES} ${DISABLED_HOST_CLASSES}` : HOST_CLASSES, ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	chevronClasses = computed(() => this.active() ? "text-(--primary-foreground)" : "text-(--foreground)", ...ngDevMode ? [{ debugName: "chevronClasses" }] : /* istanbul ignore next */ []);
+	triggerClasses = TRIGGER_CLASSES;
+	clearClasses = CLEAR_CLASSES;
+	clear() {
+		this.cleared.emit();
+		this.trigger().nativeElement.focus();
+	}
+	pillClasses = computed(() => `${PILL_CLASSES} ${this.active() ? ACTIVE_PILL_CLASSES : REST_PILL_CLASSES}`, ...ngDevMode ? [{ debugName: "pillClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiSelectPill,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: UiSelectPill,
+		isStandalone: true,
+		selector: "ui-select-pill",
+		inputs: {
+			active: {
+				classPropertyName: "active",
+				publicName: "active",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearLabel: {
+				classPropertyName: "clearLabel",
+				publicName: "clearLabel",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			contextLabel: {
+				classPropertyName: "contextLabel",
+				publicName: "contextLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { cleared: "cleared" },
+		host: { properties: { "class": "hostClasses()" } },
+		queries: [{
+			propertyName: "menu",
+			first: true,
+			predicate: UiMenu,
+			descendants: true,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "trigger",
+			first: true,
+			predicate: ["trigger"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <button
+      #trigger
+      type="button"
+      [attr.aria-disabled]="disabled() || null"
+      [class]="triggerClasses"
+      [disabled]="disabled()"
+      [uiMenuTrigger]="menu()"
+    >
+      <span data-pill [class]="pillClasses()">
+        @if (active() && contextLabel()) {
+          <span class="sr-only">{{ contextLabel() }} </span>
+        }
+        <ng-content
+      /></span>
+    </button>
+    @if (active() && !disabled()) {
+      <button data-clear type="button" [attr.aria-label]="clearLabel()" [class]="clearClasses" (click)="clear()">
+        <svg
+          aria-hidden="true"
+          fill="none"
+          height="14"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="14"
+        >
+          <path d="M18 6 6 18M6 6l12 12" />
+        </svg>
+      </button>
+    } @else {
+      <svg
+        aria-hidden="true"
+        class="pointer-events-none absolute right-2.5"
+        data-chevron
+        fill="none"
+        height="14"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="14"
+        [class]="chevronClasses()"
+      >
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    }
+    <ng-content select="ui-menu" />
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: UiMenuTrigger,
+			selector: "[uiMenuTrigger]",
+			inputs: ["uiMenuTrigger"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiSelectPill,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-select-pill",
+			imports: [UiMenuTrigger],
+			template: `
+    <button
+      #trigger
+      type="button"
+      [attr.aria-disabled]="disabled() || null"
+      [class]="triggerClasses"
+      [disabled]="disabled()"
+      [uiMenuTrigger]="menu()"
+    >
+      <span data-pill [class]="pillClasses()">
+        @if (active() && contextLabel()) {
+          <span class="sr-only">{{ contextLabel() }} </span>
+        }
+        <ng-content
+      /></span>
+    </button>
+    @if (active() && !disabled()) {
+      <button data-clear type="button" [attr.aria-label]="clearLabel()" [class]="clearClasses" (click)="clear()">
+        <svg
+          aria-hidden="true"
+          fill="none"
+          height="14"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="14"
+        >
+          <path d="M18 6 6 18M6 6l12 12" />
+        </svg>
+      </button>
+    } @else {
+      <svg
+        aria-hidden="true"
+        class="pointer-events-none absolute right-2.5"
+        data-chevron
+        fill="none"
+        height="14"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="14"
+        [class]="chevronClasses()"
+      >
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    }
+    <ng-content select="ui-menu" />
+  `,
+			host: { "[class]": "hostClasses()" }
+		}]
+	}],
+	propDecorators: {
+		active: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "active",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		clearLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearLabel",
+				required: true
+			}]
+		}],
+		contextLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contextLabel",
+				required: false
+			}]
+		}],
+		cleared: [{
+			type: i0.Output,
+			args: ["cleared"]
+		}],
+		menu: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => UiMenu), { isSignal: true }]
+		}],
+		trigger: [{
+			type: i0.ViewChild,
+			args: ["trigger", { isSignal: true }]
+		}]
+	}
+});
+export { UiSelectPill };
+
+//# sourceMappingURL=joanroucoux-cairn-ui-select-pill.mjs.map

package/fesm2022/joanroucoux-cairn-ui-select-pill.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-select-pill.mjs","names":[],"sources":["../../../projects/ui/select-pill/select-pill.ts"],"sourcesContent":["import {\n  Component,\n  ElementRef,\n  booleanAttribute,\n  computed,\n  contentChild,\n  input,\n  output,\n  viewChild,\n} from '@angular/core';\n\nimport { UiMenu, UiMenuTrigger } from '@joanroucoux/cairn-ui/menu';\n\nconst HOST_CLASSES = 'relative flex-none inline-flex h-11 items-center pointer-fine:h-8';\n\nconst DISABLED_HOST_CLASSES = 'opacity-40';\n\nconst TRIGGER_CLASSES =\n  '-mx-[5px] flex h-11 cursor-pointer items-center rounded-pill border-x-[5px] border-y-0 border-transparent bg-transparent p-0 font-[inherit] focus-visible:outline-2 focus-visible:-outline-offset-5 focus-visible:outline-(--ring) pointer-fine:mx-0 pointer-fine:h-8 pointer-fine:border-x-0 pointer-fine:focus-visible:outline-offset-0 disabled:pointer-events-none';\n\nconst PILL_CLASSES =\n  'flex h-[34px] items-center rounded-pill pr-[30px] pl-3 text-label font-medium whitespace-nowrap forced-colors:border pointer-fine:h-8';\n\nconst REST_PILL_CLASSES = 'bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)]';\n\nconst ACTIVE_PILL_CLASSES = 'bg-(--primary) text-(--primary-foreground)';\n\nconst CLEAR_CLASSES =\n  'absolute end-0 flex size-[34px] cursor-pointer items-center justify-center rounded-pill border-0 bg-transparent p-0 text-(--primary-foreground) focus-visible:outline-2 focus-visible:-outline-offset-7 focus-visible:outline-(--primary-foreground) pointer-fine:size-8 pointer-fine:focus-visible:-outline-offset-6 after:absolute after:-inset-[5px] pointer-fine:after:-inset-0.5';\n\n/**\n * A pill that opens a `ui-menu` of exclusive choices, to head a row of filter chips: outlined at rest with a\n * chevron, solid primary when `active`, where a separate 14 px cross replaces the chevron and emits `cleared`.\n * It is 34 px tall inside a 44 px target on touch and 32 px with a fine pointer; its focus ring is an outline\n * 2 px outside the pill; the cross has a 44 px hit area on touch (36 px with a fine pointer). `contextLabel`, when\n * given, is read before the label while active so a screen reader hears what the account is. Clearing moves focus\n * back to the trigger. `disabled` dims it like a disabled button, opens nothing and draws the chevron even when `active`. The projected text is the pill label and the projected `ui-menu` is what it opens.\n *\n * @example\n * <ui-select-pill uiChipsLeading [active]=\"!!account()\" clearLabel=\"Clear the account\" (cleared)=\"account.set('')\">\n *   {{ accountName() }}\n *   <ui-menu label=\"Account\" sheet>\n *     <button uiMenuItem [checked]=\"!account()\" (click)=\"account.set('')\">All accounts</button>\n *   </ui-menu>\n * </ui-select-pill>\n */\n@Component({\n  selector: 'ui-select-pill',\n  imports: [UiMenuTrigger],\n  template: `\n    <button\n      #trigger\n      type=\"button\"\n      [attr.aria-disabled]=\"disabled() || null\"\n      [class]=\"triggerClasses\"\n      [disabled]=\"disabled()\"\n      [uiMenuTrigger]=\"menu()\"\n    >\n      <span data-pill [class]=\"pillClasses()\">\n        @if (active() && contextLabel()) {\n          <span class=\"sr-only\">{{ contextLabel() }} </span>\n        }\n        <ng-content\n      /></span>\n    </button>\n    @if (active() && !disabled()) {\n      <button data-clear type=\"button\" [attr.aria-label]=\"clearLabel()\" [class]=\"clearClasses\" (click)=\"clear()\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"14\"\n          stroke=\"currentColor\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"14\"\n        >\n          <path d=\"M18 6 6 18M6 6l12 12\" />\n        </svg>\n      </button>\n    } @else {\n      <svg\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute right-2.5\"\n        data-chevron\n        fill=\"none\"\n        height=\"14\"\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        viewBox=\"0 0 24 24\"\n        width=\"14\"\n        [class]=\"chevronClasses()\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    }\n    <ng-content select=\"ui-menu\" />\n  `,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n})\nexport class UiSelectPill {\n  readonly active = input(false, { transform: booleanAttribute });\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly clearLabel = input.required<string>();\n  readonly contextLabel = input<string>();\n  readonly cleared = output();\n\n  protected readonly menu = contentChild.required(UiMenu);\n  protected readonly trigger = viewChild.required<ElementRef<HTMLButtonElement>>('trigger');\n\n  protected readonly hostClasses = computed(() =>\n    this.disabled() ? `${HOST_CLASSES} ${DISABLED_HOST_CLASSES}` : HOST_CLASSES,\n  );\n  protected readonly chevronClasses = computed(() =>\n    this.active() ? 'text-(--primary-foreground)' : 'text-(--foreground)',\n  );\n  protected readonly triggerClasses = TRIGGER_CLASSES;\n  protected readonly clearClasses = CLEAR_CLASSES;\n  protected clear(): void {\n    this.cleared.emit();\n    this.trigger().nativeElement.focus();\n  }\n\n  protected readonly pillClasses = computed(\n    () => `${PILL_CLASSES} ${this.active() ? ACTIVE_PILL_CLASSES : REST_PILL_CLASSES}`,\n  );\n}\n"],"mappings":"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"}