@glamera/animated-icons 0.1.0

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

@@ -0,0 +1,186 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-user-x-body-draw {
+  0% {
+    stroke-dashoffset: 40;
+    opacity: 0.3;
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-user-x-body-draw-loop {
+  0%,
+  100% {
+    stroke-dashoffset: 40;
+    opacity: 0.3;
+  }
+
+  50% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-user-x-head-pop {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+
+  60% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes glm-user-x-head-pop-loop {
+  0%,
+  100% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+
+  30% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes glm-user-x-cross-shake {
+  0% {
+    transform: scale(1) rotate(0deg);
+    opacity: 0.3;
+  }
+
+  33% {
+    transform: scale(1.15) rotate(-10deg);
+    opacity: 0.65;
+  }
+
+  66% {
+    transform: scale(1.15) rotate(10deg);
+    opacity: 0.85;
+  }
+
+  100% {
+    transform: scale(1) rotate(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes glm-user-x-cross-shake-loop {
+  0%,
+  100% {
+    transform: scale(1) rotate(0deg);
+    opacity: 0.3;
+  }
+
+  16% {
+    transform: scale(1.3) rotate(-10deg);
+    opacity: 1;
+  }
+
+  33% {
+    transform: scale(1.3) rotate(10deg);
+    opacity: 1;
+  }
+
+  50% {
+    transform: scale(1) rotate(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes glm-user-x-cross-line-draw {
+  0% {
+    stroke-dashoffset: 20;
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes glm-user-x-cross-line-draw-loop {
+  0%,
+  100% {
+    stroke-dashoffset: 20;
+  }
+
+  50% {
+    stroke-dashoffset: 0;
+  }
+}
+
+.glm-icon[data-icon='user-x'] .glm-user-x-body {
+  fill: none;
+  stroke-dasharray: 40;
+  stroke-dashoffset: 0;
+  opacity: 1;
+}
+
+.glm-icon[data-icon='user-x'] .glm-user-x-head {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.glm-icon[data-icon='user-x'] .glm-user-x-cross {
+  transform-box: fill-box;
+  transform-origin: center;
+  opacity: 1;
+}
+
+.glm-icon[data-icon='user-x'] .glm-user-x-cross-line {
+  stroke-dasharray: 20;
+  stroke-dashoffset: 0;
+}
+
+@include glm-when-playing('user-x') {
+  .glm-user-x-body {
+    animation: glm-user-x-body-draw calc(var(--glm-duration) * 0.7) ease-in-out var(--glm-delay) both;
+  }
+
+  .glm-user-x-head {
+    animation: glm-user-x-head-pop calc(var(--glm-duration) * 0.6) ease-out var(--glm-delay) both;
+  }
+
+  .glm-user-x-cross {
+    animation: glm-user-x-cross-shake calc(var(--glm-duration) * 0.6) ease-in-out var(--glm-delay) both;
+  }
+
+  .glm-user-x-cross-line {
+    animation: glm-user-x-cross-line-draw calc(var(--glm-duration) * 0.5) ease-in-out var(--glm-delay) both;
+  }
+}
+
+@include glm-loop('user-x') {
+  .glm-user-x-body {
+    animation: glm-user-x-body-draw-loop calc(var(--glm-duration) * 1.4) ease-in-out var(--glm-delay) infinite both;
+  }
+
+  .glm-user-x-head {
+    animation: glm-user-x-head-pop-loop calc(var(--glm-duration) * 1.4) ease-out var(--glm-delay) infinite both;
+  }
+
+  .glm-user-x-cross {
+    animation: glm-user-x-cross-shake-loop calc(var(--glm-duration) * 1.4) ease-in-out var(--glm-delay) infinite both;
+  }
+
+  .glm-user-x-cross-line {
+    animation: glm-user-x-cross-line-draw-loop calc(var(--glm-duration) * 1.4) ease-in-out var(--glm-delay) infinite both;
+  }
+}

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

package/users/index.d.ts

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

package/users/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_USERS, UsersIconComponent, UsersIconComponent as UsersIcon, } from './users';

package/users/src/users.animation.scss

@@ -0,0 +1,133 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-users-body-draw {
+  0% {
+    stroke-dashoffset: 50;
+    opacity: 0.3;
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-users-body-draw-loop {
+  0%,
+  100% {
+    stroke-dashoffset: 50;
+    opacity: 0.3;
+  }
+
+  50% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-users-side-arc-draw {
+  0% {
+    stroke-dashoffset: 40;
+    opacity: 0.2;
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-users-side-arc-draw-loop {
+  0%,
+  100% {
+    stroke-dashoffset: 40;
+    opacity: 0.2;
+  }
+
+  50% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-users-head-pop {
+  0% {
+    transform: scale(0.6);
+    opacity: 0;
+  }
+
+  60% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes glm-users-head-pop-loop {
+  0%,
+  100% {
+    transform: scale(0.6);
+    opacity: 0;
+  }
+
+  30% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.glm-icon[data-icon='users'] .glm-users-body {
+  fill: none;
+  stroke-dasharray: 50;
+  stroke-dashoffset: 0;
+  opacity: 1;
+}
+
+.glm-icon[data-icon='users'] .glm-users-side-arc {
+  fill: none;
+  stroke-dasharray: 40;
+  stroke-dashoffset: 0;
+  opacity: 0.8;
+}
+
+.glm-icon[data-icon='users'] .glm-users-head {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+@include glm-when-playing('users') {
+  .glm-users-body {
+    animation: glm-users-body-draw calc(var(--glm-duration) * 0.7) ease-in-out var(--glm-delay) both;
+  }
+
+  .glm-users-head {
+    animation: glm-users-head-pop calc(var(--glm-duration) * 0.6) ease-out var(--glm-delay) both;
+  }
+
+  .glm-users-side-arc {
+    animation: glm-users-side-arc-draw calc(var(--glm-duration) * 0.7) ease-in-out calc(var(--glm-delay) + 300ms) both;
+  }
+}
+
+@include glm-loop('users') {
+  .glm-users-body {
+    animation: glm-users-body-draw-loop calc(var(--glm-duration) * 1.4) ease-in-out var(--glm-delay) infinite both;
+  }
+
+  .glm-users-head {
+    animation: glm-users-head-pop-loop calc(var(--glm-duration) * 1.4) ease-out var(--glm-delay) infinite both;
+  }
+
+  .glm-users-side-arc {
+    animation: glm-users-side-arc-draw-loop calc(var(--glm-duration) * 1.4) ease-in-out calc(var(--glm-delay) + 300ms) infinite both;
+  }
+}

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

package/x/index.d.ts

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

package/x/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_X, XIconComponent, XIconComponent as XIcon, } from './x';

package/x/src/x.animation.scss

@@ -0,0 +1,112 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-x-svg-shake {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+
+  33.333% {
+    transform: rotate(15deg) scale(1.067);
+  }
+
+  50% {
+    transform: rotate(0deg) scale(1.1);
+  }
+
+  66.667% {
+    transform: rotate(-15deg) scale(1.067);
+  }
+
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+}
+
+@keyframes glm-x-line-draw {
+  0% {
+    stroke-dashoffset: 1;
+    opacity: 0;
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-x-svg-shake-loop {
+  0%,
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+
+  16.667% {
+    transform: rotate(15deg) scale(1.067);
+  }
+
+  33.333% {
+    transform: rotate(0deg) scale(1.1);
+  }
+
+  50% {
+    transform: rotate(-15deg) scale(1.067);
+  }
+
+  66.667% {
+    transform: rotate(0deg) scale(1);
+  }
+}
+
+@keyframes glm-x-line-draw-loop {
+  0%,
+  100% {
+    stroke-dashoffset: 1;
+    opacity: 0;
+  }
+
+  40%,
+  60% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+.glm-icon[data-icon='x'] .glm-icon-svg svg {
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: transform calc(var(--glm-duration) * 0.3) ease;
+}
+
+.glm-icon[data-icon='x'] .glm-x-line {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 0;
+  opacity: 1;
+}
+
+@include glm-when-playing('x') {
+  .glm-icon-svg svg {
+    animation: glm-x-svg-shake calc(var(--glm-duration) * 0.6) ease-in-out var(--glm-delay) both;
+  }
+
+  .glm-x-line {
+    animation: glm-x-line-draw calc(var(--glm-duration) * 0.6) ease-in-out var(--glm-delay) both;
+  }
+
+  .glm-x-line-2 {
+    animation: glm-x-line-draw calc(var(--glm-duration) * 0.6) ease-in-out calc(var(--glm-delay) + var(--glm-duration) * 0.2) both;
+  }
+}
+
+@include glm-loop('x') {
+  .glm-icon-svg svg {
+    animation: glm-x-svg-shake-loop calc(var(--glm-duration) * 1.4) ease-in-out var(--glm-delay) infinite both;
+  }
+
+  .glm-x-line {
+    animation: glm-x-line-draw-loop calc(var(--glm-duration) * 1.4) ease-in-out var(--glm-delay) infinite both;
+  }
+
+  .glm-x-line-2 {
+    animation: glm-x-line-draw-loop calc(var(--glm-duration) * 1.4) ease-in-out calc(var(--glm-delay) + var(--glm-duration) * 0.2) infinite both;
+  }
+}

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

package/x-circle/index.d.ts

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

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

@@ -0,0 +1 @@
+export { GLM_X_CIRCLE, XCircleIconComponent, XCircleIconComponent as XCircleIcon, } from './x-circle';

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

@@ -0,0 +1,58 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-x-circle-draw {
+  0% {
+    stroke-dashoffset: 1;
+    opacity: 0;
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-x-circle-draw-loop {
+  0%,
+  100% {
+    stroke-dashoffset: 1;
+    opacity: 0;
+  }
+
+  40%,
+  60% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+.glm-icon[data-icon='x-circle'] .glm-icon-svg svg {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.glm-icon[data-icon='x-circle'] .glm-x-circle-line {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 0;
+  opacity: 1;
+}
+
+@include glm-when-playing('x-circle') {
+  .glm-x-circle-line {
+    animation: glm-x-circle-draw calc(var(--glm-duration) * 0.4) ease-out var(--glm-delay) forwards;
+  }
+
+  .glm-x-circle-line-2 {
+    animation: glm-x-circle-draw calc(var(--glm-duration) * 0.4) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.2) both;
+  }
+}
+
+@include glm-loop('x-circle') {
+  .glm-x-circle-line {
+    animation: glm-x-circle-draw-loop calc(var(--glm-duration) * 1.2) ease-out var(--glm-delay) infinite both;
+  }
+
+  .glm-x-circle-line-2 {
+    animation: glm-x-circle-draw-loop calc(var(--glm-duration) * 1.2) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.2) infinite both;
+  }
+}

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