@apexara/ng-components 1.0.6-test.1 → 1.0.6-test.3

package/fesm2022/apexara-ng-components-carousel.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, HostListener, ViewChild, Component } from '@angular/core';
+import { signal, inject, PLATFORM_ID, HostListener, ViewChild, Component } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { Subject, throttleTime } from 'rxjs';
 
 class ApexCarouselComponent {
     constructor() {
-        this.scrollProgress = 0;
+        this.scrollProgress = signal(0, ...(ngDevMode ? [{ debugName: "scrollProgress" }] : []));
         this.scrollAnimationDuration = 500; // ms
         this.scrollSubject = new Subject();
         this.currentCenteredElemIndex = 0;
@@ -98,7 +98,7 @@ class ApexCarouselComponent {
     updateProgressBar(container) {
         const scrollLeft = container.scrollLeft;
         const scrollWidth = container.scrollWidth - container.clientWidth;
-        this.scrollProgress = ((scrollLeft / scrollWidth) * 100) - (104 / container.clientWidth);
+        this.scrollProgress.set(((scrollLeft / scrollWidth) * 100) - (104 / container.clientWidth));
     }
     updateCurrentCenterdElemIndex(container) {
         const carouselEl = this.carousel.nativeElement;
@@ -134,11 +134,11 @@ class ApexCarouselComponent {
         carouselEl.style.paddingLeft = `${leftCalculatedValue}px`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApexCarouselComponent, isStandalone: true, selector: "apex-carousel", host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true }, { propertyName: "prevButton", first: true, predicate: ["prevButton"], descendants: true }, { propertyName: "nextButton", first: true, predicate: ["nextButton"], descendants: true }], ngImport: i0, template: "<div class=\"carousel-container\">\n    <div #carousel class=\"carousel\" (scroll)=\"onScroll($event)\">\n            <ng-content></ng-content>\n    </div>\n</div>\n\n<div class=\"carousel-navigation\">\n    <div class=\"navigation-buttons-wrapper\">\n        <div \n            #prevButton\n            tabindex=\"0\"\n            class=\"chevron-wrapper\"\n            aria-label=\"Scroll to previous item\"\n            (click)=\"scrollSubject.next('prev')\"\n            (keydown)=\"onNavigationKeydown($event, 'prev')\">\n                <div class=\"chevron prev\"></div>\n        </div>\n\n        <div\n            #nextButton\n            tabindex=\"0\"\n            class=\"chevron-wrapper\"\n            aria-label=\"Scroll to next item\"\n            (click)=\"scrollSubject.next('next')\"\n            (keydown)=\"onNavigationKeydown($event, 'next')\">\n                <div class=\"chevron next\"></div>\n        </div>\n    </div>\n\n    <div #progressBarContainer class=\"scroll-bar-container\">\n        <div class=\"scroll-indicator\" [style.width.%]=\"scrollProgress\"></div>\n    </div>\n</div>\n", styles: [".carousel-container{width:100%;display:flex;align-items:center;background-color:var(--apex-carousel-background-color, transparent);position:relative;margin-bottom:24px}.carousel{display:flex;flex-grow:1;overflow:scroll;flex-wrap:nowrap;scroll-behavior:smooth;scroll-snap-type:x mandatory;gap:16px}.carousel::-webkit-scrollbar{display:none}.carousel-navigation{display:flex;align-items:center;justify-content:flex-start;gap:24px}.navigation-buttons-wrapper{width:104px;height:48px;display:flex;gap:8px}.chevron-wrapper{min-width:40px;height:40px;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;border:1px solid transparent;border-radius:50%}.chevron-wrapper:before{pointer-events:none;content:\"\";position:absolute;inset:0;border-radius:inherit;background:var(--apex-carousel-button-border-color, #FFFFFF);padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.chevron-wrapper:hover:before{background:var(--apex-carousel-button-border-hover-color, #FFFFFF)}.chevron-wrapper:hover .chevron{border-top:3px solid var(--apex-carousel-chevron-hover-color, #FFFFFF);border-left:3px solid var(--apex-carousel-chevro-hover-color, #FFFFFF)}.chevron{width:8px;height:8px;flex-shrink:0;position:relative;transform-origin:center;transform:rotate(-135deg);border-top:3px solid var(--apex-carousel-chevron-color, #FFFFFF);border-left:3px solid var(--apex-carousel-chevron-color, #FFFFFF);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px}.chevron.next{transform:rotate(135deg);left:-1px}.chevron.prev{transform:rotate(-45deg);right:0}.scroll-bar-container{width:100%;height:1px;overflow:hidden;position:relative;background-color:var(--apex-carousel-scrollbar-container-color, #020617);border-radius:10px;margin:.5rem 0}.scroll-indicator{left:0;height:1px;background-color:var(--apex-carousel-scrollbar-color, #FFFFFF);transition:width .1s}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApexCarouselComponent, isStandalone: true, selector: "apex-carousel", host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true }, { propertyName: "prevButton", first: true, predicate: ["prevButton"], descendants: true }, { propertyName: "nextButton", first: true, predicate: ["nextButton"], descendants: true }], ngImport: i0, template: "<div class=\"carousel-container\">\n    <div #carousel class=\"carousel\" (scroll)=\"onScroll($event)\">\n            <ng-content></ng-content>\n    </div>\n</div>\n\n<div class=\"carousel-navigation\">\n    <div class=\"navigation-buttons-wrapper\">\n        <div \n            #prevButton\n            tabindex=\"0\"\n            class=\"chevron-wrapper\"\n            aria-label=\"Scroll to previous item\"\n            (click)=\"scrollSubject.next('prev')\"\n            (keydown)=\"onNavigationKeydown($event, 'prev')\">\n                <div class=\"chevron prev\"></div>\n        </div>\n\n        <div\n            #nextButton\n            tabindex=\"0\"\n            class=\"chevron-wrapper\"\n            aria-label=\"Scroll to next item\"\n            (click)=\"scrollSubject.next('next')\"\n            (keydown)=\"onNavigationKeydown($event, 'next')\">\n                <div class=\"chevron next\"></div>\n        </div>\n    </div>\n\n    <div #progressBarContainer class=\"scroll-bar-container\">\n        <div class=\"scroll-indicator\" [style.width.%]=\"scrollProgress()\"></div>\n    </div>\n</div>\n", styles: [".carousel-container{width:100%;display:flex;align-items:center;background-color:var(--apex-carousel-background-color, transparent);position:relative;margin-bottom:24px}.carousel{display:flex;flex-grow:1;overflow:scroll;flex-wrap:nowrap;scroll-behavior:smooth;scroll-snap-type:x mandatory;gap:16px}.carousel::-webkit-scrollbar{display:none}.carousel-navigation{display:flex;align-items:center;justify-content:flex-start;gap:24px}.navigation-buttons-wrapper{width:104px;height:48px;display:flex;gap:8px}.chevron-wrapper{min-width:40px;height:40px;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;border:1px solid transparent;border-radius:50%}.chevron-wrapper:before{pointer-events:none;content:\"\";position:absolute;inset:0;border-radius:inherit;background:var(--apex-carousel-button-border-color, #FFFFFF);padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.chevron-wrapper:hover:before{background:var(--apex-carousel-button-border-hover-color, #FFFFFF)}.chevron-wrapper:hover .chevron{border-top:3px solid var(--apex-carousel-chevron-hover-color, #FFFFFF);border-left:3px solid var(--apex-carousel-chevro-hover-color, #FFFFFF)}.chevron{width:8px;height:8px;flex-shrink:0;position:relative;transform-origin:center;transform:rotate(-135deg);border-top:3px solid var(--apex-carousel-chevron-color, #FFFFFF);border-left:3px solid var(--apex-carousel-chevron-color, #FFFFFF);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px}.chevron.next{transform:rotate(135deg);left:-1px}.chevron.prev{transform:rotate(-45deg);right:0}.scroll-bar-container{width:100%;height:1px;overflow:hidden;position:relative;background-color:var(--apex-carousel-scrollbar-container-color, #020617);border-radius:10px;margin:.5rem 0}.scroll-indicator{left:0;height:1px;background-color:var(--apex-carousel-scrollbar-color, #FFFFFF);transition:width .1s}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'apex-carousel', template: "<div class=\"carousel-container\">\n    <div #carousel class=\"carousel\" (scroll)=\"onScroll($event)\">\n            <ng-content></ng-content>\n    </div>\n</div>\n\n<div class=\"carousel-navigation\">\n    <div class=\"navigation-buttons-wrapper\">\n        <div \n            #prevButton\n            tabindex=\"0\"\n            class=\"chevron-wrapper\"\n            aria-label=\"Scroll to previous item\"\n            (click)=\"scrollSubject.next('prev')\"\n            (keydown)=\"onNavigationKeydown($event, 'prev')\">\n                <div class=\"chevron prev\"></div>\n        </div>\n\n        <div\n            #nextButton\n            tabindex=\"0\"\n            class=\"chevron-wrapper\"\n            aria-label=\"Scroll to next item\"\n            (click)=\"scrollSubject.next('next')\"\n            (keydown)=\"onNavigationKeydown($event, 'next')\">\n                <div class=\"chevron next\"></div>\n        </div>\n    </div>\n\n    <div #progressBarContainer class=\"scroll-bar-container\">\n        <div class=\"scroll-indicator\" [style.width.%]=\"scrollProgress\"></div>\n    </div>\n</div>\n", styles: [".carousel-container{width:100%;display:flex;align-items:center;background-color:var(--apex-carousel-background-color, transparent);position:relative;margin-bottom:24px}.carousel{display:flex;flex-grow:1;overflow:scroll;flex-wrap:nowrap;scroll-behavior:smooth;scroll-snap-type:x mandatory;gap:16px}.carousel::-webkit-scrollbar{display:none}.carousel-navigation{display:flex;align-items:center;justify-content:flex-start;gap:24px}.navigation-buttons-wrapper{width:104px;height:48px;display:flex;gap:8px}.chevron-wrapper{min-width:40px;height:40px;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;border:1px solid transparent;border-radius:50%}.chevron-wrapper:before{pointer-events:none;content:\"\";position:absolute;inset:0;border-radius:inherit;background:var(--apex-carousel-button-border-color, #FFFFFF);padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.chevron-wrapper:hover:before{background:var(--apex-carousel-button-border-hover-color, #FFFFFF)}.chevron-wrapper:hover .chevron{border-top:3px solid var(--apex-carousel-chevron-hover-color, #FFFFFF);border-left:3px solid var(--apex-carousel-chevro-hover-color, #FFFFFF)}.chevron{width:8px;height:8px;flex-shrink:0;position:relative;transform-origin:center;transform:rotate(-135deg);border-top:3px solid var(--apex-carousel-chevron-color, #FFFFFF);border-left:3px solid var(--apex-carousel-chevron-color, #FFFFFF);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px}.chevron.next{transform:rotate(135deg);left:-1px}.chevron.prev{transform:rotate(-45deg);right:0}.scroll-bar-container{width:100%;height:1px;overflow:hidden;position:relative;background-color:var(--apex-carousel-scrollbar-container-color, #020617);border-radius:10px;margin:.5rem 0}.scroll-indicator{left:0;height:1px;background-color:var(--apex-carousel-scrollbar-color, #FFFFFF);transition:width .1s}\n"] }]
+            args: [{ selector: 'apex-carousel', template: "<div class=\"carousel-container\">\n    <div #carousel class=\"carousel\" (scroll)=\"onScroll($event)\">\n            <ng-content></ng-content>\n    </div>\n</div>\n\n<div class=\"carousel-navigation\">\n    <div class=\"navigation-buttons-wrapper\">\n        <div \n            #prevButton\n            tabindex=\"0\"\n            class=\"chevron-wrapper\"\n            aria-label=\"Scroll to previous item\"\n            (click)=\"scrollSubject.next('prev')\"\n            (keydown)=\"onNavigationKeydown($event, 'prev')\">\n                <div class=\"chevron prev\"></div>\n        </div>\n\n        <div\n            #nextButton\n            tabindex=\"0\"\n            class=\"chevron-wrapper\"\n            aria-label=\"Scroll to next item\"\n            (click)=\"scrollSubject.next('next')\"\n            (keydown)=\"onNavigationKeydown($event, 'next')\">\n                <div class=\"chevron next\"></div>\n        </div>\n    </div>\n\n    <div #progressBarContainer class=\"scroll-bar-container\">\n        <div class=\"scroll-indicator\" [style.width.%]=\"scrollProgress()\"></div>\n    </div>\n</div>\n", styles: [".carousel-container{width:100%;display:flex;align-items:center;background-color:var(--apex-carousel-background-color, transparent);position:relative;margin-bottom:24px}.carousel{display:flex;flex-grow:1;overflow:scroll;flex-wrap:nowrap;scroll-behavior:smooth;scroll-snap-type:x mandatory;gap:16px}.carousel::-webkit-scrollbar{display:none}.carousel-navigation{display:flex;align-items:center;justify-content:flex-start;gap:24px}.navigation-buttons-wrapper{width:104px;height:48px;display:flex;gap:8px}.chevron-wrapper{min-width:40px;height:40px;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;border:1px solid transparent;border-radius:50%}.chevron-wrapper:before{pointer-events:none;content:\"\";position:absolute;inset:0;border-radius:inherit;background:var(--apex-carousel-button-border-color, #FFFFFF);padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.chevron-wrapper:hover:before{background:var(--apex-carousel-button-border-hover-color, #FFFFFF)}.chevron-wrapper:hover .chevron{border-top:3px solid var(--apex-carousel-chevron-hover-color, #FFFFFF);border-left:3px solid var(--apex-carousel-chevro-hover-color, #FFFFFF)}.chevron{width:8px;height:8px;flex-shrink:0;position:relative;transform-origin:center;transform:rotate(-135deg);border-top:3px solid var(--apex-carousel-chevron-color, #FFFFFF);border-left:3px solid var(--apex-carousel-chevron-color, #FFFFFF);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px}.chevron.next{transform:rotate(135deg);left:-1px}.chevron.prev{transform:rotate(-45deg);right:0}.scroll-bar-container{width:100%;height:1px;overflow:hidden;position:relative;background-color:var(--apex-carousel-scrollbar-container-color, #020617);border-radius:10px;margin:.5rem 0}.scroll-indicator{left:0;height:1px;background-color:var(--apex-carousel-scrollbar-color, #FFFFFF);transition:width .1s}\n"] }]
         }], ctorParameters: () => [], propDecorators: { carousel: [{
                 type: ViewChild,
                 args: ['carousel']

package/fesm2022/apexara-ng-components-carousel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"apexara-ng-components-carousel.mjs","sources":["../../../../projects/apexara/ng-components/carousel/src/carousel.component.ts","../../../../projects/apexara/ng-components/carousel/src/carousel.component.html","../../../../projects/apexara/ng-components/carousel/apexara-ng-components-carousel.ts"],"sourcesContent":["import { Component, ViewChild, ElementRef, HostListener, inject, PLATFORM_ID } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\n\nimport { Subject, Subscription, throttleTime } from 'rxjs';\n\n@Component({\n  selector: 'apex-carousel',\n  templateUrl: './carousel.component.html',\n  styleUrls: ['./carousel.component.css'],\n})\n\nexport class ApexCarouselComponent {\n\n  constructor() { }\n\n  @ViewChild('carousel') carousel!: ElementRef<HTMLDivElement>;\n\n  @ViewChild('prevButton') prevButton!: ElementRef;\n  @ViewChild('nextButton') nextButton!: ElementRef;\n\n  public scrollProgress = 0;\n  public scrollAnimationDuration = 500; // ms\n  \n  public scrollSubject = new Subject<'prev' | 'next'>();\n\n  private currentCenteredElemIndex = 0; \n\n  private isProgrammaticScroll = false;\n  private scrollSubscription!: Subscription;\n\n  private platformId = inject(PLATFORM_ID);\n\n  public ngAfterViewInit(): void {\n    this.applyScrollSnapAlign();\n\n    if (isPlatformBrowser(this.platformId)) {\n      this.adjustCarouselSpacing();\n    }\n\n    this.scrollSubject.pipe(throttleTime(this.scrollAnimationDuration)).subscribe((direction: 'prev' | 'next') => {\n      this.scroll(direction);\n    });\n\n    this.updateCurrentCenterdElemIndex(this.carousel.nativeElement);\n  }\n\n  public ngOnDestroy(): void {\n    if (this.scrollSubscription) {\n      this.scrollSubscription.unsubscribe();\n    }\n  }\n\n  public scroll(direction: 'prev' | 'next'): void {\n    const carouselEl = this.carousel.nativeElement;\n    const children = Array.from(carouselEl.children) as HTMLElement[];\n  \n    if (direction === 'next') {\n      this.currentCenteredElemIndex = Math.min(this.currentCenteredElemIndex + 1, children.length - 1);\n\n    } else {\n      this.currentCenteredElemIndex = Math.max(this.currentCenteredElemIndex - 1, 0);\n    }\n  \n    const targetElement = children[this.currentCenteredElemIndex];\n  \n    this.isProgrammaticScroll = true; \n  \n    if (!targetElement) {\n      return;\n    }\n    \n    switch (this.currentCenteredElemIndex) {\n      case 0:\n        carouselEl.scrollTo({ left: 0, behavior: 'smooth' });\n    \n        break;\n      case children.length - 1:\n        const scrollEnd = carouselEl.scrollWidth - carouselEl.clientWidth;\n\n        carouselEl.scrollTo({ left: scrollEnd, behavior: 'smooth' });\n\n        break;\n      default:\n        targetElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\n    }  \n\n    setTimeout(() => {\n      this.isProgrammaticScroll = false;\n    }, this.scrollAnimationDuration);\n  }\n\n  @HostListener('window:resize')\n  public onResize(): void {\n    const carouselEl = this.carousel.nativeElement;\n\n    const carouselCenter = carouselEl.offsetWidth / 2;\n    const scrollLeft = carouselEl.scrollLeft;\n\n    const children = Array.from(carouselEl.children) as HTMLElement[];\n\n    const currentlyCenteredElement = children.find(child => {\n      const childLeft = child.offsetLeft - scrollLeft;\n      const childCenter = childLeft + child.offsetWidth / 2;\n      return Math.abs(childCenter - carouselCenter) < child.offsetWidth / 2;\n    });\n\n    if (currentlyCenteredElement) {\n      const targetLeft = currentlyCenteredElement.offsetLeft;\n      const targetCenter = targetLeft + currentlyCenteredElement.offsetWidth / 2;\n      const newScrollPosition = targetCenter - carouselCenter;\n\n      carouselEl.scrollTo({ left: newScrollPosition, behavior: 'smooth' });\n    }\n  }\n\n  public onNavigationKeydown(event: KeyboardEvent, direction: 'prev' | 'next'): void {\n    if (event.code === 'Space' || event.code === 'Enter') {\n      this.scroll(direction);\n\n      return;\n    }\n\n    if (event.code === 'ArrowLeft' || event.code === 'ArrowRight') {\n      if (this.nextButton.nativeElement === document.activeElement) {\n        this.prevButton.nativeElement.focus();\n      } else {\n        this.nextButton.nativeElement.focus();\n      }\n    }\n  }\n\n  public onScroll(event: Event): void {\n    const container = event.target as HTMLElement;\n  \n    this.updateProgressBar(container);\n  \n    if (this.isProgrammaticScroll) {\n      return;\n    }\n\n    this.updateCurrentCenterdElemIndex(container);\n  }\n\n  private updateProgressBar(container: HTMLElement) {\n    const scrollLeft = container.scrollLeft;\n    const scrollWidth = container.scrollWidth - container.clientWidth;\n\n    this.scrollProgress = ((scrollLeft / scrollWidth) * 100) - (104 / container.clientWidth);\n  }\n\n  private updateCurrentCenterdElemIndex(container: HTMLElement): void {\n    const carouselEl = this.carousel.nativeElement;\n    const carouselWidth = carouselEl.offsetWidth;\n    const carouselCenter = container.scrollLeft + carouselWidth / 2;\n\n    const children = Array.from(carouselEl.children) as HTMLElement[];\n  \n    let closestIndex = 0;\n    let minDistance = Infinity;\n  \n    for (let i = 0; i < children.length; i++) {\n      const childCenter = children[i].offsetLeft + children[i].offsetWidth / 2;\n      const distance = Math.abs(carouselCenter - childCenter);\n\n      if (distance < minDistance) {\n        minDistance = distance;\n        closestIndex = i;\n      }\n    }\n\n    this.currentCenteredElemIndex = closestIndex;\n  }\n\n  private applyScrollSnapAlign(): void {\n    const children = this.carousel.nativeElement.children;\n\n    for (let i = 0; i < children.length; i++) {\n      (children[i] as HTMLElement).style.scrollSnapAlign = 'center';\n    }\n  }\n\n  private adjustCarouselSpacing(): void {\n    const carouselEl = this.carousel.nativeElement;\n  \n    const carouselRect = carouselEl.getBoundingClientRect();\n    const rightCalculatedValue = window.innerWidth - carouselRect.right;\n  \n    const leftCalculatedValue = carouselRect.left;\n\n    carouselEl.style.marginRight = `-${rightCalculatedValue}px`;\n    carouselEl.style.paddingRight = `${rightCalculatedValue}px`;\n\n    carouselEl.style.marginLeft = `-${leftCalculatedValue}px`;\n    carouselEl.style.paddingLeft = `${leftCalculatedValue}px`;\n  }\n\n}\n","<div class=\"carousel-container\">\n    <div #carousel class=\"carousel\" (scroll)=\"onScroll($event)\">\n            <ng-content></ng-content>\n    </div>\n</div>\n\n<div class=\"carousel-navigation\">\n    <div class=\"navigation-buttons-wrapper\">\n        <div \n            #prevButton\n            tabindex=\"0\"\n            class=\"chevron-wrapper\"\n            aria-label=\"Scroll to previous item\"\n            (click)=\"scrollSubject.next('prev')\"\n            (keydown)=\"onNavigationKeydown($event, 'prev')\">\n                <div class=\"chevron prev\"></div>\n        </div>\n\n        <div\n            #nextButton\n            tabindex=\"0\"\n            class=\"chevron-wrapper\"\n            aria-label=\"Scroll to next item\"\n            (click)=\"scrollSubject.next('next')\"\n            (keydown)=\"onNavigationKeydown($event, 'next')\">\n                <div class=\"chevron next\"></div>\n        </div>\n    </div>\n\n    <div #progressBarContainer class=\"scroll-bar-container\">\n        <div class=\"scroll-indicator\" [style.width.%]=\"scrollProgress\"></div>\n    </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"apexara-ng-components-carousel.mjs","sources":["../../../../projects/apexara/ng-components/carousel/src/carousel.component.ts","../../../../projects/apexara/ng-components/carousel/src/carousel.component.html","../../../../projects/apexara/ng-components/carousel/apexara-ng-components-carousel.ts"],"sourcesContent":["import { Component, ViewChild, ElementRef, HostListener, inject, PLATFORM_ID, signal } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\n\nimport { Subject, Subscription, throttleTime } from 'rxjs';\n\n@Component({\n  selector: 'apex-carousel',\n  templateUrl: './carousel.component.html',\n  styleUrls: ['./carousel.component.css'],\n})\n\nexport class ApexCarouselComponent {\n\n  constructor() { }\n\n  @ViewChild('carousel') carousel!: ElementRef<HTMLDivElement>;\n\n  @ViewChild('prevButton') prevButton!: ElementRef;\n  @ViewChild('nextButton') nextButton!: ElementRef;\n\n  public scrollProgress = signal(0);\n  public scrollAnimationDuration = 500; // ms\n  \n  public scrollSubject = new Subject<'prev' | 'next'>();\n\n  private currentCenteredElemIndex = 0; \n\n  private isProgrammaticScroll = false;\n  private scrollSubscription!: Subscription;\n\n  private platformId = inject(PLATFORM_ID);\n\n  public ngAfterViewInit(): void {\n    this.applyScrollSnapAlign();\n\n    if (isPlatformBrowser(this.platformId)) {\n      this.adjustCarouselSpacing();\n    }\n\n    this.scrollSubject.pipe(throttleTime(this.scrollAnimationDuration)).subscribe((direction: 'prev' | 'next') => {\n      this.scroll(direction);\n    });\n\n    this.updateCurrentCenterdElemIndex(this.carousel.nativeElement);\n  }\n\n  public ngOnDestroy(): void {\n    if (this.scrollSubscription) {\n      this.scrollSubscription.unsubscribe();\n    }\n  }\n\n  public scroll(direction: 'prev' | 'next'): void {\n    const carouselEl = this.carousel.nativeElement;\n    const children = Array.from(carouselEl.children) as HTMLElement[];\n  \n    if (direction === 'next') {\n      this.currentCenteredElemIndex = Math.min(this.currentCenteredElemIndex + 1, children.length - 1);\n\n    } else {\n      this.currentCenteredElemIndex = Math.max(this.currentCenteredElemIndex - 1, 0);\n    }\n  \n    const targetElement = children[this.currentCenteredElemIndex];\n  \n    this.isProgrammaticScroll = true; \n  \n    if (!targetElement) {\n      return;\n    }\n    \n    switch (this.currentCenteredElemIndex) {\n      case 0:\n        carouselEl.scrollTo({ left: 0, behavior: 'smooth' });\n    \n        break;\n      case children.length - 1:\n        const scrollEnd = carouselEl.scrollWidth - carouselEl.clientWidth;\n\n        carouselEl.scrollTo({ left: scrollEnd, behavior: 'smooth' });\n\n        break;\n      default:\n        targetElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\n    }  \n\n    setTimeout(() => {\n      this.isProgrammaticScroll = false;\n    }, this.scrollAnimationDuration);\n  }\n\n  @HostListener('window:resize')\n  public onResize(): void {\n    const carouselEl = this.carousel.nativeElement;\n\n    const carouselCenter = carouselEl.offsetWidth / 2;\n    const scrollLeft = carouselEl.scrollLeft;\n\n    const children = Array.from(carouselEl.children) as HTMLElement[];\n\n    const currentlyCenteredElement = children.find(child => {\n      const childLeft = child.offsetLeft - scrollLeft;\n      const childCenter = childLeft + child.offsetWidth / 2;\n      return Math.abs(childCenter - carouselCenter) < child.offsetWidth / 2;\n    });\n\n    if (currentlyCenteredElement) {\n      const targetLeft = currentlyCenteredElement.offsetLeft;\n      const targetCenter = targetLeft + currentlyCenteredElement.offsetWidth / 2;\n      const newScrollPosition = targetCenter - carouselCenter;\n\n      carouselEl.scrollTo({ left: newScrollPosition, behavior: 'smooth' });\n    }\n  }\n\n  public onNavigationKeydown(event: KeyboardEvent, direction: 'prev' | 'next'): void {\n    if (event.code === 'Space' || event.code === 'Enter') {\n      this.scroll(direction);\n\n      return;\n    }\n\n    if (event.code === 'ArrowLeft' || event.code === 'ArrowRight') {\n      if (this.nextButton.nativeElement === document.activeElement) {\n        this.prevButton.nativeElement.focus();\n      } else {\n        this.nextButton.nativeElement.focus();\n      }\n    }\n  }\n\n  public onScroll(event: Event): void {\n    const container = event.target as HTMLElement;\n  \n    this.updateProgressBar(container);\n  \n    if (this.isProgrammaticScroll) {\n      return;\n    }\n\n    this.updateCurrentCenterdElemIndex(container);\n  }\n\n  private updateProgressBar(container: HTMLElement) {\n    const scrollLeft = container.scrollLeft;\n    const scrollWidth = container.scrollWidth - container.clientWidth;\n\n    this.scrollProgress.set(((scrollLeft / scrollWidth) * 100) - (104 / container.clientWidth));\n  }\n\n  private updateCurrentCenterdElemIndex(container: HTMLElement): void {\n    const carouselEl = this.carousel.nativeElement;\n    const carouselWidth = carouselEl.offsetWidth;\n    const carouselCenter = container.scrollLeft + carouselWidth / 2;\n\n    const children = Array.from(carouselEl.children) as HTMLElement[];\n  \n    let closestIndex = 0;\n    let minDistance = Infinity;\n  \n    for (let i = 0; i < children.length; i++) {\n      const childCenter = children[i].offsetLeft + children[i].offsetWidth / 2;\n      const distance = Math.abs(carouselCenter - childCenter);\n\n      if (distance < minDistance) {\n        minDistance = distance;\n        closestIndex = i;\n      }\n    }\n\n    this.currentCenteredElemIndex = closestIndex;\n  }\n\n  private applyScrollSnapAlign(): void {\n    const children = this.carousel.nativeElement.children;\n\n    for (let i = 0; i < children.length; i++) {\n      (children[i] as HTMLElement).style.scrollSnapAlign = 'center';\n    }\n  }\n\n  private adjustCarouselSpacing(): void {\n    const carouselEl = this.carousel.nativeElement;\n  \n    const carouselRect = carouselEl.getBoundingClientRect();\n    const rightCalculatedValue = window.innerWidth - carouselRect.right;\n  \n    const leftCalculatedValue = carouselRect.left;\n\n    carouselEl.style.marginRight = `-${rightCalculatedValue}px`;\n    carouselEl.style.paddingRight = `${rightCalculatedValue}px`;\n\n    carouselEl.style.marginLeft = `-${leftCalculatedValue}px`;\n    carouselEl.style.paddingLeft = `${leftCalculatedValue}px`;\n  }\n\n}\n","<div class=\"carousel-container\">\n    <div #carousel class=\"carousel\" (scroll)=\"onScroll($event)\">\n            <ng-content></ng-content>\n    </div>\n</div>\n\n<div class=\"carousel-navigation\">\n    <div class=\"navigation-buttons-wrapper\">\n        <div \n            #prevButton\n            tabindex=\"0\"\n            class=\"chevron-wrapper\"\n            aria-label=\"Scroll to previous item\"\n            (click)=\"scrollSubject.next('prev')\"\n            (keydown)=\"onNavigationKeydown($event, 'prev')\">\n                <div class=\"chevron prev\"></div>\n        </div>\n\n        <div\n            #nextButton\n            tabindex=\"0\"\n            class=\"chevron-wrapper\"\n            aria-label=\"Scroll to next item\"\n            (click)=\"scrollSubject.next('next')\"\n            (keydown)=\"onNavigationKeydown($event, 'next')\">\n                <div class=\"chevron next\"></div>\n        </div>\n    </div>\n\n    <div #progressBarContainer class=\"scroll-bar-container\">\n        <div class=\"scroll-indicator\" [style.width.%]=\"scrollProgress()\"></div>\n    </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/apexara-ng-components-checkbox.mjs

@@ -1,21 +1,21 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, HostListener, Output, Input, Component } from '@angular/core';
+import { EventEmitter, signal, HostListener, Output, Input, Component } from '@angular/core';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i1 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TouchedChangeEvent, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { filter } from 'rxjs';
 import { TooltipPosition, ApexTooltipDirective } from '@apexara/ng-components/tooltip';
 
 class ApexCheckboxComponent {
-    constructor(changeDetectorRef) {
-        this.changeDetectorRef = changeDetectorRef;
+    constructor() {
         this.checked = false;
         this.disabled = false;
         this.tooltip = null;
         this.options = null;
         this.clickChange = new EventEmitter();
         this.tooltipPosition = TooltipPosition;
-        this.controlInvalid = false;
-        this.errorLabel = '';
+        this.controlInvalid = signal(false, ...(ngDevMode ? [{ debugName: "controlInvalid" }] : []));
+        this.errorLabel = signal('', ...(ngDevMode ? [{ debugName: "errorLabel" }] : []));
         this.control = null;
     }
     ngAfterViewInit() {
@@ -41,6 +41,11 @@ class ApexCheckboxComponent {
         this.controlSubscription = this.control.statusChanges.subscribe(() => {
             this.initChange();
         });
+        this.controlSubscription.add(this.control.events
+            .pipe(filter(event => event instanceof TouchedChangeEvent))
+            .subscribe(() => {
+            this.initChange();
+        }));
     }
     initChange() {
         if (!this.control) {
@@ -48,27 +53,26 @@ class ApexCheckboxComponent {
         }
         this.checkIfControlInvalid(this.control);
         this.getErrorLabel();
-        this.changeDetectorRef.detectChanges();
     }
     checkIfControlInvalid(control) {
-        this.controlInvalid = control.touched && control.invalid;
+        this.controlInvalid.set(control.touched && control.invalid);
     }
     getErrorLabel() {
-        this.errorLabel = '';
+        this.errorLabel.set('');
         const options = this.options;
         const formGroup = options.formGroup;
         const formControlName = options.formControlName;
-        if (formGroup && formControlName && options.errors && this.controlInvalid) {
+        if (formGroup && formControlName && options.errors && this.controlInvalid()) {
             for (const error in options.errors) {
                 if (formGroup.controls[formControlName].hasError(error)) {
-                    this.errorLabel = options.errors[error];
+                    this.errorLabel.set(options.errors[error]);
                     return;
                 }
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexCheckboxComponent, isStandalone: true, selector: "apex-checkbox", inputs: { checked: "checked", disabled: "disabled", tooltip: "tooltip", options: "options" }, outputs: { clickChange: "clickChange" }, host: { listeners: { "focusout": "onFocusOut()" } }, ngImport: i0, template: "@if (options && options.formGroup && options.formControlName) {\n    <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n\n    @if (options && options.errors) {\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n            {{ errorLabel }}\n        </div>\n    }\n} @else {\n    <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n  \n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n}\n\n<ng-template #content>\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (tooltip) {\n        <div class=\"tooltip-svg\">\n            <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g stroke=\"#fff\">\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        </div>\n    }\n</ng-template>\n", styles: [":host{touch-action:manipulation}.checkbox{display:flex;align-items:center;position:relative;cursor:pointer}.checkbox.disabled{opacity:var(--apex-checkbox-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.checkbox span{color:var(--apex-checkbox-text-color, #0B1222);text-wrap:wrap;word-break:break-all;font-size:var(--apex-checkbox-font-size, 14px)}.checkbox span:not(:empty){margin:0 4px 0 8px}.checkbox input[type=checkbox]{width:20px;min-width:20px;height:20px;display:block}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;cursor:pointer;outline:var(--apex-checkbox-outline-color, none);background-color:var(--apex-checkbox-background-color, #F7F8FB);border:1px solid var(--apex-checkbox-border-color, #E9E9E9);border-radius:4px;transition:box-shadow .3s,border .25s;box-shadow:inset 0 0 0 0 var(--apex-checkbox-border-color);margin:0}.checkbox.checked input[type=checkbox]{box-shadow:inset 0 0 0 10px var(--apex-checkbox-box-shadow-color, #F96138)}.checkbox-svg{width:20px;height:20px;position:absolute}.checkbox .checkbox-svg svg{position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%)}.checkbox .checkbox-svg svg path{fill:none;stroke:none;pointer-events:none;stroke:transparent;stroke-linecap:round;stroke-linejoin:round}.checkbox.checked .checkbox-svg svg path{stroke:var(--apex-checkbox-arrow-color, #FFFFFF)}.tooltip-svg{width:16px;height:16px}.tooltip-svg g{stroke:var(--apex-checkbox-tooltip-icon-stroke, #FFFFFF)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-checkbox-error-color, #F96138)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexCheckboxComponent, isStandalone: true, selector: "apex-checkbox", inputs: { checked: "checked", disabled: "disabled", tooltip: "tooltip", options: "options" }, outputs: { clickChange: "clickChange" }, host: { listeners: { "focusout": "onFocusOut()" } }, ngImport: i0, template: "@if (options && options.formGroup && options.formControlName) {\n    <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n\n    @if (options && options.errors) {\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\">\n            {{ errorLabel() }}\n        </div>\n    }\n} @else {\n    <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n  \n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n}\n\n<ng-template #content>\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (tooltip) {\n        <div class=\"tooltip-svg\">\n            <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g stroke=\"#fff\">\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        </div>\n    }\n</ng-template>\n", styles: [":host{touch-action:manipulation}.checkbox{display:flex;align-items:center;position:relative;cursor:pointer}.checkbox.disabled{opacity:var(--apex-checkbox-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.checkbox span{color:var(--apex-checkbox-text-color, #0B1222);text-wrap:wrap;word-break:break-all;font-size:var(--apex-checkbox-font-size, 14px)}.checkbox span:not(:empty){margin:0 4px 0 8px}.checkbox input[type=checkbox]{width:20px;min-width:20px;height:20px;display:block}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;cursor:pointer;outline:var(--apex-checkbox-outline-color, none);background-color:var(--apex-checkbox-background-color, #F7F8FB);border:1px solid var(--apex-checkbox-border-color, #E9E9E9);border-radius:4px;transition:box-shadow .3s,border .25s;box-shadow:inset 0 0 0 0 var(--apex-checkbox-border-color);margin:0}.checkbox.checked input[type=checkbox]{box-shadow:inset 0 0 0 10px var(--apex-checkbox-box-shadow-color, #F96138)}.checkbox-svg{width:20px;height:20px;position:absolute}.checkbox .checkbox-svg svg{position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%)}.checkbox .checkbox-svg svg path{fill:none;stroke:none;pointer-events:none;stroke:transparent;stroke-linecap:round;stroke-linejoin:round}.checkbox.checked .checkbox-svg svg path{stroke:var(--apex-checkbox-arrow-color, #FFFFFF)}.tooltip-svg{width:16px;height:16px}.tooltip-svg g{stroke:var(--apex-checkbox-tooltip-icon-stroke, #FFFFFF)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-checkbox-error-color, #F96138)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCheckboxComponent, decorators: [{
             type: Component,
@@ -78,8 +82,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         NgTemplateOutlet,
                         ApexTooltipDirective,
                         ReactiveFormsModule,
-                    ], template: "@if (options && options.formGroup && options.formControlName) {\n    <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n\n    @if (options && options.errors) {\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n            {{ errorLabel }}\n        </div>\n    }\n} @else {\n    <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n  \n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n}\n\n<ng-template #content>\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (tooltip) {\n        <div class=\"tooltip-svg\">\n            <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g stroke=\"#fff\">\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        </div>\n    }\n</ng-template>\n", styles: [":host{touch-action:manipulation}.checkbox{display:flex;align-items:center;position:relative;cursor:pointer}.checkbox.disabled{opacity:var(--apex-checkbox-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.checkbox span{color:var(--apex-checkbox-text-color, #0B1222);text-wrap:wrap;word-break:break-all;font-size:var(--apex-checkbox-font-size, 14px)}.checkbox span:not(:empty){margin:0 4px 0 8px}.checkbox input[type=checkbox]{width:20px;min-width:20px;height:20px;display:block}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;cursor:pointer;outline:var(--apex-checkbox-outline-color, none);background-color:var(--apex-checkbox-background-color, #F7F8FB);border:1px solid var(--apex-checkbox-border-color, #E9E9E9);border-radius:4px;transition:box-shadow .3s,border .25s;box-shadow:inset 0 0 0 0 var(--apex-checkbox-border-color);margin:0}.checkbox.checked input[type=checkbox]{box-shadow:inset 0 0 0 10px var(--apex-checkbox-box-shadow-color, #F96138)}.checkbox-svg{width:20px;height:20px;position:absolute}.checkbox .checkbox-svg svg{position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%)}.checkbox .checkbox-svg svg path{fill:none;stroke:none;pointer-events:none;stroke:transparent;stroke-linecap:round;stroke-linejoin:round}.checkbox.checked .checkbox-svg svg path{stroke:var(--apex-checkbox-arrow-color, #FFFFFF)}.tooltip-svg{width:16px;height:16px}.tooltip-svg g{stroke:var(--apex-checkbox-tooltip-icon-stroke, #FFFFFF)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-checkbox-error-color, #F96138)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { checked: [{
+                    ], template: "@if (options && options.formGroup && options.formControlName) {\n    <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n\n    @if (options && options.errors) {\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\">\n            {{ errorLabel() }}\n        </div>\n    }\n} @else {\n    <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n  \n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n}\n\n<ng-template #content>\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (tooltip) {\n        <div class=\"tooltip-svg\">\n            <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g stroke=\"#fff\">\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        </div>\n    }\n</ng-template>\n", styles: [":host{touch-action:manipulation}.checkbox{display:flex;align-items:center;position:relative;cursor:pointer}.checkbox.disabled{opacity:var(--apex-checkbox-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.checkbox span{color:var(--apex-checkbox-text-color, #0B1222);text-wrap:wrap;word-break:break-all;font-size:var(--apex-checkbox-font-size, 14px)}.checkbox span:not(:empty){margin:0 4px 0 8px}.checkbox input[type=checkbox]{width:20px;min-width:20px;height:20px;display:block}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;cursor:pointer;outline:var(--apex-checkbox-outline-color, none);background-color:var(--apex-checkbox-background-color, #F7F8FB);border:1px solid var(--apex-checkbox-border-color, #E9E9E9);border-radius:4px;transition:box-shadow .3s,border .25s;box-shadow:inset 0 0 0 0 var(--apex-checkbox-border-color);margin:0}.checkbox.checked input[type=checkbox]{box-shadow:inset 0 0 0 10px var(--apex-checkbox-box-shadow-color, #F96138)}.checkbox-svg{width:20px;height:20px;position:absolute}.checkbox .checkbox-svg svg{position:absolute;top:50%;left:50%;transform:translateY(-50%) translate(-50%)}.checkbox .checkbox-svg svg path{fill:none;stroke:none;pointer-events:none;stroke:transparent;stroke-linecap:round;stroke-linejoin:round}.checkbox.checked .checkbox-svg svg path{stroke:var(--apex-checkbox-arrow-color, #FFFFFF)}.tooltip-svg{width:16px;height:16px}.tooltip-svg g{stroke:var(--apex-checkbox-tooltip-icon-stroke, #FFFFFF)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-checkbox-error-color, #F96138)}\n"] }]
+        }], propDecorators: { checked: [{
                 type: Input
             }], disabled: [{
                 type: Input

package/fesm2022/apexara-ng-components-checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"apexara-ng-components-checkbox.mjs","sources":["../../../../projects/apexara/ng-components/checkbox/src/checkbox.component.ts","../../../../projects/apexara/ng-components/checkbox/src/checkbox.component.html","../../../../projects/apexara/ng-components/checkbox/apexara-ng-components-checkbox.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, ChangeDetectorRef, HostListener } from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { AbstractControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\nimport { Subscription } from 'rxjs';\n\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexCheckboxOptions {\n  formGroup?: FormGroup;\n  formControlName?: string;\n  errors?: ApexCheckboxErrors;\n}\n\nexport interface ApexCheckboxErrors {\n  [x: string]: string;\n}\n\n@Component({\n  selector: 'apex-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.css'],\n  imports: [\n    NgClass,\n    FormsModule,\n    NgTemplateOutlet,\n    ApexTooltipDirective,\n    ReactiveFormsModule,\n  ],\n})\n\nexport class ApexCheckboxComponent {\n\n  constructor(private changeDetectorRef: ChangeDetectorRef) { }\n\n  @Input() checked = false;\n  @Input() disabled = false;\n  @Input() tooltip: string | null = null;\n\n  @Input() options: ApexCheckboxOptions | null = null;\n\n  @Output() clickChange = new EventEmitter<boolean>();\n\n  public tooltipPosition = TooltipPosition;\n  public controlInvalid = false;\n  public errorLabel = '';\n\n  private controlSubscription!: Subscription;\n  private control: AbstractControl | null = null;\n\n  public ngAfterViewInit(): void {\n    this.setControl();\n  }\n\n  public ngOnDestroy(): void {\n    if (this.controlSubscription) {\n      this.controlSubscription.unsubscribe();\n    }\n  }\n\n  @HostListener('focusout')\n  onFocusOut(): void {\n    this.initChange();\n  }\n\n  public onChange(): void {\n    this.clickChange.emit(this.checked);\n  }\n\n  private setControl(): void {\n    if (!this.options || !this.options.formGroup || !this.options.formControlName || !this.options.formGroup.get(this.options.formControlName)) {\n      return;\n    }\n\n    this.control = this.options.formGroup.controls[this.options.formControlName];\n\n    this.disabled = this.control.disabled;\n\n    this.controlSubscription = this.control.statusChanges.subscribe(() => {\n      this.initChange();\n    });\n  }\n\n  private initChange(): void {\n    if (!this.control) {\n      return;\n    }\n\n    this.checkIfControlInvalid(this.control);\n    this.getErrorLabel();\n    this.changeDetectorRef.detectChanges();\n  }\n\n  private checkIfControlInvalid(control: AbstractControl): void {\n    this.controlInvalid = control.touched && control.invalid;\n  }\n\n  private getErrorLabel(): void {\n    this.errorLabel = '';\n\n    const options = this.options!;\n    const formGroup = options.formGroup;\n    const formControlName = options.formControlName;\n\n    if (formGroup && formControlName && options.errors && this.controlInvalid) {\n      for (const error in options.errors) {\n        if (formGroup.controls[formControlName].hasError(error)) {\n          this.errorLabel = options.errors[error];\n\n          return;\n        }\n      }\n    }\n  }\n\n}\n","@if (options && options.formGroup && options.formControlName) {\n    <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n\n    @if (options && options.errors) {\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n            {{ errorLabel }}\n        </div>\n    }\n} @else {\n    <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n  \n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n}\n\n<ng-template #content>\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (tooltip) {\n        <div class=\"tooltip-svg\">\n            <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g stroke=\"#fff\">\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        </div>\n    }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"apexara-ng-components-checkbox.mjs","sources":["../../../../projects/apexara/ng-components/checkbox/src/checkbox.component.ts","../../../../projects/apexara/ng-components/checkbox/src/checkbox.component.html","../../../../projects/apexara/ng-components/checkbox/apexara-ng-components-checkbox.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, HostListener, signal } from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { AbstractControl, FormGroup, FormsModule, ReactiveFormsModule, TouchedChangeEvent } from '@angular/forms';\n\nimport { Subscription, filter } from 'rxjs';\n\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexCheckboxOptions {\n  formGroup?: FormGroup;\n  formControlName?: string;\n  errors?: ApexCheckboxErrors;\n}\n\nexport interface ApexCheckboxErrors {\n  [x: string]: string;\n}\n\n@Component({\n  selector: 'apex-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.css'],\n  imports: [\n    NgClass,\n    FormsModule,\n    NgTemplateOutlet,\n    ApexTooltipDirective,\n    ReactiveFormsModule,\n  ],\n})\n\nexport class ApexCheckboxComponent {\n\n  @Input() checked = false;\n  @Input() disabled = false;\n  @Input() tooltip: string | null = null;\n\n  @Input() options: ApexCheckboxOptions | null = null;\n\n  @Output() clickChange = new EventEmitter<boolean>();\n\n  public tooltipPosition = TooltipPosition;\n  public controlInvalid = signal(false);\n  public errorLabel = signal('');\n\n  private controlSubscription!: Subscription;\n  private control: AbstractControl | null = null;\n\n  public ngAfterViewInit(): void {\n    this.setControl();\n  }\n\n  public ngOnDestroy(): void {\n    if (this.controlSubscription) {\n      this.controlSubscription.unsubscribe();\n    }\n  }\n\n  @HostListener('focusout')\n  onFocusOut(): void {\n    this.initChange();\n  }\n\n  public onChange(): void {\n    this.clickChange.emit(this.checked);\n  }\n\n  private setControl(): void {\n    if (!this.options || !this.options.formGroup || !this.options.formControlName || !this.options.formGroup.get(this.options.formControlName)) {\n      return;\n    }\n\n    this.control = this.options.formGroup.controls[this.options.formControlName];\n\n    this.disabled = this.control.disabled;\n\n    this.controlSubscription = this.control.statusChanges.subscribe(() => {\n      this.initChange();\n    });\n\n    this.controlSubscription.add(\n      this.control.events\n        .pipe(filter(event => event instanceof TouchedChangeEvent))\n        .subscribe(() => {\n          this.initChange();\n        })\n    );\n  }\n\n  private initChange(): void {\n    if (!this.control) {\n      return;\n    }\n\n    this.checkIfControlInvalid(this.control);\n    this.getErrorLabel();\n  }\n\n  private checkIfControlInvalid(control: AbstractControl): void {\n    this.controlInvalid.set(control.touched && control.invalid);\n  }\n\n  private getErrorLabel(): void {\n    this.errorLabel.set('');\n\n    const options = this.options!;\n    const formGroup = options.formGroup;\n    const formControlName = options.formControlName;\n\n    if (formGroup && formControlName && options.errors && this.controlInvalid()) {\n      for (const error in options.errors) {\n        if (formGroup.controls[formControlName].hasError(error)) {\n          this.errorLabel.set(options.errors[error]);\n\n          return;\n        }\n      }\n    }\n  }\n\n}\n","@if (options && options.formGroup && options.formControlName) {\n    <label class=\"checkbox\" [ngClass]=\"{ checked: options.formGroup.controls[options.formControlName].value, disabled }\" [formGroup]=\"options.formGroup\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [formControlName]=\"options.formControlName\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n\n    @if (options && options.errors) {\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid() }\">\n            {{ errorLabel() }}\n        </div>\n    }\n} @else {\n    <label class=\"checkbox\" [ngClass]=\"{ checked, disabled }\">\n        <input #input type=\"checkbox\" name=\"checkbox\" [(ngModel)]=\"checked\" [disabled]=\"disabled\" (change)=\"onChange()\"/>\n\n        <div class=\"checkbox-svg\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"8\" viewBox=\"0 0 11 8\" fill=\"none\">\n                <path d=\"M1 4L4 7L10 1\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n        </div>\n\n  \n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n}\n\n<ng-template #content>\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (tooltip) {\n        <div class=\"tooltip-svg\">\n            <svg [apexTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g stroke=\"#fff\">\n                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                </g>\n            </svg>\n        </div>\n    }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}