@glamera/animated-icons 0.1.0

package/calendar-x/src/calendar-x.animation.scss

@@ -0,0 +1,192 @@
+@import '../../src/lib/animations/play';
+
+$calendar-x-ease: cubic-bezier(0.16, 1, 0.3, 1);
+$calendar-x-mark-ease: cubic-bezier(0.34, 1.4, 0.64, 1);
+
+@keyframes glm-calendar-x-body-draw {
+  0% {
+    stroke-dashoffset: 1;
+    opacity: 0;
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-calendar-x-hanger-draw {
+  0% {
+    stroke-dashoffset: 1;
+    opacity: 0;
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-calendar-x-header-draw {
+  0% {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+}
+
+@keyframes glm-calendar-x-mark-pop {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+
+  60% {
+    transform: scale(1.15);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes glm-calendar-x-body-draw-loop {
+  0%,
+  100% {
+    stroke-dashoffset: 1;
+    opacity: 0;
+  }
+
+  35%,
+  70% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-calendar-x-hanger-draw-loop {
+  0%,
+  100% {
+    stroke-dashoffset: 1;
+    opacity: 0;
+  }
+
+  20%,
+  70% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-calendar-x-header-draw-loop {
+  0%,
+  100% {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+
+  30%,
+  70% {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+}
+
+@keyframes glm-calendar-x-mark-pop-loop {
+  0%,
+  100% {
+    transform: scale(0);
+    opacity: 0;
+  }
+
+  45% {
+    transform: scale(1.15);
+    opacity: 1;
+  }
+
+  55%,
+  70% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.glm-icon[data-icon='calendar-x'] .glm-calendar-x-hanger,
+.glm-icon[data-icon='calendar-x'] .glm-calendar-x-body {
+  fill: none;
+  stroke-dasharray: 1;
+  stroke-dashoffset: 0;
+  opacity: 1;
+}
+
+.glm-icon[data-icon='calendar-x'] .glm-calendar-x-header {
+  transform-box: view-box;
+  transform-origin: 3px 10px;
+  transform: scaleX(1);
+  opacity: 1;
+}
+
+.glm-icon[data-icon='calendar-x'] .glm-calendar-x-mark {
+  transform-box: view-box;
+  transform-origin: 12px 16px;
+  transform: scale(1);
+  opacity: 1;
+}
+
+@include glm-when-playing('calendar-x') {
+  .glm-calendar-x-body {
+    animation: glm-calendar-x-body-draw calc(var(--glm-duration) * 0.5) $calendar-x-ease var(--glm-delay) both;
+  }
+
+  .glm-calendar-x-hanger-left {
+    animation: glm-calendar-x-hanger-draw calc(var(--glm-duration) * 0.3) $calendar-x-ease var(--glm-delay) both;
+  }
+
+  .glm-calendar-x-hanger-right {
+    animation: glm-calendar-x-hanger-draw calc(var(--glm-duration) * 0.3) $calendar-x-ease calc(var(--glm-delay) + var(--glm-duration) * 0.08) both;
+  }
+
+  .glm-calendar-x-header {
+    animation: glm-calendar-x-header-draw calc(var(--glm-duration) * 0.4) $calendar-x-ease calc(var(--glm-delay) + var(--glm-duration) * 0.28) both;
+  }
+
+  .glm-calendar-x-mark-1 {
+    animation: glm-calendar-x-mark-pop calc(var(--glm-duration) * 0.4) $calendar-x-mark-ease calc(var(--glm-delay) + var(--glm-duration) * 0.42) both;
+  }
+
+  .glm-calendar-x-mark-2 {
+    animation: glm-calendar-x-mark-pop calc(var(--glm-duration) * 0.4) $calendar-x-mark-ease calc(var(--glm-delay) + var(--glm-duration) * 0.51) both;
+  }
+}
+
+@include glm-loop('calendar-x') {
+  .glm-calendar-x-body {
+    animation: glm-calendar-x-body-draw-loop calc(var(--glm-duration) * 1.4) $calendar-x-ease var(--glm-delay) infinite both;
+  }
+
+  .glm-calendar-x-hanger-left {
+    animation: glm-calendar-x-hanger-draw-loop calc(var(--glm-duration) * 1.4) $calendar-x-ease var(--glm-delay) infinite both;
+  }
+
+  .glm-calendar-x-hanger-right {
+    animation: glm-calendar-x-hanger-draw-loop calc(var(--glm-duration) * 1.4) $calendar-x-ease calc(var(--glm-delay) + var(--glm-duration) * 0.08) infinite both;
+  }
+
+  .glm-calendar-x-header {
+    animation: glm-calendar-x-header-draw-loop calc(var(--glm-duration) * 1.4) $calendar-x-ease calc(var(--glm-delay) + var(--glm-duration) * 0.28) infinite both;
+  }
+
+  .glm-calendar-x-mark-1 {
+    animation: glm-calendar-x-mark-pop-loop calc(var(--glm-duration) * 1.4) $calendar-x-mark-ease calc(var(--glm-delay) + var(--glm-duration) * 0.42) infinite both;
+  }
+
+  .glm-calendar-x-mark-2 {
+    animation: glm-calendar-x-mark-pop-loop calc(var(--glm-duration) * 1.4) $calendar-x-mark-ease calc(var(--glm-delay) + var(--glm-duration) * 0.51) infinite both;
+  }
+}

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

package/check/index.d.ts

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

package/check/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_CHECK, CircleCheckBigIconComponent, CircleCheckBigIconComponent as CircleCheckBigIcon, CircleCheckBigIconComponent as CheckIconComponent, } from './check';

package/check/src/check.animation.scss

@@ -0,0 +1,72 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-circle-check-scale {
+  0% {
+    transform: scale(1);
+  }
+  33.333% {
+    transform: scale(1.12);
+  }
+  66.667% {
+    transform: scale(0.96);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes glm-circle-check-ring {
+  0% {
+    stroke-dashoffset: 0.3;
+    opacity: 0.7;
+  }
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-circle-check-tick {
+  0% {
+    stroke-dashoffset: 1;
+    opacity: 1;
+  }
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+.glm-icon[data-icon='circle-check-big'] .glm-icon-svg svg {
+  transform-box: view-box;
+  transform-origin: center;
+}
+
+.glm-icon[data-icon='circle-check-big'] .glm-circle-check-ring,
+.glm-icon[data-icon='circle-check-big'] .glm-circle-check-tick {
+  fill: none;
+  stroke-dasharray: 1;
+  stroke-dashoffset: 0;
+}
+
+@include glm-when-playing('circle-check-big') {
+  .glm-icon-svg svg {
+    animation: glm-circle-check-scale calc(var(--glm-duration) * 0.45) ease-out var(--glm-delay) both;
+  }
+
+  .glm-circle-check-ring {
+    animation: glm-circle-check-ring calc(var(--glm-duration) * 0.35) ease-out var(--glm-delay) both;
+  }
+
+  .glm-circle-check-tick {
+    animation: glm-circle-check-tick calc(var(--glm-duration) * 0.3) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.12) both;
+  }
+}
+
+@include glm-loop('circle-check-big') {
+  .glm-icon-svg svg,
+  .glm-circle-check-ring,
+  .glm-circle-check-tick {
+    animation-iteration-count: infinite;
+  }
+}

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

package/chevron-down/index.d.ts

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

package/chevron-down/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_CHEVRON_DOWN, ChevronDownIconComponent, ChevronDownIconComponent as ChevronDownIcon, } from './chevron-down';

package/chevron-down/src/chevron-down.animation.scss

@@ -0,0 +1,100 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-chevron-down-arrow {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  20% {
+    transform: translateY(-1.5px);
+  }
+
+  55% {
+    transform: translateY(4px);
+  }
+}
+
+@keyframes glm-chevron-down-arrow-loop {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  10% {
+    transform: translateY(-1.5px);
+  }
+
+  27.5% {
+    transform: translateY(4px);
+  }
+
+  50% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes glm-chevron-down-trail {
+  0% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+
+  50% {
+    transform: translateY(4.5px);
+    opacity: 0.45;
+  }
+
+  100% {
+    transform: translateY(9px);
+    opacity: 0;
+  }
+}
+
+@keyframes glm-chevron-down-trail-loop {
+  0%,
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+
+  25% {
+    transform: translateY(4.5px);
+    opacity: 0.45;
+  }
+
+  50% {
+    transform: translateY(9px);
+    opacity: 0;
+  }
+}
+
+.glm-icon[data-icon='chevron-down'] .glm-chevron-down-arrow,
+.glm-icon[data-icon='chevron-down'] .glm-chevron-down-trail {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.glm-icon[data-icon='chevron-down'] .glm-chevron-down-trail {
+  opacity: 0;
+}
+
+@include glm-when-playing('chevron-down') {
+  .glm-chevron-down-arrow {
+    animation: glm-chevron-down-arrow var(--glm-duration) ease-in-out var(--glm-delay) both;
+  }
+
+  .glm-chevron-down-trail {
+    animation: glm-chevron-down-trail var(--glm-duration) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.08) both;
+  }
+}
+
+@include glm-loop('chevron-down') {
+  .glm-chevron-down-arrow {
+    animation: glm-chevron-down-arrow-loop calc(var(--glm-duration) * 2) ease-in-out var(--glm-delay) infinite both;
+  }
+
+  .glm-chevron-down-trail {
+    animation: glm-chevron-down-trail-loop calc(var(--glm-duration) * 2) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.08) infinite both;
+  }
+}

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

package/chevron-left/index.d.ts

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

package/chevron-left/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_CHEVRON_LEFT, ChevronLeftIconComponent, ChevronLeftIconComponent as ChevronLeftIcon, } from './chevron-left';

package/chevron-left/src/chevron-left.animation.scss

@@ -0,0 +1,100 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-chevron-left-arrow {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  20% {
+    transform: translateX(1.5px);
+  }
+
+  55% {
+    transform: translateX(-4px);
+  }
+}
+
+@keyframes glm-chevron-left-arrow-loop {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  10% {
+    transform: translateX(1.5px);
+  }
+
+  27.5% {
+    transform: translateX(-4px);
+  }
+
+  50% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes glm-chevron-left-trail {
+  0% {
+    transform: translateX(0);
+    opacity: 0;
+  }
+
+  50% {
+    transform: translateX(-4.5px);
+    opacity: 0.45;
+  }
+
+  100% {
+    transform: translateX(-9px);
+    opacity: 0;
+  }
+}
+
+@keyframes glm-chevron-left-trail-loop {
+  0%,
+  100% {
+    transform: translateX(0);
+    opacity: 0;
+  }
+
+  25% {
+    transform: translateX(-4.5px);
+    opacity: 0.45;
+  }
+
+  50% {
+    transform: translateX(-9px);
+    opacity: 0;
+  }
+}
+
+.glm-icon[data-icon='chevron-left'] .glm-chevron-left-arrow,
+.glm-icon[data-icon='chevron-left'] .glm-chevron-left-trail {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.glm-icon[data-icon='chevron-left'] .glm-chevron-left-trail {
+  opacity: 0;
+}
+
+@include glm-when-playing('chevron-left') {
+  .glm-chevron-left-arrow {
+    animation: glm-chevron-left-arrow var(--glm-duration) ease-in-out var(--glm-delay) both;
+  }
+
+  .glm-chevron-left-trail {
+    animation: glm-chevron-left-trail var(--glm-duration) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.08) both;
+  }
+}
+
+@include glm-loop('chevron-left') {
+  .glm-chevron-left-arrow {
+    animation: glm-chevron-left-arrow-loop calc(var(--glm-duration) * 2) ease-in-out var(--glm-delay) infinite both;
+  }
+
+  .glm-chevron-left-trail {
+    animation: glm-chevron-left-trail-loop calc(var(--glm-duration) * 2) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.08) infinite both;
+  }
+}

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

package/chevron-right/index.d.ts

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

package/chevron-right/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_CHEVRON_RIGHT, ChevronRightIconComponent, ChevronRightIconComponent as ChevronRightIcon, } from './chevron-right';

package/chevron-right/src/chevron-right.animation.scss

@@ -0,0 +1,100 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-chevron-right-arrow {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  20% {
+    transform: translateX(-1.5px);
+  }
+
+  55% {
+    transform: translateX(4px);
+  }
+}
+
+@keyframes glm-chevron-right-arrow-loop {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  10% {
+    transform: translateX(-1.5px);
+  }
+
+  27.5% {
+    transform: translateX(4px);
+  }
+
+  50% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes glm-chevron-right-trail {
+  0% {
+    transform: translateX(0);
+    opacity: 0;
+  }
+
+  50% {
+    transform: translateX(4.5px);
+    opacity: 0.45;
+  }
+
+  100% {
+    transform: translateX(9px);
+    opacity: 0;
+  }
+}
+
+@keyframes glm-chevron-right-trail-loop {
+  0%,
+  100% {
+    transform: translateX(0);
+    opacity: 0;
+  }
+
+  25% {
+    transform: translateX(4.5px);
+    opacity: 0.45;
+  }
+
+  50% {
+    transform: translateX(9px);
+    opacity: 0;
+  }
+}
+
+.glm-icon[data-icon='chevron-right'] .glm-chevron-right-arrow,
+.glm-icon[data-icon='chevron-right'] .glm-chevron-right-trail {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.glm-icon[data-icon='chevron-right'] .glm-chevron-right-trail {
+  opacity: 0;
+}
+
+@include glm-when-playing('chevron-right') {
+  .glm-chevron-right-arrow {
+    animation: glm-chevron-right-arrow var(--glm-duration) ease-in-out var(--glm-delay) both;
+  }
+
+  .glm-chevron-right-trail {
+    animation: glm-chevron-right-trail var(--glm-duration) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.08) both;
+  }
+}
+
+@include glm-loop('chevron-right') {
+  .glm-chevron-right-arrow {
+    animation: glm-chevron-right-arrow-loop calc(var(--glm-duration) * 2) ease-in-out var(--glm-delay) infinite both;
+  }
+
+  .glm-chevron-right-trail {
+    animation: glm-chevron-right-trail-loop calc(var(--glm-duration) * 2) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.08) infinite both;
+  }
+}

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

package/chevron-up/index.d.ts

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

package/chevron-up/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_CHEVRON_UP, ChevronUpIconComponent, ChevronUpIconComponent as ChevronUpIcon, } from './chevron-up';