@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-alert.mjs

@@ -0,0 +1,266 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, ViewEncapsulation, booleanAttribute, computed, inject, input, output } from "@angular/core";
+import { VdButton } from "@vadem/ui/button";
+import { VdIcon } from "@vadem/ui/icon";
+import { vdTexts } from "@vadem/ui/locale";
+const TABBABLE = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+function neighbourFocusTarget(host) {
+	const candidates = Array.from(host.ownerDocument.querySelectorAll(TABBABLE)).filter((el) => !host.contains(el) && el.getClientRects().length > 0 && !el.closest("[inert]"));
+	return candidates.find((el) => host.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) ?? candidates.reverse().find((el) => host.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING) ?? null;
+}
+const ICONS = {
+	neutral: "info",
+	info: "info",
+	success: "check-circle",
+	warning: "alert-triangle",
+	danger: "alert-circle"
+};
+var VdAlert = class VdAlert {
+	variant = input("neutral", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	icon = input(void 0, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	layout = input("inline", ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	dismissible = input(false, {
+		...ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	dismissLabel = input(...ngDevMode ? [void 0, { debugName: "dismissLabel" }] : /* istanbul ignore next */ []);
+	dismiss = output();
+	t = vdTexts("alert", { dismissLabel: this.dismissLabel });
+	el = inject(ElementRef).nativeElement;
+	onDismiss() {
+		if (this.el.contains(this.el.ownerDocument.activeElement)) neighbourFocusTarget(this.el)?.focus();
+		this.dismiss.emit();
+	}
+	iconName = computed(() => {
+		const icon = this.icon();
+		return icon === void 0 ? ICONS[this.variant()] : icon;
+	}, ...ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdAlert,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdAlert,
+		isStandalone: true,
+		selector: "[vdAlert]",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			layout: {
+				classPropertyName: "layout",
+				publicName: "layout",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dismissible: {
+				classPropertyName: "dismissible",
+				publicName: "dismissible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dismissLabel: {
+				classPropertyName: "dismissLabel",
+				publicName: "dismissLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { dismiss: "dismiss" },
+		host: {
+			properties: {
+				"attr.data-variant": "variant()",
+				"attr.data-layout": "layout() === \"banner\" ? \"banner\" : null"
+			},
+			classAttribute: "vd-alert"
+		},
+		ngImport: i0,
+		template: `
+    @if (iconName(); as name) {
+      <vd-icon [name]="name" class="vd-alert__icon" />
+    }
+    <div class="vd-alert__content"><ng-content /></div>
+    <ng-content select="[slot=end]" />
+    @if (dismissible()) {
+      <button
+        vdButton
+        type="button"
+        variant="ghost"
+        size="sm"
+        iconOnly
+        slot="end"
+        class="vd-alert__dismiss"
+        [attr.aria-label]="t().dismissLabel"
+        (click)="onDismiss()"
+      >
+        <vd-icon name="x" />
+      </button>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdButton,
+			selector: "button[vdButton], a[vdButton]",
+			inputs: [
+				"variant",
+				"size",
+				"disabled",
+				"loading",
+				"iconOnly",
+				"type"
+			]
+		}, {
+			kind: "component",
+			type: VdIcon,
+			selector: "vd-icon",
+			inputs: ["name", "label"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdAlert,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[vdAlert]",
+			imports: [VdButton, VdIcon],
+			template: `
+    @if (iconName(); as name) {
+      <vd-icon [name]="name" class="vd-alert__icon" />
+    }
+    <div class="vd-alert__content"><ng-content /></div>
+    <ng-content select="[slot=end]" />
+    @if (dismissible()) {
+      <button
+        vdButton
+        type="button"
+        variant="ghost"
+        size="sm"
+        iconOnly
+        slot="end"
+        class="vd-alert__dismiss"
+        [attr.aria-label]="t().dismissLabel"
+        (click)="onDismiss()"
+      >
+        <vd-icon name="x" />
+      </button>
+    }
+  `,
+			host: {
+				class: "vd-alert",
+				"[attr.data-variant]": "variant()",
+				"[attr.data-layout]": "layout() === \"banner\" ? \"banner\" : null"
+			},
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		layout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "layout",
+				required: false
+			}]
+		}],
+		dismissible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissible",
+				required: false
+			}]
+		}],
+		dismissLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissLabel",
+				required: false
+			}]
+		}],
+		dismiss: [{
+			type: i0.Output,
+			args: ["dismiss"]
+		}]
+	}
+});
+var VdAlertTitle = class VdAlertTitle {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdAlertTitle,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: VdAlertTitle,
+		isStandalone: true,
+		selector: "[vdAlertTitle]",
+		host: { classAttribute: "vd-alert__title" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdAlertTitle,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[vdAlertTitle]",
+			host: { class: "vd-alert__title" }
+		}]
+	}]
+});
+const VD_ALERT = [VdAlert, VdAlertTitle];
+export { VD_ALERT, VdAlert, VdAlertTitle };
+
+//# sourceMappingURL=vadem-ui-alert.mjs.map

package/fesm2022/vadem-ui-alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-alert.mjs","names":[],"sources":["../../../projects/ui/alert/src/alert.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  Directive,\n  ElementRef,\n  ViewEncapsulation,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  output,\n} from '@angular/core';\nimport { VdButton } from '@vadem/ui/button';\nimport { VdIcon, VdIconName } from '@vadem/ui/icon';\nimport { vdTexts } from '@vadem/ui/locale';\n\nexport type VdAlertVariant = 'neutral' | 'info' | 'success' | 'warning' | 'danger';\n/** `banner`: full-width strip at the top of a page or region (maintenance, cookies, updates). */\nexport type VdAlertLayout = 'inline' | 'banner';\n\nconst TABBABLE =\n  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/** The next tabbable element after `host` in document order, else the previous one. */\nfunction neighbourFocusTarget(host: HTMLElement): HTMLElement | null {\n  const candidates = Array.from(host.ownerDocument.querySelectorAll<HTMLElement>(TABBABLE)).filter(\n    (el) => !host.contains(el) && el.getClientRects().length > 0 && !el.closest('[inert]'),\n  );\n  const after = candidates.find(\n    (el) => host.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING,\n  );\n  return (\n    after ??\n    candidates\n      .reverse()\n      .find((el) => host.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING) ??\n    null\n  );\n}\n\nconst ICONS: Record<VdAlertVariant, VdIconName> = {\n  neutral: 'info',\n  info: 'info',\n  success: 'check-circle',\n  warning: 'alert-triangle',\n  danger: 'alert-circle',\n};\n\n/**\n * Inline message in the page flow (callout). Static by default; add `role=\"alert\"` (urgent) or\n * `role=\"status\"` when it appears in response to an action. Spec: specs/alert.md\n */\n@Component({\n  // Attribute selector: the consumer picks the element (div, section, li...).\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: '[vdAlert]',\n  imports: [VdButton, VdIcon],\n  template: `\n    @if (iconName(); as name) {\n      <vd-icon [name]=\"name\" class=\"vd-alert__icon\" />\n    }\n    <div class=\"vd-alert__content\"><ng-content /></div>\n    <ng-content select=\"[slot=end]\" />\n    @if (dismissible()) {\n      <button\n        vdButton\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        iconOnly\n        slot=\"end\"\n        class=\"vd-alert__dismiss\"\n        [attr.aria-label]=\"t().dismissLabel\"\n        (click)=\"onDismiss()\"\n      >\n        <vd-icon name=\"x\" />\n      </button>\n    }\n  `,\n  host: {\n    class: 'vd-alert',\n    '[attr.data-variant]': 'variant()',\n    '[attr.data-layout]': 'layout() === \"banner\" ? \"banner\" : null',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class VdAlert {\n  readonly variant = input<VdAlertVariant>('neutral');\n  /** Leading icon; defaults to the variant's icon. `null` hides it. */\n  readonly icon = input<VdIconName | null | undefined>(undefined);\n  readonly layout = input<VdAlertLayout>('inline');\n  /** Adds a close button. The consumer removes the alert (and remembers the choice) on `dismiss`. */\n  readonly dismissible = input(false, { transform: booleanAttribute });\n  readonly dismissLabel = input<string>();\n  /** Emitted when the close button is activated; focus has already moved to a neighbour. */\n  readonly dismiss = output<void>();\n\n  /** Text inputs resolved against the active VD_LOCALE. */\n  protected readonly t = vdTexts('alert', { dismissLabel: this.dismissLabel });\n  private readonly el: HTMLElement = inject(ElementRef).nativeElement;\n\n  /** Removing a focused element drops focus to <body>; hand it to the next control first. */\n  protected onDismiss(): void {\n    if (this.el.contains(this.el.ownerDocument.activeElement))\n      neighbourFocusTarget(this.el)?.focus();\n    this.dismiss.emit();\n  }\n\n  protected readonly iconName = computed(() => {\n    const icon = this.icon();\n    return icon === undefined ? ICONS[this.variant()] : icon;\n  });\n}\n\n/** Bold first line of an alert. */\n@Directive({ selector: '[vdAlertTitle]', host: { class: 'vd-alert__title' } })\nexport class VdAlertTitle {}\n\nexport const VD_ALERT = [VdAlert, VdAlertTitle] as const;\n"],"mappings":"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"}