@agorapulse/ui-components 18.0.16 → 18.0.18

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

@@ -55,7 +55,7 @@ class AvatarComponent {
     bigNetwork = input(false);
     anonymous = input(false);
     online = input(false);
-    hideBigNetwork = input(false, { alias: 'youtubeAvatarMode' });
+    hideBigNetwork = input(false, { alias: 'youtubeAvatarMode' }); // TODO: rename youtubeAvatarMode to hideBigNetwork in platform
     rounded = input(true, { transform: booleanAttribute });
     imageError = signal(false);
     backgroundView = computed(() => this.buildBackgroundView());

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

@@ -1 +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 {\n    agorapulseSymbol,\n    apShowTheaterMaskHappy,\n    apSingleNeutral,\n    networkDescription,\n    NetworkName,\n    NetworkSymbolPipe,\n    SymbolComponent,\n    SymbolRegistry,\n    toNetworkSymbol,\n} from '@agorapulse/ui-symbol';\nimport { NgClass, NgOptimizedImage, NgStyle } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, input, signal, untracked } from '@angular/core';\n\nexport type AvatarNetwork = NetworkName;\nexport type AvatarSize = 56 | 48 | 40 | 36 | 32 | 24 | 16;\n\nconst onlineIconSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 16,\n    48: 12,\n    40: 12,\n    36: 8,\n    32: 8,\n    24: 6,\n    16: 6,\n};\n\nconst symbolSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 28,\n    48: 24,\n    40: 20,\n    36: 18,\n    32: 16,\n    24: 12,\n    16: 8,\n};\n\nconst networkSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 16,\n    48: 16,\n    40: 16,\n    36: 16,\n    32: 12,\n    24: 12,\n    16: 8,\n};\n\nconst initialSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 28,\n    48: 24,\n    40: 20,\n    36: 16,\n    32: 16,\n    24: 12,\n    16: 8,\n};\n\nconst automaticBigSymbolNetwork: AvatarNetwork[] = ['youtube'];\n\ntype BackgroundView =\n    | { mode: 'image'; image: { src: string; size: number; alt?: string } }\n    | { mode: 'initials'; text: string }\n    | { mode: 'symbol'; symbolId: agorapulseSymbol; big?: boolean }\n    | { mode?: never };\n\ntype OverlayView = { mode: 'online' } | { mode: 'network'; network: NetworkName; round: boolean } | { mode?: never };\n\n@Component({\n    selector: 'ap-avatar',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    templateUrl: './avatar.component.html',\n    styleUrls: ['./avatar.component.scss'],\n    standalone: true,\n    imports: [NgOptimizedImage, SymbolComponent, NgClass, NetworkSymbolPipe],\n    hostDirectives: [NgStyle],\n    host: {\n        '[class.background-default]': '!showBigNetworkBackground()',\n        role: 'presentation',\n    },\n})\nexport class AvatarComponent {\n    profilePicture = input<string>();\n    alt = input('');\n    network = input(undefined, {\n        transform: (v?: AvatarNetwork | string) => (v !== undefined ? (v as AvatarNetwork) : v),\n    });\n    size = input<AvatarSize | `${AvatarSize}`>(40);\n    username = input<string>();\n    showInitials = input<boolean | string>();\n    bigNetwork = input(false);\n    anonymous = input(false);\n    online = input(false);\n    hideBigNetwork = input(false, { alias: 'youtubeAvatarMode' });\n    rounded = input(true, { transform: booleanAttribute });\n\n    private imageError = signal(false);\n\n    backgroundView = computed<BackgroundView>(() => this.buildBackgroundView());\n    overlayView = computed<OverlayView>(() => this.buildOverlayView());\n    private useBigNetwork = computed(() => {\n        return (this.automaticBigSymbolNetwork() || this.bigNetwork()) && this.network();\n    });\n    private automaticBigSymbolNetwork = computed(() => {\n        return automaticBigSymbolNetwork.includes(this.network() as AvatarNetwork);\n    });\n    protected showBigNetworkBackground = computed(() => {\n        return !this.anonymous() && this.useBigNetwork() && (!this.validProfilePicture() || !this.hideBigNetwork());\n    });\n    private validProfilePicture = computed(() => {\n        return !this.imageError() ? this.profilePicture() : undefined;\n    });\n\n    constructor(\n        symbolRegistry: SymbolRegistry,\n        private ngStyle: NgStyle\n    ) {\n        const networkSymbols = Object.values(networkDescription) //\n            .flatMap(({ symbol }) => (typeof symbol !== 'string' ? [symbol] : []));\n\n        symbolRegistry.registerSymbols([...networkSymbols, apSingleNeutral, apShowTheaterMaskHappy]);\n\n        effect(() => {\n            this.ngStyle.ngStyle = this.buildHostStyle();\n            this.ngStyle.ngDoCheck();\n        });\n        effect(() => {\n            this.profilePicture(); // on change\n            untracked(() => this.imageError.set(false));\n        });\n    }\n\n    onImageError(): void {\n        this.imageError.set(true);\n    }\n\n    private buildBackgroundView(): BackgroundView {\n        let bgView: BackgroundView;\n\n        if (this.showBigNetworkBackground()) {\n            bgView = { mode: 'symbol', symbolId: toNetworkSymbol(this.network()!), big: true };\n        } else if (this.anonymous()) {\n            bgView = { mode: 'symbol', symbolId: apShowTheaterMaskHappy.name };\n        } else {\n            const profilePicture = this.validProfilePicture();\n\n            if (profilePicture) {\n                bgView = {\n                    mode: 'image',\n                    image: {\n                        src: profilePicture,\n                        size: +this.size(),\n                        alt: this.alt(),\n                    },\n                };\n            } else {\n                const initials = this.showInitials();\n\n                if (initials !== false && initials !== undefined) {\n                    const useDefault = initials === true || initials === '';\n                    const candidateName = (useDefault ? this.username()?.charAt(0) ?? '' : initials.slice(0, 2)).toUpperCase();\n                    bgView = { mode: 'initials', text: candidateName };\n                } else {\n                    bgView = { mode: 'symbol', symbolId: apSingleNeutral.name };\n                }\n            }\n        }\n\n        return bgView;\n    }\n\n    private buildOverlayView(): OverlayView {\n        let ovlView: OverlayView = {};\n        const network = this.network();\n\n        if (this.online()) {\n            ovlView = { mode: 'online' };\n        } else if (network && !this.showBigNetworkBackground() && !this.automaticBigSymbolNetwork()) {\n            // unit tests in platform repo gives random network values which are unchecked by the compiler\n            const { round } = networkDescription[network] ?? {};\n            ovlView = { mode: 'network', network, round };\n        }\n\n        return ovlView;\n    }\n\n    private buildHostStyle() {\n        const bgView = this.backgroundView();\n        const ovlMode = this.overlayView().mode;\n        const size = this.size();\n\n        return {\n            '--ap-avatar-size': `${size}px`,\n            '--ap-avatar-border-radius': this.rounded() ? '100%' : 'var(--sys-border-radius-sm)',\n            '--ap-avatar-initials-size': bgView.mode == 'initials' ? `${initialSizeByAvatarSize[size]}px` : '',\n            '--ap-avatar-symbol-size': bgView.mode == 'symbol' ? `${bgView.big ? size : symbolSizeByAvatarSize[size]}px` : '',\n            '--ap-avatar-network-size': ovlMode == 'network' ? `${networkSizeByAvatarSize[size]}px` : '',\n            '--ap-avatar-online-icon-size': ovlMode == 'online' ? `${onlineIconSizeByAvatarSize[size]}px` : '',\n        };\n    }\n}\n","<!-- background -->\n@if (backgroundView(); as bgView) {\n    @switch (bgView.mode) {\n        @case ('image') {\n            <img\n                class=\"bg-image\"\n                [ngSrc]=\"bgView.image.src\"\n                [width]=\"bgView.image.size\"\n                [height]=\"bgView.image.size\"\n                [alt]=\"bgView.image.alt\"\n                (error)=\"onImageError()\" />\n        }\n        @case ('initials') {\n            <div class=\"bg-initials\">\n                {{ bgView.text }}\n            </div>\n        }\n        @case ('symbol') {\n            <div\n                class=\"bg-symbol\"\n                [ngClass]=\"['sym-' + bgView.symbolId, bgView.big ? 'big' : '']\">\n                <ap-symbol [symbolId]=\"bgView.symbolId\" />\n            </div>\n        }\n    }\n}\n\n<!-- overlay -->\n@if (overlayView(); as ovlView) {\n    @switch (ovlView.mode) {\n        @case ('network') {\n            <div\n                class=\"ovl-network\"\n                [class.round]=\"ovlView.round\"\n                [ngClass]=\"ovlView.network\">\n                <ap-symbol [symbolId]=\"ovlView.network | networkSymbol\" />\n            </div>\n        }\n        @case ('online') {\n            <div class=\"ovl-online\"></div>\n        }\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"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 {\n    agorapulseSymbol,\n    apShowTheaterMaskHappy,\n    apSingleNeutral,\n    networkDescription,\n    NetworkName,\n    NetworkSymbolPipe,\n    SymbolComponent,\n    SymbolRegistry,\n    toNetworkSymbol,\n} from '@agorapulse/ui-symbol';\nimport { NgClass, NgOptimizedImage, NgStyle } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, input, signal, untracked } from '@angular/core';\n\nexport type AvatarNetwork = NetworkName;\nexport type AvatarSize = 56 | 48 | 40 | 36 | 32 | 24 | 16;\n\nconst onlineIconSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 16,\n    48: 12,\n    40: 12,\n    36: 8,\n    32: 8,\n    24: 6,\n    16: 6,\n};\n\nconst symbolSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 28,\n    48: 24,\n    40: 20,\n    36: 18,\n    32: 16,\n    24: 12,\n    16: 8,\n};\n\nconst networkSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 16,\n    48: 16,\n    40: 16,\n    36: 16,\n    32: 12,\n    24: 12,\n    16: 8,\n};\n\nconst initialSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 28,\n    48: 24,\n    40: 20,\n    36: 16,\n    32: 16,\n    24: 12,\n    16: 8,\n};\n\nconst automaticBigSymbolNetwork: AvatarNetwork[] = ['youtube'];\n\ntype BackgroundView =\n    | { mode: 'image'; image: { src: string; size: number; alt?: string } }\n    | { mode: 'initials'; text: string }\n    | { mode: 'symbol'; symbolId: agorapulseSymbol; big?: boolean }\n    | { mode?: never };\n\ntype OverlayView = { mode: 'online' } | { mode: 'network'; network: NetworkName; round: boolean } | { mode?: never };\n\n@Component({\n    selector: 'ap-avatar',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    templateUrl: './avatar.component.html',\n    styleUrls: ['./avatar.component.scss'],\n    standalone: true,\n    imports: [NgOptimizedImage, SymbolComponent, NgClass, NetworkSymbolPipe],\n    hostDirectives: [NgStyle],\n    host: {\n        '[class.background-default]': '!showBigNetworkBackground()',\n        role: 'presentation',\n    },\n})\nexport class AvatarComponent {\n    profilePicture = input<string>();\n    alt = input('');\n    network = input(undefined, {\n        transform: (v?: AvatarNetwork | string) => (v !== undefined ? (v as AvatarNetwork) : v),\n    });\n    size = input<AvatarSize | `${AvatarSize}`>(40);\n    username = input<string>();\n    showInitials = input<boolean | string>();\n    bigNetwork = input(false);\n    anonymous = input(false);\n    online = input(false);\n    hideBigNetwork = input(false, { alias: 'youtubeAvatarMode' }); // TODO: rename youtubeAvatarMode to hideBigNetwork in platform\n    rounded = input(true, { transform: booleanAttribute });\n\n    private imageError = signal(false);\n\n    backgroundView = computed<BackgroundView>(() => this.buildBackgroundView());\n    overlayView = computed<OverlayView>(() => this.buildOverlayView());\n    private useBigNetwork = computed(() => {\n        return (this.automaticBigSymbolNetwork() || this.bigNetwork()) && this.network();\n    });\n    private automaticBigSymbolNetwork = computed(() => {\n        return automaticBigSymbolNetwork.includes(this.network() as AvatarNetwork);\n    });\n    protected showBigNetworkBackground = computed(() => {\n        return !this.anonymous() && this.useBigNetwork() && (!this.validProfilePicture() || !this.hideBigNetwork());\n    });\n    private validProfilePicture = computed(() => {\n        return !this.imageError() ? this.profilePicture() : undefined;\n    });\n\n    constructor(\n        symbolRegistry: SymbolRegistry,\n        private ngStyle: NgStyle\n    ) {\n        const networkSymbols = Object.values(networkDescription) //\n            .flatMap(({ symbol }) => (typeof symbol !== 'string' ? [symbol] : []));\n\n        symbolRegistry.registerSymbols([...networkSymbols, apSingleNeutral, apShowTheaterMaskHappy]);\n\n        effect(() => {\n            this.ngStyle.ngStyle = this.buildHostStyle();\n            this.ngStyle.ngDoCheck();\n        });\n        effect(() => {\n            this.profilePicture(); // on change\n            untracked(() => this.imageError.set(false));\n        });\n    }\n\n    onImageError(): void {\n        this.imageError.set(true);\n    }\n\n    private buildBackgroundView(): BackgroundView {\n        let bgView: BackgroundView;\n\n        if (this.showBigNetworkBackground()) {\n            bgView = { mode: 'symbol', symbolId: toNetworkSymbol(this.network()!), big: true };\n        } else if (this.anonymous()) {\n            bgView = { mode: 'symbol', symbolId: apShowTheaterMaskHappy.name };\n        } else {\n            const profilePicture = this.validProfilePicture();\n\n            if (profilePicture) {\n                bgView = {\n                    mode: 'image',\n                    image: {\n                        src: profilePicture,\n                        size: +this.size(),\n                        alt: this.alt(),\n                    },\n                };\n            } else {\n                const initials = this.showInitials();\n\n                if (initials !== false && initials !== undefined) {\n                    const useDefault = initials === true || initials === '';\n                    const candidateName = (useDefault ? this.username()?.charAt(0) ?? '' : initials.slice(0, 2)).toUpperCase();\n                    bgView = { mode: 'initials', text: candidateName };\n                } else {\n                    bgView = { mode: 'symbol', symbolId: apSingleNeutral.name };\n                }\n            }\n        }\n\n        return bgView;\n    }\n\n    private buildOverlayView(): OverlayView {\n        let ovlView: OverlayView = {};\n        const network = this.network();\n\n        if (this.online()) {\n            ovlView = { mode: 'online' };\n        } else if (network && !this.showBigNetworkBackground() && !this.automaticBigSymbolNetwork()) {\n            // unit tests in platform repo gives random network values which are unchecked by the compiler\n            const { round } = networkDescription[network] ?? {};\n            ovlView = { mode: 'network', network, round };\n        }\n\n        return ovlView;\n    }\n\n    private buildHostStyle() {\n        const bgView = this.backgroundView();\n        const ovlMode = this.overlayView().mode;\n        const size = this.size();\n\n        return {\n            '--ap-avatar-size': `${size}px`,\n            '--ap-avatar-border-radius': this.rounded() ? '100%' : 'var(--sys-border-radius-sm)',\n            '--ap-avatar-initials-size': bgView.mode == 'initials' ? `${initialSizeByAvatarSize[size]}px` : '',\n            '--ap-avatar-symbol-size': bgView.mode == 'symbol' ? `${bgView.big ? size : symbolSizeByAvatarSize[size]}px` : '',\n            '--ap-avatar-network-size': ovlMode == 'network' ? `${networkSizeByAvatarSize[size]}px` : '',\n            '--ap-avatar-online-icon-size': ovlMode == 'online' ? `${onlineIconSizeByAvatarSize[size]}px` : '',\n        };\n    }\n}\n","<!-- background -->\n@if (backgroundView(); as bgView) {\n    @switch (bgView.mode) {\n        @case ('image') {\n            <img\n                class=\"bg-image\"\n                [ngSrc]=\"bgView.image.src\"\n                [width]=\"bgView.image.size\"\n                [height]=\"bgView.image.size\"\n                [alt]=\"bgView.image.alt\"\n                (error)=\"onImageError()\" />\n        }\n        @case ('initials') {\n            <div class=\"bg-initials\">\n                {{ bgView.text }}\n            </div>\n        }\n        @case ('symbol') {\n            <div\n                class=\"bg-symbol\"\n                [ngClass]=\"['sym-' + bgView.symbolId, bgView.big ? 'big' : '']\">\n                <ap-symbol [symbolId]=\"bgView.symbolId\" />\n            </div>\n        }\n    }\n}\n\n<!-- overlay -->\n@if (overlayView(); as ovlView) {\n    @switch (ovlView.mode) {\n        @case ('network') {\n            <div\n                class=\"ovl-network\"\n                [class.round]=\"ovlView.round\"\n                [ngClass]=\"ovlView.network\">\n                <ap-symbol [symbolId]=\"ovlView.network | networkSymbol\" />\n            </div>\n        }\n        @case ('online') {\n            <div class=\"ovl-online\"></div>\n        }\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/agorapulse-ui-components-badge.mjs

@@ -4,11 +4,11 @@ import { HostBinding, Input, ViewEncapsulation, ChangeDetectionStrategy, Compone
 class BadgeComponent {
     color = 'blue';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BadgeComponent, isStandalone: true, selector: "ap-badge", inputs: { color: "color" }, host: { properties: { "class": "this.color" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["ap-badge{display:flex;padding:0 var(--comp-badge-padding-right) 0 var(--comp-badge-padding-left);font-weight:var(--comp-badge-text-style-font-weight);font-family:var(--comp-badge-text-style-font-family);line-height:var(--comp-badge-text-style-line-height);font-size:var(--comp-badge-text-style-size);height:var(--comp-badge-height);max-height:var(--comp-badge-height);border-radius:2px}ap-badge.blue{background-color:var(--comp-badge-blue-background-color);color:var(--comp-badge-blue-color)}ap-badge.orange{text-transform:uppercase;background-color:var(--comp-badge-orange-background-color);color:var(--comp-badge-orange-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BadgeComponent, isStandalone: true, selector: "ap-badge", inputs: { color: "color" }, host: { properties: { "class": "this.color" } }, ngImport: i0, template: "<ng-content>Badge text</ng-content>\n", styles: ["ap-badge{display:flex;padding:0 var(--comp-badge-padding-right) 0 var(--comp-badge-padding-left);font-weight:var(--comp-badge-text-style-font-weight);font-family:var(--comp-badge-text-style-font-family);line-height:var(--comp-badge-text-style-line-height);font-size:var(--comp-badge-text-style-size);height:var(--comp-badge-height);max-height:var(--comp-badge-height);border-radius:2px}ap-badge.blue{background-color:var(--comp-badge-blue-background-color);color:var(--comp-badge-blue-color)}ap-badge.orange{text-transform:uppercase;background-color:var(--comp-badge-orange-background-color);color:var(--comp-badge-orange-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-badge', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: ["ap-badge{display:flex;padding:0 var(--comp-badge-padding-right) 0 var(--comp-badge-padding-left);font-weight:var(--comp-badge-text-style-font-weight);font-family:var(--comp-badge-text-style-font-family);line-height:var(--comp-badge-text-style-line-height);font-size:var(--comp-badge-text-style-size);height:var(--comp-badge-height);max-height:var(--comp-badge-height);border-radius:2px}ap-badge.blue{background-color:var(--comp-badge-blue-background-color);color:var(--comp-badge-blue-color)}ap-badge.orange{text-transform:uppercase;background-color:var(--comp-badge-orange-background-color);color:var(--comp-badge-orange-color)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-badge', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<ng-content>Badge text</ng-content>\n", styles: ["ap-badge{display:flex;padding:0 var(--comp-badge-padding-right) 0 var(--comp-badge-padding-left);font-weight:var(--comp-badge-text-style-font-weight);font-family:var(--comp-badge-text-style-font-family);line-height:var(--comp-badge-text-style-line-height);font-size:var(--comp-badge-text-style-size);height:var(--comp-badge-height);max-height:var(--comp-badge-height);border-radius:2px}ap-badge.blue{background-color:var(--comp-badge-blue-background-color);color:var(--comp-badge-blue-color)}ap-badge.orange{text-transform:uppercase;background-color:var(--comp-badge-orange-background-color);color:var(--comp-badge-orange-color)}\n"] }]
         }], propDecorators: { color: [{
                 type: HostBinding,
                 args: ['class']

package/fesm2022/agorapulse-ui-components-badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-badge.mjs","sources":["../../../libs/ui-components/badge/src/badge.component.ts","../../../libs/ui-components/badge/src/badge.component.html","../../../libs/ui-components/badge/src/agorapulse-ui-components-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';\n\nexport type BadgeColor = 'blue' | 'orange';\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-badge',\n    standalone: true,\n    templateUrl: './badge.component.html',\n    imports: [],\n    styleUrls: ['./badge.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n})\nexport class BadgeComponent {\n    @HostBinding('class')\n    @Input()\n    color: BadgeColor = 'blue';\n}\n","<ng-content></ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAaa,cAAc,CAAA;IAGvB,KAAK,GAAe,MAAM;uGAHjB,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,iJCb3B,6BACA,EAAA,MAAA,EAAA,CAAA,ynBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDYa,cAAc,EAAA,UAAA,EAAA,CAAA;kBAT1B,SAAS;sCACW,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,UAAU,EAAA,UAAA,EACR,IAAI,EAAA,OAAA,EAEP,EAAE,EAAA,aAAA,EAEI,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,ynBAAA,CAAA,EAAA;8BAKrC,KAAK,EAAA,CAAA;sBAFJ,WAAW;uBAAC,OAAO;;sBACnB;;;AEfL;;AAEG;;;;"}
+{"version":3,"file":"agorapulse-ui-components-badge.mjs","sources":["../../../libs/ui-components/badge/src/badge.component.ts","../../../libs/ui-components/badge/src/badge.component.html","../../../libs/ui-components/badge/src/agorapulse-ui-components-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';\n\nexport type BadgeColor = 'blue' | 'orange';\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-badge',\n    standalone: true,\n    templateUrl: './badge.component.html',\n    imports: [],\n    styleUrls: ['./badge.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n})\nexport class BadgeComponent {\n    @HostBinding('class')\n    @Input()\n    color: BadgeColor = 'blue';\n}\n","<ng-content>Badge text</ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAaa,cAAc,CAAA;IAGvB,KAAK,GAAe,MAAM;uGAHjB,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,iJCb3B,uCACA,EAAA,MAAA,EAAA,CAAA,ynBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDYa,cAAc,EAAA,UAAA,EAAA,CAAA;kBAT1B,SAAS;sCACW,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,UAAU,EAAA,UAAA,EACR,IAAI,EAAA,OAAA,EAEP,EAAE,EAAA,aAAA,EAEI,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,uCAAA,EAAA,MAAA,EAAA,CAAA,ynBAAA,CAAA,EAAA;8BAKrC,KAAK,EAAA,CAAA;sBAFJ,WAAW;uBAAC,OAAO;;sBACnB;;;AEfL;;AAEG;;;;"}

package/fesm2022/agorapulse-ui-components-button.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, EventEmitter, booleanAttribute, HostListener, Input, Output, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, EventEmitter, booleanAttribute, HostListener, Output, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@agorapulse/ui-components/directives';
 import { BaseButtonDirective } from '@agorapulse/ui-components/directives';
 import { SymbolComponent } from '@agorapulse/ui-symbol';
@@ -21,6 +21,7 @@ class ButtonComponent {
     locked = false;
     menuTrigger = null;
     symbolPosition = 'right';
+    symbolId = input();
     menuOpened = new EventEmitter();
     menuClosed = new EventEmitter();
     // eslint-disable-next-line @angular-eslint/no-output-native
@@ -29,17 +30,12 @@ class ButtonComponent {
     focus = new EventEmitter();
     // eslint-disable-next-line @angular-eslint/no-output-native
     blur = new EventEmitter();
-    // Specific ionic behaviour with modal trigger on html side. We cannot use stopImmediatePropagation otherwise the modal doesn't open.
-    // Maybe we can remove this hack once we rename click event by onClick
-    ionicModalEnabled = false;
     focused = false;
     onClickHandle($event) {
         if (this.disabled || this.loading) {
             return;
         }
-        if (!this.ionicModalEnabled) {
-            $event.stopImmediatePropagation();
-        }
+        $event.stopImmediatePropagation();
         this.click.emit($event);
         this.buttonElement.nativeElement.blur();
         this.blur.emit($event);
@@ -59,13 +55,13 @@ class ButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: ButtonComponent, isStandalone: true, selector: "ap-button", inputs: { ariaLabel: "ariaLabel", disabled: ["disabled", "disabled", booleanAttribute], name: "name", form: "form", config: "config", loading: "loading", locked: "locked", menuTrigger: "menuTrigger", symbolPosition: "symbolPosition", ionicModalEnabled: "ionicModalEnabled" }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed", click: "click", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "disabled || null" } }, providers: [], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true }], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: "<button\n    #button\n    #trigger=\"matMenuTrigger\"\n    role=\"button\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    [class.primary]=\"config.style === 'primary' && !locked\"\n    [class.secondary]=\"config.style === 'secondary' && !locked\"\n    [class.ghost]=\"config.style === 'ghost' && !locked\"\n    [class.stroked]=\"(config.style === 'stroked' || config.style === 'stroked-transparent') && !locked\"\n    [class.transparent]=\"config.style === 'stroked-transparent' && !locked\"\n    [class.orange]=\"config.color === 'orange' && !locked\"\n    [class.blue]=\"config.color === 'blue' && !locked\"\n    [class.red]=\"config.color === 'red' && !locked\"\n    [class.grey]=\"config.color === 'grey' && !locked\"\n    [class.loading]=\"loading && !locked\"\n    [class.locked]=\"locked\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [disabled]=\"disabled && !locked\"\n    [name]=\"name\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.type]=\"baseButtonDirective.hostType\"\n    [attr.form]=\"form\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    <ng-content></ng-content>\n    <ng-content select=\"ap-symbol\"></ng-content>\n    @if (loading && !locked) {\n        <div class=\"loading-bar\"></div>\n    }\n</button>\n@if (locked) {\n    <div class=\"locked-symbol\">\n        <ap-symbol\n            symbolId=\"premium-star\"\n            size=\"sm\" />\n    </div>\n}\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-block;position:relative}ap-button[disabled]{pointer-events:none}ap-button button{border:none;border-radius:4px;padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:var(--comp-split-button-spacing);flex-direction:row;font-size:var(--comp-button-text-size);font-family:var(--comp-button-text-font-family);line-height:var(--comp-button-text-line-height);font-weight:var(--comp-button-text-weight);max-height:var(--comp-button-height);min-height:var(--comp-button-height);white-space:nowrap;text-overflow:ellipsis;width:100%}ap-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-button button.inverse{flex-direction:row-reverse}ap-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-button button:disabled{pointer-events:none}@media (hover: hover){ap-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.loading{pointer-events:none}ap-button button.primary{color:var(--ref-color-white)}ap-button button.primary ap-symbol{color:var(--ref-color-white)}ap-button button.primary.orange{background:var(--ref-color-orange-100)}ap-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.secondary.orange{background:var(--ref-color-orange-10);color:var(--ref-color-orange-100)}ap-button button.secondary.orange ap-symbol{color:var(--ref-color-orange-100)}ap-button button.secondary.orange:hover{background-color:var(--ref-color-orange-20)}ap-button button.secondary.orange:active:not(:disabled){background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange:focus:not(:disabled):not(:active){background-color:var(--ref-color-orange-10)}ap-button button.secondary.orange:disabled{background-color:var(--ref-color-orange-10);color:var(--ref-color-orange-20)}ap-button button.secondary.orange:disabled ap-symbol{color:var(--ref-color-orange-20)}ap-button button.secondary.orange.loading{background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.secondary.blue{background:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue:hover{background-color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-10)}ap-button button.secondary.blue:disabled{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue.loading{background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.stroked{background:var(--ref-color-white);border-width:1px;border-style:solid;color:var(--ref-color-grey-80)}ap-button button.stroked.grey{border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.stroked.grey:hover{border-color:var(--ref-color-grey-40)}ap-button button.stroked.grey:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-button button.stroked.grey:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.stroked.grey.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-button button.stroked.grey.loading ap-symbol{color:var(--ref-color-grey-40)}ap-button button.stroked.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.stroked.blue{border-color:var(--ref-color-electric-blue-60);color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:hover{border-color:var(--ref-color-electric-blue-80)}ap-button button.stroked.blue:active:not(:disabled){border-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:focus:not(:disabled):not(:active){border-color:var(--ref-color-electric-blue-60)}ap-button button.stroked.blue:disabled{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue.loading{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.transparent{background:transparent}ap-button button.ghost{background:transparent}ap-button button.ghost.grey{color:var(--ref-color-grey-80)}ap-button button.ghost.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.ghost.grey:hover{background-color:var(--ref-color-grey-05)}ap-button button.ghost.grey:active:not(:disabled){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:focus:not(:disabled):not(:active){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:disabled{color:var(--ref-color-grey-20)}ap-button button.ghost.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.ghost.grey.loading:not(.locked){color:var(--ref-color-grey-40)}ap-button button.ghost.grey.loading:not(.locked) ap-symbol{color:var(--ref-color-grey-40)}ap-button button.ghost.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.ghost.blue{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue:hover{background-color:var(--ref-color-electric-blue-10)}ap-button button.ghost.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue.loading{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.ghost.red{color:var(--ref-color-red-100)}ap-button button.ghost.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.ghost.red:hover{background-color:var(--ref-color-red-10)}ap-button button.ghost.red:active:not(:disabled){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:focus:not(:disabled):not(:active){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled{color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.ghost.red.loading{color:var(--ref-color-red-40)}ap-button button.ghost.red.loading ap-symbol{color:var(--ref-color-red-40)}ap-button button.ghost.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.locked{background-color:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-button button.locked:hover{border-color:var(--ref-color-purple-40);background-color:var(--ref-color-purple-20)}ap-button button.locked:focus:not(:disabled):not(:active){border-color:var(--ref-color-purple-20);background-color:var(--ref-color-purple-20)}ap-button button.locked:active{border-color:var(--ref-color-purple-60);background-color:var(--ref-color-purple-40)}ap-button .loading-bar{position:absolute;bottom:0;left:var(--comp-button-padding-vertical);width:var(--loading-bar-width);height:5px;border-radius:8px;animation:slide 1.5s ease-in-out infinite}@keyframes slide{0%{left:calc(var(--loading-bar-width) * -1)}to{left:100%}}ap-button .locked-symbol{position:absolute;top:-6px;right:-6px;border-radius:100%;background:var(--ref-color-white)}ap-button .locked-symbol ap-symbol{color:var(--ref-color-purple-100)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: ButtonComponent, isStandalone: true, selector: "ap-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: false, isRequired: false, transformFunction: null }, menuTrigger: { classPropertyName: "menuTrigger", publicName: "menuTrigger", isSignal: false, isRequired: false, transformFunction: null }, symbolPosition: { classPropertyName: "symbolPosition", publicName: "symbolPosition", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed", click: "click", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "disabled || null" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true }], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: "<button\n    #button\n    #trigger=\"matMenuTrigger\"\n    role=\"button\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    [class.primary]=\"config.style === 'primary' && !locked\"\n    [class.secondary]=\"config.style === 'secondary' && !locked\"\n    [class.ghost]=\"config.style === 'ghost' && !locked\"\n    [class.stroked]=\"(config.style === 'stroked' || config.style === 'stroked-transparent') && !locked\"\n    [class.transparent]=\"config.style === 'stroked-transparent' && !locked\"\n    [class.orange]=\"config.color === 'orange' && !locked\"\n    [class.blue]=\"config.color === 'blue' && !locked\"\n    [class.red]=\"config.color === 'red' && !locked\"\n    [class.grey]=\"config.color === 'grey' && !locked\"\n    [class.loading]=\"loading && !locked\"\n    [class.locked]=\"locked\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [disabled]=\"disabled && !locked\"\n    [name]=\"name\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.type]=\"baseButtonDirective.hostType\"\n    [attr.form]=\"form\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    <ng-content>Button text</ng-content>\n    @if (symbolId()) {\n        <ap-symbol [symbolId]=\"symbolId()\" />\n    } @else {\n        <ng-content select=\"ap-symbol\"></ng-content>\n    }\n    @if (loading && !locked) {\n        <div class=\"loading-bar\"></div>\n    }\n</button>\n@if (locked) {\n    <div class=\"locked-symbol\">\n        <ap-symbol\n            symbolId=\"premium-star\"\n            size=\"sm\" />\n    </div>\n}\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-block;position:relative}ap-button[disabled]{pointer-events:none}ap-button button{border:none;border-radius:4px;padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:var(--comp-split-button-spacing);flex-direction:row;font-size:var(--comp-button-text-size);font-family:var(--comp-button-text-font-family);line-height:var(--comp-button-text-line-height);font-weight:var(--comp-button-text-weight);max-height:var(--comp-button-height);min-height:var(--comp-button-height);white-space:nowrap;text-overflow:ellipsis;width:100%}ap-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-button button.inverse{flex-direction:row-reverse}ap-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-button button:disabled{pointer-events:none}@media (hover: hover){ap-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.loading{pointer-events:none}ap-button button.primary{color:var(--ref-color-white)}ap-button button.primary ap-symbol{color:var(--ref-color-white)}ap-button button.primary.orange{background:var(--ref-color-orange-100)}ap-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.secondary.orange{background:var(--ref-color-orange-10);color:var(--ref-color-orange-100)}ap-button button.secondary.orange ap-symbol{color:var(--ref-color-orange-100)}ap-button button.secondary.orange:hover{background-color:var(--ref-color-orange-20)}ap-button button.secondary.orange:active:not(:disabled){background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange:focus:not(:disabled):not(:active){background-color:var(--ref-color-orange-10)}ap-button button.secondary.orange:disabled{background-color:var(--ref-color-orange-10);color:var(--ref-color-orange-20)}ap-button button.secondary.orange:disabled ap-symbol{color:var(--ref-color-orange-20)}ap-button button.secondary.orange.loading{background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.secondary.blue{background:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue:hover{background-color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-10)}ap-button button.secondary.blue:disabled{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue.loading{background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.stroked{background:var(--ref-color-white);border-width:1px;border-style:solid;color:var(--ref-color-grey-80)}ap-button button.stroked.grey{border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.stroked.grey:hover{border-color:var(--ref-color-grey-40)}ap-button button.stroked.grey:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-button button.stroked.grey:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.stroked.grey.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-button button.stroked.grey.loading ap-symbol{color:var(--ref-color-grey-40)}ap-button button.stroked.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.stroked.blue{border-color:var(--ref-color-electric-blue-60);color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:hover{border-color:var(--ref-color-electric-blue-80)}ap-button button.stroked.blue:active:not(:disabled){border-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:focus:not(:disabled):not(:active){border-color:var(--ref-color-electric-blue-60)}ap-button button.stroked.blue:disabled{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue.loading{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.transparent{background:transparent}ap-button button.ghost{background:transparent}ap-button button.ghost.grey{color:var(--ref-color-grey-80)}ap-button button.ghost.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.ghost.grey:hover{background-color:var(--ref-color-grey-05)}ap-button button.ghost.grey:active:not(:disabled){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:focus:not(:disabled):not(:active){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:disabled{color:var(--ref-color-grey-20)}ap-button button.ghost.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.ghost.grey.loading:not(.locked){color:var(--ref-color-grey-40)}ap-button button.ghost.grey.loading:not(.locked) ap-symbol{color:var(--ref-color-grey-40)}ap-button button.ghost.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.ghost.blue{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue:hover{background-color:var(--ref-color-electric-blue-10)}ap-button button.ghost.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue.loading{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.ghost.red{color:var(--ref-color-red-100)}ap-button button.ghost.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.ghost.red:hover{background-color:var(--ref-color-red-10)}ap-button button.ghost.red:active:not(:disabled){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:focus:not(:disabled):not(:active){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled{color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.ghost.red.loading{color:var(--ref-color-red-40)}ap-button button.ghost.red.loading ap-symbol{color:var(--ref-color-red-40)}ap-button button.ghost.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.locked{background-color:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-button button.locked:hover{border-color:var(--ref-color-purple-40);background-color:var(--ref-color-purple-20)}ap-button button.locked:focus:not(:disabled):not(:active){border-color:var(--ref-color-purple-20);background-color:var(--ref-color-purple-20)}ap-button button.locked:active{border-color:var(--ref-color-purple-60);background-color:var(--ref-color-purple-40)}ap-button .loading-bar{position:absolute;bottom:0;left:var(--comp-button-padding-vertical);width:var(--loading-bar-width);height:5px;border-radius:8px;animation:slide 1.5s ease-in-out infinite}@keyframes slide{0%{left:calc(var(--loading-bar-width) * -1)}to{left:100%}}ap-button .locked-symbol{position:absolute;top:-6px;right:-6px;border-radius:100%;background:var(--ref-color-white)}ap-button .locked-symbol ap-symbol{color:var(--ref-color-purple-100)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-button', standalone: true, imports: [SymbolComponent, MatMenuModule], providers: [], encapsulation: ViewEncapsulation.None, hostDirectives: [BaseButtonDirective], host: {
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-button', standalone: true, imports: [SymbolComponent, MatMenuModule], encapsulation: ViewEncapsulation.None, hostDirectives: [BaseButtonDirective], host: {
                         '[attr.disabled]': 'disabled || null',
-                    }, template: "<button\n    #button\n    #trigger=\"matMenuTrigger\"\n    role=\"button\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    [class.primary]=\"config.style === 'primary' && !locked\"\n    [class.secondary]=\"config.style === 'secondary' && !locked\"\n    [class.ghost]=\"config.style === 'ghost' && !locked\"\n    [class.stroked]=\"(config.style === 'stroked' || config.style === 'stroked-transparent') && !locked\"\n    [class.transparent]=\"config.style === 'stroked-transparent' && !locked\"\n    [class.orange]=\"config.color === 'orange' && !locked\"\n    [class.blue]=\"config.color === 'blue' && !locked\"\n    [class.red]=\"config.color === 'red' && !locked\"\n    [class.grey]=\"config.color === 'grey' && !locked\"\n    [class.loading]=\"loading && !locked\"\n    [class.locked]=\"locked\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [disabled]=\"disabled && !locked\"\n    [name]=\"name\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.type]=\"baseButtonDirective.hostType\"\n    [attr.form]=\"form\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    <ng-content></ng-content>\n    <ng-content select=\"ap-symbol\"></ng-content>\n    @if (loading && !locked) {\n        <div class=\"loading-bar\"></div>\n    }\n</button>\n@if (locked) {\n    <div class=\"locked-symbol\">\n        <ap-symbol\n            symbolId=\"premium-star\"\n            size=\"sm\" />\n    </div>\n}\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-block;position:relative}ap-button[disabled]{pointer-events:none}ap-button button{border:none;border-radius:4px;padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:var(--comp-split-button-spacing);flex-direction:row;font-size:var(--comp-button-text-size);font-family:var(--comp-button-text-font-family);line-height:var(--comp-button-text-line-height);font-weight:var(--comp-button-text-weight);max-height:var(--comp-button-height);min-height:var(--comp-button-height);white-space:nowrap;text-overflow:ellipsis;width:100%}ap-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-button button.inverse{flex-direction:row-reverse}ap-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-button button:disabled{pointer-events:none}@media (hover: hover){ap-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.loading{pointer-events:none}ap-button button.primary{color:var(--ref-color-white)}ap-button button.primary ap-symbol{color:var(--ref-color-white)}ap-button button.primary.orange{background:var(--ref-color-orange-100)}ap-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.secondary.orange{background:var(--ref-color-orange-10);color:var(--ref-color-orange-100)}ap-button button.secondary.orange ap-symbol{color:var(--ref-color-orange-100)}ap-button button.secondary.orange:hover{background-color:var(--ref-color-orange-20)}ap-button button.secondary.orange:active:not(:disabled){background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange:focus:not(:disabled):not(:active){background-color:var(--ref-color-orange-10)}ap-button button.secondary.orange:disabled{background-color:var(--ref-color-orange-10);color:var(--ref-color-orange-20)}ap-button button.secondary.orange:disabled ap-symbol{color:var(--ref-color-orange-20)}ap-button button.secondary.orange.loading{background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.secondary.blue{background:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue:hover{background-color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-10)}ap-button button.secondary.blue:disabled{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue.loading{background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.stroked{background:var(--ref-color-white);border-width:1px;border-style:solid;color:var(--ref-color-grey-80)}ap-button button.stroked.grey{border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.stroked.grey:hover{border-color:var(--ref-color-grey-40)}ap-button button.stroked.grey:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-button button.stroked.grey:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.stroked.grey.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-button button.stroked.grey.loading ap-symbol{color:var(--ref-color-grey-40)}ap-button button.stroked.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.stroked.blue{border-color:var(--ref-color-electric-blue-60);color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:hover{border-color:var(--ref-color-electric-blue-80)}ap-button button.stroked.blue:active:not(:disabled){border-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:focus:not(:disabled):not(:active){border-color:var(--ref-color-electric-blue-60)}ap-button button.stroked.blue:disabled{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue.loading{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.transparent{background:transparent}ap-button button.ghost{background:transparent}ap-button button.ghost.grey{color:var(--ref-color-grey-80)}ap-button button.ghost.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.ghost.grey:hover{background-color:var(--ref-color-grey-05)}ap-button button.ghost.grey:active:not(:disabled){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:focus:not(:disabled):not(:active){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:disabled{color:var(--ref-color-grey-20)}ap-button button.ghost.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.ghost.grey.loading:not(.locked){color:var(--ref-color-grey-40)}ap-button button.ghost.grey.loading:not(.locked) ap-symbol{color:var(--ref-color-grey-40)}ap-button button.ghost.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.ghost.blue{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue:hover{background-color:var(--ref-color-electric-blue-10)}ap-button button.ghost.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue.loading{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.ghost.red{color:var(--ref-color-red-100)}ap-button button.ghost.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.ghost.red:hover{background-color:var(--ref-color-red-10)}ap-button button.ghost.red:active:not(:disabled){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:focus:not(:disabled):not(:active){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled{color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.ghost.red.loading{color:var(--ref-color-red-40)}ap-button button.ghost.red.loading ap-symbol{color:var(--ref-color-red-40)}ap-button button.ghost.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.locked{background-color:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-button button.locked:hover{border-color:var(--ref-color-purple-40);background-color:var(--ref-color-purple-20)}ap-button button.locked:focus:not(:disabled):not(:active){border-color:var(--ref-color-purple-20);background-color:var(--ref-color-purple-20)}ap-button button.locked:active{border-color:var(--ref-color-purple-60);background-color:var(--ref-color-purple-40)}ap-button .loading-bar{position:absolute;bottom:0;left:var(--comp-button-padding-vertical);width:var(--loading-bar-width);height:5px;border-radius:8px;animation:slide 1.5s ease-in-out infinite}@keyframes slide{0%{left:calc(var(--loading-bar-width) * -1)}to{left:100%}}ap-button .locked-symbol{position:absolute;top:-6px;right:-6px;border-radius:100%;background:var(--ref-color-white)}ap-button .locked-symbol ap-symbol{color:var(--ref-color-purple-100)}\n"] }]
+                    }, template: "<button\n    #button\n    #trigger=\"matMenuTrigger\"\n    role=\"button\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    [class.primary]=\"config.style === 'primary' && !locked\"\n    [class.secondary]=\"config.style === 'secondary' && !locked\"\n    [class.ghost]=\"config.style === 'ghost' && !locked\"\n    [class.stroked]=\"(config.style === 'stroked' || config.style === 'stroked-transparent') && !locked\"\n    [class.transparent]=\"config.style === 'stroked-transparent' && !locked\"\n    [class.orange]=\"config.color === 'orange' && !locked\"\n    [class.blue]=\"config.color === 'blue' && !locked\"\n    [class.red]=\"config.color === 'red' && !locked\"\n    [class.grey]=\"config.color === 'grey' && !locked\"\n    [class.loading]=\"loading && !locked\"\n    [class.locked]=\"locked\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [disabled]=\"disabled && !locked\"\n    [name]=\"name\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.type]=\"baseButtonDirective.hostType\"\n    [attr.form]=\"form\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    <ng-content>Button text</ng-content>\n    @if (symbolId()) {\n        <ap-symbol [symbolId]=\"symbolId()\" />\n    } @else {\n        <ng-content select=\"ap-symbol\"></ng-content>\n    }\n    @if (loading && !locked) {\n        <div class=\"loading-bar\"></div>\n    }\n</button>\n@if (locked) {\n    <div class=\"locked-symbol\">\n        <ap-symbol\n            symbolId=\"premium-star\"\n            size=\"sm\" />\n    </div>\n}\n", styles: ["ap-button{--loading-bar-width: 50px;display:inline-block;position:relative}ap-button[disabled]{pointer-events:none}ap-button button{border:none;border-radius:4px;padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:var(--comp-split-button-spacing);flex-direction:row;font-size:var(--comp-button-text-size);font-family:var(--comp-button-text-font-family);line-height:var(--comp-button-text-line-height);font-weight:var(--comp-button-text-weight);max-height:var(--comp-button-height);min-height:var(--comp-button-height);white-space:nowrap;text-overflow:ellipsis;width:100%}ap-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-button button.inverse{flex-direction:row-reverse}ap-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-button button:disabled{pointer-events:none}@media (hover: hover){ap-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-button button.loading{pointer-events:none}ap-button button.primary{color:var(--ref-color-white)}ap-button button.primary ap-symbol{color:var(--ref-color-white)}ap-button button.primary.orange{background:var(--ref-color-orange-100)}ap-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.secondary.orange{background:var(--ref-color-orange-10);color:var(--ref-color-orange-100)}ap-button button.secondary.orange ap-symbol{color:var(--ref-color-orange-100)}ap-button button.secondary.orange:hover{background-color:var(--ref-color-orange-20)}ap-button button.secondary.orange:active:not(:disabled){background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange:focus:not(:disabled):not(:active){background-color:var(--ref-color-orange-10)}ap-button button.secondary.orange:disabled{background-color:var(--ref-color-orange-10);color:var(--ref-color-orange-20)}ap-button button.secondary.orange:disabled ap-symbol{color:var(--ref-color-orange-20)}ap-button button.secondary.orange.loading{background-color:var(--ref-color-orange-40)}ap-button button.secondary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-button button.secondary.blue{background:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.secondary.blue:hover{background-color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-10)}ap-button button.secondary.blue:disabled{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.secondary.blue.loading{background-color:var(--ref-color-electric-blue-40)}ap-button button.secondary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.stroked{background:var(--ref-color-white);border-width:1px;border-style:solid;color:var(--ref-color-grey-80)}ap-button button.stroked.grey{border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.stroked.grey:hover{border-color:var(--ref-color-grey-40)}ap-button button.stroked.grey:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-button button.stroked.grey:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-button button.stroked.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.stroked.grey.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-button button.stroked.grey.loading ap-symbol{color:var(--ref-color-grey-40)}ap-button button.stroked.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.stroked.blue{border-color:var(--ref-color-electric-blue-60);color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:hover{border-color:var(--ref-color-electric-blue-80)}ap-button button.stroked.blue:active:not(:disabled){border-color:var(--ref-color-electric-blue-100)}ap-button button.stroked.blue:focus:not(:disabled):not(:active){border-color:var(--ref-color-electric-blue-60)}ap-button button.stroked.blue:disabled{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.stroked.blue.loading{border-color:var(--ref-color-electric-blue-20);color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.stroked.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.transparent{background:transparent}ap-button button.ghost{background:transparent}ap-button button.ghost.grey{color:var(--ref-color-grey-80)}ap-button button.ghost.grey ap-symbol{color:var(--ref-color-grey-80)}ap-button button.ghost.grey:hover{background-color:var(--ref-color-grey-05)}ap-button button.ghost.grey:active:not(:disabled){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:focus:not(:disabled):not(:active){background-color:var(--ref-color-grey-10)}ap-button button.ghost.grey:disabled{color:var(--ref-color-grey-20)}ap-button button.ghost.grey:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-button button.ghost.grey.loading:not(.locked){color:var(--ref-color-grey-40)}ap-button button.ghost.grey.loading:not(.locked) ap-symbol{color:var(--ref-color-grey-40)}ap-button button.ghost.grey .loading-bar{background-color:var(--ref-color-grey-80)}ap-button button.ghost.blue{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-button button.ghost.blue:hover{background-color:var(--ref-color-electric-blue-10)}ap-button button.ghost.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:focus:not(:disabled):not(:active){background-color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-button button.ghost.blue.loading{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue.loading ap-symbol{color:var(--ref-color-electric-blue-40)}ap-button button.ghost.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-button button.ghost.red{color:var(--ref-color-red-100)}ap-button button.ghost.red ap-symbol{color:var(--ref-color-red-100)}ap-button button.ghost.red:hover{background-color:var(--ref-color-red-10)}ap-button button.ghost.red:active:not(:disabled){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:focus:not(:disabled):not(:active){background-color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled{color:var(--ref-color-red-20)}ap-button button.ghost.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-button button.ghost.red.loading{color:var(--ref-color-red-40)}ap-button button.ghost.red.loading ap-symbol{color:var(--ref-color-red-40)}ap-button button.ghost.red .loading-bar{background-color:var(--ref-color-red-100)}ap-button button.locked{background-color:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-button button.locked:hover{border-color:var(--ref-color-purple-40);background-color:var(--ref-color-purple-20)}ap-button button.locked:focus:not(:disabled):not(:active){border-color:var(--ref-color-purple-20);background-color:var(--ref-color-purple-20)}ap-button button.locked:active{border-color:var(--ref-color-purple-60);background-color:var(--ref-color-purple-40)}ap-button .loading-bar{position:absolute;bottom:0;left:var(--comp-button-padding-vertical);width:var(--loading-bar-width);height:5px;border-radius:8px;animation:slide 1.5s ease-in-out infinite}@keyframes slide{0%{left:calc(var(--loading-bar-width) * -1)}to{left:100%}}ap-button .locked-symbol{position:absolute;top:-6px;right:-6px;border-radius:100%;background:var(--ref-color-white)}ap-button .locked-symbol ap-symbol{color:var(--ref-color-purple-100)}\n"] }]
         }], propDecorators: { buttonElement: [{
                 type: ViewChild,
                 args: ['button']
@@ -103,8 +99,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Output
             }], blur: [{
                 type: Output
-            }], ionicModalEnabled: [{
-                type: Input
             }], onSpaceKeyUp: [{
                 type: HostListener,
                 args: ['window:keyup.space', ['$event']]

package/fesm2022/agorapulse-ui-components-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-button.mjs","sources":["../../../libs/ui-components/button/src/button.component.ts","../../../libs/ui-components/button/src/button.component.html","../../../libs/ui-components/button/src/agorapulse-ui-components-button.ts"],"sourcesContent":["import {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    inject,\n    Input,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BaseButtonDirective } from '@agorapulse/ui-components/directives';\nimport { SymbolComponent } from '@agorapulse/ui-symbol';\nimport { MatMenuModule, MatMenuPanel } from '@angular/material/menu';\n\ntype ButtonConfig =\n    | { style: 'primary'; color: 'orange' | 'blue' }\n    | { style: 'secondary'; color: 'orange' | 'blue' }\n    | { style: 'stroked'; color: 'grey' | 'blue' }\n    | { style: 'stroked-transparent'; color: 'grey' | 'blue' }\n    | { style: 'ghost'; color: 'grey' | 'blue' | 'red' };\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-button',\n    styleUrls: ['./button.component.scss'],\n    standalone: true,\n    imports: [SymbolComponent, MatMenuModule],\n    providers: [],\n    templateUrl: './button.component.html',\n    encapsulation: ViewEncapsulation.None,\n    hostDirectives: [BaseButtonDirective],\n    // eslint-disable-next-line @angular-eslint/no-host-metadata-property\n    host: {\n        '[attr.disabled]': 'disabled || null',\n    },\n})\nexport class ButtonComponent {\n    readonly baseButtonDirective: BaseButtonDirective = inject(BaseButtonDirective, { self: true });\n\n    @ViewChild('button') buttonElement!: ElementRef<HTMLButtonElement>;\n\n    @Input() ariaLabel: string = '';\n    @Input({\n        transform: booleanAttribute,\n    })\n    disabled: boolean | undefined = false;\n    @Input({\n        required: true,\n    })\n    name: string = '';\n    @Input() form: string | undefined = undefined;\n    @Input() config: ButtonConfig = {\n        style: 'primary',\n        color: 'orange',\n    };\n    @Input() loading: boolean | undefined = false;\n    @Input() locked: boolean = false;\n    @Input() menuTrigger: MatMenuPanel | null = null;\n    @Input() symbolPosition: 'left' | 'right' = 'right';\n\n    @Output() menuOpened: EventEmitter<void> = new EventEmitter();\n    @Output() menuClosed: EventEmitter<void> = new EventEmitter();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() click: EventEmitter<MouseEvent> = new EventEmitter();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() focus: EventEmitter<FocusEvent> = new EventEmitter();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() blur: EventEmitter<FocusEvent> = new EventEmitter();\n\n    // Specific ionic behaviour with modal trigger on html side. We cannot use stopImmediatePropagation otherwise the modal doesn't open.\n    // Maybe we can remove this hack once we rename click event by onClick\n    @Input() ionicModalEnabled: boolean = false;\n\n    focused: boolean = false;\n\n    onClickHandle($event: MouseEvent): void {\n        if (this.disabled || this.loading) {\n            return;\n        }\n        if (!this.ionicModalEnabled) {\n            $event.stopImmediatePropagation();\n        }\n        this.click.emit($event);\n        this.buttonElement.nativeElement.blur();\n        this.blur.emit($event);\n    }\n\n    onBlurHandle($event: FocusEvent): void {\n        this.focused = false;\n        this.blur.emit($event);\n    }\n\n    onFocusHandle($event: FocusEvent): void {\n        this.focused = true;\n        this.focus.emit($event);\n    }\n\n    @HostListener('window:keyup.space', ['$event'])\n    onSpaceKeyUp(event: KeyboardEvent) {\n        if (this.focused && !this.disabled && !this.loading) {\n            event.preventDefault();\n            this.buttonElement.nativeElement.click();\n        }\n    }\n}\n","<button\n    #button\n    #trigger=\"matMenuTrigger\"\n    role=\"button\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    [class.primary]=\"config.style === 'primary' && !locked\"\n    [class.secondary]=\"config.style === 'secondary' && !locked\"\n    [class.ghost]=\"config.style === 'ghost' && !locked\"\n    [class.stroked]=\"(config.style === 'stroked' || config.style === 'stroked-transparent') && !locked\"\n    [class.transparent]=\"config.style === 'stroked-transparent' && !locked\"\n    [class.orange]=\"config.color === 'orange' && !locked\"\n    [class.blue]=\"config.color === 'blue' && !locked\"\n    [class.red]=\"config.color === 'red' && !locked\"\n    [class.grey]=\"config.color === 'grey' && !locked\"\n    [class.loading]=\"loading && !locked\"\n    [class.locked]=\"locked\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [disabled]=\"disabled && !locked\"\n    [name]=\"name\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.type]=\"baseButtonDirective.hostType\"\n    [attr.form]=\"form\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    <ng-content></ng-content>\n    <ng-content select=\"ap-symbol\"></ng-content>\n    @if (loading && !locked) {\n        <div class=\"loading-bar\"></div>\n    }\n</button>\n@if (locked) {\n    <div class=\"locked-symbol\">\n        <ap-symbol\n            symbolId=\"premium-star\"\n            size=\"sm\" />\n    </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;MAwCa,eAAe,CAAA;IACf,mBAAmB,GAAwB,MAAM,CAAC,mBAAmB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAE1E,IAAA,aAAa;IAEzB,SAAS,GAAW,EAAE;IAI/B,QAAQ,GAAwB,KAAK;IAIrC,IAAI,GAAW,EAAE;IACR,IAAI,GAAuB,SAAS;AACpC,IAAA,MAAM,GAAiB;AAC5B,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,QAAQ;KAClB;IACQ,OAAO,GAAwB,KAAK;IACpC,MAAM,GAAY,KAAK;IACvB,WAAW,GAAwB,IAAI;IACvC,cAAc,GAAqB,OAAO;AAEzC,IAAA,UAAU,GAAuB,IAAI,YAAY,EAAE;AACnD,IAAA,UAAU,GAAuB,IAAI,YAAY,EAAE;;AAEnD,IAAA,KAAK,GAA6B,IAAI,YAAY,EAAE;;AAEpD,IAAA,KAAK,GAA6B,IAAI,YAAY,EAAE;;AAEpD,IAAA,IAAI,GAA6B,IAAI,YAAY,EAAE;;;IAIpD,iBAAiB,GAAY,KAAK;IAE3C,OAAO,GAAY,KAAK;AAExB,IAAA,aAAa,CAAC,MAAkB,EAAA;QAC5B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE;YAC/B;;AAEJ,QAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YACzB,MAAM,CAAC,wBAAwB,EAAE;;AAErC,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC;AACvB,QAAA,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,EAAE;AACvC,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;AAG1B,IAAA,YAAY,CAAC,MAAkB,EAAA;AAC3B,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;AAG1B,IAAA,aAAa,CAAC,MAAkB,EAAA;AAC5B,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC;;AAI3B,IAAA,YAAY,CAAC,KAAoB,EAAA;AAC7B,QAAA,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjD,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,KAAK,EAAE;;;uGAjEvC,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,QAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAOT,gBAAgB,CAhBpB,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,QAAA,EAAA,WAAA,EAAA,aAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,eAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,SAAA,EAAA,EAAE,4LC/BjB,yrDA2CA,EAAA,MAAA,EAAA,CAAA,65SAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDbc,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,6CAAA,EAAA,MAAA,EAAA,CAAA,sBAAA,EAAA,mBAAA,EAAA,oBAAA,EAAA,4BAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAU/B,eAAe,EAAA,UAAA,EAAA,CAAA;kBAf3B,SAAS;sCACW,uBAAuB,CAAC,MAAM,EACrC,QAAA,EAAA,WAAW,cAET,IAAI,EAAA,OAAA,EACP,CAAC,eAAe,EAAE,aAAa,CAAC,EAC9B,SAAA,EAAA,EAAE,iBAEE,iBAAiB,CAAC,IAAI,EACrB,cAAA,EAAA,CAAC,mBAAmB,CAAC,EAE/B,IAAA,EAAA;AACF,wBAAA,iBAAiB,EAAE,kBAAkB;AACxC,qBAAA,EAAA,QAAA,EAAA,yrDAAA,EAAA,MAAA,EAAA,CAAA,65SAAA,CAAA,EAAA;8BAKoB,aAAa,EAAA,CAAA;sBAAjC,SAAS;uBAAC,QAAQ;gBAEV,SAAS,EAAA,CAAA;sBAAjB;gBAID,QAAQ,EAAA,CAAA;sBAHP,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA;gBAKD,IAAI,EAAA,CAAA;sBAHH,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,QAAQ,EAAE,IAAI;AACjB,qBAAA;gBAEQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,MAAM,EAAA,CAAA;sBAAd;gBAIQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,MAAM,EAAA,CAAA;sBAAd;gBACQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,cAAc,EAAA,CAAA;sBAAtB;gBAES,UAAU,EAAA,CAAA;sBAAnB;gBACS,UAAU,EAAA,CAAA;sBAAnB;gBAES,KAAK,EAAA,CAAA;sBAAd;gBAES,KAAK,EAAA,CAAA;sBAAd;gBAES,IAAI,EAAA,CAAA;sBAAb;gBAIQ,iBAAiB,EAAA,CAAA;sBAAzB;gBA2BD,YAAY,EAAA,CAAA;sBADX,YAAY;uBAAC,oBAAoB,EAAE,CAAC,QAAQ,CAAC;;;AErGlD;;AAEG;;;;"}
+{"version":3,"file":"agorapulse-ui-components-button.mjs","sources":["../../../libs/ui-components/button/src/button.component.ts","../../../libs/ui-components/button/src/button.component.html","../../../libs/ui-components/button/src/agorapulse-ui-components-button.ts"],"sourcesContent":["import {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    inject,\n    input,\n    Input,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BaseButtonDirective } from '@agorapulse/ui-components/directives';\nimport { agorapulseSymbol, SymbolComponent } from '@agorapulse/ui-symbol';\nimport { MatMenuModule, MatMenuPanel } from '@angular/material/menu';\n\ntype ButtonConfig =\n    | { style: 'primary'; color: 'orange' | 'blue' }\n    | { style: 'secondary'; color: 'orange' | 'blue' }\n    | { style: 'stroked'; color: 'grey' | 'blue' }\n    | { style: 'stroked-transparent'; color: 'grey' | 'blue' }\n    | { style: 'ghost'; color: 'grey' | 'blue' | 'red' };\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-button',\n    styleUrls: ['./button.component.scss'],\n    standalone: true,\n    imports: [SymbolComponent, MatMenuModule],\n    templateUrl: './button.component.html',\n    encapsulation: ViewEncapsulation.None,\n    hostDirectives: [BaseButtonDirective],\n    // eslint-disable-next-line @angular-eslint/no-host-metadata-property\n    host: {\n        '[attr.disabled]': 'disabled || null',\n    },\n})\nexport class ButtonComponent {\n    readonly baseButtonDirective: BaseButtonDirective = inject(BaseButtonDirective, { self: true });\n\n    @ViewChild('button') buttonElement!: ElementRef<HTMLButtonElement>;\n\n    @Input() ariaLabel: string = '';\n    @Input({\n        transform: booleanAttribute,\n    })\n    disabled: boolean | undefined = false;\n    @Input({\n        required: true,\n    })\n    name: string = '';\n    @Input() form: string | undefined = undefined;\n    @Input() config: ButtonConfig = {\n        style: 'primary',\n        color: 'orange',\n    };\n    @Input() loading: boolean | undefined = false;\n    @Input() locked: boolean = false;\n    @Input() menuTrigger: MatMenuPanel | null = null;\n    @Input() symbolPosition: 'left' | 'right' = 'right';\n\n    symbolId = input<agorapulseSymbol>();\n\n    @Output() menuOpened: EventEmitter<void> = new EventEmitter();\n    @Output() menuClosed: EventEmitter<void> = new EventEmitter();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() click: EventEmitter<MouseEvent> = new EventEmitter();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() focus: EventEmitter<FocusEvent> = new EventEmitter();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() blur: EventEmitter<FocusEvent> = new EventEmitter();\n\n    focused: boolean = false;\n\n    onClickHandle($event: MouseEvent): void {\n        if (this.disabled || this.loading) {\n            return;\n        }\n        $event.stopImmediatePropagation();\n        this.click.emit($event);\n        this.buttonElement.nativeElement.blur();\n        this.blur.emit($event);\n    }\n\n    onBlurHandle($event: FocusEvent): void {\n        this.focused = false;\n        this.blur.emit($event);\n    }\n\n    onFocusHandle($event: FocusEvent): void {\n        this.focused = true;\n        this.focus.emit($event);\n    }\n\n    @HostListener('window:keyup.space', ['$event'])\n    onSpaceKeyUp(event: KeyboardEvent) {\n        if (this.focused && !this.disabled && !this.loading) {\n            event.preventDefault();\n            this.buttonElement.nativeElement.click();\n        }\n    }\n}\n","<button\n    #button\n    #trigger=\"matMenuTrigger\"\n    role=\"button\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    [class.primary]=\"config.style === 'primary' && !locked\"\n    [class.secondary]=\"config.style === 'secondary' && !locked\"\n    [class.ghost]=\"config.style === 'ghost' && !locked\"\n    [class.stroked]=\"(config.style === 'stroked' || config.style === 'stroked-transparent') && !locked\"\n    [class.transparent]=\"config.style === 'stroked-transparent' && !locked\"\n    [class.orange]=\"config.color === 'orange' && !locked\"\n    [class.blue]=\"config.color === 'blue' && !locked\"\n    [class.red]=\"config.color === 'red' && !locked\"\n    [class.grey]=\"config.color === 'grey' && !locked\"\n    [class.loading]=\"loading && !locked\"\n    [class.locked]=\"locked\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [disabled]=\"disabled && !locked\"\n    [name]=\"name\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.type]=\"baseButtonDirective.hostType\"\n    [attr.form]=\"form\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    <ng-content>Button text</ng-content>\n    @if (symbolId()) {\n        <ap-symbol [symbolId]=\"symbolId()\" />\n    } @else {\n        <ng-content select=\"ap-symbol\"></ng-content>\n    }\n    @if (loading && !locked) {\n        <div class=\"loading-bar\"></div>\n    }\n</button>\n@if (locked) {\n    <div class=\"locked-symbol\">\n        <ap-symbol\n            symbolId=\"premium-star\"\n            size=\"sm\" />\n    </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/agorapulse-ui-components-checkbox.mjs

@@ -123,7 +123,7 @@ class CheckboxComponent {
                 useExisting: CheckboxComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"checkbox\"\n    (click)=\"_preventBubblingFromLabel($event)\">\n    <div\n        class=\"checkbox-container\"\n        [class.hover]=\"hovered\"\n        [class.checked]=\"checked\"\n        [class.indeterminate]=\"indeterminate && !checked\"\n        [class.disabled]=\"disabled\"\n        [class.has-label]=\"hasLabel\"\n        [class.required]=\"required\">\n        <input\n            #input\n            type=\"checkbox\"\n            [id]=\"name\"\n            [class.disabled]=\"disabled\"\n            [disabled]=\"disabled\"\n            [checked]=\"checked\"\n            [required]=\"required\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledby\"\n            [attr.aria-describedby]=\"ariaDescribedby\"\n            [attr.data-test]=\"name\"\n            (click)=\"onValueChange()\" />\n        <span\n            class=\"checkbox\"\n            (mouseenter)=\"onMouseEnter()\"\n            (mouseleave)=\"onMouseLeave()\"\n            (click)=\"onValueChange()\">\n            @if (checked) {\n                <span class=\"checkmark\">\n                    <ap-symbol\n                        symbolId=\"check\"\n                        color=\"white\"\n                        [size]=\"10\" />\n                </span>\n            }\n            @if (indeterminate && !checked) {\n                <span class=\"indeterminate\"></span>\n            }\n        </span>\n    </div>\n    <label\n        #label\n        [class.disabled]=\"disabled\"\n        [for]=\"name\">\n        <ng-content />\n    </label>\n</div>\n", styles: ["ap-checkbox{display:flex;align-items:center}ap-checkbox.ng-invalid.ng-touched .checkbox-container.required span.checkbox{border-color:var(--ref-color-red-100)!important}ap-checkbox.bold label{font-weight:var(--ref-font-weight-bold)}ap-checkbox.full-width .checkbox{justify-content:space-between;align-items:center;width:100%}ap-checkbox .checkbox{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-checkbox .checkbox .checkbox-container{display:flex;justify-content:center;align-items:center;max-width:36px;height:fit-content;box-sizing:border-box;position:relative}ap-checkbox .checkbox .checkbox-container:not(.has-label){padding:10px}ap-checkbox .checkbox .checkbox-container.hover:not(.disabled):not(.has-label){border-radius:var(--ref-border-radius-md);background:var(--ref-color-grey-05)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled).hover{background:var(--ref-color-electric-blue-10)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled):active:not(.has-label){background:var(--ref-color-electric-blue-20)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled):active:not(.has-label) span.checkbox{background:var(--ref-color-electric-blue-60)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox{background:var(--ref-color-electric-blue-100);border-color:var(--ref-color-electric-blue-100)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox:hover{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-80)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox:active{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-60)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled).hover{background:var(--ref-color-electric-blue-10)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled) span.checkbox{background:var(--ref-color-electric-blue-100);border-color:var(--ref-color-electric-blue-100)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled) span.checkbox:hover{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-80)}ap-checkbox .checkbox .checkbox-container.disabled span.checkbox{border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10)}ap-checkbox .checkbox .checkbox-container.disabled.checked span.checkbox{background:var(--ref-color-grey-20)}ap-checkbox .checkbox .checkbox-container.disabled.indeterminate span.checkbox{background:var(--ref-color-grey-20)}ap-checkbox .checkbox .checkbox-container.disabled span.checkbox{pointer-events:none}ap-checkbox .checkbox .checkbox-container input[type=checkbox]{position:absolute;clip:rect(0,0,0,0)}@media (hover: hover){ap-checkbox .checkbox .checkbox-container input[type=checkbox]:focus:not(.disabled)~.checkbox{outline:3px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-checkbox .checkbox .checkbox-container span.checkbox{display:flex;justify-content:center;align-items:center;width:16px;height:16px;min-width:16px;min-height:16px;max-height:16px;max-width:16px;border-radius:var(--sys-border-radius-sm);border:1px solid var(--ref-color-grey-60);background:var(--ref-color-white);box-sizing:border-box}ap-checkbox .checkbox .checkbox-container span.checkbox:hover{cursor:pointer;border-color:var(--ref-color-grey-80)}ap-checkbox .checkbox .checkbox-container span.checkbox:active{border-color:var(--ref-color-grey-100)}ap-checkbox .checkbox .checkbox-container span.checkbox .checkmark{display:flex;justify-content:center;align-items:center}ap-checkbox .checkbox .checkbox-container span.checkbox .indeterminate{height:1.5px;background:var(--ref-color-white);width:8px}ap-checkbox .checkbox label{display:flex;align-items:center;font-family:var(--comp-forms-label-font-family);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);color:var(--comp-forms-label-text-color)}ap-checkbox .checkbox label:empty{display:none}ap-checkbox .checkbox label.disabled{color:var(--ref-color-grey-60)}ap-checkbox .checkbox label:hover:not(.disabled){cursor:pointer}form.ng-submitted ap-checkbox.ng-invalid span.checkbox{border-color:var(--ref-color-red-100)!important}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"checkbox\"\n    (click)=\"_preventBubblingFromLabel($event)\">\n    <div\n        class=\"checkbox-container\"\n        [class.hover]=\"hovered\"\n        [class.checked]=\"checked\"\n        [class.indeterminate]=\"indeterminate && !checked\"\n        [class.disabled]=\"disabled\"\n        [class.has-label]=\"hasLabel\"\n        [class.required]=\"required\">\n        <input\n            #input\n            type=\"checkbox\"\n            [id]=\"name\"\n            [class.disabled]=\"disabled\"\n            [disabled]=\"disabled\"\n            [checked]=\"checked\"\n            [required]=\"required\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledby\"\n            [attr.aria-describedby]=\"ariaDescribedby\"\n            [attr.data-test]=\"name\"\n            (click)=\"onValueChange()\" />\n        <span\n            class=\"checkbox\"\n            (mouseenter)=\"onMouseEnter()\"\n            (mouseleave)=\"onMouseLeave()\"\n            (click)=\"onValueChange()\">\n            @if (checked) {\n                <span class=\"checkmark\">\n                    <ap-symbol\n                        symbolId=\"check\"\n                        color=\"white\"\n                        [size]=\"10\" />\n                </span>\n            }\n            @if (indeterminate && !checked) {\n                <span class=\"indeterminate\"></span>\n            }\n        </span>\n    </div>\n    <label\n        #label\n        [class.disabled]=\"disabled\"\n        [for]=\"name\">\n        <ng-content>Checkbox label</ng-content>\n    </label>\n</div>\n", styles: ["ap-checkbox{display:flex;align-items:center}ap-checkbox.ng-invalid.ng-touched .checkbox-container.required span.checkbox{border-color:var(--ref-color-red-100)!important}ap-checkbox.bold label{font-weight:var(--ref-font-weight-bold)}ap-checkbox.full-width .checkbox{justify-content:space-between;align-items:center;width:100%}ap-checkbox .checkbox{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-checkbox .checkbox .checkbox-container{display:flex;justify-content:center;align-items:center;max-width:36px;height:fit-content;box-sizing:border-box;position:relative}ap-checkbox .checkbox .checkbox-container:not(.has-label){padding:10px}ap-checkbox .checkbox .checkbox-container.hover:not(.disabled):not(.has-label){border-radius:var(--ref-border-radius-md);background:var(--ref-color-grey-05)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled).hover{background:var(--ref-color-electric-blue-10)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled):active:not(.has-label){background:var(--ref-color-electric-blue-20)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled):active:not(.has-label) span.checkbox{background:var(--ref-color-electric-blue-60)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox{background:var(--ref-color-electric-blue-100);border-color:var(--ref-color-electric-blue-100)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox:hover{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-80)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox:active{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-60)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled).hover{background:var(--ref-color-electric-blue-10)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled) span.checkbox{background:var(--ref-color-electric-blue-100);border-color:var(--ref-color-electric-blue-100)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled) span.checkbox:hover{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-80)}ap-checkbox .checkbox .checkbox-container.disabled span.checkbox{border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10)}ap-checkbox .checkbox .checkbox-container.disabled.checked span.checkbox{background:var(--ref-color-grey-20)}ap-checkbox .checkbox .checkbox-container.disabled.indeterminate span.checkbox{background:var(--ref-color-grey-20)}ap-checkbox .checkbox .checkbox-container.disabled span.checkbox{pointer-events:none}ap-checkbox .checkbox .checkbox-container input[type=checkbox]{position:absolute;clip:rect(0,0,0,0)}@media (hover: hover){ap-checkbox .checkbox .checkbox-container input[type=checkbox]:focus:not(.disabled)~.checkbox{outline:3px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-checkbox .checkbox .checkbox-container span.checkbox{display:flex;justify-content:center;align-items:center;width:16px;height:16px;min-width:16px;min-height:16px;max-height:16px;max-width:16px;border-radius:var(--sys-border-radius-sm);border:1px solid var(--ref-color-grey-60);background:var(--ref-color-white);box-sizing:border-box}ap-checkbox .checkbox .checkbox-container span.checkbox:hover{cursor:pointer;border-color:var(--ref-color-grey-80)}ap-checkbox .checkbox .checkbox-container span.checkbox:active{border-color:var(--ref-color-grey-100)}ap-checkbox .checkbox .checkbox-container span.checkbox .checkmark{display:flex;justify-content:center;align-items:center}ap-checkbox .checkbox .checkbox-container span.checkbox .indeterminate{height:1.5px;background:var(--ref-color-white);width:8px}ap-checkbox .checkbox label{display:flex;align-items:center;font-family:var(--comp-forms-label-font-family);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);color:var(--comp-forms-label-text-color)}ap-checkbox .checkbox label:empty{display:none}ap-checkbox .checkbox label.disabled{color:var(--ref-color-grey-60)}ap-checkbox .checkbox label:hover:not(.disabled){cursor:pointer}form.ng-submitted ap-checkbox.ng-invalid span.checkbox{border-color:var(--ref-color-red-100)!important}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -134,7 +134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                             useExisting: CheckboxComponent,
                             multi: true,
                         },
-                    ], encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"checkbox\"\n    (click)=\"_preventBubblingFromLabel($event)\">\n    <div\n        class=\"checkbox-container\"\n        [class.hover]=\"hovered\"\n        [class.checked]=\"checked\"\n        [class.indeterminate]=\"indeterminate && !checked\"\n        [class.disabled]=\"disabled\"\n        [class.has-label]=\"hasLabel\"\n        [class.required]=\"required\">\n        <input\n            #input\n            type=\"checkbox\"\n            [id]=\"name\"\n            [class.disabled]=\"disabled\"\n            [disabled]=\"disabled\"\n            [checked]=\"checked\"\n            [required]=\"required\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledby\"\n            [attr.aria-describedby]=\"ariaDescribedby\"\n            [attr.data-test]=\"name\"\n            (click)=\"onValueChange()\" />\n        <span\n            class=\"checkbox\"\n            (mouseenter)=\"onMouseEnter()\"\n            (mouseleave)=\"onMouseLeave()\"\n            (click)=\"onValueChange()\">\n            @if (checked) {\n                <span class=\"checkmark\">\n                    <ap-symbol\n                        symbolId=\"check\"\n                        color=\"white\"\n                        [size]=\"10\" />\n                </span>\n            }\n            @if (indeterminate && !checked) {\n                <span class=\"indeterminate\"></span>\n            }\n        </span>\n    </div>\n    <label\n        #label\n        [class.disabled]=\"disabled\"\n        [for]=\"name\">\n        <ng-content />\n    </label>\n</div>\n", styles: ["ap-checkbox{display:flex;align-items:center}ap-checkbox.ng-invalid.ng-touched .checkbox-container.required span.checkbox{border-color:var(--ref-color-red-100)!important}ap-checkbox.bold label{font-weight:var(--ref-font-weight-bold)}ap-checkbox.full-width .checkbox{justify-content:space-between;align-items:center;width:100%}ap-checkbox .checkbox{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-checkbox .checkbox .checkbox-container{display:flex;justify-content:center;align-items:center;max-width:36px;height:fit-content;box-sizing:border-box;position:relative}ap-checkbox .checkbox .checkbox-container:not(.has-label){padding:10px}ap-checkbox .checkbox .checkbox-container.hover:not(.disabled):not(.has-label){border-radius:var(--ref-border-radius-md);background:var(--ref-color-grey-05)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled).hover{background:var(--ref-color-electric-blue-10)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled):active:not(.has-label){background:var(--ref-color-electric-blue-20)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled):active:not(.has-label) span.checkbox{background:var(--ref-color-electric-blue-60)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox{background:var(--ref-color-electric-blue-100);border-color:var(--ref-color-electric-blue-100)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox:hover{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-80)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox:active{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-60)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled).hover{background:var(--ref-color-electric-blue-10)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled) span.checkbox{background:var(--ref-color-electric-blue-100);border-color:var(--ref-color-electric-blue-100)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled) span.checkbox:hover{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-80)}ap-checkbox .checkbox .checkbox-container.disabled span.checkbox{border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10)}ap-checkbox .checkbox .checkbox-container.disabled.checked span.checkbox{background:var(--ref-color-grey-20)}ap-checkbox .checkbox .checkbox-container.disabled.indeterminate span.checkbox{background:var(--ref-color-grey-20)}ap-checkbox .checkbox .checkbox-container.disabled span.checkbox{pointer-events:none}ap-checkbox .checkbox .checkbox-container input[type=checkbox]{position:absolute;clip:rect(0,0,0,0)}@media (hover: hover){ap-checkbox .checkbox .checkbox-container input[type=checkbox]:focus:not(.disabled)~.checkbox{outline:3px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-checkbox .checkbox .checkbox-container span.checkbox{display:flex;justify-content:center;align-items:center;width:16px;height:16px;min-width:16px;min-height:16px;max-height:16px;max-width:16px;border-radius:var(--sys-border-radius-sm);border:1px solid var(--ref-color-grey-60);background:var(--ref-color-white);box-sizing:border-box}ap-checkbox .checkbox .checkbox-container span.checkbox:hover{cursor:pointer;border-color:var(--ref-color-grey-80)}ap-checkbox .checkbox .checkbox-container span.checkbox:active{border-color:var(--ref-color-grey-100)}ap-checkbox .checkbox .checkbox-container span.checkbox .checkmark{display:flex;justify-content:center;align-items:center}ap-checkbox .checkbox .checkbox-container span.checkbox .indeterminate{height:1.5px;background:var(--ref-color-white);width:8px}ap-checkbox .checkbox label{display:flex;align-items:center;font-family:var(--comp-forms-label-font-family);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);color:var(--comp-forms-label-text-color)}ap-checkbox .checkbox label:empty{display:none}ap-checkbox .checkbox label.disabled{color:var(--ref-color-grey-60)}ap-checkbox .checkbox label:hover:not(.disabled){cursor:pointer}form.ng-submitted ap-checkbox.ng-invalid span.checkbox{border-color:var(--ref-color-red-100)!important}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"checkbox\"\n    (click)=\"_preventBubblingFromLabel($event)\">\n    <div\n        class=\"checkbox-container\"\n        [class.hover]=\"hovered\"\n        [class.checked]=\"checked\"\n        [class.indeterminate]=\"indeterminate && !checked\"\n        [class.disabled]=\"disabled\"\n        [class.has-label]=\"hasLabel\"\n        [class.required]=\"required\">\n        <input\n            #input\n            type=\"checkbox\"\n            [id]=\"name\"\n            [class.disabled]=\"disabled\"\n            [disabled]=\"disabled\"\n            [checked]=\"checked\"\n            [required]=\"required\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledby\"\n            [attr.aria-describedby]=\"ariaDescribedby\"\n            [attr.data-test]=\"name\"\n            (click)=\"onValueChange()\" />\n        <span\n            class=\"checkbox\"\n            (mouseenter)=\"onMouseEnter()\"\n            (mouseleave)=\"onMouseLeave()\"\n            (click)=\"onValueChange()\">\n            @if (checked) {\n                <span class=\"checkmark\">\n                    <ap-symbol\n                        symbolId=\"check\"\n                        color=\"white\"\n                        [size]=\"10\" />\n                </span>\n            }\n            @if (indeterminate && !checked) {\n                <span class=\"indeterminate\"></span>\n            }\n        </span>\n    </div>\n    <label\n        #label\n        [class.disabled]=\"disabled\"\n        [for]=\"name\">\n        <ng-content>Checkbox label</ng-content>\n    </label>\n</div>\n", styles: ["ap-checkbox{display:flex;align-items:center}ap-checkbox.ng-invalid.ng-touched .checkbox-container.required span.checkbox{border-color:var(--ref-color-red-100)!important}ap-checkbox.bold label{font-weight:var(--ref-font-weight-bold)}ap-checkbox.full-width .checkbox{justify-content:space-between;align-items:center;width:100%}ap-checkbox .checkbox{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-checkbox .checkbox .checkbox-container{display:flex;justify-content:center;align-items:center;max-width:36px;height:fit-content;box-sizing:border-box;position:relative}ap-checkbox .checkbox .checkbox-container:not(.has-label){padding:10px}ap-checkbox .checkbox .checkbox-container.hover:not(.disabled):not(.has-label){border-radius:var(--ref-border-radius-md);background:var(--ref-color-grey-05)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled).hover{background:var(--ref-color-electric-blue-10)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled):active:not(.has-label){background:var(--ref-color-electric-blue-20)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled):active:not(.has-label) span.checkbox{background:var(--ref-color-electric-blue-60)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox{background:var(--ref-color-electric-blue-100);border-color:var(--ref-color-electric-blue-100)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox:hover{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-80)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox:active{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-60)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled).hover{background:var(--ref-color-electric-blue-10)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled) span.checkbox{background:var(--ref-color-electric-blue-100);border-color:var(--ref-color-electric-blue-100)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled) span.checkbox:hover{border:1px solid var(--ref-color-electric-blue-100);background:var(--ref-color-electric-blue-80)}ap-checkbox .checkbox .checkbox-container.disabled span.checkbox{border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10)}ap-checkbox .checkbox .checkbox-container.disabled.checked span.checkbox{background:var(--ref-color-grey-20)}ap-checkbox .checkbox .checkbox-container.disabled.indeterminate span.checkbox{background:var(--ref-color-grey-20)}ap-checkbox .checkbox .checkbox-container.disabled span.checkbox{pointer-events:none}ap-checkbox .checkbox .checkbox-container input[type=checkbox]{position:absolute;clip:rect(0,0,0,0)}@media (hover: hover){ap-checkbox .checkbox .checkbox-container input[type=checkbox]:focus:not(.disabled)~.checkbox{outline:3px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-checkbox .checkbox .checkbox-container span.checkbox{display:flex;justify-content:center;align-items:center;width:16px;height:16px;min-width:16px;min-height:16px;max-height:16px;max-width:16px;border-radius:var(--sys-border-radius-sm);border:1px solid var(--ref-color-grey-60);background:var(--ref-color-white);box-sizing:border-box}ap-checkbox .checkbox .checkbox-container span.checkbox:hover{cursor:pointer;border-color:var(--ref-color-grey-80)}ap-checkbox .checkbox .checkbox-container span.checkbox:active{border-color:var(--ref-color-grey-100)}ap-checkbox .checkbox .checkbox-container span.checkbox .checkmark{display:flex;justify-content:center;align-items:center}ap-checkbox .checkbox .checkbox-container span.checkbox .indeterminate{height:1.5px;background:var(--ref-color-white);width:8px}ap-checkbox .checkbox label{display:flex;align-items:center;font-family:var(--comp-forms-label-font-family);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);color:var(--comp-forms-label-text-color)}ap-checkbox .checkbox label:empty{display:none}ap-checkbox .checkbox label.disabled{color:var(--ref-color-grey-60)}ap-checkbox .checkbox label:hover:not(.disabled){cursor:pointer}form.ng-submitted ap-checkbox.ng-invalid span.checkbox{border-color:var(--ref-color-red-100)!important}\n"] }]
         }], propDecorators: { inputElement: [{
                 type: ViewChild,
                 args: ['input', { static: true }]

package/fesm2022/agorapulse-ui-components-checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-checkbox.mjs","sources":["../../../libs/ui-components/checkbox/src/checkbox.component.ts","../../../libs/ui-components/checkbox/src/checkbox.component.html","../../../libs/ui-components/checkbox/src/agorapulse-ui-components-checkbox.ts"],"sourcesContent":["import { apCheck, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport {\n    AfterContentInit,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    inject,\n    Input,\n    OnChanges,\n    OnInit,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport const AP_CHECKBOX_CONTROL_VALUE_ACCESSOR = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => CheckboxComponent),\n    multi: true,\n};\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-checkbox',\n    styleUrls: ['./checkbox.component.scss'],\n    standalone: true,\n    imports: [SymbolComponent],\n    providers: [\n        AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,\n        {\n            provide: NG_VALIDATORS,\n            useExisting: CheckboxComponent,\n            multi: true,\n        },\n    ],\n    templateUrl: './checkbox.component.html',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class CheckboxComponent implements ControlValueAccessor, AfterContentInit, OnChanges, OnInit {\n    private readonly symbolRegistry = inject(SymbolRegistry);\n    @ViewChild('input', { static: true }) inputElement!: ElementRef<HTMLInputElement>;\n    @ViewChild('label', { static: true }) labelElement!: ElementRef<HTMLInputElement>;\n    @Input('aria-label') ariaLabel?: string;\n    @Input('aria-labelledby') ariaLabelledby?: string;\n    @Input('aria-describedby') ariaDescribedby?: string;\n    @Input({\n        transform: booleanAttribute,\n    })\n    disabled = false;\n    @Input({\n        transform: booleanAttribute,\n    })\n    set indeterminate(indeterminate: boolean) {\n        if (indeterminate) {\n            this.checked = false;\n        }\n        this._indeterminate = indeterminate;\n    }\n\n    get indeterminate(): boolean {\n        return this._indeterminate;\n    }\n\n    @Input() checked = false;\n\n    @Input({\n        transform: booleanAttribute,\n    })\n    required = false;\n\n    @Input({\n        required: true,\n    })\n    set name(name: string) {\n        this._name = name;\n    }\n    get name(): string {\n        return this._name;\n    }\n    // eslint-disable-next-line\n    @Output() readonly change: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n    ariaChecked: 'true' | 'false' | 'mixed' = 'false';\n    hasLabel = false;\n    hovered = false;\n\n    private _indeterminate = false;\n    private _name = '';\n    private _controlValueAccessorChangeFn!: (value: boolean) => void;\n    onTouched!: () => void;\n\n    ngOnChanges(): void {\n        if (this.labelElement) {\n            this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n        }\n    }\n\n    ngOnInit() {\n        this.symbolRegistry.registerSymbols([apCheck]);\n    }\n\n    ngAfterContentInit(): void {\n        if (this.labelElement) {\n            this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n        }\n    }\n\n    onMouseEnter(): void {\n        if (!this.disabled) {\n            this.hovered = true;\n        }\n    }\n\n    onMouseLeave(): void {\n        if (!this.disabled) {\n            this.hovered = false;\n        }\n    }\n\n    onValueChange() {\n        if (this.onTouched) {\n            this.onTouched();\n        }\n        if (!this.disabled) {\n            if (this.indeterminate) {\n                this.checked = false;\n                this.indeterminate = false;\n            } else {\n                this.checked = !this.checked;\n                this.focus();\n            }\n            this.change.emit(this.checked);\n            if (this._controlValueAccessorChangeFn) {\n                this._controlValueAccessorChangeFn(this.checked);\n            }\n\n            // Assigning the value again here is redundant, but we have to do it in case it was\n            // changed inside the `change` listener which will cause the input to be out of sync.\n            if (this.inputElement) {\n                this.inputElement.nativeElement.checked = this.checked;\n            }\n        }\n    }\n\n    focus() {\n        this.inputElement.nativeElement.focus();\n    }\n\n    writeValue(value: boolean): void {\n        this.checked = value;\n    }\n    registerOnChange(fn: (value: boolean) => void): void {\n        this._controlValueAccessorChangeFn = fn;\n    }\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    validate() {\n        const isNotValid = !this.checked && this.required;\n        return (\n            isNotValid && {\n                invalid: true,\n            }\n        );\n    }\n\n    _preventBubblingFromLabel(event: MouseEvent) {\n        if (!!event.target && this.labelElement.nativeElement.contains(event.target as HTMLElement)) {\n            event.stopPropagation();\n        }\n    }\n}\n","<div\n    class=\"checkbox\"\n    (click)=\"_preventBubblingFromLabel($event)\">\n    <div\n        class=\"checkbox-container\"\n        [class.hover]=\"hovered\"\n        [class.checked]=\"checked\"\n        [class.indeterminate]=\"indeterminate && !checked\"\n        [class.disabled]=\"disabled\"\n        [class.has-label]=\"hasLabel\"\n        [class.required]=\"required\">\n        <input\n            #input\n            type=\"checkbox\"\n            [id]=\"name\"\n            [class.disabled]=\"disabled\"\n            [disabled]=\"disabled\"\n            [checked]=\"checked\"\n            [required]=\"required\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledby\"\n            [attr.aria-describedby]=\"ariaDescribedby\"\n            [attr.data-test]=\"name\"\n            (click)=\"onValueChange()\" />\n        <span\n            class=\"checkbox\"\n            (mouseenter)=\"onMouseEnter()\"\n            (mouseleave)=\"onMouseLeave()\"\n            (click)=\"onValueChange()\">\n            @if (checked) {\n                <span class=\"checkmark\">\n                    <ap-symbol\n                        symbolId=\"check\"\n                        color=\"white\"\n                        [size]=\"10\" />\n                </span>\n            }\n            @if (indeterminate && !checked) {\n                <span class=\"indeterminate\"></span>\n            }\n        </span>\n    </div>\n    <label\n        #label\n        [class.disabled]=\"disabled\"\n        [for]=\"name\">\n        <ng-content />\n    </label>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"agorapulse-ui-components-checkbox.mjs","sources":["../../../libs/ui-components/checkbox/src/checkbox.component.ts","../../../libs/ui-components/checkbox/src/checkbox.component.html","../../../libs/ui-components/checkbox/src/agorapulse-ui-components-checkbox.ts"],"sourcesContent":["import { apCheck, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport {\n    AfterContentInit,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    inject,\n    Input,\n    OnChanges,\n    OnInit,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport const AP_CHECKBOX_CONTROL_VALUE_ACCESSOR = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => CheckboxComponent),\n    multi: true,\n};\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-checkbox',\n    styleUrls: ['./checkbox.component.scss'],\n    standalone: true,\n    imports: [SymbolComponent],\n    providers: [\n        AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,\n        {\n            provide: NG_VALIDATORS,\n            useExisting: CheckboxComponent,\n            multi: true,\n        },\n    ],\n    templateUrl: './checkbox.component.html',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class CheckboxComponent implements ControlValueAccessor, AfterContentInit, OnChanges, OnInit {\n    private readonly symbolRegistry = inject(SymbolRegistry);\n    @ViewChild('input', { static: true }) inputElement!: ElementRef<HTMLInputElement>;\n    @ViewChild('label', { static: true }) labelElement!: ElementRef<HTMLInputElement>;\n    @Input('aria-label') ariaLabel?: string;\n    @Input('aria-labelledby') ariaLabelledby?: string;\n    @Input('aria-describedby') ariaDescribedby?: string;\n    @Input({\n        transform: booleanAttribute,\n    })\n    disabled = false;\n    @Input({\n        transform: booleanAttribute,\n    })\n    set indeterminate(indeterminate: boolean) {\n        if (indeterminate) {\n            this.checked = false;\n        }\n        this._indeterminate = indeterminate;\n    }\n\n    get indeterminate(): boolean {\n        return this._indeterminate;\n    }\n\n    @Input() checked = false;\n\n    @Input({\n        transform: booleanAttribute,\n    })\n    required = false;\n\n    @Input({\n        required: true,\n    })\n    set name(name: string) {\n        this._name = name;\n    }\n    get name(): string {\n        return this._name;\n    }\n    // eslint-disable-next-line\n    @Output() readonly change: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n    ariaChecked: 'true' | 'false' | 'mixed' = 'false';\n    hasLabel = false;\n    hovered = false;\n\n    private _indeterminate = false;\n    private _name = '';\n    private _controlValueAccessorChangeFn!: (value: boolean) => void;\n    onTouched!: () => void;\n\n    ngOnChanges(): void {\n        if (this.labelElement) {\n            this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n        }\n    }\n\n    ngOnInit() {\n        this.symbolRegistry.registerSymbols([apCheck]);\n    }\n\n    ngAfterContentInit(): void {\n        if (this.labelElement) {\n            this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n        }\n    }\n\n    onMouseEnter(): void {\n        if (!this.disabled) {\n            this.hovered = true;\n        }\n    }\n\n    onMouseLeave(): void {\n        if (!this.disabled) {\n            this.hovered = false;\n        }\n    }\n\n    onValueChange() {\n        if (this.onTouched) {\n            this.onTouched();\n        }\n        if (!this.disabled) {\n            if (this.indeterminate) {\n                this.checked = false;\n                this.indeterminate = false;\n            } else {\n                this.checked = !this.checked;\n                this.focus();\n            }\n            this.change.emit(this.checked);\n            if (this._controlValueAccessorChangeFn) {\n                this._controlValueAccessorChangeFn(this.checked);\n            }\n\n            // Assigning the value again here is redundant, but we have to do it in case it was\n            // changed inside the `change` listener which will cause the input to be out of sync.\n            if (this.inputElement) {\n                this.inputElement.nativeElement.checked = this.checked;\n            }\n        }\n    }\n\n    focus() {\n        this.inputElement.nativeElement.focus();\n    }\n\n    writeValue(value: boolean): void {\n        this.checked = value;\n    }\n    registerOnChange(fn: (value: boolean) => void): void {\n        this._controlValueAccessorChangeFn = fn;\n    }\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    validate() {\n        const isNotValid = !this.checked && this.required;\n        return (\n            isNotValid && {\n                invalid: true,\n            }\n        );\n    }\n\n    _preventBubblingFromLabel(event: MouseEvent) {\n        if (!!event.target && this.labelElement.nativeElement.contains(event.target as HTMLElement)) {\n            event.stopPropagation();\n        }\n    }\n}\n","<div\n    class=\"checkbox\"\n    (click)=\"_preventBubblingFromLabel($event)\">\n    <div\n        class=\"checkbox-container\"\n        [class.hover]=\"hovered\"\n        [class.checked]=\"checked\"\n        [class.indeterminate]=\"indeterminate && !checked\"\n        [class.disabled]=\"disabled\"\n        [class.has-label]=\"hasLabel\"\n        [class.required]=\"required\">\n        <input\n            #input\n            type=\"checkbox\"\n            [id]=\"name\"\n            [class.disabled]=\"disabled\"\n            [disabled]=\"disabled\"\n            [checked]=\"checked\"\n            [required]=\"required\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledby\"\n            [attr.aria-describedby]=\"ariaDescribedby\"\n            [attr.data-test]=\"name\"\n            (click)=\"onValueChange()\" />\n        <span\n            class=\"checkbox\"\n            (mouseenter)=\"onMouseEnter()\"\n            (mouseleave)=\"onMouseLeave()\"\n            (click)=\"onValueChange()\">\n            @if (checked) {\n                <span class=\"checkmark\">\n                    <ap-symbol\n                        symbolId=\"check\"\n                        color=\"white\"\n                        [size]=\"10\" />\n                </span>\n            }\n            @if (indeterminate && !checked) {\n                <span class=\"indeterminate\"></span>\n            }\n        </span>\n    </div>\n    <label\n        #label\n        [class.disabled]=\"disabled\"\n        [for]=\"name\">\n        <ng-content>Checkbox label</ng-content>\n    </label>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;AAmBa,MAAA,kCAAkC,GAAG;AAC9C,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC;AAChD,IAAA,KAAK,EAAE,IAAI;;MAoBF,iBAAiB,CAAA;AACT,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;AAClB,IAAA,YAAY;AACZ,IAAA,YAAY;AAC7B,IAAA,SAAS;AACJ,IAAA,cAAc;AACb,IAAA,eAAe;IAI1C,QAAQ,GAAG,KAAK;IAChB,IAGI,aAAa,CAAC,aAAsB,EAAA;QACpC,IAAI,aAAa,EAAE;AACf,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;AAExB,QAAA,IAAI,CAAC,cAAc,GAAG,aAAa;;AAGvC,IAAA,IAAI,aAAa,GAAA;QACb,OAAO,IAAI,CAAC,cAAc;;IAGrB,OAAO,GAAG,KAAK;IAKxB,QAAQ,GAAG,KAAK;IAEhB,IAGI,IAAI,CAAC,IAAY,EAAA;AACjB,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI;;AAErB,IAAA,IAAI,IAAI,GAAA;QACJ,OAAO,IAAI,CAAC,KAAK;;;AAGF,IAAA,MAAM,GAA0B,IAAI,YAAY,EAAW;IAE9E,WAAW,GAA+B,OAAO;IACjD,QAAQ,GAAG,KAAK;IAChB,OAAO,GAAG,KAAK;IAEP,cAAc,GAAG,KAAK;IACtB,KAAK,GAAG,EAAE;AACV,IAAA,6BAA6B;AACrC,IAAA,SAAS;IAET,WAAW,GAAA;AACP,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,WAAW,EAAE,IAAI,EAAE;;;IAI7E,QAAQ,GAAA;QACJ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,CAAC;;IAGlD,kBAAkB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,WAAW,EAAE,IAAI,EAAE;;;IAI7E,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAChB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;;IAI3B,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAChB,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;;IAI5B,aAAa,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,SAAS,EAAE;;AAEpB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAChB,YAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACpB,gBAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,gBAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;iBACvB;AACH,gBAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;gBAC5B,IAAI,CAAC,KAAK,EAAE;;YAEhB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAC9B,YAAA,IAAI,IAAI,CAAC,6BAA6B,EAAE;AACpC,gBAAA,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,OAAO,CAAC;;;;AAKpD,YAAA,IAAI,IAAI,CAAC,YAAY,EAAE;gBACnB,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO;;;;IAKlE,KAAK,GAAA;AACD,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,EAAE;;AAG3C,IAAA,UAAU,CAAC,KAAc,EAAA;AACrB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;AAExB,IAAA,gBAAgB,CAAC,EAA4B,EAAA;AACzC,QAAA,IAAI,CAAC,6BAA6B,GAAG,EAAE;;AAE3C,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC5B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;;AAEvB,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAChC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU;;IAG9B,QAAQ,GAAA;QACJ,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ;QACjD,QACI,UAAU,IAAI;AACV,YAAA,OAAO,EAAE,IAAI;AAChB,SAAA;;AAIT,IAAA,yBAAyB,CAAC,KAAiB,EAAA;AACvC,QAAA,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAqB,CAAC,EAAE;YACzF,KAAK,CAAC,eAAe,EAAE;;;uGAtItB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,qPAQX,gBAAgB,CAAA,EAAA,aAAA,EAAA,CAAA,eAAA,EAAA,eAAA,EAIhB,gBAAgB,CAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAgBhB,gBAAgB,CAvCpB,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,SAAA,EAAA;YACP,kCAAkC;AAClC,YAAA;AACI,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,WAAW,EAAE,iBAAiB;AAC9B,gBAAA,KAAK,EAAE,IAAI;AACd,aAAA;SACJ,ECtCL,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,8lDAiDA,8yIDnBc,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAYhB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAjB7B,SAAS;sCACW,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,aAAa,EAAA,UAAA,EAEX,IAAI,EACP,OAAA,EAAA,CAAC,eAAe,CAAC,EACf,SAAA,EAAA;wBACP,kCAAkC;AAClC,wBAAA;AACI,4BAAA,OAAO,EAAE,aAAa;AACtB,4BAAA,WAAW,EAAmB,iBAAA;AAC9B,4BAAA,KAAK,EAAE,IAAI;AACd,yBAAA;qBACJ,EAEc,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,8lDAAA,EAAA,MAAA,EAAA,CAAA,svIAAA,CAAA,EAAA;8BAIC,YAAY,EAAA,CAAA;sBAAjD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;gBACE,YAAY,EAAA,CAAA;sBAAjD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;gBACf,SAAS,EAAA,CAAA;sBAA7B,KAAK;uBAAC,YAAY;gBACO,cAAc,EAAA,CAAA;sBAAvC,KAAK;uBAAC,iBAAiB;gBACG,eAAe,EAAA,CAAA;sBAAzC,KAAK;uBAAC,kBAAkB;gBAIzB,QAAQ,EAAA,CAAA;sBAHP,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA;gBAKG,aAAa,EAAA,CAAA;sBAHhB,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA;gBAYQ,OAAO,EAAA,CAAA;sBAAf;gBAKD,QAAQ,EAAA,CAAA;sBAHP,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA;gBAMG,IAAI,EAAA,CAAA;sBAHP,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,QAAQ,EAAE,IAAI;AACjB,qBAAA;gBAQkB,MAAM,EAAA,CAAA;sBAAxB;;;AEpFL;;AAEG;;;;"}

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

@@ -41,7 +41,7 @@ class ConfirmModalComponent {
         return confirmModal;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ConfirmModalComponent, deps: [{ token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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    <div class=\"buttons\">\n        <ap-button\n            name=\"confirm-modal-cancel-button\"\n            [config]=\"{\n                style: 'ghost',\n                color: 'grey'\n            }\"\n            [id]=\"footerCancelButtonId\"\n            (click)=\"onCancel()\">\n            <span>\n                {{ footerCancelButtonLabel }}\n            </span>\n        </ap-button>\n        <ap-button\n            name=\"confirm-modal-confirm-button\"\n            cdkFocusInitial\n            [config]=\"{\n                style: 'primary',\n                color: 'orange'\n            }\"\n            [id]=\"footerConfirmButtonId\"\n            (click)=\"onConfirm()\">\n            <span>\n                {{ footerConfirmButtonLabel }}\n            </span>\n        </ap-button>\n    </div>\n</ng-template>\n\n<ap-modal\n    [closable]=\"true\"\n    [headerTemplate]=\"headerTemplate\"\n    [mainTemplate]=\"mainTemplate\"\n    [footerTemplate]=\"footerTemplate\" />\n", styles: [".buttons{display:flex;gap:var(--ref-spacing-sm)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "ionicModalEnabled"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: ModalComponent, selector: "ap-modal", inputs: ["closable", "headerBottomBorderEnabled", "footerTemplate", "footerVisible", "headerTemplate", "headerVisible", "mainTemplate", "sidePaneTemplate", "sidePaneStyle", "containerStyle", "headerStyle", "contentStyle", "footerStyle", "defaultLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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    <div class=\"buttons\">\n        <ap-button\n            name=\"confirm-modal-cancel-button\"\n            [config]=\"{\n                style: 'ghost',\n                color: 'grey'\n            }\"\n            [id]=\"footerCancelButtonId\"\n            (click)=\"onCancel()\">\n            <span>\n                {{ footerCancelButtonLabel }}\n            </span>\n        </ap-button>\n        <ap-button\n            name=\"confirm-modal-confirm-button\"\n            cdkFocusInitial\n            [config]=\"{\n                style: 'primary',\n                color: 'orange'\n            }\"\n            [id]=\"footerConfirmButtonId\"\n            (click)=\"onConfirm()\">\n            <span>\n                {{ footerConfirmButtonLabel }}\n            </span>\n        </ap-button>\n    </div>\n</ng-template>\n\n<ap-modal\n    [closable]=\"true\"\n    [headerTemplate]=\"headerTemplate\"\n    [mainTemplate]=\"mainTemplate\"\n    [footerTemplate]=\"footerTemplate\" />\n", styles: [".buttons{display:flex;gap:var(--ref-spacing-sm)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: ModalComponent, selector: "ap-modal", inputs: ["closable", "headerBottomBorderEnabled", "footerTemplate", "footerVisible", "headerTemplate", "headerVisible", "mainTemplate", "sidePaneTemplate", "sidePaneStyle", "containerStyle", "headerStyle", "contentStyle", "footerStyle", "defaultLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ConfirmModalComponent, decorators: [{
             type: Component,

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

@@ -1 +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 { ButtonComponent } from '@agorapulse/ui-components/button';\nimport { ModalComponent, ModalConfig } from '@agorapulse/ui-components/modal';\nimport { ComponentType } from '@angular/cdk/portal';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\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    styleUrls: ['./confirm-modal.component.scss'],\n    imports: [ButtonComponent, 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 = 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    <div class=\"buttons\">\n        <ap-button\n            name=\"confirm-modal-cancel-button\"\n            [config]=\"{\n                style: 'ghost',\n                color: 'grey'\n            }\"\n            [id]=\"footerCancelButtonId\"\n            (click)=\"onCancel()\">\n            <span>\n                {{ footerCancelButtonLabel }}\n            </span>\n        </ap-button>\n        <ap-button\n            name=\"confirm-modal-confirm-button\"\n            cdkFocusInitial\n            [config]=\"{\n                style: 'primary',\n                color: 'orange'\n            }\"\n            [id]=\"footerConfirmButtonId\"\n            (click)=\"onConfirm()\">\n            <span>\n                {{ footerConfirmButtonLabel }}\n            </span>\n        </ap-button>\n    </div>\n</ng-template>\n\n<ap-modal\n    [closable]=\"true\"\n    [headerTemplate]=\"headerTemplate\"\n    [mainTemplate]=\"mainTemplate\"\n    [footerTemplate]=\"footerTemplate\" />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"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 { ButtonComponent } from '@agorapulse/ui-components/button';\nimport { ModalComponent, ModalConfig } from '@agorapulse/ui-components/modal';\nimport { ComponentType } from '@angular/cdk/portal';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\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    styleUrls: ['./confirm-modal.component.scss'],\n    imports: [ButtonComponent, 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 = 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    <div class=\"buttons\">\n        <ap-button\n            name=\"confirm-modal-cancel-button\"\n            [config]=\"{\n                style: 'ghost',\n                color: 'grey'\n            }\"\n            [id]=\"footerCancelButtonId\"\n            (click)=\"onCancel()\">\n            <span>\n                {{ footerCancelButtonLabel }}\n            </span>\n        </ap-button>\n        <ap-button\n            name=\"confirm-modal-confirm-button\"\n            cdkFocusInitial\n            [config]=\"{\n                style: 'primary',\n                color: 'orange'\n            }\"\n            [id]=\"footerConfirmButtonId\"\n            (click)=\"onConfirm()\">\n            <span>\n                {{ footerConfirmButtonLabel }}\n            </span>\n        </ap-button>\n    </div>\n</ng-template>\n\n<ap-modal\n    [closable]=\"true\"\n    [headerTemplate]=\"headerTemplate\"\n    [mainTemplate]=\"mainTemplate\"\n    [footerTemplate]=\"footerTemplate\" />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}