feat(pin): add stream animation

projects/kit/src/components/avatar/avatar.stories.ts

@@ -28,4 +28,4 @@ export const Text: Story = {
       </div> `,
   }),
 };
-export const WithBadge: Story = OnElement;
+export const WithBadge = OnElement;

projects/kit/src/components/badge/badge.stories.ts

@@ -49,4 +49,4 @@ export const Attribute: Story = {
   }),
 };
 
-export const Avatar: Story = OnElement;
+export const Avatar = OnElement;

projects/kit/src/components/pin/pin.component.scss

@@ -1,7 +1,29 @@
-zen-pin {
+zen-pin,
+zen-pin.stream::before {
   display: block;
-  height: 10px;
-  width: 10px;
+  height: 8px;
+  width: 8px;
   border-radius: 50%;
   background-color: #6b7280;
 }
+
+zen-pin {
+  position: relative;
+
+  &.stream::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    animation: stream 1s ease-in-out infinite;
+  }
+}
+
+@keyframes stream {
+  75%,
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}

projects/kit/src/components/pin/pin.component.ts

@@ -1,9 +1,14 @@
 import {
+  booleanAttribute,
   ChangeDetectionStrategy,
   Component,
+  HostBinding,
+  input,
   ViewEncapsulation,
 } from '@angular/core';
 
+import type { BooleanAttribute } from '../../types';
+
 /**
  * The ZenPinComponent represents a simple visual pin with a circular shape.
  *
@@ -24,4 +29,16 @@ import {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ZenPinComponent {}
+export class ZenPinComponent {
+  /**
+   * Displays waving stream animation
+   */
+  readonly stream = input<boolean, BooleanAttribute>(false, {
+    transform: booleanAttribute,
+  });
+
+  @HostBinding('class.stream')
+  get classStream() {
+    return this.stream();
+  }
+}

projects/kit/src/components/pin/pin.stories.ts

@@ -8,7 +8,16 @@ export default {
   title: 'Components/Pin',
   component: ZenPinComponent,
   tags: ['autodocs'],
-  render: args => ({ props: { ...args }, template: `<zen-pin />` }),
+  argTypes: {
+    stream: { control: 'boolean' },
+  },
+  args: {
+    stream: false,
+  },
+  render: args => ({
+    props: { ...args },
+    template: `<zen-pin ${args.stream ? 'stream' : ''}/>`,
+  }),
 } satisfies Meta<ZenPinComponent>;
 
 type Story = StoryObj<ZenPinComponent>;
@@ -23,17 +32,36 @@ export const OnElement: Story = {
   ],
   render: () => ({
     template: `
-        <div style="display: flex; gap: 1rem; --zen-badge-offset: -4px">
-          <zen-badge>
-              <zen-pin topRight style="background-color: #2a912a; border: 2px solid white"/>
-              <zen-avatar src="https://picsum.photos/32" />
-          </zen-badge>
+      <div style="display: flex; gap: 1rem; --zen-badge-offset: -4px">
+        <zen-badge>
+          <zen-pin topRight style="background-color: #2a912a; border: 2px solid white"/>
+          <zen-avatar src="https://picsum.photos/32" />
+        </zen-badge>
+
+        <zen-badge>
+          <zen-pin bottomRight style="background-color: #c42929; border: 2px solid white"/>
+          <zen-avatar style="color:white">AB</zen-avatar>
+        </zen-badge>
+      </div>
+     `,
+  }),
+};
 
-          <zen-badge>
-              <zen-pin bottomRight style="background-color: #c42929; border: 2px solid white"/>
-              <zen-avatar style="color:white">AB</zen-avatar>
-          </zen-badge>
-        </div>
+export const StreamAttribute: Story = {
+  decorators: [
+    moduleMetadata({
+      imports: [ZenPinComponent, ZenAvatarComponent, ZenBadgeComponent],
+    }),
+  ],
+  args: {
+    stream: true,
+  },
+  render: args => ({
+    template: `
+        <zen-badge style="--zen-badge-offset: -4px">
+          <zen-pin ${args.stream ? 'stream' : ''} topRight style="border: 2px solid white"/>
+          <zen-avatar src="https://github.com/Kordrad.png" />
+        </zen-badge>
      `,
   }),
 };

projects/kit/src/types/booleanAttribute.type.ts

@@ -0,0 +1,11 @@
+/**
+ * Use it when you use `booleanAttribute` for transform in angular input
+ * @example
+ * ```typescript
+ * input<boolean, BooleanAttribute>(false, {
+ *    transform: booleanAttribute
+ * });
+ * ```
+ */
+
+export type BooleanAttribute = boolean | 'true' | 'false' | '';

projects/kit/src/types/index.ts

@@ -0,0 +1 @@
+export * from './booleanAttribute.type';