@hyalo/angular 0.0.0-stage → 0.3.1

package/fesm2022/hyalo-angular-avatar.mjs

@@ -0,0 +1,169 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, signal } from "@angular/core";
+var HyAvatar = class HyAvatar {
+	name = input.required(...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	src = input("", ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	failedSrc = signal(null, ...ngDevMode ? [{ debugName: "failedSrc" }] : /* istanbul ignore next */ []);
+	initials = computed(() => this.name().trim().split(/\s+/u).slice(0, 2).map((part) => Array.from(part)[0] ?? "").join(""), ...ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyAvatar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyAvatar,
+		isStandalone: true,
+		selector: "hy-avatar",
+		inputs: {
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			src: {
+				classPropertyName: "src",
+				publicName: "src",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "img" },
+			properties: {
+				"attr.aria-label": "name()",
+				"attr.data-size": "size()"
+			}
+		},
+		ngImport: i0,
+		template: "@if (src() && failedSrc() !== src()) {\r\n  <img [src]=\"src()\" alt=\"\" (error)=\"failedSrc.set(src())\" />\r\n} @else {\r\n  <span aria-hidden=\"true\">{{ initials() }}</span>\r\n}\r\n",
+		styles: [":host{display:inline-grid;place-items:center;inline-size:var(--hy-avatar-size, 2.5rem);block-size:var(--hy-avatar-size, 2.5rem);flex-shrink:0;overflow:clip;border-radius:50%;background:var(--hy-primary-wash);color:var(--hy-primary);border:1px solid var(--hy-line);font-weight:600}:host([data-size=\"sm\"]){--hy-avatar-size: 2rem;font-size:var(--hy-step--1)}:host([data-size=\"lg\"]){--hy-avatar-size: 3.5rem}img{inline-size:100%;block-size:100%;object-fit:cover}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyAvatar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-avatar",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				role: "img",
+				"[attr.aria-label]": "name()",
+				"[attr.data-size]": "size()"
+			},
+			template: "@if (src() && failedSrc() !== src()) {\r\n  <img [src]=\"src()\" alt=\"\" (error)=\"failedSrc.set(src())\" />\r\n} @else {\r\n  <span aria-hidden=\"true\">{{ initials() }}</span>\r\n}\r\n",
+			styles: [":host{display:inline-grid;place-items:center;inline-size:var(--hy-avatar-size, 2.5rem);block-size:var(--hy-avatar-size, 2.5rem);flex-shrink:0;overflow:clip;border-radius:50%;background:var(--hy-primary-wash);color:var(--hy-primary);border:1px solid var(--hy-line);font-weight:600}:host([data-size=\"sm\"]){--hy-avatar-size: 2rem;font-size:var(--hy-step--1)}:host([data-size=\"lg\"]){--hy-avatar-size: 3.5rem}img{inline-size:100%;block-size:100%;object-fit:cover}\n"]
+		}]
+	}],
+	propDecorators: {
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: true
+			}]
+		}],
+		src: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "src",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}]
+	}
+});
+var HyAvatarGroup = class HyAvatarGroup {
+	label = input("Team", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyAvatarGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyAvatarGroup,
+		isStandalone: true,
+		selector: "hy-avatar-group",
+		inputs: { label: {
+			classPropertyName: "label",
+			publicName: "label",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "role": "group" },
+			properties: { "attr.aria-label": "label()" }
+		},
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: [":host{display:flex;flex-wrap:wrap;gap:var(--hy-space-1)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyAvatarGroup,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-avatar-group",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				role: "group",
+				"[attr.aria-label]": "label()"
+			},
+			template: "<ng-content />",
+			styles: [":host{display:flex;flex-wrap:wrap;gap:var(--hy-space-1)}\n"]
+		}]
+	}],
+	propDecorators: { label: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "label",
+			required: false
+		}]
+	}] }
+});
+const HY_AVATAR = [HyAvatar, HyAvatarGroup];
+export { HY_AVATAR, HyAvatar, HyAvatarGroup };
+
+//# sourceMappingURL=hyalo-angular-avatar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-avatar.mjs","names":[],"sources":["../../../projects/hyalo/avatar/avatar.ts","../../../projects/hyalo/avatar/avatar.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, signal } from '@angular/core';\r\nimport type { HySize } from '@hyalo/angular/core';\r\n@Component({\r\n  selector: 'hy-avatar',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: { role: 'img', '[attr.aria-label]': 'name()', '[attr.data-size]': 'size()' },\r\n  templateUrl: './avatar.html',\r\n  styleUrl: './avatar.css',\r\n})\r\nexport class HyAvatar {\r\n  readonly name = input.required<string>();\r\n  readonly src = input('');\r\n  readonly size = input<HySize>('md');\r\n  protected readonly failedSrc = signal<string | null>(null);\r\n  protected readonly initials = computed(() =>\r\n    this.name()\r\n      .trim()\r\n      .split(/\\s+/u)\r\n      .slice(0, 2)\r\n      .map((part) => Array.from(part)[0] ?? '')\r\n      .join(''),\r\n  );\r\n}\r\n@Component({\r\n  selector: 'hy-avatar-group',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: { role: 'group', '[attr.aria-label]': 'label()' },\r\n  template: '<ng-content />',\r\n  styles: ':host { display:flex; flex-wrap:wrap; gap:var(--hy-space-1); }',\r\n})\r\nexport class HyAvatarGroup {\r\n  readonly label = input('Team');\r\n}\r\nexport const HY_AVATAR = [HyAvatar, HyAvatarGroup] as const;\r\n","@if (src() && failedSrc() !== src()) {\r\n  <img [src]=\"src()\" alt=\"\" (error)=\"failedSrc.set(src())\" />\r\n} @else {\r\n  <span aria-hidden=\"true\">{{ initials() }}</span>\r\n}\r\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-badge.mjs

@@ -0,0 +1,268 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, inject, input, model, output } from "@angular/core";
+import * as i1 from "@hyalo/angular/core";
+import { HY_CONFIG, HyMaterialDirective } from "@hyalo/angular/core";
+var HyBadge = class HyBadge {
+	config = inject(HY_CONFIG);
+	tone = input(this.config.tone, ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+	size = input(this.config.size, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	removable = input(false, {
+		...ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	removeLabel = input("Remove", ...ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []);
+	removed = output();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyBadge,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyBadge,
+		isStandalone: true,
+		selector: "hy-badge",
+		inputs: {
+			tone: {
+				classPropertyName: "tone",
+				publicName: "tone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			removable: {
+				classPropertyName: "removable",
+				publicName: "removable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			removeLabel: {
+				classPropertyName: "removeLabel",
+				publicName: "removeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { removed: "removed" },
+		host: { properties: {
+			"attr.data-tone": "tone()",
+			"attr.data-size": "size()"
+		} },
+		hostDirectives: [{
+			directive: i1.HyMaterialDirective,
+			inputs: ["hyMaterial", "material"]
+		}],
+		ngImport: i0,
+		template: "<ng-content />\r\n@if (removable()) {\r\n  <button type=\"button\" [attr.aria-label]=\"removeLabel()\" (click)=\"removed.emit()\">×</button>\r\n}\r\n",
+		styles: [":host{display:inline-flex;align-items:center;gap:var(--hy-space-2);padding:.25em .75em;border-radius:var(--hy-radius-pill);font-size:var(--hy-step--1);color:var(--_tone, var(--hy-ink))}:host([data-tone=\"primary\"]){--_tone: var(--hy-primary)}:host([data-tone=\"secondary\"]){--_tone: var(--hy-secondary, var(--hy-primary))}:host([data-tone=\"success\"]){--_tone: var(--hy-success)}:host([data-tone=\"warning\"]){--_tone: var(--hy-warning)}:host([data-tone=\"danger\"]){--_tone: var(--hy-danger)}:host([data-size=\"sm\"]){font-size:.75rem}:host([data-size=\"lg\"]){font-size:var(--hy-step-0)}button{display:grid;place-items:center;min-inline-size:2rem;min-block-size:2rem;margin-block:-.25em;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyBadge,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-badge",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			hostDirectives: [{
+				directive: HyMaterialDirective,
+				inputs: ["hyMaterial: material"]
+			}],
+			host: {
+				"[attr.data-tone]": "tone()",
+				"[attr.data-size]": "size()"
+			},
+			template: "<ng-content />\r\n@if (removable()) {\r\n  <button type=\"button\" [attr.aria-label]=\"removeLabel()\" (click)=\"removed.emit()\">×</button>\r\n}\r\n",
+			styles: [":host{display:inline-flex;align-items:center;gap:var(--hy-space-2);padding:.25em .75em;border-radius:var(--hy-radius-pill);font-size:var(--hy-step--1);color:var(--_tone, var(--hy-ink))}:host([data-tone=\"primary\"]){--_tone: var(--hy-primary)}:host([data-tone=\"secondary\"]){--_tone: var(--hy-secondary, var(--hy-primary))}:host([data-tone=\"success\"]){--_tone: var(--hy-success)}:host([data-tone=\"warning\"]){--_tone: var(--hy-warning)}:host([data-tone=\"danger\"]){--_tone: var(--hy-danger)}:host([data-size=\"sm\"]){font-size:.75rem}:host([data-size=\"lg\"]){font-size:var(--hy-step-0)}button{display:grid;place-items:center;min-inline-size:2rem;min-block-size:2rem;margin-block:-.25em;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}\n"]
+		}]
+	}],
+	propDecorators: {
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		removable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removable",
+				required: false
+			}]
+		}],
+		removeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removeLabel",
+				required: false
+			}]
+		}],
+		removed: [{
+			type: i0.Output,
+			args: ["removed"]
+		}]
+	}
+});
+var HyChip = class HyChip {
+	config = inject(HY_CONFIG);
+	tone = input(this.config.tone, ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+	size = input(this.config.size, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	selected = model(false, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyChip,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyChip,
+		isStandalone: true,
+		selector: "hy-chip",
+		inputs: {
+			tone: {
+				classPropertyName: "tone",
+				publicName: "tone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selected: {
+				classPropertyName: "selected",
+				publicName: "selected",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { selected: "selectedChange" },
+		host: { properties: {
+			"attr.data-tone": "tone()",
+			"attr.data-size": "size()",
+			"attr.data-selected": "selected()"
+		} },
+		hostDirectives: [{
+			directive: i1.HyMaterialDirective,
+			inputs: ["hyMaterial", "material"]
+		}],
+		ngImport: i0,
+		template: "<button\r\n  type=\"button\"\r\n  [disabled]=\"disabled()\"\r\n  [attr.aria-pressed]=\"selected()\"\r\n  (click)=\"selected.set(!selected())\"\r\n>\r\n  <span class=\"check\" aria-hidden=\"true\">✓</span><ng-content />\r\n</button>\r\n",
+		styles: [":host{display:inline-flex;align-items:center;gap:var(--hy-space-2);padding:.25em .75em;border-radius:var(--hy-radius-pill);font-size:var(--hy-step--1);color:var(--_tone, var(--hy-ink))}:host([data-tone=\"primary\"]){--_tone: var(--hy-primary)}:host([data-tone=\"secondary\"]){--_tone: var(--hy-secondary, var(--hy-primary))}:host([data-tone=\"success\"]){--_tone: var(--hy-success)}:host([data-tone=\"warning\"]){--_tone: var(--hy-warning)}:host([data-tone=\"danger\"]){--_tone: var(--hy-danger)}:host([data-size=\"sm\"]){font-size:.75rem}:host([data-size=\"lg\"]){font-size:var(--hy-step-0)}button{display:grid;place-items:center;min-inline-size:2rem;min-block-size:2rem;margin-block:-.25em;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}\n", ":host{padding:0;border-color:var(--hy-line-strong)}button{display:flex;align-items:center;gap:var(--hy-space-2);padding:var(--hy-space-1) var(--hy-space-3);min-block-size:2.25rem;margin:0;border-radius:inherit;transition:background-color var(--hy-dur-quick) ease}:host([data-selected=\"true\"]){outline:1px solid var(--_tone, var(--hy-primary));outline-offset:-1px}:host([data-selected=\"true\"]) button{background:color-mix(in srgb,var(--_tone, var(--hy-primary)) 12%,transparent)}.check{opacity:0;inline-size:.8em}:host([data-selected=\"true\"]) .check{opacity:1}button:disabled{opacity:.5;cursor:default}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyChip,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-chip",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			hostDirectives: [{
+				directive: HyMaterialDirective,
+				inputs: ["hyMaterial: material"]
+			}],
+			host: {
+				"[attr.data-tone]": "tone()",
+				"[attr.data-size]": "size()",
+				"[attr.data-selected]": "selected()"
+			},
+			template: "<button\r\n  type=\"button\"\r\n  [disabled]=\"disabled()\"\r\n  [attr.aria-pressed]=\"selected()\"\r\n  (click)=\"selected.set(!selected())\"\r\n>\r\n  <span class=\"check\" aria-hidden=\"true\">✓</span><ng-content />\r\n</button>\r\n",
+			styles: [":host{display:inline-flex;align-items:center;gap:var(--hy-space-2);padding:.25em .75em;border-radius:var(--hy-radius-pill);font-size:var(--hy-step--1);color:var(--_tone, var(--hy-ink))}:host([data-tone=\"primary\"]){--_tone: var(--hy-primary)}:host([data-tone=\"secondary\"]){--_tone: var(--hy-secondary, var(--hy-primary))}:host([data-tone=\"success\"]){--_tone: var(--hy-success)}:host([data-tone=\"warning\"]){--_tone: var(--hy-warning)}:host([data-tone=\"danger\"]){--_tone: var(--hy-danger)}:host([data-size=\"sm\"]){font-size:.75rem}:host([data-size=\"lg\"]){font-size:var(--hy-step-0)}button{display:grid;place-items:center;min-inline-size:2rem;min-block-size:2rem;margin-block:-.25em;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}\n", ":host{padding:0;border-color:var(--hy-line-strong)}button{display:flex;align-items:center;gap:var(--hy-space-2);padding:var(--hy-space-1) var(--hy-space-3);min-block-size:2.25rem;margin:0;border-radius:inherit;transition:background-color var(--hy-dur-quick) ease}:host([data-selected=\"true\"]){outline:1px solid var(--_tone, var(--hy-primary));outline-offset:-1px}:host([data-selected=\"true\"]) button{background:color-mix(in srgb,var(--_tone, var(--hy-primary)) 12%,transparent)}.check{opacity:0;inline-size:.8em}:host([data-selected=\"true\"]) .check{opacity:1}button:disabled{opacity:.5;cursor:default}\n"]
+		}]
+	}],
+	propDecorators: {
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selected",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectedChange"]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
+const HY_BADGE = [HyBadge, HyChip];
+export { HY_BADGE, HyBadge, HyChip };
+
+//# sourceMappingURL=hyalo-angular-badge.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-badge.mjs","names":[],"sources":["../../../projects/hyalo/badge/badge.ts","../../../projects/hyalo/badge/badge.html","../../../projects/hyalo/badge/chip.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  booleanAttribute,\r\n  inject,\r\n  input,\r\n  model,\r\n  output,\r\n} from '@angular/core';\r\nimport { HY_CONFIG, HyMaterialDirective, type HySize, type HyTone } from '@hyalo/angular/core';\r\n@Component({\r\n  selector: 'hy-badge',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  hostDirectives: [{ directive: HyMaterialDirective, inputs: ['hyMaterial: material'] }],\r\n  host: { '[attr.data-tone]': 'tone()', '[attr.data-size]': 'size()' },\r\n  templateUrl: './badge.html',\r\n  styleUrl: './badge.css',\r\n})\r\nexport class HyBadge {\r\n  private readonly config = inject(HY_CONFIG);\r\n  readonly tone = input<HyTone>(this.config.tone);\r\n  readonly size = input<HySize>(this.config.size);\r\n  readonly removable = input(false, { transform: booleanAttribute });\r\n  readonly removeLabel = input('Remove');\r\n  readonly removed = output<void>();\r\n}\r\n/** A native toggle button for selectable filters. */\r\n@Component({\r\n  selector: 'hy-chip',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  hostDirectives: [{ directive: HyMaterialDirective, inputs: ['hyMaterial: material'] }],\r\n  host: {\r\n    '[attr.data-tone]': 'tone()',\r\n    '[attr.data-size]': 'size()',\r\n    '[attr.data-selected]': 'selected()',\r\n  },\r\n  templateUrl: './chip.html',\r\n  styleUrls: ['./badge.css', './chip.css'],\r\n})\r\nexport class HyChip {\r\n  private readonly config = inject(HY_CONFIG);\r\n  readonly tone = input<HyTone>(this.config.tone);\r\n  readonly size = input<HySize>(this.config.size);\r\n  readonly selected = model(false);\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n}\r\nexport const HY_BADGE = [HyBadge, HyChip] as const;\r\n","<ng-content />\r\n@if (removable()) {\r\n  <button type=\"button\" [attr.aria-label]=\"removeLabel()\" (click)=\"removed.emit()\">×</button>\r\n}\r\n","<button\r\n  type=\"button\"\r\n  [disabled]=\"disabled()\"\r\n  [attr.aria-pressed]=\"selected()\"\r\n  (click)=\"selected.set(!selected())\"\r\n>\r\n  <span class=\"check\" aria-hidden=\"true\">✓</span><ng-content />\r\n</button>\r\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-bento.mjs

@@ -0,0 +1,132 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, input, numberAttribute } from "@angular/core";
+var HyBento = class HyBento {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyBento,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HyBento,
+		isStandalone: true,
+		selector: "hy-bento",
+		ngImport: i0,
+		template: "<div class=\"grid\"><ng-content /></div>\r\n",
+		styles: [":host{display:block;container-type:inline-size}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--hy-space-4)}@container (max-width:38rem){.grid{grid-template-columns:minmax(0,1fr);--hy-bento-span: 1}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyBento,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-bento",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"grid\"><ng-content /></div>\r\n",
+			styles: [":host{display:block;container-type:inline-size}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--hy-space-4)}@container (max-width:38rem){.grid{grid-template-columns:minmax(0,1fr);--hy-bento-span: 1}}\n"]
+		}]
+	}]
+});
+var HyBentoTile = class HyBentoTile {
+	columns = input(1, {
+		...ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	rows = input(1, {
+		...ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	get safeColumns() {
+		return Math.min(3, Math.max(1, Math.floor(this.columns()) || 1));
+	}
+	get safeRows() {
+		return Math.min(6, Math.max(1, Math.floor(this.rows()) || 1));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyBentoTile,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyBentoTile,
+		isStandalone: true,
+		selector: "[hyBentoTile]",
+		inputs: {
+			columns: {
+				classPropertyName: "columns",
+				publicName: "columns",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rows: {
+				classPropertyName: "rows",
+				publicName: "rows",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"style.--hy-bento-columns": "safeColumns",
+			"style.grid-row": "\"span \"+safeRows",
+			"style.grid-column": "\"span var(--hy-bento-span, \"+safeColumns+\")\"",
+			"style.min-inline-size": "\"0\""
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyBentoTile,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[hyBentoTile]",
+			host: {
+				"[style.--hy-bento-columns]": "safeColumns",
+				"[style.grid-row]": "\"span \"+safeRows",
+				"[style.grid-column]": "\"span var(--hy-bento-span, \"+safeColumns+\")\"",
+				"[style.min-inline-size]": "\"0\""
+			}
+		}]
+	}],
+	propDecorators: {
+		columns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "columns",
+				required: false
+			}]
+		}],
+		rows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rows",
+				required: false
+			}]
+		}]
+	}
+});
+const HY_BENTO = [HyBento, HyBentoTile];
+export { HY_BENTO, HyBento, HyBentoTile };
+
+//# sourceMappingURL=hyalo-angular-bento.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-bento.mjs","names":[],"sources":["../../../projects/hyalo/bento/bento.ts","../../../projects/hyalo/bento/bento.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  Directive,\r\n  input,\r\n  numberAttribute,\r\n} from '@angular/core';\r\n@Component({\r\n  selector: 'hy-bento',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './bento.html',\r\n  styleUrl: './bento.css',\r\n})\r\nexport class HyBento {}\r\n@Directive({\r\n  selector: '[hyBentoTile]',\r\n  host: {\r\n    '[style.--hy-bento-columns]': 'safeColumns',\r\n    '[style.grid-row]': '\"span \"+safeRows',\r\n    '[style.grid-column]': '\"span var(--hy-bento-span, \"+safeColumns+\")\"',\r\n    '[style.min-inline-size]': '\"0\"',\r\n  },\r\n})\r\nexport class HyBentoTile {\r\n  readonly columns = input(1, { transform: numberAttribute });\r\n  readonly rows = input(1, { transform: numberAttribute });\r\n  get safeColumns(): number {\r\n    return Math.min(3, Math.max(1, Math.floor(this.columns()) || 1));\r\n  }\r\n  get safeRows(): number {\r\n    return Math.min(6, Math.max(1, Math.floor(this.rows()) || 1));\r\n  }\r\n}\r\nexport const HY_BENTO = [HyBento, HyBentoTile] as const;\r\n","<div class=\"grid\"><ng-content /></div>\r\n"],"mappings":";;AAaA,IAAa,UAAb,MAAa,QAAO;CAAP,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,UAAA;EAAA,UCbpB;EACA,QAAA,CAAA,qOAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADYa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAO,YAAA,CAAA;EANnB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAU,iBACH,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,qOAAA;EAAA,CAAA;;;AAcjD,IAAa,cAAb,MAAa,YAAW;CACb,UAAU,MAAM,GAAC;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EAAI,WAAW;CAAe,CAAA;CAC/C,OAAO,MAAM,GAAC;EAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;EAAI,WAAW;CAAe,CAAA;CACrD,IAAI,cAAW;EACb,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,QAAO,CAAE,KAAK,CAAC,CAAC;CACjE;CACA,IAAI,WAAQ;EACV,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,KAAI,CAAE,KAAK,CAAC,CAAC;CAC9D;CARW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAW,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAX,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAW,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,4BAAA;GAAA,kBAAA;GAAA,qBAAA;GAAA,yBAAA;EAAA,EAAA;EAAA,UAAA;CAAA,CAAA;;AAAX,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAW,YAAA,CAAA;EATvB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM;IACJ,8BAA8B;IAC9B,oBAAoB;IACpB,uBAAuB;IACvB,2BAA2B;GAC5B;EACF,CAAA;;;;;;;;;;;;;;;;;;;;;AAWD,MAAa,WAAW,CAAC,SAAS,WAAW"}