@sarasanalytics-com/design-system 0.0.43 → 0.0.44

package/esm2022/lib/card-carousel/card-carousel.component.mjs

@@ -0,0 +1,87 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { CardComponent } from '../card/card.component';
+import { IconComponent } from '../icon/icon.component';
+import { CardCustomHeaderComponent } from '../card/card-custom-header/card-custom-header.component';
+import * as i0 from "@angular/core";
+export class CardCarouselComponent {
+    constructor() {
+        this.cards = [];
+        this.interval = 5000;
+        this.autoPlay = true;
+        this.showNavigationArrows = true;
+        this.showIndicators = true;
+        this.showBrandFooter = true;
+        this.visibleLogos = [];
+        this.currentIndex = 0;
+    }
+    ngOnInit() {
+        this.updateVisibleLogos();
+        if (this.autoPlay) {
+            this.startTimer();
+        }
+    }
+    ngOnDestroy() {
+        this.stopTimer();
+    }
+    startTimer() {
+        this.stopTimer();
+        this.timer = setInterval(() => {
+            this.next();
+        }, this.interval);
+    }
+    stopTimer() {
+        if (this.timer) {
+            clearInterval(this.timer);
+        }
+    }
+    resetTimer() {
+        clearInterval(this.timer);
+        if (this.autoPlay) {
+            this.startTimer();
+        }
+    }
+    selectCard(index) {
+        this.currentIndex = index;
+        this.resetTimer();
+        this.updateVisibleLogos();
+    }
+    next() {
+        this.currentIndex = (this.currentIndex + 1) % this.cards.length;
+        this.resetTimer();
+        this.updateVisibleLogos();
+    }
+    prev() {
+        this.currentIndex = (this.currentIndex - 1 + this.cards.length) % this.cards.length;
+        this.resetTimer();
+        this.updateVisibleLogos();
+    }
+    updateVisibleLogos() {
+        this.visibleLogos = [];
+        for (let i = -1; i <= 4; i++) {
+            const index = (this.currentIndex + i + this.cards.length) % this.cards.length;
+            this.visibleLogos.push({
+                ...this.cards[index],
+                index: index
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardCarouselComponent, isStandalone: true, selector: "sa-card-carousel", inputs: { cards: "cards", interval: "interval", autoPlay: "autoPlay", showNavigationArrows: "showNavigationArrows", showIndicators: "showIndicators", showBrandFooter: "showBrandFooter" }, ngImport: i0, template: "<!-- card-carousel.component.html -->\n<div class=\"carousel-container\">\n    <div class=\"carousel-top-wrapper\">\n        <div class=\"controls\">\n            @if (showIndicators) {\n            <div class=\"dots\">\n                @for (card of cards; track card.id; let i = $index) {\n                <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\n                }\n            </div>\n            }\n            @if (showNavigationArrows) {\n            <div class=\"arrow-controls\">\n                <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\n                <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\n            </div>\n            }\n        </div>\n\n        <div class=\"card-container\">\n            <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n                [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex].body\"\n                [showHeaderBodyDivider]=\"true\">\n                <sa-card-title-header>\n                    <div class=\"sa-card-custom-header-container\">\n                        <sa-icon [icon]=\"cards[currentIndex].avatarIcon\" size=\"50\"></sa-icon>\n                        <div class=\"sa-card-title-subtitle-container\">\n                            <div class=\"sa-card-custom-title\">{{ cards[currentIndex].title }}</div>\n                            <div class=\"sa-card-subtitle\">{{ cards[currentIndex].subtitle }}</div>\n                        </div>\n                        <div class=\"sa-card-titleIcon\">\n                            <sa-icon [icon]=\"cards[currentIndex].logoIcon\" customClass=\"logo-style\"></sa-icon>\n                        </div>\n                    </div>\n                </sa-card-title-header>\n            </sa-card>\n        </div>\n    </div>\n\n    @if (showBrandFooter) {\n    <div class=\"brand-logos-container\">\n        <div class=\"brand-logos\">\n            @for (logo of visibleLogos; track $index) {\n            <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"$index === 1\" (click)=\"selectCard(logo.index)\"\n                [customClass]=\"'logo-style'\">\n            </sa-icon>\n            }\n        </div>\n    </div>\n    }\n\n\n\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center}.controls{display:flex;align-items:center;margin:0 0 var(--medium-20px) 0;width:100%;min-height:var(--medium-32px)}.dots{display:inline-flex;gap:var(--small-4px);align-items:center;width:17rem;overflow:hidden}.arrow-controls{display:flex;align-items:center;margin-top:var(--small-4px);gap:var(--small-12px);margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:var(--small-6px);height:var(--small-6px);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);transition:transform .3s ease;justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:transform .3s ease,opacity .3s ease;display:flex;align-items:center;justify-content:center;height:var(--medium-32px);max-height:var(--medium-32px);min-height:var(--medium-32px)}.brand-logos sa-icon.active{opacity:1}.sa-icon.logo-style>svg{width:fit-content;height:fit-content}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent], encapsulation: ViewEncapsulation.None, template: "<!-- card-carousel.component.html -->\n<div class=\"carousel-container\">\n    <div class=\"carousel-top-wrapper\">\n        <div class=\"controls\">\n            @if (showIndicators) {\n            <div class=\"dots\">\n                @for (card of cards; track card.id; let i = $index) {\n                <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\n                }\n            </div>\n            }\n            @if (showNavigationArrows) {\n            <div class=\"arrow-controls\">\n                <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\n                <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\n            </div>\n            }\n        </div>\n\n        <div class=\"card-container\">\n            <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n                [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex].body\"\n                [showHeaderBodyDivider]=\"true\">\n                <sa-card-title-header>\n                    <div class=\"sa-card-custom-header-container\">\n                        <sa-icon [icon]=\"cards[currentIndex].avatarIcon\" size=\"50\"></sa-icon>\n                        <div class=\"sa-card-title-subtitle-container\">\n                            <div class=\"sa-card-custom-title\">{{ cards[currentIndex].title }}</div>\n                            <div class=\"sa-card-subtitle\">{{ cards[currentIndex].subtitle }}</div>\n                        </div>\n                        <div class=\"sa-card-titleIcon\">\n                            <sa-icon [icon]=\"cards[currentIndex].logoIcon\" customClass=\"logo-style\"></sa-icon>\n                        </div>\n                    </div>\n                </sa-card-title-header>\n            </sa-card>\n        </div>\n    </div>\n\n    @if (showBrandFooter) {\n    <div class=\"brand-logos-container\">\n        <div class=\"brand-logos\">\n            @for (logo of visibleLogos; track $index) {\n            <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"$index === 1\" (click)=\"selectCard(logo.index)\"\n                [customClass]=\"'logo-style'\">\n            </sa-icon>\n            }\n        </div>\n    </div>\n    }\n\n\n\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center}.controls{display:flex;align-items:center;margin:0 0 var(--medium-20px) 0;width:100%;min-height:var(--medium-32px)}.dots{display:inline-flex;gap:var(--small-4px);align-items:center;width:17rem;overflow:hidden}.arrow-controls{display:flex;align-items:center;margin-top:var(--small-4px);gap:var(--small-12px);margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:var(--small-6px);height:var(--small-6px);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);transition:transform .3s ease;justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:transform .3s ease,opacity .3s ease;display:flex;align-items:center;justify-content:center;height:var(--medium-32px);max-height:var(--medium-32px);min-height:var(--medium-32px)}.brand-logos sa-icon.active{opacity:1}.sa-icon.logo-style>svg{width:fit-content;height:fit-content}\n"] }]
+        }], propDecorators: { cards: [{
+                type: Input
+            }], interval: [{
+                type: Input
+            }], autoPlay: [{
+                type: Input
+            }], showNavigationArrows: [{
+                type: Input
+            }], showIndicators: [{
+                type: Input
+            }], showBrandFooter: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC1jYXJvdXNlbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NhcmQtY2Fyb3VzZWwvY2FyZC1jYXJvdXNlbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NhcmQtY2Fyb3VzZWwvY2FyZC1jYXJvdXNlbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBYSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2RixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLHlEQUF5RCxDQUFDOztBQVlwRyxNQUFNLE9BQU8scUJBQXFCO0lBUmxDO1FBU1csVUFBSyxHQUFtQixFQUFFLENBQUM7UUFDM0IsYUFBUSxHQUFXLElBQUksQ0FBQztRQUN4QixhQUFRLEdBQVksSUFBSSxDQUFDO1FBQ3pCLHlCQUFvQixHQUFZLElBQUksQ0FBQztRQUNyQyxtQkFBYyxHQUFZLElBQUksQ0FBQztRQUMvQixvQkFBZSxHQUFZLElBQUksQ0FBQztRQUV6QyxpQkFBWSxHQUF5QyxFQUFFLENBQUM7UUFFeEQsaUJBQVksR0FBVyxDQUFDLENBQUM7S0ErRDFCO0lBNURDLFFBQVE7UUFDTixJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztRQUMxQixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNsQixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDcEIsQ0FBQztJQUNILENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7SUFHRCxVQUFVO1FBQ1IsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxLQUFLLEdBQUcsV0FBVyxDQUFDLEdBQUcsRUFBRTtZQUM1QixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDZCxDQUFDLEVBQUUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ3BCLENBQUM7SUFFRCxTQUFTO1FBQ1AsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDZixhQUFhLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzVCLENBQUM7SUFDSCxDQUFDO0lBRUQsVUFBVTtRQUNSLGFBQWEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDMUIsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDbEIsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQ3BCLENBQUM7SUFDSCxDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQWE7UUFDdEIsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7UUFDMUIsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQ2xCLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFFRCxJQUFJO1FBQ0YsSUFBSSxDQUFDLFlBQVksR0FBRyxDQUFDLElBQUksQ0FBQyxZQUFZLEdBQUcsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUM7UUFDaEUsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQ2xCLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFFRCxJQUFJO1FBQ0YsSUFBSSxDQUFDLFlBQVksR0FBRyxDQUFDLElBQUksQ0FBQyxZQUFZLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUM7UUFDcEYsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQ2xCLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFFRCxrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLFlBQVksR0FBRyxFQUFFLENBQUM7UUFDdkIsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUM7WUFDN0IsTUFBTSxLQUFLLEdBQUcsQ0FBQyxJQUFJLENBQUMsWUFBWSxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDO1lBQzlFLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDO2dCQUNyQixHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDO2dCQUNwQixLQUFLLEVBQUUsS0FBSzthQUNiLENBQUMsQ0FBQztRQUNMLENBQUM7SUFDSCxDQUFDOzhHQXhFVSxxQkFBcUI7a0dBQXJCLHFCQUFxQix3UUNmbEMsZzBFQXFETSxzNUNEM0NNLGFBQWEsc1RBQUUsYUFBYSxvSUFBRSx5QkFBeUI7OzJGQUt0RCxxQkFBcUI7a0JBUmpDLFNBQVM7K0JBQ0Usa0JBQWtCLGNBQ2hCLElBQUksV0FDUCxDQUFDLGFBQWEsRUFBRSxhQUFhLEVBQUUseUJBQXlCLENBQUMsaUJBR25ELGlCQUFpQixDQUFDLElBQUk7OEJBRzVCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csb0JBQW9CO3NCQUE1QixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgT25EZXN0cm95LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ2FyZENvbXBvbmVudCB9IGZyb20gJy4uL2NhcmQvY2FyZC5jb21wb25lbnQnO1xuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gJy4uL2ljb24vaWNvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgQ2FyZEN1c3RvbUhlYWRlckNvbXBvbmVudCB9IGZyb20gJy4uL2NhcmQvY2FyZC1jdXN0b20taGVhZGVyL2NhcmQtY3VzdG9tLWhlYWRlci5jb21wb25lbnQnO1xuaW1wb3J0IHsgQ2FyZENhcm91c2VsIH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcy9jYXJkLWNhcm91c2VsLWludGVyZmFjZSc7XG5cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2EtY2FyZC1jYXJvdXNlbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDYXJkQ29tcG9uZW50LCBJY29uQ29tcG9uZW50LCBDYXJkQ3VzdG9tSGVhZGVyQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL2NhcmQtY2Fyb3VzZWwuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vY2FyZC1jYXJvdXNlbC5jb21wb25lbnQuY3NzJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZVxufSlcbmV4cG9ydCBjbGFzcyBDYXJkQ2Fyb3VzZWxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIEBJbnB1dCgpIGNhcmRzOiBDYXJkQ2Fyb3VzZWxbXSA9IFtdO1xuICBASW5wdXQoKSBpbnRlcnZhbDogbnVtYmVyID0gNTAwMDtcbiAgQElucHV0KCkgYXV0b1BsYXk6IGJvb2xlYW4gPSB0cnVlO1xuICBASW5wdXQoKSBzaG93TmF2aWdhdGlvbkFycm93czogYm9vbGVhbiA9IHRydWU7XG4gIEBJbnB1dCgpIHNob3dJbmRpY2F0b3JzOiBib29sZWFuID0gdHJ1ZTtcbiAgQElucHV0KCkgc2hvd0JyYW5kRm9vdGVyOiBib29sZWFuID0gdHJ1ZTtcblxuICB2aXNpYmxlTG9nb3M6IChDYXJkQ2Fyb3VzZWwgJiB7IGluZGV4OiBudW1iZXIgfSlbXSA9IFtdO1xuXG4gIGN1cnJlbnRJbmRleDogbnVtYmVyID0gMDtcbiAgcHJpdmF0ZSB0aW1lcjogYW55O1xuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMudXBkYXRlVmlzaWJsZUxvZ29zKCk7XG4gICAgaWYgKHRoaXMuYXV0b1BsYXkpIHtcbiAgICAgIHRoaXMuc3RhcnRUaW1lcigpO1xuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMuc3RvcFRpbWVyKCk7XG4gIH1cblxuXG4gIHN0YXJ0VGltZXIoKSB7XG4gICAgdGhpcy5zdG9wVGltZXIoKTtcbiAgICB0aGlzLnRpbWVyID0gc2V0SW50ZXJ2YWwoKCkgPT4ge1xuICAgICAgdGhpcy5uZXh0KCk7XG4gICAgfSwgdGhpcy5pbnRlcnZhbCk7XG4gIH1cblxuICBzdG9wVGltZXIoKSB7XG4gICAgaWYgKHRoaXMudGltZXIpIHtcbiAgICAgIGNsZWFySW50ZXJ2YWwodGhpcy50aW1lcik7XG4gICAgfVxuICB9XG5cbiAgcmVzZXRUaW1lcigpIHtcbiAgICBjbGVhckludGVydmFsKHRoaXMudGltZXIpO1xuICAgIGlmICh0aGlzLmF1dG9QbGF5KSB7XG4gICAgICB0aGlzLnN0YXJ0VGltZXIoKTtcbiAgICB9XG4gIH1cblxuICBzZWxlY3RDYXJkKGluZGV4OiBudW1iZXIpIHtcbiAgICB0aGlzLmN1cnJlbnRJbmRleCA9IGluZGV4O1xuICAgIHRoaXMucmVzZXRUaW1lcigpO1xuICAgIHRoaXMudXBkYXRlVmlzaWJsZUxvZ29zKCk7XG4gIH1cblxuICBuZXh0KCkge1xuICAgIHRoaXMuY3VycmVudEluZGV4ID0gKHRoaXMuY3VycmVudEluZGV4ICsgMSkgJSB0aGlzLmNhcmRzLmxlbmd0aDtcbiAgICB0aGlzLnJlc2V0VGltZXIoKTtcbiAgICB0aGlzLnVwZGF0ZVZpc2libGVMb2dvcygpO1xuICB9XG5cbiAgcHJldigpIHtcbiAgICB0aGlzLmN1cnJlbnRJbmRleCA9ICh0aGlzLmN1cnJlbnRJbmRleCAtIDEgKyB0aGlzLmNhcmRzLmxlbmd0aCkgJSB0aGlzLmNhcmRzLmxlbmd0aDtcbiAgICB0aGlzLnJlc2V0VGltZXIoKTtcbiAgICB0aGlzLnVwZGF0ZVZpc2libGVMb2dvcygpO1xuICB9XG5cbiAgdXBkYXRlVmlzaWJsZUxvZ29zKCkge1xuICAgIHRoaXMudmlzaWJsZUxvZ29zID0gW107XG4gICAgZm9yIChsZXQgaSA9IC0xOyBpIDw9IDQ7IGkrKykge1xuICAgICAgY29uc3QgaW5kZXggPSAodGhpcy5jdXJyZW50SW5kZXggKyBpICsgdGhpcy5jYXJkcy5sZW5ndGgpICUgdGhpcy5jYXJkcy5sZW5ndGg7XG4gICAgICB0aGlzLnZpc2libGVMb2dvcy5wdXNoKHtcbiAgICAgICAgLi4udGhpcy5jYXJkc1tpbmRleF0sXG4gICAgICAgIGluZGV4OiBpbmRleFxuICAgICAgfSk7XG4gICAgfVxuICB9XG59XG4iLCI8IS0tIGNhcmQtY2Fyb3VzZWwuY29tcG9uZW50Lmh0bWwgLS0+XG48ZGl2IGNsYXNzPVwiY2Fyb3VzZWwtY29udGFpbmVyXCI+XG4gICAgPGRpdiBjbGFzcz1cImNhcm91c2VsLXRvcC13cmFwcGVyXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb250cm9sc1wiPlxuICAgICAgICAgICAgQGlmIChzaG93SW5kaWNhdG9ycykge1xuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImRvdHNcIj5cbiAgICAgICAgICAgICAgICBAZm9yIChjYXJkIG9mIGNhcmRzOyB0cmFjayBjYXJkLmlkOyBsZXQgaSA9ICRpbmRleCkge1xuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiZG90XCIgW2NsYXNzLmFjdGl2ZV09XCJpID09PSBjdXJyZW50SW5kZXhcIiAoY2xpY2spPVwic2VsZWN0Q2FyZChpKVwiPjwvc3Bhbj5cbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIEBpZiAoc2hvd05hdmlnYXRpb25BcnJvd3MpIHtcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJhcnJvdy1jb250cm9sc1wiPlxuICAgICAgICAgICAgICAgIDxzYS1pY29uIFtpY29uXT1cIidsZWZ0Q2hldnJvbkNpcmNsZSdcIiBzaXplPVwiMjRcIiAoY2xpY2spPVwicHJldigpXCI+PC9zYS1pY29uPlxuICAgICAgICAgICAgICAgIDxzYS1pY29uIFtpY29uXT1cIidyaWdodENoZXZyb25DaXJjbGUnXCIgc2l6ZT1cIjI0XCIgKGNsaWNrKT1cIm5leHQoKVwiPjwvc2EtaWNvbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgfVxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZC1jb250YWluZXJcIj5cbiAgICAgICAgICAgIDxzYS1jYXJkIFtjdXN0b21XcmFwcGVyQ2xhc3NdPVwiJ3NhLWNhcmQtY3VzdG9tLXdyYXBwZXInXCIgW3dpZHRoXT1cIicyNC4wNjNyZW0nXCIgW2NvbHVtbl09XCJmYWxzZVwiXG4gICAgICAgICAgICAgICAgW3Nob3dDYXJkSGVhZGVyXT1cInRydWVcIiBbc2hvd0NhcmRCb2R5XT1cInRydWVcIiBbYm9keV09XCJjYXJkc1tjdXJyZW50SW5kZXhdLmJvZHlcIlxuICAgICAgICAgICAgICAgIFtzaG93SGVhZGVyQm9keURpdmlkZXJdPVwidHJ1ZVwiPlxuICAgICAgICAgICAgICAgIDxzYS1jYXJkLXRpdGxlLWhlYWRlcj5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNhLWNhcmQtY3VzdG9tLWhlYWRlci1jb250YWluZXJcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxzYS1pY29uIFtpY29uXT1cImNhcmRzW2N1cnJlbnRJbmRleF0uYXZhdGFySWNvblwiIHNpemU9XCI1MFwiPjwvc2EtaWNvbj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzYS1jYXJkLXRpdGxlLXN1YnRpdGxlLWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzYS1jYXJkLWN1c3RvbS10aXRsZVwiPnt7IGNhcmRzW2N1cnJlbnRJbmRleF0udGl0bGUgfX08L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2EtY2FyZC1zdWJ0aXRsZVwiPnt7IGNhcmRzW2N1cnJlbnRJbmRleF0uc3VidGl0bGUgfX08L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNhLWNhcmQtdGl0bGVJY29uXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPHNhLWljb24gW2ljb25dPVwiY2FyZHNbY3VycmVudEluZGV4XS5sb2dvSWNvblwiIGN1c3RvbUNsYXNzPVwibG9nby1zdHlsZVwiPjwvc2EtaWNvbj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8L3NhLWNhcmQtdGl0bGUtaGVhZGVyPlxuICAgICAgICAgICAgPC9zYS1jYXJkPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cblxuICAgIEBpZiAoc2hvd0JyYW5kRm9vdGVyKSB7XG4gICAgPGRpdiBjbGFzcz1cImJyYW5kLWxvZ29zLWNvbnRhaW5lclwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiYnJhbmQtbG9nb3NcIj5cbiAgICAgICAgICAgIEBmb3IgKGxvZ28gb2YgdmlzaWJsZUxvZ29zOyB0cmFjayAkaW5kZXgpIHtcbiAgICAgICAgICAgIDxzYS1pY29uIFtpY29uXT1cImxvZ28ubG9nb0ljb25cIiBbY2xhc3MuYWN0aXZlXT1cIiRpbmRleCA9PT0gMVwiIChjbGljayk9XCJzZWxlY3RDYXJkKGxvZ28uaW5kZXgpXCJcbiAgICAgICAgICAgICAgICBbY3VzdG9tQ2xhc3NdPVwiJ2xvZ28tc3R5bGUnXCI+XG4gICAgICAgICAgICA8L3NhLWljb24+XG4gICAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIH1cblxuXG5cbjwvZGl2PiJdfQ==

package/esm2022/lib/checkbox/checkbox.component.mjs

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { MatChipsModule } from '@angular/material/chips';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FieldType } from '@ngx-formly/core';
+import { isObservable, of } from 'rxjs';
+import { includes as _includes } from 'lodash';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/chips";
+import * as i2 from "@angular/common";
+export class CheckboxComponent extends FieldType {
+    toggleSelection(option) {
+        const selected = this.formControl.value || [];
+        const index = selected.indexOf(option.value);
+        if (index === -1) {
+            selected.push(option.value);
+        }
+        else {
+            selected.splice(index, 1);
+        }
+        this.formControl.setValue([...selected]);
+    }
+    // Checks if an option is selected
+    isSelected(option) {
+        return _includes((this.formControl.value || []), option.value);
+    }
+    get options$() {
+        const options = this.props?.options;
+        return isObservable(options) ? options : of(options || []);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxComponent, isStandalone: true, selector: "sa-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"checkbox-container\">\n    <div class=\"title-container\">\n        @if(props['label']){\n        <div class=\"form-field-title\">\n            <span>{{ props['label'] }}</span>\n        </div>\n        }\n        @if(props['description']){\n        <div class=\"form-field-description\">\n            <span>{{ props['description'] }}</span>\n        </div>\n        }\n    </div>\n    <div class=\"form-field\">\n        <mat-chip-listbox selectable multiple [disabled]=\"props.disabled\" aria-label=\"Select options\">\n            <mat-chip-option *ngFor=\"let option of options$ | async\" class=\"custom-chip\" [value]=\"option.value\"\n                (click)=\"toggleSelection(option)\" [selected]=\"isSelected(option)\">\n                {{ option.label }}\n            </mat-chip-option>\n        </mat-chip-listbox>\n    </div>\n    @if(props['helpText']){\n    <div class=\"form-field-helpText\">\n        <span>{{ props['helpText'] }}</span>\n    </div>\n    }\n</div>", styles: [".checkbox-container{display:flex;flex-direction:column;gap:var(--medium-20px)}.mat-mdc-radio-button~.mat-mdc-radio-button{margin-left:var(--small-16px)}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__graphic{display:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__text-label:not(:only-child){padding-left:var(--small-12px)}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--primary-500);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--grey-100, #EAECF0);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__action--primary:before{border:none}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.2px}::ng-deep .checkbox-container mat-chip-option.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused:before,::ng-deep .checkbox-container.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus:before{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:0;background:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.mat-mdc-chip-option:hover{background-color:var(--structural-neutral1)}.checkbox-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-checkbox', standalone: true, imports: [MatChipsModule, CommonModule, FormsModule], template: "<div class=\"checkbox-container\">\n    <div class=\"title-container\">\n        @if(props['label']){\n        <div class=\"form-field-title\">\n            <span>{{ props['label'] }}</span>\n        </div>\n        }\n        @if(props['description']){\n        <div class=\"form-field-description\">\n            <span>{{ props['description'] }}</span>\n        </div>\n        }\n    </div>\n    <div class=\"form-field\">\n        <mat-chip-listbox selectable multiple [disabled]=\"props.disabled\" aria-label=\"Select options\">\n            <mat-chip-option *ngFor=\"let option of options$ | async\" class=\"custom-chip\" [value]=\"option.value\"\n                (click)=\"toggleSelection(option)\" [selected]=\"isSelected(option)\">\n                {{ option.label }}\n            </mat-chip-option>\n        </mat-chip-listbox>\n    </div>\n    @if(props['helpText']){\n    <div class=\"form-field-helpText\">\n        <span>{{ props['helpText'] }}</span>\n    </div>\n    }\n</div>", styles: [".checkbox-container{display:flex;flex-direction:column;gap:var(--medium-20px)}.mat-mdc-radio-button~.mat-mdc-radio-button{margin-left:var(--small-16px)}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__graphic{display:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__text-label:not(:only-child){padding-left:var(--small-12px)}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--primary-500);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--grey-100, #EAECF0);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__action--primary:before{border:none}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.2px}::ng-deep .checkbox-container mat-chip-option.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused:before,::ng-deep .checkbox-container.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus:before{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:0;background:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.mat-mdc-chip-option:hover{background-color:var(--structural-neutral1)}.checkbox-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9jaGVja2JveC9jaGVja2JveC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NoZWNrYm94L2NoZWNrYm94LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ3pELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQWUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDMUQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQzdDLE9BQU8sRUFBRSxZQUFZLEVBQUUsRUFBRSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ3hDLE9BQU8sRUFBRSxRQUFRLElBQUksU0FBUyxFQUFFLE1BQU0sUUFBUSxDQUFBOzs7O0FBUzlDLE1BQU0sT0FBTyxpQkFBa0IsU0FBUSxTQUFTO0lBQzlDLGVBQWUsQ0FBQyxNQUFXO1FBQ3pCLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxJQUFJLEVBQUUsQ0FBQztRQUM5QyxNQUFNLEtBQUssR0FBRyxRQUFRLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM3QyxJQUFJLEtBQUssS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDO1lBQ2pCLFFBQVEsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzlCLENBQUM7YUFBTSxDQUFDO1lBQ04sUUFBUSxDQUFDLE1BQU0sQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDNUIsQ0FBQztRQUNELElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLENBQUMsR0FBRyxRQUFRLENBQUMsQ0FBQyxDQUFDO0lBQzNDLENBQUM7SUFFRCxrQ0FBa0M7SUFDbEMsVUFBVSxDQUFDLE1BQVc7UUFDcEIsT0FBTyxTQUFTLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssSUFBSSxFQUFFLENBQUMsRUFBRSxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDakUsQ0FBQztJQUVELElBQUksUUFBUTtRQUNWLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUUsT0FBTyxDQUFDO1FBQ3BDLE9BQU8sWUFBWSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxPQUFPLElBQUksRUFBRSxDQUFDLENBQUM7SUFDN0QsQ0FBQzs4R0FwQlUsaUJBQWlCO2tHQUFqQixpQkFBaUIsOEZDZjlCLGsrQkEwQk0sbzNFRGZNLGNBQWMsOGNBQUUsWUFBWSxnTkFBRSxXQUFXOzsyRkFJeEMsaUJBQWlCO2tCQVA3QixTQUFTOytCQUNFLGFBQWEsY0FDWCxJQUFJLFdBQ1AsQ0FBQyxjQUFjLEVBQUUsWUFBWSxFQUFFLFdBQVcsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0Q2hpcHNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9jaGlwcyc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgRm9ybUNvbnRyb2wsIEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgRmllbGRUeXBlIH0gZnJvbSAnQG5neC1mb3JtbHkvY29yZSc7XG5pbXBvcnQgeyBpc09ic2VydmFibGUsIG9mIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBpbmNsdWRlcyBhcyBfaW5jbHVkZXMgfSBmcm9tICdsb2Rhc2gnXG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NhLWNoZWNrYm94JyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW01hdENoaXBzTW9kdWxlLCBDb21tb25Nb2R1bGUsIEZvcm1zTW9kdWxlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2NoZWNrYm94LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2NoZWNrYm94LmNvbXBvbmVudC5jc3MnXG59KVxuZXhwb3J0IGNsYXNzIENoZWNrYm94Q29tcG9uZW50IGV4dGVuZHMgRmllbGRUeXBlIHtcbiAgdG9nZ2xlU2VsZWN0aW9uKG9wdGlvbjogYW55KTogdm9pZCB7XG4gICAgY29uc3Qgc2VsZWN0ZWQgPSB0aGlzLmZvcm1Db250cm9sLnZhbHVlIHx8IFtdO1xuICAgIGNvbnN0IGluZGV4ID0gc2VsZWN0ZWQuaW5kZXhPZihvcHRpb24udmFsdWUpO1xuICAgIGlmIChpbmRleCA9PT0gLTEpIHtcbiAgICAgIHNlbGVjdGVkLnB1c2gob3B0aW9uLnZhbHVlKTtcbiAgICB9IGVsc2Uge1xuICAgICAgc2VsZWN0ZWQuc3BsaWNlKGluZGV4LCAxKTtcbiAgICB9XG4gICAgdGhpcy5mb3JtQ29udHJvbC5zZXRWYWx1ZShbLi4uc2VsZWN0ZWRdKTtcbiAgfVxuXG4gIC8vIENoZWNrcyBpZiBhbiBvcHRpb24gaXMgc2VsZWN0ZWRcbiAgaXNTZWxlY3RlZChvcHRpb246IGFueSk6IGJvb2xlYW4ge1xuICAgIHJldHVybiBfaW5jbHVkZXMoKHRoaXMuZm9ybUNvbnRyb2wudmFsdWUgfHwgW10pLCBvcHRpb24udmFsdWUpO1xuICB9XG5cbiAgZ2V0IG9wdGlvbnMkKCkge1xuICAgIGNvbnN0IG9wdGlvbnMgPSB0aGlzLnByb3BzPy5vcHRpb25zO1xuICAgIHJldHVybiBpc09ic2VydmFibGUob3B0aW9ucykgPyBvcHRpb25zIDogb2Yob3B0aW9ucyB8fCBbXSk7XG4gIH1cblxufVxuIiwiPGRpdiBjbGFzcz1cImNoZWNrYm94LWNvbnRhaW5lclwiPlxuICAgIDxkaXYgY2xhc3M9XCJ0aXRsZS1jb250YWluZXJcIj5cbiAgICAgICAgQGlmKHByb3BzWydsYWJlbCddKXtcbiAgICAgICAgPGRpdiBjbGFzcz1cImZvcm0tZmllbGQtdGl0bGVcIj5cbiAgICAgICAgICAgIDxzcGFuPnt7IHByb3BzWydsYWJlbCddIH19PC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgfVxuICAgICAgICBAaWYocHJvcHNbJ2Rlc2NyaXB0aW9uJ10pe1xuICAgICAgICA8ZGl2IGNsYXNzPVwiZm9ybS1maWVsZC1kZXNjcmlwdGlvblwiPlxuICAgICAgICAgICAgPHNwYW4+e3sgcHJvcHNbJ2Rlc2NyaXB0aW9uJ10gfX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICB9XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImZvcm0tZmllbGRcIj5cbiAgICAgICAgPG1hdC1jaGlwLWxpc3Rib3ggc2VsZWN0YWJsZSBtdWx0aXBsZSBbZGlzYWJsZWRdPVwicHJvcHMuZGlzYWJsZWRcIiBhcmlhLWxhYmVsPVwiU2VsZWN0IG9wdGlvbnNcIj5cbiAgICAgICAgICAgIDxtYXQtY2hpcC1vcHRpb24gKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBvcHRpb25zJCB8IGFzeW5jXCIgY2xhc3M9XCJjdXN0b20tY2hpcFwiIFt2YWx1ZV09XCJvcHRpb24udmFsdWVcIlxuICAgICAgICAgICAgICAgIChjbGljayk9XCJ0b2dnbGVTZWxlY3Rpb24ob3B0aW9uKVwiIFtzZWxlY3RlZF09XCJpc1NlbGVjdGVkKG9wdGlvbilcIj5cbiAgICAgICAgICAgICAgICB7eyBvcHRpb24ubGFiZWwgfX1cbiAgICAgICAgICAgIDwvbWF0LWNoaXAtb3B0aW9uPlxuICAgICAgICA8L21hdC1jaGlwLWxpc3Rib3g+XG4gICAgPC9kaXY+XG4gICAgQGlmKHByb3BzWydoZWxwVGV4dCddKXtcbiAgICA8ZGl2IGNsYXNzPVwiZm9ybS1maWVsZC1oZWxwVGV4dFwiPlxuICAgICAgICA8c3Bhbj57eyBwcm9wc1snaGVscFRleHQnXSB9fTwvc3Bhbj5cbiAgICA8L2Rpdj5cbiAgICB9XG48L2Rpdj4iXX0=

package/esm2022/lib/chips/chips.component.mjs

@@ -0,0 +1,62 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { Input } from '@angular/core';
+import { Output } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+let nextId = 0; // used to give unique ids to inputs used in html
+export class ChipsComponent {
+    constructor() {
+        this.onClickEvent = new EventEmitter();
+        this.svgStyle = {};
+        this.secondSvgStyle = {};
+        this.eventEmitObject = {};
+        this.uuid = nextId++;
+    }
+    ngOnChanges() {
+        this.svgStyle = {
+            '-webkit-mask-image': `url(${this.iconPath})`,
+            'mask-image': `url(${this.iconPath})`,
+        };
+        this.secondSvgStyle = {
+            '-webkit-mask-image': `url(${this.largeStateIcon})`,
+            'mask-image': `url(${this.largeStateIcon})`,
+        };
+        this.eventEmitObject = {
+            id: this.id
+        };
+    }
+    buttonClicked(evt) {
+        this.onClickEvent.emit({
+            ...this.eventEmitObject,
+            evt
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ChipsComponent, isStandalone: true, selector: "sa-chip", inputs: { id: "id", iconPath: "iconPath", text: "text", type: "type", state: "state", filling: "filling", iconPosition: "iconPosition", largeStateIcon: "largeStateIcon", largeStateText: "largeStateText" }, outputs: { onClickEvent: "onClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chip {{type}} {{state}} {{filling}}\">\n  <button type=\"button\" (click)=\"buttonClicked($event)\" id=\"icon-button_{{uuid}}\" class=\"btn_hide\"></button>\n  <!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n  <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"((iconPosition == 'left' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n  </label>\n\n  {{text}}\n\n  <div class=\"second-svg-icon\" [style]=\"secondSvgStyle\" [style.display]=\"(type == 'large') ? 'block' : 'none'\"></div>\n\n  {{type == 'large' ? largeStateText : \"\"}}\n\n  <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"((iconPosition == 'right' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n  </label>\n</div>\n", styles: [".regular{--chip-height: var(--medium-24px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-16px);--font-weight: 500;--line-height: 16px;--font-size: 12px }.small{--chip-height: var(--small-18px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-4px);--font-weight: 500;--line-height: 16px;--font-size: 11px }.large{--chip-height: 40px;--chip-padding: var(--small-12px) var(--medium-24px) var(--small-12px) var(--small-16px);--chip-gap: var(--small-8px);--border-radius: var(--small-16px) 0px;--font-weight: 600;--line-height: 20px;--font-size: 14px;background-color:var(--light-color)!important;color:var(--dark-color)!important;border:1px solid transparent!important}.primary{--light-color: var(--primary-50);--dark-color: var(--primary-500)}.secondary{--light-color: var(--secondary-50);--dark-color: var(--secondary-500)}.neutral{--light-color: var(--grey-50);--dark-color: var(--text-mediumemphasis)}.success{--light-color: var(--semantic-success-50);--dark-color: var(--semantic-success-500)}.error{--light-color: var(--semantic-error-50);--dark-color: var(--semantic-error-500)}.warning{--light-color: var(--semantic-yellow-50);--dark-color: var(--semantic-yellow-500)}.filled{--background-color: var(--light-color);--color: var(--dark-color);--border: 1px solid transparent}.outline{--background-color: none;--color: var(--dark-color);--border: 1px solid var(--dark-color)}.chip{display:flex;width:max-content;height:var(--chip-height);padding:var(--chip-padding);justify-content:center;align-items:center;gap:var(--chip-gap);flex-shrink:0;letter-spacing:.5px;box-sizing:border-box;font-family:var(--font);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);background-color:var(--background-color);color:var(--color);border-radius:var(--border-radius);border:var(--border);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.svg-icon{width:16px;height:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.svg-icon:hover{cursor:pointer}.second-svg-icon{width:18px;height:18px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.btn_hide{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChipsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-chip', standalone: true, imports: [CommonModule], template: "<div class=\"chip {{type}} {{state}} {{filling}}\">\n  <button type=\"button\" (click)=\"buttonClicked($event)\" id=\"icon-button_{{uuid}}\" class=\"btn_hide\"></button>\n  <!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n  <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"((iconPosition == 'left' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n  </label>\n\n  {{text}}\n\n  <div class=\"second-svg-icon\" [style]=\"secondSvgStyle\" [style.display]=\"(type == 'large') ? 'block' : 'none'\"></div>\n\n  {{type == 'large' ? largeStateText : \"\"}}\n\n  <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"((iconPosition == 'right' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n  </label>\n</div>\n", styles: [".regular{--chip-height: var(--medium-24px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-16px);--font-weight: 500;--line-height: 16px;--font-size: 12px }.small{--chip-height: var(--small-18px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-4px);--font-weight: 500;--line-height: 16px;--font-size: 11px }.large{--chip-height: 40px;--chip-padding: var(--small-12px) var(--medium-24px) var(--small-12px) var(--small-16px);--chip-gap: var(--small-8px);--border-radius: var(--small-16px) 0px;--font-weight: 600;--line-height: 20px;--font-size: 14px;background-color:var(--light-color)!important;color:var(--dark-color)!important;border:1px solid transparent!important}.primary{--light-color: var(--primary-50);--dark-color: var(--primary-500)}.secondary{--light-color: var(--secondary-50);--dark-color: var(--secondary-500)}.neutral{--light-color: var(--grey-50);--dark-color: var(--text-mediumemphasis)}.success{--light-color: var(--semantic-success-50);--dark-color: var(--semantic-success-500)}.error{--light-color: var(--semantic-error-50);--dark-color: var(--semantic-error-500)}.warning{--light-color: var(--semantic-yellow-50);--dark-color: var(--semantic-yellow-500)}.filled{--background-color: var(--light-color);--color: var(--dark-color);--border: 1px solid transparent}.outline{--background-color: none;--color: var(--dark-color);--border: 1px solid var(--dark-color)}.chip{display:flex;width:max-content;height:var(--chip-height);padding:var(--chip-padding);justify-content:center;align-items:center;gap:var(--chip-gap);flex-shrink:0;letter-spacing:.5px;box-sizing:border-box;font-family:var(--font);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);background-color:var(--background-color);color:var(--color);border-radius:var(--border-radius);border:var(--border);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.svg-icon{width:16px;height:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.svg-icon:hover{cursor:pointer}.second-svg-icon{width:18px;height:18px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.btn_hide{display:none}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], iconPath: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], filling: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
+            }], largeStateIcon: [{
+                type: Input
+            }], largeStateText: [{
+                type: Input
+            }], onClickEvent: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hpcHMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9jaGlwcy9jaGlwcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NoaXBzL2NoaXBzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdEMsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQUU3QyxJQUFJLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBVSxpREFBaUQ7QUFTMUUsTUFBTSxPQUFPLGNBQWM7SUFQM0I7UUFrQlksaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBRTVDLGFBQVEsR0FBRyxFQUFFLENBQUE7UUFDYixtQkFBYyxHQUFHLEVBQUUsQ0FBQTtRQUNuQixvQkFBZSxHQUFHLEVBQUUsQ0FBQTtRQUNwQixTQUFJLEdBQVcsTUFBTSxFQUFFLENBQUM7S0FzQnpCO0lBcEJDLFdBQVc7UUFDVCxJQUFJLENBQUMsUUFBUSxHQUFHO1lBQ2Qsb0JBQW9CLEVBQUUsT0FBTyxJQUFJLENBQUMsUUFBUSxHQUFHO1lBQzdDLFlBQVksRUFBRSxPQUFPLElBQUksQ0FBQyxRQUFRLEdBQUc7U0FDdEMsQ0FBQTtRQUNELElBQUksQ0FBQyxjQUFjLEdBQUc7WUFDcEIsb0JBQW9CLEVBQUUsT0FBTyxJQUFJLENBQUMsY0FBYyxHQUFHO1lBQ25ELFlBQVksRUFBRSxPQUFPLElBQUksQ0FBQyxjQUFjLEdBQUc7U0FDNUMsQ0FBQTtRQUNELElBQUksQ0FBQyxlQUFlLEdBQUc7WUFDckIsRUFBRSxFQUFFLElBQUksQ0FBQyxFQUFFO1NBQ1osQ0FBQTtJQUNILENBQUM7SUFFRCxhQUFhLENBQUMsR0FBVTtRQUN0QixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQztZQUNyQixHQUFHLElBQUksQ0FBQyxlQUFlO1lBQ3ZCLEdBQUc7U0FDSixDQUFDLENBQUM7SUFDTCxDQUFDOzhHQXJDVSxjQUFjO2tHQUFkLGNBQWMsaVZDZjNCLDQyQkFpQkEsNDdFRE5ZLFlBQVk7OzJGQUlYLGNBQWM7a0JBUDFCLFNBQVM7K0JBQ0UsU0FBUyxjQUNQLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQzs4QkFLZCxFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBRUksWUFBWTtzQkFBckIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5sZXQgbmV4dElkID0gMDsgICAgICAgICAgLy8gdXNlZCB0byBnaXZlIHVuaXF1ZSBpZHMgdG8gaW5wdXRzIHVzZWQgaW4gaHRtbFxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzYS1jaGlwJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG4gIHRlbXBsYXRlVXJsOiAnLi9jaGlwcy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9jaGlwcy5jb21wb25lbnQuY3NzJ1xufSlcbmV4cG9ydCBjbGFzcyBDaGlwc0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGlkOiBzdHJpbmcgfCBudW1iZXI7XG4gIEBJbnB1dCgpIGljb25QYXRoOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHRleHQ6IHN0cmluZyB8IG51bWJlcjtcbiAgQElucHV0KCkgdHlwZTogc3RyaW5nO1xuICBASW5wdXQoKSBzdGF0ZTogc3RyaW5nO1xuICBASW5wdXQoKSBmaWxsaW5nOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGljb25Qb3NpdGlvbjogc3RyaW5nO1xuICBASW5wdXQoKSBsYXJnZVN0YXRlSWNvbjogc3RyaW5nO1xuICBASW5wdXQoKSBsYXJnZVN0YXRlVGV4dDogc3RyaW5nO1xuXG4gIEBPdXRwdXQoKSBvbkNsaWNrRXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgc3ZnU3R5bGUgPSB7fVxuICBzZWNvbmRTdmdTdHlsZSA9IHt9XG4gIGV2ZW50RW1pdE9iamVjdCA9IHt9XG4gIHV1aWQ6IG51bWJlciA9IG5leHRJZCsrO1xuXG4gIG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuICAgIHRoaXMuc3ZnU3R5bGUgPSB7XG4gICAgICAnLXdlYmtpdC1tYXNrLWltYWdlJzogYHVybCgke3RoaXMuaWNvblBhdGh9KWAsXG4gICAgICAnbWFzay1pbWFnZSc6IGB1cmwoJHt0aGlzLmljb25QYXRofSlgLFxuICAgIH1cbiAgICB0aGlzLnNlY29uZFN2Z1N0eWxlID0ge1xuICAgICAgJy13ZWJraXQtbWFzay1pbWFnZSc6IGB1cmwoJHt0aGlzLmxhcmdlU3RhdGVJY29ufSlgLFxuICAgICAgJ21hc2staW1hZ2UnOiBgdXJsKCR7dGhpcy5sYXJnZVN0YXRlSWNvbn0pYCxcbiAgICB9XG4gICAgdGhpcy5ldmVudEVtaXRPYmplY3QgPSB7XG4gICAgICBpZDogdGhpcy5pZFxuICAgIH1cbiAgfVxuXG4gIGJ1dHRvbkNsaWNrZWQoZXZ0OiBFdmVudCkge1xuICAgIHRoaXMub25DbGlja0V2ZW50LmVtaXQoe1xuICAgICAgLi4udGhpcy5ldmVudEVtaXRPYmplY3QsXG4gICAgICBldnRcbiAgICB9KTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImNoaXAge3t0eXBlfX0ge3tzdGF0ZX19IHt7ZmlsbGluZ319XCI+XG4gIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIChjbGljayk9XCJidXR0b25DbGlja2VkKCRldmVudClcIiBpZD1cImljb24tYnV0dG9uX3t7dXVpZH19XCIgY2xhc3M9XCJidG5faGlkZVwiPjwvYnV0dG9uPlxuICA8IS0tIChjbGljayk9XCJidXR0b25DbGlja2VkKClcIiBvbiBidXR0b24gaW5zdGVhZCBvZiBsYWJlbCBicmVha3Mgd2hvbGUgdGhpbmcgLS0+XG4gIDxsYWJlbCBmb3I9XCJpY29uLWJ1dHRvbl97e3V1aWR9fVwiIGNsYXNzPVwic3ZnLWljb25cIiBbc3R5bGVdPVwic3ZnU3R5bGVcIlxuICAgIFtzdHlsZS5kaXNwbGF5XT1cIigoaWNvblBvc2l0aW9uID09ICdsZWZ0JyB8fCBpY29uUG9zaXRpb24gPT0gJ2JvdGgnKSAmJiB0eXBlICE9ICdsYXJnZScpID8gJ2Jsb2NrJyA6ICdub25lJ1wiPlxuICA8L2xhYmVsPlxuXG4gIHt7dGV4dH19XG5cbiAgPGRpdiBjbGFzcz1cInNlY29uZC1zdmctaWNvblwiIFtzdHlsZV09XCJzZWNvbmRTdmdTdHlsZVwiIFtzdHlsZS5kaXNwbGF5XT1cIih0eXBlID09ICdsYXJnZScpID8gJ2Jsb2NrJyA6ICdub25lJ1wiPjwvZGl2PlxuXG4gIHt7dHlwZSA9PSAnbGFyZ2UnID8gbGFyZ2VTdGF0ZVRleHQgOiBcIlwifX1cblxuICA8bGFiZWwgZm9yPVwiaWNvbi1idXR0b25fe3t1dWlkfX1cIiBjbGFzcz1cInN2Zy1pY29uXCIgW3N0eWxlXT1cInN2Z1N0eWxlXCJcbiAgICBbc3R5bGUuZGlzcGxheV09XCIoKGljb25Qb3NpdGlvbiA9PSAncmlnaHQnIHx8IGljb25Qb3NpdGlvbiA9PSAnYm90aCcpICYmIHR5cGUgIT0gJ2xhcmdlJykgPyAnYmxvY2snIDogJ25vbmUnXCI+XG4gIDwvbGFiZWw+XG48L2Rpdj5cbiJdfQ==

package/esm2022/lib/component-library.component.mjs

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export class TestLibraryComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TestLibraryComponent, isStandalone: true, selector: "lib-component-library", ngImport: i0, template: `
+    <p>
+      component-library works!
+    </p>
+  `, isInline: true, styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-component-library', standalone: true, imports: [], template: `
+    <p>
+      component-library works!
+    </p>
+  ` }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50LWxpYnJhcnkuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9jb21wb25lbnQtbGlicmFyeS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFhMUMsTUFBTSxPQUFPLG9CQUFvQjs4R0FBcEIsb0JBQW9CO2tHQUFwQixvQkFBb0IsaUZBUHJCOzs7O0dBSVQ7OzJGQUdVLG9CQUFvQjtrQkFYaEMsU0FBUzsrQkFDRSx1QkFBdUIsY0FDckIsSUFBSSxXQUNQLEVBQUUsWUFDRDs7OztHQUlUIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi1jb21wb25lbnQtbGlicmFyeScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtdLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxwPlxuICAgICAgY29tcG9uZW50LWxpYnJhcnkgd29ya3MhXG4gICAgPC9wPlxuICBgLFxuICBzdHlsZXM6IGBgXG59KVxuZXhwb3J0IGNsYXNzIFRlc3RMaWJyYXJ5Q29tcG9uZW50IHtcblxufVxuIl19

package/esm2022/lib/component-library.service.mjs

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import * as i0 from "@angular/core";
+export class TestLibraryService {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50LWxpYnJhcnkuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvY29tcG9uZW50LWxpYnJhcnkuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQUszQyxNQUFNLE9BQU8sa0JBQWtCO0lBRTdCLGdCQUFnQixDQUFDOzhHQUZOLGtCQUFrQjtrSEFBbEIsa0JBQWtCLGNBRmpCLE1BQU07OzJGQUVQLGtCQUFrQjtrQkFIOUIsVUFBVTttQkFBQztvQkFDVixVQUFVLEVBQUUsTUFBTTtpQkFDbkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBJbmplY3RhYmxlKHtcbiAgcHJvdmlkZWRJbjogJ3Jvb3QnXG59KVxuZXhwb3J0IGNsYXNzIFRlc3RMaWJyYXJ5U2VydmljZSB7XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cbn1cbiJdfQ==

package/esm2022/lib/datepicker/datepicker.component.mjs

@@ -0,0 +1,40 @@
+import { Component, Input } from '@angular/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatNativeDateModule } from '@angular/material/core';
+import { NgFor } from '@angular/common';
+import { NgIf } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FieldType } from '@ngx-formly/core';
+import { CalendarHeaderComponent } from '../calendar-header/calendar-header.component';
+import { CommonModule } from '@angular/common';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/form-field";
+import * as i2 from "@angular/material/datepicker";
+import * as i3 from "@angular/forms";
+export class DatepickerComponent extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.CalendarHeaderComponent = CalendarHeaderComponent;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DatepickerComponent, isStandalone: true, selector: "sa-datepicker", inputs: { range: "range" }, providers: [], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"date-picker\">\n  <mat-label>Choose a date</mat-label>\n  <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\n    <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\n    <input formControlName=\"end\" matEndDate placeholder=\"End date\">\n  </mat-date-range-input>\n  <mat-hint>MM/DD/YYYY</mat-hint>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\n  </mat-date-range-picker>\n</mat-form-field>\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-datepicker', standalone: true, providers: [], imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatDatepickerModule,
+                        NgFor,
+                        NgIf,
+                        ReactiveFormsModule,
+                        CalendarHeaderComponent,
+                        CommonModule,
+                        MatNativeDateModule
+                    ], template: "<mat-form-field class=\"date-picker\">\n  <mat-label>Choose a date</mat-label>\n  <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\n    <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\n    <input formControlName=\"end\" matEndDate placeholder=\"End date\">\n  </mat-date-range-input>\n  <mat-hint>MM/DD/YYYY</mat-hint>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\n  </mat-date-range-picker>\n</mat-form-field>\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"] }]
+        }], propDecorators: { range: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZXBpY2tlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2RhdGVwaWNrZXIvZGF0ZXBpY2tlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2RhdGVwaWNrZXIvZGF0ZXBpY2tlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUNuRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDekQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDbEUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDN0QsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ3hDLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN2QyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNyRCxPQUFPLEVBQUUsU0FBUyxFQUFtQixNQUFNLGtCQUFrQixDQUFDO0FBQzlELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDhDQUE4QyxDQUFDO0FBQ3ZGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7Ozs7QUFvQi9DLE1BQU0sT0FBTyxtQkFBb0IsU0FBUSxTQUEwQjtJQWxCbkU7O1FBcUJXLDRCQUF1QixHQUFHLHVCQUF1QixDQUFDO0tBRTVEOzhHQUxZLG1CQUFtQjtrR0FBbkIsbUJBQW1CLHdGQWZuQixFQUFFLGlEQ2ZmLDJrQkFXQSx3K0JETUksa0JBQWtCLG1nQkFDbEIsY0FBYyw4QkFDZCxtQkFBbUIsb3pCQUduQixtQkFBbUIsbTJCQUVuQixZQUFZLDhCQUNaLG1CQUFtQjs7MkZBS1YsbUJBQW1CO2tCQWxCL0IsU0FBUzsrQkFDRSxlQUFlLGNBQ2IsSUFBSSxhQUNMLEVBQUUsV0FDSjt3QkFDUCxrQkFBa0I7d0JBQ2xCLGNBQWM7d0JBQ2QsbUJBQW1CO3dCQUNuQixLQUFLO3dCQUNMLElBQUk7d0JBQ0osbUJBQW1CO3dCQUNuQix1QkFBdUI7d0JBQ3ZCLFlBQVk7d0JBQ1osbUJBQW1CO3FCQUNwQjs4QkFLUSxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXREYXRlcGlja2VyTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGF0ZXBpY2tlcic7XG5pbXBvcnQgeyBNYXRJbnB1dE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2lucHV0JztcbmltcG9ydCB7IE1hdEZvcm1GaWVsZE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2Zvcm0tZmllbGQnO1xuaW1wb3J0IHsgTWF0TmF0aXZlRGF0ZU1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2NvcmUnO1xuaW1wb3J0IHsgTmdGb3IgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgRmllbGRUeXBlLCBGaWVsZFR5cGVDb25maWcgfSBmcm9tICdAbmd4LWZvcm1seS9jb3JlJztcbmltcG9ydCB7IENhbGVuZGFySGVhZGVyQ29tcG9uZW50IH0gZnJvbSAnLi4vY2FsZW5kYXItaGVhZGVyL2NhbGVuZGFyLWhlYWRlci5jb21wb25lbnQnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2EtZGF0ZXBpY2tlcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHByb3ZpZGVyczogW10sXG4gIGltcG9ydHM6IFtcbiAgICBNYXRGb3JtRmllbGRNb2R1bGUsXG4gICAgTWF0SW5wdXRNb2R1bGUsXG4gICAgTWF0RGF0ZXBpY2tlck1vZHVsZSxcbiAgICBOZ0ZvcixcbiAgICBOZ0lmLFxuICAgIFJlYWN0aXZlRm9ybXNNb2R1bGUsXG4gICAgQ2FsZW5kYXJIZWFkZXJDb21wb25lbnQsXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIE1hdE5hdGl2ZURhdGVNb2R1bGVcbiAgXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2RhdGVwaWNrZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vZGF0ZXBpY2tlci5jb21wb25lbnQuY3NzJ1xufSlcbmV4cG9ydCBjbGFzcyBEYXRlcGlja2VyQ29tcG9uZW50IGV4dGVuZHMgRmllbGRUeXBlPEZpZWxkVHlwZUNvbmZpZz4ge1xuICBASW5wdXQoKSByYW5nZTogYW55O1xuXG4gIHJlYWRvbmx5IENhbGVuZGFySGVhZGVyQ29tcG9uZW50ID0gQ2FsZW5kYXJIZWFkZXJDb21wb25lbnQ7XG5cbn1cbiIsIjxtYXQtZm9ybS1maWVsZCBjbGFzcz1cImRhdGUtcGlja2VyXCI+XG4gIDxtYXQtbGFiZWw+Q2hvb3NlIGEgZGF0ZTwvbWF0LWxhYmVsPlxuICA8bWF0LWRhdGUtcmFuZ2UtaW5wdXQgW3JhbmdlUGlja2VyXT1cInBpY2tlclwiIFtmb3JtR3JvdXBdPVwicmFuZ2VcIj5cbiAgICA8aW5wdXQgZm9ybUNvbnRyb2xOYW1lPVwic3RhcnRcIiBtYXRTdGFydERhdGUgcGxhY2Vob2xkZXI9XCJTdGFydCBkYXRlXCI+XG4gICAgPGlucHV0IGZvcm1Db250cm9sTmFtZT1cImVuZFwiIG1hdEVuZERhdGUgcGxhY2Vob2xkZXI9XCJFbmQgZGF0ZVwiPlxuICA8L21hdC1kYXRlLXJhbmdlLWlucHV0PlxuICA8bWF0LWhpbnQ+TU0vREQvWVlZWTwvbWF0LWhpbnQ+XG4gIDxtYXQtZGF0ZXBpY2tlci10b2dnbGUgbWF0SWNvblN1ZmZpeCBbZm9yXT1cInBpY2tlclwiPjwvbWF0LWRhdGVwaWNrZXItdG9nZ2xlPlxuICA8bWF0LWRhdGUtcmFuZ2UtcGlja2VyIFtjYWxlbmRhckhlYWRlckNvbXBvbmVudF09XCJDYWxlbmRhckhlYWRlckNvbXBvbmVudFwiICNwaWNrZXI+XG4gIDwvbWF0LWRhdGUtcmFuZ2UtcGlja2VyPlxuPC9tYXQtZm9ybS1maWVsZD5cbiJdfQ==