@glamera/animated-icons 0.1.0

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

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

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

package/circle-check/index.d.ts

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

package/circle-check/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_CIRCLE_CHECK, CircleCheckIconComponent, CircleCheckIconComponent as CircleCheckIcon, } from './circle-check';

package/circle-check/src/circle-check.animation.scss

@@ -0,0 +1,153 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-circle-check-icon-scale {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.08);
+  }
+
+  75% {
+    transform: scale(0.96);
+  }
+}
+
+@keyframes glm-circle-check-icon-scale-loop {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  25% {
+    transform: scale(1.08);
+  }
+
+  37.5% {
+    transform: scale(0.96);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+}
+
+@keyframes glm-circle-check-icon-ring {
+  0% {
+    stroke-dashoffset: 1;
+    opacity: 0.2;
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-circle-check-icon-ring-loop {
+  0%,
+  100% {
+    stroke-dashoffset: 1;
+    opacity: 0.2;
+  }
+
+  50% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-circle-check-icon-mark {
+  0% {
+    stroke-dashoffset: 1;
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  70% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+    transform: scale(1.12);
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes glm-circle-check-icon-mark-loop {
+  0%,
+  100% {
+    stroke-dashoffset: 1;
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  35% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+    transform: scale(1.12);
+  }
+
+  50% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.glm-icon[data-icon='circle-check'] .glm-icon-svg svg {
+  transform-box: view-box;
+  transform-origin: center;
+}
+
+.glm-icon[data-icon='circle-check'] .glm-circle-check-icon-ring {
+  fill: none;
+  stroke-dasharray: 1;
+  stroke-dashoffset: 0;
+  transform-box: view-box;
+  transform-origin: 12px 12px;
+  transform: rotate(-90deg);
+  opacity: 1;
+}
+
+.glm-icon[data-icon='circle-check'] .glm-circle-check-icon-mark {
+  fill: none;
+  stroke-dasharray: 1;
+  stroke-dashoffset: 0;
+  transform-box: view-box;
+  transform-origin: 12px 12px;
+  opacity: 1;
+}
+
+@include glm-when-playing('circle-check') {
+  .glm-icon-svg svg {
+    animation: glm-circle-check-icon-scale calc(var(--glm-duration) * 0.5) ease-out var(--glm-delay) both;
+  }
+
+  .glm-circle-check-icon-ring {
+    animation: glm-circle-check-icon-ring calc(var(--glm-duration) * 0.5) ease-in-out var(--glm-delay) both;
+  }
+
+  .glm-circle-check-icon-mark {
+    animation: glm-circle-check-icon-mark calc(var(--glm-duration) * 0.4) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.32) both;
+  }
+}
+
+@include glm-loop('circle-check') {
+  .glm-icon-svg svg {
+    animation: glm-circle-check-icon-scale-loop calc(var(--glm-duration) * 1.2) ease-out var(--glm-delay) infinite both;
+  }
+
+  .glm-circle-check-icon-ring {
+    animation: glm-circle-check-icon-ring-loop calc(var(--glm-duration) * 1.2) ease-in-out var(--glm-delay) infinite both;
+  }
+
+  .glm-circle-check-icon-mark {
+    animation: glm-circle-check-icon-mark-loop calc(var(--glm-duration) * 1.2) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.32) infinite both;
+  }
+}

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

package/circle-chevron-down/index.d.ts

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

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

@@ -0,0 +1 @@
+export { GLM_CIRCLE_CHEVRON_DOWN, CircleChevronDownIconComponent, CircleChevronDownIconComponent as CircleChevronDownIcon, } from './circle-chevron-down';

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

@@ -0,0 +1,99 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-circle-chevron-down-circle {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  25% {
+    transform: scale(1.1);
+  }
+
+  50% {
+    transform: scale(0.9);
+  }
+
+  75% {
+    transform: scale(1.05);
+  }
+}
+
+@keyframes glm-circle-chevron-down-circle-loop {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  12.5% {
+    transform: scale(1.1);
+  }
+
+  25% {
+    transform: scale(0.9);
+  }
+
+  37.5% {
+    transform: scale(1.05);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+}
+
+@keyframes glm-circle-chevron-down-arrow {
+  0% {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes glm-circle-chevron-down-arrow-loop {
+  0%,
+  100% {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+
+  25%,
+  50% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.glm-icon[data-icon='circle-chevron-down'] .glm-circle-chevron-down-circle {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.glm-icon[data-icon='circle-chevron-down'] .glm-circle-chevron-down-arrow {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+@include glm-when-playing('circle-chevron-down') {
+  .glm-circle-chevron-down-circle {
+    animation: glm-circle-chevron-down-circle calc(var(--glm-duration) * 1.2) ease-in-out var(--glm-delay) both;
+  }
+
+  .glm-circle-chevron-down-arrow {
+    animation: glm-circle-chevron-down-arrow calc(var(--glm-duration) * 0.6) ease-out var(--glm-delay) both;
+  }
+}
+
+@include glm-loop('circle-chevron-down') {
+  .glm-circle-chevron-down-circle {
+    animation: glm-circle-chevron-down-circle-loop calc(var(--glm-duration) * 2.4) ease-in-out var(--glm-delay) infinite both;
+  }
+
+  .glm-circle-chevron-down-arrow {
+    animation: glm-circle-chevron-down-arrow-loop calc(var(--glm-duration) * 1.2) ease-out var(--glm-delay) infinite both;
+  }
+}

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

package/circle-chevron-left/index.d.ts

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

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

@@ -0,0 +1 @@
+export { GLM_CIRCLE_CHEVRON_LEFT, CircleChevronLeftIconComponent, CircleChevronLeftIconComponent as CircleChevronLeftIcon, } from './circle-chevron-left';

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

@@ -0,0 +1,99 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-circle-chevron-left-circle {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  25% {
+    transform: scale(1.1);
+  }
+
+  50% {
+    transform: scale(0.9);
+  }
+
+  75% {
+    transform: scale(1.05);
+  }
+}
+
+@keyframes glm-circle-chevron-left-circle-loop {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  12.5% {
+    transform: scale(1.1);
+  }
+
+  25% {
+    transform: scale(0.9);
+  }
+
+  37.5% {
+    transform: scale(1.05);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+}
+
+@keyframes glm-circle-chevron-left-arrow {
+  0% {
+    transform: translateX(10px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes glm-circle-chevron-left-arrow-loop {
+  0%,
+  100% {
+    transform: translateX(10px);
+    opacity: 0;
+  }
+
+  25%,
+  50% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.glm-icon[data-icon='circle-chevron-left'] .glm-circle-chevron-left-circle {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.glm-icon[data-icon='circle-chevron-left'] .glm-circle-chevron-left-arrow {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+@include glm-when-playing('circle-chevron-left') {
+  .glm-circle-chevron-left-circle {
+    animation: glm-circle-chevron-left-circle calc(var(--glm-duration) * 1.2) ease-in-out var(--glm-delay) both;
+  }
+
+  .glm-circle-chevron-left-arrow {
+    animation: glm-circle-chevron-left-arrow calc(var(--glm-duration) * 0.6) ease-out var(--glm-delay) both;
+  }
+}
+
+@include glm-loop('circle-chevron-left') {
+  .glm-circle-chevron-left-circle {
+    animation: glm-circle-chevron-left-circle-loop calc(var(--glm-duration) * 2.4) ease-in-out var(--glm-delay) infinite both;
+  }
+
+  .glm-circle-chevron-left-arrow {
+    animation: glm-circle-chevron-left-arrow-loop calc(var(--glm-duration) * 1.2) ease-out var(--glm-delay) infinite both;
+  }
+}

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

package/circle-chevron-right/index.d.ts

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

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

@@ -0,0 +1 @@
+export { GLM_CIRCLE_CHEVRON_RIGHT, CircleChevronRightIconComponent, CircleChevronRightIconComponent as CircleChevronRightIcon, } from './circle-chevron-right';

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

@@ -0,0 +1,99 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-circle-chevron-right-circle {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  25% {
+    transform: scale(1.1);
+  }
+
+  50% {
+    transform: scale(0.9);
+  }
+
+  75% {
+    transform: scale(1.05);
+  }
+}
+
+@keyframes glm-circle-chevron-right-circle-loop {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  12.5% {
+    transform: scale(1.1);
+  }
+
+  25% {
+    transform: scale(0.9);
+  }
+
+  37.5% {
+    transform: scale(1.05);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+}
+
+@keyframes glm-circle-chevron-right-arrow {
+  0% {
+    transform: translateX(-10px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes glm-circle-chevron-right-arrow-loop {
+  0%,
+  100% {
+    transform: translateX(-10px);
+    opacity: 0;
+  }
+
+  25%,
+  50% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.glm-icon[data-icon='circle-chevron-right'] .glm-circle-chevron-right-circle {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.glm-icon[data-icon='circle-chevron-right'] .glm-circle-chevron-right-arrow {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+@include glm-when-playing('circle-chevron-right') {
+  .glm-circle-chevron-right-circle {
+    animation: glm-circle-chevron-right-circle calc(var(--glm-duration) * 1.2) ease-in-out var(--glm-delay) both;
+  }
+
+  .glm-circle-chevron-right-arrow {
+    animation: glm-circle-chevron-right-arrow calc(var(--glm-duration) * 0.6) ease-out var(--glm-delay) both;
+  }
+}
+
+@include glm-loop('circle-chevron-right') {
+  .glm-circle-chevron-right-circle {
+    animation: glm-circle-chevron-right-circle-loop calc(var(--glm-duration) * 2.4) ease-in-out var(--glm-delay) infinite both;
+  }
+
+  .glm-circle-chevron-right-arrow {
+    animation: glm-circle-chevron-right-arrow-loop calc(var(--glm-duration) * 1.2) ease-out var(--glm-delay) infinite both;
+  }
+}

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

package/circle-chevron-up/index.d.ts

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

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

@@ -0,0 +1 @@
+export { GLM_CIRCLE_CHEVRON_UP, CircleChevronUpIconComponent, CircleChevronUpIconComponent as CircleChevronUpIcon, } from './circle-chevron-up';