@hyalo/angular 0.0.0-stage → 0.3.1

package/fesm2022/hyalo-angular-mesh.mjs

@@ -0,0 +1,126 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, signal } from "@angular/core";
+import { HyMotion, injectHyVisibility } from "@hyalo/angular/motion";
+var HyMesh = class HyMesh {
+	motion = inject(HyMotion);
+	visible = injectHyVisibility();
+	animated = input(false, {
+		...ngDevMode ? { debugName: "animated" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	pauseLabel = input("Pause background", ...ngDevMode ? [{ debugName: "pauseLabel" }] : /* istanbul ignore next */ []);
+	playLabel = input("Play background", ...ngDevMode ? [{ debugName: "playLabel" }] : /* istanbul ignore next */ []);
+	disabledLabel = input("Animation disabled", ...ngDevMode ? [{ debugName: "disabledLabel" }] : /* istanbul ignore next */ []);
+	paused = signal(false, ...ngDevMode ? [{ debugName: "paused" }] : /* istanbul ignore next */ []);
+	allowed = computed(() => this.motion.enabled(), ...ngDevMode ? [{ debugName: "allowed" }] : /* istanbul ignore next */ []);
+	moving = computed(() => this.animated() && !this.paused() && this.motion.enabled() && this.visible(), ...ngDevMode ? [{ debugName: "moving" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyMesh,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyMesh,
+		isStandalone: true,
+		selector: "hy-mesh",
+		inputs: {
+			animated: {
+				classPropertyName: "animated",
+				publicName: "animated",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pauseLabel: {
+				classPropertyName: "pauseLabel",
+				publicName: "pauseLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			playLabel: {
+				classPropertyName: "playLabel",
+				publicName: "playLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledLabel: {
+				classPropertyName: "disabledLabel",
+				publicName: "disabledLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"attr.data-animate": "moving()",
+			"attr.data-enabled": "allowed() && animated()"
+		} },
+		ngImport: i0,
+		template: "<div class=\"content\"><ng-content /></div>\r\n@if (animated()) {\r\n  <button\r\n    type=\"button\"\r\n    [disabled]=\"!allowed()\"\r\n    (click)=\"paused.set(!paused())\"\r\n    [attr.aria-pressed]=\"paused()\"\r\n  >\r\n    {{ !allowed() ? disabledLabel() : paused() ? playLabel() : pauseLabel() }}\r\n  </button>\r\n}\r\n",
+		styles: [":host{display:block;position:relative;isolation:isolate;overflow:clip;border-radius:var(--hy-radius-l);background:var(--hy-bg)}:host:before,:host:after{content:\"\";position:absolute;z-index:-1;inset:-30%;pointer-events:none}:host:before{background:radial-gradient(ellipse at 20% 30%,var(--hy-mesh-a, color-mix(in srgb, var(--hy-primary) 36%, transparent)),transparent 55%),radial-gradient(ellipse at 80% 70%,var(--hy-mesh-b, color-mix(in srgb, var(--hy-success) 30%, transparent)),transparent 55%);animation:hy-ambient 10s linear infinite alternate;animation-play-state:paused}:host:after{background:radial-gradient(ellipse at 70% 20%,var(--hy-mesh-c, color-mix(in srgb, var(--hy-warning) 26%, transparent)),transparent 50%);animation:hy-ambient-counter 12s linear infinite alternate;animation-play-state:paused}:host([data-animate=\"true\"]):before,:host([data-animate=\"true\"]):after{animation-play-state:running}:host([data-enabled=\"false\"]):before,:host([data-enabled=\"false\"]):after{animation:none}.content{position:relative;padding:var(--hy-mesh-padding, var(--hy-space-9))}button{margin:var(--hy-space-3);min-block-size:2rem;background:var(--hy-surface-1);color:var(--hy-ink);border:1px solid var(--hy-line);border-radius:var(--hy-radius-s);font:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}@keyframes hy-ambient{to{transform:translate(18%,12%) rotate(14deg)}}@keyframes hy-ambient-counter{to{transform:translate(-16%,14%) rotate(-12deg)}}@media(prefers-reduced-motion:reduce){:host:before,:host:after{animation:none!important}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyMesh,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-mesh",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[attr.data-animate]": "moving()",
+				"[attr.data-enabled]": "allowed() && animated()"
+			},
+			template: "<div class=\"content\"><ng-content /></div>\r\n@if (animated()) {\r\n  <button\r\n    type=\"button\"\r\n    [disabled]=\"!allowed()\"\r\n    (click)=\"paused.set(!paused())\"\r\n    [attr.aria-pressed]=\"paused()\"\r\n  >\r\n    {{ !allowed() ? disabledLabel() : paused() ? playLabel() : pauseLabel() }}\r\n  </button>\r\n}\r\n",
+			styles: [":host{display:block;position:relative;isolation:isolate;overflow:clip;border-radius:var(--hy-radius-l);background:var(--hy-bg)}:host:before,:host:after{content:\"\";position:absolute;z-index:-1;inset:-30%;pointer-events:none}:host:before{background:radial-gradient(ellipse at 20% 30%,var(--hy-mesh-a, color-mix(in srgb, var(--hy-primary) 36%, transparent)),transparent 55%),radial-gradient(ellipse at 80% 70%,var(--hy-mesh-b, color-mix(in srgb, var(--hy-success) 30%, transparent)),transparent 55%);animation:hy-ambient 10s linear infinite alternate;animation-play-state:paused}:host:after{background:radial-gradient(ellipse at 70% 20%,var(--hy-mesh-c, color-mix(in srgb, var(--hy-warning) 26%, transparent)),transparent 50%);animation:hy-ambient-counter 12s linear infinite alternate;animation-play-state:paused}:host([data-animate=\"true\"]):before,:host([data-animate=\"true\"]):after{animation-play-state:running}:host([data-enabled=\"false\"]):before,:host([data-enabled=\"false\"]):after{animation:none}.content{position:relative;padding:var(--hy-mesh-padding, var(--hy-space-9))}button{margin:var(--hy-space-3);min-block-size:2rem;background:var(--hy-surface-1);color:var(--hy-ink);border:1px solid var(--hy-line);border-radius:var(--hy-radius-s);font:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}@keyframes hy-ambient{to{transform:translate(18%,12%) rotate(14deg)}}@keyframes hy-ambient-counter{to{transform:translate(-16%,14%) rotate(-12deg)}}@media(prefers-reduced-motion:reduce){:host:before,:host:after{animation:none!important}}\n"]
+		}]
+	}],
+	propDecorators: {
+		animated: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "animated",
+				required: false
+			}]
+		}],
+		pauseLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pauseLabel",
+				required: false
+			}]
+		}],
+		playLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "playLabel",
+				required: false
+			}]
+		}],
+		disabledLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabledLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { HyMesh };
+
+//# sourceMappingURL=hyalo-angular-mesh.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-mesh.mjs","names":[],"sources":["../../../projects/hyalo/mesh/mesh.ts","../../../projects/hyalo/mesh/mesh.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  booleanAttribute,\r\n  computed,\r\n  inject,\r\n  input,\r\n  signal,\r\n} from '@angular/core';\r\nimport { HyMotion, injectHyVisibility } from '@hyalo/angular/motion';\r\n/** Ambient backdrop. Content stays in a separate, stationary layer. */\r\n@Component({\r\n  selector: 'hy-mesh',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: { '[attr.data-animate]': 'moving()', '[attr.data-enabled]': 'allowed() && animated()' },\r\n  templateUrl: './mesh.html',\r\n  styleUrl: './mesh.css',\r\n})\r\nexport class HyMesh {\r\n  private readonly motion = inject(HyMotion);\r\n  private readonly visible = injectHyVisibility();\r\n  readonly animated = input(false, { transform: booleanAttribute });\r\n  readonly pauseLabel = input('Pause background');\r\n  readonly playLabel = input('Play background');\r\n  readonly disabledLabel = input('Animation disabled');\r\n  protected readonly paused = signal(false);\r\n  protected readonly allowed = computed(() => this.motion.enabled());\r\n  protected readonly moving = computed(\r\n    () => this.animated() && !this.paused() && this.motion.enabled() && this.visible(),\r\n  );\r\n}\r\n","<div class=\"content\"><ng-content /></div>\r\n@if (animated()) {\r\n  <button\r\n    type=\"button\"\r\n    [disabled]=\"!allowed()\"\r\n    (click)=\"paused.set(!paused())\"\r\n    [attr.aria-pressed]=\"paused()\"\r\n  >\r\n    {{ !allowed() ? disabledLabel() : paused() ? playLabel() : pauseLabel() }}\r\n  </button>\r\n}\r\n"],"mappings":";;;AAkBA,IAAa,SAAb,MAAa,OAAM;CACA,SAAS,OAAO,QAAQ;CACxB,UAAU,mBAAkB;CACpC,WAAW,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACrD,aAAa,MAAM,oBAAmB,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CACtC,YAAY,MAAM,mBAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CACpC,gBAAgB,MAAM,sBAAqB,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CACjC,SAAS,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CACtB,UAAU,eAAe,KAAK,OAAO,QAAO,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC/C,SAAS,eACpB,KAAK,SAAQ,KAAM,CAAC,KAAK,OAAM,KAAM,KAAK,OAAO,QAAO,KAAM,KAAK,QAAO,GACjF,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAXU,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,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,qBAAA;GAAA,qBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UClBnB;EAWA,QAAA,CAAA,+jDAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADOa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAM,YAAA,CAAA;EAPlB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAS,iBACF,wBAAwB;GAAM,MACzC;IAAE,uBAAuB;IAAY,uBAAuB;GAAyB;GAAE,UAAA;GAAA,QAAA,CAAA,+jDAAA;EAAA,CAAA"}