@glamera/animated-icons 0.1.0

package/layers/src/layers.animation.scss

@@ -0,0 +1,49 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-layers-middle-lift {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+@keyframes glm-layers-bottom-lift {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-9px);
+  }
+}
+
+.glm-icon[data-icon='layers'] .glm-layers-middle,
+.glm-icon[data-icon='layers'] .glm-layers-bottom {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+@include glm-when-playing('layers') {
+  .glm-layers-middle {
+    animation: glm-layers-middle-lift calc(var(--glm-duration) * 0.6) cubic-bezier(0.175, 0.885, 0.32, 1.275) var(--glm-delay) both;
+  }
+
+  .glm-layers-bottom {
+    animation: glm-layers-bottom-lift calc(var(--glm-duration) * 0.6) cubic-bezier(0.175, 0.885, 0.32, 1.275) var(--glm-delay) both;
+  }
+}
+
+@include glm-loop('layers') {
+  .glm-layers-middle {
+    animation: glm-layers-middle-lift calc(var(--glm-duration) * 0.6) cubic-bezier(0.175, 0.885, 0.32, 1.275) var(--glm-delay) infinite both;
+  }
+
+  .glm-layers-bottom {
+    animation: glm-layers-bottom-lift calc(var(--glm-duration) * 0.6) cubic-bezier(0.175, 0.885, 0.32, 1.275) var(--glm-delay) infinite both;
+  }
+}

package/lib/base/icon-base.d.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { GlameraAnimationMode, GlameraIconDefinition, GlameraIconSize } from '../types';
+import * as i0 from "@angular/core";
+export declare abstract class GlameraIconBase implements OnDestroy {
+    protected readonly sanitizer: DomSanitizer;
+    protected readonly cdr: ChangeDetectorRef;
+    animation: GlameraAnimationMode;
+    size: GlameraIconSize;
+    duration: number | string;
+    delay: number | string;
+    label?: string | null;
+    ariaLabel?: string | null;
+    get parentHover(): boolean;
+    set parentHover(value: boolean | string | null | undefined);
+    get decorative(): boolean;
+    set decorative(value: boolean | string | null | undefined);
+    isActive: boolean;
+    private _decorative;
+    private _parentHover;
+    private clickTimer;
+    protected constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    abstract get iconDef(): GlameraIconDefinition | undefined;
+    get iconName(): string | null;
+    get resolvedSize(): string;
+    get resolvedDuration(): string;
+    get resolvedDelay(): string;
+    get a11yLabel(): string | null;
+    get a11yHidden(): string | null;
+    get a11yRole(): string | null;
+    get safeSvg(): SafeHtml;
+    onClick(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GlameraIconBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<GlameraIconBase, never, never, { "animation": "animation"; "size": "size"; "duration": "duration"; "delay": "delay"; "label": "label"; "ariaLabel": "aria-label"; "parentHover": "parentHover"; "decorative": "decorative"; }, {}, never, never, false, never>;
+}

package/lib/base/icon-host.template.d.ts

@@ -0,0 +1 @@
+export declare const GLAMERA_ICON_HOST_TEMPLATE = "\n<span\n  class=\"glm-icon\"\n  [class.glm-anim-hover]=\"animation === 'hover'\"\n  [class.glm-anim-hover-loop]=\"animation === 'hover-loop'\"\n  [class.glm-anim-loop]=\"animation === 'loop'\"\n  [class.glm-anim-none]=\"animation === 'none'\"\n  [class.glm-anim-click]=\"animation === 'click'\"\n  [class.glm-is-active]=\"isActive\"\n  [class.glm-parent-hover]=\"parentHover\"\n  [class.glm-missing]=\"!iconDef\"\n  [attr.data-icon]=\"iconName\"\n  [style.--glm-size]=\"resolvedSize\"\n  [style.--glm-duration]=\"resolvedDuration\"\n  [style.--glm-delay]=\"resolvedDelay\"\n  [attr.role]=\"a11yRole\"\n  [attr.aria-hidden]=\"a11yHidden\"\n  [attr.aria-label]=\"a11yLabel\"\n  (click)=\"onClick()\">\n  <span class=\"glm-icon-svg\" [innerHTML]=\"safeSvg\"></span>\n</span>\n";

package/lib/components/icon/icon.component.d.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { GlameraIconBase } from '../../base/icon-base';
+import { GlameraIconRegistry } from '../../icon-registry';
+import { GlameraIconDefinition } from '../../types';
+import * as i0 from "@angular/core";
+export declare class GlameraIconComponent extends GlameraIconBase {
+    private readonly registry;
+    name: string;
+    private static readonly warned;
+    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef, registry: GlameraIconRegistry);
+    get iconDef(): GlameraIconDefinition | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GlameraIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GlameraIconComponent, "glamera-icon", never, { "name": "name"; }, {}, never, never, true, never>;
+}

package/lib/glamera-icons.module.d.ts

@@ -0,0 +1,18 @@
+import { ModuleWithProviders } from '@angular/core';
+import { GlameraIconRegistry } from './icon-registry';
+import { GlameraIconDefinition } from './types';
+import * as i0 from "@angular/core";
+import * as i1 from "./components/icon/icon.component";
+/**
+ * @deprecated Prefer `provideGlameraIcons()` or dedicated icon components from `@glamera/animated-icons/<icon>`.
+ */
+export declare class GlameraIconsModule {
+    constructor(registry: GlameraIconRegistry, groups: GlameraIconDefinition[][] | null);
+    /**
+     * @deprecated Prefer `provideGlameraIcons()` in standalone applications.
+     */
+    static withIcons(icons: GlameraIconDefinition[]): ModuleWithProviders<GlameraIconsModule>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GlameraIconsModule, [null, { optional: true; }]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<GlameraIconsModule, never, [typeof i1.GlameraIconComponent], [typeof i1.GlameraIconComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<GlameraIconsModule>;
+}

package/lib/icon-registry.d.ts

@@ -0,0 +1,11 @@
+import { GlameraIconDefinition } from './types';
+import * as i0 from "@angular/core";
+export declare class GlameraIconRegistry {
+    private readonly icons;
+    register(icons: GlameraIconDefinition | readonly GlameraIconDefinition[]): void;
+    get(name: string): GlameraIconDefinition | undefined;
+    has(name: string): boolean;
+    names(): string[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<GlameraIconRegistry, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<GlameraIconRegistry>;
+}

package/lib/provide-icons.d.ts

@@ -0,0 +1,10 @@
+import { GlameraIconDefinition } from './types';
+/**
+ * Standalone registration for `<glamera-icon name="...">`.
+ * Pass only the icon definitions the app actually imports.
+ *
+ * `<glamera-icon>` ships base styles only. Add animation styles explicitly, for example:
+ * `@import '@glamera/animated-icons/styles/search.scss';` in `angular.json`, or import
+ * only the dedicated icon components which bundle their own animation CSS.
+ */
+export declare function provideGlameraIcons(icons: GlameraIconDefinition[]): import("@angular/core").EnvironmentProviders;

package/lib/tokens.d.ts

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import { GlameraIconDefinition } from './types';
+/** Multi-provider token used by `GlameraIconsModule.withIcons()`. */
+export declare const GLAMERA_ICONS: InjectionToken<GlameraIconDefinition[][]>;

package/lib/types.d.ts

@@ -0,0 +1,23 @@
+/**
+ * How an icon animation is triggered.
+ *
+ * - `hover`: plays once when the pointer enters the icon (default)
+ * - `hover-loop`: repeats while the pointer is over the icon
+ * - `loop`: plays continuously
+ * - `none`: static, no animation
+ * - `click`: plays once after each click
+ */
+export type GlameraAnimationMode = 'hover' | 'hover-loop' | 'loop' | 'none' | 'click';
+/**
+ * Tree-shakable icon definition.
+ * Register only the icons an application actually imports.
+ */
+export interface GlameraIconDefinition {
+    /** Unique name used by `<glamera-icon name="...">`. */
+    name: string;
+    viewBox: string;
+    /** Inner SVG markup. Must be trusted library content (no user HTML). */
+    svg: string;
+    strokeWidth?: number;
+}
+export type GlameraIconSize = number | string;

package/lib/utils.d.ts

@@ -0,0 +1,7 @@
+import { GlameraIconSize } from './types';
+/** Matches the reference heart animation (`duration = 1` second). */
+export declare const GLAMERA_DEFAULT_DURATION = 1000;
+/** Accepts `24`, `"24"`, or CSS units like `"2rem"`. */
+export declare function coerceIconSize(size: GlameraIconSize): string;
+export declare function coerceDurationMs(value: number | string): number;
+export declare function coerceBooleanAttribute(value: boolean | string | null | undefined): boolean;

package/lock/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@glamera/animated-icons/lock" />
+export * from './public-api';

package/lock/lock.d.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { GlameraIconBase, GlameraIconDefinition } from '@glamera/animated-icons';
+import * as i0 from "@angular/core";
+export declare const GLM_LOCK: GlameraIconDefinition;
+export declare class LockIconComponent extends GlameraIconBase {
+    readonly iconDef: GlameraIconDefinition;
+    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<LockIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LockIconComponent, "glamera-lock-icon", never, {}, {}, never, never, true, never>;
+}

package/lock/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_LOCK, LockIconComponent, LockIconComponent as LockIcon } from './lock';

package/lock/src/lock.animation.scss

@@ -0,0 +1,41 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-lock-shake {
+  0%,
+  100% {
+    transform: translateX(0) rotate(0deg);
+  }
+
+  20% {
+    transform: translateX(-3px) rotate(-2deg);
+  }
+
+  40% {
+    transform: translateX(3px) rotate(2deg);
+  }
+
+  60% {
+    transform: translateX(-3px) rotate(-2deg);
+  }
+
+  80% {
+    transform: translateX(3px) rotate(2deg);
+  }
+}
+
+.glm-icon[data-icon='lock'] .glm-lock-group {
+  transform-box: view-box;
+  transform-origin: 12px 12px;
+}
+
+@include glm-when-playing('lock') {
+  .glm-lock-group {
+    animation: glm-lock-shake calc(var(--glm-duration) * 0.4) ease-in-out var(--glm-delay) both;
+  }
+}
+
+@include glm-loop('lock') {
+  .glm-lock-group {
+    animation-iteration-count: infinite;
+  }
+}

package/mail/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@glamera/animated-icons/mail" />
+export * from './public-api';

package/mail/mail.d.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { GlameraIconBase, GlameraIconDefinition } from '@glamera/animated-icons';
+import * as i0 from "@angular/core";
+export declare const GLM_MAIL: GlameraIconDefinition;
+export declare class MailIconComponent extends GlameraIconBase {
+    readonly iconDef: GlameraIconDefinition;
+    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MailIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MailIconComponent, "glamera-mail-icon", never, {}, {}, never, never, true, never>;
+}

package/mail/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_MAIL, MailIconComponent, MailIconComponent as MailIcon } from './mail';

package/mail/src/mail.animation.scss

@@ -0,0 +1,76 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-mail-bounce {
+  0% {
+    transform: scale(0.85);
+  }
+
+  55% {
+    transform: scale(1.06);
+  }
+
+  80% {
+    transform: scale(0.98);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes glm-mail-flap {
+  0% {
+    stroke-dashoffset: 24;
+    opacity: 0;
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-mail-body {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.95;
+  }
+}
+
+.glm-icon[data-icon='mail'] .glm-mail-group {
+  transform-box: view-box;
+  transform-origin: 12px 12px;
+}
+
+.glm-icon[data-icon='mail'] .glm-mail-flap {
+  fill: none;
+  stroke-dasharray: 24;
+  stroke-dashoffset: 0;
+  opacity: 1;
+}
+
+@include glm-when-playing('mail') {
+  .glm-mail-group {
+    animation: glm-mail-bounce calc(var(--glm-duration) * 0.5) ease-out var(--glm-delay) both;
+  }
+
+  .glm-mail-flap {
+    animation: glm-mail-flap calc(var(--glm-duration) * 0.35) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.22) both;
+  }
+
+  .glm-mail-body {
+    animation: glm-mail-body calc(var(--glm-duration) * 0.45) ease-out var(--glm-delay) both;
+  }
+}
+
+@include glm-loop('mail') {
+  .glm-mail-group,
+  .glm-mail-flap,
+  .glm-mail-body {
+    animation-iteration-count: infinite;
+  }
+}

package/moon/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@glamera/animated-icons/moon" />
+export * from './public-api';

package/moon/moon.d.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { GlameraIconBase, GlameraIconDefinition } from '@glamera/animated-icons';
+import * as i0 from "@angular/core";
+export declare const GLM_MOON: GlameraIconDefinition;
+export declare class MoonIconComponent extends GlameraIconBase {
+    readonly iconDef: GlameraIconDefinition;
+    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MoonIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MoonIconComponent, "glamera-moon-icon", never, {}, {}, never, never, true, never>;
+}

package/moon/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_MOON, MoonIconComponent, MoonIconComponent as MoonIcon } from './moon';

package/moon/src/moon.animation.scss

@@ -0,0 +1,49 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-moon-float {
+  0%,
+  100% {
+    transform: translateY(0) scale(1);
+  }
+  50% {
+    transform: translateY(-2px) scale(1.04);
+  }
+}
+
+@keyframes glm-moon-glow {
+  0% {
+    opacity: 0.85;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.9;
+  }
+}
+
+.glm-icon[data-icon='moon'] .glm-moon-path {
+  opacity: 0.85;
+}
+
+.glm-icon[data-icon='moon'] .glm-icon-svg svg {
+  transform-box: view-box;
+  transform-origin: center;
+}
+
+@include glm-when-playing('moon') {
+  .glm-icon-svg svg {
+    animation: glm-moon-float calc(var(--glm-duration) * 0.8) ease-in-out var(--glm-delay) both;
+  }
+
+  .glm-moon-path {
+    animation: glm-moon-glow calc(var(--glm-duration) * 0.8) ease-in-out var(--glm-delay) both;
+  }
+}
+
+@include glm-loop('moon') {
+  .glm-icon-svg svg,
+  .glm-moon-path {
+    animation-iteration-count: infinite;
+  }
+}