@hyalo/angular 0.0.0-stage → 0.3.1

package/fesm2022/hyalo-angular-kbd.mjs

@@ -0,0 +1,41 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+var HyKbd = class HyKbd {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyKbd,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HyKbd,
+		isStandalone: true,
+		selector: "kbd[hyKbd]",
+		ngImport: i0,
+		template: "<ng-content />\r\n",
+		styles: [":host{display:inline-flex;align-items:center;justify-content:center;min-inline-size:1.5rem;min-block-size:1.5rem;padding:.125rem .375rem;border:1px solid var(--hy-line-strong);border-block-end-width:2px;border-radius:.375rem;background:var(--hy-surface-2);color:var(--hy-ink-2);font:500 .75rem/1.4 var(--hy-font-mono);white-space:nowrap}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyKbd,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kbd[hyKbd]",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ng-content />\r\n",
+			styles: [":host{display:inline-flex;align-items:center;justify-content:center;min-inline-size:1.5rem;min-block-size:1.5rem;padding:.125rem .375rem;border:1px solid var(--hy-line-strong);border-block-end-width:2px;border-radius:.375rem;background:var(--hy-surface-2);color:var(--hy-ink-2);font:500 .75rem/1.4 var(--hy-font-mono);white-space:nowrap}\n"]
+		}]
+	}]
+});
+export { HyKbd };
+
+//# sourceMappingURL=hyalo-angular-kbd.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-kbd.mjs","names":[],"sources":["../../../projects/hyalo/kbd/kbd.ts","../../../projects/hyalo/kbd/kbd.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\r\n@Component({\r\n  // Native elements preserve link, list, key, and button semantics.\r\n  // eslint-disable-next-line @angular-eslint/component-selector\r\n  selector: 'kbd[hyKbd]',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './kbd.html',\r\n  styleUrl: './kbd.css',\r\n})\r\nexport class HyKbd {}\r\n","<ng-content />\r\n"],"mappings":";;AASA,IAAa,QAAb,MAAa,MAAK;CAAL,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAK,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAL,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAK,cAAA;EAAA,UAAA;EAAA,UAAA;EAAA,UCTlB;EACA,QAAA,CAAA,qVAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADQa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAK,YAAA,CAAA;EARjB,MAAA;EAGW,MAAA,CAAA;GAAA,UAAA;GAAY,iBACL,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,qVAAA;EAAA,CAAA"}

package/fesm2022/hyalo-angular-lightbox.mjs

@@ -0,0 +1,228 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, computed, inject, input, signal } from "@angular/core";
+import { HY_DIALOG_DATA, HyDialog, HyDialogRef } from "@hyalo/angular/dialog";
+import { HyButton } from "@hyalo/angular/button";
+var HyLightboxView = class HyLightboxView {
+	data = inject(HY_DIALOG_DATA);
+	ref = inject(HyDialogRef);
+	index = signal(Math.max(0, Math.min(this.data.images.length - 1, Math.trunc(this.data.index ?? 0) || 0)), ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+	image = computed(() => this.data.images[this.index()], ...ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []);
+	move(delta) {
+		this.index.update((i) => Math.max(0, Math.min(this.data.images.length - 1, i + delta)));
+	}
+	onKey(event) {
+		if (event.target.matches("input, textarea, select")) return;
+		const rtl = event.currentTarget.ownerDocument.defaultView?.getComputedStyle(event.currentTarget).direction === "rtl";
+		if (event.key === "ArrowRight") {
+			event.preventDefault();
+			this.move(rtl ? -1 : 1);
+		} else if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			this.move(rtl ? 1 : -1);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyLightboxView,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyLightboxView,
+		isStandalone: true,
+		selector: "hy-lightbox-view",
+		host: { listeners: { "keydown": "onKey($event)" } },
+		ngImport: i0,
+		template: "<div class=\"controls\">\r\n  <button hyButton type=\"button\" variant=\"ghost\" (click)=\"ref.close()\">\r\n    {{ data.closeLabel ?? 'Close gallery' }}\r\n  </button>\r\n</div>\r\n@if (image(); as image) {\r\n  <figure>\r\n    <img [src]=\"image.src\" [alt]=\"image.alt\" />\r\n    @if (image.caption) {\r\n      <figcaption>{{ image.caption }}</figcaption>\r\n    }\r\n  </figure>\r\n}\r\n<div class=\"controls\">\r\n  <button hyButton type=\"button\" variant=\"glass\" [disabled]=\"index() === 0\" (click)=\"move(-1)\">\r\n    {{ data.previousLabel ?? 'Previous image' }}\r\n  </button>\r\n  <span aria-live=\"polite\" aria-atomic=\"true\">{{ index() + 1 }} / {{ data.images.length }}</span>\r\n  <button\r\n    hyButton\r\n    type=\"button\"\r\n    variant=\"glass\"\r\n    [disabled]=\"index() === data.images.length - 1\"\r\n    (click)=\"move(1)\"\r\n  >\r\n    {{ data.nextLabel ?? 'Next image' }}\r\n  </button>\r\n</div>\r\n",
+		styles: [":host{display:block;color:var(--hy-ink)}figure{margin:var(--hy-space-4) 0;text-align:center}img{display:block;max-inline-size:100%;max-block-size:65dvh;margin-inline:auto;object-fit:contain}figcaption{padding-block:var(--hy-space-3);color:var(--hy-ink-2)}.controls{display:flex;align-items:center;justify-content:space-between;gap:var(--hy-space-3)}\n"],
+		dependencies: [{
+			kind: "component",
+			type: HyButton,
+			selector: "button[hyButton], a[hyButton]",
+			inputs: [
+				"variant",
+				"size",
+				"tone",
+				"iconOnly",
+				"loading",
+				"disabled"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyLightboxView,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-lightbox-view",
+			imports: [HyButton],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "(keydown)": "onKey($event)" },
+			template: "<div class=\"controls\">\r\n  <button hyButton type=\"button\" variant=\"ghost\" (click)=\"ref.close()\">\r\n    {{ data.closeLabel ?? 'Close gallery' }}\r\n  </button>\r\n</div>\r\n@if (image(); as image) {\r\n  <figure>\r\n    <img [src]=\"image.src\" [alt]=\"image.alt\" />\r\n    @if (image.caption) {\r\n      <figcaption>{{ image.caption }}</figcaption>\r\n    }\r\n  </figure>\r\n}\r\n<div class=\"controls\">\r\n  <button hyButton type=\"button\" variant=\"glass\" [disabled]=\"index() === 0\" (click)=\"move(-1)\">\r\n    {{ data.previousLabel ?? 'Previous image' }}\r\n  </button>\r\n  <span aria-live=\"polite\" aria-atomic=\"true\">{{ index() + 1 }} / {{ data.images.length }}</span>\r\n  <button\r\n    hyButton\r\n    type=\"button\"\r\n    variant=\"glass\"\r\n    [disabled]=\"index() === data.images.length - 1\"\r\n    (click)=\"move(1)\"\r\n  >\r\n    {{ data.nextLabel ?? 'Next image' }}\r\n  </button>\r\n</div>\r\n",
+			styles: [":host{display:block;color:var(--hy-ink)}figure{margin:var(--hy-space-4) 0;text-align:center}img{display:block;max-inline-size:100%;max-block-size:65dvh;margin-inline:auto;object-fit:contain}figcaption{padding-block:var(--hy-space-3);color:var(--hy-ink-2)}.controls{display:flex;align-items:center;justify-content:space-between;gap:var(--hy-space-3)}\n"]
+		}]
+	}]
+});
+var HyLightbox = class HyLightbox {
+	dialog = inject(HyDialog);
+	open(images, options = {}) {
+		if (!images.length) return null;
+		return this.dialog.open(HyLightboxView, {
+			size: "full",
+			label: options.label ?? "Image gallery",
+			data: {
+				...options,
+				images
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyLightbox,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyLightbox,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyLightbox,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+var HyGallery = class HyGallery {
+	lightbox = inject(HyLightbox);
+	images = input.required(...ngDevMode ? [{ debugName: "images" }] : /* istanbul ignore next */ []);
+	label = input("Image gallery", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	openLabel = input("Open image", ...ngDevMode ? [{ debugName: "openLabel" }] : /* istanbul ignore next */ []);
+	options = input({}, ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	open(index) {
+		this.lightbox.open(this.images(), {
+			...this.options(),
+			label: this.label(),
+			index
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyGallery,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyGallery,
+		isStandalone: true,
+		selector: "hy-gallery",
+		inputs: {
+			images: {
+				classPropertyName: "images",
+				publicName: "images",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			openLabel: {
+				classPropertyName: "openLabel",
+				publicName: "openLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<div role=\"group\" [attr.aria-label]=\"label()\">\r\n  @for (image of images(); track $index; let i = $index) {\r\n    <button type=\"button\" [attr.aria-label]=\"openLabel() + ': ' + image.alt\" (click)=\"open(i)\">\r\n      <img [src]=\"image.thumbnail ?? image.src\" [alt]=\"image.alt\" loading=\"lazy\" />\r\n    </button>\r\n  }\r\n</div>\r\n",
+		styles: [":host{display:block}div{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:var(--hy-space-3)}button{padding:0;overflow:clip;border:1px solid var(--hy-line);border-radius:var(--hy-radius-m);background:var(--hy-surface-2);cursor:zoom-in}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:3px}img{display:block;inline-size:100%;aspect-ratio:4/3;object-fit:cover}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyGallery,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-gallery",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div role=\"group\" [attr.aria-label]=\"label()\">\r\n  @for (image of images(); track $index; let i = $index) {\r\n    <button type=\"button\" [attr.aria-label]=\"openLabel() + ': ' + image.alt\" (click)=\"open(i)\">\r\n      <img [src]=\"image.thumbnail ?? image.src\" [alt]=\"image.alt\" loading=\"lazy\" />\r\n    </button>\r\n  }\r\n</div>\r\n",
+			styles: [":host{display:block}div{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:var(--hy-space-3)}button{padding:0;overflow:clip;border:1px solid var(--hy-line);border-radius:var(--hy-radius-m);background:var(--hy-surface-2);cursor:zoom-in}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:3px}img{display:block;inline-size:100%;aspect-ratio:4/3;object-fit:cover}\n"]
+		}]
+	}],
+	propDecorators: {
+		images: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "images",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		openLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "openLabel",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}]
+	}
+});
+export { HyGallery, HyLightbox, HyLightboxView };
+
+//# sourceMappingURL=hyalo-angular-lightbox.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-lightbox.mjs","names":[],"sources":["../../../projects/hyalo/lightbox/lightbox.ts","../../../projects/hyalo/lightbox/lightbox.html","../../../projects/hyalo/lightbox/gallery.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  Injectable,\r\n  computed,\r\n  inject,\r\n  input,\r\n  signal,\r\n} from '@angular/core';\r\nimport { HY_DIALOG_DATA, HyDialog, HyDialogRef } from '@hyalo/angular/dialog';\r\nimport { HyButton } from '@hyalo/angular/button';\r\n\r\nexport interface HyGalleryImage {\r\n  readonly src: string;\r\n  readonly alt: string;\r\n  readonly thumbnail?: string;\r\n  readonly caption?: string;\r\n}\r\nexport interface HyLightboxOptions {\r\n  readonly index?: number;\r\n  readonly label?: string;\r\n  readonly closeLabel?: string;\r\n  readonly previousLabel?: string;\r\n  readonly nextLabel?: string;\r\n}\r\ninterface GalleryData extends HyLightboxOptions {\r\n  readonly images: readonly HyGalleryImage[];\r\n}\r\n\r\n@Component({\r\n  selector: 'hy-lightbox-view',\r\n  imports: [HyButton],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: { '(keydown)': 'onKey($event)' },\r\n  templateUrl: './lightbox.html',\r\n  styleUrl: './lightbox.css',\r\n})\r\nexport class HyLightboxView {\r\n  protected readonly data = inject(HY_DIALOG_DATA) as GalleryData;\r\n  protected readonly ref = inject(HyDialogRef);\r\n  protected readonly index = signal(\r\n    Math.max(0, Math.min(this.data.images.length - 1, Math.trunc(this.data.index ?? 0) || 0)),\r\n  );\r\n  protected readonly image = computed(() => this.data.images[this.index()]);\r\n  protected move(delta: number): void {\r\n    this.index.update((i) => Math.max(0, Math.min(this.data.images.length - 1, i + delta)));\r\n  }\r\n  protected onKey(event: KeyboardEvent): void {\r\n    if ((event.target as HTMLElement).matches('input, textarea, select')) return;\r\n    const rtl =\r\n      (event.currentTarget as HTMLElement).ownerDocument.defaultView?.getComputedStyle(\r\n        event.currentTarget as HTMLElement,\r\n      ).direction === 'rtl';\r\n    if (event.key === 'ArrowRight') {\r\n      event.preventDefault();\r\n      this.move(rtl ? -1 : 1);\r\n    } else if (event.key === 'ArrowLeft') {\r\n      event.preventDefault();\r\n      this.move(rtl ? 1 : -1);\r\n    }\r\n  }\r\n}\r\n/** Opens a gallery using the kit dialog's focus trap, Escape handling and focus restore. */\r\n@Injectable({ providedIn: 'root' })\r\nexport class HyLightbox {\r\n  private readonly dialog = inject(HyDialog);\r\n  open(images: readonly HyGalleryImage[], options: HyLightboxOptions = {}): HyDialogRef | null {\r\n    if (!images.length) return null;\r\n    return this.dialog.open(HyLightboxView, {\r\n      size: 'full',\r\n      label: options.label ?? 'Image gallery',\r\n      data: { ...options, images },\r\n    });\r\n  }\r\n}\r\n@Component({\r\n  selector: 'hy-gallery',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './gallery.html',\r\n  styleUrl: './gallery.css',\r\n})\r\nexport class HyGallery {\r\n  private readonly lightbox = inject(HyLightbox);\r\n  readonly images = input.required<readonly HyGalleryImage[]>();\r\n  readonly label = input('Image gallery');\r\n  readonly openLabel = input('Open image');\r\n  readonly options = input<HyLightboxOptions>({});\r\n  open(index: number): void {\r\n    this.lightbox.open(this.images(), { ...this.options(), label: this.label(), index });\r\n  }\r\n}\r\n","<div class=\"controls\">\r\n  <button hyButton type=\"button\" variant=\"ghost\" (click)=\"ref.close()\">\r\n    {{ data.closeLabel ?? 'Close gallery' }}\r\n  </button>\r\n</div>\r\n@if (image(); as image) {\r\n  <figure>\r\n    <img [src]=\"image.src\" [alt]=\"image.alt\" />\r\n    @if (image.caption) {\r\n      <figcaption>{{ image.caption }}</figcaption>\r\n    }\r\n  </figure>\r\n}\r\n<div class=\"controls\">\r\n  <button hyButton type=\"button\" variant=\"glass\" [disabled]=\"index() === 0\" (click)=\"move(-1)\">\r\n    {{ data.previousLabel ?? 'Previous image' }}\r\n  </button>\r\n  <span aria-live=\"polite\" aria-atomic=\"true\">{{ index() + 1 }} / {{ data.images.length }}</span>\r\n  <button\r\n    hyButton\r\n    type=\"button\"\r\n    variant=\"glass\"\r\n    [disabled]=\"index() === data.images.length - 1\"\r\n    (click)=\"move(1)\"\r\n  >\r\n    {{ data.nextLabel ?? 'Next image' }}\r\n  </button>\r\n</div>\r\n","<div role=\"group\" [attr.aria-label]=\"label()\">\r\n  @for (image of images(); track $index; let i = $index) {\r\n    <button type=\"button\" [attr.aria-label]=\"openLabel() + ': ' + image.alt\" (click)=\"open(i)\">\r\n      <img [src]=\"image.thumbnail ?? image.src\" [alt]=\"image.alt\" loading=\"lazy\" />\r\n    </button>\r\n  }\r\n</div>\r\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-link.mjs

@@ -0,0 +1,42 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+var HyLink = class HyLink {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyLink,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HyLink,
+		isStandalone: true,
+		selector: "a[hyLink]",
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: [":host{color:var(--hy-primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-underline-offset var(--hy-dur-quick) var(--hy-ease-out)}:host(:focus-visible){outline:2px solid var(--hy-primary);outline-offset:4px;border-radius:2px}@media(hover:hover)and (pointer:fine){:host(:hover){text-underline-offset:.35em}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyLink,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "a[hyLink]",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ng-content />",
+			styles: [":host{color:var(--hy-primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-underline-offset var(--hy-dur-quick) var(--hy-ease-out)}:host(:focus-visible){outline:2px solid var(--hy-primary);outline-offset:4px;border-radius:2px}@media(hover:hover)and (pointer:fine){:host(:hover){text-underline-offset:.35em}}\n"]
+		}]
+	}]
+});
+export { HyLink };
+
+//# sourceMappingURL=hyalo-angular-link.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-link.mjs","names":[],"sources":["../../../projects/hyalo/link/link.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\r\n@Component({\r\n  // eslint-disable-next-line @angular-eslint/component-selector\r\n  selector: 'a[hyLink]',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  template: '<ng-content />',\r\n  styleUrl: './link.css',\r\n})\r\nexport class HyLink {}\r\n"],"mappings":";;AAQA,IAAa,SAAb,MAAa,OAAM;CAAN,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,UAAA;EAAA,UAHP;EAAgB,UAAA;EAAA,QAAA,CAAA,6WAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAGf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAM,YAAA,CAAA;EAPlB,MAAA;EAEW,MAAA,CAAA;GAAA,UAAA;GAAW,iBACJ,wBAAwB;GAAM,UACrC;GAAgB,QAAA,CAAA,6WAAA;EAAA,CAAA"}

package/fesm2022/hyalo-angular-list.mjs

@@ -0,0 +1,131 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+var HyList = class HyList {
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyList,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyList,
+		isStandalone: true,
+		selector: "hy-list",
+		inputs: { label: {
+			classPropertyName: "label",
+			publicName: "label",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: "<ul [attr.aria-label]=\"label()\">\r\n  <ng-content />\r\n</ul>\r\n",
+		styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyList,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-list",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ul [attr.aria-label]=\"label()\">\r\n  <ng-content />\r\n</ul>\r\n",
+			styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}\n"]
+		}]
+	}],
+	propDecorators: { label: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "label",
+			required: true
+		}]
+	}] }
+});
+var HyListItem = class HyListItem {
+	heading = input.required(...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	description = input("", ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyListItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyListItem,
+		isStandalone: true,
+		selector: "li[hyListItem]",
+		inputs: {
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			description: {
+				classPropertyName: "description",
+				publicName: "description",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<div class=\"body\"><strong>{{heading()}}</strong>@if(description()){<span>{{description()}}</span>}</div><ng-content />",
+		isInline: true,
+		styles: [":host{display:flex;align-items:center;gap:1rem;padding:1rem;border-block-end:1px solid var(--hy-line);color:var(--hy-ink);min-inline-size:0}.body{flex:1;min-inline-size:0}strong,span{display:block;overflow-wrap:anywhere}span{color:var(--hy-ink-2);font-size:.875rem;margin-block-start:.25rem}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyListItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "li[hyListItem]",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"body\"><strong>{{heading()}}</strong>@if(description()){<span>{{description()}}</span>}</div><ng-content />",
+			styles: [":host{display:flex;align-items:center;gap:1rem;padding:1rem;border-block-end:1px solid var(--hy-line);color:var(--hy-ink);min-inline-size:0}.body{flex:1;min-inline-size:0}strong,span{display:block;overflow-wrap:anywhere}span{color:var(--hy-ink-2);font-size:.875rem;margin-block-start:.25rem}\n"]
+		}]
+	}],
+	propDecorators: {
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: true
+			}]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}]
+	}
+});
+const HY_LIST = [HyList, HyListItem];
+export { HY_LIST, HyList, HyListItem };
+
+//# sourceMappingURL=hyalo-angular-list.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-list.mjs","names":[],"sources":["../../../projects/hyalo/list/list.ts","../../../projects/hyalo/list/list.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\r\n@Component({\r\n  selector: 'hy-list',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './list.html',\r\n  styleUrl: './list.css',\r\n})\r\nexport class HyList {\r\n  readonly label = input.required<string>();\r\n}\r\n@Component({\r\n  // Native elements preserve link, list, key, and button semantics.\r\n  // eslint-disable-next-line @angular-eslint/component-selector\r\n  selector: 'li[hyListItem]',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  template:\r\n    '<div class=\"body\"><strong>{{heading()}}</strong>@if(description()){<span>{{description()}}</span>}</div><ng-content />',\r\n  styles:\r\n    ':host{display:flex;align-items:center;gap:1rem;padding:1rem;border-block-end:1px solid var(--hy-line);color:var(--hy-ink);min-inline-size:0}.body{flex:1;min-inline-size:0}strong,span{display:block;overflow-wrap:anywhere}span{color:var(--hy-ink-2);font-size:.875rem;margin-block-start:.25rem}',\r\n})\r\nexport class HyListItem {\r\n  readonly heading = input.required<string>();\r\n  readonly description = input('');\r\n}\r\nexport const HY_LIST = [HyList, HyListItem] as const;\r\n","<ul [attr.aria-label]=\"label()\">\r\n  <ng-content />\r\n</ul>\r\n"],"mappings":";;AAOA,IAAa,SAAb,MAAa,OAAM;CACR,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAD9B,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,EAAA,OAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UCPnB;EAGA,QAAA,CAAA,8DAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADIa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAM,YAAA,CAAA;EANlB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAS,iBACF,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,8DAAA;EAAA,CAAA;;;;;;;;;;;AAiBjD,IAAa,aAAb,MAAa,WAAU;CACZ,UAAU,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAClC,cAAc,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAFrB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAU,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAV,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAU,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UAJnB;EAAwH,UAAA;EAAA,QAAA,CAAA,uSAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAI/G,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAU,YAAA,CAAA;EAVtB,MAAA;EAGW,MAAA,CAAA;GAAA,UAAA;GAAgB,iBACT,wBAAwB;GAAM,UAE7C;GAAwH,QAAA,CAAA,uSAAA;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;AAQ5H,MAAa,UAAU,CAAC,QAAQ,UAAU"}