@masmarino/gabarit 2.0.0 → 2.1.1

package/fesm2022/masmarino-gabarit-card.mjs

@@ -0,0 +1,400 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, booleanAttribute, computed, contentChild, input } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { Icon } from "@masmarino/gabarit/icon";
+var CardLink = class CardLink {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CardLink,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: CardLink,
+		isStandalone: true,
+		selector: "a[gbtCardLink]",
+		host: { classAttribute: "gbt-card__link" },
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: [":host{color:inherit;text-decoration:none;border-radius:2px}:host:after{content:\"\";position:absolute;inset:0;z-index:1;grid-area:gbt-card-box;border-radius:var(--gbt-card-radius, 0)}:host:hover{text-decoration:underline;text-underline-offset:.2em}:host:focus-visible{outline:none}:host:focus-visible:after{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:var(--gbt-card-focus-offset, -2px)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CardLink,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "a[gbtCardLink]",
+			standalone: true,
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "gbt-card__link" },
+			styles: [":host{color:inherit;text-decoration:none;border-radius:2px}:host:after{content:\"\";position:absolute;inset:0;z-index:1;grid-area:gbt-card-box;border-radius:var(--gbt-card-radius, 0)}:host:hover{text-decoration:underline;text-underline-offset:.2em}:host:focus-visible{outline:none}:host:focus-visible:after{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:var(--gbt-card-focus-offset, -2px)}\n"]
+		}]
+	}]
+});
+const TONE_ICONS = {
+	success: "check-circle",
+	warning: "alert-triangle",
+	error: "alert-circle"
+};
+var CardHeader = class CardHeader {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CardHeader,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: CardHeader,
+		isStandalone: true,
+		selector: "[card-header]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CardHeader,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[card-header]",
+			standalone: true
+		}]
+	}]
+});
+var Card = class Card {
+	hoverable = input(false, {
+		...ngDevMode ? { debugName: "hoverable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	heading = input("", ...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	icon = input("", ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	headingLevel = input(2, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
+	variant = input("elevated", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	description = input("", ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+	count = input(null, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
+	flush = input(false, {
+		...ngDevMode ? { debugName: "flush" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	tone = input("default", ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+	selected = input(false, {
+		...ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	selectedLabel = input("Selected", ...ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []);
+	href = input(null, ...ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []);
+	linkLabel = input(null, ...ngDevMode ? [{ debugName: "linkLabel" }] : /* istanbul ignore next */ []);
+	customHeader = contentChild(CardHeader, ...ngDevMode ? [{ debugName: "customHeader" }] : /* istanbul ignore next */ []);
+	projectedLink = contentChild(CardLink, ...ngDevMode ? [{ debugName: "projectedLink" }] : /* istanbul ignore next */ []);
+	hasCustomHeader = computed(() => !!this.customHeader(), ...ngDevMode ? [{ debugName: "hasCustomHeader" }] : /* istanbul ignore next */ []);
+	hasHeader = computed(() => !!this.heading() || this.hasCustomHeader(), ...ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []);
+	linked = computed(() => !!this.href() || !!this.projectedLink(), ...ngDevMode ? [{ debugName: "linked" }] : /* istanbul ignore next */ []);
+	headerIcon = computed(() => {
+		const tone = this.tone();
+		return this.icon() || (tone === "default" ? "" : TONE_ICONS[tone]);
+	}, ...ngDevMode ? [{ debugName: "headerIcon" }] : /* istanbul ignore next */ []);
+	cardClass = computed(() => "gbt-card" + (this.hoverable() ? " gbt-card--hoverable" : ""), ...ngDevMode ? [{ debugName: "cardClass" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Card,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Card,
+		isStandalone: true,
+		selector: "gbt-card",
+		inputs: {
+			hoverable: {
+				classPropertyName: "hoverable",
+				publicName: "hoverable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			headingLevel: {
+				classPropertyName: "headingLevel",
+				publicName: "headingLevel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			description: {
+				classPropertyName: "description",
+				publicName: "description",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			count: {
+				classPropertyName: "count",
+				publicName: "count",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			flush: {
+				classPropertyName: "flush",
+				publicName: "flush",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tone: {
+				classPropertyName: "tone",
+				publicName: "tone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selected: {
+				classPropertyName: "selected",
+				publicName: "selected",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectedLabel: {
+				classPropertyName: "selectedLabel",
+				publicName: "selectedLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			href: {
+				classPropertyName: "href",
+				publicName: "href",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			linkLabel: {
+				classPropertyName: "linkLabel",
+				publicName: "linkLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		queries: [{
+			propertyName: "customHeader",
+			first: true,
+			predicate: CardHeader,
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "projectedLink",
+			first: true,
+			predicate: CardLink,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "@if (hasHeader()) {\n  <div class=\"gbt-card__header\" [attr.data-tone]=\"tone() === 'default' ? null : tone()\">\n    @if (hasCustomHeader()) {\n      <div class=\"gbt-card__header-slot\">\n        <ng-container *ngTemplateOutlet=\"headerSlot\" />\n      </div>\n    } @else {\n      @if (headerIcon()) {\n        <span class=\"gbt-card__icon\" [class.gbt-card__icon--status]=\"!icon()\">\n          <gbt-icon [name]=\"headerIcon()\" aria-hidden=\"true\" />\n        </span>\n      }\n      @if (description()) {\n        <div class=\"gbt-card__titles\">\n          <ng-container *ngTemplateOutlet=\"titleTemplate\" />\n          <p class=\"gbt-card__description\">{{ description() }}</p>\n        </div>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"titleTemplate\" />\n      }\n    }\n    <ng-content select=\"[card-header-actions]\"></ng-content>\n  </div>\n}\n<div\n  [class]=\"cardClass()\"\n  [attr.data-variant]=\"variant() === 'elevated' ? null : variant()\"\n  [attr.data-flush]=\"flush() ? '' : null\"\n  [attr.data-selected]=\"selected() ? '' : null\"\n  [attr.data-link]=\"linked() ? '' : null\"\n>\n  @if (selected() && selectedLabel()) {\n    <span class=\"gbt-card__selected-label\">{{ selectedLabel() }}</span>\n  }\n  @if (!hasCustomHeader()) {\n    <ng-container *ngTemplateOutlet=\"headerSlot\" />\n  }\n  @if (href() && !hasHeader()) {\n    <a gbtCardLink [attr.href]=\"href()\" [attr.aria-label]=\"linkLabel()\"></a>\n  }\n  <div class=\"gbt-card__body\"><ng-content></ng-content></div>\n</div>\n\n<ng-template #headerSlot><ng-content select=\"[card-header]\" /></ng-template>\n<ng-template #titleTemplate>\n  @switch (headingLevel()) {\n    @case (1) {\n      <h1 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h1>\n    }\n    @case (3) {\n      <h3 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h3>\n    }\n    @case (4) {\n      <h4 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h4>\n    }\n    @case (5) {\n      <h5 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h5>\n    }\n    @case (6) {\n      <h6 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h6>\n    }\n    @default {\n      <h2 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h2>\n    }\n  }\n</ng-template>\n<ng-template #titleContent>\n  @if (href()) {\n    <a gbtCardLink [attr.href]=\"href()\">{{ heading() }}</a>\n  } @else {\n    {{ heading() }}\n  }\n  @if (count() !== null) {\n    <span class=\"gbt-card__count\">{{ count() }}</span>\n  }\n</ng-template>\n",
+		styles: [":host{--gbt-card-radius: var(--site-border-radius-lg);--gbt-card-focus-offset: -2px;position:relative;display:grid;grid-template-areas:\"gbt-card-header\" \"gbt-card-box\";grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}:host:has(>.gbt-card[data-variant=outlined]){--gbt-card-radius: var(--site-border-radius)}:host:has(>.gbt-card[data-selected]){--gbt-card-focus-offset: -5px}.gbt-card__header{grid-area:gbt-card-header;display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem;color:var(--text-secondary);font-size:.9rem;line-height:1.65}.gbt-card__icon{display:inline-flex;flex:none;align-self:flex-start;align-items:center;justify-content:center;height:1.5rem;color:var(--text-secondary);font-size:1rem}.gbt-card__icon--status gbt-icon{box-sizing:border-box;width:1.25rem;height:1.25rem;padding:.1875rem;border:1.5px solid currentColor;border-radius:50%}.gbt-card__titles{display:flex;flex:1 1 auto;flex-direction:column;gap:.125rem;min-width:0}.gbt-card__title{font-family:var(--gbt-font-display, var(--font-display));display:flex;align-items:center;gap:.5rem;min-width:0;margin:0;color:var(--text-primary);font-size:1rem;font-weight:600;line-height:1.5rem;overflow-wrap:anywhere}.gbt-card__header>.gbt-card__title{flex:1 1 auto}.gbt-card__description{margin:0;color:var(--text-secondary);font-size:.8125rem;font-weight:400;line-height:1.25rem}.gbt-card__header-slot{flex:1 1 auto;min-width:0}.gbt-card__count{flex:none;min-width:1.25rem;box-sizing:border-box;padding:0 .375rem;border-radius:var(--gbt-radius-badge, 3px);background:color-mix(in srgb,var(--border-color) 8%,transparent);color:var(--text-primary);font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25rem;text-align:center}.gbt-card__header[data-tone=success] .gbt-card__icon,.gbt-card__header[data-tone=success] .gbt-card__title{color:var(--color-success-text)}.gbt-card__header[data-tone=warning] .gbt-card__icon,.gbt-card__header[data-tone=warning] .gbt-card__title{color:var(--color-warning-text)}.gbt-card__header[data-tone=error] .gbt-card__icon,.gbt-card__header[data-tone=error] .gbt-card__title{color:var(--color-error-text)}.gbt-card{--gbt-card-radius: var(--site-border-radius-lg);--gbt-card-inner-radius: var(--gbt-card-radius);--gbt-card-edge: var(--gbt-card-border);--gbt-card-focus-offset: -2px;grid-area:gbt-card-box;position:relative;padding:1.25rem 1.5rem;border-radius:var(--gbt-card-radius);background:var(--bg-principal);box-shadow:var(--site-shadow-sm);overflow:hidden;transition:box-shadow .18s cubic-bezier(.4,0,.2,1);color:var(--text-secondary);font-size:.9rem;line-height:1.65}.gbt-card--hoverable{cursor:pointer;-webkit-user-select:none;user-select:none}.gbt-card--hoverable:hover{box-shadow:var(--site-shadow-lg)}.gbt-card__body{display:contents}.gbt-card[data-variant=outlined]{--gbt-card-radius: var(--site-border-radius);--gbt-card-inner-radius: calc(var(--site-border-radius) - 1px);border:1px solid var(--gbt-card-edge);box-shadow:none;overflow:visible}.gbt-card[data-variant=outlined].gbt-card--hoverable:hover,.gbt-card[data-variant=outlined][data-link]:hover{border-color:var(--border-color);box-shadow:none}.gbt-card[data-flush]{padding:0}.gbt-card[data-flush] .gbt-card__body{display:block;overflow:clip;border-radius:var(--gbt-card-inner-radius)}.gbt-card[data-selected]:before{content:\"\";position:absolute;inset:0;z-index:1;border:2px solid var(--gbt-card-edge);border-radius:var(--gbt-card-inner-radius);pointer-events:none}.gbt-card[data-selected]{--gbt-card-edge: var(--primary);--gbt-card-focus-offset: -5px;background:color-mix(in srgb,var(--primary) 4%,var(--bg-principal))}.gbt-card[data-selected][data-variant=outlined]:before{border-width:1px}.gbt-card__selected-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.gbt-card[data-link]{cursor:pointer;transition:box-shadow .18s cubic-bezier(.4,0,.2,1),border-color .18s cubic-bezier(.4,0,.2,1)}.gbt-card[data-link]:not([data-variant=outlined]):hover{box-shadow:var(--site-shadow-lg)}:host:has(>.gbt-card__header .gbt-card__link:hover)>.gbt-card[data-link]{box-shadow:var(--site-shadow-lg)}:host:has(>.gbt-card__header .gbt-card__link:hover)>.gbt-card[data-link][data-variant=outlined]{border-color:var(--border-color);box-shadow:none}:where(.gbt-card[data-link]) ::ng-deep :where(a:not(.gbt-card__link),button,input,select,textarea,summary,label,[tabindex]:not([tabindex=\"-1\"])){position:relative;z-index:2}:where(.gbt-card__header:has(~.gbt-card[data-link])) ::ng-deep :where(a:not(.gbt-card__link),button,input,select,textarea,summary,label,[tabindex]:not([tabindex=\"-1\"])){position:relative;z-index:2}@media(prefers-reduced-motion:reduce){.gbt-card,.gbt-card[data-link]{transition:none}}@container (max-width: 519px){.gbt-card__header:not([data-tone])>.gbt-card__icon{display:none}.gbt-card:not([data-flush]){padding:1rem}}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: Icon,
+				selector: "gbt-icon",
+				inputs: ["name"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: CardLink,
+				selector: "a[gbtCardLink]"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Card,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-card",
+			standalone: true,
+			imports: [
+				Icon,
+				NgTemplateOutlet,
+				CardLink
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "@if (hasHeader()) {\n  <div class=\"gbt-card__header\" [attr.data-tone]=\"tone() === 'default' ? null : tone()\">\n    @if (hasCustomHeader()) {\n      <div class=\"gbt-card__header-slot\">\n        <ng-container *ngTemplateOutlet=\"headerSlot\" />\n      </div>\n    } @else {\n      @if (headerIcon()) {\n        <span class=\"gbt-card__icon\" [class.gbt-card__icon--status]=\"!icon()\">\n          <gbt-icon [name]=\"headerIcon()\" aria-hidden=\"true\" />\n        </span>\n      }\n      @if (description()) {\n        <div class=\"gbt-card__titles\">\n          <ng-container *ngTemplateOutlet=\"titleTemplate\" />\n          <p class=\"gbt-card__description\">{{ description() }}</p>\n        </div>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"titleTemplate\" />\n      }\n    }\n    <ng-content select=\"[card-header-actions]\"></ng-content>\n  </div>\n}\n<div\n  [class]=\"cardClass()\"\n  [attr.data-variant]=\"variant() === 'elevated' ? null : variant()\"\n  [attr.data-flush]=\"flush() ? '' : null\"\n  [attr.data-selected]=\"selected() ? '' : null\"\n  [attr.data-link]=\"linked() ? '' : null\"\n>\n  @if (selected() && selectedLabel()) {\n    <span class=\"gbt-card__selected-label\">{{ selectedLabel() }}</span>\n  }\n  @if (!hasCustomHeader()) {\n    <ng-container *ngTemplateOutlet=\"headerSlot\" />\n  }\n  @if (href() && !hasHeader()) {\n    <a gbtCardLink [attr.href]=\"href()\" [attr.aria-label]=\"linkLabel()\"></a>\n  }\n  <div class=\"gbt-card__body\"><ng-content></ng-content></div>\n</div>\n\n<ng-template #headerSlot><ng-content select=\"[card-header]\" /></ng-template>\n<ng-template #titleTemplate>\n  @switch (headingLevel()) {\n    @case (1) {\n      <h1 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h1>\n    }\n    @case (3) {\n      <h3 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h3>\n    }\n    @case (4) {\n      <h4 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h4>\n    }\n    @case (5) {\n      <h5 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h5>\n    }\n    @case (6) {\n      <h6 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h6>\n    }\n    @default {\n      <h2 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h2>\n    }\n  }\n</ng-template>\n<ng-template #titleContent>\n  @if (href()) {\n    <a gbtCardLink [attr.href]=\"href()\">{{ heading() }}</a>\n  } @else {\n    {{ heading() }}\n  }\n  @if (count() !== null) {\n    <span class=\"gbt-card__count\">{{ count() }}</span>\n  }\n</ng-template>\n",
+			styles: [":host{--gbt-card-radius: var(--site-border-radius-lg);--gbt-card-focus-offset: -2px;position:relative;display:grid;grid-template-areas:\"gbt-card-header\" \"gbt-card-box\";grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}:host:has(>.gbt-card[data-variant=outlined]){--gbt-card-radius: var(--site-border-radius)}:host:has(>.gbt-card[data-selected]){--gbt-card-focus-offset: -5px}.gbt-card__header{grid-area:gbt-card-header;display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem;color:var(--text-secondary);font-size:.9rem;line-height:1.65}.gbt-card__icon{display:inline-flex;flex:none;align-self:flex-start;align-items:center;justify-content:center;height:1.5rem;color:var(--text-secondary);font-size:1rem}.gbt-card__icon--status gbt-icon{box-sizing:border-box;width:1.25rem;height:1.25rem;padding:.1875rem;border:1.5px solid currentColor;border-radius:50%}.gbt-card__titles{display:flex;flex:1 1 auto;flex-direction:column;gap:.125rem;min-width:0}.gbt-card__title{font-family:var(--gbt-font-display, var(--font-display));display:flex;align-items:center;gap:.5rem;min-width:0;margin:0;color:var(--text-primary);font-size:1rem;font-weight:600;line-height:1.5rem;overflow-wrap:anywhere}.gbt-card__header>.gbt-card__title{flex:1 1 auto}.gbt-card__description{margin:0;color:var(--text-secondary);font-size:.8125rem;font-weight:400;line-height:1.25rem}.gbt-card__header-slot{flex:1 1 auto;min-width:0}.gbt-card__count{flex:none;min-width:1.25rem;box-sizing:border-box;padding:0 .375rem;border-radius:var(--gbt-radius-badge, 3px);background:color-mix(in srgb,var(--border-color) 8%,transparent);color:var(--text-primary);font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25rem;text-align:center}.gbt-card__header[data-tone=success] .gbt-card__icon,.gbt-card__header[data-tone=success] .gbt-card__title{color:var(--color-success-text)}.gbt-card__header[data-tone=warning] .gbt-card__icon,.gbt-card__header[data-tone=warning] .gbt-card__title{color:var(--color-warning-text)}.gbt-card__header[data-tone=error] .gbt-card__icon,.gbt-card__header[data-tone=error] .gbt-card__title{color:var(--color-error-text)}.gbt-card{--gbt-card-radius: var(--site-border-radius-lg);--gbt-card-inner-radius: var(--gbt-card-radius);--gbt-card-edge: var(--gbt-card-border);--gbt-card-focus-offset: -2px;grid-area:gbt-card-box;position:relative;padding:1.25rem 1.5rem;border-radius:var(--gbt-card-radius);background:var(--bg-principal);box-shadow:var(--site-shadow-sm);overflow:hidden;transition:box-shadow .18s cubic-bezier(.4,0,.2,1);color:var(--text-secondary);font-size:.9rem;line-height:1.65}.gbt-card--hoverable{cursor:pointer;-webkit-user-select:none;user-select:none}.gbt-card--hoverable:hover{box-shadow:var(--site-shadow-lg)}.gbt-card__body{display:contents}.gbt-card[data-variant=outlined]{--gbt-card-radius: var(--site-border-radius);--gbt-card-inner-radius: calc(var(--site-border-radius) - 1px);border:1px solid var(--gbt-card-edge);box-shadow:none;overflow:visible}.gbt-card[data-variant=outlined].gbt-card--hoverable:hover,.gbt-card[data-variant=outlined][data-link]:hover{border-color:var(--border-color);box-shadow:none}.gbt-card[data-flush]{padding:0}.gbt-card[data-flush] .gbt-card__body{display:block;overflow:clip;border-radius:var(--gbt-card-inner-radius)}.gbt-card[data-selected]:before{content:\"\";position:absolute;inset:0;z-index:1;border:2px solid var(--gbt-card-edge);border-radius:var(--gbt-card-inner-radius);pointer-events:none}.gbt-card[data-selected]{--gbt-card-edge: var(--primary);--gbt-card-focus-offset: -5px;background:color-mix(in srgb,var(--primary) 4%,var(--bg-principal))}.gbt-card[data-selected][data-variant=outlined]:before{border-width:1px}.gbt-card__selected-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.gbt-card[data-link]{cursor:pointer;transition:box-shadow .18s cubic-bezier(.4,0,.2,1),border-color .18s cubic-bezier(.4,0,.2,1)}.gbt-card[data-link]:not([data-variant=outlined]):hover{box-shadow:var(--site-shadow-lg)}:host:has(>.gbt-card__header .gbt-card__link:hover)>.gbt-card[data-link]{box-shadow:var(--site-shadow-lg)}:host:has(>.gbt-card__header .gbt-card__link:hover)>.gbt-card[data-link][data-variant=outlined]{border-color:var(--border-color);box-shadow:none}:where(.gbt-card[data-link]) ::ng-deep :where(a:not(.gbt-card__link),button,input,select,textarea,summary,label,[tabindex]:not([tabindex=\"-1\"])){position:relative;z-index:2}:where(.gbt-card__header:has(~.gbt-card[data-link])) ::ng-deep :where(a:not(.gbt-card__link),button,input,select,textarea,summary,label,[tabindex]:not([tabindex=\"-1\"])){position:relative;z-index:2}@media(prefers-reduced-motion:reduce){.gbt-card,.gbt-card[data-link]{transition:none}}@container (max-width: 519px){.gbt-card__header:not([data-tone])>.gbt-card__icon{display:none}.gbt-card:not([data-flush]){padding:1rem}}\n"]
+		}]
+	}],
+	propDecorators: {
+		hoverable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hoverable",
+				required: false
+			}]
+		}],
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		headingLevel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headingLevel",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}],
+		count: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "count",
+				required: false
+			}]
+		}],
+		flush: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "flush",
+				required: false
+			}]
+		}],
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selected",
+				required: false
+			}]
+		}],
+		selectedLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedLabel",
+				required: false
+			}]
+		}],
+		href: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "href",
+				required: false
+			}]
+		}],
+		linkLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "linkLabel",
+				required: false
+			}]
+		}],
+		customHeader: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => CardHeader), { isSignal: true }]
+		}],
+		projectedLink: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => CardLink), { isSignal: true }]
+		}]
+	}
+});
+export { Card, CardHeader, CardLink };
+
+//# sourceMappingURL=masmarino-gabarit-card.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-card.mjs","names":[],"sources":["../../../projects/gabarit/card/card-link.ts","../../../projects/gabarit/card/card.ts","../../../projects/gabarit/card/card.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core'\n\n@Component({\n  selector: 'a[gbtCardLink]',\n  standalone: true,\n  template: '<ng-content />',\n  styleUrl: './card-link.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'gbt-card__link' },\n})\nexport class CardLink {}\n","import { NgTemplateOutlet } from '@angular/common'\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  Directive,\n  input,\n} from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\nimport { CardLink } from './card-link'\n\nexport type CardVariant = 'elevated' | 'outlined'\nexport type CardTone = 'default' | 'success' | 'warning' | 'error'\n\nconst TONE_ICONS: Record<Exclude<CardTone, 'default'>, string> = {\n  success: 'check-circle',\n  warning: 'alert-triangle',\n  error: 'alert-circle',\n}\n\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: '[card-header]',\n  standalone: true,\n})\nexport class CardHeader {}\n\n@Component({\n  selector: 'gbt-card',\n  standalone: true,\n  imports: [Icon, NgTemplateOutlet, CardLink],\n  templateUrl: './card.html',\n  styleUrl: './card.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Card {\n  hoverable = input(false, { transform: booleanAttribute })\n  heading = input<string>('')\n  icon = input<string>('')\n  headingLevel = input<1 | 2 | 3 | 4 | 5 | 6>(2)\n\n  variant = input<CardVariant>('elevated')\n  description = input<string>('')\n  count = input<number | null>(null)\n  flush = input(false, { transform: booleanAttribute })\n  tone = input<CardTone>('default')\n  selected = input(false, { transform: booleanAttribute })\n  selectedLabel = input<string>('Selected')\n\n  href = input<string | null>(null)\n  linkLabel = input<string | null>(null)\n\n  private readonly customHeader = contentChild(CardHeader)\n  private readonly projectedLink = contentChild(CardLink)\n\n  protected readonly hasCustomHeader = computed(() => !!this.customHeader())\n  protected readonly hasHeader = computed(() => !!this.heading() || this.hasCustomHeader())\n  protected readonly linked = computed(() => !!this.href() || !!this.projectedLink())\n  protected readonly headerIcon = computed(() => {\n    const tone = this.tone()\n    return this.icon() || (tone === 'default' ? '' : TONE_ICONS[tone])\n  })\n\n  protected readonly cardClass = computed(\n    () => 'gbt-card' + (this.hoverable() ? ' gbt-card--hoverable' : ''),\n  )\n}\n","@if (hasHeader()) {\n  <div class=\"gbt-card__header\" [attr.data-tone]=\"tone() === 'default' ? null : tone()\">\n    @if (hasCustomHeader()) {\n      <div class=\"gbt-card__header-slot\">\n        <ng-container *ngTemplateOutlet=\"headerSlot\" />\n      </div>\n    } @else {\n      @if (headerIcon()) {\n        <span class=\"gbt-card__icon\" [class.gbt-card__icon--status]=\"!icon()\">\n          <gbt-icon [name]=\"headerIcon()\" aria-hidden=\"true\" />\n        </span>\n      }\n      @if (description()) {\n        <div class=\"gbt-card__titles\">\n          <ng-container *ngTemplateOutlet=\"titleTemplate\" />\n          <p class=\"gbt-card__description\">{{ description() }}</p>\n        </div>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"titleTemplate\" />\n      }\n    }\n    <ng-content select=\"[card-header-actions]\"></ng-content>\n  </div>\n}\n<div\n  [class]=\"cardClass()\"\n  [attr.data-variant]=\"variant() === 'elevated' ? null : variant()\"\n  [attr.data-flush]=\"flush() ? '' : null\"\n  [attr.data-selected]=\"selected() ? '' : null\"\n  [attr.data-link]=\"linked() ? '' : null\"\n>\n  @if (selected() && selectedLabel()) {\n    <span class=\"gbt-card__selected-label\">{{ selectedLabel() }}</span>\n  }\n  @if (!hasCustomHeader()) {\n    <ng-container *ngTemplateOutlet=\"headerSlot\" />\n  }\n  @if (href() && !hasHeader()) {\n    <a gbtCardLink [attr.href]=\"href()\" [attr.aria-label]=\"linkLabel()\"></a>\n  }\n  <div class=\"gbt-card__body\"><ng-content></ng-content></div>\n</div>\n\n<ng-template #headerSlot><ng-content select=\"[card-header]\" /></ng-template>\n<ng-template #titleTemplate>\n  @switch (headingLevel()) {\n    @case (1) {\n      <h1 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h1>\n    }\n    @case (3) {\n      <h3 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h3>\n    }\n    @case (4) {\n      <h4 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h4>\n    }\n    @case (5) {\n      <h5 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h5>\n    }\n    @case (6) {\n      <h6 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h6>\n    }\n    @default {\n      <h2 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"titleContent\" /></h2>\n    }\n  }\n</ng-template>\n<ng-template #titleContent>\n  @if (href()) {\n    <a gbtCardLink [attr.href]=\"href()\">{{ heading() }}</a>\n  } @else {\n    {{ heading() }}\n  }\n  @if (count() !== null) {\n    <span class=\"gbt-card__count\">{{ count() }}</span>\n  }\n</ng-template>\n"],"mappings":"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"}