@masmarino/gabarit 1.4.0 → 2.1.0

package/fesm2022/masmarino-gabarit-accordion.mjs

@@ -0,0 +1,243 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, contentChildren, effect, inject, input, model, signal, viewChild } from "@angular/core";
+import { Icon } from "@masmarino/gabarit/icon";
+let nextAccordionId = 0;
+var Accordion = class Accordion {
+	id = input(`gbt-accordion-${++nextAccordionId}`, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	mode = input("single", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	expanded = model([], ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	items = contentChildren(AccordionItem, ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const items = this.items();
+			const expanded = this.expanded();
+			const groupId = this.id();
+			items.forEach((item, i) => item.setState(i, expanded.includes(i), groupId));
+		});
+	}
+	toggle(index) {
+		const current = this.expanded();
+		if (this.mode() === "single") {
+			this.expanded.set(current.includes(index) ? [] : [index]);
+			return;
+		}
+		this.expanded.set(current.includes(index) ? current.filter((i) => i !== index) : [...current, index]);
+	}
+	focusHeader(index) {
+		const items = this.items();
+		const count = items.length;
+		if (count === 0) return;
+		items[(index % count + count) % count]?.focusHeader();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Accordion,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.0",
+		type: Accordion,
+		isStandalone: true,
+		selector: "gbt-accordion",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			expanded: {
+				classPropertyName: "expanded",
+				publicName: "expanded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { expanded: "expandedChange" },
+		queries: [{
+			propertyName: "items",
+			predicate: AccordionItem,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div class="gbt-accordion">
+      <ng-content></ng-content>
+    </div>
+  `,
+		isInline: true,
+		styles: [".gbt-accordion{display:block;border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);overflow:hidden}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Accordion,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-accordion",
+			standalone: true,
+			imports: [],
+			template: `
+    <div class="gbt-accordion">
+      <ng-content></ng-content>
+    </div>
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: [".gbt-accordion{display:block;border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);overflow:hidden}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		expanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expanded",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["expandedChange"]
+		}],
+		items: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => AccordionItem), { isSignal: true }]
+		}]
+	}
+});
+var AccordionItem = class AccordionItem {
+	parent = inject(Accordion);
+	header = viewChild("header", ...ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	active = signal(false, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	index = signal(0, ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+	groupId = signal("", ...ngDevMode ? [{ debugName: "groupId" }] : /* istanbul ignore next */ []);
+	headerId = computed(() => `${this.groupId()}-header-${this.index()}`, ...ngDevMode ? [{ debugName: "headerId" }] : /* istanbul ignore next */ []);
+	panelId = computed(() => `${this.groupId()}-panel-${this.index()}`, ...ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []);
+	setState(index, active, groupId) {
+		this.index.set(index);
+		this.active.set(active);
+		this.groupId.set(groupId);
+	}
+	focusHeader() {
+		this.header()?.nativeElement.focus();
+	}
+	toggle() {
+		this.parent.toggle(this.index());
+	}
+	onKeydown(event) {
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			this.parent.focusHeader(this.index() + 1);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			this.parent.focusHeader(this.index() - 1);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AccordionItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.0",
+		type: AccordionItem,
+		isStandalone: true,
+		selector: "gbt-accordion-item",
+		inputs: { label: {
+			classPropertyName: "label",
+			publicName: "label",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		viewQueries: [{
+			propertyName: "header",
+			first: true,
+			predicate: ["header"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<button\n  #header\n  type=\"button\"\n  class=\"gbt-accordion-item__header\"\n  [class.gbt-accordion-item__header--open]=\"active()\"\n  [id]=\"headerId()\"\n  [attr.aria-expanded]=\"active()\"\n  [attr.aria-controls]=\"panelId()\"\n  (click)=\"toggle()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <span class=\"gbt-accordion-item__label\">{{ label() }}</span>\n  <gbt-icon name=\"chevron-down\" class=\"gbt-accordion-item__chevron\" aria-hidden=\"true\" />\n</button>\n<div\n  class=\"gbt-accordion-item__panel\"\n  [class.gbt-accordion-item__panel--open]=\"active()\"\n  [id]=\"panelId()\"\n  [attr.aria-labelledby]=\"headerId()\"\n  [attr.inert]=\"active() ? null : ''\"\n>\n  <div class=\"gbt-accordion-item__panel-inner\">\n    <div class=\"gbt-accordion-item__panel-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n",
+		styles: [":host{display:block}:host:not(:last-child){border-bottom:1px solid var(--border-color)}.gbt-accordion-item__header{box-sizing:border-box;display:flex;align-items:center;gap:.75rem;width:100%;padding:.875rem 1rem;background:var(--bg-principal);border:none;color:var(--text-primary);font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-accordion-item__header:hover{background:var(--bg-hover)}.gbt-accordion-item__header:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}.gbt-accordion-item__label{flex:1;min-width:0}.gbt-accordion-item__chevron{flex-shrink:0;color:var(--text-secondary);transition:transform .2s cubic-bezier(.4,0,.2,1)}.gbt-accordion-item__header--open .gbt-accordion-item__chevron{transform:rotate(180deg)}.gbt-accordion-item__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s cubic-bezier(.4,0,.2,1)}.gbt-accordion-item__panel--open{grid-template-rows:1fr}.gbt-accordion-item__panel-inner{overflow:hidden;min-height:0}.gbt-accordion-item__panel-content{padding:1rem}@media(prefers-reduced-motion:reduce){.gbt-accordion-item__chevron,.gbt-accordion-item__panel{transition:none}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Icon,
+			selector: "gbt-icon",
+			inputs: ["name"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AccordionItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-accordion-item",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<button\n  #header\n  type=\"button\"\n  class=\"gbt-accordion-item__header\"\n  [class.gbt-accordion-item__header--open]=\"active()\"\n  [id]=\"headerId()\"\n  [attr.aria-expanded]=\"active()\"\n  [attr.aria-controls]=\"panelId()\"\n  (click)=\"toggle()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <span class=\"gbt-accordion-item__label\">{{ label() }}</span>\n  <gbt-icon name=\"chevron-down\" class=\"gbt-accordion-item__chevron\" aria-hidden=\"true\" />\n</button>\n<div\n  class=\"gbt-accordion-item__panel\"\n  [class.gbt-accordion-item__panel--open]=\"active()\"\n  [id]=\"panelId()\"\n  [attr.aria-labelledby]=\"headerId()\"\n  [attr.inert]=\"active() ? null : ''\"\n>\n  <div class=\"gbt-accordion-item__panel-inner\">\n    <div class=\"gbt-accordion-item__panel-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n",
+			styles: [":host{display:block}:host:not(:last-child){border-bottom:1px solid var(--border-color)}.gbt-accordion-item__header{box-sizing:border-box;display:flex;align-items:center;gap:.75rem;width:100%;padding:.875rem 1rem;background:var(--bg-principal);border:none;color:var(--text-primary);font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-accordion-item__header:hover{background:var(--bg-hover)}.gbt-accordion-item__header:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}.gbt-accordion-item__label{flex:1;min-width:0}.gbt-accordion-item__chevron{flex-shrink:0;color:var(--text-secondary);transition:transform .2s cubic-bezier(.4,0,.2,1)}.gbt-accordion-item__header--open .gbt-accordion-item__chevron{transform:rotate(180deg)}.gbt-accordion-item__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s cubic-bezier(.4,0,.2,1)}.gbt-accordion-item__panel--open{grid-template-rows:1fr}.gbt-accordion-item__panel-inner{overflow:hidden;min-height:0}.gbt-accordion-item__panel-content{padding:1rem}@media(prefers-reduced-motion:reduce){.gbt-accordion-item__chevron,.gbt-accordion-item__panel{transition:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		header: [{
+			type: i0.ViewChild,
+			args: ["header", { isSignal: true }]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}]
+	}
+});
+export { Accordion, AccordionItem };
+
+//# sourceMappingURL=masmarino-gabarit-accordion.mjs.map

package/fesm2022/masmarino-gabarit-accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-accordion.mjs","names":[],"sources":["../../../projects/gabarit/accordion/accordion.ts","../../../projects/gabarit/accordion/accordion-item/accordion-item.ts","../../../projects/gabarit/accordion/accordion-item/accordion-item.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  contentChildren,\n  effect,\n  input,\n  model,\n} from '@angular/core'\nimport { AccordionItem } from './accordion-item/accordion-item'\n\nexport type AccordionMode = 'single' | 'multiple'\n\nlet nextAccordionId = 0\n\n@Component({\n  selector: 'gbt-accordion',\n  standalone: true,\n  imports: [],\n  template: `\n    <div class=\"gbt-accordion\">\n      <ng-content></ng-content>\n    </div>\n  `,\n  styleUrl: './accordion.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Accordion {\n  id = input<string>(`gbt-accordion-${++nextAccordionId}`)\n  mode = input<AccordionMode>('single')\n  expanded = model<number[]>([])\n\n  protected readonly items = contentChildren(AccordionItem)\n\n  constructor() {\n    effect(() => {\n      const items = this.items()\n      const expanded = this.expanded()\n      const groupId = this.id()\n      items.forEach((item, i) => item.setState(i, expanded.includes(i), groupId))\n    })\n  }\n\n  toggle(index: number): void {\n    const current = this.expanded()\n    if (this.mode() === 'single') {\n      this.expanded.set(current.includes(index) ? [] : [index])\n      return\n    }\n    this.expanded.set(\n      current.includes(index) ? current.filter((i) => i !== index) : [...current, index],\n    )\n  }\n\n  focusHeader(index: number): void {\n    const items = this.items()\n    const count = items.length\n    if (count === 0) {\n      return\n    }\n    const wrapped = ((index % count) + count) % count\n    items[wrapped]?.focusHeader()\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\nimport { Accordion } from '../accordion'\n\n@Component({\n  selector: 'gbt-accordion-item',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './accordion-item.html',\n  styleUrl: './accordion-item.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AccordionItem {\n  private readonly parent = inject(Accordion)\n  private readonly header = viewChild<ElementRef<HTMLButtonElement>>('header')\n\n  label = input.required<string>()\n\n  protected readonly active = signal(false)\n  protected readonly index = signal(0)\n  protected readonly groupId = signal('')\n\n  protected readonly headerId = computed(() => `${this.groupId()}-header-${this.index()}`)\n  protected readonly panelId = computed(() => `${this.groupId()}-panel-${this.index()}`)\n\n  setState(index: number, active: boolean, groupId: string): void {\n    this.index.set(index)\n    this.active.set(active)\n    this.groupId.set(groupId)\n  }\n\n  focusHeader(): void {\n    this.header()?.nativeElement.focus()\n  }\n\n  protected toggle(): void {\n    this.parent.toggle(this.index())\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      this.parent.focusHeader(this.index() + 1)\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      this.parent.focusHeader(this.index() - 1)\n    }\n  }\n}\n","<button\n  #header\n  type=\"button\"\n  class=\"gbt-accordion-item__header\"\n  [class.gbt-accordion-item__header--open]=\"active()\"\n  [id]=\"headerId()\"\n  [attr.aria-expanded]=\"active()\"\n  [attr.aria-controls]=\"panelId()\"\n  (click)=\"toggle()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <span class=\"gbt-accordion-item__label\">{{ label() }}</span>\n  <gbt-icon name=\"chevron-down\" class=\"gbt-accordion-item__chevron\" aria-hidden=\"true\" />\n</button>\n<div\n  class=\"gbt-accordion-item__panel\"\n  [class.gbt-accordion-item__panel--open]=\"active()\"\n  [id]=\"panelId()\"\n  [attr.aria-labelledby]=\"headerId()\"\n  [attr.inert]=\"active() ? null : ''\"\n>\n  <div class=\"gbt-accordion-item__panel-inner\">\n    <div class=\"gbt-accordion-item__panel-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n"],"mappings":"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"}

package/fesm2022/masmarino-gabarit-alert.mjs

@@ -0,0 +1,208 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, input, output } from "@angular/core";
+import { Icon } from "@masmarino/gabarit/icon";
+const ASSERTIVE_VARIANTS = /* @__PURE__ */ new Set(["warning", "error"]);
+const VARIANT_ICONS = {
+	success: "check-circle",
+	error: "alert-circle",
+	warning: "alert-triangle",
+	info: "info",
+	neutral: "info"
+};
+var Alert = class Alert {
+	variant = input("info", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	dismissible = input(false, {
+		...ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	closeLabel = input("Dismiss", ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	live = input("auto", ...ngDevMode ? [{ debugName: "live" }] : /* istanbul ignore next */ []);
+	heading = input("", ...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	appearance = input("default", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+	iconAlign = input("auto", ...ngDevMode ? [{ debugName: "iconAlign" }] : /* istanbul ignore next */ []);
+	dismissed = output();
+	role = computed(() => {
+		switch (this.live()) {
+			case "assertive": return "alert";
+			case "polite": return "status";
+			case "off": return null;
+			default: return ASSERTIVE_VARIANTS.has(this.variant()) ? "alert" : "status";
+		}
+	}, ...ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []);
+	icon = computed(() => VARIANT_ICONS[this.variant()], ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Alert,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Alert,
+		isStandalone: true,
+		selector: "gbt-alert",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dismissible: {
+				classPropertyName: "dismissible",
+				publicName: "dismissible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			live: {
+				classPropertyName: "live",
+				publicName: "live",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			appearance: {
+				classPropertyName: "appearance",
+				publicName: "appearance",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconAlign: {
+				classPropertyName: "iconAlign",
+				publicName: "iconAlign",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { dismissed: "dismissed" },
+		ngImport: i0,
+		template: "<div\n  class=\"gbt-alert\"\n  [attr.data-variant]=\"variant()\"\n  [attr.data-heading]=\"heading() ? '' : null\"\n  [attr.data-size]=\"size() === 'md' ? null : size()\"\n  [attr.data-appearance]=\"appearance() === 'default' ? null : appearance()\"\n  [attr.data-icon-align]=\"iconAlign() === 'auto' ? null : iconAlign()\"\n  [attr.role]=\"role()\"\n  [attr.aria-atomic]=\"role() ? 'true' : null\"\n>\n  <span class=\"gbt-alert__icon\">\n    <gbt-icon [name]=\"icon()\" aria-hidden=\"true\" />\n  </span>\n  <div class=\"gbt-alert__content\">\n    <div class=\"gbt-alert__message\">\n      @if (heading()) {\n        <p class=\"gbt-alert__heading\">{{ heading() }}</p>\n      }\n      <ng-content />\n    </div>\n    <div class=\"gbt-alert__actions\"><ng-content select=\"[alert-actions]\" /></div>\n  </div>\n  @if (dismissible()) {\n    <button\n      type=\"button\"\n      class=\"gbt-alert__close\"\n      [attr.aria-label]=\"closeLabel()\"\n      (click)=\"dismissed.emit()\"\n    >\n      <gbt-icon name=\"x\" aria-hidden=\"true\" />\n    </button>\n  }\n</div>\n",
+		styles: [".gbt-alert{--gbt-alert-icon: 1.5rem;--gbt-alert-font: .875rem;--gbt-alert-line: calc(var(--gbt-alert-font) * 1.4);--gbt-alert-close: 26px;box-sizing:border-box;display:flex;align-items:center;gap:.625rem;width:100%;padding:.75rem 1rem;border-radius:var(--site-border-radius-sm);border:1.5px solid currentColor}.gbt-alert[data-variant=success]{--gbt-alert-bg: var(--color-success-bg);background:var(--color-success-bg);color:var(--color-success-bg-text)}.gbt-alert[data-variant=warning]{--gbt-alert-bg: var(--color-warning-bg);background:var(--color-warning-bg);color:var(--color-warning-bg-text)}.gbt-alert[data-variant=error]{--gbt-alert-bg: var(--color-error-bg);background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-alert[data-variant=info]{--gbt-alert-bg: var(--color-info-bg);background:var(--color-info-bg);color:var(--color-info-bg-text)}.gbt-alert[data-variant=neutral]{--gbt-alert-bg: var(--bg-panel);background:var(--bg-panel);border-color:var(--border-color);color:var(--text-primary)}.gbt-alert[data-size=sm]{--gbt-alert-icon: 1.25rem;--gbt-alert-font: .8125rem;gap:.5rem;padding:.5rem .75rem}.gbt-alert[data-appearance=subtle]{border-width:1px;border-color:color-mix(in srgb,currentColor 30%,transparent);background:color-mix(in srgb,var(--gbt-alert-bg) 55%,var(--bg-principal))}.gbt-alert[data-appearance=subtle][data-variant=neutral]{border-color:color-mix(in srgb,var(--border-color) 60%,transparent)}.gbt-alert[data-appearance=subtle] .gbt-alert__icon{border-width:1px}.gbt-alert__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gbt-alert-icon);height:var(--gbt-alert-icon);border:1.5px solid currentColor;border-radius:50%}.gbt-alert__icon gbt-icon{width:.875em;height:.875em}.gbt-alert__content{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-size:var(--gbt-alert-font);line-height:1.4}.gbt-alert__message{flex:1 1 14rem}.gbt-alert__heading{margin:0 0 .125rem;font-weight:600}.gbt-alert__actions{display:flex;flex:0 1 auto;flex-wrap:wrap;max-width:100%;align-items:center;gap:.5rem}.gbt-alert__actions:empty{display:none}.gbt-alert[data-heading] .gbt-alert__content{flex-direction:column;align-items:flex-start;gap:.5rem}.gbt-alert[data-heading] .gbt-alert__message{flex:none;width:100%}.gbt-alert__close{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--gbt-alert-close);height:var(--gbt-alert-close);background:none;border:none;border-radius:50%;color:currentColor;opacity:.7;cursor:pointer;transition:opacity var(--site-transition-fast)}.gbt-alert__close:hover,.gbt-alert__close:focus-visible{opacity:1}.gbt-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.gbt-alert[data-icon-align=start],.gbt-alert[data-heading]:not([data-icon-align=center]){align-items:flex-start}.gbt-alert[data-icon-align=start] .gbt-alert__content,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__content{align-items:flex-start}.gbt-alert[data-icon-align=start] .gbt-alert__message,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__message{padding-block:max(0px,(var(--gbt-alert-icon) - var(--gbt-alert-line)) / 2)}.gbt-alert[data-icon-align=start]:not([data-heading]) .gbt-alert__actions,.gbt-alert[data-heading]:not([data-icon-align=center]):not([data-heading]) .gbt-alert__actions{min-height:var(--gbt-alert-icon);margin-block:-.25rem}.gbt-alert[data-icon-align=start] .gbt-alert__close,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2)}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)){align-items:flex-start}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__content{align-items:flex-start}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__message{padding-block:max(0px,(var(--gbt-alert-icon) - var(--gbt-alert-line)) / 2)}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)):not([data-heading]) .gbt-alert__actions{min-height:var(--gbt-alert-icon);margin-block:-.25rem}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2)}@media(pointer:coarse){.gbt-alert{--gbt-alert-close: 44px}.gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2);margin-inline-end:-.5rem}.gbt-alert__actions ::ng-deep .gbt-button{min-height:44px}}@media(max-width:599px){.gbt-alert__actions{--gbt-control-height-sm: 2.75rem;--gbt-control-height-md: 2.75rem}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Icon,
+			selector: "gbt-icon",
+			inputs: ["name"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Alert,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-alert",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div\n  class=\"gbt-alert\"\n  [attr.data-variant]=\"variant()\"\n  [attr.data-heading]=\"heading() ? '' : null\"\n  [attr.data-size]=\"size() === 'md' ? null : size()\"\n  [attr.data-appearance]=\"appearance() === 'default' ? null : appearance()\"\n  [attr.data-icon-align]=\"iconAlign() === 'auto' ? null : iconAlign()\"\n  [attr.role]=\"role()\"\n  [attr.aria-atomic]=\"role() ? 'true' : null\"\n>\n  <span class=\"gbt-alert__icon\">\n    <gbt-icon [name]=\"icon()\" aria-hidden=\"true\" />\n  </span>\n  <div class=\"gbt-alert__content\">\n    <div class=\"gbt-alert__message\">\n      @if (heading()) {\n        <p class=\"gbt-alert__heading\">{{ heading() }}</p>\n      }\n      <ng-content />\n    </div>\n    <div class=\"gbt-alert__actions\"><ng-content select=\"[alert-actions]\" /></div>\n  </div>\n  @if (dismissible()) {\n    <button\n      type=\"button\"\n      class=\"gbt-alert__close\"\n      [attr.aria-label]=\"closeLabel()\"\n      (click)=\"dismissed.emit()\"\n    >\n      <gbt-icon name=\"x\" aria-hidden=\"true\" />\n    </button>\n  }\n</div>\n",
+			styles: [".gbt-alert{--gbt-alert-icon: 1.5rem;--gbt-alert-font: .875rem;--gbt-alert-line: calc(var(--gbt-alert-font) * 1.4);--gbt-alert-close: 26px;box-sizing:border-box;display:flex;align-items:center;gap:.625rem;width:100%;padding:.75rem 1rem;border-radius:var(--site-border-radius-sm);border:1.5px solid currentColor}.gbt-alert[data-variant=success]{--gbt-alert-bg: var(--color-success-bg);background:var(--color-success-bg);color:var(--color-success-bg-text)}.gbt-alert[data-variant=warning]{--gbt-alert-bg: var(--color-warning-bg);background:var(--color-warning-bg);color:var(--color-warning-bg-text)}.gbt-alert[data-variant=error]{--gbt-alert-bg: var(--color-error-bg);background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-alert[data-variant=info]{--gbt-alert-bg: var(--color-info-bg);background:var(--color-info-bg);color:var(--color-info-bg-text)}.gbt-alert[data-variant=neutral]{--gbt-alert-bg: var(--bg-panel);background:var(--bg-panel);border-color:var(--border-color);color:var(--text-primary)}.gbt-alert[data-size=sm]{--gbt-alert-icon: 1.25rem;--gbt-alert-font: .8125rem;gap:.5rem;padding:.5rem .75rem}.gbt-alert[data-appearance=subtle]{border-width:1px;border-color:color-mix(in srgb,currentColor 30%,transparent);background:color-mix(in srgb,var(--gbt-alert-bg) 55%,var(--bg-principal))}.gbt-alert[data-appearance=subtle][data-variant=neutral]{border-color:color-mix(in srgb,var(--border-color) 60%,transparent)}.gbt-alert[data-appearance=subtle] .gbt-alert__icon{border-width:1px}.gbt-alert__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gbt-alert-icon);height:var(--gbt-alert-icon);border:1.5px solid currentColor;border-radius:50%}.gbt-alert__icon gbt-icon{width:.875em;height:.875em}.gbt-alert__content{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-size:var(--gbt-alert-font);line-height:1.4}.gbt-alert__message{flex:1 1 14rem}.gbt-alert__heading{margin:0 0 .125rem;font-weight:600}.gbt-alert__actions{display:flex;flex:0 1 auto;flex-wrap:wrap;max-width:100%;align-items:center;gap:.5rem}.gbt-alert__actions:empty{display:none}.gbt-alert[data-heading] .gbt-alert__content{flex-direction:column;align-items:flex-start;gap:.5rem}.gbt-alert[data-heading] .gbt-alert__message{flex:none;width:100%}.gbt-alert__close{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--gbt-alert-close);height:var(--gbt-alert-close);background:none;border:none;border-radius:50%;color:currentColor;opacity:.7;cursor:pointer;transition:opacity var(--site-transition-fast)}.gbt-alert__close:hover,.gbt-alert__close:focus-visible{opacity:1}.gbt-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.gbt-alert[data-icon-align=start],.gbt-alert[data-heading]:not([data-icon-align=center]){align-items:flex-start}.gbt-alert[data-icon-align=start] .gbt-alert__content,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__content{align-items:flex-start}.gbt-alert[data-icon-align=start] .gbt-alert__message,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__message{padding-block:max(0px,(var(--gbt-alert-icon) - var(--gbt-alert-line)) / 2)}.gbt-alert[data-icon-align=start]:not([data-heading]) .gbt-alert__actions,.gbt-alert[data-heading]:not([data-icon-align=center]):not([data-heading]) .gbt-alert__actions{min-height:var(--gbt-alert-icon);margin-block:-.25rem}.gbt-alert[data-icon-align=start] .gbt-alert__close,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2)}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)){align-items:flex-start}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__content{align-items:flex-start}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__message{padding-block:max(0px,(var(--gbt-alert-icon) - var(--gbt-alert-line)) / 2)}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)):not([data-heading]) .gbt-alert__actions{min-height:var(--gbt-alert-icon);margin-block:-.25rem}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2)}@media(pointer:coarse){.gbt-alert{--gbt-alert-close: 44px}.gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2);margin-inline-end:-.5rem}.gbt-alert__actions ::ng-deep .gbt-button{min-height:44px}}@media(max-width:599px){.gbt-alert__actions{--gbt-control-height-sm: 2.75rem;--gbt-control-height-md: 2.75rem}}\n"]
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		dismissible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissible",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}],
+		live: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "live",
+				required: false
+			}]
+		}],
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appearance",
+				required: false
+			}]
+		}],
+		iconAlign: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconAlign",
+				required: false
+			}]
+		}],
+		dismissed: [{
+			type: i0.Output,
+			args: ["dismissed"]
+		}]
+	}
+});
+export { Alert };
+
+//# sourceMappingURL=masmarino-gabarit-alert.mjs.map

package/fesm2022/masmarino-gabarit-alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-alert.mjs","names":[],"sources":["../../../projects/gabarit/alert/alert.ts","../../../projects/gabarit/alert/alert.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  computed,\n  input,\n  output,\n} from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\n\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral'\n\nexport type AlertLive = 'auto' | 'assertive' | 'polite' | 'off'\nexport type AlertSize = 'md' | 'sm'\nexport type AlertAppearance = 'default' | 'subtle'\nexport type AlertIconAlign = 'auto' | 'center' | 'start'\n\nconst ASSERTIVE_VARIANTS: ReadonlySet<AlertVariant> = new Set(['warning', 'error'])\n\nconst VARIANT_ICONS: Record<AlertVariant, string> = {\n  success: 'check-circle',\n  error: 'alert-circle',\n  warning: 'alert-triangle',\n  info: 'info',\n  neutral: 'info',\n}\n\n@Component({\n  selector: 'gbt-alert',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './alert.html',\n  styleUrl: './alert.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Alert {\n  variant = input<AlertVariant>('info')\n  dismissible = input(false, { transform: booleanAttribute })\n  closeLabel = input<string>('Dismiss')\n\n  live = input<AlertLive>('auto')\n  heading = input<string>('')\n  size = input<AlertSize>('md')\n  appearance = input<AlertAppearance>('default')\n  iconAlign = input<AlertIconAlign>('auto')\n\n  dismissed = output<void>()\n\n  protected readonly role = computed(() => {\n    switch (this.live()) {\n      case 'assertive':\n        return 'alert'\n      case 'polite':\n        return 'status'\n      case 'off':\n        return null\n      default:\n        return ASSERTIVE_VARIANTS.has(this.variant()) ? 'alert' : 'status'\n    }\n  })\n\n  protected readonly icon = computed(() => VARIANT_ICONS[this.variant()])\n}\n","<div\n  class=\"gbt-alert\"\n  [attr.data-variant]=\"variant()\"\n  [attr.data-heading]=\"heading() ? '' : null\"\n  [attr.data-size]=\"size() === 'md' ? null : size()\"\n  [attr.data-appearance]=\"appearance() === 'default' ? null : appearance()\"\n  [attr.data-icon-align]=\"iconAlign() === 'auto' ? null : iconAlign()\"\n  [attr.role]=\"role()\"\n  [attr.aria-atomic]=\"role() ? 'true' : null\"\n>\n  <span class=\"gbt-alert__icon\">\n    <gbt-icon [name]=\"icon()\" aria-hidden=\"true\" />\n  </span>\n  <div class=\"gbt-alert__content\">\n    <div class=\"gbt-alert__message\">\n      @if (heading()) {\n        <p class=\"gbt-alert__heading\">{{ heading() }}</p>\n      }\n      <ng-content />\n    </div>\n    <div class=\"gbt-alert__actions\"><ng-content select=\"[alert-actions]\" /></div>\n  </div>\n  @if (dismissible()) {\n    <button\n      type=\"button\"\n      class=\"gbt-alert__close\"\n      [attr.aria-label]=\"closeLabel()\"\n      (click)=\"dismissed.emit()\"\n    >\n      <gbt-icon name=\"x\" aria-hidden=\"true\" />\n    </button>\n  }\n</div>\n"],"mappings":"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"}