@glamera/animated-icons 0.1.0

package/3-dots-horizontal/3-dots-horizontal.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_THREE_DOTS_HORIZONTAL: GlameraIconDefinition;
+export declare class ThreeDotsHorizontalIconComponent extends GlameraIconBase {
+    readonly iconDef: GlameraIconDefinition;
+    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThreeDotsHorizontalIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ThreeDotsHorizontalIconComponent, "glamera-3-dots-horizontal-icon", never, {}, {}, never, never, true, never>;
+}

package/3-dots-horizontal/index.d.ts

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

package/3-dots-horizontal/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_THREE_DOTS_HORIZONTAL, ThreeDotsHorizontalIconComponent, ThreeDotsHorizontalIconComponent as ThreeDotsHorizontalIcon, } from './3-dots-horizontal';

package/3-dots-horizontal/src/3-dots-horizontal.animation.scss

@@ -0,0 +1,46 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-3-dots-horizontal-bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-3px);
+  }
+}
+
+.glm-icon[data-icon='3-dots-horizontal'] .glm-3-dots-horizontal-dot {
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: transform calc(var(--glm-duration) * 0.2) ease-in-out;
+}
+
+@include glm-when-playing('3-dots-horizontal') {
+  .glm-3-dots-horizontal-dot-1 {
+    animation: glm-3-dots-horizontal-bounce calc(var(--glm-duration) * 0.35) ease-in-out var(--glm-delay) both;
+  }
+
+  .glm-3-dots-horizontal-dot-2 {
+    animation: glm-3-dots-horizontal-bounce calc(var(--glm-duration) * 0.35) ease-in-out calc(var(--glm-delay) + var(--glm-duration) * 0.12) both;
+  }
+
+  .glm-3-dots-horizontal-dot-3 {
+    animation: glm-3-dots-horizontal-bounce calc(var(--glm-duration) * 0.35) ease-in-out calc(var(--glm-delay) + var(--glm-duration) * 0.24) both;
+  }
+}
+
+@include glm-loop('3-dots-horizontal') {
+  .glm-3-dots-horizontal-dot-1 {
+    animation: glm-3-dots-horizontal-bounce calc(var(--glm-duration) * 0.35) ease-in-out var(--glm-delay) infinite;
+  }
+
+  .glm-3-dots-horizontal-dot-2 {
+    animation: glm-3-dots-horizontal-bounce calc(var(--glm-duration) * 0.35) ease-in-out calc(var(--glm-delay) + var(--glm-duration) * 0.12) infinite;
+  }
+
+  .glm-3-dots-horizontal-dot-3 {
+    animation: glm-3-dots-horizontal-bounce calc(var(--glm-duration) * 0.35) ease-in-out calc(var(--glm-delay) + var(--glm-duration) * 0.24) infinite;
+  }
+}

package/3-dots-vertical/3-dots-vertical.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_THREE_DOTS_VERTICAL: GlameraIconDefinition;
+export declare class ThreeDotsVerticalIconComponent extends GlameraIconBase {
+    readonly iconDef: GlameraIconDefinition;
+    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThreeDotsVerticalIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ThreeDotsVerticalIconComponent, "glamera-3-dots-vertical-icon", never, {}, {}, never, never, true, never>;
+}

package/3-dots-vertical/index.d.ts

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

package/3-dots-vertical/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_THREE_DOTS_VERTICAL, ThreeDotsVerticalIconComponent, ThreeDotsVerticalIconComponent as ThreeDotsVerticalIcon, } from './3-dots-vertical';

package/3-dots-vertical/src/3-dots-vertical.animation.scss

@@ -0,0 +1,46 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-3-dots-vertical-shift {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  50% {
+    transform: translateX(-3px);
+  }
+}
+
+.glm-icon[data-icon='3-dots-vertical'] .glm-3-dots-vertical-dot {
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: transform calc(var(--glm-duration) * 0.2) ease-in-out;
+}
+
+@include glm-when-playing('3-dots-vertical') {
+  .glm-3-dots-vertical-dot-1 {
+    animation: glm-3-dots-vertical-shift calc(var(--glm-duration) * 0.35) ease-in-out var(--glm-delay) both;
+  }
+
+  .glm-3-dots-vertical-dot-2 {
+    animation: glm-3-dots-vertical-shift calc(var(--glm-duration) * 0.35) ease-in-out calc(var(--glm-delay) + var(--glm-duration) * 0.12) both;
+  }
+
+  .glm-3-dots-vertical-dot-3 {
+    animation: glm-3-dots-vertical-shift calc(var(--glm-duration) * 0.35) ease-in-out calc(var(--glm-delay) + var(--glm-duration) * 0.24) both;
+  }
+}
+
+@include glm-loop('3-dots-vertical') {
+  .glm-3-dots-vertical-dot-1 {
+    animation: glm-3-dots-vertical-shift calc(var(--glm-duration) * 0.35) ease-in-out var(--glm-delay) infinite;
+  }
+
+  .glm-3-dots-vertical-dot-2 {
+    animation: glm-3-dots-vertical-shift calc(var(--glm-duration) * 0.35) ease-in-out calc(var(--glm-delay) + var(--glm-duration) * 0.12) infinite;
+  }
+
+  .glm-3-dots-vertical-dot-3 {
+    animation: glm-3-dots-vertical-shift calc(var(--glm-duration) * 0.35) ease-in-out calc(var(--glm-delay) + var(--glm-duration) * 0.24) infinite;
+  }
+}

package/README.md

@@ -0,0 +1,239 @@
+# @glamera/animated-icons
+
+Tree-shakable animated SVG icons for **Angular 15+**.
+
+Each icon is a **standalone component** in its own entry point. Import only what a feature uses so unused icons stay out of the JavaScript and CSS bundle.
+
+## Install
+
+```bash
+npm install @glamera/animated-icons
+```
+
+## Recommended usage (smallest bundle)
+
+Import the dedicated component for each icon. Animation CSS is bundled with that component only.
+
+```ts
+import { Component } from '@angular/core';
+import { SearchIconComponent } from '@glamera/animated-icons/search';
+
+@Component({
+  standalone: true,
+  imports: [SearchIconComponent],
+  template: `<glamera-search-icon animation="hover" size="24"></glamera-search-icon>`,
+})
+export class FeatureComponent {}
+```
+
+No global providers are required for dedicated components.
+
+## Dynamic icon name (`glamera-icon`)
+
+Use `<glamera-icon name="search">` when the icon name is dynamic. This path is heavier because you register definitions and load animation styles yourself.
+
+```ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideGlameraIcons, GlameraIconComponent } from '@glamera/animated-icons';
+import { GLM_SEARCH } from '@glamera/animated-icons/search';
+
+bootstrapApplication(AppComponent, {
+  providers: [provideGlameraIcons([GLM_SEARCH])],
+});
+```
+
+```ts
+@Component({
+  standalone: true,
+  imports: [GlameraIconComponent],
+  template: `<glamera-icon name="search" animation="hover" size="24"></glamera-icon>`,
+})
+export class FeatureComponent {}
+```
+
+`<glamera-icon>` ships **base styles only**. Add animation styles in `angular.json` for the icons you register:
+
+```json
+"styles": [
+  "node_modules/@glamera/animated-icons/styles/search.scss"
+]
+```
+
+Import only the icons you need:
+
+| Style entry | Icon |
+| --- | --- |
+| `styles/search.scss` | `search` |
+| `styles/heart.scss` | `heart` |
+| `styles/bell.scss` | `bell-ring` |
+| `styles/check.scss` | `circle-check-big` |
+| `styles/settings.scss` | `settings` |
+| `styles/moon.scss` | `moon` |
+| `styles/sun.scss` | `sun` |
+| `styles/repeat.scss` | `repeat` |
+| `styles/mail.scss` | `mail` |
+| `styles/lock.scss` | `lock` |
+| `styles/eye.scss` | `eye` |
+| `styles/eye-closed.scss` | `eye-closed` |
+| `styles/eye-off.scss` | `eye-off` |
+| `styles/copy.scss` | `copy` |
+| `styles/clipboard.scss` | `clipboard` |
+| `styles/files.scss` | `files` |
+| `styles/house.scss` | `house` |
+| `styles/phone.scss` | `phone` |
+| `styles/user.scss` | `user` |
+| `styles/user-round.scss` | `user-round` |
+| `styles/user-check.scss` | `user-check` |
+| `styles/user-round-check.scss` | `user-round-check` |
+| `styles/user-x.scss` | `user-x` |
+| `styles/user-round-x.scss` | `user-round-x` |
+| `styles/users.scss` | `users` |
+| `styles/qr-code.scss` | `qr-code` |
+| `styles/scan-qr-code.scss` | `scan-qr-code` |
+| `styles/upload.scss` | `upload` |
+| `styles/download.scss` | `download` |
+| `styles/chevron-right.scss` | `chevron-right` |
+| `styles/chevron-left.scss` | `chevron-left` |
+| `styles/chevron-up.scss` | `chevron-up` |
+| `styles/chevron-down.scss` | `chevron-down` |
+| `styles/circle-chevron-up.scss` | `circle-chevron-up` |
+| `styles/circle-chevron-right.scss` | `circle-chevron-right` |
+| `styles/circle-chevron-left.scss` | `circle-chevron-left` |
+| `styles/circle-chevron-down.scss` | `circle-chevron-down` |
+| `styles/share.scss` | `share` |
+| `styles/circle-check.scss` | `circle-check` |
+| `styles/layers.scss` | `layers` |
+| `styles/square-pen.scss` | `square-pen` |
+| `styles/clock.scss` | `clock` |
+| `styles/pencil.scss` | `pencil` |
+| `styles/square-check-big.scss` | `square-check-big` |
+| `styles/play-circle.scss` | `play-circle` |
+| `styles/x-circle.scss` | `x-circle` |
+| `styles/x.scss` | `x` |
+| `styles/3-dots-horizontal.scss` | `3-dots-horizontal` |
+| `styles/3-dots-vertical.scss` | `3-dots-vertical` |
+| `styles/calendar-x.scss` | `calendar-x` |
+| `styles/calendar.scss` | `calendar` |
+| `styles/scan-text.scss` | `scan-text` |
+| `styles/printer.scss` | `printer` |
+| `styles/printer-2.scss` | `printer-2` |
+
+For many dynamic icons, `styles/all.scss` imports every animation (larger CSS).
+
+## Bundle tips
+
+- Prefer `@glamera/animated-icons/search` over `@glamera/animated-icons` when you only need one icon.
+- Prefer `<glamera-search-icon>` over `<glamera-icon name="search">` when the icon is static.
+- Import `GLM_SEARCH` (definition only) when you need registry registration without the component class.
+- Avoid `import * from '@glamera/animated-icons'`.
+- `sideEffects: false` is set so unused JavaScript can be tree-shaken.
+
+### Animation modes
+
+| Mode | Behavior |
+| --- | --- |
+| `hover` | Default. Plays once when the pointer enters the icon. |
+| `hover-loop` | Repeats while the pointer is over the icon. |
+| `loop` | Plays continuously. |
+| `none` | Static icon. No animation work. |
+| `click` | Plays once after each click. |
+
+### Size, color, and theme
+
+- `size` accepts `24`, `"24"`, or CSS lengths such as `"2rem"`.
+- Icons use `currentColor`. Set color from CSS or a parent class.
+- There are no hardcoded fills, so light and dark themes both work.
+
+```html
+<glamera-heart-icon class="text-red-500" animation="loop"></glamera-heart-icon>
+```
+
+### Accessibility
+
+```html
+<glamera-search-icon aria-label="Search"></glamera-search-icon>
+<glamera-search-icon decorative></glamera-search-icon>
+```
+
+Meaningful icons get `role="img"` and an accessible name. Decorative icons are hidden from assistive technology.
+
+## Current icons
+
+| Name | Entry | Component |
+| --- | --- | --- |
+| `search` | `@glamera/animated-icons/search` | `glamera-search-icon` |
+| `heart` | `@glamera/animated-icons/heart` | `glamera-heart-icon` |
+| `bell-ring` | `@glamera/animated-icons/bell` | `glamera-bell-ring-icon` |
+| `circle-check-big` | `@glamera/animated-icons/check` | `glamera-circle-check-big-icon` |
+| `settings` | `@glamera/animated-icons/settings` | `glamera-settings-icon` |
+| `moon` | `@glamera/animated-icons/moon` | `glamera-moon-icon` |
+| `sun` | `@glamera/animated-icons/sun` | `glamera-sun-icon` |
+| `repeat` | `@glamera/animated-icons/repeat` | `glamera-repeat-icon` |
+| `mail` | `@glamera/animated-icons/mail` | `glamera-mail-icon` |
+| `lock` | `@glamera/animated-icons/lock` | `glamera-lock-icon` |
+| `eye` | `@glamera/animated-icons/eye` | `glamera-eye-icon` |
+| `eye-closed` | `@glamera/animated-icons/eye-closed` | `glamera-eye-closed-icon` |
+| `eye-off` | `@glamera/animated-icons/eye-off` | `glamera-eye-off-icon` |
+| `copy` | `@glamera/animated-icons/copy` | `glamera-copy-icon` |
+| `clipboard` | `@glamera/animated-icons/clipboard` | `glamera-clipboard-icon` |
+| `files` | `@glamera/animated-icons/files` | `glamera-files-icon` |
+| `house` | `@glamera/animated-icons/house` | `glamera-house-icon` |
+| `phone` | `@glamera/animated-icons/phone` | `glamera-phone-icon` |
+| `user` | `@glamera/animated-icons/user` | `glamera-user-icon` |
+| `user-round` | `@glamera/animated-icons/user-round` | `glamera-user-round-icon` |
+| `user-check` | `@glamera/animated-icons/user-check` | `glamera-user-check-icon` |
+| `user-round-check` | `@glamera/animated-icons/user-round-check` | `glamera-user-round-check-icon` |
+| `user-x` | `@glamera/animated-icons/user-x` | `glamera-user-x-icon` |
+| `user-round-x` | `@glamera/animated-icons/user-round-x` | `glamera-user-round-x-icon` |
+| `users` | `@glamera/animated-icons/users` | `glamera-users-icon` |
+| `qr-code` | `@glamera/animated-icons/qr-code` | `glamera-qr-code-icon` |
+| `scan-qr-code` | `@glamera/animated-icons/scan-qr-code` | `glamera-scan-qr-code-icon` |
+| `upload` | `@glamera/animated-icons/upload` | `glamera-upload-icon` |
+| `download` | `@glamera/animated-icons/download` | `glamera-download-icon` |
+| `chevron-right` | `@glamera/animated-icons/chevron-right` | `glamera-chevron-right-icon` |
+| `chevron-left` | `@glamera/animated-icons/chevron-left` | `glamera-chevron-left-icon` |
+| `chevron-up` | `@glamera/animated-icons/chevron-up` | `glamera-chevron-up-icon` |
+| `chevron-down` | `@glamera/animated-icons/chevron-down` | `glamera-chevron-down-icon` |
+| `circle-chevron-up` | `@glamera/animated-icons/circle-chevron-up` | `glamera-circle-chevron-up-icon` |
+| `circle-chevron-right` | `@glamera/animated-icons/circle-chevron-right` | `glamera-circle-chevron-right-icon` |
+| `circle-chevron-left` | `@glamera/animated-icons/circle-chevron-left` | `glamera-circle-chevron-left-icon` |
+| `circle-chevron-down` | `@glamera/animated-icons/circle-chevron-down` | `glamera-circle-chevron-down-icon` |
+| `share` | `@glamera/animated-icons/share` | `glamera-share-icon` |
+| `circle-check` | `@glamera/animated-icons/circle-check` | `glamera-circle-check-icon` |
+| `layers` | `@glamera/animated-icons/layers` | `glamera-layers-icon` |
+| `square-pen` | `@glamera/animated-icons/square-pen` | `glamera-square-pen-icon` |
+| `clock` | `@glamera/animated-icons/clock` | `glamera-clock-icon` |
+| `pencil` | `@glamera/animated-icons/pencil` | `glamera-pencil-icon` |
+| `square-check-big` | `@glamera/animated-icons/square-check-big` | `glamera-square-check-big-icon` |
+| `play-circle` | `@glamera/animated-icons/play-circle` | `glamera-play-circle-icon` |
+| `x-circle` | `@glamera/animated-icons/x-circle` | `glamera-x-circle-icon` |
+| `x` | `@glamera/animated-icons/x` | `glamera-x-icon` |
+| `3-dots-horizontal` | `@glamera/animated-icons/3-dots-horizontal` | `glamera-3-dots-horizontal-icon` |
+| `3-dots-vertical` | `@glamera/animated-icons/3-dots-vertical` | `glamera-3-dots-vertical-icon` |
+| `calendar-x` | `@glamera/animated-icons/calendar-x` | `glamera-calendar-x-icon` |
+| `calendar` | `@glamera/animated-icons/calendar` | `glamera-calendar-icon` |
+| `scan-text` | `@glamera/animated-icons/scan-text` | `glamera-scan-text-icon` |
+| `printer` | `@glamera/animated-icons/printer` | `glamera-printer-icon` |
+| `printer-2` | `@glamera/animated-icons/printer-2` | `glamera-printer-2-icon` |
+
+## Adding an icon
+
+1. Copy `search/` to a new secondary entry `<name>/`.
+2. Replace the SVG, animation SCSS, selector, and `GLM_*` definition.
+3. Add `styles/<name>.scss` that imports the new animation file.
+4. Add the icon to `styles/all.scss` if it should work with `<glamera-icon>`.
+
+The new icon is then available as `<glamera-<name>-icon>` and, after registration, as `<glamera-icon name="<name>">`.
+
+## Compatibility
+
+This package is built with Angular 15 and `compilationMode: "partial"`. That is the Angular Package Format approach for supporting Angular 15 and newer with a single artifact.
+
+Standalone components exist in Angular 14+, so this API stays compatible with Angular 15.
+
+Do not rebuild this library with a newer Angular compiler if you still need Angular 15 consumers. Newer compilers emit linker instructions that Angular 15 cannot process.
+
+## Deprecated APIs
+
+- `GlameraIconsModule` — use `provideGlameraIcons()` or dedicated icon components instead.
+- Per-icon `*IconModule` wrappers were removed. Import standalone components directly.

package/bell/bell.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_BELL: GlameraIconDefinition;
+export declare class BellRingIconComponent extends GlameraIconBase {
+    readonly iconDef: GlameraIconDefinition;
+    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<BellRingIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BellRingIconComponent, "glamera-bell-ring-icon, glamera-bell-icon", never, {}, {}, never, never, true, never>;
+}

package/bell/index.d.ts

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

package/bell/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_BELL, BellRingIconComponent, BellRingIconComponent as BellRingIcon, BellRingIconComponent as BellIconComponent, } from './bell';

package/bell/src/bell.animation.scss

@@ -0,0 +1,120 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-bell-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  9% {
+    transform: rotate(7deg);
+  }
+  26% {
+    transform: rotate(-18deg);
+  }
+  45% {
+    transform: rotate(14deg);
+  }
+  62% {
+    transform: rotate(-9deg);
+  }
+  78% {
+    transform: rotate(5deg);
+  }
+  90% {
+    transform: rotate(-2deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes glm-bell-clapper {
+  0% {
+    transform: translateX(0);
+  }
+  9% {
+    transform: translateX(1.5px);
+  }
+  26% {
+    transform: translateX(-5px);
+  }
+  45% {
+    transform: translateX(4px);
+  }
+  62% {
+    transform: translateX(-2.5px);
+  }
+  78% {
+    transform: translateX(1.5px);
+  }
+  90% {
+    transform: translateX(-1px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes glm-bell-wave {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  25% {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+  50% {
+    opacity: 0.25;
+    transform: scale(0.7);
+  }
+  75% {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.glm-icon[data-icon='bell-ring'] .glm-bell-ring {
+  transform-box: view-box;
+  transform-origin: top center;
+}
+
+.glm-icon[data-icon='bell-ring'] .glm-bell-clapper {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.glm-icon[data-icon='bell-ring'] .glm-bell-wave-right {
+  transform-box: fill-box;
+  transform-origin: 0% 100%;
+}
+
+.glm-icon[data-icon='bell-ring'] .glm-bell-wave-left {
+  transform-box: fill-box;
+  transform-origin: 100% 100%;
+}
+
+@include glm-when-playing('bell-ring') {
+  .glm-bell-ring {
+    animation: glm-bell-ring calc(var(--glm-duration) * 1.3) ease-in-out var(--glm-delay);
+  }
+
+  .glm-bell-clapper {
+    animation: glm-bell-clapper calc(var(--glm-duration) * 1.3) ease-in-out calc(var(--glm-delay) + var(--glm-duration) * 0.08);
+  }
+
+  .glm-bell-wave {
+    animation: glm-bell-wave calc(var(--glm-duration) * 1.3) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.08);
+  }
+}
+
+@include glm-loop('bell-ring') {
+  .glm-bell-ring,
+  .glm-bell-clapper,
+  .glm-bell-wave {
+    animation-iteration-count: infinite;
+  }
+}

package/calendar/calendar.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_CALENDAR: GlameraIconDefinition;
+export declare class CalendarIconComponent extends GlameraIconBase {
+    readonly iconDef: GlameraIconDefinition;
+    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarIconComponent, "glamera-calendar-icon", never, {}, {}, never, never, true, never>;
+}

package/calendar/index.d.ts

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

package/calendar/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_CALENDAR, CalendarIconComponent, CalendarIconComponent as CalendarIcon, } from './calendar';

package/calendar/src/calendar.animation.scss

@@ -0,0 +1,64 @@
+@import '../../src/lib/animations/play';
+
+$calendar-ease: cubic-bezier(0.34, 1.4, 0.64, 1);
+
+@keyframes glm-calendar-hanger-lift {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-1.5px);
+  }
+}
+
+@keyframes glm-calendar-page-flip {
+  0%,
+  100% {
+    transform: scaleY(1);
+  }
+
+  35% {
+    transform: scaleY(0.88);
+  }
+
+  70% {
+    transform: scaleY(1.03);
+  }
+}
+
+.glm-icon[data-icon='calendar'] .glm-calendar-hanger {
+  transform-box: fill-box;
+  transform-origin: bottom center;
+  transition: transform calc(var(--glm-duration) * 0.3) $calendar-ease;
+}
+
+.glm-icon[data-icon='calendar'] .glm-calendar-body {
+  fill: none;
+  transform-box: fill-box;
+  transform-origin: top center;
+  transition: transform calc(var(--glm-duration) * 0.3) $calendar-ease;
+}
+
+@include glm-when-playing('calendar') {
+  .glm-calendar-hanger-left,
+  .glm-calendar-hanger-right {
+    animation: glm-calendar-hanger-lift calc(var(--glm-duration) * 0.8) $calendar-ease var(--glm-delay) both;
+  }
+
+  .glm-calendar-body {
+    animation: glm-calendar-page-flip calc(var(--glm-duration) * 0.8) $calendar-ease var(--glm-delay) both;
+  }
+}
+
+@include glm-loop('calendar') {
+  .glm-calendar-hanger-left,
+  .glm-calendar-hanger-right {
+    animation: glm-calendar-hanger-lift calc(var(--glm-duration) * 0.8) $calendar-ease var(--glm-delay) infinite;
+  }
+
+  .glm-calendar-body {
+    animation: glm-calendar-page-flip calc(var(--glm-duration) * 0.8) $calendar-ease var(--glm-delay) infinite;
+  }
+}

package/calendar-x/calendar-x.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_CALENDAR_X: GlameraIconDefinition;
+export declare class CalendarXIconComponent extends GlameraIconBase {
+    readonly iconDef: GlameraIconDefinition;
+    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarXIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarXIconComponent, "glamera-calendar-x-icon", never, {}, {}, never, never, true, never>;
+}

package/calendar-x/index.d.ts

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

package/calendar-x/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_CALENDAR_X, CalendarXIconComponent, CalendarXIconComponent as CalendarXIcon, } from './calendar-x';