@masmarino/gabarit 2.0.0 → 2.1.1

package/fesm2022/masmarino-gabarit-list-card.mjs

@@ -0,0 +1,320 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
+import { Button } from "@masmarino/gabarit/button";
+import { Skeleton } from "@masmarino/gabarit/skeleton";
+import { EmptyState } from "@masmarino/gabarit/empty-state";
+const SKELETON_WIDTHS = [
+	"62%",
+	"48%",
+	"70%",
+	"55%",
+	"66%",
+	"44%"
+];
+var ListCard = class ListCard {
+	state = input("ready", ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	loadingLabel = input("Loading…", ...ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []);
+	skeletonRows = input(4, ...ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []);
+	skeletonHeader = input(true, ...ngDevMode ? [{ debugName: "skeletonHeader" }] : /* istanbul ignore next */ []);
+	failedHeading = input("The list could not be loaded", ...ngDevMode ? [{ debugName: "failedHeading" }] : /* istanbul ignore next */ []);
+	failedMessage = input("", ...ngDevMode ? [{ debugName: "failedMessage" }] : /* istanbul ignore next */ []);
+	retryLabel = input("Retry", ...ngDevMode ? [{ debugName: "retryLabel" }] : /* istanbul ignore next */ []);
+	retry = output();
+	emptyHeading = input("Nothing here yet", ...ngDevMode ? [{ debugName: "emptyHeading" }] : /* istanbul ignore next */ []);
+	emptyMessage = input("", ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
+	emptyIllustration = input(null, ...ngDevMode ? [{ debugName: "emptyIllustration" }] : /* istanbul ignore next */ []);
+	emptyIcon = input(null, ...ngDevMode ? [{ debugName: "emptyIcon" }] : /* istanbul ignore next */ []);
+	header = computed(() => {
+		switch (this.state()) {
+			case "loading": return this.skeletonHeader() ? "skeleton" : null;
+			case "failed":
+			case "empty": return null;
+			default: return "slot";
+		}
+	}, ...ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []);
+	placeholders = computed(() => Array.from({ length: Math.max(0, Math.floor(this.skeletonRows())) }, (_, index) => SKELETON_WIDTHS[index % SKELETON_WIDTHS.length]), ...ngDevMode ? [{ debugName: "placeholders" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ListCard,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: ListCard,
+		isStandalone: true,
+		selector: "gbt-list-card",
+		inputs: {
+			state: {
+				classPropertyName: "state",
+				publicName: "state",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loadingLabel: {
+				classPropertyName: "loadingLabel",
+				publicName: "loadingLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			skeletonRows: {
+				classPropertyName: "skeletonRows",
+				publicName: "skeletonRows",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			skeletonHeader: {
+				classPropertyName: "skeletonHeader",
+				publicName: "skeletonHeader",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			failedHeading: {
+				classPropertyName: "failedHeading",
+				publicName: "failedHeading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			failedMessage: {
+				classPropertyName: "failedMessage",
+				publicName: "failedMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			retryLabel: {
+				classPropertyName: "retryLabel",
+				publicName: "retryLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyHeading: {
+				classPropertyName: "emptyHeading",
+				publicName: "emptyHeading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyMessage: {
+				classPropertyName: "emptyMessage",
+				publicName: "emptyMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyIllustration: {
+				classPropertyName: "emptyIllustration",
+				publicName: "emptyIllustration",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyIcon: {
+				classPropertyName: "emptyIcon",
+				publicName: "emptyIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { retry: "retry" },
+		ngImport: i0,
+		template: "<section class=\"gbt-list-card\" [attr.aria-label]=\"ariaLabel()\" [attr.data-state]=\"state()\">\n  <span class=\"sr-only\" role=\"status\">{{ state() === 'loading' ? loadingLabel() : '' }}</span>\n  @switch (header()) {\n    @case ('skeleton') {\n      <div class=\"gbt-list-card__header\" aria-hidden=\"true\">\n        <gbt-skeleton variant=\"rect\" width=\"14rem\" height=\"var(--gbt-control-height-sm)\" />\n      </div>\n    }\n    @case ('slot') {\n      <div class=\"gbt-list-card__header\"><ng-content select=\"[list-card-header]\" /></div>\n    }\n  }\n  <div class=\"gbt-list-card__box\">\n    @switch (state()) {\n      @case ('loading') {\n        <div class=\"gbt-list-card__loading\" aria-busy=\"true\">\n          <div aria-hidden=\"true\">\n            @for (width of placeholders(); track $index) {\n              <div class=\"gbt-list-card__skeleton-row\">\n                <gbt-skeleton variant=\"circle\" width=\"1rem\" height=\"1rem\" />\n                <div class=\"gbt-list-card__skeleton-lines\">\n                  <gbt-skeleton [width]=\"width\" height=\"0.875rem\" />\n                  <gbt-skeleton width=\"36%\" height=\"0.625rem\" />\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @case ('failed') {\n        <div class=\"gbt-list-card__failed\" role=\"alert\">\n          <gbt-empty-state\n            size=\"compact\"\n            tone=\"error\"\n            icon=\"alert-triangle\"\n            [heading]=\"failedHeading()\"\n            [message]=\"failedMessage()\"\n          >\n            @if (retryLabel(); as label) {\n              <gbt-button\n                variant=\"secondary\"\n                size=\"small\"\n                [text]=\"label\"\n                (clicked)=\"retry.emit()\"\n              />\n            }\n            <ng-content select=\"[list-card-failed]\" />\n          </gbt-empty-state>\n        </div>\n      }\n      @case ('empty') {\n        <gbt-empty-state\n          [size]=\"emptyIllustration() ? 'default' : 'compact'\"\n          [illustration]=\"emptyIllustration()\"\n          [icon]=\"emptyIcon()\"\n          [heading]=\"emptyHeading()\"\n          [message]=\"emptyMessage()\"\n        >\n          <ng-content select=\"[list-card-empty]\" />\n        </gbt-empty-state>\n      }\n      @default {\n        <div class=\"gbt-list-card__body\"><ng-content /></div>\n      }\n    }\n  </div>\n</section>\n",
+		styles: [":host{display:block;min-width:0}.gbt-list-card{position:relative;container:gbt-list-card/inline-size;display:grid;grid-template-areas:\"gbt-list-card-header\" \"gbt-list-card-box\";grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;min-width:0}.gbt-list-card__header{grid-area:gbt-list-card-header;display:flex;align-items:center;gap:.75rem;min-height:var(--gbt-control-height-md);margin-bottom:.5rem}.gbt-list-card__header:empty{display:none}@container gbt-list-card (max-width: 559px){.gbt-list-card__header{gap:.5rem}}.gbt-list-card__box{grid-area:gbt-list-card-box;position:relative;min-width:0;overflow:hidden;border:1px solid var(--gbt-card-border);border-radius:var(--site-border-radius);background:var(--bg-principal)}.gbt-list-card__body ::ng-deep>ul,.gbt-list-card__body ::ng-deep>ol{margin:0;padding:0;list-style:none}.gbt-list-card__body ::ng-deep>[list-card-message]{margin:0;padding:2rem 1rem;color:var(--text-secondary);font-size:.875rem;text-align:center}.gbt-list-card__skeleton-row{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem}.gbt-list-card__skeleton-row+.gbt-list-card__skeleton-row{border-top:1px solid var(--gbt-hairline)}.gbt-list-card__skeleton-row>gbt-skeleton{flex:none;margin-top:.125rem}.gbt-list-card__skeleton-lines{display:flex;flex:1;flex-direction:column;gap:.5rem;min-width:0}@media(pointer:coarse){.gbt-list-card ::ng-deep .gbt-empty-state__action .gbt-button{min-height:44px}}\n"],
+		dependencies: [
+			{
+				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: EmptyState,
+				selector: "gbt-empty-state",
+				inputs: [
+					"illustration",
+					"heading",
+					"message",
+					"icon",
+					"size",
+					"tone",
+					"headingLevel",
+					"headingId",
+					"headingFocusable"
+				]
+			},
+			{
+				kind: "component",
+				type: Skeleton,
+				selector: "gbt-skeleton",
+				inputs: [
+					"variant",
+					"width",
+					"height"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ListCard,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-list-card",
+			standalone: true,
+			imports: [
+				Button,
+				EmptyState,
+				Skeleton
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<section class=\"gbt-list-card\" [attr.aria-label]=\"ariaLabel()\" [attr.data-state]=\"state()\">\n  <span class=\"sr-only\" role=\"status\">{{ state() === 'loading' ? loadingLabel() : '' }}</span>\n  @switch (header()) {\n    @case ('skeleton') {\n      <div class=\"gbt-list-card__header\" aria-hidden=\"true\">\n        <gbt-skeleton variant=\"rect\" width=\"14rem\" height=\"var(--gbt-control-height-sm)\" />\n      </div>\n    }\n    @case ('slot') {\n      <div class=\"gbt-list-card__header\"><ng-content select=\"[list-card-header]\" /></div>\n    }\n  }\n  <div class=\"gbt-list-card__box\">\n    @switch (state()) {\n      @case ('loading') {\n        <div class=\"gbt-list-card__loading\" aria-busy=\"true\">\n          <div aria-hidden=\"true\">\n            @for (width of placeholders(); track $index) {\n              <div class=\"gbt-list-card__skeleton-row\">\n                <gbt-skeleton variant=\"circle\" width=\"1rem\" height=\"1rem\" />\n                <div class=\"gbt-list-card__skeleton-lines\">\n                  <gbt-skeleton [width]=\"width\" height=\"0.875rem\" />\n                  <gbt-skeleton width=\"36%\" height=\"0.625rem\" />\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @case ('failed') {\n        <div class=\"gbt-list-card__failed\" role=\"alert\">\n          <gbt-empty-state\n            size=\"compact\"\n            tone=\"error\"\n            icon=\"alert-triangle\"\n            [heading]=\"failedHeading()\"\n            [message]=\"failedMessage()\"\n          >\n            @if (retryLabel(); as label) {\n              <gbt-button\n                variant=\"secondary\"\n                size=\"small\"\n                [text]=\"label\"\n                (clicked)=\"retry.emit()\"\n              />\n            }\n            <ng-content select=\"[list-card-failed]\" />\n          </gbt-empty-state>\n        </div>\n      }\n      @case ('empty') {\n        <gbt-empty-state\n          [size]=\"emptyIllustration() ? 'default' : 'compact'\"\n          [illustration]=\"emptyIllustration()\"\n          [icon]=\"emptyIcon()\"\n          [heading]=\"emptyHeading()\"\n          [message]=\"emptyMessage()\"\n        >\n          <ng-content select=\"[list-card-empty]\" />\n        </gbt-empty-state>\n      }\n      @default {\n        <div class=\"gbt-list-card__body\"><ng-content /></div>\n      }\n    }\n  </div>\n</section>\n",
+			styles: [":host{display:block;min-width:0}.gbt-list-card{position:relative;container:gbt-list-card/inline-size;display:grid;grid-template-areas:\"gbt-list-card-header\" \"gbt-list-card-box\";grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;min-width:0}.gbt-list-card__header{grid-area:gbt-list-card-header;display:flex;align-items:center;gap:.75rem;min-height:var(--gbt-control-height-md);margin-bottom:.5rem}.gbt-list-card__header:empty{display:none}@container gbt-list-card (max-width: 559px){.gbt-list-card__header{gap:.5rem}}.gbt-list-card__box{grid-area:gbt-list-card-box;position:relative;min-width:0;overflow:hidden;border:1px solid var(--gbt-card-border);border-radius:var(--site-border-radius);background:var(--bg-principal)}.gbt-list-card__body ::ng-deep>ul,.gbt-list-card__body ::ng-deep>ol{margin:0;padding:0;list-style:none}.gbt-list-card__body ::ng-deep>[list-card-message]{margin:0;padding:2rem 1rem;color:var(--text-secondary);font-size:.875rem;text-align:center}.gbt-list-card__skeleton-row{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem}.gbt-list-card__skeleton-row+.gbt-list-card__skeleton-row{border-top:1px solid var(--gbt-hairline)}.gbt-list-card__skeleton-row>gbt-skeleton{flex:none;margin-top:.125rem}.gbt-list-card__skeleton-lines{display:flex;flex:1;flex-direction:column;gap:.5rem;min-width:0}@media(pointer:coarse){.gbt-list-card ::ng-deep .gbt-empty-state__action .gbt-button{min-height:44px}}\n"]
+		}]
+	}],
+	propDecorators: {
+		state: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "state",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		loadingLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadingLabel",
+				required: false
+			}]
+		}],
+		skeletonRows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "skeletonRows",
+				required: false
+			}]
+		}],
+		skeletonHeader: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "skeletonHeader",
+				required: false
+			}]
+		}],
+		failedHeading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "failedHeading",
+				required: false
+			}]
+		}],
+		failedMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "failedMessage",
+				required: false
+			}]
+		}],
+		retryLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "retryLabel",
+				required: false
+			}]
+		}],
+		retry: [{
+			type: i0.Output,
+			args: ["retry"]
+		}],
+		emptyHeading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyHeading",
+				required: false
+			}]
+		}],
+		emptyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyMessage",
+				required: false
+			}]
+		}],
+		emptyIllustration: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyIllustration",
+				required: false
+			}]
+		}],
+		emptyIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyIcon",
+				required: false
+			}]
+		}]
+	}
+});
+export { ListCard };
+
+//# sourceMappingURL=masmarino-gabarit-list-card.mjs.map

package/fesm2022/masmarino-gabarit-list-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-list-card.mjs","names":[],"sources":["../../../projects/gabarit/list-card/list-card.ts","../../../projects/gabarit/list-card/list-card.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core'\nimport { Button } from '@masmarino/gabarit/button'\nimport { Skeleton } from '@masmarino/gabarit/skeleton'\nimport { EmptyState, EmptyStateIllustration } from '@masmarino/gabarit/empty-state'\n\nexport type ListCardState = 'loading' | 'failed' | 'empty' | 'ready'\n\nconst SKELETON_WIDTHS = ['62%', '48%', '70%', '55%', '66%', '44%']\n\n@Component({\n  selector: 'gbt-list-card',\n  standalone: true,\n  imports: [Button, EmptyState, Skeleton],\n  templateUrl: './list-card.html',\n  styleUrl: './list-card.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ListCard {\n  state = input<ListCardState>('ready')\n  ariaLabel = input<string | null>(null)\n\n  loadingLabel = input('Loading…')\n  skeletonRows = input(4)\n  skeletonHeader = input(true)\n\n  failedHeading = input('The list could not be loaded')\n  failedMessage = input('')\n  retryLabel = input<string | null>('Retry')\n  retry = output<void>()\n\n  emptyHeading = input('Nothing here yet')\n  emptyMessage = input('')\n  emptyIllustration = input<EmptyStateIllustration | null>(null)\n  emptyIcon = input<string | null>(null)\n\n  /** The projected header when ready, its placeholder while loading (unless skeletonHeader is off), else nothing. */\n  protected readonly header = computed<'slot' | 'skeleton' | null>(() => {\n    switch (this.state()) {\n      case 'loading':\n        return this.skeletonHeader() ? 'skeleton' : null\n      case 'failed':\n      case 'empty':\n        return null\n      default:\n        return 'slot'\n    }\n  })\n\n  protected readonly placeholders = computed(() =>\n    Array.from(\n      { length: Math.max(0, Math.floor(this.skeletonRows())) },\n      (_, index) => SKELETON_WIDTHS[index % SKELETON_WIDTHS.length],\n    ),\n  )\n}\n","<section class=\"gbt-list-card\" [attr.aria-label]=\"ariaLabel()\" [attr.data-state]=\"state()\">\n  <span class=\"sr-only\" role=\"status\">{{ state() === 'loading' ? loadingLabel() : '' }}</span>\n  @switch (header()) {\n    @case ('skeleton') {\n      <div class=\"gbt-list-card__header\" aria-hidden=\"true\">\n        <gbt-skeleton variant=\"rect\" width=\"14rem\" height=\"var(--gbt-control-height-sm)\" />\n      </div>\n    }\n    @case ('slot') {\n      <div class=\"gbt-list-card__header\"><ng-content select=\"[list-card-header]\" /></div>\n    }\n  }\n  <div class=\"gbt-list-card__box\">\n    @switch (state()) {\n      @case ('loading') {\n        <div class=\"gbt-list-card__loading\" aria-busy=\"true\">\n          <div aria-hidden=\"true\">\n            @for (width of placeholders(); track $index) {\n              <div class=\"gbt-list-card__skeleton-row\">\n                <gbt-skeleton variant=\"circle\" width=\"1rem\" height=\"1rem\" />\n                <div class=\"gbt-list-card__skeleton-lines\">\n                  <gbt-skeleton [width]=\"width\" height=\"0.875rem\" />\n                  <gbt-skeleton width=\"36%\" height=\"0.625rem\" />\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @case ('failed') {\n        <div class=\"gbt-list-card__failed\" role=\"alert\">\n          <gbt-empty-state\n            size=\"compact\"\n            tone=\"error\"\n            icon=\"alert-triangle\"\n            [heading]=\"failedHeading()\"\n            [message]=\"failedMessage()\"\n          >\n            @if (retryLabel(); as label) {\n              <gbt-button\n                variant=\"secondary\"\n                size=\"small\"\n                [text]=\"label\"\n                (clicked)=\"retry.emit()\"\n              />\n            }\n            <ng-content select=\"[list-card-failed]\" />\n          </gbt-empty-state>\n        </div>\n      }\n      @case ('empty') {\n        <gbt-empty-state\n          [size]=\"emptyIllustration() ? 'default' : 'compact'\"\n          [illustration]=\"emptyIllustration()\"\n          [icon]=\"emptyIcon()\"\n          [heading]=\"emptyHeading()\"\n          [message]=\"emptyMessage()\"\n        >\n          <ng-content select=\"[list-card-empty]\" />\n        </gbt-empty-state>\n      }\n      @default {\n        <div class=\"gbt-list-card__body\"><ng-content /></div>\n      }\n    }\n  </div>\n</section>\n"],"mappings":"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"}

package/fesm2022/masmarino-gabarit-list-row.mjs

@@ -0,0 +1,58 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+var ListRow = class ListRow {
+	tone = input("neutral", ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ListRow,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: ListRow,
+		isStandalone: true,
+		selector: "gbt-list-row",
+		inputs: { tone: {
+			classPropertyName: "tone",
+			publicName: "tone",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: "<div class=\"gbt-list-row\">\n  <div class=\"gbt-list-row__leading\" [attr.data-tone]=\"tone()\">\n    <ng-content select=\"[row-leading]\" />\n  </div>\n  <div class=\"gbt-list-row__main\">\n    <div class=\"gbt-list-row__title\"><ng-content /></div>\n    <div class=\"gbt-list-row__meta\"><ng-content select=\"[row-meta]\" /></div>\n  </div>\n  <div class=\"gbt-list-row__trailing\"><ng-content select=\"[row-trailing]\" /></div>\n</div>\n",
+		styles: [":host{display:block}::ng-deep li+li>gbt-list-row,::ng-deep gbt-list-row+gbt-list-row{border-top:1px solid var(--gbt-hairline)}.gbt-list-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.25rem .75rem;padding:.75rem 1rem;transition:background-color var(--site-transition-fast)}.gbt-list-row:hover,.gbt-list-row:focus-within{background:var(--bg-hover)}.gbt-list-row__leading{display:flex;flex:none;align-items:center;justify-content:center;width:1.25rem;height:1.5rem;color:var(--text-secondary);font-size:.8rem}.gbt-list-row__leading[data-tone=success]{color:var(--color-success-text)}.gbt-list-row__leading[data-tone=warning]{color:var(--color-warning-text)}.gbt-list-row__leading[data-tone=error]{color:var(--color-error-text)}.gbt-list-row__leading[data-tone=info]{color:var(--color-info-bg-text)}.gbt-list-row__main{display:flex;flex:1 1 10rem;flex-direction:column;gap:.125rem;min-width:0}.gbt-list-row__title{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;min-width:0;min-height:1.5rem;color:var(--text-primary);font-size:.9375rem;font-weight:600;line-height:1.5rem}.gbt-list-row__title ::ng-deep>*{flex:none}.gbt-list-row__title ::ng-deep>gbt-user-chip{flex:0 1 auto;min-width:0;max-width:100%}.gbt-list-row__title ::ng-deep>a{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;color:inherit;text-decoration:none;white-space:nowrap;text-overflow:ellipsis}.gbt-list-row__title ::ng-deep>a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:2px}.gbt-list-row__title ::ng-deep>a:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px;border-radius:2px}.gbt-list-row__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.125rem .375rem;min-width:0;color:var(--text-secondary);font-size:.8125rem;line-height:1.25rem;overflow-wrap:anywhere}.gbt-list-row__meta ::ng-deep a{color:inherit;font-weight:500;text-decoration:none}.gbt-list-row__meta ::ng-deep a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:2px}.gbt-list-row__meta ::ng-deep a:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:1px;border-radius:2px}.gbt-list-row__meta ::ng-deep code{padding:0 .375rem;border-radius:var(--gbt-radius-chip, 2px);background:var(--bg-hover);color:var(--text-primary);font-family:var(--gbt-font-mono);font-size:.75rem;line-height:1.125rem}.gbt-list-row__trailing{display:flex;flex:none;align-items:center;gap:.75rem;min-height:1.5rem;margin-left:auto;color:var(--text-secondary);font-size:.8125rem;line-height:1.25rem}.gbt-list-row__trailing ::ng-deep>*{flex:none}.gbt-list-row__leading:empty,.gbt-list-row__meta:empty,.gbt-list-row__trailing:empty{display:none}@media(prefers-reduced-motion:reduce){.gbt-list-row{transition:none}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ListRow,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-list-row",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"gbt-list-row\">\n  <div class=\"gbt-list-row__leading\" [attr.data-tone]=\"tone()\">\n    <ng-content select=\"[row-leading]\" />\n  </div>\n  <div class=\"gbt-list-row__main\">\n    <div class=\"gbt-list-row__title\"><ng-content /></div>\n    <div class=\"gbt-list-row__meta\"><ng-content select=\"[row-meta]\" /></div>\n  </div>\n  <div class=\"gbt-list-row__trailing\"><ng-content select=\"[row-trailing]\" /></div>\n</div>\n",
+			styles: [":host{display:block}::ng-deep li+li>gbt-list-row,::ng-deep gbt-list-row+gbt-list-row{border-top:1px solid var(--gbt-hairline)}.gbt-list-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.25rem .75rem;padding:.75rem 1rem;transition:background-color var(--site-transition-fast)}.gbt-list-row:hover,.gbt-list-row:focus-within{background:var(--bg-hover)}.gbt-list-row__leading{display:flex;flex:none;align-items:center;justify-content:center;width:1.25rem;height:1.5rem;color:var(--text-secondary);font-size:.8rem}.gbt-list-row__leading[data-tone=success]{color:var(--color-success-text)}.gbt-list-row__leading[data-tone=warning]{color:var(--color-warning-text)}.gbt-list-row__leading[data-tone=error]{color:var(--color-error-text)}.gbt-list-row__leading[data-tone=info]{color:var(--color-info-bg-text)}.gbt-list-row__main{display:flex;flex:1 1 10rem;flex-direction:column;gap:.125rem;min-width:0}.gbt-list-row__title{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;min-width:0;min-height:1.5rem;color:var(--text-primary);font-size:.9375rem;font-weight:600;line-height:1.5rem}.gbt-list-row__title ::ng-deep>*{flex:none}.gbt-list-row__title ::ng-deep>gbt-user-chip{flex:0 1 auto;min-width:0;max-width:100%}.gbt-list-row__title ::ng-deep>a{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;color:inherit;text-decoration:none;white-space:nowrap;text-overflow:ellipsis}.gbt-list-row__title ::ng-deep>a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:2px}.gbt-list-row__title ::ng-deep>a:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px;border-radius:2px}.gbt-list-row__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.125rem .375rem;min-width:0;color:var(--text-secondary);font-size:.8125rem;line-height:1.25rem;overflow-wrap:anywhere}.gbt-list-row__meta ::ng-deep a{color:inherit;font-weight:500;text-decoration:none}.gbt-list-row__meta ::ng-deep a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:2px}.gbt-list-row__meta ::ng-deep a:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:1px;border-radius:2px}.gbt-list-row__meta ::ng-deep code{padding:0 .375rem;border-radius:var(--gbt-radius-chip, 2px);background:var(--bg-hover);color:var(--text-primary);font-family:var(--gbt-font-mono);font-size:.75rem;line-height:1.125rem}.gbt-list-row__trailing{display:flex;flex:none;align-items:center;gap:.75rem;min-height:1.5rem;margin-left:auto;color:var(--text-secondary);font-size:.8125rem;line-height:1.25rem}.gbt-list-row__trailing ::ng-deep>*{flex:none}.gbt-list-row__leading:empty,.gbt-list-row__meta:empty,.gbt-list-row__trailing:empty{display:none}@media(prefers-reduced-motion:reduce){.gbt-list-row{transition:none}}\n"]
+		}]
+	}],
+	propDecorators: { tone: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "tone",
+			required: false
+		}]
+	}] }
+});
+export { ListRow };
+
+//# sourceMappingURL=masmarino-gabarit-list-row.mjs.map

package/fesm2022/masmarino-gabarit-list-row.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-list-row.mjs","names":[],"sources":["../../../projects/gabarit/list-row/list-row.ts","../../../projects/gabarit/list-row/list-row.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core'\n\nexport type ListRowTone = 'neutral' | 'success' | 'warning' | 'error' | 'info'\n\n@Component({\n  selector: 'gbt-list-row',\n  standalone: true,\n  templateUrl: './list-row.html',\n  styleUrl: './list-row.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ListRow {\n  tone = input<ListRowTone>('neutral')\n}\n","<div class=\"gbt-list-row\">\n  <div class=\"gbt-list-row__leading\" [attr.data-tone]=\"tone()\">\n    <ng-content select=\"[row-leading]\" />\n  </div>\n  <div class=\"gbt-list-row__main\">\n    <div class=\"gbt-list-row__title\"><ng-content /></div>\n    <div class=\"gbt-list-row__meta\"><ng-content select=\"[row-meta]\" /></div>\n  </div>\n  <div class=\"gbt-list-row__trailing\"><ng-content select=\"[row-trailing]\" /></div>\n</div>\n"],"mappings":";;AAWA,IAAa,UAAb,MAAa,QAAO;CAClB,OAAO,MAAmB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CADzB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAO,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAP,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAO,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,MAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UCXpB;EAUA,QAAA,CAAA,ouFAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADCa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAO,YAAA,CAAA;EAPnB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAc,YACZ;GAAI,iBAGC,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,ouFAAA;EAAA,CAAA"}