@w2p-ui/kit 0.1.10 → 0.1.14

package/fesm2022/w2p-ui-kit-components-avatar.mjs

@@ -0,0 +1,164 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Renderer2, input, output, signal, effect, Directive, computed, Component } from '@angular/core';
+
+const AvatarColors = [
+    'var(--Brand-Primary-Default, #F3400D)',
+    'var(--System-Information-Default, #697DFF)',
+    'var(--System-Attention-Default, #F99B00)',
+    'var(--System-Success-Default, #12CA55)',
+];
+
+class ProgressiveImageDirective {
+    el = inject((ElementRef));
+    renderer = inject(Renderer2);
+    placeholder = input.required(...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    srcFull = input.required(...(ngDevMode ? [{ debugName: "srcFull" }] : /* istanbul ignore next */ []));
+    loadError = output();
+    loaded = signal(false, ...(ngDevMode ? [{ debugName: "loaded" }] : /* istanbul ignore next */ []));
+    observer;
+    abortController;
+    static cache = new Set();
+    static errorCache = new Set();
+    constructor() {
+        effect(() => {
+            const img = this.el.nativeElement;
+            const preview = this.placeholder();
+            const full = this.srcFull();
+            if (!preview || !full)
+                return;
+            // сброс состояния
+            this.abortCurrent();
+            this.loaded.set(false);
+            this.observer?.disconnect();
+            if (ProgressiveImageDirective.errorCache.has(full)) {
+                this.loadError.emit();
+                return;
+            }
+            // ставим placeholder
+            this.renderer.setAttribute(img, 'src', preview);
+            this.renderer.setStyle(img, 'transition', 'opacity 200ms ease');
+            this.renderer.setStyle(img, 'opacity', '0.7');
+            this.renderer.setStyle(img, 'filter', 'blur(3px)');
+            // если full уже в кеше — сразу ставим
+            if (ProgressiveImageDirective.cache.has(full)) {
+                this.setFullImage(full);
+                return;
+            }
+            // если уже видим — грузим сразу
+            if (this.isElementInViewport(img)) {
+                this.loadFullImage();
+            }
+            else {
+                this.createObserver(img);
+            }
+        });
+    }
+    isElementInViewport(el) {
+        const rect = el.getBoundingClientRect();
+        return (rect.top < window.innerHeight &&
+            rect.bottom > 0 &&
+            rect.left < window.innerWidth &&
+            rect.right > 0);
+    }
+    createObserver(img) {
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this.loadFullImage();
+                    this.observer?.disconnect();
+                }
+            });
+        });
+        this.observer.observe(img);
+    }
+    loadFullImage() {
+        const full = this.srcFull();
+        if (!full)
+            return;
+        this.abortCurrent();
+        this.abortController = new AbortController();
+        const signal = this.abortController.signal;
+        const fullImage = new Image();
+        fullImage.src = full;
+        fullImage.onload = () => {
+            ProgressiveImageDirective.cache.add(full);
+            this.setFullImage(full);
+        };
+        fullImage.onerror = (e) => {
+            if (signal.aborted)
+                return;
+            ProgressiveImageDirective.errorCache.add(full);
+            this.loadError.emit();
+        };
+        this.abortController.signal.addEventListener('abort', () => {
+            fullImage.src = '';
+        });
+    }
+    setFullImage(full) {
+        const img = this.el.nativeElement;
+        this.renderer.setAttribute(img, 'src', full);
+        this.renderer.setStyle(img, 'opacity', '1');
+        this.renderer.setStyle(img, 'filter', 'none');
+        this.loaded.set(true);
+    }
+    abortCurrent() {
+        this.abortController?.abort();
+        this.abortController = undefined;
+    }
+    ngOnDestroy() {
+        this.abortCurrent();
+        this.observer?.disconnect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ProgressiveImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.18", type: ProgressiveImageDirective, isStandalone: true, selector: "img[progressiveImage]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, srcFull: { classPropertyName: "srcFull", publicName: "srcFull", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { loadError: "loadError" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ProgressiveImageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'img[progressiveImage]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], srcFull: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcFull", required: true }] }], loadError: [{ type: i0.Output, args: ["loadError"] }] } });
+
+class W2pAvatar {
+    userId = input(...(ngDevMode ? [undefined, { debugName: "userId" }] : /* istanbul ignore next */ []));
+    userName = input(...(ngDevMode ? [undefined, { debugName: "userName" }] : /* istanbul ignore next */ []));
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    srcFull = input(undefined, ...(ngDevMode ? [{ debugName: "srcFull" }] : /* istanbul ignore next */ []));
+    imageLoadFailed = signal(false, ...(ngDevMode ? [{ debugName: "imageLoadFailed" }] : /* istanbul ignore next */ []));
+    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    // получаем цвет аватара по id
+    color = computed(() => {
+        if (this.placeholder() && this.srcFull() && !this.imageLoadFailed())
+            return '';
+        const id = this.userId();
+        if (!id)
+            return AvatarColors[0];
+        return AvatarColors[id % AvatarColors.length];
+    }, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    latter = computed(() => {
+        const name = this.userName();
+        if (!name)
+            return 'A';
+        return name[0].toUpperCase();
+    }, ...(ngDevMode ? [{ debugName: "latter" }] : /* istanbul ignore next */ []));
+    loaded() {
+        this.visible.set(true);
+    }
+    onImageError() {
+        this.imageLoadFailed.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: W2pAvatar, isStandalone: true, selector: "w2p-avatar", inputs: { userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, srcFull: { classPropertyName: "srcFull", publicName: "srcFull", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"avatar\" [style.--w2p-ui-avatar-bg-color]=\"color()\">\n  @if (placeholder() && srcFull() && !imageLoadFailed()) {\n    <img\n      progressiveImage\n      (loadError)=\"onImageError()\"\n      [placeholder]=\"placeholder()!\"\n      [srcFull]=\"srcFull()!\"\n    />\n  } @else {\n    <p>{{ latter() }}</p>\n  }\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-avatar-size: 4rem}.avatar{display:flex;width:var(--w2p-ui-avatar-size);height:var(--w2p-ui-avatar-size);justify-content:center;align-items:center;border-radius:50%;background:var(--w2p-ui-avatar-bg-color)}.avatar p{color:var(--Base-Inverse-Default, #fff);text-align:center;font-size:calc(var(--w2p-ui-avatar-size) * .55);font-family:SF Pro Display;font-style:normal;font-weight:500;line-height:1}.avatar img{width:100%;height:100%;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: ProgressiveImageDirective, selector: "img[progressiveImage]", inputs: ["placeholder", "srcFull"], outputs: ["loadError"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pAvatar, decorators: [{
+            type: Component,
+            args: [{ selector: 'w2p-avatar', imports: [ProgressiveImageDirective], template: "<div class=\"avatar\" [style.--w2p-ui-avatar-bg-color]=\"color()\">\n  @if (placeholder() && srcFull() && !imageLoadFailed()) {\n    <img\n      progressiveImage\n      (loadError)=\"onImageError()\"\n      [placeholder]=\"placeholder()!\"\n      [srcFull]=\"srcFull()!\"\n    />\n  } @else {\n    <p>{{ latter() }}</p>\n  }\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-avatar-size: 4rem}.avatar{display:flex;width:var(--w2p-ui-avatar-size);height:var(--w2p-ui-avatar-size);justify-content:center;align-items:center;border-radius:50%;background:var(--w2p-ui-avatar-bg-color)}.avatar p{color:var(--Base-Inverse-Default, #fff);text-align:center;font-size:calc(var(--w2p-ui-avatar-size) * .55);font-family:SF Pro Display;font-style:normal;font-weight:500;line-height:1}.avatar img{width:100%;height:100%;border-radius:50%}\n"] }]
+        }], propDecorators: { userId: [{ type: i0.Input, args: [{ isSignal: true, alias: "userId", required: false }] }], userName: [{ type: i0.Input, args: [{ isSignal: true, alias: "userName", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], srcFull: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcFull", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ProgressiveImageDirective, W2pAvatar };
+//# sourceMappingURL=w2p-ui-kit-components-avatar.mjs.map

package/fesm2022/w2p-ui-kit-components-avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"w2p-ui-kit-components-avatar.mjs","sources":["../../../projects/kit/components/avatar/avatar.colors.ts","../../../projects/kit/components/avatar/progressive-image.directive.ts","../../../projects/kit/components/avatar/avatar.ts","../../../projects/kit/components/avatar/avatar.html","../../../projects/kit/components/avatar/w2p-ui-kit-components-avatar.ts"],"sourcesContent":["export const AvatarColors = [\n  'var(--Brand-Primary-Default, #F3400D)',\n  'var(--System-Information-Default, #697DFF)',\n  'var(--System-Attention-Default, #F99B00)',\n  'var(--System-Success-Default, #12CA55)',\n];\n","import {\n  Directive,\n  ElementRef,\n  Renderer2,\n  effect,\n  inject,\n  input,\n  signal,\n  OnDestroy,\n  output,\n} from '@angular/core';\n\n@Directive({\n  selector: 'img[progressiveImage]',\n  standalone: true,\n})\nexport class ProgressiveImageDirective implements OnDestroy {\n  private el = inject(ElementRef<HTMLImageElement>);\n  private renderer = inject(Renderer2);\n\n  placeholder = input.required<string>();\n  srcFull = input.required<string>();\n\n  public loadError = output<void>();\n\n  private loaded = signal(false);\n  private observer?: IntersectionObserver;\n  private abortController?: AbortController;\n\n  private static cache = new Set<string>();\n  private static errorCache = new Set<string>();\n\n  constructor() {\n    effect(() => {\n      const img = this.el.nativeElement;\n      const preview = this.placeholder();\n      const full = this.srcFull();\n\n      if (!preview || !full) return;\n\n      // сброс состояния\n      this.abortCurrent();\n      this.loaded.set(false);\n      this.observer?.disconnect();\n\n      if (ProgressiveImageDirective.errorCache.has(full)) {\n        this.loadError.emit();\n        return;\n      }\n\n      // ставим placeholder\n      this.renderer.setAttribute(img, 'src', preview);\n      this.renderer.setStyle(img, 'transition', 'opacity 200ms ease');\n      this.renderer.setStyle(img, 'opacity', '0.7');\n      this.renderer.setStyle(img, 'filter', 'blur(3px)');\n\n      // если full уже в кеше — сразу ставим\n      if (ProgressiveImageDirective.cache.has(full)) {\n        this.setFullImage(full);\n        return;\n      }\n\n      // если уже видим — грузим сразу\n      if (this.isElementInViewport(img)) {\n        this.loadFullImage();\n      } else {\n        this.createObserver(img);\n      }\n    });\n  }\n\n  private isElementInViewport(el: HTMLElement): boolean {\n    const rect = el.getBoundingClientRect();\n    return (\n      rect.top < window.innerHeight &&\n      rect.bottom > 0 &&\n      rect.left < window.innerWidth &&\n      rect.right > 0\n    );\n  }\n\n  private createObserver(img: HTMLImageElement) {\n    this.observer = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          this.loadFullImage();\n          this.observer?.disconnect();\n        }\n      });\n    });\n\n    this.observer.observe(img);\n  }\n\n  private loadFullImage() {\n    const full = this.srcFull();\n    if (!full) return;\n\n    this.abortCurrent();\n    this.abortController = new AbortController();\n    const signal = this.abortController.signal;\n\n    const fullImage = new Image();\n    fullImage.src = full;\n\n    fullImage.onload = () => {\n      ProgressiveImageDirective.cache.add(full);\n      this.setFullImage(full);\n    };\n\n    fullImage.onerror = (e) => {\n      if (signal.aborted) return;\n\n      ProgressiveImageDirective.errorCache.add(full);\n      this.loadError.emit();\n    };\n\n    this.abortController.signal.addEventListener('abort', () => {\n      fullImage.src = '';\n    });\n  }\n\n  private setFullImage(full: string) {\n    const img = this.el.nativeElement;\n\n    this.renderer.setAttribute(img, 'src', full);\n    this.renderer.setStyle(img, 'opacity', '1');\n    this.renderer.setStyle(img, 'filter', 'none');\n\n    this.loaded.set(true);\n  }\n\n  private abortCurrent() {\n    this.abortController?.abort();\n    this.abortController = undefined;\n  }\n\n  ngOnDestroy(): void {\n    this.abortCurrent();\n    this.observer?.disconnect();\n  }\n}\n","import { Component, computed, input, signal } from '@angular/core';\nimport { AvatarColors } from './avatar.colors';\nimport { ProgressiveImageDirective } from './progressive-image.directive';\n\n@Component({\n  selector: 'w2p-avatar',\n  imports: [ProgressiveImageDirective],\n  templateUrl: './avatar.html',\n  styleUrls: ['./avatar.scss'],\n})\nexport class W2pAvatar {\n  public readonly userId = input<number | undefined>();\n  public readonly userName = input<string | undefined>();\n  public readonly placeholder = input<string | undefined>(undefined);\n  public readonly srcFull = input<string | undefined>(undefined);\n\n  protected readonly imageLoadFailed = signal(false);\n  protected visible = signal<boolean>(false);\n\n  // получаем цвет аватара по id\n  protected readonly color = computed(() => {\n    if (this.placeholder() && this.srcFull() && !this.imageLoadFailed()) return '';\n\n    const id = this.userId();\n    if (!id) return AvatarColors[0];\n    return AvatarColors[id % AvatarColors.length];\n  });\n\n  protected readonly latter = computed(() => {\n    const name = this.userName();\n    if (!name) return 'A';\n    return name[0].toUpperCase();\n  });\n\n  protected loaded() {\n    this.visible.set(true);\n  }\n\n  protected onImageError() {\n    this.imageLoadFailed.set(true);\n  }\n}\n","<div class=\"avatar\" [style.--w2p-ui-avatar-bg-color]=\"color()\">\n  @if (placeholder() && srcFull() && !imageLoadFailed()) {\n    <img\n      progressiveImage\n      (loadError)=\"onImageError()\"\n      [placeholder]=\"placeholder()!\"\n      [srcFull]=\"srcFull()!\"\n    />\n  } @else {\n    <p>{{ latter() }}</p>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/w2p-ui-kit-components-label.mjs

@@ -3,11 +3,11 @@ import { Component } from '@angular/core';
 
 class W2pLabel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: W2pLabel, isStandalone: true, selector: "w2p-label", ngImport: i0, template: "<div class=\"label\">\n  <div class=\"label__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n  <ng-content select=\"[label]\"></ng-content>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-label-width: min-content;--w2p-ui-label-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.label{width:var(--w2p-ui-label-width);display:flex;padding:var(--spasing-fractional-15, .375rem) var(--Spasing-2, .5rem);justify-content:center;align-items:center;gap:var(--Spasing-1, .25rem);border-radius:var(--Border-radius-999, 62.4375rem);border:1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));background:var(--Base-Inverse-10, rgba(255, 255, 255, .1));color:var(--Base-Inverse-Default, #fff);font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.label__icon{display:contents;--w2p-icon-size: .875rem;color:var(--w2p-ui-label-icon-color)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: W2pLabel, isStandalone: true, selector: "w2p-label", ngImport: i0, template: "<div class=\"label\">\n  <div class=\"label__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n  <ng-content select=\"[label]\"></ng-content>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-label-width: min-content;--w2p-ui-label-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--w2p-ui-label-text-color: var(--Base-Inverse-Default, #fff);--w2p-ui-label-font-size: .875rem;--w2p-ui-label-font-weight: 400;--w2p-ui-label-font-family: \"SF Pro Display\"}.label{width:var(--w2p-ui-label-width);display:flex;padding:var(--spasing-fractional-15, .375rem) var(--Spasing-2, .5rem);justify-content:center;align-items:center;gap:var(--Spasing-1, .25rem);border-radius:var(--Border-radius-999, 62.4375rem);border:1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));background:var(--Base-Inverse-10, rgba(255, 255, 255, .1));color:var(--w2p-ui-label-text-color);font-family:var(--w2p-ui-label-font-family);font-size:var(--w2p-ui-label-font-size);font-style:normal;font-weight:var(--w2p-ui-label-font-weight);line-height:normal;letter-spacing:.0125rem}.label__icon{display:contents;--w2p-icon-size: .875rem;color:var(--w2p-ui-label-icon-color)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pLabel, decorators: [{
             type: Component,
-            args: [{ selector: 'w2p-label', template: "<div class=\"label\">\n  <div class=\"label__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n  <ng-content select=\"[label]\"></ng-content>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-label-width: min-content;--w2p-ui-label-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.label{width:var(--w2p-ui-label-width);display:flex;padding:var(--spasing-fractional-15, .375rem) var(--Spasing-2, .5rem);justify-content:center;align-items:center;gap:var(--Spasing-1, .25rem);border-radius:var(--Border-radius-999, 62.4375rem);border:1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));background:var(--Base-Inverse-10, rgba(255, 255, 255, .1));color:var(--Base-Inverse-Default, #fff);font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.label__icon{display:contents;--w2p-icon-size: .875rem;color:var(--w2p-ui-label-icon-color)}\n"] }]
+            args: [{ selector: 'w2p-label', template: "<div class=\"label\">\n  <div class=\"label__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n  <ng-content select=\"[label]\"></ng-content>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-label-width: min-content;--w2p-ui-label-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--w2p-ui-label-text-color: var(--Base-Inverse-Default, #fff);--w2p-ui-label-font-size: .875rem;--w2p-ui-label-font-weight: 400;--w2p-ui-label-font-family: \"SF Pro Display\"}.label{width:var(--w2p-ui-label-width);display:flex;padding:var(--spasing-fractional-15, .375rem) var(--Spasing-2, .5rem);justify-content:center;align-items:center;gap:var(--Spasing-1, .25rem);border-radius:var(--Border-radius-999, 62.4375rem);border:1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));background:var(--Base-Inverse-10, rgba(255, 255, 255, .1));color:var(--w2p-ui-label-text-color);font-family:var(--w2p-ui-label-font-family);font-size:var(--w2p-ui-label-font-size);font-style:normal;font-weight:var(--w2p-ui-label-font-weight);line-height:normal;letter-spacing:.0125rem}.label__icon{display:contents;--w2p-icon-size: .875rem;color:var(--w2p-ui-label-icon-color)}\n"] }]
         }] });
 
 /**

package/fesm2022/w2p-ui-kit-components-label.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"w2p-ui-kit-components-label.mjs","sources":["../../../projects/kit/components/label/label.ts","../../../projects/kit/components/label/label.html","../../../projects/kit/components/label/w2p-ui-kit-components-label.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n  selector: 'w2p-label',\n  templateUrl: './label.html',\n  styleUrls: ['./label.scss'],\n})\nexport class W2pLabel {}\n","<div class=\"label\">\n  <div class=\"label__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n  <ng-content select=\"[label]\"></ng-content>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAOa,QAAQ,CAAA;wGAAR,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,QAAQ,qECPrB,2KAMA,EAAA,MAAA,EAAA,CAAA,++DAAA,CAAA,EAAA,CAAA;;4FDCa,QAAQ,EAAA,UAAA,EAAA,CAAA;kBALpB,SAAS;+BACE,WAAW,EAAA,QAAA,EAAA,2KAAA,EAAA,MAAA,EAAA,CAAA,++DAAA,CAAA,EAAA;;;AEHvB;;AAEG;;;;"}
+{"version":3,"file":"w2p-ui-kit-components-label.mjs","sources":["../../../projects/kit/components/label/label.ts","../../../projects/kit/components/label/label.html","../../../projects/kit/components/label/w2p-ui-kit-components-label.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n  selector: 'w2p-label',\n  templateUrl: './label.html',\n  styleUrls: ['./label.scss'],\n})\nexport class W2pLabel {}\n","<div class=\"label\">\n  <div class=\"label__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n  <ng-content select=\"[label]\"></ng-content>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAOa,QAAQ,CAAA;wGAAR,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,QAAQ,qECPrB,2KAMA,EAAA,MAAA,EAAA,CAAA,6tEAAA,CAAA,EAAA,CAAA;;4FDCa,QAAQ,EAAA,UAAA,EAAA,CAAA;kBALpB,SAAS;+BACE,WAAW,EAAA,QAAA,EAAA,2KAAA,EAAA,MAAA,EAAA,CAAA,6tEAAA,CAAA,EAAA;;;AEHvB;;AAEG;;;;"}

package/fesm2022/w2p-ui-kit-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { output, input, computed, Component, viewChild, signal, afterNextRender, effect, forwardRef, viewChildren, inject } from '@angular/core';
+import { output, input, computed, Component, viewChild, signal, afterNextRender, effect, forwardRef, viewChildren, inject, ElementRef, Renderer2, Directive } from '@angular/core';
 import { NavArrowIconComponent, InfoIconComponent, ViewIconComponent, EyeClosedIconComponent, LoaderIconComponent, SuccessIconComponent } from '@w2p-ui/icons';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { toSignal } from '@angular/core/rxjs-interop';
@@ -291,16 +291,171 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
 
 class W2pLabel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: W2pLabel, isStandalone: true, selector: "w2p-label", ngImport: i0, template: "<div class=\"label\">\n  <div class=\"label__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n  <ng-content select=\"[label]\"></ng-content>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-label-width: min-content;--w2p-ui-label-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.label{width:var(--w2p-ui-label-width);display:flex;padding:var(--spasing-fractional-15, .375rem) var(--Spasing-2, .5rem);justify-content:center;align-items:center;gap:var(--Spasing-1, .25rem);border-radius:var(--Border-radius-999, 62.4375rem);border:1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));background:var(--Base-Inverse-10, rgba(255, 255, 255, .1));color:var(--Base-Inverse-Default, #fff);font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.label__icon{display:contents;--w2p-icon-size: .875rem;color:var(--w2p-ui-label-icon-color)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: W2pLabel, isStandalone: true, selector: "w2p-label", ngImport: i0, template: "<div class=\"label\">\n  <div class=\"label__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n  <ng-content select=\"[label]\"></ng-content>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-label-width: min-content;--w2p-ui-label-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--w2p-ui-label-text-color: var(--Base-Inverse-Default, #fff);--w2p-ui-label-font-size: .875rem;--w2p-ui-label-font-weight: 400;--w2p-ui-label-font-family: \"SF Pro Display\"}.label{width:var(--w2p-ui-label-width);display:flex;padding:var(--spasing-fractional-15, .375rem) var(--Spasing-2, .5rem);justify-content:center;align-items:center;gap:var(--Spasing-1, .25rem);border-radius:var(--Border-radius-999, 62.4375rem);border:1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));background:var(--Base-Inverse-10, rgba(255, 255, 255, .1));color:var(--w2p-ui-label-text-color);font-family:var(--w2p-ui-label-font-family);font-size:var(--w2p-ui-label-font-size);font-style:normal;font-weight:var(--w2p-ui-label-font-weight);line-height:normal;letter-spacing:.0125rem}.label__icon{display:contents;--w2p-icon-size: .875rem;color:var(--w2p-ui-label-icon-color)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pLabel, decorators: [{
             type: Component,
-            args: [{ selector: 'w2p-label', template: "<div class=\"label\">\n  <div class=\"label__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n  <ng-content select=\"[label]\"></ng-content>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-label-width: min-content;--w2p-ui-label-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.label{width:var(--w2p-ui-label-width);display:flex;padding:var(--spasing-fractional-15, .375rem) var(--Spasing-2, .5rem);justify-content:center;align-items:center;gap:var(--Spasing-1, .25rem);border-radius:var(--Border-radius-999, 62.4375rem);border:1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));background:var(--Base-Inverse-10, rgba(255, 255, 255, .1));color:var(--Base-Inverse-Default, #fff);font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.label__icon{display:contents;--w2p-icon-size: .875rem;color:var(--w2p-ui-label-icon-color)}\n"] }]
+            args: [{ selector: 'w2p-label', template: "<div class=\"label\">\n  <div class=\"label__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n  <ng-content select=\"[label]\"></ng-content>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-label-width: min-content;--w2p-ui-label-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--w2p-ui-label-text-color: var(--Base-Inverse-Default, #fff);--w2p-ui-label-font-size: .875rem;--w2p-ui-label-font-weight: 400;--w2p-ui-label-font-family: \"SF Pro Display\"}.label{width:var(--w2p-ui-label-width);display:flex;padding:var(--spasing-fractional-15, .375rem) var(--Spasing-2, .5rem);justify-content:center;align-items:center;gap:var(--Spasing-1, .25rem);border-radius:var(--Border-radius-999, 62.4375rem);border:1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));background:var(--Base-Inverse-10, rgba(255, 255, 255, .1));color:var(--w2p-ui-label-text-color);font-family:var(--w2p-ui-label-font-family);font-size:var(--w2p-ui-label-font-size);font-style:normal;font-weight:var(--w2p-ui-label-font-weight);line-height:normal;letter-spacing:.0125rem}.label__icon{display:contents;--w2p-icon-size: .875rem;color:var(--w2p-ui-label-icon-color)}\n"] }]
         }] });
 
+const AvatarColors = [
+    'var(--Brand-Primary-Default, #F3400D)',
+    'var(--System-Information-Default, #697DFF)',
+    'var(--System-Attention-Default, #F99B00)',
+    'var(--System-Success-Default, #12CA55)',
+];
+
+class ProgressiveImageDirective {
+    el = inject((ElementRef));
+    renderer = inject(Renderer2);
+    placeholder = input.required(...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    srcFull = input.required(...(ngDevMode ? [{ debugName: "srcFull" }] : /* istanbul ignore next */ []));
+    loadError = output();
+    loaded = signal(false, ...(ngDevMode ? [{ debugName: "loaded" }] : /* istanbul ignore next */ []));
+    observer;
+    abortController;
+    static cache = new Set();
+    static errorCache = new Set();
+    constructor() {
+        effect(() => {
+            const img = this.el.nativeElement;
+            const preview = this.placeholder();
+            const full = this.srcFull();
+            if (!preview || !full)
+                return;
+            // сброс состояния
+            this.abortCurrent();
+            this.loaded.set(false);
+            this.observer?.disconnect();
+            if (ProgressiveImageDirective.errorCache.has(full)) {
+                this.loadError.emit();
+                return;
+            }
+            // ставим placeholder
+            this.renderer.setAttribute(img, 'src', preview);
+            this.renderer.setStyle(img, 'transition', 'opacity 200ms ease');
+            this.renderer.setStyle(img, 'opacity', '0.7');
+            this.renderer.setStyle(img, 'filter', 'blur(3px)');
+            // если full уже в кеше — сразу ставим
+            if (ProgressiveImageDirective.cache.has(full)) {
+                this.setFullImage(full);
+                return;
+            }
+            // если уже видим — грузим сразу
+            if (this.isElementInViewport(img)) {
+                this.loadFullImage();
+            }
+            else {
+                this.createObserver(img);
+            }
+        });
+    }
+    isElementInViewport(el) {
+        const rect = el.getBoundingClientRect();
+        return (rect.top < window.innerHeight &&
+            rect.bottom > 0 &&
+            rect.left < window.innerWidth &&
+            rect.right > 0);
+    }
+    createObserver(img) {
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this.loadFullImage();
+                    this.observer?.disconnect();
+                }
+            });
+        });
+        this.observer.observe(img);
+    }
+    loadFullImage() {
+        const full = this.srcFull();
+        if (!full)
+            return;
+        this.abortCurrent();
+        this.abortController = new AbortController();
+        const signal = this.abortController.signal;
+        const fullImage = new Image();
+        fullImage.src = full;
+        fullImage.onload = () => {
+            ProgressiveImageDirective.cache.add(full);
+            this.setFullImage(full);
+        };
+        fullImage.onerror = (e) => {
+            if (signal.aborted)
+                return;
+            ProgressiveImageDirective.errorCache.add(full);
+            this.loadError.emit();
+        };
+        this.abortController.signal.addEventListener('abort', () => {
+            fullImage.src = '';
+        });
+    }
+    setFullImage(full) {
+        const img = this.el.nativeElement;
+        this.renderer.setAttribute(img, 'src', full);
+        this.renderer.setStyle(img, 'opacity', '1');
+        this.renderer.setStyle(img, 'filter', 'none');
+        this.loaded.set(true);
+    }
+    abortCurrent() {
+        this.abortController?.abort();
+        this.abortController = undefined;
+    }
+    ngOnDestroy() {
+        this.abortCurrent();
+        this.observer?.disconnect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ProgressiveImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.18", type: ProgressiveImageDirective, isStandalone: true, selector: "img[progressiveImage]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, srcFull: { classPropertyName: "srcFull", publicName: "srcFull", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { loadError: "loadError" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ProgressiveImageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'img[progressiveImage]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], srcFull: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcFull", required: true }] }], loadError: [{ type: i0.Output, args: ["loadError"] }] } });
+
+class W2pAvatar {
+    userId = input(...(ngDevMode ? [undefined, { debugName: "userId" }] : /* istanbul ignore next */ []));
+    userName = input(...(ngDevMode ? [undefined, { debugName: "userName" }] : /* istanbul ignore next */ []));
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    srcFull = input(undefined, ...(ngDevMode ? [{ debugName: "srcFull" }] : /* istanbul ignore next */ []));
+    imageLoadFailed = signal(false, ...(ngDevMode ? [{ debugName: "imageLoadFailed" }] : /* istanbul ignore next */ []));
+    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    // получаем цвет аватара по id
+    color = computed(() => {
+        if (this.placeholder() && this.srcFull() && !this.imageLoadFailed())
+            return '';
+        const id = this.userId();
+        if (!id)
+            return AvatarColors[0];
+        return AvatarColors[id % AvatarColors.length];
+    }, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    latter = computed(() => {
+        const name = this.userName();
+        if (!name)
+            return 'A';
+        return name[0].toUpperCase();
+    }, ...(ngDevMode ? [{ debugName: "latter" }] : /* istanbul ignore next */ []));
+    loaded() {
+        this.visible.set(true);
+    }
+    onImageError() {
+        this.imageLoadFailed.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: W2pAvatar, isStandalone: true, selector: "w2p-avatar", inputs: { userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, srcFull: { classPropertyName: "srcFull", publicName: "srcFull", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"avatar\" [style.--w2p-ui-avatar-bg-color]=\"color()\">\n  @if (placeholder() && srcFull() && !imageLoadFailed()) {\n    <img\n      progressiveImage\n      (loadError)=\"onImageError()\"\n      [placeholder]=\"placeholder()!\"\n      [srcFull]=\"srcFull()!\"\n    />\n  } @else {\n    <p>{{ latter() }}</p>\n  }\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-avatar-size: 4rem}.avatar{display:flex;width:var(--w2p-ui-avatar-size);height:var(--w2p-ui-avatar-size);justify-content:center;align-items:center;border-radius:50%;background:var(--w2p-ui-avatar-bg-color)}.avatar p{color:var(--Base-Inverse-Default, #fff);text-align:center;font-size:calc(var(--w2p-ui-avatar-size) * .55);font-family:SF Pro Display;font-style:normal;font-weight:500;line-height:1}.avatar img{width:100%;height:100%;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: ProgressiveImageDirective, selector: "img[progressiveImage]", inputs: ["placeholder", "srcFull"], outputs: ["loadError"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pAvatar, decorators: [{
+            type: Component,
+            args: [{ selector: 'w2p-avatar', imports: [ProgressiveImageDirective], template: "<div class=\"avatar\" [style.--w2p-ui-avatar-bg-color]=\"color()\">\n  @if (placeholder() && srcFull() && !imageLoadFailed()) {\n    <img\n      progressiveImage\n      (loadError)=\"onImageError()\"\n      [placeholder]=\"placeholder()!\"\n      [srcFull]=\"srcFull()!\"\n    />\n  } @else {\n    <p>{{ latter() }}</p>\n  }\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-avatar-size: 4rem}.avatar{display:flex;width:var(--w2p-ui-avatar-size);height:var(--w2p-ui-avatar-size);justify-content:center;align-items:center;border-radius:50%;background:var(--w2p-ui-avatar-bg-color)}.avatar p{color:var(--Base-Inverse-Default, #fff);text-align:center;font-size:calc(var(--w2p-ui-avatar-size) * .55);font-family:SF Pro Display;font-style:normal;font-weight:500;line-height:1}.avatar img{width:100%;height:100%;border-radius:50%}\n"] }]
+        }], propDecorators: { userId: [{ type: i0.Input, args: [{ isSignal: true, alias: "userId", required: false }] }], userName: [{ type: i0.Input, args: [{ isSignal: true, alias: "userName", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], srcFull: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcFull", required: false }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { W2pActionButton, W2pButton, W2pColorAlert, W2pInput, W2pLabel, W2pLoader, W2pOtpInput };
+export { ProgressiveImageDirective, W2pActionButton, W2pAvatar, W2pButton, W2pColorAlert, W2pInput, W2pLabel, W2pLoader, W2pOtpInput };
 //# sourceMappingURL=w2p-ui-kit-components.mjs.map