npm - @joanroucoux/cairn-ui - Versions diffs - 0.10.0 → 0.11.0 - Mend

@joanroucoux/cairn-ui 0.10.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/fesm2022/joanroucoux-cairn-ui-fact.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"joanroucoux-cairn-ui-fact.mjs","names":[],"sources":["../../../projects/ui/fact/fact.ts"],"sourcesContent":["import { Component, Directive, booleanAttribute, computed, input } from '@angular/core';\n\n/** Available fact row sizes. /\nexport const FACT_SIZES = ['md', 'sm', 'auto', 'recap'] as const;\nexport type FactSize = (typeof FACT_SIZES)[number];\n\n/* ~~Colour~~ of the line under a fact value. `stale` flags an out-of-date figure. /\nexport const FACT_SUB_TONES = ['subtle', 'stale'] as const;\nexport type FactSubTone = (typeof FACT_SUB_TONES)[number];\n\nconst SIZE_CLASSES: Record<FactSize, { row: string; value: string }> = {\n md: { row: 'gap-4 py-3 [&:not(:first-child)]:shadow-[inset_0_1px_0_var(--hairline)]', value: 'text-body' },\n sm: { row: 'gap-4 py-2.5', value: 'text-label' },\n auto: {\n row: 'gap-4 py-3 lg:py-2.5 max-lg:[&:not(:first-child)]:shadow-[inset_0_1px_0_var(--hairline)]',\n value: 'text-body lg:text-label',\n },\n recap: { row: 'gap-3 py-[9px] [&:not(:first-child)]:shadow-[inset_0_1px_0_var(--hairline)]', value: 'text-label' },\n};\n\nconst SUB_TONE_CLASSES: Record<FactSubTone, string> = {\n subtle: 'text-(--subtle-foreground)',\n stale: 'text-(--stale)',\n};\n\n/\n The list that holds `div[ui-fact]` rows, as a native description list.\n \n @example\n * <dl uiFacts>\n * <div ui-fact label=\"Quantity\">500</div>\n * <div ui-fact label=\"Price\" sub=\"24/09 · Yahoo\">28,64 €</div>\n * </dl>\n /\n@Directive({\n selector: 'dl[uiFacts]',\n host: { '[class]': 'classes()' },\n})\nexport class UiFacts {\n readonly ruled = input(false, { transform: booleanAttribute });\n\n protected readonly classes = computed(() =>\n this.ruled() ? 'm-0 flex flex-col shadow-[inset_0_1px_0_var(--hairline)]' : 'm-0 flex flex-col',\n );\n}\n\n/\n One fact of a `dl[uiFacts]`: a label, its value (the projected content) and an optional sub-line\n * under the value.\n \n @example\n * <div ui-fact label=\"Price\" sub=\"24/09 · Yahoo\" subTone=\"stale\">28,64 €</div>\n */\n@Component({\n selector: 'div[ui-fact]',\n template: `\n <dt class=\"text-label text-(--muted-foreground)\">{{ label() }}</dt>\n <dd class=\"m-0 flex flex-col items-end text-right\">\n <span [class]=\"valueClasses()\"><ng-content /></span>\n @if (sub()) {\n <span [class]=\"subClasses()\">{{ sub() }}</span>\n }\n </dd>\n `,\n host: { '[class]': 'classes()' },\n})\nexport class UiFact {\n readonly label = input.required<string>();\n readonly sub = input<string>();\n readonly subTone = input<FactSubTone>('subtle');\n readonly size = input<FactSize>('md');\n\n protected readonly classes = computed(() => `flex items-baseline justify-between ${SIZE_CLASSES[this.size()].row}`);\n protected readonly valueClasses = computed(() => `${SIZE_CLASSES[this.size()].value} tabular-nums`);\n protected readonly subClasses = computed(() => `text-caption ${SUB_TONE_CLASSES[this.subTone()]}`);\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"joanroucoux-cairn-ui-fact.mjs","names":[],"sources":["../../../projects/ui/fact/fact.ts"],"sourcesContent":["import { Component, Directive, booleanAttribute, computed, input } from '@angular/core';\n\n/** Available fact row sizes. /\nexport const FACT_SIZES = ['md', 'sm', 'auto', 'recap'] as const;\nexport type FactSize = (typeof FACT_SIZES)[number];\n\n/* Color of the line under a fact value. `stale` flags an out-of-date figure. /\nexport const FACT_SUB_TONES = ['subtle', 'stale'] as const;\nexport type FactSubTone = (typeof FACT_SUB_TONES)[number];\n\nconst SIZE_CLASSES: Record<FactSize, { row: string; value: string }> = {\n md: { row: 'gap-4 py-3 [&:not(:first-child)]:shadow-[inset_0_1px_0_var(--hairline)]', value: 'text-body' },\n sm: { row: 'gap-4 py-2.5', value: 'text-label' },\n auto: {\n row: 'gap-4 py-3 lg:py-2.5 max-lg:[&:not(:first-child)]:shadow-[inset_0_1px_0_var(--hairline)]',\n value: 'text-body lg:text-label',\n },\n recap: { row: 'gap-3 py-[9px] [&:not(:first-child)]:shadow-[inset_0_1px_0_var(--hairline)]', value: 'text-label' },\n};\n\nconst SUB_TONE_CLASSES: Record<FactSubTone, string> = {\n subtle: 'text-(--subtle-foreground)',\n stale: 'text-(--stale)',\n};\n\n/\n The list that holds `div[ui-fact]` rows, as a native description list.\n \n @example\n * <dl uiFacts>\n * <div ui-fact label=\"Quantity\">500</div>\n * <div ui-fact label=\"Price\" sub=\"24/09 · Yahoo\">28,64 €</div>\n * </dl>\n /\n@Directive({\n selector: 'dl[uiFacts]',\n host: { '[class]': 'classes()' },\n})\nexport class UiFacts {\n readonly ruled = input(false, { transform: booleanAttribute });\n\n protected readonly classes = computed(() =>\n this.ruled() ? 'm-0 flex flex-col shadow-[inset_0_1px_0_var(--hairline)]' : 'm-0 flex flex-col',\n );\n}\n\n/\n One fact of a `dl[uiFacts]`: a label, its value (the projected content) and an optional sub-line\n * under the value.\n \n @example\n * <div ui-fact label=\"Price\" sub=\"24/09 · Yahoo\" subTone=\"stale\">28,64 €</div>\n */\n@Component({\n selector: 'div[ui-fact]',\n template: `\n <dt class=\"text-label text-(--muted-foreground)\">{{ label() }}</dt>\n <dd class=\"m-0 flex flex-col items-end text-right\">\n <span [class]=\"valueClasses()\"><ng-content /></span>\n @if (sub()) {\n <span [class]=\"subClasses()\">{{ sub() }}</span>\n }\n </dd>\n `,\n host: { '[class]': 'classes()' },\n})\nexport class UiFact {\n readonly label = input.required<string>();\n readonly sub = input<string>();\n readonly subTone = input<FactSubTone>('subtle');\n readonly size = input<FactSize>('md');\n\n protected readonly classes = computed(() => `flex items-baseline justify-between ${SIZE_CLASSES[this.size()].row}`);\n protected readonly valueClasses = computed(() => `${SIZE_CLASSES[this.size()].value} tabular-nums`);\n protected readonly subClasses = computed(() => `text-caption ${SUB_TONE_CLASSES[this.subTone()]}`);\n}\n"],"mappings":";;AAGA,MAAa,aAAa;CAAC;CAAM;CAAM;CAAQ;AAAO;AAItD,MAAa,iBAAiB,CAAC,UAAU,OAAO;AAGhD,MAAM,eAAiE;CACrE,IAAI;EAAE,KAAK;EAA2E,OAAO;CAAW;CACxG,IAAI;EAAE,KAAK;EAAgB,OAAO;CAAY;CAC9C,MAAM;EACJ,KAAK;EACL,OAAO;CACR;CACD,OAAO;EAAE,KAAK;EAA+E,OAAO;CAAY;AACjH;AAED,MAAM,mBAAgD;CACpD,QAAQ;CACR,OAAO;AACR;AAeD,IAAa,UAAb,MAAa,QAAO;CACT,QAAQ,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,QAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAExC,UAAU,eAC3B,KAAK,MAAK,IAAK,6DAA6D,qBAC7E,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CALU,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,EAAA,OAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,SAAA,YAAA,EAAA;EAAA,UAAA;CAAA,CAAA;;AAAP,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAO,YAAA,CAAA;EAJnB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM,EAAE,WAAW,YAAW;EAC/B,CAAA;;;;;;;;;;;AA6BD,IAAa,SAAb,MAAa,OAAM;CACR,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,MAAM,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CACrB,UAAU,MAAmB,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACtC,OAAO,MAAgB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAElB,UAAU,eAAe,uCAAuC,aAAa,KAAK,KAAI,EAAG,CAAC,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAChG,eAAe,eAAe,GAAG,aAAa,KAAK,KAAI,EAAG,CAAC,MAAK,gBAAgB,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAChF,aAAa,eAAe,gBAAgB,iBAAiB,KAAK,QAAO,MAAM,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CARvF,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAM,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAN,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAM,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,SAAA,YAAA,EAAA;EAAA,UAAA;EAAA,UAXP;;;;;;;;;EAQT,UAAA;CAAA,CAAA;;AAGU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAM,YAAA,CAAA;EAblB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;;;;;;;;;GASV,MAAM,EAAE,WAAW,YAAW;EAC/B,CAAA"}

package/fesm2022/joanroucoux-cairn-ui-field.mjs CHANGED Viewed

@@ -8,7 +8,7 @@ const nextId = (() => {
 var UiFieldLeading = class UiFieldLeading {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: UiFieldLeading,
 		deps: [],
@@ -16,7 +16,7 @@ var UiFieldLeading = class UiFieldLeading {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "14.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		type: UiFieldLeading,
 		isStandalone: true,
 		selector: "[uiFieldLeading]",
@@ -29,7 +29,7 @@ var UiFieldLeading = class UiFieldLeading {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.2",
 	ngImport: i0,
 	type: UiFieldLeading,
 	decorators: [{
@@ -46,7 +46,7 @@ i0.ɵɵngDeclareClassMetadata({
 var UiFieldTrailing = class UiFieldTrailing {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: UiFieldTrailing,
 		deps: [],
@@ -54,7 +54,7 @@ var UiFieldTrailing = class UiFieldTrailing {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "14.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		type: UiFieldTrailing,
 		isStandalone: true,
 		selector: "[uiFieldTrailing]",
@@ -64,7 +64,7 @@ var UiFieldTrailing = class UiFieldTrailing {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.2",
 	ngImport: i0,
 	type: UiFieldTrailing,
 	decorators: [{
@@ -130,7 +130,7 @@ var UiField = class UiField {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: UiField,
 		deps: [],
@@ -138,7 +138,7 @@ var UiField = class UiField {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		type: UiField,
 		isStandalone: true,
 		selector: "ui-field",
@@ -252,7 +252,7 @@ var UiField = class UiField {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.2",
 	ngImport: i0,
 	type: UiField,
 	decorators: [{

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

@@ -17,7 +17,7 @@ var UiFilterChips = class UiFilterChips {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: UiFilterChips,
 		deps: [],
@@ -25,7 +25,7 @@ var UiFilterChips = class UiFilterChips {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		type: UiFilterChips,
 		isStandalone: true,
 		selector: "ui-filter-chips",
@@ -91,7 +91,7 @@ var UiFilterChips = class UiFilterChips {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.2",
 	ngImport: i0,
 	type: UiFilterChips,
 	decorators: [{

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

@@ -19,7 +19,7 @@ var UiGroupHeader = class UiGroupHeader {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: UiGroupHeader,
 		deps: [],
@@ -27,7 +27,7 @@ var UiGroupHeader = class UiGroupHeader {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		type: UiGroupHeader,
 		isStandalone: true,
 		selector: "ui-group-header",
@@ -146,7 +146,7 @@ var UiGroupHeader = class UiGroupHeader {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.2",
 	ngImport: i0,
 	type: UiGroupHeader,
 	decorators: [{

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

	@@ -1 +1 @@
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"}
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 holdings\" 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"}

package/fesm2022/joanroucoux-cairn-ui-icon-toggle.mjs CHANGED Viewed

@@ -3,7 +3,7 @@ import { Directive } from "@angular/core";
 var UiIconToggle = class UiIconToggle {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: UiIconToggle,
 		deps: [],
@@ -11,7 +11,7 @@ var UiIconToggle = class UiIconToggle {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "14.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		type: UiIconToggle,
 		isStandalone: true,
 		selector: "button[uiIconToggle]",
@@ -24,7 +24,7 @@ var UiIconToggle = class UiIconToggle {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.2",
 	ngImport: i0,
 	type: UiIconToggle,
 	decorators: [{

package/fesm2022/joanroucoux-cairn-ui-input.mjs CHANGED Viewed

@@ -28,7 +28,7 @@ var UiInput = class UiInput {
 	classes = computed(() => `${CONTROL_BASE_CLASSES} ${SEARCH_CLASSES} ${CONTROL_SURFACE_CLASSES[this.surface()]} ${CONTROL_SIZE_CLASSES[this.size()]}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: UiInput,
 		deps: [],
@@ -36,7 +36,7 @@ var UiInput = class UiInput {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		type: UiInput,
 		isStandalone: true,
 		selector: "input[uiInput]",
@@ -80,7 +80,7 @@ var UiInput = class UiInput {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.2",
 	ngImport: i0,
 	type: UiInput,
 	decorators: [{
@@ -134,7 +134,7 @@ var UiTextarea = class UiTextarea {
 	touched = input(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: UiTextarea,
 		deps: [],
@@ -142,7 +142,7 @@ var UiTextarea = class UiTextarea {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		type: UiTextarea,
 		isStandalone: true,
 		selector: "textarea[uiTextarea]",
@@ -172,7 +172,7 @@ var UiTextarea = class UiTextarea {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.2",
 	ngImport: i0,
 	type: UiTextarea,
 	decorators: [{

package/fesm2022/joanroucoux-cairn-ui-input.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"joanroucoux-cairn-ui-input.mjs","names":[],"sources":["../../../projects/ui/input/input.ts"],"sourcesContent":["import { Directive, computed, forwardRef, input } from '@angular/core';\n\nimport { UI_CONTROL, type UiControl, type UiControlError } from '@joanroucoux/cairn-ui/control';\n\n/** Available control sizes. /\nexport const CONTROL_SIZES = ['sm', 'md', 'lg', 'xl'] as const;\nexport type ControlSize = (typeof CONTROL_SIZES)[number];\n\nexport const CONTROL_BASE_CLASSES =\n 'w-full rounded-control px-3 text-body text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] placeholder:text-(--muted-foreground) focus-visible:shadow-[inset_0_0_0_2px_var(--ring)] aria-invalid:shadow-[inset_0_0_0_2px_var(--negative)] disabled:cursor-not-allowed disabled:opacity-50';\n\nexport const CONTROL_SURFACES = ['background', 'card'] as const;\nexport type ControlSurface = (typeof CONTROL_SURFACES)[number];\n\nexport const CONTROL_SURFACE_CLASSES: Record<ControlSurface, string> = {\n background: 'bg-(--background)',\n card: 'bg-(--card)',\n};\n\nexport const CONTROL_SIZE_CLASSES: Record<ControlSize, string> = {\n sm: 'h-9',\n md: 'min-h-(--row-min)',\n lg: 'min-h-12 lg:min-h-(--row-min)',\n xl: 'h-12 lg:h-11',\n};\n\nconst SEARCH_CLASSES = '[&::-webkit-search-cancel-button]:appearance-none';\n\n/\n Styled native text input. The host stays a plain `<input>`, so every forms flavor and native\n * attribute keeps working. Declares the `errors` and `touched` inputs Angular's `[formField]` fills,\n * so a surrounding `ui-field` can show the message.\n \n @example\n * <input uiInput type=\"email\" placeholder=\"you@~~example~~.com\" />\n /\n@Directive({\n selector: 'input[uiInput]',\n host: {\n '[class]': 'classes()',\n },\n providers: [{ provide: UI_CONTROL, useExisting: forwardRef(() => UiInput) }],\n})\nexport class UiInput implements UiControl {\n readonly size = input<ControlSize>('md');\n readonly surface = input<ControlSurface>('background');\n readonly errors = input<readonly UiControlError[]>([]);\n readonly touched = input(false);\n\n protected readonly classes = computed(\n () =>\n `${CONTROL_BASE_CLASSES} ${SEARCH_CLASSES} ${CONTROL_SURFACE_CLASSES[this.surface()]} ${CONTROL_SIZE_CLASSES[this.size()]}`,\n );\n}\n\n/\n Styled native textarea. It takes no size: it grows from a minimum height. Declares the `errors`\n * and `touched` inputs Angular's `[formField]` fills, so a surrounding `ui-field` can show the message.\n \n @example\n * <textarea uiTextarea maxlength=\"280\"></textarea>\n */\n@Directive({\n selector: 'textarea[uiTextarea]',\n host: {\n class: `${CONTROL_BASE_CLASSES} bg-(--background) min-h-24 py-2`,\n },\n providers: [{ provide: UI_CONTROL, useExisting: forwardRef(() => UiTextarea) }],\n})\nexport class UiTextarea implements UiControl {\n readonly errors = input<readonly UiControlError[]>([]);\n readonly touched = input(false);\n}\n"],"mappings":";;;AAKA,MAAa,gBAAgB;CAAC;CAAM;CAAM;CAAM;AAAI;~~AAGpD~~,MAAa,uBACX;AAEF,MAAa,mBAAmB,CAAC,cAAc,MAAM;~~AAGrD~~,MAAa,0BAA0D;CACrE,YAAY;CACZ,MAAM;AACP;~~AAED~~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"}
1	+ {"version":3,"file":"joanroucoux-cairn-ui-input.mjs","names":[],"sources":["../../../projects/ui/input/input.ts"],"sourcesContent":["import { Directive, computed, forwardRef, input } from '@angular/core';\n\nimport { UI_CONTROL, type UiControl, type UiControlError } from '@joanroucoux/cairn-ui/control';\n\n/** Available control sizes. /\nexport const CONTROL_SIZES = ['sm', 'md', 'lg', 'xl'] as const;\nexport type ControlSize = (typeof CONTROL_SIZES)[number];\n\n/* @internal Shared with `select` and `choice-chips`. /\nexport const CONTROL_BASE_CLASSES =\n 'w-full rounded-control px-3 text-body text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] placeholder:text-(--muted-foreground) focus-visible:shadow-[inset_0_0_0_2px_var(--ring)] aria-invalid:shadow-[inset_0_0_0_2px_var(--negative)] disabled:cursor-not-allowed disabled:opacity-50';\n\nexport const CONTROL_SURFACES = ['background', 'card'] as const;\nexport type ControlSurface = (typeof CONTROL_SURFACES)[number];\n\n/* @internal Shared with `select` and `choice-chips`. /\nexport const CONTROL_SURFACE_CLASSES: Record<ControlSurface, string> = {\n background: 'bg-(--background)',\n card: 'bg-(--card)',\n};\n\n/* @internal Shared with `select` and `choice-chips`. /\nexport const CONTROL_SIZE_CLASSES: Record<ControlSize, string> = {\n sm: 'h-9',\n md: 'min-h-(--row-min)',\n lg: 'min-h-12 lg:min-h-(--row-min)',\n xl: 'h-12 lg:h-11',\n};\n\nconst SEARCH_CLASSES = '[&::-webkit-search-cancel-button]:appearance-none';\n\n/\n Styled native text input. The host stays a plain `<input>`, so every forms flavor and native\n * attribute keeps working. Declares the `errors` and `touched` inputs Angular's `[formField]` fills,\n * so a surrounding `ui-field` can show the message.\n \n @example\n * <input uiInput type=\"email\" placeholder=\"you@contoso.com\" />\n /\n@Directive({\n selector: 'input[uiInput]',\n host: {\n '[class]': 'classes()',\n },\n providers: [{ provide: UI_CONTROL, useExisting: forwardRef(() => UiInput) }],\n})\nexport class UiInput implements UiControl {\n readonly size = input<ControlSize>('md');\n readonly surface = input<ControlSurface>('background');\n readonly errors = input<readonly UiControlError[]>([]);\n readonly touched = input(false);\n\n protected readonly classes = computed(\n () =>\n `${CONTROL_BASE_CLASSES} ${SEARCH_CLASSES} ${CONTROL_SURFACE_CLASSES[this.surface()]} ${CONTROL_SIZE_CLASSES[this.size()]}`,\n );\n}\n\n/\n Styled native textarea. It takes no size: it grows from a minimum height. Declares the `errors`\n * and `touched` inputs Angular's `[formField]` fills, so a surrounding `ui-field` can show the message.\n \n @example\n * <textarea uiTextarea maxlength=\"280\"></textarea>\n */\n@Directive({\n selector: 'textarea[uiTextarea]',\n host: {\n class: `${CONTROL_BASE_CLASSES} bg-(--background) min-h-24 py-2`,\n },\n providers: [{ provide: UI_CONTROL, useExisting: forwardRef(() => UiTextarea) }],\n})\nexport class UiTextarea implements UiControl {\n readonly errors = input<readonly UiControlError[]>([]);\n readonly touched = input(false);\n}\n"],"mappings":"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"}

package/fesm2022/joanroucoux-cairn-ui-line-chart.mjs CHANGED Viewed

@@ -550,7 +550,7 @@ var UiLineChart = class UiLineChart {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: UiLineChart,
 		deps: [],
@@ -558,7 +558,7 @@ var UiLineChart = class UiLineChart {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		type: UiLineChart,
 		isStandalone: true,
 		selector: "ui-line-chart",
@@ -858,7 +858,7 @@ var UiLineChart = class UiLineChart {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.2",
 	ngImport: i0,
 	type: UiLineChart,
 	decorators: [{

package/fesm2022/joanroucoux-cairn-ui-menu.mjs CHANGED Viewed

@@ -30,7 +30,7 @@ var UiMenuItem = class UiMenuItem {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: UiMenuItem,
 		deps: [],
@@ -38,7 +38,7 @@ var UiMenuItem = class UiMenuItem {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		type: UiMenuItem,
 		isStandalone: true,
 		selector: "button[uiMenuItem]",
@@ -72,7 +72,7 @@ var UiMenuItem = class UiMenuItem {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.2",
 	ngImport: i0,
 	type: UiMenuItem,
 	decorators: [{
@@ -184,11 +184,18 @@ var UiMenu = class UiMenu {
 	#isSheet() {
 		return this.sheet() && typeof window.matchMedia === "function" && !window.matchMedia("(min-width: 64rem)").matches;
 	}
+	#layoutWidth() {
+		const style = getComputedStyle(this.#host);
+		const width = parseFloat(style.width);
+		if (Number.isNaN(width)) return this.#host.offsetWidth;
+		if (style.boxSizing === "border-box") return width;
+		return width + parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
+	}
 	#position(trigger) {
 		const margin = 8;
 		const triggerRect = trigger.getBoundingClientRect();
 		const menuRect = {
-			width: this.#host.offsetWidth,
+			width: this.#layoutWidth(),
 			height: this.#host.offsetHeight
 		};
 		const fitsBelow = window.innerHeight - triggerRect.bottom >= menuRect.height + margin;
@@ -203,7 +210,7 @@ var UiMenu = class UiMenu {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: UiMenu,
 		deps: [],
@@ -211,7 +218,7 @@ var UiMenu = class UiMenu {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		type: UiMenu,
 		isStandalone: true,
 		selector: "ui-menu",
@@ -280,7 +287,7 @@ var UiMenu = class UiMenu {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.2",
 	ngImport: i0,
 	type: UiMenu,
 	decorators: [{
@@ -356,7 +363,7 @@ var UiMenuTrigger = class UiMenuTrigger {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: UiMenuTrigger,
 		deps: [],
@@ -364,7 +371,7 @@ var UiMenuTrigger = class UiMenuTrigger {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		type: UiMenuTrigger,
 		isStandalone: true,
 		selector: "[uiMenuTrigger]",
@@ -388,7 +395,7 @@ var UiMenuTrigger = class UiMenuTrigger {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.2",
 	ngImport: i0,
 	type: UiMenuTrigger,
 	decorators: [{

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

	@@ -1 +1 @@
1	- {"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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"}
1	+ {"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 holding</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=\"Holding actions\">\n * <button uiMenuItem (click)=\"edit()\">Edit</button>\n * <button uiMenuItem destructive (click)=\"remove()\">Delete the holding</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 #layoutWidth(): number {\n const style = getComputedStyle(this.#host);\n const width = parseFloat(style.width);\n\n if (Number.isNaN(width)) {\n return this.#host.offsetWidth;\n }\n\n if (style.boxSizing === 'border-box') {\n return width;\n }\n\n return (\n width +\n parseFloat(style.paddingLeft) +\n parseFloat(style.paddingRight) +\n parseFloat(style.borderLeftWidth) +\n parseFloat(style.borderRightWidth)\n );\n }\n\n #position(trigger: HTMLElement): void {\n const margin = 8;\n const triggerRect = trigger.getBoundingClientRect();\n const menuRect = { width: this.#layoutWidth(), 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 CHANGED Viewed

@@ -32,7 +32,7 @@ var UiMeter = class UiMeter {
 	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.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: UiMeter,
 		deps: [],
@@ -40,7 +40,7 @@ var UiMeter = class UiMeter {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.1.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		type: UiMeter,
 		isStandalone: true,
 		selector: "ui-meter",
@@ -101,7 +101,7 @@ var UiMeter = class UiMeter {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.2",
 	ngImport: i0,
 	type: UiMeter,
 	decorators: [{

package/fesm2022/joanroucoux-cairn-ui-motion.mjs CHANGED Viewed

@@ -25,7 +25,7 @@ var FlipItems = class FlipItems {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: FlipItems,
 		deps: [],
@@ -33,14 +33,14 @@ var FlipItems = class FlipItems {
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
 		minVersion: "12.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: FlipItems
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.2",
 	ngImport: i0,
 	type: FlipItems,
 	decorators: [{ type: Injectable }]
@@ -151,7 +151,7 @@ var UiFlipList = class UiFlipList {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: UiFlipList,
 		deps: [],
@@ -159,7 +159,7 @@ var UiFlipList = class UiFlipList {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "14.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		type: UiFlipList,
 		isStandalone: true,
 		selector: "[uiFlipList]",
@@ -169,7 +169,7 @@ var UiFlipList = class UiFlipList {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.2",
 	ngImport: i0,
 	type: UiFlipList,
 	decorators: [{
@@ -192,7 +192,7 @@ var UiFlipItem = class UiFlipItem {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: UiFlipItem,
 		deps: [],
@@ -200,7 +200,7 @@ var UiFlipItem = class UiFlipItem {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "14.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		type: UiFlipItem,
 		isStandalone: true,
 		selector: "[uiFlipItem]",
@@ -209,7 +209,7 @@ var UiFlipItem = class UiFlipItem {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.2",
 	ngImport: i0,
 	type: UiFlipItem,
 	decorators: [{
@@ -332,7 +332,7 @@ var UiHighlight = class UiHighlight {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		ngImport: i0,
 		type: UiHighlight,
 		deps: [],
@@ -340,7 +340,7 @@ var UiHighlight = class UiHighlight {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.1",
+		version: "22.2.2",
 		type: UiHighlight,
 		isStandalone: true,
 		selector: "[uiHighlight]",
@@ -357,7 +357,7 @@ var UiHighlight = class UiHighlight {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.1",
+	version: "22.2.2",
 	ngImport: i0,
 	type: UiHighlight,
 	decorators: [{