@masmarino/gabarit 2.0.0 → 2.1.1

package/fesm2022/masmarino-gabarit-checkbox.mjs

@@ -0,0 +1,170 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, forwardRef, input, model, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+let nextCheckboxId = 0;
+var Checkbox = class Checkbox {
+	id = input(`gbt-checkbox-${++nextCheckboxId}`, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	checked = model(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	hintId = computed(() => `${this.id()}-hint`, ...ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []);
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	writeValue(value) {
+		this.checked.set(!!value);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+	}
+	onToggle(event) {
+		const value = event.target.checked;
+		this.checked.set(value);
+		this.onChange(value);
+		this.onTouched();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Checkbox,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Checkbox,
+		isStandalone: true,
+		selector: "gbt-checkbox",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			checked: {
+				classPropertyName: "checked",
+				publicName: "checked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { checked: "checkedChange" },
+		host: { properties: { "class.gbt-checkbox-host--hint": "!!hint()" } },
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => Checkbox),
+			multi: true
+		}],
+		ngImport: i0,
+		template: "<label class=\"gbt-checkbox\" [class.gbt-checkbox--disabled]=\"isDisabled()\">\n  <input\n    type=\"checkbox\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-describedby]=\"hint() ? hintId() : null\"\n    (change)=\"onToggle($event)\"\n  />\n  <span>{{ label() }}</span>\n</label>\n@if (hint()) {\n  <p [id]=\"hintId()\" class=\"gbt-checkbox__hint\">{{ hint() }}</p>\n}\n",
+		styles: [":host(.gbt-checkbox-host--hint){display:block}.gbt-checkbox{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-primary);cursor:pointer}.gbt-checkbox:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-checkbox--disabled{cursor:not-allowed;opacity:.5}.gbt-checkbox input{flex-shrink:0;width:1rem;height:1rem;accent-color:var(--primary)}.gbt-checkbox__hint{margin:.125rem 0 0;padding-left:1.5rem;font-size:.75rem;line-height:1.4;color:var(--text-secondary)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Checkbox,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-checkbox",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[class.gbt-checkbox-host--hint]": "!!hint()" },
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => Checkbox),
+				multi: true
+			}],
+			template: "<label class=\"gbt-checkbox\" [class.gbt-checkbox--disabled]=\"isDisabled()\">\n  <input\n    type=\"checkbox\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-describedby]=\"hint() ? hintId() : null\"\n    (change)=\"onToggle($event)\"\n  />\n  <span>{{ label() }}</span>\n</label>\n@if (hint()) {\n  <p [id]=\"hintId()\" class=\"gbt-checkbox__hint\">{{ hint() }}</p>\n}\n",
+			styles: [":host(.gbt-checkbox-host--hint){display:block}.gbt-checkbox{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-primary);cursor:pointer}.gbt-checkbox:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-checkbox--disabled{cursor:not-allowed;opacity:.5}.gbt-checkbox input{flex-shrink:0;width:1rem;height:1rem;accent-color:var(--primary)}.gbt-checkbox__hint{margin:.125rem 0 0;padding-left:1.5rem;font-size:.75rem;line-height:1.4;color:var(--text-secondary)}\n"]
+		}]
+	}],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["checkedChange"]
+		}]
+	}
+});
+export { Checkbox };
+
+//# sourceMappingURL=masmarino-gabarit-checkbox.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-checkbox.mjs","names":[],"sources":["../../../projects/gabarit/checkbox/checkbox.ts","../../../projects/gabarit/checkbox/checkbox.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  computed,\n  forwardRef,\n  input,\n  model,\n  signal,\n} from '@angular/core'\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'\n\nlet nextCheckboxId = 0\n\n@Component({\n  selector: 'gbt-checkbox',\n  standalone: true,\n  templateUrl: './checkbox.html',\n  styleUrl: './checkbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.gbt-checkbox-host--hint]': '!!hint()',\n  },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => Checkbox),\n      multi: true,\n    },\n  ],\n})\nexport class Checkbox implements ControlValueAccessor {\n  id = input<string>(`gbt-checkbox-${++nextCheckboxId}`)\n  label = input<string>('')\n  disabled = input(false, { transform: booleanAttribute })\n  hint = input<string>('')\n  checked = model(false)\n\n  protected readonly hintId = computed(() => `${this.id()}-hint`)\n\n  private readonly formDisabled = signal(false)\n  protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled())\n\n  private onChange: (value: boolean) => void = () => {}\n  private onTouched: () => void = () => {}\n\n  writeValue(value: boolean): void {\n    this.checked.set(!!value)\n  }\n\n  registerOnChange(fn: (value: boolean) => void): void {\n    this.onChange = fn\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled)\n  }\n\n  protected onToggle(event: Event): void {\n    const value = (event.target as HTMLInputElement).checked\n    this.checked.set(value)\n    this.onChange(value)\n    this.onTouched()\n  }\n}\n","<label class=\"gbt-checkbox\" [class.gbt-checkbox--disabled]=\"isDisabled()\">\n  <input\n    type=\"checkbox\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-describedby]=\"hint() ? hintId() : null\"\n    (change)=\"onToggle($event)\"\n  />\n  <span>{{ label() }}</span>\n</label>\n@if (hint()) {\n  <p [id]=\"hintId()\" class=\"gbt-checkbox__hint\">{{ hint() }}</p>\n}\n"],"mappings":"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"}

package/fesm2022/masmarino-gabarit-confirm-danger-modal.mjs

@@ -0,0 +1,387 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, effect, input, output, signal } from "@angular/core";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { Button } from "@masmarino/gabarit/button";
+import { Icon } from "@masmarino/gabarit/icon";
+import { GbtInput } from "@masmarino/gabarit/input";
+import { Modal } from "@masmarino/gabarit/modal";
+var ConfirmDangerModal = class ConfirmDangerModal {
+	isOpen = input.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	heading = input.required(...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	message = input.required(...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
+	confirmText = input(void 0, ...ngDevMode ? [{ debugName: "confirmText" }] : /* istanbul ignore next */ []);
+	confirmInputLabel = input("Type to confirm", ...ngDevMode ? [{ debugName: "confirmInputLabel" }] : /* istanbul ignore next */ []);
+	confirmLabel = input("Confirm", ...ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []);
+	cancelLabel = input("Cancel", ...ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []);
+	closeLabel = input("Close", ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	busy = input(false, {
+		...ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	busyLabel = input("Working", ...ngDevMode ? [{ debugName: "busyLabel" }] : /* istanbul ignore next */ []);
+	confirmIcon = input(null, ...ngDevMode ? [{ debugName: "confirmIcon" }] : /* istanbul ignore next */ []);
+	tone = input("danger", ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+	confirmed = output();
+	closed = output();
+	typed = signal("", ...ngDevMode ? [{ debugName: "typed" }] : /* istanbul ignore next */ []);
+	requiresTyping = computed(() => {
+		const expected = this.confirmText();
+		return expected !== null && expected !== void 0;
+	}, ...ngDevMode ? [{ debugName: "requiresTyping" }] : /* istanbul ignore next */ []);
+	canConfirm = computed(() => !this.requiresTyping() || this.typed().length > 0 && this.typed() === this.confirmText(), ...ngDevMode ? [{ debugName: "canConfirm" }] : /* istanbul ignore next */ []);
+	confirmVariant = computed(() => this.tone() === "danger" ? "danger" : "primary", ...ngDevMode ? [{ debugName: "confirmVariant" }] : /* istanbul ignore next */ []);
+	toneIcon = computed(() => this.tone() === "neutral" ? "info" : "alert-triangle", ...ngDevMode ? [{ debugName: "toneIcon" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			if (!this.isOpen()) this.typed.set("");
+		});
+	}
+	confirm() {
+		if (this.canConfirm() && !this.busy()) this.confirmed.emit();
+	}
+	cancel() {
+		if (!this.busy()) this.closed.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ConfirmDangerModal,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: ConfirmDangerModal,
+		isStandalone: true,
+		selector: "gbt-confirm-danger-modal",
+		inputs: {
+			isOpen: {
+				classPropertyName: "isOpen",
+				publicName: "isOpen",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			message: {
+				classPropertyName: "message",
+				publicName: "message",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			confirmText: {
+				classPropertyName: "confirmText",
+				publicName: "confirmText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			confirmInputLabel: {
+				classPropertyName: "confirmInputLabel",
+				publicName: "confirmInputLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			confirmLabel: {
+				classPropertyName: "confirmLabel",
+				publicName: "confirmLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			cancelLabel: {
+				classPropertyName: "cancelLabel",
+				publicName: "cancelLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			busy: {
+				classPropertyName: "busy",
+				publicName: "busy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			busyLabel: {
+				classPropertyName: "busyLabel",
+				publicName: "busyLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			confirmIcon: {
+				classPropertyName: "confirmIcon",
+				publicName: "confirmIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tone: {
+				classPropertyName: "tone",
+				publicName: "tone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			confirmed: "confirmed",
+			closed: "closed"
+		},
+		ngImport: i0,
+		template: "<gbt-modal\n  [isOpen]=\"isOpen()\"\n  [heading]=\"heading()\"\n  [closeLabel]=\"closeLabel()\"\n  [busy]=\"busy()\"\n  [busyLabel]=\"busyLabel()\"\n  (closed)=\"cancel()\"\n>\n  @if (requiresTyping()) {\n    <p class=\"gbt-confirm-danger-modal__message\">{{ message() }}</p>\n    <gbt-input\n      [label]=\"confirmInputLabel()\"\n      [disabled]=\"busy()\"\n      [ngModel]=\"typed()\"\n      (ngModelChange)=\"typed.set($event)\"\n    />\n  } @else {\n    <div class=\"gbt-confirm-danger-modal__summary\" [attr.data-tone]=\"tone()\">\n      <span class=\"gbt-confirm-danger-modal__icon\" aria-hidden=\"true\">\n        <gbt-icon [name]=\"toneIcon()\" />\n      </span>\n      <p class=\"gbt-confirm-danger-modal__message\">{{ message() }}</p>\n    </div>\n  }\n  <div class=\"gbt-confirm-danger-modal__actions\">\n    <gbt-button\n      variant=\"secondary\"\n      [text]=\"cancelLabel()\"\n      [disabled]=\"busy()\"\n      (clicked)=\"cancel()\"\n    />\n    <gbt-button\n      [variant]=\"confirmVariant()\"\n      [text]=\"confirmLabel()\"\n      [iconName]=\"confirmIcon()\"\n      [disabled]=\"!canConfirm()\"\n      [loading]=\"busy()\"\n      [loadingLabel]=\"busyLabel()\"\n      (clicked)=\"confirm()\"\n    />\n  </div>\n</gbt-modal>\n",
+		styles: [".gbt-confirm-danger-modal__message{margin:0;color:var(--text-secondary)}.gbt-confirm-danger-modal__summary{display:flex;align-items:flex-start;gap:.875rem}.gbt-confirm-danger-modal__summary .gbt-confirm-danger-modal__message{min-width:0;padding-top:.375rem;line-height:1.6;overflow-wrap:anywhere}.gbt-confirm-danger-modal__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-confirm-danger-modal__icon gbt-icon{display:inline-flex;width:1.125rem;height:1.125rem}.gbt-confirm-danger-modal__summary[data-tone=warning] .gbt-confirm-danger-modal__icon{background:var(--color-warning-bg);color:var(--color-warning-bg-text)}.gbt-confirm-danger-modal__summary[data-tone=neutral] .gbt-confirm-danger-modal__icon{background:var(--color-info-bg);color:var(--color-info-bg-text)}.gbt-confirm-danger-modal__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem}@media(pointer:coarse){.gbt-confirm-danger-modal__actions ::ng-deep .gbt-button{min-height:44px}}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "component",
+				type: Modal,
+				selector: "gbt-modal",
+				inputs: [
+					"isOpen",
+					"heading",
+					"headingLevel",
+					"closeLabel",
+					"busy",
+					"busyLabel",
+					"returnFocus"
+				],
+				outputs: ["closed"]
+			},
+			{
+				kind: "component",
+				type: GbtInput,
+				selector: "gbt-input",
+				inputs: [
+					"id",
+					"label",
+					"type",
+					"required",
+					"disabled",
+					"placeholder",
+					"errorMessage",
+					"autocomplete",
+					"hint",
+					"hideLabel",
+					"size",
+					"mono",
+					"leadingIcon",
+					"inputmode",
+					"spellcheck",
+					"autocapitalize",
+					"enterkeyhint",
+					"maxlength",
+					"min",
+					"max",
+					"combobox",
+					"showPasswordLabel",
+					"hidePasswordLabel"
+				],
+				outputs: ["committed"]
+			},
+			{
+				kind: "component",
+				type: Button,
+				selector: "gbt-button, a[gbtButton]",
+				inputs: [
+					"variant",
+					"size",
+					"type",
+					"text",
+					"iconName",
+					"ariaLabel",
+					"loading",
+					"loadingLabel",
+					"disabled",
+					"pressed",
+					"ariaExpanded",
+					"ariaControls",
+					"ariaHaspopup",
+					"block",
+					"iconOnly"
+				],
+				outputs: ["clicked"]
+			},
+			{
+				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: ConfirmDangerModal,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-confirm-danger-modal",
+			standalone: true,
+			imports: [
+				FormsModule,
+				Modal,
+				GbtInput,
+				Button,
+				Icon
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<gbt-modal\n  [isOpen]=\"isOpen()\"\n  [heading]=\"heading()\"\n  [closeLabel]=\"closeLabel()\"\n  [busy]=\"busy()\"\n  [busyLabel]=\"busyLabel()\"\n  (closed)=\"cancel()\"\n>\n  @if (requiresTyping()) {\n    <p class=\"gbt-confirm-danger-modal__message\">{{ message() }}</p>\n    <gbt-input\n      [label]=\"confirmInputLabel()\"\n      [disabled]=\"busy()\"\n      [ngModel]=\"typed()\"\n      (ngModelChange)=\"typed.set($event)\"\n    />\n  } @else {\n    <div class=\"gbt-confirm-danger-modal__summary\" [attr.data-tone]=\"tone()\">\n      <span class=\"gbt-confirm-danger-modal__icon\" aria-hidden=\"true\">\n        <gbt-icon [name]=\"toneIcon()\" />\n      </span>\n      <p class=\"gbt-confirm-danger-modal__message\">{{ message() }}</p>\n    </div>\n  }\n  <div class=\"gbt-confirm-danger-modal__actions\">\n    <gbt-button\n      variant=\"secondary\"\n      [text]=\"cancelLabel()\"\n      [disabled]=\"busy()\"\n      (clicked)=\"cancel()\"\n    />\n    <gbt-button\n      [variant]=\"confirmVariant()\"\n      [text]=\"confirmLabel()\"\n      [iconName]=\"confirmIcon()\"\n      [disabled]=\"!canConfirm()\"\n      [loading]=\"busy()\"\n      [loadingLabel]=\"busyLabel()\"\n      (clicked)=\"confirm()\"\n    />\n  </div>\n</gbt-modal>\n",
+			styles: [".gbt-confirm-danger-modal__message{margin:0;color:var(--text-secondary)}.gbt-confirm-danger-modal__summary{display:flex;align-items:flex-start;gap:.875rem}.gbt-confirm-danger-modal__summary .gbt-confirm-danger-modal__message{min-width:0;padding-top:.375rem;line-height:1.6;overflow-wrap:anywhere}.gbt-confirm-danger-modal__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-confirm-danger-modal__icon gbt-icon{display:inline-flex;width:1.125rem;height:1.125rem}.gbt-confirm-danger-modal__summary[data-tone=warning] .gbt-confirm-danger-modal__icon{background:var(--color-warning-bg);color:var(--color-warning-bg-text)}.gbt-confirm-danger-modal__summary[data-tone=neutral] .gbt-confirm-danger-modal__icon{background:var(--color-info-bg);color:var(--color-info-bg-text)}.gbt-confirm-danger-modal__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem}@media(pointer:coarse){.gbt-confirm-danger-modal__actions ::ng-deep .gbt-button{min-height:44px}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		isOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isOpen",
+				required: true
+			}]
+		}],
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: true
+			}]
+		}],
+		message: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "message",
+				required: true
+			}]
+		}],
+		confirmText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "confirmText",
+				required: false
+			}]
+		}],
+		confirmInputLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "confirmInputLabel",
+				required: false
+			}]
+		}],
+		confirmLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "confirmLabel",
+				required: false
+			}]
+		}],
+		cancelLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cancelLabel",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}],
+		busy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "busy",
+				required: false
+			}]
+		}],
+		busyLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "busyLabel",
+				required: false
+			}]
+		}],
+		confirmIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "confirmIcon",
+				required: false
+			}]
+		}],
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}],
+		confirmed: [{
+			type: i0.Output,
+			args: ["confirmed"]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}]
+	}
+});
+export { ConfirmDangerModal };
+
+//# sourceMappingURL=masmarino-gabarit-confirm-danger-modal.mjs.map

package/fesm2022/masmarino-gabarit-confirm-danger-modal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-confirm-danger-modal.mjs","names":[],"sources":["../../../projects/gabarit/confirm-danger-modal/confirm-danger-modal.ts","../../../projects/gabarit/confirm-danger-modal/confirm-danger-modal.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  booleanAttribute,\n  Component,\n  computed,\n  effect,\n  input,\n  output,\n  signal,\n} from '@angular/core'\nimport { FormsModule } from '@angular/forms'\nimport { Button, ButtonVariant } from '@masmarino/gabarit/button'\nimport { Icon } from '@masmarino/gabarit/icon'\nimport { GbtInput } from '@masmarino/gabarit/input'\nimport { Modal } from '@masmarino/gabarit/modal'\n\nexport type ConfirmDangerModalTone = 'danger' | 'warning' | 'neutral'\n\n@Component({\n  selector: 'gbt-confirm-danger-modal',\n  standalone: true,\n  imports: [FormsModule, Modal, GbtInput, Button, Icon],\n  templateUrl: './confirm-danger-modal.html',\n  styleUrl: './confirm-danger-modal.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ConfirmDangerModal {\n  isOpen = input.required<boolean>()\n  heading = input.required<string>()\n  message = input.required<string>()\n  confirmText = input<string | null | undefined>(undefined)\n  confirmInputLabel = input<string>('Type to confirm')\n  confirmLabel = input<string>('Confirm')\n  cancelLabel = input<string>('Cancel')\n  closeLabel = input<string>('Close')\n  busy = input(false, { transform: booleanAttribute })\n  busyLabel = input<string>('Working')\n  confirmIcon = input<string | null>(null)\n  tone = input<ConfirmDangerModalTone>('danger')\n\n  confirmed = output<void>()\n  closed = output<void>()\n\n  protected readonly typed = signal('')\n  protected readonly requiresTyping = computed(() => {\n    const expected = this.confirmText()\n    return expected !== null && expected !== undefined\n  })\n  protected readonly canConfirm = computed(\n    () =>\n      !this.requiresTyping() || (this.typed().length > 0 && this.typed() === this.confirmText()),\n  )\n  protected readonly confirmVariant = computed<ButtonVariant>(() =>\n    this.tone() === 'danger' ? 'danger' : 'primary',\n  )\n  protected readonly toneIcon = computed(() =>\n    this.tone() === 'neutral' ? 'info' : 'alert-triangle',\n  )\n\n  constructor() {\n    effect(() => {\n      if (!this.isOpen()) {\n        this.typed.set('')\n      }\n    })\n  }\n\n  protected confirm(): void {\n    if (this.canConfirm() && !this.busy()) {\n      this.confirmed.emit()\n    }\n  }\n\n  protected cancel(): void {\n    if (!this.busy()) {\n      this.closed.emit()\n    }\n  }\n}\n","<gbt-modal\n  [isOpen]=\"isOpen()\"\n  [heading]=\"heading()\"\n  [closeLabel]=\"closeLabel()\"\n  [busy]=\"busy()\"\n  [busyLabel]=\"busyLabel()\"\n  (closed)=\"cancel()\"\n>\n  @if (requiresTyping()) {\n    <p class=\"gbt-confirm-danger-modal__message\">{{ message() }}</p>\n    <gbt-input\n      [label]=\"confirmInputLabel()\"\n      [disabled]=\"busy()\"\n      [ngModel]=\"typed()\"\n      (ngModelChange)=\"typed.set($event)\"\n    />\n  } @else {\n    <div class=\"gbt-confirm-danger-modal__summary\" [attr.data-tone]=\"tone()\">\n      <span class=\"gbt-confirm-danger-modal__icon\" aria-hidden=\"true\">\n        <gbt-icon [name]=\"toneIcon()\" />\n      </span>\n      <p class=\"gbt-confirm-danger-modal__message\">{{ message() }}</p>\n    </div>\n  }\n  <div class=\"gbt-confirm-danger-modal__actions\">\n    <gbt-button\n      variant=\"secondary\"\n      [text]=\"cancelLabel()\"\n      [disabled]=\"busy()\"\n      (clicked)=\"cancel()\"\n    />\n    <gbt-button\n      [variant]=\"confirmVariant()\"\n      [text]=\"confirmLabel()\"\n      [iconName]=\"confirmIcon()\"\n      [disabled]=\"!canConfirm()\"\n      [loading]=\"busy()\"\n      [loadingLabel]=\"busyLabel()\"\n      (clicked)=\"confirm()\"\n    />\n  </div>\n</gbt-modal>\n"],"mappings":"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"}