@agorapulse/ui-components 0.0.2 → 1.0.0-SNAPSHOT

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

@@ -0,0 +1,158 @@
+import * as i0 from '@angular/core';
+import { inject, EventEmitter, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, Output, HostListener } from '@angular/core';
+import { NgIf, CommonModule } from '@angular/common';
+import * as i1 from '@agorapulse/ui-symbol';
+import { apFacebook, apLinkedin, apLinkedinOfficial, apYoutubeOfficial, apYoutube, apInstagramOutline, apTiktokOfficial, apTiktokWhiteOfficial, apPinterestIcon, apPinterestOfficial, apXOfficial, apXWhiteOfficial, SymbolComponent } from '@agorapulse/ui-symbol';
+import { LoaderComponent } from '@agorapulse/ui-animations';
+import * as i2 from '@agorapulse/ui-components/directives';
+import { BaseButtonDirective } from '@agorapulse/ui-components/directives';
+
+class SocialButtonComponent {
+    symbolRegistry;
+    baseButtonDirective = inject(BaseButtonDirective, { self: true });
+    buttonElement;
+    ariaLabel = '';
+    disabled = false;
+    name = '';
+    loading = false;
+    network = 'facebook';
+    buttonType = 'default';
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    click = new EventEmitter();
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    focus = new EventEmitter();
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    blur = new EventEmitter();
+    symbolIdPerNetwork = {
+        facebook: {
+            default: 'facebook',
+            stroked: 'facebook-official',
+        },
+        instagram: {
+            default: 'instagram-outline',
+            stroked: 'instagram-official',
+        },
+        twitter: {
+            default: 'x-white-official',
+            stroked: 'x-official',
+        },
+        X: {
+            default: 'x-white-official',
+            stroked: 'x-official',
+        },
+        linkedin: {
+            default: 'linkedin',
+            stroked: 'linkedin-official',
+        },
+        youtube: {
+            default: 'youtube',
+            stroked: 'youtube-official',
+        },
+        tiktok: {
+            default: 'tiktok-white-official',
+            stroked: 'tiktok-official',
+        },
+        google: {
+            default: 'google-icon',
+            stroked: 'google-official',
+        },
+        microsoft: {
+            default: 'microsoft-icon',
+            stroked: 'microsoft-official',
+        },
+        googleMyBusiness: {
+            default: 'google-my-business-icon',
+            stroked: 'google-my-business-official',
+        },
+        pinterest: {
+            default: 'pinterest-icon',
+            stroked: 'pinterest-official',
+        },
+    };
+    constructor(symbolRegistry) {
+        this.symbolRegistry = symbolRegistry;
+        this.symbolRegistry.registerSymbols([
+            apFacebook,
+            apLinkedin,
+            apLinkedinOfficial,
+            apYoutubeOfficial,
+            apYoutube,
+            apInstagramOutline,
+            apTiktokOfficial,
+            apTiktokWhiteOfficial,
+            apPinterestIcon,
+            apPinterestOfficial,
+            apXOfficial,
+            apXWhiteOfficial,
+        ]);
+    }
+    focused = false;
+    onClickHandle($event) {
+        if (this.disabled || this.loading) {
+            return;
+        }
+        $event.stopImmediatePropagation();
+        this.click.emit($event);
+        this.buttonElement.nativeElement.blur();
+        this.blur.emit($event);
+    }
+    onBlurHandle($event) {
+        this.focused = false;
+        this.blur.emit($event);
+    }
+    onFocusHandle($event) {
+        this.focused = true;
+        this.focus.emit($event);
+    }
+    onSpaceKeyUp(event) {
+        if (this.focused && !this.disabled && !this.loading) {
+            event.preventDefault();
+            this.buttonElement.nativeElement.click();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SocialButtonComponent, deps: [{ token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.10", type: SocialButtonComponent, isStandalone: true, selector: "ap-social-button", inputs: { ariaLabel: "ariaLabel", disabled: ["disabled", "disabled", booleanAttribute], name: "name", loading: "loading", network: "network", buttonType: "buttonType" }, outputs: { 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: i2.BaseButtonDirective }], ngImport: i0, template: "<button\n    #button\n    role=\"button\"\n    [class.stroked]=\"buttonType === 'stroked'\"\n    [class.facebook]=\"network === 'facebook'\"\n    [class.twitter]=\"network === 'twitter'\"\n    [class.x]=\"network === 'X'\"\n    [class.instagram]=\"network === 'instagram'\"\n    [class.linkedin]=\"network === 'linkedin'\"\n    [class.youtube]=\"network === 'youtube'\"\n    [class.tiktok]=\"network === 'tiktok'\"\n    [class.microsoft]=\"network === 'microsoft'\"\n    [class.google-my-business]=\"network === 'googleMyBusiness'\"\n    [class.google]=\"network === 'google'\"\n    [class.pinterest]=\"network === 'pinterest'\"\n    [class.loading]=\"loading\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n    [attr.type]=\"baseButtonDirective.hostType\"\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    <ap-symbol\n        *ngIf=\"!loading\"\n        size=\"micro\"\n        [symbolId]=\"symbolIdPerNetwork[network][buttonType]\" />\n    <ap-loader\n        *ngIf=\"loading\"\n        [color]=\"buttonType === 'default' ? 'white' : network\"\n        [diameter]=\"16\" />\n    <ng-content select=\"span\" />\n</button>\n", styles: ["ap-social-button{display:inline-flex;position:relative}ap-social-button[disabled]{pointer-events:none}ap-social-button button{border:none;border-radius:4px;padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--comp-button-spacing);max-height:var(--comp-button-height);min-height:var(--comp-button-height);width:100%}ap-social-button button ap-loader{display:flex;justify-content:center;align-items:center}ap-social-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-social-button button.loading{pointer-events:none}ap-social-button button:disabled{pointer-events:none}@media (hover: hover){ap-social-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-social-button button span{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);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}ap-social-button button.facebook{background-color:var(--ref-color-facebook-100)}ap-social-button button.facebook span,ap-social-button button.facebook ap-symbol{color:var(--ref-color-white)}ap-social-button button.facebook:hover{background-color:#398af3}ap-social-button button.facebook:active:not(:disabled){background-color:#6ea9f7}ap-social-button button.facebook:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.facebook.loading{background-color:#6ea9f7}ap-social-button button.facebook.stroked{background:transparent;border:1px solid var(--ref-color-facebook-100)}ap-social-button button.facebook.stroked span{color:var(--ref-color-facebook-100)}ap-social-button button.facebook.stroked:hover{background:transparent;border-color:#398af3}ap-social-button button.facebook.stroked:hover span{color:#398af3}ap-social-button button.facebook.stroked:active:not(:disabled){background:transparent;border-color:#5da0f6}ap-social-button button.facebook.stroked:active:not(:disabled) span{color:#5da0f6}ap-social-button button.facebook.stroked:focus:not(:disabled):not(:active){background:transparent;border-color:var(--ref-color-facebook-100)}ap-social-button button.facebook.stroked:disabled{opacity:.2}ap-social-button button.facebook.stroked.loading{background:transparent;border-color:#5da0f6}ap-social-button button.facebook.stroked.loading span{color:#5da0f6}ap-social-button button.twitter,ap-social-button button.x{background-color:var(--ref-color-x-100)}ap-social-button button.twitter span,ap-social-button button.twitter ap-symbol,ap-social-button button.x span,ap-social-button button.x ap-symbol{color:var(--ref-color-white)}ap-social-button button.twitter:hover,ap-social-button button.x:hover{background-color:#313131}ap-social-button button.twitter:active:not(:disabled),ap-social-button button.x:active:not(:disabled){background-color:#626262}ap-social-button button.twitter:disabled,ap-social-button button.x:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.twitter.loading,ap-social-button button.x.loading{background-color:#626262}ap-social-button button.twitter.stroked,ap-social-button button.x.stroked{background:transparent;border:1px solid var(--ref-color-x-100)}ap-social-button button.twitter.stroked span,ap-social-button button.twitter.stroked ap-symbol,ap-social-button button.x.stroked span,ap-social-button button.x.stroked ap-symbol{color:var(--ref-color-x-100)}ap-social-button button.twitter.stroked:hover,ap-social-button button.x.stroked:hover{background:transparent;border-color:#313131}ap-social-button button.twitter.stroked:hover span,ap-social-button button.x.stroked:hover span{color:#313131}ap-social-button button.twitter.stroked:disabled,ap-social-button button.x.stroked:disabled{border:1px solid var(--ref-color-grey-20)}ap-social-button button.twitter.stroked:disabled ap-symbol,ap-social-button button.x.stroked:disabled ap-symbol{opacity:.2}ap-social-button button.twitter.stroked:disabled span,ap-social-button button.x.stroked:disabled span{color:var(--ref-color-grey-20)}ap-social-button button.twitter.stroked:active:not(:disabled),ap-social-button button.x.stroked:active:not(:disabled){border-color:#626262;background:transparent}ap-social-button button.twitter.stroked:active:not(:disabled) span,ap-social-button button.x.stroked:active:not(:disabled) span{color:#626262}ap-social-button button.twitter.stroked:focus:not(:disabled):not(:active),ap-social-button button.x.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-x-100);background:transparent}ap-social-button button.twitter.stroked.loading,ap-social-button button.x.stroked.loading{border-color:var(--ref-color-x-100);background:transparent}ap-social-button button.instagram{background:linear-gradient(90deg,#feda75,#fa7e1e 26.56%,#d62976 50.52%,#962fbf 73.96%,#4f5bd5)}ap-social-button button.instagram span,ap-social-button button.instagram ap-symbol{color:var(--ref-color-white)}ap-social-button button.instagram ap-symbol{box-shadow:0 0 4px #0000001f;border-radius:8px}ap-social-button button.instagram:hover{background:linear-gradient(90deg,#fee49a,#fcb178 26.56%,#dc478a 50.52%,#a942d1 73.96%,#6b75db)}ap-social-button button.instagram:active:not(:disabled){background:linear-gradient(90deg,#fff3d1,#fcb178 26.56%,#e576a8 50.52%,#bd6fdc 73.96%,#989fe6)}ap-social-button button.instagram:disabled{background:var(--ref-color-grey-20)}ap-social-button button.instagram.loading{background:linear-gradient(90deg,#fff3d1,#fcb178 26.56%,#e576a8 50.52%,#bd6fdc 73.96%,#989fe6)}ap-social-button button.instagram.stroked{background:transparent;border:solid 1px transparent;overflow:visible}ap-social-button button.instagram.stroked:after{content:\"\";position:absolute;border-radius:4px;padding:1px;background:linear-gradient(90deg,#feda75,#fa7e1e 26.56%,#d62976 50.52%,#962fbf 73.96%,#4f5bd5);inset:-.9px -1px -1px;z-index:1;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;height:calc(var(--comp-button-height) - 2px)}ap-social-button button.instagram.stroked span{background:linear-gradient(90deg,#feda75,#fa7e1e 26.56%,#d62976 50.52%,#962fbf 73.96%,#4f5bd5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;z-index:2}ap-social-button button.instagram.stroked ap-symbol{box-shadow:none;z-index:2}ap-social-button button.instagram.stroked:hover{background:transparent}ap-social-button button.instagram.stroked:hover:before{background:linear-gradient(90deg,#feda75,#fa7e1e 26.56%,#d62976 50.52%,#962fbf 73.96%,#4f5bd5)}ap-social-button button.instagram.stroked:active:not(:disabled){background:transparent}ap-social-button button.instagram.stroked:focus:not(:disabled):not(:active){background:transparent}ap-social-button button.instagram.stroked:disabled{opacity:.2}ap-social-button button.instagram.stroked.loading{background:transparent}ap-social-button button.linkedin{background-color:var(--ref-color-linkedin-100)}ap-social-button button.linkedin span,ap-social-button button.linkedin ap-symbol{color:var(--ref-color-white)}ap-social-button button.linkedin:hover{background-color:#2c78ce}ap-social-button button.linkedin:active:not(:disabled){background-color:#5795db}ap-social-button button.linkedin:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.linkedin.loading{background-color:#5795db}ap-social-button button.linkedin.stroked{background:transparent;border:1px solid var(--ref-color-linkedin-100)}ap-social-button button.linkedin.stroked span{color:var(--ref-color-linkedin-100)}ap-social-button button.linkedin.stroked:hover{background:transparent;border-color:#2c78ce}ap-social-button button.linkedin.stroked:hover span{color:#2c78ce}ap-social-button button.linkedin.stroked:active:not(:disabled){border-color:#5795db;background:transparent}ap-social-button button.linkedin.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-linkedin-100);background:transparent}ap-social-button button.linkedin.stroked:disabled{opacity:.2}ap-social-button button.linkedin.stroked.loading{border-color:var(--ref-color-linkedin-100);background:transparent}ap-social-button button.youtube{background-color:var(--ref-color-youtube-100)}ap-social-button button.youtube span,ap-social-button button.youtube ap-symbol{color:var(--ref-color-white)}ap-social-button button.youtube:hover{background-color:#f94242}ap-social-button button.youtube:active:not(:disabled){background-color:#fe5d5d}ap-social-button button.youtube:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.youtube.loading{background-color:#fe5d5d}ap-social-button button.youtube.stroked{background:transparent;border:1px solid var(--ref-color-youtube-100)}ap-social-button button.youtube.stroked span{color:var(--ref-color-youtube-100)}ap-social-button button.youtube.stroked:hover{background:transparent;border-color:#f94242}ap-social-button button.youtube.stroked:hover span{color:#f94242}ap-social-button button.youtube.stroked:active:not(:disabled){border-color:#fe5d5d;color:#fe5d5d;background:transparent}ap-social-button button.youtube.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-youtube-100);background:transparent}ap-social-button button.youtube.stroked:disabled{opacity:.2}ap-social-button button.youtube.stroked.loading{border-color:var(--ref-color-youtube-100);background:transparent}ap-social-button button.pinterest{background-color:var(--ref-color-pinterest-100)}ap-social-button button.pinterest span,ap-social-button button.pinterest ap-symbol{color:var(--ref-color-white)}ap-social-button button.pinterest:hover{background-color:#eb4242}ap-social-button button.pinterest:active:not(:disabled){background-color:#f47171}ap-social-button button.pinterest:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.pinterest.loading{background-color:#fcbbbb}ap-social-button button.pinterest.stroked{background:transparent;border:1px solid var(--ref-color-pinterest-100)}ap-social-button button.pinterest.stroked span{color:var(--ref-color-pinterest-100)}ap-social-button button.pinterest.stroked:hover{background:transparent;border-color:#eb4242}ap-social-button button.pinterest.stroked:hover span{color:#eb4242}ap-social-button button.pinterest.stroked:active:not(:disabled){border-color:#f47171;color:#f47171;background:transparent}ap-social-button button.pinterest.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-pinterest-100);background:transparent}ap-social-button button.pinterest.stroked:disabled{opacity:.2}ap-social-button button.pinterest.stroked.loading{border-color:var(--ref-color-pinterest-100);background:transparent}ap-social-button button.tiktok{background-color:var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok span,ap-social-button button.tiktok ap-symbol{color:var(--ref-color-white)}ap-social-button button.tiktok:hover{background-color:#202020}ap-social-button button.tiktok:active:not(:disabled){background-color:#2e2e2e}ap-social-button button.tiktok:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.tiktok.loading{background-color:#2e2e2e}ap-social-button button.tiktok.stroked{background:transparent;border:1px solid var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok.stroked span{color:var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok.stroked:hover{background:transparent;border-color:#202020}ap-social-button button.tiktok.stroked:hover span{color:#202020}ap-social-button button.tiktok.stroked:active:not(:disabled){border-color:#2e2e2e;background:transparent}ap-social-button button.tiktok.stroked:active:not(:disabled) span{color:#2e2e2e}ap-social-button button.tiktok.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-twitter-100--ref-color-tiktok-default-100);background:transparent}ap-social-button button.tiktok.stroked:disabled{opacity:.2}ap-social-button button.tiktok.stroked.loading{border-color:var(--ref-color-twitter-100--ref-color-tiktok-default-100);background:transparent}ap-social-button button.google,ap-social-button button.microsoft,ap-social-button button.google-my-business{background:transparent;border-width:1px;border-style:solid;color:var(--ref-color-grey-80);border-color:var(--ref-color-grey-20)}ap-social-button button.google ap-symbol,ap-social-button button.microsoft ap-symbol,ap-social-button button.google-my-business ap-symbol{color:var(--ref-color-grey-80)}ap-social-button button.google:hover,ap-social-button button.microsoft:hover,ap-social-button button.google-my-business:hover{border-color:var(--ref-color-grey-40)}ap-social-button button.google:active:not(:disabled),ap-social-button button.microsoft:active:not(:disabled),ap-social-button button.google-my-business:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-social-button button.google:focus:not(:disabled):not(:active),ap-social-button button.microsoft:focus:not(:disabled):not(:active),ap-social-button button.google-my-business:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-social-button button.google:disabled,ap-social-button button.microsoft:disabled,ap-social-button button.google-my-business:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-social-button button.google:disabled ap-symbol,ap-social-button button.microsoft:disabled ap-symbol,ap-social-button button.google-my-business:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-social-button button.google.loading,ap-social-button button.microsoft.loading,ap-social-button button.google-my-business.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-social-button button.google.loading ap-symbol,ap-social-button button.microsoft.loading ap-symbol,ap-social-button button.google-my-business.loading ap-symbol{color:var(--ref-color-grey-40)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SocialButtonComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-social-button', standalone: true, imports: [NgIf, SymbolComponent, CommonModule, LoaderComponent], providers: [], encapsulation: ViewEncapsulation.None, hostDirectives: [BaseButtonDirective], host: {
+                        '[attr.disabled]': 'disabled || null',
+                    }, template: "<button\n    #button\n    role=\"button\"\n    [class.stroked]=\"buttonType === 'stroked'\"\n    [class.facebook]=\"network === 'facebook'\"\n    [class.twitter]=\"network === 'twitter'\"\n    [class.x]=\"network === 'X'\"\n    [class.instagram]=\"network === 'instagram'\"\n    [class.linkedin]=\"network === 'linkedin'\"\n    [class.youtube]=\"network === 'youtube'\"\n    [class.tiktok]=\"network === 'tiktok'\"\n    [class.microsoft]=\"network === 'microsoft'\"\n    [class.google-my-business]=\"network === 'googleMyBusiness'\"\n    [class.google]=\"network === 'google'\"\n    [class.pinterest]=\"network === 'pinterest'\"\n    [class.loading]=\"loading\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n    [attr.type]=\"baseButtonDirective.hostType\"\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    <ap-symbol\n        *ngIf=\"!loading\"\n        size=\"micro\"\n        [symbolId]=\"symbolIdPerNetwork[network][buttonType]\" />\n    <ap-loader\n        *ngIf=\"loading\"\n        [color]=\"buttonType === 'default' ? 'white' : network\"\n        [diameter]=\"16\" />\n    <ng-content select=\"span\" />\n</button>\n", styles: ["ap-social-button{display:inline-flex;position:relative}ap-social-button[disabled]{pointer-events:none}ap-social-button button{border:none;border-radius:4px;padding:var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);position:relative;overflow:hidden;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--comp-button-spacing);max-height:var(--comp-button-height);min-height:var(--comp-button-height);width:100%}ap-social-button button ap-loader{display:flex;justify-content:center;align-items:center}ap-social-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-social-button button.loading{pointer-events:none}ap-social-button button:disabled{pointer-events:none}@media (hover: hover){ap-social-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-social-button button span{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);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}ap-social-button button.facebook{background-color:var(--ref-color-facebook-100)}ap-social-button button.facebook span,ap-social-button button.facebook ap-symbol{color:var(--ref-color-white)}ap-social-button button.facebook:hover{background-color:#398af3}ap-social-button button.facebook:active:not(:disabled){background-color:#6ea9f7}ap-social-button button.facebook:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.facebook.loading{background-color:#6ea9f7}ap-social-button button.facebook.stroked{background:transparent;border:1px solid var(--ref-color-facebook-100)}ap-social-button button.facebook.stroked span{color:var(--ref-color-facebook-100)}ap-social-button button.facebook.stroked:hover{background:transparent;border-color:#398af3}ap-social-button button.facebook.stroked:hover span{color:#398af3}ap-social-button button.facebook.stroked:active:not(:disabled){background:transparent;border-color:#5da0f6}ap-social-button button.facebook.stroked:active:not(:disabled) span{color:#5da0f6}ap-social-button button.facebook.stroked:focus:not(:disabled):not(:active){background:transparent;border-color:var(--ref-color-facebook-100)}ap-social-button button.facebook.stroked:disabled{opacity:.2}ap-social-button button.facebook.stroked.loading{background:transparent;border-color:#5da0f6}ap-social-button button.facebook.stroked.loading span{color:#5da0f6}ap-social-button button.twitter,ap-social-button button.x{background-color:var(--ref-color-x-100)}ap-social-button button.twitter span,ap-social-button button.twitter ap-symbol,ap-social-button button.x span,ap-social-button button.x ap-symbol{color:var(--ref-color-white)}ap-social-button button.twitter:hover,ap-social-button button.x:hover{background-color:#313131}ap-social-button button.twitter:active:not(:disabled),ap-social-button button.x:active:not(:disabled){background-color:#626262}ap-social-button button.twitter:disabled,ap-social-button button.x:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.twitter.loading,ap-social-button button.x.loading{background-color:#626262}ap-social-button button.twitter.stroked,ap-social-button button.x.stroked{background:transparent;border:1px solid var(--ref-color-x-100)}ap-social-button button.twitter.stroked span,ap-social-button button.twitter.stroked ap-symbol,ap-social-button button.x.stroked span,ap-social-button button.x.stroked ap-symbol{color:var(--ref-color-x-100)}ap-social-button button.twitter.stroked:hover,ap-social-button button.x.stroked:hover{background:transparent;border-color:#313131}ap-social-button button.twitter.stroked:hover span,ap-social-button button.x.stroked:hover span{color:#313131}ap-social-button button.twitter.stroked:disabled,ap-social-button button.x.stroked:disabled{border:1px solid var(--ref-color-grey-20)}ap-social-button button.twitter.stroked:disabled ap-symbol,ap-social-button button.x.stroked:disabled ap-symbol{opacity:.2}ap-social-button button.twitter.stroked:disabled span,ap-social-button button.x.stroked:disabled span{color:var(--ref-color-grey-20)}ap-social-button button.twitter.stroked:active:not(:disabled),ap-social-button button.x.stroked:active:not(:disabled){border-color:#626262;background:transparent}ap-social-button button.twitter.stroked:active:not(:disabled) span,ap-social-button button.x.stroked:active:not(:disabled) span{color:#626262}ap-social-button button.twitter.stroked:focus:not(:disabled):not(:active),ap-social-button button.x.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-x-100);background:transparent}ap-social-button button.twitter.stroked.loading,ap-social-button button.x.stroked.loading{border-color:var(--ref-color-x-100);background:transparent}ap-social-button button.instagram{background:linear-gradient(90deg,#feda75,#fa7e1e 26.56%,#d62976 50.52%,#962fbf 73.96%,#4f5bd5)}ap-social-button button.instagram span,ap-social-button button.instagram ap-symbol{color:var(--ref-color-white)}ap-social-button button.instagram ap-symbol{box-shadow:0 0 4px #0000001f;border-radius:8px}ap-social-button button.instagram:hover{background:linear-gradient(90deg,#fee49a,#fcb178 26.56%,#dc478a 50.52%,#a942d1 73.96%,#6b75db)}ap-social-button button.instagram:active:not(:disabled){background:linear-gradient(90deg,#fff3d1,#fcb178 26.56%,#e576a8 50.52%,#bd6fdc 73.96%,#989fe6)}ap-social-button button.instagram:disabled{background:var(--ref-color-grey-20)}ap-social-button button.instagram.loading{background:linear-gradient(90deg,#fff3d1,#fcb178 26.56%,#e576a8 50.52%,#bd6fdc 73.96%,#989fe6)}ap-social-button button.instagram.stroked{background:transparent;border:solid 1px transparent;overflow:visible}ap-social-button button.instagram.stroked:after{content:\"\";position:absolute;border-radius:4px;padding:1px;background:linear-gradient(90deg,#feda75,#fa7e1e 26.56%,#d62976 50.52%,#962fbf 73.96%,#4f5bd5);inset:-.9px -1px -1px;z-index:1;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;height:calc(var(--comp-button-height) - 2px)}ap-social-button button.instagram.stroked span{background:linear-gradient(90deg,#feda75,#fa7e1e 26.56%,#d62976 50.52%,#962fbf 73.96%,#4f5bd5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;z-index:2}ap-social-button button.instagram.stroked ap-symbol{box-shadow:none;z-index:2}ap-social-button button.instagram.stroked:hover{background:transparent}ap-social-button button.instagram.stroked:hover:before{background:linear-gradient(90deg,#feda75,#fa7e1e 26.56%,#d62976 50.52%,#962fbf 73.96%,#4f5bd5)}ap-social-button button.instagram.stroked:active:not(:disabled){background:transparent}ap-social-button button.instagram.stroked:focus:not(:disabled):not(:active){background:transparent}ap-social-button button.instagram.stroked:disabled{opacity:.2}ap-social-button button.instagram.stroked.loading{background:transparent}ap-social-button button.linkedin{background-color:var(--ref-color-linkedin-100)}ap-social-button button.linkedin span,ap-social-button button.linkedin ap-symbol{color:var(--ref-color-white)}ap-social-button button.linkedin:hover{background-color:#2c78ce}ap-social-button button.linkedin:active:not(:disabled){background-color:#5795db}ap-social-button button.linkedin:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.linkedin.loading{background-color:#5795db}ap-social-button button.linkedin.stroked{background:transparent;border:1px solid var(--ref-color-linkedin-100)}ap-social-button button.linkedin.stroked span{color:var(--ref-color-linkedin-100)}ap-social-button button.linkedin.stroked:hover{background:transparent;border-color:#2c78ce}ap-social-button button.linkedin.stroked:hover span{color:#2c78ce}ap-social-button button.linkedin.stroked:active:not(:disabled){border-color:#5795db;background:transparent}ap-social-button button.linkedin.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-linkedin-100);background:transparent}ap-social-button button.linkedin.stroked:disabled{opacity:.2}ap-social-button button.linkedin.stroked.loading{border-color:var(--ref-color-linkedin-100);background:transparent}ap-social-button button.youtube{background-color:var(--ref-color-youtube-100)}ap-social-button button.youtube span,ap-social-button button.youtube ap-symbol{color:var(--ref-color-white)}ap-social-button button.youtube:hover{background-color:#f94242}ap-social-button button.youtube:active:not(:disabled){background-color:#fe5d5d}ap-social-button button.youtube:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.youtube.loading{background-color:#fe5d5d}ap-social-button button.youtube.stroked{background:transparent;border:1px solid var(--ref-color-youtube-100)}ap-social-button button.youtube.stroked span{color:var(--ref-color-youtube-100)}ap-social-button button.youtube.stroked:hover{background:transparent;border-color:#f94242}ap-social-button button.youtube.stroked:hover span{color:#f94242}ap-social-button button.youtube.stroked:active:not(:disabled){border-color:#fe5d5d;color:#fe5d5d;background:transparent}ap-social-button button.youtube.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-youtube-100);background:transparent}ap-social-button button.youtube.stroked:disabled{opacity:.2}ap-social-button button.youtube.stroked.loading{border-color:var(--ref-color-youtube-100);background:transparent}ap-social-button button.pinterest{background-color:var(--ref-color-pinterest-100)}ap-social-button button.pinterest span,ap-social-button button.pinterest ap-symbol{color:var(--ref-color-white)}ap-social-button button.pinterest:hover{background-color:#eb4242}ap-social-button button.pinterest:active:not(:disabled){background-color:#f47171}ap-social-button button.pinterest:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.pinterest.loading{background-color:#fcbbbb}ap-social-button button.pinterest.stroked{background:transparent;border:1px solid var(--ref-color-pinterest-100)}ap-social-button button.pinterest.stroked span{color:var(--ref-color-pinterest-100)}ap-social-button button.pinterest.stroked:hover{background:transparent;border-color:#eb4242}ap-social-button button.pinterest.stroked:hover span{color:#eb4242}ap-social-button button.pinterest.stroked:active:not(:disabled){border-color:#f47171;color:#f47171;background:transparent}ap-social-button button.pinterest.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-pinterest-100);background:transparent}ap-social-button button.pinterest.stroked:disabled{opacity:.2}ap-social-button button.pinterest.stroked.loading{border-color:var(--ref-color-pinterest-100);background:transparent}ap-social-button button.tiktok{background-color:var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok span,ap-social-button button.tiktok ap-symbol{color:var(--ref-color-white)}ap-social-button button.tiktok:hover{background-color:#202020}ap-social-button button.tiktok:active:not(:disabled){background-color:#2e2e2e}ap-social-button button.tiktok:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.tiktok.loading{background-color:#2e2e2e}ap-social-button button.tiktok.stroked{background:transparent;border:1px solid var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok.stroked span{color:var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok.stroked:hover{background:transparent;border-color:#202020}ap-social-button button.tiktok.stroked:hover span{color:#202020}ap-social-button button.tiktok.stroked:active:not(:disabled){border-color:#2e2e2e;background:transparent}ap-social-button button.tiktok.stroked:active:not(:disabled) span{color:#2e2e2e}ap-social-button button.tiktok.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-twitter-100--ref-color-tiktok-default-100);background:transparent}ap-social-button button.tiktok.stroked:disabled{opacity:.2}ap-social-button button.tiktok.stroked.loading{border-color:var(--ref-color-twitter-100--ref-color-tiktok-default-100);background:transparent}ap-social-button button.google,ap-social-button button.microsoft,ap-social-button button.google-my-business{background:transparent;border-width:1px;border-style:solid;color:var(--ref-color-grey-80);border-color:var(--ref-color-grey-20)}ap-social-button button.google ap-symbol,ap-social-button button.microsoft ap-symbol,ap-social-button button.google-my-business ap-symbol{color:var(--ref-color-grey-80)}ap-social-button button.google:hover,ap-social-button button.microsoft:hover,ap-social-button button.google-my-business:hover{border-color:var(--ref-color-grey-40)}ap-social-button button.google:active:not(:disabled),ap-social-button button.microsoft:active:not(:disabled),ap-social-button button.google-my-business:active:not(:disabled){border-color:var(--ref-color-grey-60)}ap-social-button button.google:focus:not(:disabled):not(:active),ap-social-button button.microsoft:focus:not(:disabled):not(:active),ap-social-button button.google-my-business:focus:not(:disabled):not(:active){border-color:var(--ref-color-grey-20)}ap-social-button button.google:disabled,ap-social-button button.microsoft:disabled,ap-social-button button.google-my-business:disabled{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-20)}ap-social-button button.google:disabled ap-symbol,ap-social-button button.microsoft:disabled ap-symbol,ap-social-button button.google-my-business:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-social-button button.google.loading,ap-social-button button.microsoft.loading,ap-social-button button.google-my-business.loading{border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}ap-social-button button.google.loading ap-symbol,ap-social-button button.microsoft.loading ap-symbol,ap-social-button button.google-my-business.loading ap-symbol{color:var(--ref-color-grey-40)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.SymbolRegistry }]; }, propDecorators: { buttonElement: [{
+                type: ViewChild,
+                args: ['button']
+            }], ariaLabel: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{
+                        transform: booleanAttribute,
+                    }]
+            }], name: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], loading: [{
+                type: Input
+            }], network: [{
+                type: Input
+            }], buttonType: [{
+                type: Input
+            }], click: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], onSpaceKeyUp: [{
+                type: HostListener,
+                args: ['window:keyup.space', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SocialButtonComponent };
+//# sourceMappingURL=agorapulse-ui-components-social-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-social-button.mjs","sources":["../../../libs/ui-components/social-button/src/social-button.component.ts","../../../libs/ui-components/social-button/src/social-button.component.html","../../../libs/ui-components/social-button/src/agorapulse-ui-components-social-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';\nimport { CommonModule, NgIf } from '@angular/common';\nimport {\n    apFacebook,\n    apInstagramOutline,\n    apLinkedin,\n    apLinkedinOfficial,\n    apPinterestIcon,\n    apPinterestOfficial,\n    apTiktokOfficial,\n    apTiktokWhiteOfficial,\n    apXOfficial,\n    apXWhiteOfficial,\n    apYoutube,\n    apYoutubeOfficial,\n    SymbolComponent,\n    SymbolRegistry,\n} from '@agorapulse/ui-symbol';\nimport { LoaderComponent } from '@agorapulse/ui-animations';\nimport { BaseButtonDirective } from '@agorapulse/ui-components/directives';\n\ntype Service =\n    | 'facebook'\n    | 'instagram'\n    | 'twitter'\n    | 'linkedin'\n    | 'youtube'\n    | 'tiktok'\n    | 'google'\n    | 'googleMyBusiness'\n    | 'microsoft'\n    | 'pinterest'\n    | 'X';\ntype SocialButtonType = 'default' | 'stroked';\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-social-button',\n    styleUrls: ['./social-button.component.scss'],\n    standalone: true,\n    imports: [NgIf, SymbolComponent, CommonModule, LoaderComponent],\n    providers: [],\n    templateUrl: './social-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 SocialButtonComponent {\n    readonly baseButtonDirective: BaseButtonDirective = inject(BaseButtonDirective, { self: true });\n\n    @ViewChild('button') buttonElement!: ElementRef<HTMLButtonElement>;\n\n    @Input() ariaLabel = '';\n    @Input({\n        transform: booleanAttribute,\n    }) disabled = false;\n    @Input({\n        required: true,\n    })\n    name = '';\n    @Input() loading = false;\n    @Input() network: Service = 'facebook';\n    @Input() buttonType: SocialButtonType = 'default';\n\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    symbolIdPerNetwork: Record<Service, Record<SocialButtonType, string>> = {\n        facebook: {\n            default: 'facebook',\n            stroked: 'facebook-official',\n        },\n        instagram: {\n            default: 'instagram-outline',\n            stroked: 'instagram-official',\n        },\n        twitter: {\n            default: 'x-white-official',\n            stroked: 'x-official',\n        },\n        X: {\n            default: 'x-white-official',\n            stroked: 'x-official',\n        },\n        linkedin: {\n            default: 'linkedin',\n            stroked: 'linkedin-official',\n        },\n        youtube: {\n            default: 'youtube',\n            stroked: 'youtube-official',\n        },\n        tiktok: {\n            default: 'tiktok-white-official',\n            stroked: 'tiktok-official',\n        },\n        google: {\n            default: 'google-icon',\n            stroked: 'google-official',\n        },\n        microsoft: {\n            default: 'microsoft-icon',\n            stroked: 'microsoft-official',\n        },\n        googleMyBusiness: {\n            default: 'google-my-business-icon',\n            stroked: 'google-my-business-official',\n        },\n        pinterest: {\n            default: 'pinterest-icon',\n            stroked: 'pinterest-official',\n        },\n    };\n\n    constructor(private symbolRegistry: SymbolRegistry) {\n        this.symbolRegistry.registerSymbols([\n            apFacebook,\n            apLinkedin,\n            apLinkedinOfficial,\n            apYoutubeOfficial,\n            apYoutube,\n            apInstagramOutline,\n            apTiktokOfficial,\n            apTiktokWhiteOfficial,\n            apPinterestIcon,\n            apPinterestOfficial,\n            apXOfficial,\n            apXWhiteOfficial,\n        ]);\n    }\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    role=\"button\"\n    [class.stroked]=\"buttonType === 'stroked'\"\n    [class.facebook]=\"network === 'facebook'\"\n    [class.twitter]=\"network === 'twitter'\"\n    [class.x]=\"network === 'X'\"\n    [class.instagram]=\"network === 'instagram'\"\n    [class.linkedin]=\"network === 'linkedin'\"\n    [class.youtube]=\"network === 'youtube'\"\n    [class.tiktok]=\"network === 'tiktok'\"\n    [class.microsoft]=\"network === 'microsoft'\"\n    [class.google-my-business]=\"network === 'googleMyBusiness'\"\n    [class.google]=\"network === 'google'\"\n    [class.pinterest]=\"network === 'pinterest'\"\n    [class.loading]=\"loading\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n    [attr.type]=\"baseButtonDirective.hostType\"\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    <ap-symbol\n        *ngIf=\"!loading\"\n        size=\"micro\"\n        [symbolId]=\"symbolIdPerNetwork[network][buttonType]\" />\n    <ap-loader\n        *ngIf=\"loading\"\n        [color]=\"buttonType === 'default' ? 'white' : network\"\n        [diameter]=\"16\" />\n    <ng-content select=\"span\" />\n</button>\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-split-button.mjs

@@ -0,0 +1,136 @@
+import * as i0 from '@angular/core';
+import { inject, EventEmitter, SimpleChange, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, ContentChild, Output, HostListener } from '@angular/core';
+import { CommonModule, NgIf } from '@angular/common';
+import { SymbolRegistry, apArrowDown1, SymbolComponent } from '@agorapulse/ui-symbol';
+import * as i2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i1 from '@agorapulse/ui-components/directives';
+import { BaseButtonDirective } from '@agorapulse/ui-components/directives';
+
+class SplitButtonComponent {
+    symbolRegistry = inject(SymbolRegistry);
+    baseButtonDirective = inject(BaseButtonDirective, { self: true });
+    buttonElement;
+    ariaLabel = '';
+    disabled = false;
+    name = '';
+    config;
+    menuTrigger = null;
+    splitDisabled = false;
+    symbolPosition = 'right';
+    splitButtonDataTest = undefined;
+    splitButtonElement;
+    symbolComponent;
+    menuOpened = new EventEmitter();
+    menuClosed = new EventEmitter();
+    mainButtonClick = new EventEmitter();
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    focus = new EventEmitter();
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    blur = new EventEmitter();
+    menuOpen = false;
+    constructor() {
+        this.symbolRegistry.registerSymbols([apArrowDown1]);
+    }
+    ngAfterViewChecked() {
+        if (this.symbolComponent) {
+            this.symbolComponent.size = 'micro';
+            this.symbolComponent.ngOnChanges({
+                size: new SimpleChange(null, this.symbolComponent.size, false),
+            });
+        }
+    }
+    onSplitButtonClickHandle($event) {
+        $event.stopImmediatePropagation();
+    }
+    handleMenuOpened() {
+        this.menuOpened.emit();
+        this.menuOpen = true;
+        this.buttonElement.nativeElement.blur();
+        this.splitButtonElement.nativeElement.blur();
+    }
+    handleMenuClosed() {
+        this.menuClosed.emit();
+        this.menuOpen = false;
+        this.buttonElement.nativeElement.blur();
+        this.splitButtonElement.nativeElement.blur();
+    }
+    focused = false;
+    onClickHandle($event) {
+        if (this.disabled) {
+            return;
+        }
+        $event.stopImmediatePropagation();
+        this.mainButtonClick.emit($event);
+        this.buttonElement.nativeElement.blur();
+        this.blur.emit($event);
+    }
+    onSpaceKeyUp(event) {
+        if (this.focused) {
+            event.preventDefault();
+            this.buttonElement.nativeElement.click();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.10", type: SplitButtonComponent, isStandalone: true, selector: "ap-split-button", inputs: { ariaLabel: "ariaLabel", disabled: ["disabled", "disabled", booleanAttribute], name: "name", config: "config", menuTrigger: "menuTrigger", splitDisabled: "splitDisabled", symbolPosition: "symbolPosition", splitButtonDataTest: "splitButtonDataTest" }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed", mainButtonClick: "mainButtonClick", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "(disabled && splitDisabled)  || null" } }, providers: [], queries: [{ propertyName: "symbolComponent", first: true, predicate: SymbolComponent, descendants: true }], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true }, { propertyName: "splitButtonElement", first: true, predicate: ["splitButton"], descendants: true }], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: "<button\n    #button\n    role=\"button\"\n    [class.primary]=\"config.style === 'primary'\"\n    [class.orange]=\"config.color === 'orange'\"\n    [class.blue]=\"config.color === 'blue'\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"focus.emit($event)\"\n    (blur)=\"blur.emit($event)\">\n    <ng-content select=\"span\" />\n    <ng-content select=\"ap-symbol\" />\n</button>\n<button\n    #splitButton\n    #trigger=\"matMenuTrigger\"\n    role=\"button\"\n    [class.primary]=\"config.style === 'primary'\"\n    [class.orange]=\"config.color === 'orange'\"\n    [class.blue]=\"config.color === 'blue'\"\n    [disabled]=\"splitDisabled\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-disabled]=\"splitDisabled.toString()\"\n    [attr.data-test]=\"splitButtonDataTest ?? name + '-split'\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    (click)=\"onSplitButtonClickHandle($event)\"\n    (menuClosed)=\"handleMenuClosed()\"\n    (menuOpened)=\"handleMenuOpened()\">\n    <ap-symbol\n        symbolId=\"arrow-down-1\"\n        size=\"nano\"\n        [class.opened]=\"menuOpen\" />\n</button>\n", styles: ["ap-split-button{--loading-bar-width: 50px;display:inline-flex;gap:1px;position:relative}ap-split-button[disabled]{pointer-events:none}ap-split-button button{border:none;position:relative;padding:var(--comp-split-button-padding-horizontal) var(--comp-split-button-padding-vertical);max-height:var(--comp-button-height);min-height:var(--comp-button-height);overflow:hidden;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px}ap-split-button button.inverse{flex-direction:row-reverse}ap-split-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-split-button button:disabled{pointer-events:none}@media (hover: hover){ap-split-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px;z-index:10}}ap-split-button button span{font-size:var(--comp-split-button-text-size);font-family:var(--comp-split-button-text-font-family);line-height:var(--comp-split-button-text-line-height);font-weight:var(--comp-split-button-text-weight);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}ap-split-button button.loading{pointer-events:none}ap-split-button button.primary span,ap-split-button button.primary ap-symbol{color:var(--ref-color-white)}ap-split-button button.primary.orange{background:var(--ref-color-orange-100)}ap-split-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-split-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-split-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-split-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-split-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-split-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-split-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-split-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-split-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-split-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-split-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-split-button button:first-child{border-top-left-radius:var(--comp-split-button-border-radius);border-bottom-left-radius:var(--comp-split-button-border-radius)}ap-split-button button:last-child{border-top-right-radius:var(--comp-split-button-border-radius);border-bottom-right-radius:var(--comp-split-button-border-radius);padding:var(--comp-split-button-padding-horizontal) 10px var(--comp-split-button-padding-horizontal) 10px}ap-split-button button ap-symbol{will-change:transform;transition:.2s ease-in-out}ap-split-button button ap-symbol.opened{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SplitButtonComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-split-button', standalone: true, imports: [NgIf, SymbolComponent, CommonModule, MatMenuModule], providers: [], encapsulation: ViewEncapsulation.None, hostDirectives: [BaseButtonDirective], host: {
+                        '[attr.disabled]': '(disabled && splitDisabled)  || null',
+                    }, template: "<button\n    #button\n    role=\"button\"\n    [class.primary]=\"config.style === 'primary'\"\n    [class.orange]=\"config.color === 'orange'\"\n    [class.blue]=\"config.color === 'blue'\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"focus.emit($event)\"\n    (blur)=\"blur.emit($event)\">\n    <ng-content select=\"span\" />\n    <ng-content select=\"ap-symbol\" />\n</button>\n<button\n    #splitButton\n    #trigger=\"matMenuTrigger\"\n    role=\"button\"\n    [class.primary]=\"config.style === 'primary'\"\n    [class.orange]=\"config.color === 'orange'\"\n    [class.blue]=\"config.color === 'blue'\"\n    [disabled]=\"splitDisabled\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-disabled]=\"splitDisabled.toString()\"\n    [attr.data-test]=\"splitButtonDataTest ?? name + '-split'\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    (click)=\"onSplitButtonClickHandle($event)\"\n    (menuClosed)=\"handleMenuClosed()\"\n    (menuOpened)=\"handleMenuOpened()\">\n    <ap-symbol\n        symbolId=\"arrow-down-1\"\n        size=\"nano\"\n        [class.opened]=\"menuOpen\" />\n</button>\n", styles: ["ap-split-button{--loading-bar-width: 50px;display:inline-flex;gap:1px;position:relative}ap-split-button[disabled]{pointer-events:none}ap-split-button button{border:none;position:relative;padding:var(--comp-split-button-padding-horizontal) var(--comp-split-button-padding-vertical);max-height:var(--comp-button-height);min-height:var(--comp-button-height);overflow:hidden;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px}ap-split-button button.inverse{flex-direction:row-reverse}ap-split-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-split-button button:disabled{pointer-events:none}@media (hover: hover){ap-split-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px;z-index:10}}ap-split-button button span{font-size:var(--comp-split-button-text-size);font-family:var(--comp-split-button-text-font-family);line-height:var(--comp-split-button-text-line-height);font-weight:var(--comp-split-button-text-weight);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}ap-split-button button.loading{pointer-events:none}ap-split-button button.primary span,ap-split-button button.primary ap-symbol{color:var(--ref-color-white)}ap-split-button button.primary.orange{background:var(--ref-color-orange-100)}ap-split-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-split-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-split-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-split-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-split-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-split-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-split-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-split-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-split-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-split-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-split-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-split-button button:first-child{border-top-left-radius:var(--comp-split-button-border-radius);border-bottom-left-radius:var(--comp-split-button-border-radius)}ap-split-button button:last-child{border-top-right-radius:var(--comp-split-button-border-radius);border-bottom-right-radius:var(--comp-split-button-border-radius);padding:var(--comp-split-button-padding-horizontal) 10px var(--comp-split-button-padding-horizontal) 10px}ap-split-button button ap-symbol{will-change:transform;transition:.2s ease-in-out}ap-split-button button ap-symbol.opened{transform:rotate(180deg)}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { buttonElement: [{
+                type: ViewChild,
+                args: ['button']
+            }], ariaLabel: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{
+                        transform: booleanAttribute,
+                    }]
+            }], name: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], config: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], menuTrigger: [{
+                type: Input
+            }], splitDisabled: [{
+                type: Input
+            }], symbolPosition: [{
+                type: Input
+            }], splitButtonDataTest: [{
+                type: Input
+            }], splitButtonElement: [{
+                type: ViewChild,
+                args: ['splitButton']
+            }], symbolComponent: [{
+                type: ContentChild,
+                args: [SymbolComponent]
+            }], menuOpened: [{
+                type: Output
+            }], menuClosed: [{
+                type: Output
+            }], mainButtonClick: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], onSpaceKeyUp: [{
+                type: HostListener,
+                args: ['window:keyup.space', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SplitButtonComponent };
+//# sourceMappingURL=agorapulse-ui-components-split-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-split-button.mjs","sources":["../../../libs/ui-components/split-button/src/split-button.component.ts","../../../libs/ui-components/split-button/src/split-button.component.html","../../../libs/ui-components/split-button/src/agorapulse-ui-components-split-button.ts"],"sourcesContent":["import {\n    AfterViewChecked,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    ContentChild,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    inject,\n    Input,\n    Output,\n    SimpleChange,\n    ViewChild,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule, NgIf } from '@angular/common';\nimport { apArrowDown1, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { MatMenu } from '@angular/material/menu';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { BaseButtonDirective } from '@agorapulse/ui-components/directives';\n\ntype SplitButtonConfig = { style: 'primary'; color: 'orange' | 'blue' };\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-split-button',\n    styleUrls: ['./split-button.component.scss'],\n    standalone: true,\n    imports: [NgIf, SymbolComponent, CommonModule, MatMenuModule],\n    providers: [],\n    templateUrl: './split-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 && splitDisabled)  || null',\n    },\n})\nexport class SplitButtonComponent implements AfterViewChecked {\n    private symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\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    }) disabled: boolean = false;\n    @Input({\n        required: true,\n    })\n    name = '';\n    @Input({\n        required: true,\n    })\n    config!: SplitButtonConfig;\n    @Input() menuTrigger: MatMenu | null = null;\n    @Input() splitDisabled: boolean = false;\n    @Input() symbolPosition: 'left' | 'right' = 'right';\n    @Input() splitButtonDataTest: string | undefined = undefined;\n\n    @ViewChild('splitButton') splitButtonElement!: ElementRef<HTMLButtonElement>;\n\n    @ContentChild(SymbolComponent) symbolComponent!: SymbolComponent;\n\n    @Output() menuOpened: EventEmitter<void> = new EventEmitter();\n    @Output() menuClosed: EventEmitter<void> = new EventEmitter();\n    @Output() mainButtonClick: 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    menuOpen = false;\n\n    constructor() {\n        this.symbolRegistry.registerSymbols([apArrowDown1]);\n    }\n\n    ngAfterViewChecked(): void {\n        if (this.symbolComponent) {\n            this.symbolComponent.size = 'micro';\n            this.symbolComponent.ngOnChanges({\n                size: new SimpleChange(null, this.symbolComponent.size, false),\n            });\n        }\n    }\n\n    onSplitButtonClickHandle($event: MouseEvent): void {\n        $event.stopImmediatePropagation();\n    }\n\n    handleMenuOpened(): void {\n        this.menuOpened.emit();\n        this.menuOpen = true;\n        this.buttonElement.nativeElement.blur();\n        this.splitButtonElement.nativeElement.blur();\n    }\n\n    handleMenuClosed(): void {\n        this.menuClosed.emit();\n        this.menuOpen = false;\n        this.buttonElement.nativeElement.blur();\n        this.splitButtonElement.nativeElement.blur();\n    }\n\n    focused: boolean = false;\n\n    onClickHandle($event: MouseEvent): void {\n        if (this.disabled) {\n            return;\n        }\n        $event.stopImmediatePropagation();\n        this.mainButtonClick.emit($event);\n        this.buttonElement.nativeElement.blur();\n        this.blur.emit($event);\n    }\n\n    @HostListener('window:keyup.space', ['$event'])\n    onSpaceKeyUp(event: KeyboardEvent) {\n        if (this.focused) {\n            event.preventDefault();\n            this.buttonElement.nativeElement.click();\n        }\n    }\n}\n","<button\n    #button\n    role=\"button\"\n    [class.primary]=\"config.style === 'primary'\"\n    [class.orange]=\"config.color === 'orange'\"\n    [class.blue]=\"config.color === 'blue'\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [attr.id]=\"baseButtonDirective.hostId\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"focus.emit($event)\"\n    (blur)=\"blur.emit($event)\">\n    <ng-content select=\"span\" />\n    <ng-content select=\"ap-symbol\" />\n</button>\n<button\n    #splitButton\n    #trigger=\"matMenuTrigger\"\n    role=\"button\"\n    [class.primary]=\"config.style === 'primary'\"\n    [class.orange]=\"config.color === 'orange'\"\n    [class.blue]=\"config.color === 'blue'\"\n    [disabled]=\"splitDisabled\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-disabled]=\"splitDisabled.toString()\"\n    [attr.data-test]=\"splitButtonDataTest ?? name + '-split'\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    (click)=\"onSplitButtonClickHandle($event)\"\n    (menuClosed)=\"handleMenuClosed()\"\n    (menuOpened)=\"handleMenuOpened()\">\n    <ap-symbol\n        symbolId=\"arrow-down-1\"\n        size=\"nano\"\n        [class.opened]=\"menuOpen\" />\n</button>\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-status-card.mjs

@@ -0,0 +1,32 @@
+import { AvatarComponent } from '@agorapulse/ui-components/avatar';
+import { NgIf, NgFor } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input } from '@angular/core';
+
+class StatusCardComponent {
+    color = 'blue';
+    linkText;
+    linkUrl;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: StatusCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: StatusCardComponent, isStandalone: true, selector: "ap-status-card", inputs: { color: "color", linkText: "linkText", linkUrl: "linkUrl" }, host: { properties: { "class": "this.color" } }, ngImport: i0, template: "<div class=\"upper\">\n    <ng-content select=\"ap-symbol\"></ng-content>\n    <ng-content select=\".flow\"></ng-content>\n    <ng-container *ngIf=\"linkText && linkUrl\">\n        <a\n            rel=\"noopener noreferrer\"\n            target=\"__blank\"\n            class=\"standalone\"\n            [href]=\"linkUrl\">\n            {{ linkText }}\n        </a>\n    </ng-container>\n</div>\n<ng-content select=\"p\"></ng-content>\n", styles: ["ap-status-card{--comp-icon-size: 16px;--comp-avatar-size: 16px;--comp-border-size: 1px;container:infobox/inline-size;display:flex;flex-direction:column;box-sizing:border-box;width:100%;min-width:100%;border-bottom-style:solid;border-bottom-width:var(--comp-border-size);padding:var(--comp-status-card-padding-horizontal) var(--comp-status-card-padding-vertical) calc(var(--comp-status-card-padding-horizontal) - var(--comp-border-size)) var(--comp-status-card-padding-vertical);gap:var(--comp-status-card-spacing-vertical);container:statuscard/inline-size}ap-status-card ap-symbol{height:var(--comp-icon-size);min-height:var(--comp-icon-size);max-height:var(--comp-icon-size);width:var(--comp-icon-size);min-width:var(--comp-icon-size);max-width:var(--comp-icon-size);align-self:flex-start}ap-status-card a.standalone{align-self:flex-start}ap-status-card.blue{background-color:var(--comp-status-card-blue-background-color);border-color:var(--comp-status-card-blue-border-color)}ap-status-card.blue ap-symbol{color:var(--comp-status-card-blue-icon-color)}ap-status-card.tagOrange{background-color:var(--comp-status-card-tag-orange-background-color);border-color:var(--comp-status-card-tag-orange-border-color)}ap-status-card.tagOrange ap-symbol{color:var(--comp-status-card-tag-orange-icon-color)}ap-status-card.green{background-color:var(--comp-status-card-green-background-color);border-color:var(--comp-status-card-green-border-color)}ap-status-card.green ap-symbol{color:var(--comp-status-card-green-icon-color)}ap-status-card.orange{background-color:var(--comp-status-card-orange-background-color);border-color:var(--comp-status-card-orange-border-color)}ap-status-card.orange ap-symbol{color:var(--comp-status-card-orange-icon-color)}ap-status-card.grey{background-color:var(--comp-status-card-grey-background-color);border-color:var(--comp-status-card-grey-border-color)}ap-status-card.grey ap-symbol{color:var(--comp-status-card-grey-icon-color)}ap-status-card.red{background-color:var(--comp-status-card-red-background-color);border-color:var(--comp-status-card-red-border-color)}ap-status-card.red ap-symbol{color:var(--comp-status-card-red-icon-color)}ap-status-card .upper{display:flex;align-items:center;justify-content:space-between;gap:var(--comp-status-card-spacing-horizontal)}ap-status-card .flow{display:flex;align-items:center;gap:var(--comp-status-card-content-spacing);flex:1;flex-wrap:wrap;color:var(--comp-status-card-text-color);font-family:var(--comp-status-card-text-style-font-family);font-size:var(--comp-status-card-text-style-size);font-weight:var(--comp-status-card-text-style-font-weight);line-height:var(--comp-status-card-text-style-line-height)}ap-status-card .flow ap-avatar{height:var(--comp-avatar-size);min-height:var(--comp-avatar-size);max-height:var(--comp-avatar-size);width:var(--comp-avatar-size);min-width:var(--comp-avatar-size);max-width:var(--comp-avatar-size)}ap-status-card .flow ap-avatar img{height:var(--comp-avatar-size);min-height:var(--comp-avatar-size);max-height:var(--comp-avatar-size);width:var(--comp-avatar-size);min-width:var(--comp-avatar-size);max-width:var(--comp-avatar-size)}ap-status-card .flow span{font-family:var(--comp-status-card-user-text-style-font-family);font-size:var(--comp-status-card-user-text-style-size);font-weight:var(--comp-status-card-user-text-style-font-weight);line-height:var(--comp-status-card-user-text-style-line-height)}ap-status-card p{margin:0;color:var(--comp-status-card-text-color);font-family:var(--comp-status-card-text-style-font-family);font-size:var(--comp-status-text-style-size);font-weight:var(--comp-status-card-text-style-font-weight);font-style:italic}@container statuscard (max-width: 170px){ap-status-card ap-avatar{display:none}}@container statuscard (max-width: 130px){ap-status-card ap-symbol{display:none}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: StatusCardComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-status-card', standalone: true, imports: [NgIf, NgFor, AvatarComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"upper\">\n    <ng-content select=\"ap-symbol\"></ng-content>\n    <ng-content select=\".flow\"></ng-content>\n    <ng-container *ngIf=\"linkText && linkUrl\">\n        <a\n            rel=\"noopener noreferrer\"\n            target=\"__blank\"\n            class=\"standalone\"\n            [href]=\"linkUrl\">\n            {{ linkText }}\n        </a>\n    </ng-container>\n</div>\n<ng-content select=\"p\"></ng-content>\n", styles: ["ap-status-card{--comp-icon-size: 16px;--comp-avatar-size: 16px;--comp-border-size: 1px;container:infobox/inline-size;display:flex;flex-direction:column;box-sizing:border-box;width:100%;min-width:100%;border-bottom-style:solid;border-bottom-width:var(--comp-border-size);padding:var(--comp-status-card-padding-horizontal) var(--comp-status-card-padding-vertical) calc(var(--comp-status-card-padding-horizontal) - var(--comp-border-size)) var(--comp-status-card-padding-vertical);gap:var(--comp-status-card-spacing-vertical);container:statuscard/inline-size}ap-status-card ap-symbol{height:var(--comp-icon-size);min-height:var(--comp-icon-size);max-height:var(--comp-icon-size);width:var(--comp-icon-size);min-width:var(--comp-icon-size);max-width:var(--comp-icon-size);align-self:flex-start}ap-status-card a.standalone{align-self:flex-start}ap-status-card.blue{background-color:var(--comp-status-card-blue-background-color);border-color:var(--comp-status-card-blue-border-color)}ap-status-card.blue ap-symbol{color:var(--comp-status-card-blue-icon-color)}ap-status-card.tagOrange{background-color:var(--comp-status-card-tag-orange-background-color);border-color:var(--comp-status-card-tag-orange-border-color)}ap-status-card.tagOrange ap-symbol{color:var(--comp-status-card-tag-orange-icon-color)}ap-status-card.green{background-color:var(--comp-status-card-green-background-color);border-color:var(--comp-status-card-green-border-color)}ap-status-card.green ap-symbol{color:var(--comp-status-card-green-icon-color)}ap-status-card.orange{background-color:var(--comp-status-card-orange-background-color);border-color:var(--comp-status-card-orange-border-color)}ap-status-card.orange ap-symbol{color:var(--comp-status-card-orange-icon-color)}ap-status-card.grey{background-color:var(--comp-status-card-grey-background-color);border-color:var(--comp-status-card-grey-border-color)}ap-status-card.grey ap-symbol{color:var(--comp-status-card-grey-icon-color)}ap-status-card.red{background-color:var(--comp-status-card-red-background-color);border-color:var(--comp-status-card-red-border-color)}ap-status-card.red ap-symbol{color:var(--comp-status-card-red-icon-color)}ap-status-card .upper{display:flex;align-items:center;justify-content:space-between;gap:var(--comp-status-card-spacing-horizontal)}ap-status-card .flow{display:flex;align-items:center;gap:var(--comp-status-card-content-spacing);flex:1;flex-wrap:wrap;color:var(--comp-status-card-text-color);font-family:var(--comp-status-card-text-style-font-family);font-size:var(--comp-status-card-text-style-size);font-weight:var(--comp-status-card-text-style-font-weight);line-height:var(--comp-status-card-text-style-line-height)}ap-status-card .flow ap-avatar{height:var(--comp-avatar-size);min-height:var(--comp-avatar-size);max-height:var(--comp-avatar-size);width:var(--comp-avatar-size);min-width:var(--comp-avatar-size);max-width:var(--comp-avatar-size)}ap-status-card .flow ap-avatar img{height:var(--comp-avatar-size);min-height:var(--comp-avatar-size);max-height:var(--comp-avatar-size);width:var(--comp-avatar-size);min-width:var(--comp-avatar-size);max-width:var(--comp-avatar-size)}ap-status-card .flow span{font-family:var(--comp-status-card-user-text-style-font-family);font-size:var(--comp-status-card-user-text-style-size);font-weight:var(--comp-status-card-user-text-style-font-weight);line-height:var(--comp-status-card-user-text-style-line-height)}ap-status-card p{margin:0;color:var(--comp-status-card-text-color);font-family:var(--comp-status-card-text-style-font-family);font-size:var(--comp-status-text-style-size);font-weight:var(--comp-status-card-text-style-font-weight);font-style:italic}@container statuscard (max-width: 170px){ap-status-card ap-avatar{display:none}}@container statuscard (max-width: 130px){ap-status-card ap-symbol{display:none}}\n"] }]
+        }], propDecorators: { color: [{
+                type: HostBinding,
+                args: ['class']
+            }, {
+                type: Input
+            }], linkText: [{
+                type: Input
+            }], linkUrl: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { StatusCardComponent };
+//# sourceMappingURL=agorapulse-ui-components-status-card.mjs.map

package/fesm2022/agorapulse-ui-components-status-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-status-card.mjs","sources":["../../../libs/ui-components/status-card/src/status-card.component.ts","../../../libs/ui-components/status-card/src/status-card.component.html","../../../libs/ui-components/status-card/src/agorapulse-ui-components-status-card.ts"],"sourcesContent":["import { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { NgFor, NgIf } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';\n\nexport type StatusCardColor = 'green' | 'red' | 'tagOrange' | 'grey' | 'blue' | 'orange';\nexport type StatusCardActor = {\n    imageUrl: string;\n    name: string;\n};\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-status-card',\n    standalone: true,\n    templateUrl: './status-card.component.html',\n    imports: [NgIf, NgFor, AvatarComponent],\n    styleUrls: ['./status-card.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n})\nexport class StatusCardComponent {\n    @HostBinding('class')\n    @Input()\n    color: StatusCardColor = 'blue';\n\n    @Input() linkText?: string;\n    @Input() linkUrl?: string;\n}\n","<div class=\"upper\">\n    <ng-content select=\"ap-symbol\"></ng-content>\n    <ng-content select=\".flow\"></ng-content>\n    <ng-container *ngIf=\"linkText && linkUrl\">\n        <a\n            rel=\"noopener noreferrer\"\n            target=\"__blank\"\n            class=\"standalone\"\n            [href]=\"linkUrl\">\n            {{ linkText }}\n        </a>\n    </ng-container>\n</div>\n<ng-content select=\"p\"></ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;MAmBa,mBAAmB,CAAA;IAG5B,KAAK,GAAoB,MAAM,CAAC;AAEvB,IAAA,QAAQ,CAAU;AAClB,IAAA,OAAO,CAAU;wGANjB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;4FAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,YAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnBhC,sbAcA,EAAA,MAAA,EAAA,CAAA,qvHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDCc,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAIL,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAT/B,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,gBAAgB,EAAA,UAAA,EACd,IAAI,EAEP,OAAA,EAAA,CAAC,IAAI,EAAE,KAAK,EAAE,eAAe,CAAC,EAExB,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,sbAAA,EAAA,MAAA,EAAA,CAAA,qvHAAA,CAAA,EAAA,CAAA;8BAKrC,KAAK,EAAA,CAAA;sBAFJ,WAAW;uBAAC,OAAO,CAAA;;sBACnB,KAAK;gBAGG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,OAAO,EAAA,CAAA;sBAAf,KAAK;;;AEzBV;;AAEG;;;;"}

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

@@ -0,0 +1,29 @@
+import { NgIf } from '@angular/common';
+import * as i0 from '@angular/core';
+import { booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input } from '@angular/core';
+
+class StatusComponent {
+    color = 'blue';
+    dot = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: StatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.10", type: StatusComponent, isStandalone: true, selector: "ap-status", inputs: { color: "color", dot: ["dot", "dot", booleanAttribute] }, host: { properties: { "class": "this.color" } }, ngImport: i0, template: "<div\n    *ngIf=\"dot\"\n    class=\"dot\"></div>\n<ng-content></ng-content>\n", styles: ["ap-status{--dot-size: 8px;display:flex;align-items:center;justify-content:center;padding:0 var(--comp-status-padding-horizontal);gap:var(--comp-status-spacing);width:-moz-fit-content;width:fit-content;height:var(--comp-status-height);border-radius:var(--comp-status-height);color:var(--comp-status-color)}ap-status .dot{display:flex;width:var(--dot-size);min-width:var(--dot-size);max-width:var(--dot-size);height:var(--dot-size);min-height:var(--dot-size);max-height:var(--dot-size);border-radius:100%}ap-status.blue{background-color:var(--comp-status-blue-background-color)}ap-status.blue .dot{background-color:var(--comp-status-blue-dot-background-color)}ap-status.green{background-color:var(--comp-status-green-background-color)}ap-status.green .dot{background-color:var(--comp-status-green-dot-background-color)}ap-status.orange{background-color:var(--comp-status-orange-background-color)}ap-status.orange .dot{background-color:var(--comp-status-orange-dot-background-color)}ap-status.tagOrange{background-color:var(--comp-status-tag-orange-background-color)}ap-status.tagOrange .dot{background-color:var(--comp-status-tag-orange-dot-background-color)}ap-status.grey{background-color:var(--comp-status-grey-background-color)}ap-status.grey .dot{background-color:var(--comp-status-grey-dot-background-color)}ap-status.red{background-color:var(--comp-status-red-background-color)}ap-status.red .dot{background-color:var(--comp-status-red-dot-background-color)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: StatusComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-status', standalone: true, imports: [NgIf], encapsulation: ViewEncapsulation.None, template: "<div\n    *ngIf=\"dot\"\n    class=\"dot\"></div>\n<ng-content></ng-content>\n", styles: ["ap-status{--dot-size: 8px;display:flex;align-items:center;justify-content:center;padding:0 var(--comp-status-padding-horizontal);gap:var(--comp-status-spacing);width:-moz-fit-content;width:fit-content;height:var(--comp-status-height);border-radius:var(--comp-status-height);color:var(--comp-status-color)}ap-status .dot{display:flex;width:var(--dot-size);min-width:var(--dot-size);max-width:var(--dot-size);height:var(--dot-size);min-height:var(--dot-size);max-height:var(--dot-size);border-radius:100%}ap-status.blue{background-color:var(--comp-status-blue-background-color)}ap-status.blue .dot{background-color:var(--comp-status-blue-dot-background-color)}ap-status.green{background-color:var(--comp-status-green-background-color)}ap-status.green .dot{background-color:var(--comp-status-green-dot-background-color)}ap-status.orange{background-color:var(--comp-status-orange-background-color)}ap-status.orange .dot{background-color:var(--comp-status-orange-dot-background-color)}ap-status.tagOrange{background-color:var(--comp-status-tag-orange-background-color)}ap-status.tagOrange .dot{background-color:var(--comp-status-tag-orange-dot-background-color)}ap-status.grey{background-color:var(--comp-status-grey-background-color)}ap-status.grey .dot{background-color:var(--comp-status-grey-dot-background-color)}ap-status.red{background-color:var(--comp-status-red-background-color)}ap-status.red .dot{background-color:var(--comp-status-red-dot-background-color)}\n"] }]
+        }], propDecorators: { color: [{
+                type: HostBinding,
+                args: ['class']
+            }, {
+                type: Input
+            }], dot: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { StatusComponent };
+//# sourceMappingURL=agorapulse-ui-components-status.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-status.mjs","sources":["../../../libs/ui-components/status/src/status.component.ts","../../../libs/ui-components/status/src/status.component.html","../../../libs/ui-components/status/src/agorapulse-ui-components-status.ts"],"sourcesContent":["import { NgIf } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation, booleanAttribute } from '@angular/core';\n\nexport type StatusColor = 'blue' | 'orange' | 'grey' | 'tagOrange' | 'red' | 'green';\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-status',\n    standalone: true,\n    templateUrl: './status.component.html',\n    imports: [NgIf],\n    styleUrls: ['./status.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n})\nexport class StatusComponent {\n    @HostBinding('class')\n    @Input()\n    color: StatusColor = 'blue';\n\n    @Input({ transform: booleanAttribute }) dot: boolean = true;\n}\n","<div\n    *ngIf=\"dot\"\n    class=\"dot\"></div>\n<ng-content></ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;MAaa,eAAe,CAAA;IAGxB,KAAK,GAAgB,MAAM,CAAC;IAEY,GAAG,GAAY,IAAI,CAAC;wGALnD,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,EAKJ,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,GAAA,EAAA,CAAA,KAAA,EAAA,KAAA,EAAA,gBAAgB,CClBxC,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,YAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,gFAIA,m/CDKc,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAIL,eAAe,EAAA,UAAA,EAAA,CAAA;kBAT3B,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACrC,QAAA,EAAA,WAAW,EACT,UAAA,EAAA,IAAI,EAEP,OAAA,EAAA,CAAC,IAAI,CAAC,EAEA,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,gFAAA,EAAA,MAAA,EAAA,CAAA,27CAAA,CAAA,EAAA,CAAA;8BAKrC,KAAK,EAAA,CAAA;sBAFJ,WAAW;uBAAC,OAAO,CAAA;;sBACnB,KAAK;gBAGkC,GAAG,EAAA,CAAA;sBAA1C,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;;;AElB1C;;AAEG;;;;"}