@masmarino/gabarit 1.4.0 → 2.1.0

package/fesm2022/masmarino-gabarit-switch.mjs

@@ -0,0 +1,151 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, forwardRef, input, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+let nextSwitchId = 0;
+var Switch = class Switch {
+	id = input(`gbt-switch-${++nextSwitchId}`, ...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 */ []);
+	hintId = computed(() => `${this.id()}-hint`, ...ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []);
+	checked = signal(false, ...ngDevMode ? [{ debugName: "checked" }] : /* 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: Switch,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Switch,
+		isStandalone: true,
+		selector: "gbt-switch",
+		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
+			}
+		},
+		host: { properties: { "class.gbt-switch-host--hint": "!!hint()" } },
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => Switch),
+			multi: true
+		}],
+		ngImport: i0,
+		template: "<label class=\"gbt-switch\" [class.gbt-switch--disabled]=\"isDisabled()\">\n  <input\n    type=\"checkbox\"\n    role=\"switch\"\n    class=\"gbt-switch__input\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-describedby]=\"hint() ? hintId() : null\"\n    (change)=\"onToggle($event)\"\n  />\n  <span class=\"gbt-switch__track\">\n    <span class=\"gbt-switch__thumb\"></span>\n  </span>\n  <span>{{ label() }}</span>\n</label>\n@if (hint()) {\n  <p [id]=\"hintId()\" class=\"gbt-switch__hint\">{{ hint() }}</p>\n}\n",
+		styles: [":host(.gbt-switch-host--hint){display:block}.gbt-switch{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-primary);cursor:pointer}.gbt-switch:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-switch--disabled{cursor:not-allowed;opacity:.5}.gbt-switch__input{position:absolute;width:2.25rem;height:1.25rem;margin:0;opacity:0;cursor:inherit}.gbt-switch__track{position:relative;display:inline-flex;flex-shrink:0;align-items:center;width:2.25rem;height:1.25rem;background:var(--border-color);border-radius:999px;transition:background .15s ease}.gbt-switch__input:checked+.gbt-switch__track{background:var(--primary)}.gbt-switch__input:focus-visible+.gbt-switch__track{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-switch__thumb{position:absolute;top:.125rem;left:.125rem;width:1rem;height:1rem;background:var(--bg-principal);border-radius:50%;box-shadow:var(--site-shadow-sm);transition:transform .15s ease}.gbt-switch__input:checked~.gbt-switch__track .gbt-switch__thumb{transform:translate(1rem)}.gbt-switch__hint{margin:.125rem 0 0;padding-left:2.75rem;font-size:.75rem;line-height:1.4;color:var(--text-secondary)}@media(prefers-reduced-motion:reduce){.gbt-switch__track,.gbt-switch__thumb{transition:none}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Switch,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-switch",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[class.gbt-switch-host--hint]": "!!hint()" },
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => Switch),
+				multi: true
+			}],
+			template: "<label class=\"gbt-switch\" [class.gbt-switch--disabled]=\"isDisabled()\">\n  <input\n    type=\"checkbox\"\n    role=\"switch\"\n    class=\"gbt-switch__input\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-describedby]=\"hint() ? hintId() : null\"\n    (change)=\"onToggle($event)\"\n  />\n  <span class=\"gbt-switch__track\">\n    <span class=\"gbt-switch__thumb\"></span>\n  </span>\n  <span>{{ label() }}</span>\n</label>\n@if (hint()) {\n  <p [id]=\"hintId()\" class=\"gbt-switch__hint\">{{ hint() }}</p>\n}\n",
+			styles: [":host(.gbt-switch-host--hint){display:block}.gbt-switch{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-primary);cursor:pointer}.gbt-switch:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-switch--disabled{cursor:not-allowed;opacity:.5}.gbt-switch__input{position:absolute;width:2.25rem;height:1.25rem;margin:0;opacity:0;cursor:inherit}.gbt-switch__track{position:relative;display:inline-flex;flex-shrink:0;align-items:center;width:2.25rem;height:1.25rem;background:var(--border-color);border-radius:999px;transition:background .15s ease}.gbt-switch__input:checked+.gbt-switch__track{background:var(--primary)}.gbt-switch__input:focus-visible+.gbt-switch__track{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-switch__thumb{position:absolute;top:.125rem;left:.125rem;width:1rem;height:1rem;background:var(--bg-principal);border-radius:50%;box-shadow:var(--site-shadow-sm);transition:transform .15s ease}.gbt-switch__input:checked~.gbt-switch__track .gbt-switch__thumb{transform:translate(1rem)}.gbt-switch__hint{margin:.125rem 0 0;padding-left:2.75rem;font-size:.75rem;line-height:1.4;color:var(--text-secondary)}@media(prefers-reduced-motion:reduce){.gbt-switch__track,.gbt-switch__thumb{transition:none}}\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
+			}]
+		}]
+	}
+});
+export { Switch };
+
+//# sourceMappingURL=masmarino-gabarit-switch.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-switch.mjs","names":[],"sources":["../../../projects/gabarit/switch/switch.ts","../../../projects/gabarit/switch/switch.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  computed,\n  forwardRef,\n  input,\n  signal,\n} from '@angular/core'\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'\n\nlet nextSwitchId = 0\n\n@Component({\n  selector: 'gbt-switch',\n  standalone: true,\n  templateUrl: './switch.html',\n  styleUrl: './switch.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.gbt-switch-host--hint]': '!!hint()',\n  },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => Switch),\n      multi: true,\n    },\n  ],\n})\nexport class Switch implements ControlValueAccessor {\n  id = input<string>(`gbt-switch-${++nextSwitchId}`)\n  label = input<string>('')\n  disabled = input(false, { transform: booleanAttribute })\n  hint = input<string>('')\n\n  protected readonly hintId = computed(() => `${this.id()}-hint`)\n  protected readonly checked = signal(false)\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-switch\" [class.gbt-switch--disabled]=\"isDisabled()\">\n  <input\n    type=\"checkbox\"\n    role=\"switch\"\n    class=\"gbt-switch__input\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-describedby]=\"hint() ? hintId() : null\"\n    (change)=\"onToggle($event)\"\n  />\n  <span class=\"gbt-switch__track\">\n    <span class=\"gbt-switch__thumb\"></span>\n  </span>\n  <span>{{ label() }}</span>\n</label>\n@if (hint()) {\n  <p [id]=\"hintId()\" class=\"gbt-switch__hint\">{{ hint() }}</p>\n}\n"],"mappings":";;;AAWA,IAAI,eAAe;AAmBnB,IAAa,SAAb,MAAa,OAAM;CACjB,KAAK,MAAc,cAAc,EAAE,gBAAe,GAAA,YAAA,CAAA,EAAA,WAAA,KAAA,CAAA,+BAAA,CAAA,CAAA;CAClD,QAAQ,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACzB,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACrD,OAAO,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEL,SAAS,eAAe,GAAG,KAAK,GAAE,EAAE,QAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAC5C,UAAU,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEzB,eAAe,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAC1B,aAAa,eAAe,KAAK,SAAQ,KAAM,KAAK,aAAY,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAE9E,iBAA0C,CAAE;CAC5C,kBAA6B,CAAE;CAEvC,WAAW,OAAc;EACvB,KAAK,QAAQ,IAAI,CAAC,CAAC,KAAK;CAC1B;CAEA,iBAAiB,IAA4B;EAC3C,KAAK,WAAW;CAClB;CAEA,kBAAkB,IAAc;EAC9B,KAAK,YAAY;CACnB;CAEA,iBAAiB,YAAmB;EAClC,KAAK,aAAa,IAAI,UAAU;CAClC;CAEU,SAAS,OAAY;EAC7B,MAAM,QAAS,MAAM,OAA4B;EACjD,KAAK,QAAQ,IAAI,KAAK;EACtB,KAAK,SAAS,KAAK;EACnB,KAAK,UAAS;CAChB;CApCW,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;GAAA,IAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,+BAAA,WAAA,EAAA;EAAA,WARN,CACT;GACE,SAAS;GACT,aAAa,iBAAiB,MAAM;GACpC,OAAO;EACR,CACF;EAAA,UAAA;EAAA,UC5BH;EAmBA,QAAA,CAAA,+2CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADWa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAM,YAAA,CAAA;EAjBlB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAY,YACV;GAAI,iBAGC,wBAAwB;GAAM,MACzC,EACJ,iCAAiC,WAClC;GAAA,WACU,CACT;IACE,SAAS;IACT,aAAa,iBAAgB,MAAO;IACpC,OAAO;GACR,CACF;GAAA,UAAA;GAAA,QAAA,CAAA,+2CAAA;EAAA,CAAA"}

package/fesm2022/masmarino-gabarit-table.mjs

@@ -0,0 +1,206 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, input, output } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+const INTERACTIVE_TARGET_SELECTOR = [
+	"button",
+	"a[href]",
+	"input",
+	"select",
+	"textarea",
+	"label",
+	"summary",
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"[role=\"button\"]",
+	"[role=\"link\"]",
+	"[role=\"checkbox\"]",
+	"[role=\"switch\"]",
+	"[role=\"radio\"]",
+	"[role=\"tab\"]",
+	"[role=\"option\"]",
+	"[role=\"menuitem\"]",
+	"[role=\"menuitemcheckbox\"]",
+	"[role=\"menuitemradio\"]",
+	"[role=\"textbox\"]",
+	"[role=\"searchbox\"]",
+	"[role=\"slider\"]",
+	"[role=\"spinbutton\"]"
+].join(", ");
+var Table = class Table {
+	data = input.required(...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	columns = input.required(...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
+	trackBy = input(null, ...ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []);
+	emptyMessage = input("No data", ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
+	caption = input.required(...ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []);
+	clickableRows = input(false, {
+		...ngDevMode ? { debugName: "clickableRows" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	rowClick = output();
+	trackRow = (index, row) => {
+		const identify = this.trackBy();
+		return identify ? identify(row) : index;
+	};
+	onRowClick(event, row) {
+		if (!this.isInteractiveTarget(event)) this.rowClick.emit(row);
+	}
+	onRowKeydown(event, row) {
+		if ((event.key === "Enter" || event.key === " ") && !this.isInteractiveTarget(event)) {
+			event.preventDefault();
+			this.rowClick.emit(row);
+		}
+	}
+	isInteractiveTarget(event) {
+		return event.target.closest(INTERACTIVE_TARGET_SELECTOR) !== null;
+	}
+	cellValue(row, column) {
+		return column.format ? column.format(row) : row[column.key];
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Table,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Table,
+		isStandalone: true,
+		selector: "gbt-table",
+		inputs: {
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			columns: {
+				classPropertyName: "columns",
+				publicName: "columns",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			trackBy: {
+				classPropertyName: "trackBy",
+				publicName: "trackBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyMessage: {
+				classPropertyName: "emptyMessage",
+				publicName: "emptyMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			caption: {
+				classPropertyName: "caption",
+				publicName: "caption",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			clickableRows: {
+				classPropertyName: "clickableRows",
+				publicName: "clickableRows",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { rowClick: "rowClick" },
+		ngImport: i0,
+		template: "<table class=\"gbt-table\">\n  <caption>\n    {{\n      caption()\n    }}\n  </caption>\n  <thead>\n    <tr>\n      @for (column of columns(); track column.key) {\n        <th scope=\"col\">{{ column.label }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of data(); track trackRow($index, row)) {\n      <tr\n        [class.gbt-table__row--clickable]=\"clickableRows()\"\n        [attr.tabindex]=\"clickableRows() ? 0 : null\"\n        (click)=\"clickableRows() && onRowClick($event, row)\"\n        (keydown)=\"clickableRows() && onRowKeydown($event, row)\"\n      >\n        @for (column of columns(); track column.key) {\n          <td>\n            @if (column.cellTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"column.cellTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\"\n              />\n            } @else {\n              {{ cellValue(row, column) }}\n            }\n          </td>\n        }\n      </tr>\n    } @empty {\n      <tr class=\"gbt-table__empty\">\n        <td [attr.colspan]=\"columns().length\">{{ emptyMessage() }}</td>\n      </tr>\n    }\n  </tbody>\n</table>\n",
+		styles: [".gbt-table{width:100%;border-collapse:collapse;font-size:.875rem}.gbt-table caption{text-align:left;padding:0 0 .625rem;font-weight:600;color:var(--text-primary)}.gbt-table th{text-align:left;padding:.625rem .75rem;font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--border-color)}.gbt-table td{padding:.625rem .75rem;color:var(--text-primary);border-bottom:1px solid var(--border-color)}.gbt-table tbody tr{transition:background-color var(--site-transition-fast)}.gbt-table tbody tr.gbt-table__row--clickable{cursor:pointer}.gbt-table tbody tr.gbt-table__row--clickable:hover{background:var(--bg-hover)}.gbt-table tbody tr:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}.gbt-table__empty{cursor:default;text-align:center;color:var(--text-discret)}.gbt-table__empty:hover{background:none}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Table,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-table",
+			standalone: true,
+			imports: [NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<table class=\"gbt-table\">\n  <caption>\n    {{\n      caption()\n    }}\n  </caption>\n  <thead>\n    <tr>\n      @for (column of columns(); track column.key) {\n        <th scope=\"col\">{{ column.label }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of data(); track trackRow($index, row)) {\n      <tr\n        [class.gbt-table__row--clickable]=\"clickableRows()\"\n        [attr.tabindex]=\"clickableRows() ? 0 : null\"\n        (click)=\"clickableRows() && onRowClick($event, row)\"\n        (keydown)=\"clickableRows() && onRowKeydown($event, row)\"\n      >\n        @for (column of columns(); track column.key) {\n          <td>\n            @if (column.cellTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"column.cellTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\"\n              />\n            } @else {\n              {{ cellValue(row, column) }}\n            }\n          </td>\n        }\n      </tr>\n    } @empty {\n      <tr class=\"gbt-table__empty\">\n        <td [attr.colspan]=\"columns().length\">{{ emptyMessage() }}</td>\n      </tr>\n    }\n  </tbody>\n</table>\n",
+			styles: [".gbt-table{width:100%;border-collapse:collapse;font-size:.875rem}.gbt-table caption{text-align:left;padding:0 0 .625rem;font-weight:600;color:var(--text-primary)}.gbt-table th{text-align:left;padding:.625rem .75rem;font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--border-color)}.gbt-table td{padding:.625rem .75rem;color:var(--text-primary);border-bottom:1px solid var(--border-color)}.gbt-table tbody tr{transition:background-color var(--site-transition-fast)}.gbt-table tbody tr.gbt-table__row--clickable{cursor:pointer}.gbt-table tbody tr.gbt-table__row--clickable:hover{background:var(--bg-hover)}.gbt-table tbody tr:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}.gbt-table__empty{cursor:default;text-align:center;color:var(--text-discret)}.gbt-table__empty:hover{background:none}\n"]
+		}]
+	}],
+	propDecorators: {
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: true
+			}]
+		}],
+		columns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "columns",
+				required: true
+			}]
+		}],
+		trackBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trackBy",
+				required: false
+			}]
+		}],
+		emptyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyMessage",
+				required: false
+			}]
+		}],
+		caption: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "caption",
+				required: true
+			}]
+		}],
+		clickableRows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clickableRows",
+				required: false
+			}]
+		}],
+		rowClick: [{
+			type: i0.Output,
+			args: ["rowClick"]
+		}]
+	}
+});
+export { Table };
+
+//# sourceMappingURL=masmarino-gabarit-table.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-table.mjs","names":[],"sources":["../../../projects/gabarit/table/table.ts","../../../projects/gabarit/table/table.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  TemplateRef,\n  booleanAttribute,\n  input,\n  output,\n} from '@angular/core'\nimport { NgTemplateOutlet } from '@angular/common'\n\nexport interface TableColumn<T> {\n  key: string\n  label: string\n  format?: (row: T) => string\n  cellTemplate?: TemplateRef<{ $implicit: T }>\n}\n\nconst INTERACTIVE_TARGET_SELECTOR = [\n  'button',\n  'a[href]',\n  'input',\n  'select',\n  'textarea',\n  'label',\n  'summary',\n  '[contenteditable]:not([contenteditable=\"false\"])',\n  '[role=\"button\"]',\n  '[role=\"link\"]',\n  '[role=\"checkbox\"]',\n  '[role=\"switch\"]',\n  '[role=\"radio\"]',\n  '[role=\"tab\"]',\n  '[role=\"option\"]',\n  '[role=\"menuitem\"]',\n  '[role=\"menuitemcheckbox\"]',\n  '[role=\"menuitemradio\"]',\n  '[role=\"textbox\"]',\n  '[role=\"searchbox\"]',\n  '[role=\"slider\"]',\n  '[role=\"spinbutton\"]',\n].join(', ')\n\n@Component({\n  selector: 'gbt-table',\n  standalone: true,\n  imports: [NgTemplateOutlet],\n  templateUrl: './table.html',\n  styleUrl: './table.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Table<T extends object> {\n  data = input.required<T[]>()\n  columns = input.required<TableColumn<T>[]>()\n  trackBy = input<((row: T) => unknown) | null>(null)\n  emptyMessage = input<string>('No data')\n  caption = input.required<string>()\n  clickableRows = input(false, { transform: booleanAttribute })\n\n  rowClick = output<T>()\n\n  protected trackRow = (index: number, row: T): unknown => {\n    const identify = this.trackBy()\n    return identify ? identify(row) : index\n  }\n\n  protected onRowClick(event: MouseEvent, row: T): void {\n    if (!this.isInteractiveTarget(event)) {\n      this.rowClick.emit(row)\n    }\n  }\n\n  protected onRowKeydown(event: KeyboardEvent, row: T): void {\n    if ((event.key === 'Enter' || event.key === ' ') && !this.isInteractiveTarget(event)) {\n      event.preventDefault()\n      this.rowClick.emit(row)\n    }\n  }\n\n  private isInteractiveTarget(event: Event): boolean {\n    return (event.target as HTMLElement).closest(INTERACTIVE_TARGET_SELECTOR) !== null\n  }\n\n  protected cellValue(row: T, column: TableColumn<T>): unknown {\n    return column.format ? column.format(row) : (row as Record<string, unknown>)[column.key]\n  }\n}\n","<table class=\"gbt-table\">\n  <caption>\n    {{\n      caption()\n    }}\n  </caption>\n  <thead>\n    <tr>\n      @for (column of columns(); track column.key) {\n        <th scope=\"col\">{{ column.label }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of data(); track trackRow($index, row)) {\n      <tr\n        [class.gbt-table__row--clickable]=\"clickableRows()\"\n        [attr.tabindex]=\"clickableRows() ? 0 : null\"\n        (click)=\"clickableRows() && onRowClick($event, row)\"\n        (keydown)=\"clickableRows() && onRowKeydown($event, row)\"\n      >\n        @for (column of columns(); track column.key) {\n          <td>\n            @if (column.cellTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"column.cellTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row }\"\n              />\n            } @else {\n              {{ cellValue(row, column) }}\n            }\n          </td>\n        }\n      </tr>\n    } @empty {\n      <tr class=\"gbt-table__empty\">\n        <td [attr.colspan]=\"columns().length\">{{ emptyMessage() }}</td>\n      </tr>\n    }\n  </tbody>\n</table>\n"],"mappings":"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"}

package/fesm2022/masmarino-gabarit-tabs.mjs

@@ -0,0 +1,210 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, contentChildren, effect, input, model, signal, viewChildren } from "@angular/core";
+var Tab = class Tab {
+	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 */ []);
+	setState(index, active, groupId) {
+		this.index.set(index);
+		this.active.set(active);
+		this.groupId.set(groupId);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Tab,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: Tab,
+		isStandalone: true,
+		selector: "gbt-tab",
+		inputs: { label: {
+			classPropertyName: "label",
+			publicName: "label",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "role": "tabpanel" },
+			properties: {
+				"style.display": "active() ? null : 'none'",
+				"id": "groupId() + '-panel-' + index()",
+				"attr.aria-labelledby": "groupId() + '-trigger-' + index()"
+			}
+		},
+		ngImport: i0,
+		template: `<ng-content></ng-content>`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Tab,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-tab",
+			standalone: true,
+			imports: [],
+			template: `<ng-content></ng-content>`,
+			host: {
+				role: "tabpanel",
+				"[style.display]": "active() ? null : 'none'",
+				"[id]": "groupId() + '-panel-' + index()",
+				"[attr.aria-labelledby]": "groupId() + '-trigger-' + index()"
+			},
+			changeDetection: ChangeDetectionStrategy.OnPush
+		}]
+	}],
+	propDecorators: { label: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "label",
+			required: true
+		}]
+	}] }
+});
+let nextTabsId = 0;
+var Tabs = class Tabs {
+	id = input(`gbt-tabs-${++nextTabsId}`, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	tabs = contentChildren(Tab, ...ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []);
+	triggers = viewChildren("trigger", ...ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []);
+	activeIndex = model(0, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const tabs = this.tabs();
+			const active = this.activeIndex();
+			const groupId = this.id();
+			tabs.forEach((tab, i) => tab.setState(i, i === active, groupId));
+		});
+		effect(() => {
+			const count = this.tabs().length;
+			if (count === 0) return;
+			const current = this.activeIndex();
+			const clamped = Math.min(Math.max(current, 0), count - 1);
+			if (clamped !== current) this.activeIndex.set(clamped);
+		});
+	}
+	select(index) {
+		this.activeIndex.set(index);
+	}
+	onKeydown(event, index) {
+		const count = this.tabs().length;
+		if (count === 0) return;
+		let next = null;
+		if (event.key === "ArrowRight") next = (index + 1) % count;
+		else if (event.key === "ArrowLeft") next = (index - 1 + count) % count;
+		if (next === null) return;
+		event.preventDefault();
+		this.select(next);
+		this.triggers()[next]?.nativeElement.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Tabs,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Tabs,
+		isStandalone: true,
+		selector: "gbt-tabs",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			activeIndex: {
+				classPropertyName: "activeIndex",
+				publicName: "activeIndex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { activeIndex: "activeIndexChange" },
+		queries: [{
+			propertyName: "tabs",
+			predicate: Tab,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "triggers",
+			predicate: ["trigger"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"gbt-tabs\">\n  <div class=\"gbt-tabs__list\" role=\"tablist\">\n    @for (tab of tabs(); track tab; let i = $index) {\n      <button\n        #trigger\n        type=\"button\"\n        class=\"gbt-tabs__trigger\"\n        [class.gbt-tabs__trigger--active]=\"activeIndex() === i\"\n        role=\"tab\"\n        [id]=\"id() + '-trigger-' + i\"\n        [attr.aria-selected]=\"activeIndex() === i\"\n        [attr.aria-controls]=\"id() + '-panel-' + i\"\n        [tabIndex]=\"activeIndex() === i ? 0 : -1\"\n        (click)=\"select(i)\"\n        (keydown)=\"onKeydown($event, i)\"\n      >\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n  <div class=\"gbt-tabs__panels\">\n    <ng-content></ng-content>\n  </div>\n</div>\n",
+		styles: [":host{display:block}.gbt-tabs{display:flex;flex-direction:column}.gbt-tabs__list{display:flex;gap:.5rem;border-bottom:1px solid var(--border-color);overflow-x:auto}.gbt-tabs__trigger{appearance:none;background:none;border:none;border-bottom:2px solid transparent;padding:.75rem 1rem;font-size:.9375rem;font-weight:500;color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:color var(--site-transition-fast),border-color var(--site-transition-fast)}.gbt-tabs__trigger:hover{color:var(--text-primary)}.gbt-tabs__trigger:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px;border-radius:var(--site-border-radius-sm)}.gbt-tabs__trigger--active{color:var(--primary);border-bottom-color:var(--primary)}.gbt-tabs__panels{padding-top:1rem;display:flex;flex-direction:column;gap:1rem}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Tabs,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-tabs",
+			standalone: true,
+			imports: [],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"gbt-tabs\">\n  <div class=\"gbt-tabs__list\" role=\"tablist\">\n    @for (tab of tabs(); track tab; let i = $index) {\n      <button\n        #trigger\n        type=\"button\"\n        class=\"gbt-tabs__trigger\"\n        [class.gbt-tabs__trigger--active]=\"activeIndex() === i\"\n        role=\"tab\"\n        [id]=\"id() + '-trigger-' + i\"\n        [attr.aria-selected]=\"activeIndex() === i\"\n        [attr.aria-controls]=\"id() + '-panel-' + i\"\n        [tabIndex]=\"activeIndex() === i ? 0 : -1\"\n        (click)=\"select(i)\"\n        (keydown)=\"onKeydown($event, i)\"\n      >\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n  <div class=\"gbt-tabs__panels\">\n    <ng-content></ng-content>\n  </div>\n</div>\n",
+			styles: [":host{display:block}.gbt-tabs{display:flex;flex-direction:column}.gbt-tabs__list{display:flex;gap:.5rem;border-bottom:1px solid var(--border-color);overflow-x:auto}.gbt-tabs__trigger{appearance:none;background:none;border:none;border-bottom:2px solid transparent;padding:.75rem 1rem;font-size:.9375rem;font-weight:500;color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:color var(--site-transition-fast),border-color var(--site-transition-fast)}.gbt-tabs__trigger:hover{color:var(--text-primary)}.gbt-tabs__trigger:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px;border-radius:var(--site-border-radius-sm)}.gbt-tabs__trigger--active{color:var(--primary);border-bottom-color:var(--primary)}.gbt-tabs__panels{padding-top:1rem;display:flex;flex-direction:column;gap:1rem}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		tabs: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => Tab), { isSignal: true }]
+		}],
+		triggers: [{
+			type: i0.ViewChildren,
+			args: ["trigger", { isSignal: true }]
+		}],
+		activeIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeIndex",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["activeIndexChange"]
+		}]
+	}
+});
+export { Tab, Tabs };
+
+//# sourceMappingURL=masmarino-gabarit-tabs.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-tabs.mjs","names":[],"sources":["../../../projects/gabarit/tabs/tab/tab.ts","../../../projects/gabarit/tabs/tabs.ts","../../../projects/gabarit/tabs/tabs.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core'\n\n@Component({\n  selector: 'gbt-tab',\n  standalone: true,\n  imports: [],\n  template: `<ng-content></ng-content>`,\n  host: {\n    role: 'tabpanel',\n    '[style.display]': \"active() ? null : 'none'\",\n    '[id]': \"groupId() + '-panel-' + index()\",\n    '[attr.aria-labelledby]': \"groupId() + '-trigger-' + index()\",\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Tab {\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  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","import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  contentChildren,\n  effect,\n  input,\n  model,\n  viewChildren,\n} from '@angular/core'\nimport { Tab } from './tab/tab'\n\nlet nextTabsId = 0\n\n@Component({\n  selector: 'gbt-tabs',\n  standalone: true,\n  imports: [],\n  templateUrl: './tabs.html',\n  styleUrl: './tabs.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Tabs {\n  id = input<string>(`gbt-tabs-${++nextTabsId}`)\n\n  protected readonly tabs = contentChildren(Tab)\n  private readonly triggers = viewChildren<ElementRef<HTMLButtonElement>>('trigger')\n\n  activeIndex = model(0)\n\n  constructor() {\n    effect(() => {\n      const tabs = this.tabs()\n      const active = this.activeIndex()\n      const groupId = this.id()\n      tabs.forEach((tab, i) => tab.setState(i, i === active, groupId))\n    })\n\n    effect(() => {\n      const count = this.tabs().length\n      if (count === 0) {\n        return\n      }\n      const current = this.activeIndex()\n      const clamped = Math.min(Math.max(current, 0), count - 1)\n      if (clamped !== current) {\n        this.activeIndex.set(clamped)\n      }\n    })\n  }\n\n  protected select(index: number): void {\n    this.activeIndex.set(index)\n  }\n\n  protected onKeydown(event: KeyboardEvent, index: number): void {\n    const count = this.tabs().length\n    if (count === 0) {\n      return\n    }\n    let next: number | null = null\n    if (event.key === 'ArrowRight') {\n      next = (index + 1) % count\n    } else if (event.key === 'ArrowLeft') {\n      next = (index - 1 + count) % count\n    }\n    if (next === null) {\n      return\n    }\n    event.preventDefault()\n    this.select(next)\n    this.triggers()[next]?.nativeElement.focus()\n  }\n}\n","<div class=\"gbt-tabs\">\n  <div class=\"gbt-tabs__list\" role=\"tablist\">\n    @for (tab of tabs(); track tab; let i = $index) {\n      <button\n        #trigger\n        type=\"button\"\n        class=\"gbt-tabs__trigger\"\n        [class.gbt-tabs__trigger--active]=\"activeIndex() === i\"\n        role=\"tab\"\n        [id]=\"id() + '-trigger-' + i\"\n        [attr.aria-selected]=\"activeIndex() === i\"\n        [attr.aria-controls]=\"id() + '-panel-' + i\"\n        [tabIndex]=\"activeIndex() === i ? 0 : -1\"\n        (click)=\"select(i)\"\n        (keydown)=\"onKeydown($event, i)\"\n      >\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n  <div class=\"gbt-tabs__panels\">\n    <ng-content></ng-content>\n  </div>\n</div>\n"],"mappings":"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"}