@agorapulse/ui-components 14.0.5 → 14.1.0

package/fesm2015/agorapulse-ui-components-avatar.mjs

@@ -0,0 +1,146 @@
+import { NgIf, SlicePipe, NgForOf } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import * as i1 from '@agorapulse/ui-symbol';
+import { AgorapulseUiSymbolModule } from '@agorapulse/ui-symbol';
+
+const SizeMap = {
+    'large': '64',
+    'large-sm': '56',
+    'normal': '48',
+    'medium': '40',
+    'medium-sm': '36',
+    'small': '32',
+    'mini': '24',
+    'mini-sm': '16',
+    'micro': '12',
+    'facebook': '40',
+    'linkedin': '40',
+    'instagram': '40',
+    'youtube': '40',
+    'google': '40',
+    'tiktok': '56',
+    'twitter': '48'
+};
+const SizeMapNumbers = {
+    large: 64,
+    'large-sm': 56,
+    normal: 48,
+    medium: 40,
+    'medium-sm': 36,
+    small: 32,
+    mini: 24,
+    'mini-sm': 16,
+    micro: 12,
+    facebook: 40,
+    linkedin: 40,
+    instagram: 40,
+    youtube: 40,
+    google: 40,
+    tiktok: 56,
+    twitter: 48,
+};
+const SymbolSizeByAvatarSize = {
+    large: 'small',
+    normal: 'mini',
+    medium: 'mini',
+    'medium-sm': 'mini-sm',
+    small: 'micro',
+    mini: 'micro-sm',
+    'mini-sm': 'pico',
+    micro: 'pico',
+};
+class AvatarComponent {
+    constructor() {
+        this.border = '';
+        this.defaultImageEnabled = true; // DEPRECATED default avatar if we don't have username
+        this.fallbackSymbolId = 'single-neutral';
+        this.fallbackSymbolSize = 'mini';
+        this.loading = 'auto';
+        this.outerBorderHidden = false;
+        this.size = 'medium';
+        this.rounded = false;
+        this.online = false;
+        this.sizeMap = SizeMap;
+        this.sizeMapNumbers = SizeMapNumbers;
+        this.symbolSizeByAvatarSize = SymbolSizeByAvatarSize;
+    }
+    ngOnChanges(changes) {
+        var _a, _b;
+        if (((_a = changes.social) === null || _a === void 0 ? void 0 : _a.currentValue) || ((_b = changes.size) === null || _b === void 0 ? void 0 : _b.currentValue)) {
+            if (this.social === 'google') {
+                switch (this.size) {
+                    case 'medium-sm':
+                        this.socialSize = '14';
+                        break;
+                    case 'mini':
+                        this.socialSize = '15';
+                        break;
+                    case 'mini-sm':
+                        this.socialSize = '10';
+                        break;
+                    default:
+                        this.socialSize = '19';
+                }
+            }
+            else {
+                switch (this.size) {
+                    case 'medium-sm':
+                    case 'mini':
+                        this.socialSize = '12';
+                        break;
+                    case 'mini-sm':
+                        this.socialSize = '8';
+                        break;
+                    default:
+                        this.socialSize = '16';
+                }
+            }
+        }
+        if (changes.defaultImageEnabled && changes.defaultImageEnabled.currentValue) {
+            console.warn("'defaultImageEnabled' attribute is deprecated.");
+        }
+    }
+    onError() {
+        this.imageUrl = null;
+    }
+}
+AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: AvatarComponent, isStandalone: true, selector: "ap-avatar", inputs: { border: "border", defaultImageEnabled: "defaultImageEnabled", fallbackSymbolId: "fallbackSymbolId", fallbackSymbolSize: "fallbackSymbolSize", imageUrl: "imageUrl", loading: "loading", outerBorderHidden: "outerBorderHidden", size: "size", social: "social", username: "username", rounded: "rounded", online: "online", imageUrls: "imageUrls" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ap-avatar-container {{size}}\"\n    [style.width]=\"imageUrls ? (imageUrls.length < 4 ? sizeMapNumbers[size] * (imageUrls.length / 3 + 1) + 'px' : sizeMapNumbers[size] * 1.5 + 'px') : sizeMapNumbers[size] + 'px'\">\n    <!-- simple avatar -->\n    <div *ngIf=\"imageUrl || imageUrls; else noPicture\">\n        <img *ngIf=\"imageUrl && !imageUrls\"\n             class=\"ap-avatar {{size}}\"\n             [class.outer-border]=\"!outerBorderHidden\"\n             [class.rounded]=\"rounded\"\n             [attr.border]=\"border\"\n             [attr.loading]=\"loading\"\n             [attr.height]=\"sizeMap[size]\"\n             [attr.width]=\"sizeMap[size]\"\n             [src]=\"imageUrl\"\n             (error)=\"onError()\"/>\n        <div *ngIf=\"imageUrls && !imageUrl\"\n            class=\"multi-avatar-container\">\n            <div *ngFor=\"let url of imageUrls | slice: 0:3; let i = index\">\n                <img *ngIf=\"url\" class=\"ap-avatar {{size}} multi\"\n                     [class.outer-border]=\"!outerBorderHidden\"\n                     [class.rounded]=\"rounded\"\n                     [style.z-index]=\"i\"\n                     [style.left]=\"2 * i * sizeMapNumbers[size] / 3 + 'px'\"\n                     [attr.border]=\"border\"\n                     [attr.loading]=\"loading\"\n                     [attr.height]=\"sizeMap[size]\"\n                     [attr.width]=\"sizeMap[size]\"\n                     [src]=\"url\"\n                     (error)=\"onError()\"/>\n                <span *ngIf=\"!url\"\n                    class=\"ap-avatar ap-avatar-username {{size}} multi\"\n                    [style.z-index]=\"i\"\n                    [style.left]=\"2 * i * sizeMapNumbers[size] / 3 + 'px'\"\n                    [class.outer-border]=\"!outerBorderHidden\"\n                    [class.rounded]=\"rounded\"\n                    [attr.border]=\"border\">\n                    <ng-container *ngIf=\"username; else symbol\">\n                        {{username.charAt(0).toUpperCase()}}\n                    </ng-container>\n                    <ng-template #symbol>\n                        <ap-symbol\n                            [size]=\"fallbackSymbolSize\"\n                            [symbolId]=\"fallbackSymbolId\">\n                        </ap-symbol>\n                    </ng-template>\n                </span>\n            </div>\n        </div>\n    </div>\n    <!-- image with first letter of screen name -->\n    <ng-template #noPicture>\n        <span\n              class=\"ap-avatar ap-avatar-username {{size}}\"\n              [class.outer-border]=\"!outerBorderHidden\"\n              [class.rounded]=\"rounded\"\n              [attr.border]=\"border\">\n            <ng-container *ngIf=\"username; else symbol\">\n                {{username.charAt(0).toUpperCase()}}\n            </ng-container>\n            <ng-template #symbol>\n                <ap-symbol\n                    [size]=\"symbolSizeByAvatarSize[size] ?? fallbackSymbolSize\"\n                    [symbolId]=\"fallbackSymbolId\">\n                </ap-symbol>\n            </ng-template>\n        </span>\n    </ng-template>\n\n    <div  *ngIf=\"social\"\n          class=\"social-symbol-wrapper {{social}} {{size}}\">\n        <ap-symbol [symbolId]=\"social === 'google' ? social + '-my-business-official' : social + '-official'\"\n                   [size]=\"socialSize\">\n        </ap-symbol>\n    </div>\n    <div *ngIf=\"online\" class=\"online-indicator {{size}}\"></div>\n\n</div>\n<label>\n    <ng-content></ng-content>\n</label>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}:host{align-items:center;display:inline-flex}label{margin-left:8px}label:empty{display:none}.ap-avatar-container,.ap-avatar-container .multi-avatar-container{position:relative}.ap-avatar-container .multi-avatar-container .multi{position:absolute}.ap-avatar-container.large{height:64px;width:64px}.ap-avatar-container.large-normal{min-height:56px;min-width:56px;height:56px;width:56px}.ap-avatar-container.normal{height:48px;width:48px}.ap-avatar-container.medium{height:40px;width:40px}.ap-avatar-container.medium-sm{height:36px;width:36px}.ap-avatar-container.small{height:32px;width:32px}.ap-avatar-container.mini{height:24px;width:24px}.ap-avatar-container.mini-sm{height:16px;width:16px}.ap-avatar-container.micro{height:12px;width:12px}.ap-avatar-container .ap-avatar.outer-border{box-shadow:0 0 0 1.5px #eaecef}.ap-avatar-container .ap-avatar.large{height:64px;width:64px}.ap-avatar-container .ap-avatar.large-normal{min-height:56px;min-width:56px;height:56px;width:56px}.ap-avatar-container .ap-avatar.normal{height:48px;width:48px}.ap-avatar-container .ap-avatar.medium{height:40px;width:40px}.ap-avatar-container .ap-avatar.medium-sm{height:36px;width:36px}.ap-avatar-container .ap-avatar.small{height:32px;width:32px}.ap-avatar-container .ap-avatar.mini{height:24px;width:24px}.ap-avatar-container .ap-avatar.mini-sm{height:16px;width:16px}.ap-avatar-container .ap-avatar.micro{height:12px;width:12px}.ap-avatar-container .ap-avatar.facebook,.ap-avatar-container .ap-avatar.linkedin,.ap-avatar-container .ap-avatar.youtube,.ap-avatar-container .ap-avatar.instagram,.ap-avatar-container .ap-avatar.google{height:40px;width:40px}.ap-avatar-container .ap-avatar.twitter{height:48px;width:48px}.ap-avatar-container .ap-avatar.tiktok{height:56px;width:56px}.ap-avatar-container .ap-avatar:not(.rounded){border-radius:13%}.ap-avatar-container .ap-avatar-username{display:inline-flex;align-items:center;justify-content:center;background-color:#aeb5c1;color:#fff;font-size:24px}.ap-avatar-container .ap-avatar-username.large{font-size:28px}.ap-avatar-container .ap-avatar-username.medium{font-size:18px}.ap-avatar-container .ap-avatar-username.medium-sm{font-size:16px}.ap-avatar-container .ap-avatar-username.small{font-size:14px}.ap-avatar-container .ap-avatar-username.mini,.ap-avatar-container .ap-avatar-username.mini-sm{font-size:12px}.ap-avatar-container .social-symbol-wrapper{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1.5px #eaecef}.ap-avatar-container .social-symbol-wrapper.facebook,.ap-avatar-container .social-symbol-wrapper.twitter,.ap-avatar-container .social-symbol-wrapper.youtube,.ap-avatar-container .social-symbol-wrapper.tiktok{border-radius:100%}.ap-avatar-container .social-symbol-wrapper.instagram{border-radius:28%}.ap-avatar-container .social-symbol-wrapper.linkedin{border-radius:6%}.ap-avatar-container .social-symbol-wrapper.google{box-shadow:none;right:-3px;bottom:-3px}.ap-avatar-container .social-symbol-wrapper.google ap-symbol{border-radius:0;background-color:transparent}.ap-avatar-container .social-symbol-wrapper ap-symbol{border-radius:100%;background-color:#fff}.ap-avatar-container .online-indicator{box-shadow:none;background:#45B854;right:0;bottom:0;position:absolute}.ap-avatar-container .online-indicator.large{outline:5px solid white;border-radius:16px;min-height:16px;min-width:16px}.ap-avatar-container .online-indicator.normal{outline:4px solid white;border-radius:12px;min-height:12px;min-width:12px}.ap-avatar-container .online-indicator.medium,.ap-avatar-container .online-indicator.medium-sm,.ap-avatar-container .online-indicator.small{outline:3px solid white;border-radius:8px;min-height:8px;min-width:8px}.ap-avatar-container .online-indicator.mini,.ap-avatar-container .online-indicator.mini-sm{outline:2px solid white;border-radius:6px;min-height:6px;min-width:6px}.ap-avatar-container .online-indicator.micro{outline:1px solid white;border-radius:4px;min-height:4px;min-width:4px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "ngmodule", type: AgorapulseUiSymbolModule }, { kind: "component", type: i1.SymbolComponent, selector: "ap-symbol", inputs: ["color", "id", "symbolId", "size", "state"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-avatar', standalone: true, imports: [NgIf, SlicePipe, AgorapulseUiSymbolModule, NgForOf], template: "<div class=\"ap-avatar-container {{size}}\"\n    [style.width]=\"imageUrls ? (imageUrls.length < 4 ? sizeMapNumbers[size] * (imageUrls.length / 3 + 1) + 'px' : sizeMapNumbers[size] * 1.5 + 'px') : sizeMapNumbers[size] + 'px'\">\n    <!-- simple avatar -->\n    <div *ngIf=\"imageUrl || imageUrls; else noPicture\">\n        <img *ngIf=\"imageUrl && !imageUrls\"\n             class=\"ap-avatar {{size}}\"\n             [class.outer-border]=\"!outerBorderHidden\"\n             [class.rounded]=\"rounded\"\n             [attr.border]=\"border\"\n             [attr.loading]=\"loading\"\n             [attr.height]=\"sizeMap[size]\"\n             [attr.width]=\"sizeMap[size]\"\n             [src]=\"imageUrl\"\n             (error)=\"onError()\"/>\n        <div *ngIf=\"imageUrls && !imageUrl\"\n            class=\"multi-avatar-container\">\n            <div *ngFor=\"let url of imageUrls | slice: 0:3; let i = index\">\n                <img *ngIf=\"url\" class=\"ap-avatar {{size}} multi\"\n                     [class.outer-border]=\"!outerBorderHidden\"\n                     [class.rounded]=\"rounded\"\n                     [style.z-index]=\"i\"\n                     [style.left]=\"2 * i * sizeMapNumbers[size] / 3 + 'px'\"\n                     [attr.border]=\"border\"\n                     [attr.loading]=\"loading\"\n                     [attr.height]=\"sizeMap[size]\"\n                     [attr.width]=\"sizeMap[size]\"\n                     [src]=\"url\"\n                     (error)=\"onError()\"/>\n                <span *ngIf=\"!url\"\n                    class=\"ap-avatar ap-avatar-username {{size}} multi\"\n                    [style.z-index]=\"i\"\n                    [style.left]=\"2 * i * sizeMapNumbers[size] / 3 + 'px'\"\n                    [class.outer-border]=\"!outerBorderHidden\"\n                    [class.rounded]=\"rounded\"\n                    [attr.border]=\"border\">\n                    <ng-container *ngIf=\"username; else symbol\">\n                        {{username.charAt(0).toUpperCase()}}\n                    </ng-container>\n                    <ng-template #symbol>\n                        <ap-symbol\n                            [size]=\"fallbackSymbolSize\"\n                            [symbolId]=\"fallbackSymbolId\">\n                        </ap-symbol>\n                    </ng-template>\n                </span>\n            </div>\n        </div>\n    </div>\n    <!-- image with first letter of screen name -->\n    <ng-template #noPicture>\n        <span\n              class=\"ap-avatar ap-avatar-username {{size}}\"\n              [class.outer-border]=\"!outerBorderHidden\"\n              [class.rounded]=\"rounded\"\n              [attr.border]=\"border\">\n            <ng-container *ngIf=\"username; else symbol\">\n                {{username.charAt(0).toUpperCase()}}\n            </ng-container>\n            <ng-template #symbol>\n                <ap-symbol\n                    [size]=\"symbolSizeByAvatarSize[size] ?? fallbackSymbolSize\"\n                    [symbolId]=\"fallbackSymbolId\">\n                </ap-symbol>\n            </ng-template>\n        </span>\n    </ng-template>\n\n    <div  *ngIf=\"social\"\n          class=\"social-symbol-wrapper {{social}} {{size}}\">\n        <ap-symbol [symbolId]=\"social === 'google' ? social + '-my-business-official' : social + '-official'\"\n                   [size]=\"socialSize\">\n        </ap-symbol>\n    </div>\n    <div *ngIf=\"online\" class=\"online-indicator {{size}}\"></div>\n\n</div>\n<label>\n    <ng-content></ng-content>\n</label>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}:host{align-items:center;display:inline-flex}label{margin-left:8px}label:empty{display:none}.ap-avatar-container,.ap-avatar-container .multi-avatar-container{position:relative}.ap-avatar-container .multi-avatar-container .multi{position:absolute}.ap-avatar-container.large{height:64px;width:64px}.ap-avatar-container.large-normal{min-height:56px;min-width:56px;height:56px;width:56px}.ap-avatar-container.normal{height:48px;width:48px}.ap-avatar-container.medium{height:40px;width:40px}.ap-avatar-container.medium-sm{height:36px;width:36px}.ap-avatar-container.small{height:32px;width:32px}.ap-avatar-container.mini{height:24px;width:24px}.ap-avatar-container.mini-sm{height:16px;width:16px}.ap-avatar-container.micro{height:12px;width:12px}.ap-avatar-container .ap-avatar.outer-border{box-shadow:0 0 0 1.5px #eaecef}.ap-avatar-container .ap-avatar.large{height:64px;width:64px}.ap-avatar-container .ap-avatar.large-normal{min-height:56px;min-width:56px;height:56px;width:56px}.ap-avatar-container .ap-avatar.normal{height:48px;width:48px}.ap-avatar-container .ap-avatar.medium{height:40px;width:40px}.ap-avatar-container .ap-avatar.medium-sm{height:36px;width:36px}.ap-avatar-container .ap-avatar.small{height:32px;width:32px}.ap-avatar-container .ap-avatar.mini{height:24px;width:24px}.ap-avatar-container .ap-avatar.mini-sm{height:16px;width:16px}.ap-avatar-container .ap-avatar.micro{height:12px;width:12px}.ap-avatar-container .ap-avatar.facebook,.ap-avatar-container .ap-avatar.linkedin,.ap-avatar-container .ap-avatar.youtube,.ap-avatar-container .ap-avatar.instagram,.ap-avatar-container .ap-avatar.google{height:40px;width:40px}.ap-avatar-container .ap-avatar.twitter{height:48px;width:48px}.ap-avatar-container .ap-avatar.tiktok{height:56px;width:56px}.ap-avatar-container .ap-avatar:not(.rounded){border-radius:13%}.ap-avatar-container .ap-avatar-username{display:inline-flex;align-items:center;justify-content:center;background-color:#aeb5c1;color:#fff;font-size:24px}.ap-avatar-container .ap-avatar-username.large{font-size:28px}.ap-avatar-container .ap-avatar-username.medium{font-size:18px}.ap-avatar-container .ap-avatar-username.medium-sm{font-size:16px}.ap-avatar-container .ap-avatar-username.small{font-size:14px}.ap-avatar-container .ap-avatar-username.mini,.ap-avatar-container .ap-avatar-username.mini-sm{font-size:12px}.ap-avatar-container .social-symbol-wrapper{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1.5px #eaecef}.ap-avatar-container .social-symbol-wrapper.facebook,.ap-avatar-container .social-symbol-wrapper.twitter,.ap-avatar-container .social-symbol-wrapper.youtube,.ap-avatar-container .social-symbol-wrapper.tiktok{border-radius:100%}.ap-avatar-container .social-symbol-wrapper.instagram{border-radius:28%}.ap-avatar-container .social-symbol-wrapper.linkedin{border-radius:6%}.ap-avatar-container .social-symbol-wrapper.google{box-shadow:none;right:-3px;bottom:-3px}.ap-avatar-container .social-symbol-wrapper.google ap-symbol{border-radius:0;background-color:transparent}.ap-avatar-container .social-symbol-wrapper ap-symbol{border-radius:100%;background-color:#fff}.ap-avatar-container .online-indicator{box-shadow:none;background:#45B854;right:0;bottom:0;position:absolute}.ap-avatar-container .online-indicator.large{outline:5px solid white;border-radius:16px;min-height:16px;min-width:16px}.ap-avatar-container .online-indicator.normal{outline:4px solid white;border-radius:12px;min-height:12px;min-width:12px}.ap-avatar-container .online-indicator.medium,.ap-avatar-container .online-indicator.medium-sm,.ap-avatar-container .online-indicator.small{outline:3px solid white;border-radius:8px;min-height:8px;min-width:8px}.ap-avatar-container .online-indicator.mini,.ap-avatar-container .online-indicator.mini-sm{outline:2px solid white;border-radius:6px;min-height:6px;min-width:6px}.ap-avatar-container .online-indicator.micro{outline:1px solid white;border-radius:4px;min-height:4px;min-width:4px}\n"] }]
+        }], propDecorators: { border: [{
+                type: Input
+            }], defaultImageEnabled: [{
+                type: Input
+            }], fallbackSymbolId: [{
+                type: Input
+            }], fallbackSymbolSize: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], outerBorderHidden: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], social: [{
+                type: Input
+            }], username: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], online: [{
+                type: Input
+            }], imageUrls: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AvatarComponent };
+//# sourceMappingURL=agorapulse-ui-components-avatar.mjs.map

package/fesm2015/agorapulse-ui-components-avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-avatar.mjs","sources":["../../../libs/ui-components/avatar/src/avatar.component.ts","../../../libs/ui-components/avatar/src/avatar.component.html","../../../libs/ui-components/avatar/src/agorapulse-ui-components-avatar.ts"],"sourcesContent":["import {NgForOf, NgIf, SlicePipe} from '@angular/common';\nimport {ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges} from '@angular/core';\nimport {AgorapulseUiSymbolModule, customSvgsSymbolIds, flagSymbolIds, officialSymbolIds, symbolIds, SymbolType} from \"@agorapulse/ui-symbol\";\n\nconst SizeMap: {[key: string]: string} = {\n    'large': '64',\n    'large-sm': '56',\n    'normal': '48',\n    'medium': '40',\n    'medium-sm': '36',\n    'small': '32',\n    'mini': '24',\n    'mini-sm': '16',\n    'micro': '12',\n    'facebook': '40',\n    'linkedin': '40',\n    'instagram': '40',\n    'youtube': '40',\n    'google': '40',\n    'tiktok': '56',\n    'twitter': '48'\n};\n\nconst SizeMapNumbers: {[key: string]: number} = {\n    large: 64,\n    'large-sm': 56,\n    normal: 48,\n    medium: 40,\n    'medium-sm': 36,\n    small: 32,\n    mini: 24,\n    'mini-sm': 16,\n    micro: 12,\n    facebook: 40,\n    linkedin: 40,\n    instagram: 40,\n    youtube: 40,\n    google: 40,\n    tiktok: 56,\n    twitter: 48,\n};\n\nconst SymbolSizeByAvatarSize: {[key: string]: string} = {\n    large: 'small',\n    normal: 'mini',\n    medium: 'mini',\n    'medium-sm': 'mini-sm',\n    small: 'micro',\n    mini: 'micro-sm',\n    'mini-sm': 'pico',\n    micro: 'pico',\n};\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-avatar',\n    styleUrls: ['./avatar.component.scss'],\n    standalone: true,\n    imports: [NgIf, SlicePipe, AgorapulseUiSymbolModule, NgForOf],\n    templateUrl: './avatar.component.html',\n})\nexport class AvatarComponent implements OnChanges {\n    @Input() border = '';\n    @Input() defaultImageEnabled = true; // DEPRECATED default avatar if we don't have username\n    @Input() fallbackSymbolId: SymbolType<typeof symbolIds> | SymbolType<typeof officialSymbolIds> |\n        SymbolType<typeof customSvgsSymbolIds> | SymbolType<typeof flagSymbolIds> = 'single-neutral';\n    @Input() fallbackSymbolSize: string | 'none' | 'pico' | 'nano' | 'micro' | 'mini' | 'small' | 'medium' | 'normal' | 'large' = 'mini';\n    @Input() imageUrl: string;\n    @Input() loading: 'auto' | 'lazy' | 'eager' = 'auto';\n    @Input() outerBorderHidden = false;\n    @Input() size:\n        'large' | 'large-normal' | 'large-sm' | 'normal'| 'medium' | 'medium-sm'  | 'small' | 'mini' | 'mini-sm' | 'micro' |\n        'facebook' | 'twitter' | 'linkedin' | 'instagram' | 'youtube' | 'google' = 'medium';\n    @Input() social: 'facebook' | 'instagram' | 'linkedin' | 'tiktok' | 'twitter' | 'youtube' | 'google';\n    @Input() username: string; // used to display initials\n    @Input() rounded = false;\n    @Input() online = false;\n    @Input() imageUrls: string[];\n\n    socialSize: string;\n    sizeMap = SizeMap;\n    sizeMapNumbers = SizeMapNumbers;\n    symbolSizeByAvatarSize = SymbolSizeByAvatarSize;\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes.social?.currentValue || changes.size?.currentValue) {\n            if (this.social === 'google') {\n                switch (this.size) {\n                    case 'medium-sm':\n                        this.socialSize = '14';\n                        break;\n                    case 'mini':\n                        this.socialSize = '15';\n                        break;\n                    case 'mini-sm':\n                        this.socialSize = '10';\n                        break;\n                    default:\n                        this.socialSize = '19';\n                }\n            } else {\n                switch (this.size) {\n                    case 'medium-sm':\n                    case 'mini':\n                        this.socialSize = '12';\n                        break;\n                    case 'mini-sm':\n                        this.socialSize = '8';\n                        break;\n                    default:\n                        this.socialSize = '16';\n                }\n            }\n        }\n        if (changes.defaultImageEnabled && changes.defaultImageEnabled.currentValue) {\n            console.warn(\"'defaultImageEnabled' attribute is deprecated.\");\n        }\n    }\n\n    onError(): void {\n        this.imageUrl = null;\n    }\n}\n","<div class=\"ap-avatar-container {{size}}\"\n    [style.width]=\"imageUrls ? (imageUrls.length < 4 ? sizeMapNumbers[size] * (imageUrls.length / 3 + 1) + 'px' : sizeMapNumbers[size] * 1.5 + 'px') : sizeMapNumbers[size] + 'px'\">\n    <!-- simple avatar -->\n    <div *ngIf=\"imageUrl || imageUrls; else noPicture\">\n        <img *ngIf=\"imageUrl && !imageUrls\"\n             class=\"ap-avatar {{size}}\"\n             [class.outer-border]=\"!outerBorderHidden\"\n             [class.rounded]=\"rounded\"\n             [attr.border]=\"border\"\n             [attr.loading]=\"loading\"\n             [attr.height]=\"sizeMap[size]\"\n             [attr.width]=\"sizeMap[size]\"\n             [src]=\"imageUrl\"\n             (error)=\"onError()\"/>\n        <div *ngIf=\"imageUrls && !imageUrl\"\n            class=\"multi-avatar-container\">\n            <div *ngFor=\"let url of imageUrls | slice: 0:3; let i = index\">\n                <img *ngIf=\"url\" class=\"ap-avatar {{size}} multi\"\n                     [class.outer-border]=\"!outerBorderHidden\"\n                     [class.rounded]=\"rounded\"\n                     [style.z-index]=\"i\"\n                     [style.left]=\"2 * i * sizeMapNumbers[size] / 3 + 'px'\"\n                     [attr.border]=\"border\"\n                     [attr.loading]=\"loading\"\n                     [attr.height]=\"sizeMap[size]\"\n                     [attr.width]=\"sizeMap[size]\"\n                     [src]=\"url\"\n                     (error)=\"onError()\"/>\n                <span *ngIf=\"!url\"\n                    class=\"ap-avatar ap-avatar-username {{size}} multi\"\n                    [style.z-index]=\"i\"\n                    [style.left]=\"2 * i * sizeMapNumbers[size] / 3 + 'px'\"\n                    [class.outer-border]=\"!outerBorderHidden\"\n                    [class.rounded]=\"rounded\"\n                    [attr.border]=\"border\">\n                    <ng-container *ngIf=\"username; else symbol\">\n                        {{username.charAt(0).toUpperCase()}}\n                    </ng-container>\n                    <ng-template #symbol>\n                        <ap-symbol\n                            [size]=\"fallbackSymbolSize\"\n                            [symbolId]=\"fallbackSymbolId\">\n                        </ap-symbol>\n                    </ng-template>\n                </span>\n            </div>\n        </div>\n    </div>\n    <!-- image with first letter of screen name -->\n    <ng-template #noPicture>\n        <span\n              class=\"ap-avatar ap-avatar-username {{size}}\"\n              [class.outer-border]=\"!outerBorderHidden\"\n              [class.rounded]=\"rounded\"\n              [attr.border]=\"border\">\n            <ng-container *ngIf=\"username; else symbol\">\n                {{username.charAt(0).toUpperCase()}}\n            </ng-container>\n            <ng-template #symbol>\n                <ap-symbol\n                    [size]=\"symbolSizeByAvatarSize[size] ?? fallbackSymbolSize\"\n                    [symbolId]=\"fallbackSymbolId\">\n                </ap-symbol>\n            </ng-template>\n        </span>\n    </ng-template>\n\n    <div  *ngIf=\"social\"\n          class=\"social-symbol-wrapper {{social}} {{size}}\">\n        <ap-symbol [symbolId]=\"social === 'google' ? social + '-my-business-official' : social + '-official'\"\n                   [size]=\"socialSize\">\n        </ap-symbol>\n    </div>\n    <div *ngIf=\"online\" class=\"online-indicator {{size}}\"></div>\n\n</div>\n<label>\n    <ng-content></ng-content>\n</label>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2015/agorapulse-ui-components-confirm-modal.mjs

@@ -0,0 +1,68 @@
+import { ModalComponent } from '@agorapulse/ui-components/modal';
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1 from '@angular/material/dialog';
+
+class ConfirmModalComponent {
+    constructor(dialogRef) {
+        this.dialogRef = dialogRef;
+        this.contentText = '';
+        this.footerCancelButtonId = 'cancel';
+        this.footerCancelButtonLabel = '';
+        this.footerConfirmButtonId = 'confirm';
+        this.footerConfirmButtonLabel = '';
+        this.headerTitle = '';
+        dialogRef.disableClose = true;
+    }
+    onCancel() {
+        this.dialogRef.close(false);
+    }
+    onConfirm() {
+        this.dialogRef.close(true);
+    }
+    static open(dialog, confirmModalTexts, modalConfig = null) {
+        if (!modalConfig) {
+            modalConfig = {};
+        }
+        if (!modalConfig.matDialogConfig) {
+            modalConfig.matDialogConfig = {
+                width: '550px',
+            };
+        }
+        const confirmModal = ModalComponent.openWithComponent(dialog, modalConfig, ConfirmModalComponent);
+        confirmModal.componentInstance.contentText = confirmModalTexts.contentText;
+        confirmModal.componentInstance.footerConfirmButtonId = confirmModalTexts.footerConfirmButtonId;
+        confirmModal.componentInstance.footerConfirmButtonLabel = confirmModalTexts.footerConfirmButtonLabel;
+        confirmModal.componentInstance.footerCancelButtonId = confirmModalTexts.footerCancelButtonId;
+        confirmModal.componentInstance.footerCancelButtonLabel = confirmModalTexts.footerCancelButtonLabel;
+        confirmModal.componentInstance.headerTitle = confirmModalTexts.headerTitle;
+        return confirmModal;
+    }
+}
+ConfirmModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ConfirmModalComponent, deps: [{ token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+ConfirmModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ConfirmModalComponent, isStandalone: true, selector: "ap-confirm-modal", inputs: { contentText: "contentText", footerCancelButtonId: "footerCancelButtonId", footerCancelButtonLabel: "footerCancelButtonLabel", footerConfirmButtonId: "footerConfirmButtonId", footerConfirmButtonLabel: "footerConfirmButtonLabel", headerTitle: "headerTitle" }, ngImport: i0, template: "<ng-template #headerTemplate>\n    <h2>{{headerTitle}}</h2>\n</ng-template>\n\n<ng-template #mainTemplate>\n    <p>{{contentText}}</p>\n</ng-template>\n\n<ng-template #footerTemplate>\n    <button mat-flat-button (click)=\"onCancel()\" [id]=\"footerCancelButtonId\">\n        {{ footerCancelButtonLabel }}\n    </button>\n    <button mat-flat-button color=\"primary\" cdkFocusInitial [id]=footerConfirmButtonId\n            (click)=\"onConfirm()\">\n        {{ footerConfirmButtonLabel }}\n    </button>\n</ng-template>\n\n<ap-modal [closable]=\"true\"\n          [headerTemplate]=\"headerTemplate\"\n          [mainTemplate]=\"mainTemplate\"\n          [footerTemplate]=\"footerTemplate\"\n></ap-modal>\n", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: ModalComponent, selector: "ap-modal", inputs: ["closable", "headerBottomBorderEnabled", "footerTemplate", "footerVisible", "headerTemplate", "headerVisible", "mainTemplate", "config", "containerStyle", "headerStyle", "contentStyle", "footerStyle", "defaultLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ConfirmModalComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-confirm-modal', imports: [MatButtonModule, ModalComponent], standalone: true, template: "<ng-template #headerTemplate>\n    <h2>{{headerTitle}}</h2>\n</ng-template>\n\n<ng-template #mainTemplate>\n    <p>{{contentText}}</p>\n</ng-template>\n\n<ng-template #footerTemplate>\n    <button mat-flat-button (click)=\"onCancel()\" [id]=\"footerCancelButtonId\">\n        {{ footerCancelButtonLabel }}\n    </button>\n    <button mat-flat-button color=\"primary\" cdkFocusInitial [id]=footerConfirmButtonId\n            (click)=\"onConfirm()\">\n        {{ footerConfirmButtonLabel }}\n    </button>\n</ng-template>\n\n<ap-modal [closable]=\"true\"\n          [headerTemplate]=\"headerTemplate\"\n          [mainTemplate]=\"mainTemplate\"\n          [footerTemplate]=\"footerTemplate\"\n></ap-modal>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialogRef }]; }, propDecorators: { contentText: [{
+                type: Input
+            }], footerCancelButtonId: [{
+                type: Input
+            }], footerCancelButtonLabel: [{
+                type: Input
+            }], footerConfirmButtonId: [{
+                type: Input
+            }], footerConfirmButtonLabel: [{
+                type: Input
+            }], headerTitle: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ConfirmModalComponent };
+//# sourceMappingURL=agorapulse-ui-components-confirm-modal.mjs.map

package/fesm2015/agorapulse-ui-components-confirm-modal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-confirm-modal.mjs","sources":["../../../libs/ui-components/confirm-modal/src/confirm-modal.component.ts","../../../libs/ui-components/confirm-modal/src/confirm-modal.component.html","../../../libs/ui-components/confirm-modal/src/agorapulse-ui-components-confirm-modal.ts"],"sourcesContent":["import {ModalComponent, ModalConfig} from '@agorapulse/ui-components/modal';\nimport {ComponentType} from '@angular/cdk/portal';\nimport {ChangeDetectionStrategy, Component, Input} from '@angular/core';\nimport {MatButtonModule} from '@angular/material/button';\nimport {MatDialog, MatDialogRef} from '@angular/material/dialog';\nimport {ConfirmModalTexts} from './confirm-modal-texts.model';\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-confirm-modal',\n    templateUrl: 'confirm-modal.component.html',\n    imports: [MatButtonModule, ModalComponent],\n    standalone: true,\n})\nexport class ConfirmModalComponent {\n    @Input() contentText: string = '';\n    @Input() footerCancelButtonId: string = 'cancel';\n    @Input() footerCancelButtonLabel: string = '';\n    @Input() footerConfirmButtonId: string = 'confirm';\n    @Input() footerConfirmButtonLabel: string = '';\n    @Input() headerTitle: string = '';\n\n    constructor(public dialogRef: MatDialogRef<ComponentType<any>>) {\n        dialogRef.disableClose = true;\n    }\n\n    onCancel() {\n        this.dialogRef.close(false);\n    }\n\n    onConfirm() {\n        this.dialogRef.close(true);\n    }\n\n    static open(dialog: MatDialog, confirmModalTexts: ConfirmModalTexts, modalConfig: ModalConfig = null) {\n        if (!modalConfig) {\n            modalConfig = {};\n        }\n        if (!modalConfig.matDialogConfig) {\n            modalConfig.matDialogConfig = {\n                width: '550px',\n            };\n        }\n        const confirmModal = ModalComponent.openWithComponent(dialog, modalConfig, ConfirmModalComponent);\n        confirmModal.componentInstance.contentText = confirmModalTexts.contentText;\n        confirmModal.componentInstance.footerConfirmButtonId = confirmModalTexts.footerConfirmButtonId;\n        confirmModal.componentInstance.footerConfirmButtonLabel = confirmModalTexts.footerConfirmButtonLabel;\n        confirmModal.componentInstance.footerCancelButtonId = confirmModalTexts.footerCancelButtonId;\n        confirmModal.componentInstance.footerCancelButtonLabel = confirmModalTexts.footerCancelButtonLabel;\n        confirmModal.componentInstance.headerTitle = confirmModalTexts.headerTitle;\n        return confirmModal;\n    }\n}\n","<ng-template #headerTemplate>\n    <h2>{{headerTitle}}</h2>\n</ng-template>\n\n<ng-template #mainTemplate>\n    <p>{{contentText}}</p>\n</ng-template>\n\n<ng-template #footerTemplate>\n    <button mat-flat-button (click)=\"onCancel()\" [id]=\"footerCancelButtonId\">\n        {{ footerCancelButtonLabel }}\n    </button>\n    <button mat-flat-button color=\"primary\" cdkFocusInitial [id]=footerConfirmButtonId\n            (click)=\"onConfirm()\">\n        {{ footerConfirmButtonLabel }}\n    </button>\n</ng-template>\n\n<ap-modal [closable]=\"true\"\n          [headerTemplate]=\"headerTemplate\"\n          [mainTemplate]=\"mainTemplate\"\n          [footerTemplate]=\"footerTemplate\"\n></ap-modal>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;MAca,qBAAqB,CAAA;AAQ9B,IAAA,WAAA,CAAmB,SAA2C,EAAA;AAA3C,QAAA,IAAS,CAAA,SAAA,GAAT,SAAS,CAAkC;AAPrD,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE,CAAC;AACzB,QAAA,IAAoB,CAAA,oBAAA,GAAW,QAAQ,CAAC;AACxC,QAAA,IAAuB,CAAA,uBAAA,GAAW,EAAE,CAAC;AACrC,QAAA,IAAqB,CAAA,qBAAA,GAAW,SAAS,CAAC;AAC1C,QAAA,IAAwB,CAAA,wBAAA,GAAW,EAAE,CAAC;AACtC,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE,CAAC;AAG9B,QAAA,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC;KACjC;IAED,QAAQ,GAAA;AACJ,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KAC/B;IAED,SAAS,GAAA;AACL,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,OAAO,IAAI,CAAC,MAAiB,EAAE,iBAAoC,EAAE,cAA2B,IAAI,EAAA;QAChG,IAAI,CAAC,WAAW,EAAE;YACd,WAAW,GAAG,EAAE,CAAC;AACpB,SAAA;AACD,QAAA,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE;YAC9B,WAAW,CAAC,eAAe,GAAG;AAC1B,gBAAA,KAAK,EAAE,OAAO;aACjB,CAAC;AACL,SAAA;AACD,QAAA,MAAM,YAAY,GAAG,cAAc,CAAC,iBAAiB,CAAC,MAAM,EAAE,WAAW,EAAE,qBAAqB,CAAC,CAAC;QAClG,YAAY,CAAC,iBAAiB,CAAC,WAAW,GAAG,iBAAiB,CAAC,WAAW,CAAC;QAC3E,YAAY,CAAC,iBAAiB,CAAC,qBAAqB,GAAG,iBAAiB,CAAC,qBAAqB,CAAC;QAC/F,YAAY,CAAC,iBAAiB,CAAC,wBAAwB,GAAG,iBAAiB,CAAC,wBAAwB,CAAC;QACrG,YAAY,CAAC,iBAAiB,CAAC,oBAAoB,GAAG,iBAAiB,CAAC,oBAAoB,CAAC;QAC7F,YAAY,CAAC,iBAAiB,CAAC,uBAAuB,GAAG,iBAAiB,CAAC,uBAAuB,CAAC;QACnG,YAAY,CAAC,iBAAiB,CAAC,WAAW,GAAG,iBAAiB,CAAC,WAAW,CAAC;AAC3E,QAAA,OAAO,YAAY,CAAC;KACvB;;kHArCQ,qBAAqB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,qBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,ECdlC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,uBAAA,EAAA,yBAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,wBAAA,EAAA,0BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,msBAuBA,EDZc,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,eAAe,2VAAE,cAAc,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,2BAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,cAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,aAAA,EAAA,cAAA,EAAA,aAAA,EAAA,eAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FAGhC,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;sCACW,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,kBAAkB,EAAA,OAAA,EAEnB,CAAC,eAAe,EAAE,cAAc,CAAC,EAAA,UAAA,EAC9B,IAAI,EAAA,QAAA,EAAA,msBAAA,EAAA,CAAA;mGAGP,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,oBAAoB,EAAA,CAAA;sBAA5B,KAAK;gBACG,uBAAuB,EAAA,CAAA;sBAA/B,KAAK;gBACG,qBAAqB,EAAA,CAAA;sBAA7B,KAAK;gBACG,wBAAwB,EAAA,CAAA;sBAAhC,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;;;AEpBV;;AAEG;;;;"}

package/fesm2015/agorapulse-ui-components-datepicker.mjs

@@ -0,0 +1,235 @@
+import * as i1 from '@agorapulse/ui-symbol';
+import { AgorapulseUiSymbolModule } from '@agorapulse/ui-symbol';
+import { NgIf } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, ViewChild, Input, Output } from '@angular/core';
+import moment from 'moment';
+import * as i2 from 'ngx-daterangepicker-material';
+import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
+
+var DatepickerMode;
+(function (DatepickerMode) {
+    DatepickerMode["Single"] = "Single";
+    DatepickerMode["Multiple"] = "Multiple";
+    DatepickerMode["Range"] = "Range";
+})(DatepickerMode || (DatepickerMode = {}));
+var SideEnum;
+(function (SideEnum) {
+    SideEnum["left"] = "left";
+    SideEnum["right"] = "right";
+})(SideEnum || (SideEnum = {}));
+// TODO fix css for range mode (more lateral padding)
+class DatepickerComponent {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.i18n = {
+            ranges: {
+                yesterday: 'Yesterday',
+                lastWeek: 'Last Week',
+                last30Days: 'Last 30 days',
+                lastMonth: 'Previous month',
+                thisMonth: 'This Month',
+            },
+        };
+        this.selectedDates = [];
+        this.selectedPeriod = { startDate: null, endDate: null };
+        this.dateSelected = new EventEmitter();
+        this.periodSelected = new EventEmitter();
+        this.DatepickerMode = DatepickerMode;
+        this.doubleCalendarWidth = 528; // 231px calendar table * 2 = 462 (+ 16px x-padding * 4 = 64)
+        this.ranges = {};
+        this.rangePickerWidth = 150;
+        this.pageSet = false;
+        this.isCustomDate = (date) => {
+            var _a, _b;
+            const classes = [];
+            if (this.mode === DatepickerMode.Multiple) {
+                classes.push(this.isSelected(date) ? 'active' : 'force-inactive');
+            }
+            else if (this.mode === DatepickerMode.Single) {
+                classes.push(this.selectedDate && this.selectedDate.isSame(date, 'day') ? 'active' : 'force-inactive');
+            }
+            else if (this.mode === DatepickerMode.Range) {
+                classes.push('range-picker-mode');
+                // Workaround to fix the auto-active today date when no date is selected
+                if (moment().isSame(date, 'day') && !((_a = this.selectedPeriod) === null || _a === void 0 ? void 0 : _a.startDate) && !((_b = this.selectedPeriod) === null || _b === void 0 ? void 0 : _b.endDate)) {
+                    classes.push('force-inactive');
+                }
+            }
+            return classes;
+        };
+    }
+    ngOnInit() {
+        this.initRanges();
+        this.initDatePickerLocale();
+    }
+    ngOnChanges(changes) {
+        var _a, _b;
+        this.setWidth();
+        if (this.datepickerRef) {
+            setTimeout(() => {
+                this.datepickerRef.updateCalendars();
+                this.changeDetectorRef.detectChanges();
+            }, 100);
+        }
+        if (((_a = changes.selectedPeriod) === null || _a === void 0 ? void 0 : _a.currentValue) && this.datepickerRef) {
+            if (this.selectedPeriod.startDate === null && this.selectedPeriod.endDate === null) {
+                this.datepickerRef.clear();
+            }
+            else {
+                this.datepickerRef.setStartDate(this.selectedPeriod.startDate);
+                this.datepickerRef.setEndDate(this.selectedPeriod.endDate);
+            }
+        }
+        if (((_b = changes.mode) === null || _b === void 0 ? void 0 : _b.currentValue) === DatepickerMode.Single && this.datepickerRef) {
+            this.setCalendarCurrentPage();
+        }
+    }
+    ngAfterViewInit() {
+        if (this.datepickerRef) {
+            setTimeout(() => {
+                this.datepickerRef.updateCalendars();
+                this.setCalendarCurrentPage();
+            }, 100);
+        }
+    }
+    initDatePickerLocale() {
+        if (this.locale) {
+            moment.locale(this.locale);
+        }
+        let firstDayOfWeekIndex;
+        if (this.firstDayOfWeek === 'sunday') {
+            firstDayOfWeekIndex = 0;
+        }
+        else if (this.firstDayOfWeek === 'monday') {
+            firstDayOfWeekIndex = 1;
+        }
+        else {
+            firstDayOfWeekIndex = moment.localeData().firstDayOfWeek();
+        }
+        this.localeConfig = {
+            customRangeLabel: 'custom',
+            daysOfWeek: moment.weekdaysMin(),
+            monthNames: moment.months(),
+            firstDay: firstDayOfWeekIndex,
+        };
+    }
+    initRanges() {
+        this.ranges[this.i18n.ranges.yesterday] = [moment().subtract(1, 'days'), moment().subtract(1, 'days')];
+        this.ranges[this.i18n.ranges.lastWeek] = [moment().subtract(7, 'days'), moment().subtract(1, 'days')];
+        this.ranges[this.i18n.ranges.last30Days] = [moment().subtract(30, 'days'), moment().subtract(1, 'days')];
+        this.ranges[this.i18n.ranges.lastMonth] = [
+            moment().subtract(1, 'month').startOf('month'),
+            moment().subtract(1, 'month').endOf('month'),
+        ];
+        this.ranges[this.i18n.ranges.thisMonth] = [moment().startOf('month'), moment().endOf('month')];
+    }
+    isSelected(date) {
+        return this.selectedDates && this.selectedDates.some(selectedDate => selectedDate.isSame(date, 'day'));
+    }
+    onStartDateChanged(event) {
+        const date = event.startDate;
+        if (this.mode !== DatepickerMode.Range) {
+            this.selectedDate = date;
+            this.datepickerRef.setEndDate(date);
+            if (this.pageSet) {
+                this.pageSet = false;
+            }
+            else {
+                this.dateSelected.emit(date.clone());
+                if (this.mode === DatepickerMode.Multiple) {
+                    this.selectedDates.push(date);
+                }
+            }
+            if (this.datepickerRef) {
+                this.datepickerRef.updateCalendars();
+            }
+        }
+    }
+    onDatesUpdated(event) {
+        var _a, _b;
+        if (this.mode === DatepickerMode.Range) {
+            this.periodSelected.emit({
+                startDate: (_a = event.startDate) === null || _a === void 0 ? void 0 : _a.clone(),
+                endDate: (_b = event.endDate) === null || _b === void 0 ? void 0 : _b.clone(),
+            });
+        }
+        if (this.datepickerRef) {
+            this.datepickerRef.updateCalendars();
+        }
+    }
+    onNextMonth() {
+        this.datepickerRef.leftCalendar.month = this.datepickerRef.leftCalendar.month.add(1, 'months').clone();
+        this.datepickerRef.rightCalendar.month = this.datepickerRef.rightCalendar.month.add(1, 'months').clone();
+        this.datepickerRef.clickNext(SideEnum.left);
+        this.datepickerRef.clickNext(SideEnum.right);
+    }
+    onPreviousMonth() {
+        this.datepickerRef.leftCalendar.month = this.datepickerRef.leftCalendar.month.subtract(1, 'months').clone();
+        this.datepickerRef.rightCalendar.month = this.datepickerRef.rightCalendar.month.subtract(1, 'months').clone();
+        this.datepickerRef.clickPrev(SideEnum.left);
+        this.datepickerRef.clickPrev(SideEnum.right);
+    }
+    /**
+     * Ugly hack used here to open the calendar on the right day if they are selected dates
+     *      * https://github.com/fetrarij/ngx-daterangepicker-material/issues/139
+     */
+    setCalendarCurrentPage() {
+        const selectedFirstDate = this.selectedDates.length > 0 ? this.selectedDates[0] : this.selectedDate;
+        if (selectedFirstDate && selectedFirstDate.isValid() && this.mode !== DatepickerMode.Range) {
+            const endDate = selectedFirstDate.clone();
+            endDate.add(1, 'month');
+            this.pageSet = true;
+            this.datepickerRef.setStartDate(selectedFirstDate);
+            this.datepickerRef.setEndDate(endDate);
+            this.datepickerRef.updateView();
+        }
+        this.changeDetectorRef.detectChanges();
+    }
+    setWidth() {
+        this.width =
+            this.showRanges && this.mode === DatepickerMode.Range
+                ? this.doubleCalendarWidth + this.rangePickerWidth
+                : this.doubleCalendarWidth;
+    }
+}
+DatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: DatepickerComponent, isStandalone: true, selector: "ap-datepicker", inputs: { firstDayOfWeek: "firstDayOfWeek", i18n: "i18n", locale: "locale", maxDate: "maxDate", minDate: "minDate", mode: "mode", selectedDate: "selectedDate", selectedDates: "selectedDates", selectedPeriod: "selectedPeriod", showRanges: "showRanges" }, outputs: { dateSelected: "dateSelected", periodSelected: "periodSelected" }, viewQueries: [{ propertyName: "datepickerRef", first: true, predicate: ["datepickerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"custom-calendar\" [style.width]=\"width + 'px'\">\n    <div class=\"custom-header\">\n        <div class=\"month-header\"\n             *ngIf=\"this.datepickerRef.leftCalendar.month\">\n            <div class=\"month-arrow-button\" (click)=\"onPreviousMonth()\">\n                <ap-symbol\n                    [symbolId]=\"'arrow-left-1'\"\n                    [color]=\"'#858FA1'\"\n                    [size]=\"'14'\"></ap-symbol>\n            </div>\n            <div class=\"month-label\">\n                {{ this.datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}\n            </div>\n        </div>\n        <div class=\"month-header\"\n             *ngIf=\"this.datepickerRef.rightCalendar.month\">\n            <div class=\"month-label\">\n                {{ this.datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}\n            </div>\n            <div class=\"month-arrow-button\" (click)=\"onNextMonth()\">\n                <ap-symbol\n                    [symbolId]=\"'arrow-right-1'\"\n                    [color]=\"'#858FA1'\"\n                    [size]=\"'14'\"></ap-symbol>\n            </div>\n        </div>\n        <div class=\"header-filler\" *ngIf=\"showRanges && mode === DatepickerMode.Range\">\n        </div>\n    </div>\n    <ngx-daterangepicker-material\n        #datepickerRef\n        [class.hide-ranges]=\"!showRanges\"\n        [alwaysShowCalendars]=\"true\"\n        [autoApply]=\"true\"\n        [customRangeDirection]=\"true\"\n        [isCustomDate]=\"$any(isCustomDate)\"\n        [locale]=\"localeConfig\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [ranges]=\"showRanges && mode === DatepickerMode.Range ? ranges : null\"\n        (datesUpdated)=\"onDatesUpdated($event)\"\n        (startDateChanged)=\"onStartDateChanged($event)\">\n    </ngx-daterangepicker-material>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}::ng-deep .custom-calendar{background-color:#fff;display:flex;flex-direction:column;justify-content:center;border-radius:4px;height:-moz-fit-content;height:fit-content}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;justify-content:center;color:#344563;font-size:12px;font-weight:700;height:55px;text-transform:capitalize}::ng-deep .custom-calendar .custom-header .month-header{height:30px;width:255px;display:flex;align-items:center}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button{padding:10px;border-radius:2em;cursor:pointer}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button:hover{background-color:#eaecef}::ng-deep .custom-calendar .custom-header .month-header .month-label{flex:1;text-align:center}::ng-deep .custom-calendar .custom-header .header-filler{width:150px}::ng-deep .custom-calendar .md-drppicker{font-family:Averta;width:unset;height:219px;padding:0;margin:0 0 16px;box-shadow:none!important;z-index:0!important}::ng-deep .custom-calendar .md-drppicker .ranges{border-left:1px solid #eaecef;float:right!important;max-width:150px;height:100%}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:12px}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{font-family:Averta;font-size:14px;border-radius:4px;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){color:#178dfe;background:#e8f4ff}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{color:#fff;background:#178dfe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active:hover{background:#3a9efe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{color:#d6dae0;background:none;cursor:default}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0!important;padding:0 16px}::ng-deep .custom-calendar .md-drppicker .calendar.left{border-right:1px solid #eaecef}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:231px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 5px!important;height:184px}::ng-deep .custom-calendar .md-drppicker .calendar-table table td,::ng-deep .custom-calendar .md-drppicker .calendar-table table th{height:unset;border:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{color:#aeb5c1;font-weight:700;font-size:12px;text-transform:capitalize;padding-bottom:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.month,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next{color:#344563}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next{font-size:16px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 2em 2em 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:2em 0 0 2em}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{opacity:1!important;border-spacing:0;height:27px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{width:27px!important;height:27px!important;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:3px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:#e8f4ff!important;color:#344563!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:2em 0 0 2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 2em 2em 0;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off) span{border-radius:2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover span{background-color:#d1e8ff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover:not(.in-range),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover:not(.in-range){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:unset!important;color:#d6dae0!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode) span{background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive{background-color:unset!important;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off) span{border:1px solid #178dfe;color:#5d6a82;height:25px!important;width:25px!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).start-date:not(.force-inactive) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).end-date:not(.force-inactive) span{color:#fff}.hide-ranges ::ng-deep .ranges{display:none}\n"], dependencies: [{ kind: "ngmodule", type: AgorapulseUiSymbolModule }, { kind: "component", type: i1.SymbolComponent, selector: "ap-symbol", inputs: ["color", "id", "symbolId", "size", "state"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxDaterangepickerMd }, { kind: "component", type: i2.DaterangepickerComponent, selector: "ngx-daterangepicker-material", inputs: ["startDate", "endDate", "dateLimit", "minDate", "maxDate", "autoApply", "singleDatePicker", "showDropdowns", "showWeekNumbers", "showISOWeekNumbers", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "maxSpan", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "showClearButton", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "showCancel", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "customRangeDirection", "closeOnAutoApply", "locale", "ranges", "isInvalidDate", "isCustomDate", "isTooltipDate", "showCustomRangeLabel", "drops", "opens"], outputs: ["choosedDate", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-datepicker', standalone: true, imports: [AgorapulseUiSymbolModule, NgIf, NgxDaterangepickerMd], template: "<div class=\"custom-calendar\" [style.width]=\"width + 'px'\">\n    <div class=\"custom-header\">\n        <div class=\"month-header\"\n             *ngIf=\"this.datepickerRef.leftCalendar.month\">\n            <div class=\"month-arrow-button\" (click)=\"onPreviousMonth()\">\n                <ap-symbol\n                    [symbolId]=\"'arrow-left-1'\"\n                    [color]=\"'#858FA1'\"\n                    [size]=\"'14'\"></ap-symbol>\n            </div>\n            <div class=\"month-label\">\n                {{ this.datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}\n            </div>\n        </div>\n        <div class=\"month-header\"\n             *ngIf=\"this.datepickerRef.rightCalendar.month\">\n            <div class=\"month-label\">\n                {{ this.datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}\n            </div>\n            <div class=\"month-arrow-button\" (click)=\"onNextMonth()\">\n                <ap-symbol\n                    [symbolId]=\"'arrow-right-1'\"\n                    [color]=\"'#858FA1'\"\n                    [size]=\"'14'\"></ap-symbol>\n            </div>\n        </div>\n        <div class=\"header-filler\" *ngIf=\"showRanges && mode === DatepickerMode.Range\">\n        </div>\n    </div>\n    <ngx-daterangepicker-material\n        #datepickerRef\n        [class.hide-ranges]=\"!showRanges\"\n        [alwaysShowCalendars]=\"true\"\n        [autoApply]=\"true\"\n        [customRangeDirection]=\"true\"\n        [isCustomDate]=\"$any(isCustomDate)\"\n        [locale]=\"localeConfig\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [ranges]=\"showRanges && mode === DatepickerMode.Range ? ranges : null\"\n        (datesUpdated)=\"onDatesUpdated($event)\"\n        (startDateChanged)=\"onStartDateChanged($event)\">\n    </ngx-daterangepicker-material>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}::ng-deep .custom-calendar{background-color:#fff;display:flex;flex-direction:column;justify-content:center;border-radius:4px;height:-moz-fit-content;height:fit-content}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;justify-content:center;color:#344563;font-size:12px;font-weight:700;height:55px;text-transform:capitalize}::ng-deep .custom-calendar .custom-header .month-header{height:30px;width:255px;display:flex;align-items:center}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button{padding:10px;border-radius:2em;cursor:pointer}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button:hover{background-color:#eaecef}::ng-deep .custom-calendar .custom-header .month-header .month-label{flex:1;text-align:center}::ng-deep .custom-calendar .custom-header .header-filler{width:150px}::ng-deep .custom-calendar .md-drppicker{font-family:Averta;width:unset;height:219px;padding:0;margin:0 0 16px;box-shadow:none!important;z-index:0!important}::ng-deep .custom-calendar .md-drppicker .ranges{border-left:1px solid #eaecef;float:right!important;max-width:150px;height:100%}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:12px}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{font-family:Averta;font-size:14px;border-radius:4px;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){color:#178dfe;background:#e8f4ff}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{color:#fff;background:#178dfe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active:hover{background:#3a9efe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{color:#d6dae0;background:none;cursor:default}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0!important;padding:0 16px}::ng-deep .custom-calendar .md-drppicker .calendar.left{border-right:1px solid #eaecef}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:231px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 5px!important;height:184px}::ng-deep .custom-calendar .md-drppicker .calendar-table table td,::ng-deep .custom-calendar .md-drppicker .calendar-table table th{height:unset;border:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{color:#aeb5c1;font-weight:700;font-size:12px;text-transform:capitalize;padding-bottom:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.month,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next{color:#344563}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next{font-size:16px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 2em 2em 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:2em 0 0 2em}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{opacity:1!important;border-spacing:0;height:27px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{width:27px!important;height:27px!important;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:3px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:#e8f4ff!important;color:#344563!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:2em 0 0 2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 2em 2em 0;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off) span{border-radius:2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover span{background-color:#d1e8ff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover:not(.in-range),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover:not(.in-range){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:unset!important;color:#d6dae0!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode) span{background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive{background-color:unset!important;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off) span{border:1px solid #178dfe;color:#5d6a82;height:25px!important;width:25px!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).start-date:not(.force-inactive) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).end-date:not(.force-inactive) span{color:#fff}.hide-ranges ::ng-deep .ranges{display:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { datepickerRef: [{
+                type: ViewChild,
+                args: ['datepickerRef']
+            }], firstDayOfWeek: [{
+                type: Input
+            }], i18n: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], selectedDate: [{
+                type: Input
+            }], selectedDates: [{
+                type: Input
+            }], selectedPeriod: [{
+                type: Input
+            }], showRanges: [{
+                type: Input
+            }], dateSelected: [{
+                type: Output
+            }], periodSelected: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DatepickerComponent, DatepickerMode };
+//# sourceMappingURL=agorapulse-ui-components-datepicker.mjs.map