@apexara/ng-components 1.0.0

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

@@ -0,0 +1,66 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component } from '@angular/core';
+import * as i1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { Subject, throttleTime } from 'rxjs';
+import { IpiImageComponent } from '@apexara/ng-components/image';
+
+const defaultOptions = {
+    throttleTimeMs: 300,
+};
+class IpiButtonComponent {
+    constructor() {
+        this.link = null;
+        this.state = null;
+        this.ariaLabel = 'Button';
+        this.focusChange = new EventEmitter();
+        this.clickChange = new EventEmitter();
+        this.clickSubject = new Subject();
+    }
+    ngAfterViewInit() {
+        this.options = { ...defaultOptions, ...this.options };
+        this.clickSubject
+            .pipe(throttleTime(this.options.throttleTimeMs))
+            .subscribe(event => this.clickChange.emit(event));
+    }
+    onClick(event) {
+        this.clickSubject.next(event);
+    }
+    onFocusChange(event) {
+        this.focusChange.emit(event);
+    }
+    handleKeydown(event) {
+        if (event.code === 'Enter' || event.code === 'Space') {
+            event.preventDefault();
+            this.onClick(event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: IpiButtonComponent, isStandalone: true, selector: "ipi-button", inputs: { link: "link", state: "state", options: "options", ariaLabel: "ariaLabel" }, outputs: { focusChange: "focusChange", clickChange: "clickChange" }, ngImport: i0, template: "<a [class]=\"['button']\"\n   [routerLink]=\"link\"\n   [state]=\"state\"\n   (click)=\"onClick($event)\"\n   (keydown)=\"handleKeydown($event)\"\n   (focusin)=\"onFocusChange($event)\"\n   (focusout)=\"onFocusChange($event)\"\n   tabindex=\"0\"\n   role=\"button\"\n   [attr.aria-label]=\"ariaLabel\">\n   \n    <div class=\"button-wrapper\">\n        @if (options && options.iconLeft) {\n            <div class=\"icon left\">\n                <ipi-img [src]=\"'assets/img/' + options.iconLeft\" [ariaLabel]=\"'Left side of button icon.'\"></ipi-img>\n            </div>\n        }\n\n        <span>\n            <ng-content></ng-content>\n        </span>\n\n        @if (options && options.iconRight) {\n            <div class=\"icon right\">\n                <ipi-img [src]=\"'assets/img/' + options.iconRight\" [ariaLabel]=\"'Right side of button icon.'\"></ipi-img>\n            </div>\n        }\n    </div>\n</a>\n", styles: [":host{display:block}:host(.fluid) .button{width:100%;min-width:unset}:host(.mobile) .button{font-size:14px}:host(.disabled) .button{cursor:not-allowed;background-color:var(--ipi-button-disabled-background-color, #E7E7E7)}:host(.table) .button{height:38px;min-width:unset;margin-top:0}a:focus{outline:var(--ipi-button-focus-outline, 2px solid #F96138)}.button-wrapper{display:flex;width:100%;justify-content:center;align-items:center;padding:0 16px}.icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center}.icon.right{margin-left:8px}.icon.left{margin-right:8px}.icon ipi-img{max-width:20px;max-height:20px;display:flex;justify-content:center;align-items:center}.icon.left ipi-img path{fill:var(--ipi-button-left-svg-fill, #FFFFFF);stroke:var(--ipi-button-left-svg-stroke, #ffffff00)}.icon.right ipi-img path{fill:var(--ipi-button-right-svg-fill, #FFFFFF);stroke:var(--ipi-button-right-svg-stroke, #ffffff00)}.button{width:fit-content;min-width:164px;height:44px;cursor:pointer;display:flex;align-items:center;color:var(--ipi-button-text-color, #FFFFFF);border-radius:var(--ipi-button-border-radius, 4px);border:1px solid var(--ipi-button-border-color, none);background-color:var(--ipi-button-background-color, #0B1222);text-decoration:none;box-sizing:border-box}.button:hover{opacity:.8}.button span{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IpiImageComponent, selector: "ipi-img", inputs: ["src", "ariaLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipi-button', imports: [
+                        RouterModule,
+                        IpiImageComponent
+                    ], template: "<a [class]=\"['button']\"\n   [routerLink]=\"link\"\n   [state]=\"state\"\n   (click)=\"onClick($event)\"\n   (keydown)=\"handleKeydown($event)\"\n   (focusin)=\"onFocusChange($event)\"\n   (focusout)=\"onFocusChange($event)\"\n   tabindex=\"0\"\n   role=\"button\"\n   [attr.aria-label]=\"ariaLabel\">\n   \n    <div class=\"button-wrapper\">\n        @if (options && options.iconLeft) {\n            <div class=\"icon left\">\n                <ipi-img [src]=\"'assets/img/' + options.iconLeft\" [ariaLabel]=\"'Left side of button icon.'\"></ipi-img>\n            </div>\n        }\n\n        <span>\n            <ng-content></ng-content>\n        </span>\n\n        @if (options && options.iconRight) {\n            <div class=\"icon right\">\n                <ipi-img [src]=\"'assets/img/' + options.iconRight\" [ariaLabel]=\"'Right side of button icon.'\"></ipi-img>\n            </div>\n        }\n    </div>\n</a>\n", styles: [":host{display:block}:host(.fluid) .button{width:100%;min-width:unset}:host(.mobile) .button{font-size:14px}:host(.disabled) .button{cursor:not-allowed;background-color:var(--ipi-button-disabled-background-color, #E7E7E7)}:host(.table) .button{height:38px;min-width:unset;margin-top:0}a:focus{outline:var(--ipi-button-focus-outline, 2px solid #F96138)}.button-wrapper{display:flex;width:100%;justify-content:center;align-items:center;padding:0 16px}.icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center}.icon.right{margin-left:8px}.icon.left{margin-right:8px}.icon ipi-img{max-width:20px;max-height:20px;display:flex;justify-content:center;align-items:center}.icon.left ipi-img path{fill:var(--ipi-button-left-svg-fill, #FFFFFF);stroke:var(--ipi-button-left-svg-stroke, #ffffff00)}.icon.right ipi-img path{fill:var(--ipi-button-right-svg-fill, #FFFFFF);stroke:var(--ipi-button-right-svg-stroke, #ffffff00)}.button{width:fit-content;min-width:164px;height:44px;cursor:pointer;display:flex;align-items:center;color:var(--ipi-button-text-color, #FFFFFF);border-radius:var(--ipi-button-border-radius, 4px);border:1px solid var(--ipi-button-border-color, none);background-color:var(--ipi-button-background-color, #0B1222);text-decoration:none;box-sizing:border-box}.button:hover{opacity:.8}.button span{font-weight:600}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { link: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], focusChange: [{
+                type: Output
+            }], clickChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IpiButtonComponent };
+//# sourceMappingURL=apexara-ng-components-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"apexara-ng-components-button.mjs","sources":["../../../../projects/apexara/ng-components/button/src/button.component.ts","../../../../projects/apexara/ng-components/button/src/button.component.html","../../../../projects/apexara/ng-components/button/apexara-ng-components-button.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\nimport { RouterModule } from '@angular/router';\n\nimport { Subject, throttleTime } from 'rxjs';\n\nimport { IpiImageComponent } from '@apexara/ng-components/image';\n\nexport interface IpiButtonOptions {\n  iconLeft?: string;\n  iconRight?: string;\n  throttleTimeMs?: number;\n}\n\nconst defaultOptions: IpiButtonOptions = {\n  throttleTimeMs: 300,\n}\n\n@Component({\n  selector: 'ipi-button',\n  templateUrl: './button.component.html',\n  styleUrls: ['./button.component.css'],\n  imports: [\n    RouterModule,\n    IpiImageComponent\n],\n})\n\nexport class IpiButtonComponent {\n\n  @Input() link: string | null = null;\n  @Input() state: any | null = null;\n\n  @Input() options!: IpiButtonOptions;\n\n  @Input() ariaLabel: string = 'Button';\n\n  @Output() focusChange = new EventEmitter<FocusEvent>();\n  @Output() clickChange = new EventEmitter<KeyboardEvent | PointerEvent | MouseEvent>();\n\n  private clickSubject = new Subject<KeyboardEvent | PointerEvent | MouseEvent>();\n\n  constructor() { }\n\n  public ngAfterViewInit(): void {\n    this.options = { ...defaultOptions, ...this.options };\n\n    this.clickSubject\n      .pipe(throttleTime(this.options.throttleTimeMs!))\n      .subscribe(event => this.clickChange.emit(event));\n  }\n\n  public onClick(event: KeyboardEvent | PointerEvent | MouseEvent): void {\n    this.clickSubject.next(event);\n  }\n\n  public onFocusChange(event: FocusEvent): void {\n    this.focusChange.emit(event);\n  }\n\n  public handleKeydown(event: KeyboardEvent): void {\n    if (event.code === 'Enter' || event.code === 'Space') {\n      event.preventDefault();\n\n      this.onClick(event);\n    }\n  }\n\n}\n","<a [class]=\"['button']\"\n   [routerLink]=\"link\"\n   [state]=\"state\"\n   (click)=\"onClick($event)\"\n   (keydown)=\"handleKeydown($event)\"\n   (focusin)=\"onFocusChange($event)\"\n   (focusout)=\"onFocusChange($event)\"\n   tabindex=\"0\"\n   role=\"button\"\n   [attr.aria-label]=\"ariaLabel\">\n   \n    <div class=\"button-wrapper\">\n        @if (options && options.iconLeft) {\n            <div class=\"icon left\">\n                <ipi-img [src]=\"'assets/img/' + options.iconLeft\" [ariaLabel]=\"'Left side of button icon.'\"></ipi-img>\n            </div>\n        }\n\n        <span>\n            <ng-content></ng-content>\n        </span>\n\n        @if (options && options.iconRight) {\n            <div class=\"icon right\">\n                <ipi-img [src]=\"'assets/img/' + options.iconRight\" [ariaLabel]=\"'Right side of button icon.'\"></ipi-img>\n            </div>\n        }\n    </div>\n</a>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,cAAc,GAAqB;AACvC,IAAA,cAAc,EAAE,GAAG;CACpB;MAYY,kBAAkB,CAAA;AAc7B,IAAA,WAAA,GAAA;QAZS,IAAA,CAAA,IAAI,GAAkB,IAAI;QAC1B,IAAA,CAAA,KAAK,GAAe,IAAI;QAIxB,IAAA,CAAA,SAAS,GAAW,QAAQ;AAE3B,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAc;AAC5C,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAA6C;AAE7E,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,OAAO,EAA6C;IAE/D;IAET,eAAe,GAAA;AACpB,QAAA,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE;AAErD,QAAA,IAAI,CAAC;aACF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,cAAe,CAAC;AAC/C,aAAA,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrD;AAEO,IAAA,OAAO,CAAC,KAAgD,EAAA;AAC7D,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;IAC/B;AAEO,IAAA,aAAa,CAAC,KAAiB,EAAA;AACpC,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;IAC9B;AAEO,IAAA,aAAa,CAAC,KAAoB,EAAA;AACvC,QAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YACpD,KAAK,CAAC,cAAc,EAAE;AAEtB,YAAA,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QACrB;IACF;8GAtCW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5B/B,25BA6BA,EAAA,MAAA,EAAA,CAAA,m0CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDNI,YAAY,gRACZ,iBAAiB,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIR,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAV9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,OAAA,EAGb;wBACP,YAAY;wBACZ;AACH,qBAAA,EAAA,QAAA,EAAA,25BAAA,EAAA,MAAA,EAAA,CAAA,m0CAAA,CAAA,EAAA;;sBAKE;;sBACA;;sBAEA;;sBAEA;;sBAEA;;sBACA;;;AEtCH;;AAEG;;;;"}

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

@@ -0,0 +1,161 @@
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, HostListener, ViewChild, Component } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { Subject, throttleTime } from 'rxjs';
+
+class IpiCarouselComponent {
+    constructor() {
+        this.scrollProgress = 0;
+        this.scrollAnimationDuration = 500; // ms
+        this.scrollSubject = new Subject();
+        this.currentCenteredElemIndex = 0;
+        this.isProgrammaticScroll = false;
+        this.platformId = inject(PLATFORM_ID);
+    }
+    ngAfterViewInit() {
+        this.applyScrollSnapAlign();
+        if (isPlatformBrowser(this.platformId)) {
+            this.adjustCarouselSpacing();
+        }
+        this.scrollSubject.pipe(throttleTime(this.scrollAnimationDuration)).subscribe((direction) => {
+            this.scroll(direction);
+        });
+        this.updateCurrentCenterdElemIndex(this.carousel.nativeElement);
+    }
+    ngOnDestroy() {
+        if (this.scrollSubscription) {
+            this.scrollSubscription.unsubscribe();
+        }
+    }
+    scroll(direction) {
+        const carouselEl = this.carousel.nativeElement;
+        const children = Array.from(carouselEl.children);
+        if (direction === 'next') {
+            this.currentCenteredElemIndex = Math.min(this.currentCenteredElemIndex + 1, children.length - 1);
+        }
+        else {
+            this.currentCenteredElemIndex = Math.max(this.currentCenteredElemIndex - 1, 0);
+        }
+        const targetElement = children[this.currentCenteredElemIndex];
+        this.isProgrammaticScroll = true;
+        if (!targetElement) {
+            return;
+        }
+        switch (this.currentCenteredElemIndex) {
+            case 0:
+                carouselEl.scrollTo({ left: 0, behavior: 'smooth' });
+                break;
+            case children.length - 1:
+                const scrollEnd = carouselEl.scrollWidth - carouselEl.clientWidth;
+                carouselEl.scrollTo({ left: scrollEnd, behavior: 'smooth' });
+                break;
+            default:
+                targetElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+        }
+        setTimeout(() => {
+            this.isProgrammaticScroll = false;
+        }, this.scrollAnimationDuration);
+    }
+    onResize() {
+        const carouselEl = this.carousel.nativeElement;
+        const carouselCenter = carouselEl.offsetWidth / 2;
+        const scrollLeft = carouselEl.scrollLeft;
+        const children = Array.from(carouselEl.children);
+        const currentlyCenteredElement = children.find(child => {
+            const childLeft = child.offsetLeft - scrollLeft;
+            const childCenter = childLeft + child.offsetWidth / 2;
+            return Math.abs(childCenter - carouselCenter) < child.offsetWidth / 2;
+        });
+        if (currentlyCenteredElement) {
+            const targetLeft = currentlyCenteredElement.offsetLeft;
+            const targetCenter = targetLeft + currentlyCenteredElement.offsetWidth / 2;
+            const newScrollPosition = targetCenter - carouselCenter;
+            carouselEl.scrollTo({ left: newScrollPosition, behavior: 'smooth' });
+        }
+    }
+    onNavigationKeydown(event, direction) {
+        if (event.code === 'Space' || event.code === 'Enter') {
+            this.scroll(direction);
+            return;
+        }
+        if (event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
+            if (this.nextButton.nativeElement === document.activeElement) {
+                this.prevButton.nativeElement.focus();
+            }
+            else {
+                this.nextButton.nativeElement.focus();
+            }
+        }
+    }
+    onScroll(event) {
+        const container = event.target;
+        this.updateProgressBar(container);
+        if (this.isProgrammaticScroll) {
+            return;
+        }
+        this.updateCurrentCenterdElemIndex(container);
+    }
+    updateProgressBar(container) {
+        const scrollLeft = container.scrollLeft;
+        const scrollWidth = container.scrollWidth - container.clientWidth;
+        this.scrollProgress = ((scrollLeft / scrollWidth) * 100) - (104 / container.clientWidth);
+    }
+    updateCurrentCenterdElemIndex(container) {
+        const carouselEl = this.carousel.nativeElement;
+        const carouselWidth = carouselEl.offsetWidth;
+        const carouselCenter = container.scrollLeft + carouselWidth / 2;
+        const children = Array.from(carouselEl.children);
+        let closestIndex = 0;
+        let minDistance = Infinity;
+        for (let i = 0; i < children.length; i++) {
+            const childCenter = children[i].offsetLeft + children[i].offsetWidth / 2;
+            const distance = Math.abs(carouselCenter - childCenter);
+            if (distance < minDistance) {
+                minDistance = distance;
+                closestIndex = i;
+            }
+        }
+        this.currentCenteredElemIndex = closestIndex;
+    }
+    applyScrollSnapAlign() {
+        const children = this.carousel.nativeElement.children;
+        for (let i = 0; i < children.length; i++) {
+            children[i].style.scrollSnapAlign = 'center';
+        }
+    }
+    adjustCarouselSpacing() {
+        const carouselEl = this.carousel.nativeElement;
+        const carouselRect = carouselEl.getBoundingClientRect();
+        const rightCalculatedValue = window.innerWidth - carouselRect.right;
+        const leftCalculatedValue = carouselRect.left;
+        carouselEl.style.marginRight = `-${rightCalculatedValue}px`;
+        carouselEl.style.paddingRight = `${rightCalculatedValue}px`;
+        carouselEl.style.marginLeft = `-${leftCalculatedValue}px`;
+        carouselEl.style.paddingLeft = `${leftCalculatedValue}px`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: IpiCarouselComponent, isStandalone: true, selector: "ipi-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(--ipi-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(--ipi-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(--ipi-carousel-button-border-hover-color, #FFFFFF)}.chevron-wrapper:hover .chevron{border-top:3px solid var(--ipi-carousel-chevron-hover-color, #FFFFFF);border-left:3px solid var(--ipi-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(--ipi-carousel-chevron-color, #FFFFFF);border-left:3px solid var(--ipi-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(--ipi-carousel-scrollbar-container-color, #020617);border-radius:10px;margin:.5rem 0}.scroll-indicator{left:0;height:1px;background-color:var(--ipi-carousel-scrollbar-color, #FFFFFF);transition:width .1s}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiCarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipi-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(--ipi-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(--ipi-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(--ipi-carousel-button-border-hover-color, #FFFFFF)}.chevron-wrapper:hover .chevron{border-top:3px solid var(--ipi-carousel-chevron-hover-color, #FFFFFF);border-left:3px solid var(--ipi-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(--ipi-carousel-chevron-color, #FFFFFF);border-left:3px solid var(--ipi-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(--ipi-carousel-scrollbar-container-color, #020617);border-radius:10px;margin:.5rem 0}.scroll-indicator{left:0;height:1px;background-color:var(--ipi-carousel-scrollbar-color, #FFFFFF);transition:width .1s}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { carousel: [{
+                type: ViewChild,
+                args: ['carousel']
+            }], prevButton: [{
+                type: ViewChild,
+                args: ['prevButton']
+            }], nextButton: [{
+                type: ViewChild,
+                args: ['nextButton']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IpiCarouselComponent };
+//# sourceMappingURL=apexara-ng-components-carousel.mjs.map

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

@@ -0,0 +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: 'ipi-carousel',\n  templateUrl: './carousel.component.html',\n  styleUrls: ['./carousel.component.css'],\n})\n\nexport class IpiCarouselComponent {\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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"}

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

@@ -0,0 +1,64 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, 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 { TooltipPosition, IpiTooltipDirective } from '@apexara/ng-components/tooltip';
+
+class IpiCheckboxComponent {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.checked = false;
+        this.disabled = false;
+        this.tooltip = null;
+        this.options = null;
+        this.clickChange = new EventEmitter();
+        this.tooltipPosition = TooltipPosition;
+    }
+    ngAfterViewInit() {
+        this.checkIfControlDisabled();
+    }
+    ngOnDestroy() {
+        if (this.controlSubscription) {
+            this.controlSubscription.unsubscribe();
+        }
+    }
+    onChange() {
+        this.clickChange.emit(this.checked);
+    }
+    checkIfControlDisabled() {
+        if (!this.options || !this.options.formGroup || !this.options.formControlName || !this.options.formGroup.get(this.options.formControlName)) {
+            return;
+        }
+        this.disabled = this.options.formGroup.controls[this.options.formControlName].disabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: IpiCheckboxComponent, isStandalone: true, selector: "ipi-checkbox", inputs: { checked: "checked", disabled: "disabled", tooltip: "tooltip", options: "options" }, outputs: { clickChange: "clickChange" }, 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} @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 [ipiTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"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(--ipi-checkbox-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.checkbox span{color:var(--ipi-checkbox-text-color, #0B1222);text-wrap:wrap;word-break:break-all;font-size:var(--ipi-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(--ipi-checkbox-outline-color, none);background-color:var(--ipi-checkbox-background-color, #F7F8FB);border:1px solid var(--ipi-checkbox-border-color, #E9E9E9);border-radius:4px;transition:box-shadow .3s,border .25s;box-shadow:inset 0 0 0 0 var(--ipi-checkbox-border-color);margin:0}.checkbox.checked input[type=checkbox]{box-shadow:inset 0 0 0 10px var(--ipi-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(--ipi-checkbox-arrow-color, #FFFFFF)}.tooltip-svg{width:16px;height:16px}.tooltip-svg g{stroke:var(--ipi-checkbox-tooltip-icon-stroke, #FFFFFF)}\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: IpiTooltipDirective, selector: "[ipiTooltip]", inputs: ["ipiTooltip", "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: IpiCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipi-checkbox', imports: [
+                        NgClass,
+                        FormsModule,
+                        NgTemplateOutlet,
+                        IpiTooltipDirective,
+                        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} @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 [ipiTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"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(--ipi-checkbox-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.checkbox span{color:var(--ipi-checkbox-text-color, #0B1222);text-wrap:wrap;word-break:break-all;font-size:var(--ipi-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(--ipi-checkbox-outline-color, none);background-color:var(--ipi-checkbox-background-color, #F7F8FB);border:1px solid var(--ipi-checkbox-border-color, #E9E9E9);border-radius:4px;transition:box-shadow .3s,border .25s;box-shadow:inset 0 0 0 0 var(--ipi-checkbox-border-color);margin:0}.checkbox.checked input[type=checkbox]{box-shadow:inset 0 0 0 10px var(--ipi-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(--ipi-checkbox-arrow-color, #FFFFFF)}.tooltip-svg{width:16px;height:16px}.tooltip-svg g{stroke:var(--ipi-checkbox-tooltip-icon-stroke, #FFFFFF)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], clickChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IpiCheckboxComponent };
+//# sourceMappingURL=apexara-ng-components-checkbox.mjs.map

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

@@ -0,0 +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 } from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\nimport { Subscription } from 'rxjs';\n\nimport { IpiTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface IpiCheckboxOptions {\n  formGroup?: FormGroup;\n  formControlName?: string;\n}\n\n@Component({\n  selector: 'ipi-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.css'],\n  imports: [\n    NgClass,\n    FormsModule,\n    NgTemplateOutlet,\n    IpiTooltipDirective,\n    ReactiveFormsModule,\n  ],\n})\n\nexport class IpiCheckboxComponent {\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: IpiCheckboxOptions | null = null;\n\n  @Output() clickChange = new EventEmitter<boolean>();\n\n  public tooltipPosition = TooltipPosition;\n\n  private controlSubscription!: Subscription;\n\n  public ngAfterViewInit(): void {\n    this.checkIfControlDisabled();\n  }\n\n  public ngOnDestroy(): void {\n    if (this.controlSubscription) {\n      this.controlSubscription.unsubscribe();\n    }\n  }\n\n  public onChange(): void {\n    this.clickChange.emit(this.checked);\n  }\n\n  private checkIfControlDisabled(): void {\n    if (!this.options || !this.options.formGroup || !this.options.formControlName || !this.options.formGroup.get(this.options.formControlName)) {\n      return;\n    }\n\n    this.disabled = this.options.formGroup.controls[this.options.formControlName].disabled;\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} @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 [ipiTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"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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"}

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

@@ -0,0 +1,26 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component } from '@angular/core';
+
+class IpiChipComponent {
+    constructor() {
+        this.closeIcon = false;
+        this.closeChange = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: IpiChipComponent, isStandalone: true, selector: "ipi-chip", inputs: { closeIcon: "closeIcon" }, outputs: { closeChange: "closeChange" }, ngImport: i0, template: "<div class=\"container\">\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (closeIcon) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" (click)=\"closeChange.emit()\">\n            <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n        </svg>\n    }\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:fit-content;max-width:100%;height:28px;display:flex;align-items:center;color:var(--ipi-chip-color, #FFFFFF);background-color:var(--ipi-chip-background-color, #0B1222);font-size:var(--ipi-chip-font-size, 12px);font-weight:600;box-sizing:border-box;border-radius:28px;padding:6px 12px}.container span{max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}svg{min-width:16px;margin-left:6px;cursor:pointer}svg path{fill:var(--ipi-chip-icon-color, #FFFFFF)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipi-chip', template: "<div class=\"container\">\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (closeIcon) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" (click)=\"closeChange.emit()\">\n            <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n        </svg>\n    }\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:fit-content;max-width:100%;height:28px;display:flex;align-items:center;color:var(--ipi-chip-color, #FFFFFF);background-color:var(--ipi-chip-background-color, #0B1222);font-size:var(--ipi-chip-font-size, 12px);font-weight:600;box-sizing:border-box;border-radius:28px;padding:6px 12px}.container span{max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}svg{min-width:16px;margin-left:6px;cursor:pointer}svg path{fill:var(--ipi-chip-icon-color, #FFFFFF)}\n"] }]
+        }], propDecorators: { closeIcon: [{
+                type: Input
+            }], closeChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IpiChipComponent };
+//# sourceMappingURL=apexara-ng-components-chip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"apexara-ng-components-chip.mjs","sources":["../../../../projects/apexara/ng-components/chip/src/chip.component.ts","../../../../projects/apexara/ng-components/chip/src/chip.component.html","../../../../projects/apexara/ng-components/chip/apexara-ng-components-chip.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n  selector: 'ipi-chip',\n  templateUrl: './chip.component.html',\n  styleUrls: ['./chip.component.css'],\n})\n\nexport class IpiChipComponent {\n\n  @Input() closeIcon = false;\n\n  @Output() closeChange = new EventEmitter<void>();\n\n}\n","<div class=\"container\">\n    <span>\n        <ng-content></ng-content>\n    </span>\n\n    @if (closeIcon) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" (click)=\"closeChange.emit()\">\n            <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n        </svg>\n    }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAQa,gBAAgB,CAAA;AAN7B,IAAA,WAAA,GAAA;QAQW,IAAA,CAAA,SAAS,GAAG,KAAK;AAEhB,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAQ;AAEjD,IAAA;8GANY,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,iJCR7B,wcAWA,EAAA,MAAA,EAAA,CAAA,gjBAAA,CAAA,EAAA,CAAA,CAAA;;2FDHa,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAN5B,SAAS;+BACE,UAAU,EAAA,QAAA,EAAA,wcAAA,EAAA,MAAA,EAAA,CAAA,gjBAAA,CAAA,EAAA;;sBAOnB;;sBAEA;;;AEZH;;AAEG;;;;"}