@hyalo/angular 0.0.0-stage → 0.1.0

package/fesm2022/hyalo-angular-card.mjs

@@ -0,0 +1,221 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, input } from "@angular/core";
+import * as i1 from "@hyalo/angular";
+import { HyMaterialDirective } from "@hyalo/angular";
+var HyCardMedia = class HyCardMedia {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyCardMedia,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HyCardMedia,
+		isStandalone: true,
+		selector: "[hyCardMedia]",
+		host: { classAttribute: "hy-card__media" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyCardMedia,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[hyCardMedia]",
+			host: { class: "hy-card__media" }
+		}]
+	}]
+});
+var HyCardHeader = class HyCardHeader {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyCardHeader,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HyCardHeader,
+		isStandalone: true,
+		selector: "[hyCardHeader]",
+		host: { classAttribute: "hy-card__header" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyCardHeader,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[hyCardHeader]",
+			host: { class: "hy-card__header" }
+		}]
+	}]
+});
+var HyCardFooter = class HyCardFooter {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyCardFooter,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HyCardFooter,
+		isStandalone: true,
+		selector: "[hyCardFooter]",
+		host: { classAttribute: "hy-card__footer" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyCardFooter,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[hyCardFooter]",
+			host: { class: "hy-card__footer" }
+		}]
+	}]
+});
+var HyCardLink = class HyCardLink {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyCardLink,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HyCardLink,
+		isStandalone: true,
+		selector: "a[hyCardLink]",
+		host: { classAttribute: "hy-card__link" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyCardLink,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "a[hyCardLink]",
+			host: { class: "hy-card__link" }
+		}]
+	}]
+});
+var HyCard = class HyCard {
+	padding = input("md", ...ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyCard,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyCard,
+		isStandalone: true,
+		selector: "hy-card",
+		inputs: { padding: {
+			classPropertyName: "padding",
+			publicName: "padding",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			properties: { "attr.data-padding": "padding()" },
+			classAttribute: "hy-card"
+		},
+		hostDirectives: [{
+			directive: i1.HyMaterialDirective,
+			inputs: ["hyMaterial", "material"]
+		}],
+		ngImport: i0,
+		template: `
+    <ng-content select="[hyCardMedia]" />
+    <ng-content select="[hyCardHeader]" />
+    <div class="hy-card__body"><ng-content /></div>
+    <ng-content select="[hyCardFooter]" />
+  `,
+		isInline: true,
+		styles: [":host{--_pad: var(--hy-card-padding, var(--hy-space-6));position:relative;display:flex;flex-direction:column;gap:var(--hy-space-3);padding:var(--_pad);border-radius:var(--hy-card-radius, var(--hy-radius-l));color:var(--hy-ink);overflow:clip}:host([data-padding=\"none\"]){--_pad: 0px}:host([data-padding=\"sm\"]){--_pad: var(--hy-space-4)}:host([data-padding=\"lg\"]){--_pad: var(--hy-space-9)}:host(:has(.hy-card__link:focus-visible)){box-shadow:var(--hy-focus-ring)}.hy-card__body{flex:1;color:var(--hy-ink-2)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyCard,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-card",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			hostDirectives: [{
+				directive: HyMaterialDirective,
+				inputs: ["hyMaterial: material"]
+			}],
+			host: {
+				class: "hy-card",
+				"[attr.data-padding]": "padding()"
+			},
+			template: `
+    <ng-content select="[hyCardMedia]" />
+    <ng-content select="[hyCardHeader]" />
+    <div class="hy-card__body"><ng-content /></div>
+    <ng-content select="[hyCardFooter]" />
+  `,
+			styles: [":host{--_pad: var(--hy-card-padding, var(--hy-space-6));position:relative;display:flex;flex-direction:column;gap:var(--hy-space-3);padding:var(--_pad);border-radius:var(--hy-card-radius, var(--hy-radius-l));color:var(--hy-ink);overflow:clip}:host([data-padding=\"none\"]){--_pad: 0px}:host([data-padding=\"sm\"]){--_pad: var(--hy-space-4)}:host([data-padding=\"lg\"]){--_pad: var(--hy-space-9)}:host(:has(.hy-card__link:focus-visible)){box-shadow:var(--hy-focus-ring)}.hy-card__body{flex:1;color:var(--hy-ink-2)}\n"]
+		}]
+	}],
+	propDecorators: { padding: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "padding",
+			required: false
+		}]
+	}] }
+});
+const HY_CARD = [
+	HyCard,
+	HyCardMedia,
+	HyCardHeader,
+	HyCardFooter,
+	HyCardLink
+];
+export { HY_CARD, HyCard, HyCardFooter, HyCardHeader, HyCardLink, HyCardMedia };
+
+//# sourceMappingURL=hyalo-angular-card.mjs.map

package/fesm2022/hyalo-angular-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-card.mjs","names":[],"sources":["../../../projects/hyalo/card/card.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, input } from '@angular/core';\r\nimport { HyMaterialDirective } from '@hyalo/angular';\r\n\r\n/** Inner spacing of a card. */\r\nexport type HyCardPadding = 'none' | 'sm' | 'md' | 'lg';\r\n\r\n/** Full-bleed media at the top of a card: an image, video or canvas. */\r\n@Directive({ selector: '[hyCardMedia]', host: { class: 'hy-card__media' } })\r\nexport class HyCardMedia {}\r\n\r\n/** Title area. Put the card's heading here. */\r\n@Directive({ selector: '[hyCardHeader]', host: { class: 'hy-card__header' } })\r\nexport class HyCardHeader {}\r\n\r\n/** Actions or meta at the bottom. */\r\n@Directive({ selector: '[hyCardFooter]', host: { class: 'hy-card__footer' } })\r\nexport class HyCardFooter {}\r\n\r\n/**\r\n * Makes one link inside the card cover the whole card, so the card is\r\n * clickable while screen readers still hear a single, well-named link.\r\n * Other buttons in the card stay clickable on top of it.\r\n */\r\n@Directive({ selector: 'a[hyCardLink]', host: { class: 'hy-card__link' } })\r\nexport class HyCardLink {}\r\n\r\n/**\r\n * The kit's signature surface: a glass panel with optional media, header,\r\n * body and footer.\r\n *\r\n * ```html\r\n * <hy-card material=\"clear\" hyTilt>\r\n *   <img hyCardMedia src=\"watch.avif\" alt=\"\" />\r\n *   <h3 hyCardHeader><a hyCardLink routerLink=\"/watch/1\">Calibre 7</a></h3>\r\n *   <p>Hand-wound, 42 mm, sapphire caseback.</p>\r\n *   <div hyCardFooter>From 4 200 EUR</div>\r\n * </hy-card>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'hy-card',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  hostDirectives: [{ directive: HyMaterialDirective, inputs: ['hyMaterial: material'] }],\r\n  host: {\r\n    class: 'hy-card',\r\n    '[attr.data-padding]': 'padding()',\r\n  },\r\n  template: `\r\n    <ng-content select=\"[hyCardMedia]\" />\r\n    <ng-content select=\"[hyCardHeader]\" />\r\n    <div class=\"hy-card__body\"><ng-content /></div>\r\n    <ng-content select=\"[hyCardFooter]\" />\r\n  `,\r\n  styleUrl: './card.css',\r\n})\r\nexport class HyCard {\r\n  /** Inner spacing. Media always stays full bleed. */\r\n  readonly padding = input<HyCardPadding>('md');\r\n}\r\n\r\n/** Everything needed to build a card. */\r\nexport const HY_CARD = [HyCard, HyCardMedia, HyCardHeader, HyCardFooter, HyCardLink] as const;\r\n"],"mappings":"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"}