@joanroucoux/cairn-ui 0.8.2 → 0.9.0

package/fesm2022/joanroucoux-cairn-ui-filter-chips.mjs

@@ -1,89 +1,167 @@
-import * as i0 from '@angular/core';
-import { input, model, Component } from '@angular/core';
-
-const CHIP_CLASSES = 'flex-none flex h-11 items-center rounded-pill border-0 bg-transparent p-0 font-[inherit] cursor-pointer transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) pointer-fine:h-8 pointer-fine:focus-visible:outline-offset-2';
-const PILL_CLASSES = 'flex h-[34px] items-center gap-1.5 rounded-pill px-3.5 text-label font-medium whitespace-nowrap pointer-fine:h-8 pointer-fine:px-3 pointer-fine:group-hover/chip:shadow-[inset_0_0_0_1px_var(--muted-foreground)]';
-const SELECTED_PILL_CLASSES = 'bg-(--primary) text-(--primary-foreground)';
-const UNSELECTED_PILL_CLASSES = 'bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)]';
-/**
- * A row of single-choice filter pills, each with an optional count, that narrows a list in place:
- * an asset class, a status. On touch it scrolls on one line, bleeding to the screen edges; with a
- * fine pointer it wraps.
- *
- * @example
- * <ui-filter-chips ariaLabel="Filter by class" [options]="classes()" [(value)]="selectedClass" />
- */
-class UiFilterChips {
-    options = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    value = model.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    ariaLabel = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    chipClasses = CHIP_CLASSES;
-    pillClasses(optionValue) {
-        return `${PILL_CLASSES} ${optionValue === this.value() ? SELECTED_PILL_CLASSES : UNSELECTED_PILL_CLASSES}`;
-    }
-    countClasses(optionValue) {
-        return optionValue === this.value() ? 'text-(--primary-foreground)' : 'text-(--subtle-foreground)';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFilterChips, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiFilterChips, isStandalone: true, selector: "ui-filter-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "flex gap-2 overflow-x-auto [scrollbar-width:none] -mt-1 -mx-(--gutter) px-(--gutter) pointer-fine:m-0 pointer-fine:flex-wrap pointer-fine:overflow-visible pointer-fine:p-0" }, ngImport: i0, template: `
-    @for (option of options(); track option.value) {
-      <button
-        class="group/chip"
-        type="button"
-        [attr.aria-pressed]="option.value === value()"
-        [class]="chipClasses"
-        (click)="value.set(option.value)"
-      >
-        <span data-chip [class]="pillClasses(option.value)"
-          >{{ option.label }}
-          @if (option.count !== undefined && option.count !== null) {
-            &ngsp;<span class="[font-variant-numeric:var(--numeric)]" data-count [class]="countClasses(option.value)">{{
-              option.count
-            }}</span>
-          }
-        </span>
-      </button>
-    }
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFilterChips, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-filter-chips',
-                    template: `
-    @for (option of options(); track option.value) {
-      <button
-        class="group/chip"
-        type="button"
-        [attr.aria-pressed]="option.value === value()"
-        [class]="chipClasses"
-        (click)="value.set(option.value)"
-      >
-        <span data-chip [class]="pillClasses(option.value)"
-          >{{ option.label }}
-          @if (option.count !== undefined && option.count !== null) {
-            &ngsp;<span class="[font-variant-numeric:var(--numeric)]" data-count [class]="countClasses(option.value)">{{
-              option.count
-            }}</span>
-          }
-        </span>
-      </button>
-    }
+import * as i0 from "@angular/core";
+import { Component, input, model } from "@angular/core";
+const CHIP_CLASSES = "flex-none flex h-11 items-center rounded-pill border-0 bg-transparent p-0 font-[inherit] cursor-pointer transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) pointer-fine:h-8 pointer-fine:focus-visible:outline-offset-2";
+const PILL_CLASSES = "flex h-[34px] items-center gap-1.5 rounded-pill px-3.5 text-label font-medium whitespace-nowrap pointer-fine:h-8 pointer-fine:px-3 pointer-fine:group-hover/chip:shadow-[inset_0_0_0_1px_var(--muted-foreground)]";
+const SELECTED_PILL_CLASSES = "bg-(--primary) text-(--primary-foreground)";
+const UNSELECTED_PILL_CLASSES = "bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)]";
+var UiFilterChips = class UiFilterChips {
+	options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	ariaLabel = input.required(...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	chipClasses = CHIP_CLASSES;
+	pillClasses(optionValue) {
+		return `${PILL_CLASSES} ${optionValue === this.value() ? SELECTED_PILL_CLASSES : UNSELECTED_PILL_CLASSES}`;
+	}
+	countClasses(optionValue) {
+		return optionValue === this.value() ? "text-(--primary-foreground)" : "text-(--subtle-foreground)";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiFilterChips,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: UiFilterChips,
+		isStandalone: true,
+		selector: "ui-filter-chips",
+		inputs: {
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: { classAttribute: "flex gap-2 overflow-x-auto [scrollbar-width:none] -mt-1 -mx-(--gutter) px-(--gutter) pointer-fine:m-0 pointer-fine:flex-wrap pointer-fine:overflow-visible pointer-fine:p-0" },
+		ngImport: i0,
+		template: `
+    <ng-content select="[uiChipsLeading]" />
+    <span
+      aria-hidden="true"
+      class="hidden h-5 w-px flex-none self-center bg-(--border) [[uiChipsLeading]+&]:block"
+      data-chips-rule
+    ></span>
+    <div class="contents" role="group" [attr.aria-label]="ariaLabel()">
+      @for (option of options(); track option.value) {
+        <button
+          class="group/chip"
+          type="button"
+          [attr.aria-pressed]="option.value === value()"
+          [class]="chipClasses"
+          (click)="value.set(option.value)"
+        >
+          <span data-chip [class]="pillClasses(option.value)"
+            >{{ option.label }}
+            @if (option.count !== undefined && option.count !== null) {
+              &ngsp;<span
+                class="[font-variant-numeric:var(--numeric)]"
+                data-count
+                [class]="countClasses(option.value)"
+                >{{ option.count }}</span
+              >
+            }
+          </span>
+        </button>
+      }
+    </div>
   `,
-                    host: {
-                        role: 'group',
-                        class: 'flex gap-2 overflow-x-auto [scrollbar-width:none] -mt-1 -mx-(--gutter) px-(--gutter) pointer-fine:m-0 pointer-fine:flex-wrap pointer-fine:overflow-visible pointer-fine:p-0',
-                        '[attr.aria-label]': 'ariaLabel()',
-                    },
-                }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiFilterChips,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-filter-chips",
+			template: `
+    <ng-content select="[uiChipsLeading]" />
+    <span
+      aria-hidden="true"
+      class="hidden h-5 w-px flex-none self-center bg-(--border) [[uiChipsLeading]+&]:block"
+      data-chips-rule
+    ></span>
+    <div class="contents" role="group" [attr.aria-label]="ariaLabel()">
+      @for (option of options(); track option.value) {
+        <button
+          class="group/chip"
+          type="button"
+          [attr.aria-pressed]="option.value === value()"
+          [class]="chipClasses"
+          (click)="value.set(option.value)"
+        >
+          <span data-chip [class]="pillClasses(option.value)"
+            >{{ option.label }}
+            @if (option.count !== undefined && option.count !== null) {
+              &ngsp;<span
+                class="[font-variant-numeric:var(--numeric)]"
+                data-count
+                [class]="countClasses(option.value)"
+                >{{ option.count }}</span
+              >
+            }
+          </span>
+        </button>
+      }
+    </div>
+  `,
+			host: { class: "flex gap-2 overflow-x-auto [scrollbar-width:none] -mt-1 -mx-(--gutter) px-(--gutter) pointer-fine:m-0 pointer-fine:flex-wrap pointer-fine:overflow-visible pointer-fine:p-0" }
+		}]
+	}],
+	propDecorators: {
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: true
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: true
+			}]
+		}]
+	}
+});
 export { UiFilterChips };
-//# sourceMappingURL=joanroucoux-cairn-ui-filter-chips.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-filter-chips.mjs.map

package/fesm2022/joanroucoux-cairn-ui-filter-chips.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-filter-chips.mjs","sources":["../../../projects/ui/filter-chips/filter-chips.ts","../../../projects/ui/filter-chips/joanroucoux-cairn-ui-filter-chips.ts"],"sourcesContent":["import { Component, input, model } from '@angular/core';\n\nexport type FilterChipOption = {\n  value: string;\n  label: string;\n  count?: number | string | null;\n};\n\nconst CHIP_CLASSES =\n  'flex-none flex h-11 items-center rounded-pill border-0 bg-transparent p-0 font-[inherit] cursor-pointer transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) pointer-fine:h-8 pointer-fine:focus-visible:outline-offset-2';\n\nconst PILL_CLASSES =\n  'flex h-[34px] items-center gap-1.5 rounded-pill px-3.5 text-label font-medium whitespace-nowrap pointer-fine:h-8 pointer-fine:px-3 pointer-fine:group-hover/chip:shadow-[inset_0_0_0_1px_var(--muted-foreground)]';\n\nconst SELECTED_PILL_CLASSES = 'bg-(--primary) text-(--primary-foreground)';\n\nconst UNSELECTED_PILL_CLASSES = 'bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)]';\n\n/**\n * A row of single-choice filter pills, each with an optional count, that narrows a list in place:\n * an asset class, a status. On touch it scrolls on one line, bleeding to the screen edges; with a\n * fine pointer it wraps.\n *\n * @example\n * <ui-filter-chips ariaLabel=\"Filter by class\" [options]=\"classes()\" [(value)]=\"selectedClass\" />\n */\n@Component({\n  selector: 'ui-filter-chips',\n  template: `\n    @for (option of options(); track option.value) {\n      <button\n        class=\"group/chip\"\n        type=\"button\"\n        [attr.aria-pressed]=\"option.value === value()\"\n        [class]=\"chipClasses\"\n        (click)=\"value.set(option.value)\"\n      >\n        <span data-chip [class]=\"pillClasses(option.value)\"\n          >{{ option.label }}\n          @if (option.count !== undefined && option.count !== null) {\n            &ngsp;<span class=\"[font-variant-numeric:var(--numeric)]\" data-count [class]=\"countClasses(option.value)\">{{\n              option.count\n            }}</span>\n          }\n        </span>\n      </button>\n    }\n  `,\n  host: {\n    role: 'group',\n    class:\n      'flex gap-2 overflow-x-auto [scrollbar-width:none] -mt-1 -mx-(--gutter) px-(--gutter) pointer-fine:m-0 pointer-fine:flex-wrap pointer-fine:overflow-visible pointer-fine:p-0',\n    '[attr.aria-label]': 'ariaLabel()',\n  },\n})\nexport class UiFilterChips {\n  readonly options = input.required<FilterChipOption[]>();\n  readonly value = model.required<string>();\n  readonly ariaLabel = input.required<string>();\n\n  protected readonly chipClasses = CHIP_CLASSES;\n\n  protected pillClasses(optionValue: string): string {\n    return `${PILL_CLASSES} ${optionValue === this.value() ? SELECTED_PILL_CLASSES : UNSELECTED_PILL_CLASSES}`;\n  }\n\n  protected countClasses(optionValue: string): string {\n    return optionValue === this.value() ? 'text-(--primary-foreground)' : 'text-(--subtle-foreground)';\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAQA,MAAM,YAAY,GAChB,oVAAoV;AAEtV,MAAM,YAAY,GAChB,mNAAmN;AAErN,MAAM,qBAAqB,GAAG,4CAA4C;AAE1E,MAAM,uBAAuB,GAAG,wEAAwE;AAExG;;;;;;;AAOG;MA8BU,aAAa,CAAA;IACf,OAAO,GAAG,KAAK,CAAC,QAAQ;gFAAsB;IAC9C,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU;IAChC,SAAS,GAAG,KAAK,CAAC,QAAQ;kFAAU;IAE1B,WAAW,GAAG,YAAY;AAEnC,IAAA,WAAW,CAAC,WAAmB,EAAA;AACvC,QAAA,OAAO,GAAG,YAAY,CAAA,CAAA,EAAI,WAAW,KAAK,IAAI,CAAC,KAAK,EAAE,GAAG,qBAAqB,GAAG,uBAAuB,EAAE;IAC5G;AAEU,IAAA,YAAY,CAAC,WAAmB,EAAA;AACxC,QAAA,OAAO,WAAW,KAAK,IAAI,CAAC,KAAK,EAAE,GAAG,6BAA6B,GAAG,4BAA4B;IACpG;uGAbW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,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,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,EAAA,cAAA,EAAA,6KAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA3Bd;;;;;;;;;;;;;;;;;;;AAmBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAQU,aAAa,EAAA,UAAA,EAAA,CAAA;kBA7BzB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;AAmBT,EAAA,CAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,IAAI,EAAE,OAAO;AACb,wBAAA,KAAK,EACH,6KAA6K;AAC/K,wBAAA,mBAAmB,EAAE,aAAa;AACnC,qBAAA;AACF,iBAAA;;;ACtDD;;AAEG;;;;"}
+{"version":3,"file":"joanroucoux-cairn-ui-filter-chips.mjs","names":[],"sources":["../../../projects/ui/filter-chips/filter-chips.ts"],"sourcesContent":["import { Component, input, model } from '@angular/core';\n\nexport type FilterChipOption = {\n  value: string;\n  label: string;\n  count?: number | string | null;\n};\n\nconst CHIP_CLASSES =\n  'flex-none flex h-11 items-center rounded-pill border-0 bg-transparent p-0 font-[inherit] cursor-pointer transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) pointer-fine:h-8 pointer-fine:focus-visible:outline-offset-2';\n\nconst PILL_CLASSES =\n  'flex h-[34px] items-center gap-1.5 rounded-pill px-3.5 text-label font-medium whitespace-nowrap pointer-fine:h-8 pointer-fine:px-3 pointer-fine:group-hover/chip:shadow-[inset_0_0_0_1px_var(--muted-foreground)]';\n\nconst SELECTED_PILL_CLASSES = 'bg-(--primary) text-(--primary-foreground)';\n\nconst UNSELECTED_PILL_CLASSES = 'bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)]';\n\n/**\n * A row of single-choice filter pills, each with an optional count, that narrows a list in place.\n * On touch it scrolls on one line; with a fine pointer it wraps. An element marked `uiChipsLeading` is\n * projected first, outside the chips' group, followed by a vertical rule.\n *\n * @example\n * <ui-filter-chips ariaLabel=\"Filter by class\" [options]=\"classes()\" [(value)]=\"selectedClass\" />\n */\n@Component({\n  selector: 'ui-filter-chips',\n  template: `\n    <ng-content select=\"[uiChipsLeading]\" />\n    <span\n      aria-hidden=\"true\"\n      class=\"hidden h-5 w-px flex-none self-center bg-(--border) [[uiChipsLeading]+&]:block\"\n      data-chips-rule\n    ></span>\n    <div class=\"contents\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n      @for (option of options(); track option.value) {\n        <button\n          class=\"group/chip\"\n          type=\"button\"\n          [attr.aria-pressed]=\"option.value === value()\"\n          [class]=\"chipClasses\"\n          (click)=\"value.set(option.value)\"\n        >\n          <span data-chip [class]=\"pillClasses(option.value)\"\n            >{{ option.label }}\n            @if (option.count !== undefined && option.count !== null) {\n              &ngsp;<span\n                class=\"[font-variant-numeric:var(--numeric)]\"\n                data-count\n                [class]=\"countClasses(option.value)\"\n                >{{ option.count }}</span\n              >\n            }\n          </span>\n        </button>\n      }\n    </div>\n  `,\n  host: {\n    class:\n      'flex gap-2 overflow-x-auto [scrollbar-width:none] -mt-1 -mx-(--gutter) px-(--gutter) pointer-fine:m-0 pointer-fine:flex-wrap pointer-fine:overflow-visible pointer-fine:p-0',\n  },\n})\nexport class UiFilterChips {\n  readonly options = input.required<FilterChipOption[]>();\n  readonly value = model.required<string>();\n  readonly ariaLabel = input.required<string>();\n\n  protected readonly chipClasses = CHIP_CLASSES;\n\n  protected pillClasses(optionValue: string): string {\n    return `${PILL_CLASSES} ${optionValue === this.value() ? SELECTED_PILL_CLASSES : UNSELECTED_PILL_CLASSES}`;\n  }\n\n  protected countClasses(optionValue: string): string {\n    return optionValue === this.value() ? 'text-(--primary-foreground)' : 'text-(--subtle-foreground)';\n  }\n}\n"],"mappings":";;AAQA,MAAM,eACJ;AAEF,MAAM,eACJ;AAEF,MAAM,wBAAwB;AAE9B,MAAM,0BAA0B;AAgDhC,IAAa,gBAAb,MAAa,cAAa;CACf,UAAU,MAAM,SAA8B,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC9C,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;CAE1B,cAAc;CAEvB,YAAY,aAAmB;EACvC,OAAO,GAAG,aAAY,GAAI,gBAAgB,KAAK,MAAK,IAAK,wBAAwB;CACnF;CAEU,aAAa,aAAmB;EACxC,OAAO,gBAAgB,KAAK,MAAK,IAAK,gCAAgC;CACxE;CAbW,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;GAAA,SAAA;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;EAAA;EAAA,SAAA,EAAA,OAAA,cAAA;EAAA,MAAA,EAAA,gBAAA,8KAAA;EAAA,UAAA;EAAA,UApCd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BT,UAAA;CAAA,CAAA;;AAMU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAa,YAAA,CAAA;EAtCzB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BV,MAAM,EACJ,OACE,8KACH;EACF,CAAA"}

package/fesm2022/joanroucoux-cairn-ui-group-header.mjs

@@ -0,0 +1,269 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, input, model } from "@angular/core";
+var UiGroupHeader = class UiGroupHeader {
+	name = input.required(...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	meta = input(...ngDevMode ? [void 0, { debugName: "meta" }] : /* istanbul ignore next */ []);
+	collapsible = input(false, {
+		...ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	expanded = model(true, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	toggleDisabled = input(false, {
+		...ngDevMode ? { debugName: "toggleDisabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	controls = input(...ngDevMode ? [void 0, { debugName: "controls" }] : /* istanbul ignore next */ []);
+	toggle() {
+		if (!this.toggleDisabled()) this.expanded.update((expanded) => !expanded);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiGroupHeader,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: UiGroupHeader,
+		isStandalone: true,
+		selector: "ui-group-header",
+		inputs: {
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			meta: {
+				classPropertyName: "meta",
+				publicName: "meta",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapsible: {
+				classPropertyName: "collapsible",
+				publicName: "collapsible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			expanded: {
+				classPropertyName: "expanded",
+				publicName: "expanded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			toggleDisabled: {
+				classPropertyName: "toggleDisabled",
+				publicName: "toggleDisabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			controls: {
+				classPropertyName: "controls",
+				publicName: "controls",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { expanded: "expandedChange" },
+		host: { classAttribute: "block" },
+		ngImport: i0,
+		template: `
+    <ng-template #total><ng-content /></ng-template>
+    @if (collapsible()) {
+      <h2 class="m-0 font-normal">
+        <button
+          class="rounded-control flex min-h-11 w-full items-end justify-between gap-3 px-1 pt-3 text-left transition-transform [transition-duration:var(--duration-press)] ease-out not-aria-disabled:cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) not-aria-disabled:active:scale-(--press-scale)"
+          type="button"
+          [attr.aria-controls]="controls() || null"
+          [attr.aria-disabled]="toggleDisabled() ? 'true' : null"
+          [attr.aria-expanded]="expanded()"
+          (click)="toggle()"
+        >
+          <span class="flex min-w-0 items-center gap-2">
+            <svg
+              aria-hidden="true"
+              class="flex-none stroke-(--muted-foreground) transition-transform duration-(--duration-fast) ease-out"
+              fill="none"
+              height="20"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.75"
+              viewBox="0 0 24 24"
+              width="20"
+              [class.-rotate-90]="!expanded()"
+            >
+              <path d="m6 9 6 6 6-6" />
+            </svg>
+            <span class="flex min-w-0 flex-col">
+              <span class="text-title font-semibold">{{ name() }}</span>
+              @if (meta()) {
+                <span class="text-label text-(--muted-foreground)">{{ meta() }}</span>
+              }
+            </span>
+          </span>
+          <span class="text-title font-semibold whitespace-nowrap tabular-nums">
+            <ng-container [ngTemplateOutlet]="total" />
+          </span>
+        </button>
+      </h2>
+    } @else {
+      <div class="flex min-h-11 w-full items-end justify-between gap-3 px-1 pt-3">
+        <div class="flex min-w-0 flex-col">
+          <h2 class="text-title m-0 font-semibold">{{ name() }}</h2>
+          @if (meta()) {
+            <span class="text-label text-(--muted-foreground)">{{ meta() }}</span>
+          }
+        </div>
+        <span class="text-title font-semibold whitespace-nowrap tabular-nums">
+          <ng-container [ngTemplateOutlet]="total" />
+        </span>
+      </div>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiGroupHeader,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-group-header",
+			imports: [NgTemplateOutlet],
+			host: { class: "block" },
+			template: `
+    <ng-template #total><ng-content /></ng-template>
+    @if (collapsible()) {
+      <h2 class="m-0 font-normal">
+        <button
+          class="rounded-control flex min-h-11 w-full items-end justify-between gap-3 px-1 pt-3 text-left transition-transform [transition-duration:var(--duration-press)] ease-out not-aria-disabled:cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) not-aria-disabled:active:scale-(--press-scale)"
+          type="button"
+          [attr.aria-controls]="controls() || null"
+          [attr.aria-disabled]="toggleDisabled() ? 'true' : null"
+          [attr.aria-expanded]="expanded()"
+          (click)="toggle()"
+        >
+          <span class="flex min-w-0 items-center gap-2">
+            <svg
+              aria-hidden="true"
+              class="flex-none stroke-(--muted-foreground) transition-transform duration-(--duration-fast) ease-out"
+              fill="none"
+              height="20"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.75"
+              viewBox="0 0 24 24"
+              width="20"
+              [class.-rotate-90]="!expanded()"
+            >
+              <path d="m6 9 6 6 6-6" />
+            </svg>
+            <span class="flex min-w-0 flex-col">
+              <span class="text-title font-semibold">{{ name() }}</span>
+              @if (meta()) {
+                <span class="text-label text-(--muted-foreground)">{{ meta() }}</span>
+              }
+            </span>
+          </span>
+          <span class="text-title font-semibold whitespace-nowrap tabular-nums">
+            <ng-container [ngTemplateOutlet]="total" />
+          </span>
+        </button>
+      </h2>
+    } @else {
+      <div class="flex min-h-11 w-full items-end justify-between gap-3 px-1 pt-3">
+        <div class="flex min-w-0 flex-col">
+          <h2 class="text-title m-0 font-semibold">{{ name() }}</h2>
+          @if (meta()) {
+            <span class="text-label text-(--muted-foreground)">{{ meta() }}</span>
+          }
+        </div>
+        <span class="text-title font-semibold whitespace-nowrap tabular-nums">
+          <ng-container [ngTemplateOutlet]="total" />
+        </span>
+      </div>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: true
+			}]
+		}],
+		meta: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "meta",
+				required: false
+			}]
+		}],
+		collapsible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsible",
+				required: false
+			}]
+		}],
+		expanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expanded",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["expandedChange"]
+		}],
+		toggleDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toggleDisabled",
+				required: false
+			}]
+		}],
+		controls: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "controls",
+				required: false
+			}]
+		}]
+	}
+});
+export { UiGroupHeader };
+
+//# sourceMappingURL=joanroucoux-cairn-ui-group-header.mjs.map

package/fesm2022/joanroucoux-cairn-ui-group-header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-group-header.mjs","names":[],"sources":["../../../projects/ui/group-header/group-header.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { Component, booleanAttribute, input, model } from '@angular/core';\n\n/**\n * Header of a card on a phone: the name, its meta underneath, the projected total on the right.\n *\n * With `collapsible` the header is a button inside the heading, with a chevron that turns when the\n * group is folded and a press scale. `expanded` is a model: the page keeps the fold memory and hides\n * the card body itself. `toggleDisabled` keeps the button focusable and announced, but a click\n * changes nothing (a filter holds the group open). `controls` is the id of the body it folds.\n *\n * @example\n * <ui-group-header name=\"Northwind PEA\" meta=\"PEA · 3 lignes\" collapsible [(expanded)]=\"open\">\n *   <ui-amount [value]=\"total\" />\n * </ui-group-header>\n */\n@Component({\n  selector: 'ui-group-header',\n  imports: [NgTemplateOutlet],\n  host: { class: 'block' },\n  template: `\n    <ng-template #total><ng-content /></ng-template>\n    @if (collapsible()) {\n      <h2 class=\"m-0 font-normal\">\n        <button\n          class=\"rounded-control flex min-h-11 w-full items-end justify-between gap-3 px-1 pt-3 text-left transition-transform [transition-duration:var(--duration-press)] ease-out not-aria-disabled:cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) not-aria-disabled:active:scale-(--press-scale)\"\n          type=\"button\"\n          [attr.aria-controls]=\"controls() || null\"\n          [attr.aria-disabled]=\"toggleDisabled() ? 'true' : null\"\n          [attr.aria-expanded]=\"expanded()\"\n          (click)=\"toggle()\"\n        >\n          <span class=\"flex min-w-0 items-center gap-2\">\n            <svg\n              aria-hidden=\"true\"\n              class=\"flex-none stroke-(--muted-foreground) transition-transform duration-(--duration-fast) ease-out\"\n              fill=\"none\"\n              height=\"20\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.75\"\n              viewBox=\"0 0 24 24\"\n              width=\"20\"\n              [class.-rotate-90]=\"!expanded()\"\n            >\n              <path d=\"m6 9 6 6 6-6\" />\n            </svg>\n            <span class=\"flex min-w-0 flex-col\">\n              <span class=\"text-title font-semibold\">{{ name() }}</span>\n              @if (meta()) {\n                <span class=\"text-label text-(--muted-foreground)\">{{ meta() }}</span>\n              }\n            </span>\n          </span>\n          <span class=\"text-title font-semibold whitespace-nowrap tabular-nums\">\n            <ng-container [ngTemplateOutlet]=\"total\" />\n          </span>\n        </button>\n      </h2>\n    } @else {\n      <div class=\"flex min-h-11 w-full items-end justify-between gap-3 px-1 pt-3\">\n        <div class=\"flex min-w-0 flex-col\">\n          <h2 class=\"text-title m-0 font-semibold\">{{ name() }}</h2>\n          @if (meta()) {\n            <span class=\"text-label text-(--muted-foreground)\">{{ meta() }}</span>\n          }\n        </div>\n        <span class=\"text-title font-semibold whitespace-nowrap tabular-nums\">\n          <ng-container [ngTemplateOutlet]=\"total\" />\n        </span>\n      </div>\n    }\n  `,\n})\nexport class UiGroupHeader {\n  readonly name = input.required<string>();\n  readonly meta = input<string>();\n  readonly collapsible = input(false, { transform: booleanAttribute });\n  readonly expanded = model(true);\n  readonly toggleDisabled = input(false, { transform: booleanAttribute });\n  readonly controls = input<string>();\n\n  protected toggle(): void {\n    if (!this.toggleDisabled()) {\n      this.expanded.update((expanded) => !expanded);\n    }\n  }\n}\n"],"mappings":";;;AA0EA,IAAa,gBAAb,MAAa,cAAa;CACf,OAAO,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,OAAO,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CACtB,cAAc,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,cAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACxD,WAAW,MAAM,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CACtB,iBAAiB,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,iBAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAC3D,WAAW,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAEzB,SAAM;EACd,IAAI,CAAC,KAAK,eAAc,GACtB,KAAK,SAAS,QAAQ,aAAa,CAAC,QAAQ;CAEhD;CAZW,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;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;GAAA,aAAA;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,gBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,UAAA,iBAAA;EAAA,MAAA,EAAA,gBAAA,QAAA;EAAA,UAAA;EAAA,UAtDd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDT,UAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MAtDS;GAAgB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;CAAA,CAAA;;AAwDf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAa,YAAA,CAAA;EA1DzB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,SAAS,CAAC,gBAAgB;GAC1B,MAAM,EAAE,OAAO,QAAO;GACtB,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDX,CAAA"}