npm - @agorapulse/ui-components - Versions diffs - 20.4.33 → 21.0.0 - Mend

@agorapulse/ui-components 20.4.33 → 21.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (155) hide show

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

@@ -15,8 +15,8 @@ class SocialButtonComponent {
     name = '';
     loading = false;
     network = 'facebook';
-    buttonType = input('default', ...(ngDevMode ? [{ debugName: "buttonType" }] : []));
-    loaderColor = computed(() => (this.buttonType() === 'default' ? 'white' : this.network), ...(ngDevMode ? [{ debugName: "loaderColor" }] : []));
+    buttonType = input('default', ...(ngDevMode ? [{ debugName: "buttonType" }] : /* istanbul ignore next */ []));
+    loaderColor = computed(() => (this.buttonType() === 'default' ? 'white' : this.network), ...(ngDevMode ? [{ debugName: "loaderColor" }] : /* istanbul ignore next */ []));
     // eslint-disable-next-line @angular-eslint/no-output-native
     click = new EventEmitter();
     // eslint-disable-next-line @angular-eslint/no-output-native
@@ -124,14 +124,14 @@ class SocialButtonComponent {
             this.buttonElement.nativeElement.click();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SocialButtonComponent, deps: [{ token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SocialButtonComponent, isStandalone: true, selector: "ap-social-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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "loading || 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.threads]=\"network === 'threads'\"\n    [class.bluesky]=\"network === 'bluesky'\"\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    @if (!loading) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolIdPerNetwork[network][buttonType()]\" />\n    }\n    @if (loading) {\n        <ap-loader\n            [color]=\"loaderColor()\"\n            [diameter]=\"16\" />\n    }\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-tiktok-default-100);background:transparent}ap-social-button button.google-my-business{background-color:var(--ref-color-google-my-business-100)}ap-social-button button.google-my-business span,ap-social-button button.google-my-business ap-symbol{color:var(--ref-color-white)}ap-social-button button.google-my-business:hover{background-color:#2c78ce}ap-social-button button.google-my-business:active:not(:disabled){background-color:#5795db}ap-social-button button.google-my-business:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.google-my-business.loading{background-color:#5795db}ap-social-button button.google-my-business.stroked{background:transparent;border:1px solid var(--ref-color-google-my-business-100)}ap-social-button button.google-my-business.stroked span{color:var(--ref-color-google-my-business-100)}ap-social-button button.google-my-business.stroked:hover{background:transparent;border-color:#2c78ce}ap-social-button button.google-my-business.stroked:hover span{color:#2c78ce}ap-social-button button.google-my-business.stroked:active:not(:disabled){border-color:#5795db;background:transparent}ap-social-button button.google-my-business.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-google-my-business-100);background:transparent}ap-social-button button.google-my-business.stroked:disabled{opacity:.2}ap-social-button button.google-my-business.stroked.loading{border-color:var(--ref-color-google-my-business-100);background:transparent}ap-social-button button.threads{background-color:var(--ref-color-threads-100)}ap-social-button button.threads span,ap-social-button button.threads ap-symbol{color:var(--ref-color-white)}ap-social-button button.threads:hover{background-color:#202020}ap-social-button button.threads:active:not(:disabled){background-color:#2e2e2e}ap-social-button button.threads:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.threads.loading{background-color:#2e2e2e}ap-social-button button.threads.stroked{background:transparent;border:1px solid var(--ref-color-threads-100)}ap-social-button button.threads.stroked span{color:var(--ref-color-threads-100)}ap-social-button button.threads.stroked:hover{background:transparent;border-color:#202020}ap-social-button button.threads.stroked:hover span{color:#202020}ap-social-button button.threads.stroked:active:not(:disabled){border-color:#2e2e2e;background:transparent}ap-social-button button.threads.stroked:active:not(:disabled) span{color:#2e2e2e}ap-social-button button.threads.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-threads-100);background:transparent}ap-social-button button.threads.stroked:disabled{opacity:.2}ap-social-button button.threads.stroked.loading{border-color:var(--ref-color-threads-100);background:transparent}ap-social-button button.bluesky{background-color:var(--ref-color-bluesky-100)}ap-social-button button.bluesky span,ap-social-button button.bluesky ap-symbol{color:var(--ref-color-white)}ap-social-button button.bluesky:hover{background-color:#3993f3}ap-social-button button.bluesky:active:not(:disabled){background-color:#6eb0f7}ap-social-button button.bluesky:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.bluesky.loading{background-color:#6eb0f7}ap-social-button button.bluesky.stroked{background:transparent;border:1px solid var(--ref-color-bluesky-100)}ap-social-button button.bluesky.stroked span{color:var(--ref-color-bluesky-100)}ap-social-button button.bluesky.stroked:hover{background:transparent;border-color:#3993f3}ap-social-button button.bluesky.stroked:hover span{color:#3993f3}ap-social-button button.bluesky.stroked:active:not(:disabled){border-color:#6eb0f7;background:transparent}ap-social-button button.bluesky.stroked:active:not(:disabled) span{color:#6eb0f7}ap-social-button button.bluesky.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-bluesky-100);background:transparent}ap-social-button button.bluesky.stroked:disabled{opacity:.2}ap-social-button button.bluesky.stroked.loading{border-color:#6eb0f7;background:transparent}ap-social-button button.google,ap-social-button button.microsoft{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{color:var(--ref-color-grey-80)}ap-social-button button.google:hover,ap-social-button button.microsoft:hover{border-color:var(--ref-color-grey-40)}ap-social-button button.google:active:not(:disabled),ap-social-button button.microsoft: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){border-color:var(--ref-color-grey-20)}ap-social-button button.google:disabled,ap-social-button button.microsoft: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{color:var(--ref-color-grey-20)}ap-social-button button.google.loading,ap-social-button button.microsoft.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{color:var(--ref-color-grey-40)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SocialButtonComponent, deps: [{ token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: SocialButtonComponent, isStandalone: true, selector: "ap-social-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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "loading || 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.threads]=\"network === 'threads'\"\n    [class.bluesky]=\"network === 'bluesky'\"\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    @if (!loading) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolIdPerNetwork[network][buttonType()]\" />\n    }\n    @if (loading) {\n        <ap-loader\n            [color]=\"loaderColor()\"\n            [diameter]=\"16\" />\n    }\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-tiktok-default-100);background:transparent}ap-social-button button.google-my-business{background-color:var(--ref-color-google-my-business-100)}ap-social-button button.google-my-business span,ap-social-button button.google-my-business ap-symbol{color:var(--ref-color-white)}ap-social-button button.google-my-business:hover{background-color:#2c78ce}ap-social-button button.google-my-business:active:not(:disabled){background-color:#5795db}ap-social-button button.google-my-business:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.google-my-business.loading{background-color:#5795db}ap-social-button button.google-my-business.stroked{background:transparent;border:1px solid var(--ref-color-google-my-business-100)}ap-social-button button.google-my-business.stroked span{color:var(--ref-color-google-my-business-100)}ap-social-button button.google-my-business.stroked:hover{background:transparent;border-color:#2c78ce}ap-social-button button.google-my-business.stroked:hover span{color:#2c78ce}ap-social-button button.google-my-business.stroked:active:not(:disabled){border-color:#5795db;background:transparent}ap-social-button button.google-my-business.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-google-my-business-100);background:transparent}ap-social-button button.google-my-business.stroked:disabled{opacity:.2}ap-social-button button.google-my-business.stroked.loading{border-color:var(--ref-color-google-my-business-100);background:transparent}ap-social-button button.threads{background-color:var(--ref-color-threads-100)}ap-social-button button.threads span,ap-social-button button.threads ap-symbol{color:var(--ref-color-white)}ap-social-button button.threads:hover{background-color:#202020}ap-social-button button.threads:active:not(:disabled){background-color:#2e2e2e}ap-social-button button.threads:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.threads.loading{background-color:#2e2e2e}ap-social-button button.threads.stroked{background:transparent;border:1px solid var(--ref-color-threads-100)}ap-social-button button.threads.stroked span{color:var(--ref-color-threads-100)}ap-social-button button.threads.stroked:hover{background:transparent;border-color:#202020}ap-social-button button.threads.stroked:hover span{color:#202020}ap-social-button button.threads.stroked:active:not(:disabled){border-color:#2e2e2e;background:transparent}ap-social-button button.threads.stroked:active:not(:disabled) span{color:#2e2e2e}ap-social-button button.threads.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-threads-100);background:transparent}ap-social-button button.threads.stroked:disabled{opacity:.2}ap-social-button button.threads.stroked.loading{border-color:var(--ref-color-threads-100);background:transparent}ap-social-button button.bluesky{background-color:var(--ref-color-bluesky-100)}ap-social-button button.bluesky span,ap-social-button button.bluesky ap-symbol{color:var(--ref-color-white)}ap-social-button button.bluesky:hover{background-color:#3993f3}ap-social-button button.bluesky:active:not(:disabled){background-color:#6eb0f7}ap-social-button button.bluesky:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.bluesky.loading{background-color:#6eb0f7}ap-social-button button.bluesky.stroked{background:transparent;border:1px solid var(--ref-color-bluesky-100)}ap-social-button button.bluesky.stroked span{color:var(--ref-color-bluesky-100)}ap-social-button button.bluesky.stroked:hover{background:transparent;border-color:#3993f3}ap-social-button button.bluesky.stroked:hover span{color:#3993f3}ap-social-button button.bluesky.stroked:active:not(:disabled){border-color:#6eb0f7;background:transparent}ap-social-button button.bluesky.stroked:active:not(:disabled) span{color:#6eb0f7}ap-social-button button.bluesky.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-bluesky-100);background:transparent}ap-social-button button.bluesky.stroked:disabled{opacity:.2}ap-social-button button.bluesky.stroked.loading{border-color:#6eb0f7;background:transparent}ap-social-button button.google,ap-social-button button.microsoft{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{color:var(--ref-color-grey-80)}ap-social-button button.google:hover,ap-social-button button.microsoft:hover{border-color:var(--ref-color-grey-40)}ap-social-button button.google:active:not(:disabled),ap-social-button button.microsoft: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){border-color:var(--ref-color-grey-20)}ap-social-button button.google:disabled,ap-social-button button.microsoft: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{color:var(--ref-color-grey-20)}ap-social-button button.google.loading,ap-social-button button.microsoft.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{color:var(--ref-color-grey-40)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { 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: "20.3.18", ngImport: i0, type: SocialButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SocialButtonComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-social-button', imports: [SymbolComponent, LoaderComponent], providers: [], encapsulation: ViewEncapsulation.None, hostDirectives: [BaseButtonDirective], host: {
                         '[attr.disabled]': 'loading || 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.threads]=\"network === 'threads'\"\n    [class.bluesky]=\"network === 'bluesky'\"\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    @if (!loading) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolIdPerNetwork[network][buttonType()]\" />\n    }\n    @if (loading) {\n        <ap-loader\n            [color]=\"loaderColor()\"\n            [diameter]=\"16\" />\n    }\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-tiktok-default-100);background:transparent}ap-social-button button.google-my-business{background-color:var(--ref-color-google-my-business-100)}ap-social-button button.google-my-business span,ap-social-button button.google-my-business ap-symbol{color:var(--ref-color-white)}ap-social-button button.google-my-business:hover{background-color:#2c78ce}ap-social-button button.google-my-business:active:not(:disabled){background-color:#5795db}ap-social-button button.google-my-business:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.google-my-business.loading{background-color:#5795db}ap-social-button button.google-my-business.stroked{background:transparent;border:1px solid var(--ref-color-google-my-business-100)}ap-social-button button.google-my-business.stroked span{color:var(--ref-color-google-my-business-100)}ap-social-button button.google-my-business.stroked:hover{background:transparent;border-color:#2c78ce}ap-social-button button.google-my-business.stroked:hover span{color:#2c78ce}ap-social-button button.google-my-business.stroked:active:not(:disabled){border-color:#5795db;background:transparent}ap-social-button button.google-my-business.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-google-my-business-100);background:transparent}ap-social-button button.google-my-business.stroked:disabled{opacity:.2}ap-social-button button.google-my-business.stroked.loading{border-color:var(--ref-color-google-my-business-100);background:transparent}ap-social-button button.threads{background-color:var(--ref-color-threads-100)}ap-social-button button.threads span,ap-social-button button.threads ap-symbol{color:var(--ref-color-white)}ap-social-button button.threads:hover{background-color:#202020}ap-social-button button.threads:active:not(:disabled){background-color:#2e2e2e}ap-social-button button.threads:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.threads.loading{background-color:#2e2e2e}ap-social-button button.threads.stroked{background:transparent;border:1px solid var(--ref-color-threads-100)}ap-social-button button.threads.stroked span{color:var(--ref-color-threads-100)}ap-social-button button.threads.stroked:hover{background:transparent;border-color:#202020}ap-social-button button.threads.stroked:hover span{color:#202020}ap-social-button button.threads.stroked:active:not(:disabled){border-color:#2e2e2e;background:transparent}ap-social-button button.threads.stroked:active:not(:disabled) span{color:#2e2e2e}ap-social-button button.threads.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-threads-100);background:transparent}ap-social-button button.threads.stroked:disabled{opacity:.2}ap-social-button button.threads.stroked.loading{border-color:var(--ref-color-threads-100);background:transparent}ap-social-button button.bluesky{background-color:var(--ref-color-bluesky-100)}ap-social-button button.bluesky span,ap-social-button button.bluesky ap-symbol{color:var(--ref-color-white)}ap-social-button button.bluesky:hover{background-color:#3993f3}ap-social-button button.bluesky:active:not(:disabled){background-color:#6eb0f7}ap-social-button button.bluesky:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.bluesky.loading{background-color:#6eb0f7}ap-social-button button.bluesky.stroked{background:transparent;border:1px solid var(--ref-color-bluesky-100)}ap-social-button button.bluesky.stroked span{color:var(--ref-color-bluesky-100)}ap-social-button button.bluesky.stroked:hover{background:transparent;border-color:#3993f3}ap-social-button button.bluesky.stroked:hover span{color:#3993f3}ap-social-button button.bluesky.stroked:active:not(:disabled){border-color:#6eb0f7;background:transparent}ap-social-button button.bluesky.stroked:active:not(:disabled) span{color:#6eb0f7}ap-social-button button.bluesky.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-bluesky-100);background:transparent}ap-social-button button.bluesky.stroked:disabled{opacity:.2}ap-social-button button.bluesky.stroked.loading{border-color:#6eb0f7;background:transparent}ap-social-button button.google,ap-social-button button.microsoft{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{color:var(--ref-color-grey-80)}ap-social-button button.google:hover,ap-social-button button.microsoft:hover{border-color:var(--ref-color-grey-40)}ap-social-button button.google:active:not(:disabled),ap-social-button button.microsoft: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){border-color:var(--ref-color-grey-20)}ap-social-button button.google:disabled,ap-social-button button.microsoft: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{color:var(--ref-color-grey-20)}ap-social-button button.google.loading,ap-social-button button.microsoft.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{color:var(--ref-color-grey-40)}\n"] }]
+                    }, 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.threads]=\"network === 'threads'\"\n    [class.bluesky]=\"network === 'bluesky'\"\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    @if (!loading) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolIdPerNetwork[network][buttonType()]\" />\n    }\n    @if (loading) {\n        <ap-loader\n            [color]=\"loaderColor()\"\n            [diameter]=\"16\" />\n    }\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-tiktok-default-100);background:transparent}ap-social-button button.google-my-business{background-color:var(--ref-color-google-my-business-100)}ap-social-button button.google-my-business span,ap-social-button button.google-my-business ap-symbol{color:var(--ref-color-white)}ap-social-button button.google-my-business:hover{background-color:#2c78ce}ap-social-button button.google-my-business:active:not(:disabled){background-color:#5795db}ap-social-button button.google-my-business:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.google-my-business.loading{background-color:#5795db}ap-social-button button.google-my-business.stroked{background:transparent;border:1px solid var(--ref-color-google-my-business-100)}ap-social-button button.google-my-business.stroked span{color:var(--ref-color-google-my-business-100)}ap-social-button button.google-my-business.stroked:hover{background:transparent;border-color:#2c78ce}ap-social-button button.google-my-business.stroked:hover span{color:#2c78ce}ap-social-button button.google-my-business.stroked:active:not(:disabled){border-color:#5795db;background:transparent}ap-social-button button.google-my-business.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-google-my-business-100);background:transparent}ap-social-button button.google-my-business.stroked:disabled{opacity:.2}ap-social-button button.google-my-business.stroked.loading{border-color:var(--ref-color-google-my-business-100);background:transparent}ap-social-button button.threads{background-color:var(--ref-color-threads-100)}ap-social-button button.threads span,ap-social-button button.threads ap-symbol{color:var(--ref-color-white)}ap-social-button button.threads:hover{background-color:#202020}ap-social-button button.threads:active:not(:disabled){background-color:#2e2e2e}ap-social-button button.threads:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.threads.loading{background-color:#2e2e2e}ap-social-button button.threads.stroked{background:transparent;border:1px solid var(--ref-color-threads-100)}ap-social-button button.threads.stroked span{color:var(--ref-color-threads-100)}ap-social-button button.threads.stroked:hover{background:transparent;border-color:#202020}ap-social-button button.threads.stroked:hover span{color:#202020}ap-social-button button.threads.stroked:active:not(:disabled){border-color:#2e2e2e;background:transparent}ap-social-button button.threads.stroked:active:not(:disabled) span{color:#2e2e2e}ap-social-button button.threads.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-threads-100);background:transparent}ap-social-button button.threads.stroked:disabled{opacity:.2}ap-social-button button.threads.stroked.loading{border-color:var(--ref-color-threads-100);background:transparent}ap-social-button button.bluesky{background-color:var(--ref-color-bluesky-100)}ap-social-button button.bluesky span,ap-social-button button.bluesky ap-symbol{color:var(--ref-color-white)}ap-social-button button.bluesky:hover{background-color:#3993f3}ap-social-button button.bluesky:active:not(:disabled){background-color:#6eb0f7}ap-social-button button.bluesky:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.bluesky.loading{background-color:#6eb0f7}ap-social-button button.bluesky.stroked{background:transparent;border:1px solid var(--ref-color-bluesky-100)}ap-social-button button.bluesky.stroked span{color:var(--ref-color-bluesky-100)}ap-social-button button.bluesky.stroked:hover{background:transparent;border-color:#3993f3}ap-social-button button.bluesky.stroked:hover span{color:#3993f3}ap-social-button button.bluesky.stroked:active:not(:disabled){border-color:#6eb0f7;background:transparent}ap-social-button button.bluesky.stroked:active:not(:disabled) span{color:#6eb0f7}ap-social-button button.bluesky.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-bluesky-100);background:transparent}ap-social-button button.bluesky.stroked:disabled{opacity:.2}ap-social-button button.bluesky.stroked.loading{border-color:#6eb0f7;background:transparent}ap-social-button button.google,ap-social-button button.microsoft{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{color:var(--ref-color-grey-80)}ap-social-button button.google:hover,ap-social-button button.microsoft:hover{border-color:var(--ref-color-grey-40)}ap-social-button button.google:active:not(:disabled),ap-social-button button.microsoft: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){border-color:var(--ref-color-grey-20)}ap-social-button button.google:disabled,ap-social-button button.microsoft: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{color:var(--ref-color-grey-20)}ap-social-button button.google.loading,ap-social-button button.microsoft.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{color:var(--ref-color-grey-40)}\n"] }]
         }], ctorParameters: () => [{ type: i1.SymbolRegistry }], propDecorators: { buttonElement: [{
                 type: ViewChild,
                 args: ['button']

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

	@@ -1 +1 @@
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 computed,\n ElementRef,\n EventEmitter,\n HostListener,\n inject,\n input,\n Input,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { LoaderComponent, NetworkLoaderColor } from '@agorapulse/ui-animations';\nimport { BaseButtonDirective } from '@agorapulse/ui-components/directives';\nimport {\n apBluesky,\n apBlueskyOfficial,\n apFacebook,\n apGoogleMyBusinessIcon,\n apGoogleMyBusinessOfficial,\n apInstagramOutline,\n apLinkedin,\n apLinkedinOfficial,\n apPinterestIcon,\n apPinterestOfficial,\n apThreadsOfficial,\n apThreadsWhiteOfficial,\n apTiktokOfficial,\n apTiktokWhiteOfficial,\n apXOfficial,\n apXWhiteOfficial,\n apYoutube,\n apYoutubeOfficial,\n SymbolComponent,\n SymbolRegistry,\n} from '@agorapulse/ui-symbol';\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'\n \| 'threads'\n \| 'bluesky';\ntype SocialButtonType = 'default' \| 'stroked';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-social-button',\n styleUrls: ['./social-button.component.scss'],\n imports: [SymbolComponent, LoaderComponent],\n providers: [],\n templateUrl: './social-button.component.html',\n encapsulation: ViewEncapsulation.None,\n hostDirectives: [BaseButtonDirective],\n host: {\n '[attr.disabled]': 'loading \|\| 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 })\n disabled = false;\n @Input({\n required: true,\n })\n name = '';\n @Input() loading = false;\n @Input() network: Service = 'facebook';\n buttonType = input<SocialButtonType>('default');\n\n loaderColor = computed(() => (this.buttonType() === 'default' ? 'white' : (this.network as NetworkLoaderColor)));\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 threads: {\n default: 'threads-white-official',\n stroked: 'threads-official',\n },\n bluesky: {\n default: 'bluesky',\n stroked: 'bluesky-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 apGoogleMyBusinessIcon,\n apGoogleMyBusinessOfficial,\n apThreadsOfficial,\n apThreadsWhiteOfficial,\n apBluesky,\n apBlueskyOfficial,\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.threads]=\"network === 'threads'\"\n [class.bluesky]=\"network === 'bluesky'\"\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 @if (!loading) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolIdPerNetwork[network][buttonType()]\" />\n }\n @if (loading) {\n <ap-loader\n [color]=\"loaderColor()\"\n [diameter]=\"16\" />\n }\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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"}
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 computed,\n ElementRef,\n EventEmitter,\n HostListener,\n inject,\n input,\n Input,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { LoaderComponent, NetworkLoaderColor } from '@agorapulse/ui-animations';\nimport { BaseButtonDirective } from '@agorapulse/ui-components/directives';\nimport {\n apBluesky,\n apBlueskyOfficial,\n apFacebook,\n apGoogleMyBusinessIcon,\n apGoogleMyBusinessOfficial,\n apInstagramOutline,\n apLinkedin,\n apLinkedinOfficial,\n apPinterestIcon,\n apPinterestOfficial,\n apThreadsOfficial,\n apThreadsWhiteOfficial,\n apTiktokOfficial,\n apTiktokWhiteOfficial,\n apXOfficial,\n apXWhiteOfficial,\n apYoutube,\n apYoutubeOfficial,\n SymbolComponent,\n SymbolRegistry,\n} from '@agorapulse/ui-symbol';\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'\n \| 'threads'\n \| 'bluesky';\ntype SocialButtonType = 'default' \| 'stroked';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-social-button',\n styleUrls: ['./social-button.component.scss'],\n imports: [SymbolComponent, LoaderComponent],\n providers: [],\n templateUrl: './social-button.component.html',\n encapsulation: ViewEncapsulation.None,\n hostDirectives: [BaseButtonDirective],\n host: {\n '[attr.disabled]': 'loading \|\| 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 })\n disabled = false;\n @Input({\n required: true,\n })\n name = '';\n @Input() loading = false;\n @Input() network: Service = 'facebook';\n buttonType = input<SocialButtonType>('default');\n\n loaderColor = computed(() => (this.buttonType() === 'default' ? 'white' : (this.network as NetworkLoaderColor)));\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 threads: {\n default: 'threads-white-official',\n stroked: 'threads-official',\n },\n bluesky: {\n default: 'bluesky',\n stroked: 'bluesky-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 apGoogleMyBusinessIcon,\n apGoogleMyBusinessOfficial,\n apThreadsOfficial,\n apThreadsWhiteOfficial,\n apBluesky,\n apBlueskyOfficial,\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: Event) {\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.threads]=\"network === 'threads'\"\n [class.bluesky]=\"network === 'bluesky'\"\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 @if (!loading) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolIdPerNetwork[network][buttonType()]\" />\n }\n @if (loading) {\n <ap-loader\n [color]=\"loaderColor()\"\n [diameter]=\"16\" />\n }\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 CHANGED Viewed

@@ -12,16 +12,16 @@ let id = 1;
 class SplitButtonComponent {
     symbolRegistry = inject(SymbolRegistry);
     baseButtonDirective = inject(BaseButtonDirective, { self: true });
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    config = input({ style: 'primary', color: 'orange' }, ...(ngDevMode ? [{ debugName: "config" }] : []));
-    actionDropdownTrigger = input(...(ngDevMode ? [undefined, { debugName: "actionDropdownTrigger" }] : []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    config = input({ style: 'primary', color: 'orange' }, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    actionDropdownTrigger = input(...(ngDevMode ? [undefined, { debugName: "actionDropdownTrigger" }] : /* istanbul ignore next */ []));
     /** @deprecated use actionDropdownTrigger instead */
-    menuTrigger = input(null, ...(ngDevMode ? [{ debugName: "menuTrigger" }] : []));
-    splitDisabled = input(false, ...(ngDevMode ? [{ debugName: "splitDisabled" }] : []));
-    symbolPosition = input('right', ...(ngDevMode ? [{ debugName: "symbolPosition" }] : []));
-    splitButtonDataTest = input(undefined, ...(ngDevMode ? [{ debugName: "splitButtonDataTest" }] : []));
-    symbolId = input(...(ngDevMode ? [undefined, { debugName: "symbolId" }] : []));
-    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+    menuTrigger = input(null, ...(ngDevMode ? [{ debugName: "menuTrigger" }] : /* istanbul ignore next */ []));
+    splitDisabled = input(false, ...(ngDevMode ? [{ debugName: "splitDisabled" }] : /* istanbul ignore next */ []));
+    symbolPosition = input('right', ...(ngDevMode ? [{ debugName: "symbolPosition" }] : /* istanbul ignore next */ []));
+    splitButtonDataTest = input(undefined, ...(ngDevMode ? [{ debugName: "splitButtonDataTest" }] : /* istanbul ignore next */ []));
+    symbolId = input(...(ngDevMode ? [undefined, { debugName: "symbolId" }] : /* istanbul ignore next */ []));
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
     menuOpened = output();
     menuClosed = output();
     mainButtonClick = output();
@@ -31,7 +31,7 @@ class SplitButtonComponent {
     blur = output();
     buttonElement = viewChild.required('button');
     splitButtonElement = viewChild.required('splitButton');
-    symbolComponent = contentChild(SymbolComponent, ...(ngDevMode ? [{ debugName: "symbolComponent" }] : []));
+    symbolComponent = contentChild(SymbolComponent, ...(ngDevMode ? [{ debugName: "symbolComponent" }] : /* istanbul ignore next */ []));
     id;
     menuOpen = false;
     constructor() {
@@ -78,14 +78,14 @@ class SplitButtonComponent {
             this.buttonElement().nativeElement.click();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SplitButtonComponent, isStandalone: true, selector: "ap-split-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, actionDropdownTrigger: { classPropertyName: "actionDropdownTrigger", publicName: "actionDropdownTrigger", isSignal: true, isRequired: false, transformFunction: null }, menuTrigger: { classPropertyName: "menuTrigger", publicName: "menuTrigger", isSignal: true, isRequired: false, transformFunction: null }, splitDisabled: { classPropertyName: "splitDisabled", publicName: "splitDisabled", isSignal: true, isRequired: false, transformFunction: null }, symbolPosition: { classPropertyName: "symbolPosition", publicName: "symbolPosition", isSignal: true, isRequired: false, transformFunction: null }, splitButtonDataTest: { classPropertyName: "splitButtonDataTest", publicName: "splitButtonDataTest", isSignal: true, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed", mainButtonClick: "mainButtonClick", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "(disabled() && splitDisabled())  || null" } }, queries: [{ propertyName: "symbolComponent", first: true, predicate: SymbolComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, isSignal: true }, { propertyName: "splitButtonElement", first: true, predicate: ["splitButton"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: "<button\n    #button\n    type=\"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    [id]=\"id\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"focus.emit($event)\"\n    (blur)=\"blur.emit($event)\">\n    <ng-content select=\"span\" />\n    @if (symbolId()) {\n        <ap-symbol [symbolId]=\"symbolId()\" />\n    } @else {\n        <ng-content select=\"ap-symbol\" />\n    }\n</button>\n<button\n    #splitButton\n    type=\"button\"\n    [class.primary]=\"config().style === 'primary'\"\n    [class.orange]=\"config().color === 'orange'\"\n    [class.blue]=\"config().color === 'blue'\"\n    [disabled]=\"splitDisabled()\"\n    [id]=\"id + '-split'\"\n    [attr.aria-labelledby]=\"id + '-split ' + id\"\n    [attr.data-test]=\"splitButtonDataTest() ?? name() + '-split'\"\n    [apActionDropdownTrigger]=\"actionDropdownTrigger()\"\n    [matMenuTriggerFor]=\"menuTrigger()\"\n    (click)=\"onSplitButtonClickHandle($event)\"\n    (menuClosed)=\"handleMenuClosed()\"\n    (menuOpened)=\"handleMenuOpened()\">\n    <ap-symbol\n        symbolId=\"chevron-down\"\n        size=\"sm\"\n        [class.opened]=\"menuOpen\" />\n    <span class=\"visually-hidden\">Toggle</span>\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 ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}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)}.visually-hidden{width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;position:absolute!important}\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"] }, { kind: "directive", type: ActionDropdownTriggerDirective, selector: "[apActionDropdownTrigger]", inputs: ["apActionDropdownTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: SplitButtonComponent, isStandalone: true, selector: "ap-split-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, actionDropdownTrigger: { classPropertyName: "actionDropdownTrigger", publicName: "actionDropdownTrigger", isSignal: true, isRequired: false, transformFunction: null }, menuTrigger: { classPropertyName: "menuTrigger", publicName: "menuTrigger", isSignal: true, isRequired: false, transformFunction: null }, splitDisabled: { classPropertyName: "splitDisabled", publicName: "splitDisabled", isSignal: true, isRequired: false, transformFunction: null }, symbolPosition: { classPropertyName: "symbolPosition", publicName: "symbolPosition", isSignal: true, isRequired: false, transformFunction: null }, splitButtonDataTest: { classPropertyName: "splitButtonDataTest", publicName: "splitButtonDataTest", isSignal: true, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed", mainButtonClick: "mainButtonClick", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "(disabled() && splitDisabled())  || null" } }, queries: [{ propertyName: "symbolComponent", first: true, predicate: SymbolComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, isSignal: true }, { propertyName: "splitButtonElement", first: true, predicate: ["splitButton"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: "<button\n    #button\n    type=\"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    [id]=\"id\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"focus.emit($event)\"\n    (blur)=\"blur.emit($event)\">\n    <ng-content select=\"span\" />\n    @if (symbolId()) {\n        <ap-symbol [symbolId]=\"symbolId()\" />\n    } @else {\n        <ng-content select=\"ap-symbol\" />\n    }\n</button>\n<button\n    #splitButton\n    type=\"button\"\n    [class.primary]=\"config().style === 'primary'\"\n    [class.orange]=\"config().color === 'orange'\"\n    [class.blue]=\"config().color === 'blue'\"\n    [disabled]=\"splitDisabled()\"\n    [id]=\"id + '-split'\"\n    [attr.aria-labelledby]=\"id + '-split ' + id\"\n    [attr.data-test]=\"splitButtonDataTest() ?? name() + '-split'\"\n    [apActionDropdownTrigger]=\"actionDropdownTrigger()\"\n    [matMenuTriggerFor]=\"menuTrigger()\"\n    (click)=\"onSplitButtonClickHandle($event)\"\n    (menuClosed)=\"handleMenuClosed()\"\n    (menuOpened)=\"handleMenuOpened()\">\n    <ap-symbol\n        symbolId=\"chevron-down\"\n        size=\"sm\"\n        [class.opened]=\"menuOpen\" />\n    <span class=\"visually-hidden\">Toggle</span>\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 ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}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)}.visually-hidden{width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;position:absolute!important}\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"] }, { kind: "directive", type: ActionDropdownTriggerDirective, selector: "[apActionDropdownTrigger]", inputs: ["apActionDropdownTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SplitButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-split-button', imports: [SymbolComponent, MatMenuModule, ActionDropdownTriggerDirective], encapsulation: ViewEncapsulation.None, hostDirectives: [BaseButtonDirective], host: {
                         '[attr.disabled]': '(disabled() && splitDisabled())  || null',
-                    }, template: "<button\n    #button\n    type=\"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    [id]=\"id\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"focus.emit($event)\"\n    (blur)=\"blur.emit($event)\">\n    <ng-content select=\"span\" />\n    @if (symbolId()) {\n        <ap-symbol [symbolId]=\"symbolId()\" />\n    } @else {\n        <ng-content select=\"ap-symbol\" />\n    }\n</button>\n<button\n    #splitButton\n    type=\"button\"\n    [class.primary]=\"config().style === 'primary'\"\n    [class.orange]=\"config().color === 'orange'\"\n    [class.blue]=\"config().color === 'blue'\"\n    [disabled]=\"splitDisabled()\"\n    [id]=\"id + '-split'\"\n    [attr.aria-labelledby]=\"id + '-split ' + id\"\n    [attr.data-test]=\"splitButtonDataTest() ?? name() + '-split'\"\n    [apActionDropdownTrigger]=\"actionDropdownTrigger()\"\n    [matMenuTriggerFor]=\"menuTrigger()\"\n    (click)=\"onSplitButtonClickHandle($event)\"\n    (menuClosed)=\"handleMenuClosed()\"\n    (menuOpened)=\"handleMenuOpened()\">\n    <ap-symbol\n        symbolId=\"chevron-down\"\n        size=\"sm\"\n        [class.opened]=\"menuOpen\" />\n    <span class=\"visually-hidden\">Toggle</span>\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 ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}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)}.visually-hidden{width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;position:absolute!important}\n"] }]
+                    }, template: "<button\n    #button\n    type=\"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    [id]=\"id\"\n    [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n    (click)=\"onClickHandle($event)\"\n    (focus)=\"focus.emit($event)\"\n    (blur)=\"blur.emit($event)\">\n    <ng-content select=\"span\" />\n    @if (symbolId()) {\n        <ap-symbol [symbolId]=\"symbolId()\" />\n    } @else {\n        <ng-content select=\"ap-symbol\" />\n    }\n</button>\n<button\n    #splitButton\n    type=\"button\"\n    [class.primary]=\"config().style === 'primary'\"\n    [class.orange]=\"config().color === 'orange'\"\n    [class.blue]=\"config().color === 'blue'\"\n    [disabled]=\"splitDisabled()\"\n    [id]=\"id + '-split'\"\n    [attr.aria-labelledby]=\"id + '-split ' + id\"\n    [attr.data-test]=\"splitButtonDataTest() ?? name() + '-split'\"\n    [apActionDropdownTrigger]=\"actionDropdownTrigger()\"\n    [matMenuTriggerFor]=\"menuTrigger()\"\n    (click)=\"onSplitButtonClickHandle($event)\"\n    (menuClosed)=\"handleMenuClosed()\"\n    (menuOpened)=\"handleMenuOpened()\">\n    <ap-symbol\n        symbolId=\"chevron-down\"\n        size=\"sm\"\n        [class.opened]=\"menuOpen\" />\n    <span class=\"visually-hidden\">Toggle</span>\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 ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}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)}.visually-hidden{width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;position:absolute!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], actionDropdownTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionDropdownTrigger", required: false }] }], menuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTrigger", required: false }] }], splitDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "splitDisabled", required: false }] }], symbolPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolPosition", required: false }] }], splitButtonDataTest: [{ type: i0.Input, args: [{ isSignal: true, alias: "splitButtonDataTest", required: false }] }], symbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }], mainButtonClick: [{ type: i0.Output, args: ["mainButtonClick"] }], focus: [{ type: i0.Output, args: ["focus"] }], blur: [{ type: i0.Output, args: ["blur"] }], buttonElement: [{ type: i0.ViewChild, args: ['button', { isSignal: true }] }], splitButtonElement: [{ type: i0.ViewChild, args: ['splitButton', { isSignal: true }] }], symbolComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SymbolComponent), { isSignal: true }] }], onSpaceKeyUp: [{
                 type: HostListener,
                 args: ['window:keyup.space', ['$event']]

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

	@@ -1 +1 @@
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 { ActionDropdownComponent, ActionDropdownTriggerDirective } from '@agorapulse/ui-components';\nimport { BaseButtonDirective } from '@agorapulse/ui-components/directives';\nimport { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { agorapulseSymbol, apChevronDown, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport {\n AfterViewInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n contentChild,\n effect,\n ElementRef,\n HostListener,\n inject,\n input,\n output,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { MatMenu, MatMenuModule } from '@angular/material/menu';\n\ntype SplitButtonConfig = { style: 'primary'; color: 'orange' \| 'blue' };\n\nlet id = 1;\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-split-button',\n styleUrls: ['./split-button.component.scss'],\n imports: [SymbolComponent, MatMenuModule, ActionDropdownTriggerDirective],\n templateUrl: './split-button.component.html',\n encapsulation: ViewEncapsulation.None,\n hostDirectives: [BaseButtonDirective],\n host: {\n '[attr.disabled]': '(disabled() && splitDisabled()) \|\| null',\n },\n})\nexport class SplitButtonComponent implements AfterViewInit {\n private symbolRegistry = inject(SymbolRegistry);\n readonly baseButtonDirective = inject(BaseButtonDirective, { self: true });\n\n disabled = input(false, { transform: booleanAttribute });\n config = input<SplitButtonConfig>({ style: 'primary', color: 'orange' });\n actionDropdownTrigger = input<ActionDropdownComponent>();\n /** @deprecated use actionDropdownTrigger instead /\n menuTrigger = input<MatMenu \| null>(null);\n splitDisabled = input(false);\n symbolPosition = input<'left' \| 'right'>('right');\n splitButtonDataTest = input<string \| undefined>(undefined);\n symbolId = input<agorapulseSymbol>();\n name = input<string>();\n\n menuOpened = output<void>();\n menuClosed = output<void>();\n mainButtonClick = output<MouseEvent>();\n // eslint-disable-next-line @angular-eslint/no-output-native\n focus = output<FocusEvent>();\n // eslint-disable-next-line @angular-eslint/no-output-native\n blur = output<FocusEvent>();\n\n buttonElement = viewChild.required<ElementRef<HTMLButtonElement>>('button');\n splitButtonElement = viewChild.required<ElementRef<HTMLButtonElement>>('splitButton');\n symbolComponent = contentChild(SymbolComponent);\n\n id!: string;\n menuOpen = false;\n\n constructor() {\n this.symbolRegistry.registerSymbols([apChevronDown]);\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n effect(() => {\n const symbolComp = this.symbolComponent();\n if (symbolComp) {\n symbolComp.size.set('sm');\n }\n });\n }\n\n ngAfterViewInit() {\n this.id = this.baseButtonDirective.hostId ?? `ap-split-button-${id++}`;\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 type=\"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 [id]=\"id\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n (click)=\"onClickHandle($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\">\n <ng-content select=\"span\" />\n @if (symbolId()) {\n <ap-symbol [symbolId]=\"symbolId()\" />\n } @else {\n <ng-content select=\"ap-symbol\" />\n }\n</button>\n<button\n #splitButton\n type=\"button\"\n [class.primary]=\"config().style === 'primary'\"\n [class.orange]=\"config().color === 'orange'\"\n [class.blue]=\"config().color === 'blue'\"\n [disabled]=\"splitDisabled()\"\n [id]=\"id + '-split'\"\n [attr.aria-labelledby]=\"id + '-split ' + id\"\n [attr.data-test]=\"splitButtonDataTest() ?? name() + '-split'\"\n [apActionDropdownTrigger]=\"actionDropdownTrigger()\"\n [matMenuTriggerFor]=\"menuTrigger()\"\n (click)=\"onSplitButtonClickHandle($event)\"\n (menuClosed)=\"handleMenuClosed()\"\n (menuOpened)=\"handleMenuOpened()\">\n <ap-symbol\n symbolId=\"chevron-down\"\n size=\"sm\"\n [class.opened]=\"menuOpen\" />\n <span class=\"visually-hidden\">Toggle</span>\n</button>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;;;;;;AAuBA,IAAI,EAAE,GAAG,CAAC;MAcG,oBAAoB,CAAA;AACrB,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;IACtC,mBAAmB,GAAG,MAAM,CAAC,mBAAmB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAE1E,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,4CAAI,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;AACxD,IAAA,MAAM,GAAG,KAAK,CAAoB,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,kDAAC;IACxE,qBAAqB,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,uBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAA2B;;AAExD,IAAA,WAAW,GAAG,KAAK,CAAiB,IAAI,uDAAC;AACzC,IAAA,aAAa,GAAG,KAAK,CAAC,KAAK,yDAAC;AAC5B,IAAA,cAAc,GAAG,KAAK,CAAmB,OAAO,0DAAC;AACjD,IAAA,mBAAmB,GAAG,KAAK,CAAqB,SAAS,+DAAC;IAC1D,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAoB;IACpC,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;IAEtB,UAAU,GAAG,MAAM,EAAQ;IAC3B,UAAU,GAAG,MAAM,EAAQ;IAC3B,eAAe,GAAG,MAAM,EAAc;;IAEtC,KAAK,GAAG,MAAM,EAAc;;IAE5B,IAAI,GAAG,MAAM,EAAc;AAE3B,IAAA,aAAa,GAAG,SAAS,CAAC,QAAQ,CAAgC,QAAQ,CAAC;AAC3E,IAAA,kBAAkB,GAAG,SAAS,CAAC,QAAQ,CAAgC,aAAa,CAAC;AACrF,IAAA,eAAe,GAAG,YAAY,CAAC,eAAe,2DAAC;AAE/C,IAAA,EAAE;IACF,QAAQ,GAAG,KAAK;AAEhB,IAAA,WAAA,GAAA;QACI,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;QACpD,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,IAAI,MAAM,CAAC,qBAAqB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QAErG,MAAM,CAAC,MAAK;AACR,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE;YACzC,IAAI,UAAU,EAAE;AACZ,gBAAA,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;YAC7B;AACJ,QAAA,CAAC,CAAC;IACN;IAEA,eAAe,GAAA;AACX,QAAA,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,mBAAmB,CAAC,MAAM,IAAI,CAAA,gBAAA,EAAmB,EAAE,EAAE,EAAE;IAC1E;AAEA,IAAA,wBAAwB,CAAC,MAAkB,EAAA;QACvC,MAAM,CAAC,wBAAwB,EAAE;IACrC;IAEA,gBAAgB,GAAA;AACZ,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;QACpB,IAAI,CAAC,aAAa,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE;QACzC,IAAI,CAAC,kBAAkB,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE;IAClD;IAEA,gBAAgB,GAAA;AACZ,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;QACrB,IAAI,CAAC,aAAa,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE;QACzC,IAAI,CAAC,kBAAkB,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE;IAClD;IAEA,OAAO,GAAY,KAAK;AAExB,IAAA,aAAa,CAAC,MAAkB,EAAA;AAC5B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACjB;QACJ;QACA,MAAM,CAAC,wBAAwB,EAAE;AACjC,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,aAAa,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE;AACzC,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IAC1B;AAGA,IAAA,YAAY,CAAC,KAAoB,EAAA;AAC7B,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,aAAa,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE;QAC9C;IACJ;wGAlFS,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,qBAAA,EAAA,EAAA,iBAAA,EAAA,uBAAA,EAAA,UAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,mBAAA,EAAA,EAAA,iBAAA,EAAA,qBAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,eAAA,EAAA,iBAAA,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,0CAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAyBE,eAAe,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,eAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,QAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,oBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9DlD,68CA0CA,2uGDbc,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,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,8BAA8B,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FAQ/D,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAZhC,SAAS;sCACW,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,iBAAiB,WAElB,CAAC,eAAe,EAAE,aAAa,EAAE,8BAA8B,CAAC,EAAA,aAAA,EAE1D,iBAAiB,CAAC,IAAI,kBACrB,CAAC,mBAAmB,CAAC,EAAA,IAAA,EAC/B;AACF,wBAAA,iBAAiB,EAAE,0CAA0C;AAChE,qBAAA,EAAA,QAAA,EAAA,68CAAA,EAAA,MAAA,EAAA,CAAA,mrGAAA,CAAA,EAAA;sxCAyBiE,QAAQ,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,kBAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CACH,aAAa,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,MACrD,eAAe,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA;sBAmD7C,YAAY;uBAAC,oBAAoB,EAAE,CAAC,QAAQ,CAAC;;;AEjHlD;;AAEG;;;;"}
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 { ActionDropdownComponent, ActionDropdownTriggerDirective } from '@agorapulse/ui-components';\nimport { BaseButtonDirective } from '@agorapulse/ui-components/directives';\nimport { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { agorapulseSymbol, apChevronDown, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport {\n AfterViewInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n contentChild,\n effect,\n ElementRef,\n HostListener,\n inject,\n input,\n output,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { MatMenu, MatMenuModule } from '@angular/material/menu';\n\ntype SplitButtonConfig = { style: 'primary'; color: 'orange' \| 'blue' };\n\nlet id = 1;\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-split-button',\n styleUrls: ['./split-button.component.scss'],\n imports: [SymbolComponent, MatMenuModule, ActionDropdownTriggerDirective],\n templateUrl: './split-button.component.html',\n encapsulation: ViewEncapsulation.None,\n hostDirectives: [BaseButtonDirective],\n host: {\n '[attr.disabled]': '(disabled() && splitDisabled()) \|\| null',\n },\n})\nexport class SplitButtonComponent implements AfterViewInit {\n private symbolRegistry = inject(SymbolRegistry);\n readonly baseButtonDirective = inject(BaseButtonDirective, { self: true });\n\n disabled = input(false, { transform: booleanAttribute });\n config = input<SplitButtonConfig>({ style: 'primary', color: 'orange' });\n actionDropdownTrigger = input<ActionDropdownComponent>();\n /** @deprecated use actionDropdownTrigger instead /\n menuTrigger = input<MatMenu \| null>(null);\n splitDisabled = input(false);\n symbolPosition = input<'left' \| 'right'>('right');\n splitButtonDataTest = input<string \| undefined>(undefined);\n symbolId = input<agorapulseSymbol>();\n name = input<string>();\n\n menuOpened = output<void>();\n menuClosed = output<void>();\n mainButtonClick = output<MouseEvent>();\n // eslint-disable-next-line @angular-eslint/no-output-native\n focus = output<FocusEvent>();\n // eslint-disable-next-line @angular-eslint/no-output-native\n blur = output<FocusEvent>();\n\n buttonElement = viewChild.required<ElementRef<HTMLButtonElement>>('button');\n splitButtonElement = viewChild.required<ElementRef<HTMLButtonElement>>('splitButton');\n symbolComponent = contentChild(SymbolComponent);\n\n id!: string;\n menuOpen = false;\n\n constructor() {\n this.symbolRegistry.registerSymbols([apChevronDown]);\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n effect(() => {\n const symbolComp = this.symbolComponent();\n if (symbolComp) {\n symbolComp.size.set('sm');\n }\n });\n }\n\n ngAfterViewInit() {\n this.id = this.baseButtonDirective.hostId ?? `ap-split-button-${id++}`;\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: Event) {\n if (this.focused) {\n event.preventDefault();\n this.buttonElement().nativeElement.click();\n }\n }\n}\n","<button\n #button\n type=\"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 [id]=\"id\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name()\"\n (click)=\"onClickHandle($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\">\n <ng-content select=\"span\" />\n @if (symbolId()) {\n <ap-symbol [symbolId]=\"symbolId()\" />\n } @else {\n <ng-content select=\"ap-symbol\" />\n }\n</button>\n<button\n #splitButton\n type=\"button\"\n [class.primary]=\"config().style === 'primary'\"\n [class.orange]=\"config().color === 'orange'\"\n [class.blue]=\"config().color === 'blue'\"\n [disabled]=\"splitDisabled()\"\n [id]=\"id + '-split'\"\n [attr.aria-labelledby]=\"id + '-split ' + id\"\n [attr.data-test]=\"splitButtonDataTest() ?? name() + '-split'\"\n [apActionDropdownTrigger]=\"actionDropdownTrigger()\"\n [matMenuTriggerFor]=\"menuTrigger()\"\n (click)=\"onSplitButtonClickHandle($event)\"\n (menuClosed)=\"handleMenuClosed()\"\n (menuOpened)=\"handleMenuOpened()\">\n <ap-symbol\n symbolId=\"chevron-down\"\n size=\"sm\"\n [class.opened]=\"menuOpen\" />\n <span class=\"visually-hidden\">Toggle</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-status-card.mjs CHANGED Viewed

@@ -5,10 +5,10 @@ class StatusCardComponent {
     color = 'blue';
     linkText;
     linkUrl;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: StatusCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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\" />\n    <ng-content select=\".flow\">Status card text</ng-content>\n    @if (linkText && linkUrl) {\n        <a\n            rel=\"noopener noreferrer\"\n            target=\"__blank\"\n            class=\"standalone small\"\n            [href]=\"linkUrl\">\n            {{ linkText }}\n        </a>\n    }\n</div>\n<ng-content select=\"p\" />\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StatusCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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\" />\n    <ng-content select=\".flow\">Status card text</ng-content>\n    @if (linkText && linkUrl) {\n        <a\n            rel=\"noopener noreferrer\"\n            target=\"__blank\"\n            class=\"standalone small\"\n            [href]=\"linkUrl\">\n            {{ linkText }}\n        </a>\n    }\n</div>\n<ng-content select=\"p\" />\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: StatusCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StatusCardComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-status-card', standalone: true, encapsulation: ViewEncapsulation.None, template: "<div class=\"upper\">\n    <ng-content select=\"ap-symbol\" />\n    <ng-content select=\".flow\">Status card text</ng-content>\n    @if (linkText && linkUrl) {\n        <a\n            rel=\"noopener noreferrer\"\n            target=\"__blank\"\n            class=\"standalone small\"\n            [href]=\"linkUrl\">\n            {{ linkText }}\n        </a>\n    }\n</div>\n<ng-content select=\"p\" />\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: [{

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

@@ -4,10 +4,10 @@ import { booleanAttribute, Input, HostBinding, ViewEncapsulation, ChangeDetectio
 class StatusComponent {
     color = 'blue';
     dot = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: StatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: StatusComponent, isStandalone: true, selector: "ap-status", inputs: { color: "color", dot: ["dot", "dot", booleanAttribute] }, host: { properties: { "class": "this.color" } }, ngImport: i0, template: "@if (dot) {\n    <div class=\"dot\"></div>\n}\n<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:fit-content;height:var(--comp-status-height);border-radius:var(--comp-status-height);color:var(--comp-status-color);font-family:var(--comp-status-font-family);font-size:var(--comp-status-font-size);line-height:var(--comp-status-line-height)}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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StatusComponent, isStandalone: true, selector: "ap-status", inputs: { color: "color", dot: ["dot", "dot", booleanAttribute] }, host: { properties: { "class": "this.color" } }, ngImport: i0, template: "@if (dot) {\n    <div class=\"dot\"></div>\n}\n<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:fit-content;height:var(--comp-status-height);border-radius:var(--comp-status-height);color:var(--comp-status-color);font-family:var(--comp-status-font-family);font-size:var(--comp-status-font-size);line-height:var(--comp-status-line-height)}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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: StatusComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StatusComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-status', imports: [], encapsulation: ViewEncapsulation.None, template: "@if (dot) {\n    <div class=\"dot\"></div>\n}\n<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:fit-content;height:var(--comp-status-height);border-radius:var(--comp-status-height);color:var(--comp-status-color);font-family:var(--comp-status-font-family);font-size:var(--comp-status-font-size);line-height:var(--comp-status-line-height)}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: [{