@agorapulse/ui-components 15.0.20 → 15.0.21
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.
- package/agorapulse-ui-components-15.0.21.tgz +0 -0
- package/button/button.component.d.ts +8 -14
- package/directives/base-button.directive.d.ts +22 -0
- package/directives/public_api.d.ts +1 -0
- package/esm2020/add-comment/add-comment.component.mjs +1 -1
- package/esm2020/button/button.component.mjs +20 -35
- package/esm2020/confirm-modal/confirm-modal.component.mjs +2 -2
- package/esm2020/directives/base-button.directive.mjs +76 -0
- package/esm2020/directives/public_api.mjs +2 -1
- package/esm2020/icon-button/icon-button.component.mjs +23 -9
- package/esm2020/paginator/paginator-button/paginator-button.component.mjs +1 -1
- package/esm2020/social-button/social-button.component.mjs +19 -24
- package/esm2020/split-button/split-button.component.mjs +22 -36
- package/fesm2015/agorapulse-ui-components-add-comment.mjs +1 -1
- package/fesm2015/agorapulse-ui-components-add-comment.mjs.map +1 -1
- package/fesm2015/agorapulse-ui-components-button.mjs +19 -34
- package/fesm2015/agorapulse-ui-components-button.mjs.map +1 -1
- package/fesm2015/agorapulse-ui-components-confirm-modal.mjs +1 -1
- package/fesm2015/agorapulse-ui-components-confirm-modal.mjs.map +1 -1
- package/fesm2015/agorapulse-ui-components-directives.mjs +76 -2
- package/fesm2015/agorapulse-ui-components-directives.mjs.map +1 -1
- package/fesm2015/agorapulse-ui-components-icon-button.mjs +22 -8
- package/fesm2015/agorapulse-ui-components-icon-button.mjs.map +1 -1
- package/fesm2015/agorapulse-ui-components-paginator.mjs +1 -1
- package/fesm2015/agorapulse-ui-components-paginator.mjs.map +1 -1
- package/fesm2015/agorapulse-ui-components-social-button.mjs +18 -23
- package/fesm2015/agorapulse-ui-components-social-button.mjs.map +1 -1
- package/fesm2015/agorapulse-ui-components-split-button.mjs +21 -35
- package/fesm2015/agorapulse-ui-components-split-button.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-components-add-comment.mjs +1 -1
- package/fesm2020/agorapulse-ui-components-add-comment.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-components-button.mjs +19 -34
- package/fesm2020/agorapulse-ui-components-button.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-components-confirm-modal.mjs +1 -1
- package/fesm2020/agorapulse-ui-components-confirm-modal.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-components-directives.mjs +76 -2
- package/fesm2020/agorapulse-ui-components-directives.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-components-icon-button.mjs +22 -8
- package/fesm2020/agorapulse-ui-components-icon-button.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-components-paginator.mjs +1 -1
- package/fesm2020/agorapulse-ui-components-paginator.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-components-social-button.mjs +18 -23
- package/fesm2020/agorapulse-ui-components-social-button.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-components-split-button.mjs +21 -35
- package/fesm2020/agorapulse-ui-components-split-button.mjs.map +1 -1
- package/icon-button/icon-button.component.d.ts +6 -3
- package/package.json +1 -1
- package/social-button/social-button.component.d.ts +7 -10
- package/split-button/split-button.component.d.ts +7 -11
- package/agorapulse-ui-components-15.0.20.tgz +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ViewChild } from '@angular/core';
|
|
2
|
+
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ViewChild, HostListener } from '@angular/core';
|
|
3
3
|
import { NgIf, CommonModule } from '@angular/common';
|
|
4
4
|
import * as i1 from '@agorapulse/ui-symbol';
|
|
5
5
|
import { apPremiumStar, SymbolComponent } from '@agorapulse/ui-symbol';
|
|
@@ -40,25 +40,36 @@ class IconButtonComponent {
|
|
|
40
40
|
this.onBlur = new EventEmitter();
|
|
41
41
|
this._loading = false;
|
|
42
42
|
this._locked = false;
|
|
43
|
+
this.focused = false;
|
|
43
44
|
this.symbolRegistry.registerSymbols([apPremiumStar]);
|
|
44
45
|
this.hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');
|
|
45
46
|
}
|
|
46
|
-
ngAfterContentInit() {
|
|
47
|
-
if (this.symbolComponent) {
|
|
48
|
-
this.symbolComponent.size = 'micro';
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
47
|
onClickHandle($event) {
|
|
48
|
+
$event.stopImmediatePropagation();
|
|
52
49
|
this.buttonElement.nativeElement.blur();
|
|
53
50
|
this.onClick.emit($event);
|
|
54
51
|
this.onFocus.emit($event);
|
|
55
52
|
}
|
|
53
|
+
onBlurHandle($event) {
|
|
54
|
+
this.focused = false;
|
|
55
|
+
this.onBlur.emit($event);
|
|
56
|
+
}
|
|
57
|
+
onFocusHandle($event) {
|
|
58
|
+
this.focused = true;
|
|
59
|
+
this.onFocus.emit($event);
|
|
60
|
+
}
|
|
61
|
+
onSpaceKeyUp(event) {
|
|
62
|
+
if (this.focused) {
|
|
63
|
+
event.preventDefault();
|
|
64
|
+
this.buttonElement.nativeElement.click();
|
|
65
|
+
}
|
|
66
|
+
}
|
|
56
67
|
}
|
|
57
68
|
IconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconButtonComponent, deps: [{ token: i1.SymbolRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
58
|
-
IconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: IconButtonComponent, isStandalone: true, selector: "ap-icon-button", inputs: { ariaLabel: "ariaLabel", name: "name", color: "color", disabled: "disabled", locked: "locked", loading: "loading", type: "type" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, queries: [{ propertyName: "symbolComponent", first: true, predicate: SymbolComponent, descendants: true }], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<button\n #button\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClickHandle($event)\"\n (
|
|
69
|
+
IconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: IconButtonComponent, isStandalone: true, selector: "ap-icon-button", inputs: { ariaLabel: "ariaLabel", name: "name", color: "color", disabled: "disabled", locked: "locked", loading: "loading", type: "type" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" } }, queries: [{ propertyName: "symbolComponent", first: true, predicate: SymbolComponent, descendants: true }], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<button\n #button\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClickHandle($event)\"\n (blur)=\"onBlurHandle($event)\"\n (focus)=\"onFocusHandle($event)\">\n <ng-content *ngIf=\"!loading\"> </ng-content>\n <ap-loader *ngIf=\"loading\" color=\"white\" [diameter]=\"16\"></ap-loader>\n <div *ngIf=\"locked\" class=\"locked-symbol\">\n <ap-symbol symbolId=\"premium-star\" size=\"micro\"> </ap-symbol>\n </div>\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button button.icon-button{margin:0;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;display:block;position:relative;transition:border .25s;padding:var(--comp-icon-button-padding)}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:inline-flex;justify-content:center;align-items:center;width:100%;height:100%;padding:0;margin:0;color:var(--ref-color-grey-60)}ap-icon-button button.icon-button ap-symbol .svg{display:inline-flex!important;justify-content:center;align-items:center}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:white}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AgorapulseUiAnimationsModule }, { kind: "component", type: i2.LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
59
70
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
60
71
|
type: Component,
|
|
61
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-icon-button', standalone: true, imports: [NgIf, SymbolComponent, CommonModule, AgorapulseUiAnimationsModule], encapsulation: ViewEncapsulation.None, template: "<button\n #button\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClickHandle($event)\"\n (
|
|
72
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-icon-button', standalone: true, imports: [NgIf, SymbolComponent, CommonModule, AgorapulseUiAnimationsModule], encapsulation: ViewEncapsulation.None, template: "<button\n #button\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClickHandle($event)\"\n (blur)=\"onBlurHandle($event)\"\n (focus)=\"onFocusHandle($event)\">\n <ng-content *ngIf=\"!loading\"> </ng-content>\n <ap-loader *ngIf=\"loading\" color=\"white\" [diameter]=\"16\"></ap-loader>\n <div *ngIf=\"locked\" class=\"locked-symbol\">\n <ap-symbol symbolId=\"premium-star\" size=\"micro\"> </ap-symbol>\n </div>\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button button.icon-button{margin:0;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;display:block;position:relative;transition:border .25s;padding:var(--comp-icon-button-padding)}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:inline-flex;justify-content:center;align-items:center;width:100%;height:100%;padding:0;margin:0;color:var(--ref-color-grey-60)}ap-icon-button button.icon-button ap-symbol .svg{display:inline-flex!important;justify-content:center;align-items:center}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:white}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"] }]
|
|
62
73
|
}], ctorParameters: function () { return [{ type: i1.SymbolRegistry }, { type: i0.ElementRef }]; }, propDecorators: { ariaLabel: [{
|
|
63
74
|
type: Input
|
|
64
75
|
}], name: [{
|
|
@@ -85,6 +96,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
|
|
|
85
96
|
}], buttonElement: [{
|
|
86
97
|
type: ViewChild,
|
|
87
98
|
args: ['button']
|
|
99
|
+
}], onSpaceKeyUp: [{
|
|
100
|
+
type: HostListener,
|
|
101
|
+
args: ['window:keyup.space', ['$event']]
|
|
88
102
|
}] } });
|
|
89
103
|
|
|
90
104
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-icon-button.mjs","sources":["../../../libs/ui-components/icon-button/src/icon-button.component.ts","../../../libs/ui-components/icon-button/src/icon-button.component.html","../../../libs/ui-components/icon-button/src/agorapulse-ui-components-icon-button.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n Input,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport {CommonModule, NgIf} from '@angular/common';\nimport {apPremiumStar, SymbolComponent, SymbolRegistry} from '@agorapulse/ui-symbol';\nimport {AgorapulseUiAnimationsModule} from '@agorapulse/ui-animations';\n\nexport type ButtonType = 'flat' | 'stroked-transparent' | 'stroked';\nexport type ButtonColor = 'none' | 'blue' | 'red' | 'green';\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-icon-button',\n styleUrls: ['./icon-button.component.scss'],\n standalone: true,\n imports: [NgIf, SymbolComponent, CommonModule, AgorapulseUiAnimationsModule],\n templateUrl: './icon-button.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class IconButtonComponent
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-icon-button.mjs","sources":["../../../libs/ui-components/icon-button/src/icon-button.component.ts","../../../libs/ui-components/icon-button/src/icon-button.component.html","../../../libs/ui-components/icon-button/src/agorapulse-ui-components-icon-button.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport {CommonModule, NgIf} from '@angular/common';\nimport {apPremiumStar, SymbolComponent, SymbolRegistry} from '@agorapulse/ui-symbol';\nimport {AgorapulseUiAnimationsModule} from '@agorapulse/ui-animations';\n\nexport type ButtonType = 'flat' | 'stroked-transparent' | 'stroked';\nexport type ButtonColor = 'none' | 'blue' | 'red' | 'green';\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-icon-button',\n styleUrls: ['./icon-button.component.scss'],\n standalone: true,\n imports: [NgIf, SymbolComponent, CommonModule, AgorapulseUiAnimationsModule],\n templateUrl: './icon-button.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class IconButtonComponent {\n @Input() ariaLabel: string;\n @Input() name: string;\n @Input() color: ButtonColor = 'none';\n @Input() disabled: boolean = false;\n @Input() set locked(locked: boolean) {\n this._locked = locked;\n if (locked) {\n this.color = 'none';\n this.disabled = false;\n this.loading = false;\n }\n }\n\n get locked(): boolean {\n return this._locked;\n }\n @Input() set loading(loading: boolean) {\n if (!this.locked) {\n this._loading = loading;\n }\n }\n\n get loading(): boolean {\n return this._loading;\n }\n @Input() type: ButtonType = 'flat';\n\n // eslint-disable-next-line\n @Output() onClick: EventEmitter<MouseEvent> = new EventEmitter();\n\n // eslint-disable-next-line\n @Output() onFocus: EventEmitter<FocusEvent> = new EventEmitter();\n\n // eslint-disable-next-line\n @Output() onBlur: EventEmitter<FocusEvent> = new EventEmitter();\n\n @ContentChild(SymbolComponent) symbolComponent: SymbolComponent;\n\n @ViewChild('button') buttonElement: ElementRef<HTMLButtonElement>;\n\n private _loading: boolean = false;\n private _locked: boolean = false;\n hostDataTest: string;\n focused: boolean = false;\n\n constructor(private symbolRegistry: SymbolRegistry, private elementRef: ElementRef) {\n this.symbolRegistry.registerSymbols([apPremiumStar]);\n this.hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');\n }\n\n onClickHandle($event: MouseEvent): void {\n $event.stopImmediatePropagation();\n this.buttonElement.nativeElement.blur();\n this.onClick.emit($event);\n this.onFocus.emit($event);\n }\n\n onBlurHandle($event: FocusEvent): void {\n this.focused = false;\n this.onBlur.emit($event);\n }\n\n onFocusHandle($event: FocusEvent): void {\n this.focused = true;\n this.onFocus.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 class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClickHandle($event)\"\n (blur)=\"onBlurHandle($event)\"\n (focus)=\"onFocusHandle($event)\">\n <ng-content *ngIf=\"!loading\"> </ng-content>\n <ap-loader *ngIf=\"loading\" color=\"white\" [diameter]=\"16\"></ap-loader>\n <div *ngIf=\"locked\" class=\"locked-symbol\">\n <ap-symbol symbolId=\"premium-star\" size=\"micro\"> </ap-symbol>\n </div>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ class PaginatorButtonComponent {
|
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
PaginatorButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: PaginatorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17
|
-
PaginatorButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: PaginatorButtonComponent, isStandalone: true, selector: "ap-paginator-button", inputs: { pageIndex: "pageIndex", selectedPageIndex: "selectedPageIndex" }, outputs: { selectPage: "selectPage" }, ngImport: i0, template: "<ap-button class=\"square\"\n [name]=\"'paginator-button-' + pageIndex\"\n [config]=\"{\n style: 'primary',\n color: selectedPageIndex === pageIndex ? 'orange' : undefined\n }\"\n (click)=\" selectPage.emit(pageIndex)\">\n {{pageIndex + 1}}\n</ap-button>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}button.mat-flat-button{color:#178dfe}button.mat-flat-button:not(.mat-accent):not([disabled]):hover{background-color:#e8f4ff}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button[name]", inputs: ["ariaLabel", "
|
|
17
|
+
PaginatorButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: PaginatorButtonComponent, isStandalone: true, selector: "ap-paginator-button", inputs: { pageIndex: "pageIndex", selectedPageIndex: "selectedPageIndex" }, outputs: { selectPage: "selectPage" }, ngImport: i0, template: "<ap-button class=\"square\"\n [name]=\"'paginator-button-' + pageIndex\"\n [config]=\"{\n style: 'primary',\n color: selectedPageIndex === pageIndex ? 'orange' : undefined\n }\"\n (click)=\" selectPage.emit(pageIndex)\">\n {{pageIndex + 1}}\n</ap-button>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}button.mat-flat-button{color:#178dfe}button.mat-flat-button:not(.mat-accent):not([disabled]):hover{background-color:#e8f4ff}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button[name]", inputs: ["ariaLabel", "disabled", "name", "config", "loading", "locked", "menuTrigger", "symbolPosition"], outputs: ["menuOpened", "menuClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
18
18
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: PaginatorButtonComponent, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
20
|
args: [{ selector: 'ap-paginator-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-paginator.mjs","sources":["../../../libs/ui-components/paginator/src/paginator-button/paginator-button.component.ts","../../../libs/ui-components/paginator/src/paginator-button/paginator-button.component.html","../../../libs/ui-components/paginator/src/paginator.component.ts","../../../libs/ui-components/paginator/src/paginator.component.html","../../../libs/ui-components/paginator/src/agorapulse-ui-components-paginator.ts"],"sourcesContent":["import { ButtonComponent } from '@agorapulse/ui-components/button';\nimport {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';\n\n@Component({\n selector: 'ap-paginator-button',\n templateUrl: './paginator-button.component.html',\n styleUrls: ['./paginator-button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n ButtonComponent\n ],\n standalone: true,\n})\nexport class PaginatorButtonComponent {\n @Input() pageIndex = 0;\n @Input() selectedPageIndex = 0;\n\n @Output() selectPage = new EventEmitter<number>();\n}\n","<ap-button class=\"square\"\n [name]=\"'paginator-button-' + pageIndex\"\n [config]=\"{\n style: 'primary',\n color: selectedPageIndex === pageIndex ? 'orange' : undefined\n }\"\n (click)=\" selectPage.emit(pageIndex)\">\n {{pageIndex + 1}}\n</ap-button>\n","import {AgorapulseUiSymbolModule, apArrowLeft1, apArrowRight1, SymbolRegistry} from '@agorapulse/ui-symbol';\nimport {NgForOf, NgIf} from '@angular/common';\nimport {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from '@angular/core';\nimport {PaginatorButtonComponent} from './paginator-button/paginator-button.component';\nimport {IconButtonComponent} from \"@agorapulse/ui-components/icon-button\";\nimport {ButtonComponent} from \"@agorapulse/ui-components/button\";\n\n@Component({\n selector: 'ap-paginator',\n templateUrl: './paginator.component.html',\n styleUrls: ['./paginator.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [AgorapulseUiSymbolModule, ButtonComponent, NgIf, PaginatorButtonComponent, NgForOf, IconButtonComponent],\n standalone: true,\n})\nexport class PaginatorComponent implements OnChanges {\n @Input() itemCount = 0;\n @Input() itemCountPerPage = 10;\n @Input() edgeSize = 5;\n @Input() middleSize = 3;\n\n @Input() currentPageIndex = 0;\n @Output() currentPageIndexChange = new EventEmitter<number>();\n\n public pageCount = 0;\n public firstPageDisplayed = true;\n public lastPageDisplayed = true;\n\n constructor(public symbolRegistry: SymbolRegistry) {\n this.symbolRegistry.registerSymbols([\n apArrowLeft1,\n apArrowRight1\n ]);\n }\n\n ngOnChanges(changes: SimpleChanges) {\n // make sure middle size is an odd number\n if (changes.middleSize && this.middleSize % 2 === 0) {\n this.middleSize++;\n }\n if ((this.itemCountPerPage && (changes.itemCount || changes.itemCountPerPage)) || changes.currentPageIndex) {\n this.pageCount = Math.ceil(this.itemCount / this.itemCountPerPage);\n // make sure page index is between min and max page index\n this.currentPageIndex = Math.max(0, Math.min(this.pageCount - 1, this.currentPageIndex));\n this.firstPageDisplayed = this.currentPageIndex === 0;\n this.lastPageDisplayed = this.currentPageIndex === this.pageCount - 1;\n }\n }\n\n onSelectPage(pageIndex: number): void {\n this.currentPageIndexChange.emit(pageIndex);\n }\n}\n","<div class=\"item-index-overview\">\n {{(currentPageIndex * itemCountPerPage) + 1}}\n -{{lastPageDisplayed ? itemCount : (currentPageIndex + 1) * itemCountPerPage}}\n of {{itemCount}}\n</div>\n\n<div class=\"pages\">\n <ap-icon-button\n ariaLabel=\"Select Previous Page button\"\n name=\"select-previous-page-button\"\n color=\"none\"\n [disabled]=\"firstPageDisplayed\"\n (onClick)=\"onSelectPage(currentPageIndex - 1)\"\n type=\"flat\"\n >\n <ap-symbol symbolId=\"arrow-left-1\"></ap-symbol>\n </ap-icon-button>\n <ng-container *ngIf=\"pageCount > edgeSize + 1; else allPagesDisplayed\">\n <ng-container *ngIf=\"currentPageIndex >= edgeSize - 1; else oneOfFirstPagesDisplayed\">\n <ng-container *ngIf=\"currentPageIndex <= pageCount - edgeSize; else oneOfLastPagesDisplayed\">\n <ap-paginator-button [pageIndex]=\"0\"\n [selectedPageIndex]=\"currentPageIndex\"\n (selectPage)=\"onSelectPage($event)\">\n </ap-paginator-button>\n <span class=\"ellipsis\">...</span>\n <ng-container *ngFor=\"let dummy of [].constructor(middleSize); let i = index\">\n <ap-paginator-button [pageIndex]=\"currentPageIndex + i - (middleSize - 1) / 2\"\n [selectedPageIndex]=\"currentPageIndex\"\n (selectPage)=\"onSelectPage($event)\">\n </ap-paginator-button>\n </ng-container>\n <span class=\"ellipsis\">...</span>\n <ap-paginator-button [pageIndex]=\"pageCount - 1\"\n [selectedPageIndex]=\"currentPageIndex\"\n (selectPage)=\"onSelectPage($event)\">\n </ap-paginator-button>\n </ng-container>\n </ng-container>\n <ng-template #oneOfFirstPagesDisplayed>\n <ng-container *ngFor=\"let dummy of [].constructor(edgeSize); let i = index\">\n <ap-paginator-button [pageIndex]=\"i\"\n [selectedPageIndex]=\"currentPageIndex\"\n (selectPage)=\"onSelectPage($event)\">\n </ap-paginator-button>\n </ng-container>\n <span class=\"ellipsis\">...</span>\n <ap-paginator-button [pageIndex]=\"pageCount - 1\"\n [selectedPageIndex]=\"currentPageIndex\"\n (selectPage)=\"onSelectPage($event)\">\n </ap-paginator-button>\n </ng-template>\n <ng-template #oneOfLastPagesDisplayed>\n <ap-paginator-button [pageIndex]=\"0\"\n [selectedPageIndex]=\"currentPageIndex\"\n (selectPage)=\"onSelectPage($event)\">\n </ap-paginator-button>\n <span class=\"ellipsis\">...</span>\n <ng-container *ngFor=\"let dummy of [].constructor(edgeSize); let i = index\">\n <ap-paginator-button [pageIndex]=\"pageCount - edgeSize + i\"\n [selectedPageIndex]=\"currentPageIndex\"\n (selectPage)=\"onSelectPage($event)\">\n </ap-paginator-button>\n </ng-container>\n </ng-template>\n </ng-container>\n <ng-template #allPagesDisplayed>\n <ng-container *ngFor=\"let dummy of [].constructor(pageCount); let i = index\">\n <ap-paginator-button [pageIndex]=\"i\"\n [selectedPageIndex]=\"currentPageIndex\"\n (selectPage)=\"onSelectPage($event)\">\n </ap-paginator-button>\n </ng-container>\n </ng-template>\n <ap-icon-button\n ariaLabel=\"Select Next Page button\"\n name=\"select-next-page-button\"\n color=\"none\"\n [disabled]=\"lastPageDisplayed\"\n (onClick)=\"onSelectPage(currentPageIndex + 1)\"\n type=\"flat\"\n >\n <ap-symbol symbolId=\"arrow-right-1\"></ap-symbol>\n </ap-icon-button>\n</div>\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-paginator.mjs","sources":["../../../libs/ui-components/paginator/src/paginator-button/paginator-button.component.ts","../../../libs/ui-components/paginator/src/paginator-button/paginator-button.component.html","../../../libs/ui-components/paginator/src/paginator.component.ts","../../../libs/ui-components/paginator/src/paginator.component.html","../../../libs/ui-components/paginator/src/agorapulse-ui-components-paginator.ts"],"sourcesContent":["import { ButtonComponent } from '@agorapulse/ui-components/button';\nimport {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';\n\n@Component({\n selector: 'ap-paginator-button',\n templateUrl: './paginator-button.component.html',\n styleUrls: ['./paginator-button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n ButtonComponent\n ],\n standalone: true,\n})\nexport class PaginatorButtonComponent {\n @Input() pageIndex = 0;\n @Input() selectedPageIndex = 0;\n\n @Output() selectPage = new EventEmitter<number>();\n}\n","<ap-button class=\"square\"\n [name]=\"'paginator-button-' + pageIndex\"\n [config]=\"{\n style: 'primary',\n color: selectedPageIndex === pageIndex ? 'orange' : undefined\n }\"\n (click)=\" selectPage.emit(pageIndex)\">\n {{pageIndex + 1}}\n</ap-button>\n","import {AgorapulseUiSymbolModule, apArrowLeft1, apArrowRight1, SymbolRegistry} from '@agorapulse/ui-symbol';\nimport {NgForOf, NgIf} from '@angular/common';\nimport {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from '@angular/core';\nimport {PaginatorButtonComponent} from './paginator-button/paginator-button.component';\nimport {IconButtonComponent} from \"@agorapulse/ui-components/icon-button\";\nimport {ButtonComponent} from \"@agorapulse/ui-components/button\";\n\n@Component({\n selector: 'ap-paginator',\n templateUrl: './paginator.component.html',\n styleUrls: ['./paginator.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [AgorapulseUiSymbolModule, ButtonComponent, NgIf, PaginatorButtonComponent, NgForOf, IconButtonComponent],\n standalone: true,\n})\nexport class PaginatorComponent implements OnChanges {\n @Input() itemCount = 0;\n @Input() itemCountPerPage = 10;\n @Input() edgeSize = 5;\n @Input() middleSize = 3;\n\n @Input() currentPageIndex = 0;\n @Output() currentPageIndexChange = new EventEmitter<number>();\n\n public pageCount = 0;\n public firstPageDisplayed = true;\n public lastPageDisplayed = true;\n\n constructor(public symbolRegistry: SymbolRegistry) {\n this.symbolRegistry.registerSymbols([\n apArrowLeft1,\n apArrowRight1\n ]);\n }\n\n ngOnChanges(changes: SimpleChanges) {\n // make sure middle size is an odd number\n if (changes.middleSize && this.middleSize % 2 === 0) {\n this.middleSize++;\n }\n if ((this.itemCountPerPage && (changes.itemCount || changes.itemCountPerPage)) || changes.currentPageIndex) {\n this.pageCount = Math.ceil(this.itemCount / this.itemCountPerPage);\n // make sure page index is between min and max page index\n this.currentPageIndex = Math.max(0, Math.min(this.pageCount - 1, this.currentPageIndex));\n this.firstPageDisplayed = this.currentPageIndex === 0;\n this.lastPageDisplayed = this.currentPageIndex === this.pageCount - 1;\n }\n }\n\n onSelectPage(pageIndex: number): void {\n this.currentPageIndexChange.emit(pageIndex);\n }\n}\n","<div class=\"item-index-overview\">\n {{(currentPageIndex * itemCountPerPage) + 1}}\n -{{lastPageDisplayed ? itemCount : (currentPageIndex + 1) * itemCountPerPage}}\n of {{itemCount}}\n</div>\n\n<div class=\"pages\">\n <ap-icon-button\n ariaLabel=\"Select Previous Page button\"\n name=\"select-previous-page-button\"\n color=\"none\"\n [disabled]=\"firstPageDisplayed\"\n (onClick)=\"onSelectPage(currentPageIndex - 1)\"\n type=\"flat\"\n >\n <ap-symbol symbolId=\"arrow-left-1\"></ap-symbol>\n </ap-icon-button>\n <ng-container *ngIf=\"pageCount > edgeSize + 1; else allPagesDisplayed\">\n <ng-container *ngIf=\"currentPageIndex >= edgeSize - 1; else oneOfFirstPagesDisplayed\">\n <ng-container *ngIf=\"currentPageIndex <= pageCount - edgeSize; else oneOfLastPagesDisplayed\">\n <ap-paginator-button [pageIndex]=\"0\"\n [selectedPageIndex]=\"currentPageIndex\"\n (selectPage)=\"onSelectPage($event)\">\n </ap-paginator-button>\n <span class=\"ellipsis\">...</span>\n <ng-container *ngFor=\"let dummy of [].constructor(middleSize); let i = index\">\n <ap-paginator-button [pageIndex]=\"currentPageIndex + i - (middleSize - 1) / 2\"\n [selectedPageIndex]=\"currentPageIndex\"\n (selectPage)=\"onSelectPage($event)\">\n </ap-paginator-button>\n </ng-container>\n <span class=\"ellipsis\">...</span>\n <ap-paginator-button [pageIndex]=\"pageCount - 1\"\n [selectedPageIndex]=\"currentPageIndex\"\n (selectPage)=\"onSelectPage($event)\">\n </ap-paginator-button>\n </ng-container>\n </ng-container>\n <ng-template #oneOfFirstPagesDisplayed>\n <ng-container *ngFor=\"let dummy of [].constructor(edgeSize); let i = index\">\n <ap-paginator-button [pageIndex]=\"i\"\n [selectedPageIndex]=\"currentPageIndex\"\n (selectPage)=\"onSelectPage($event)\">\n </ap-paginator-button>\n </ng-container>\n <span class=\"ellipsis\">...</span>\n <ap-paginator-button [pageIndex]=\"pageCount - 1\"\n [selectedPageIndex]=\"currentPageIndex\"\n (selectPage)=\"onSelectPage($event)\">\n </ap-paginator-button>\n </ng-template>\n <ng-template #oneOfLastPagesDisplayed>\n <ap-paginator-button [pageIndex]=\"0\"\n [selectedPageIndex]=\"currentPageIndex\"\n (selectPage)=\"onSelectPage($event)\">\n </ap-paginator-button>\n <span class=\"ellipsis\">...</span>\n <ng-container *ngFor=\"let dummy of [].constructor(edgeSize); let i = index\">\n <ap-paginator-button [pageIndex]=\"pageCount - edgeSize + i\"\n [selectedPageIndex]=\"currentPageIndex\"\n (selectPage)=\"onSelectPage($event)\">\n </ap-paginator-button>\n </ng-container>\n </ng-template>\n </ng-container>\n <ng-template #allPagesDisplayed>\n <ng-container *ngFor=\"let dummy of [].constructor(pageCount); let i = index\">\n <ap-paginator-button [pageIndex]=\"i\"\n [selectedPageIndex]=\"currentPageIndex\"\n (selectPage)=\"onSelectPage($event)\">\n </ap-paginator-button>\n </ng-container>\n </ng-template>\n <ap-icon-button\n ariaLabel=\"Select Next Page button\"\n name=\"select-next-page-button\"\n color=\"none\"\n [disabled]=\"lastPageDisplayed\"\n (onClick)=\"onSelectPage(currentPageIndex + 1)\"\n type=\"flat\"\n >\n <ap-symbol symbolId=\"arrow-right-1\"></ap-symbol>\n </ap-icon-button>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,25 +1,21 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input } from '@angular/core';
|
|
3
3
|
import { NgIf, CommonModule } from '@angular/common';
|
|
4
4
|
import * as i1 from '@agorapulse/ui-symbol';
|
|
5
5
|
import { apFacebook, apTwitter, apLinkedin, apLinkedinOfficial, apYoutubeOfficial, apYoutube, apInstagramOutline, apTiktokOfficial, apTiktokWhiteOfficial, SymbolComponent } from '@agorapulse/ui-symbol';
|
|
6
|
-
import * as
|
|
6
|
+
import * as i3 from '@agorapulse/ui-animations';
|
|
7
7
|
import { AgorapulseUiAnimationsModule } from '@agorapulse/ui-animations';
|
|
8
|
+
import * as i2 from '@agorapulse/ui-components/directives';
|
|
9
|
+
import { BaseButtonDirective } from '@agorapulse/ui-components/directives';
|
|
8
10
|
|
|
9
11
|
class SocialButtonComponent {
|
|
10
|
-
constructor(
|
|
11
|
-
this.elementRef = elementRef;
|
|
12
|
+
constructor(symbolRegistry) {
|
|
12
13
|
this.symbolRegistry = symbolRegistry;
|
|
14
|
+
this.baseButtonDirective = inject(BaseButtonDirective, { self: true });
|
|
13
15
|
this.disabled = false;
|
|
14
16
|
this.loading = false;
|
|
15
17
|
this.network = 'facebook';
|
|
16
18
|
this.buttonType = 'default';
|
|
17
|
-
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
18
|
-
this.click = new EventEmitter();
|
|
19
|
-
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
20
|
-
this.focus = new EventEmitter();
|
|
21
|
-
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
22
|
-
this.blur = new EventEmitter();
|
|
23
19
|
this.symbolIdPerNetwork = {
|
|
24
20
|
facebook: {
|
|
25
21
|
default: 'facebook',
|
|
@@ -46,7 +42,6 @@ class SocialButtonComponent {
|
|
|
46
42
|
stroked: 'tiktok-official',
|
|
47
43
|
},
|
|
48
44
|
};
|
|
49
|
-
this.hostDataTest = elementRef.nativeElement.getAttribute('data-test');
|
|
50
45
|
this.symbolRegistry.registerSymbols([
|
|
51
46
|
apFacebook,
|
|
52
47
|
apTwitter,
|
|
@@ -60,29 +55,29 @@ class SocialButtonComponent {
|
|
|
60
55
|
]);
|
|
61
56
|
}
|
|
62
57
|
}
|
|
63
|
-
SocialButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: SocialButtonComponent, deps: [{ token:
|
|
64
|
-
SocialButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: SocialButtonComponent, isStandalone: true, selector: "ap-social-button[name]", inputs: { ariaLabel: "ariaLabel", disabled: "disabled", loading: "loading", name: "name", network: "network", buttonType: "buttonType" }, outputs: { click: "click", focus: "focus", blur: "blur" }, providers: [], ngImport: i0, template: "<button\n [class.stroked]=\"buttonType === 'stroked'\"\n [class.facebook]=\"network === 'facebook'\"\n [class.twitter]=\"network === 'twitter'\"\n [class.instagram]=\"network === 'instagram'\"\n [class.linkedin]=\"network === 'linkedin'\"\n [class.youtube]=\"network === 'youtube'\"\n [class.tiktok]=\"network === 'tiktok'\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [attr.data-test]=\"hostDataTest ?? name\"\n (click)=\"click.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-disabled]=\"disabled?.toString()\"\n>\n <ap-symbol *ngIf=\"!loading\"\n [symbolId]=\"symbolIdPerNetwork[network][buttonType]\"\n size=\"micro\"\n ></ap-symbol>\n <ap-loader\n *ngIf=\"loading\"\n [color]=\"buttonType === 'default' ? 'white' : network\"\n [diameter]=\"16\"\n ></ap-loader>\n <ng-content select=\"span\"></ng-content>\n</button>\n", styles: ["ap-social-button{display:inline-flex;position:relative}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:8px;min-height:36px;max-height:36px;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: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{background-color:var(--ref-color-twitter-100)}ap-social-button button.twitter span,ap-social-button button.twitter ap-symbol{color:var(--ref-color-white)}ap-social-button button.twitter:hover{background-color:#3eaef4}ap-social-button button.twitter:active:not(:disabled){background-color:#73c4f7}ap-social-button button.twitter:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.twitter.loading{background-color:#73c4f7}ap-social-button button.twitter.stroked{background:transparent;border:1px solid var(--ref-color-twitter-100)}ap-social-button button.twitter.stroked span{color:var(--ref-color-twitter-100)}ap-social-button button.twitter.stroked:hover{background:transparent;border-color:#1a8cd8}ap-social-button button.twitter.stroked:hover span{color:#1a8cd8}ap-social-button button.twitter.stroked:active:not(:disabled){border-color:#1a8cd8;background:transparent}ap-social-button button.twitter.stroked:active:not(:disabled) span{color:#1a8cd8}ap-social-button button.twitter.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-twitter-100);background:transparent}ap-social-button button.twitter.stroked:disabled{opacity:.2}ap-social-button button.twitter.stroked.loading{border-color:var(--ref-color-twitter-100);background:transparent}ap-social-button button.instagram{background:linear-gradient(90deg,#FEDA75 0%,#FA7E1E 26.56%,#D62976 50.52%,#962FBF 73.96%,#4F5BD5 100%)}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 0%,#FCB178 26.56%,#DC478A 50.52%,#A942D1 73.96%,#6B75DB 100%)}ap-social-button button.instagram:active:not(:disabled){background:linear-gradient(90deg,#FFF3D1 0%,#FCB178 26.56%,#E576A8 50.52%,#BD6FDC 73.96%,#989FE6 100%)}ap-social-button button.instagram:disabled{background:var(--ref-color-grey-20)}ap-social-button button.instagram.loading{background:linear-gradient(90deg,#FFF3D1 0%,#FCB178 26.56%,#E576A8 50.52%,#BD6FDC 73.96%,#989FE6 100%)}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 0%,#FA7E1E 26.56%,#D62976 50.52%,#962FBF 73.96%,#4F5BD5 100%);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:34px}ap-social-button button.instagram.stroked span{background:linear-gradient(90deg,#FEDA75 0%,#FA7E1E 26.56%,#D62976 50.52%,#962FBF 73.96%,#4F5BD5 100%);-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 0%,#FA7E1E 26.56%,#D62976 50.52%,#962FBF 73.96%,#4F5BD5 100%)}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.tiktok{background-color:var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok span,ap-social-button button.tiktok ap-symbol{color:var(--ref-color-white)}ap-social-button button.tiktok:hover{background-color:#202020}ap-social-button button.tiktok:active:not(:disabled){background-color:#2e2e2e}ap-social-button button.tiktok:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.tiktok.loading{background-color:#2e2e2e}ap-social-button button.tiktok.stroked{background:transparent;border:1px solid var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok.stroked span{color:var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok.stroked:hover{background:transparent;border-color:#202020}ap-social-button button.tiktok.stroked:hover span{color:#202020}ap-social-button button.tiktok.stroked:active:not(:disabled){border-color:#2e2e2e;background:transparent}ap-social-button button.tiktok.stroked:active:not(:disabled) span{color:#2e2e2e}ap-social-button button.tiktok.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-twitter-100--ref-color-tiktok-default-100);background:transparent}ap-social-button button.tiktok.stroked:disabled{opacity:.2}ap-social-button button.tiktok.stroked.loading{border-color:var(--ref-color-twitter-100--ref-color-tiktok-default-100);background:transparent}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AgorapulseUiAnimationsModule }, { kind: "component", type: i2.LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
58
|
+
SocialButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: SocialButtonComponent, deps: [{ token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
59
|
+
SocialButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: SocialButtonComponent, isStandalone: true, selector: "ap-social-button[name]", inputs: { ariaLabel: "ariaLabel", disabled: "disabled", name: "name", loading: "loading", network: "network", buttonType: "buttonType" }, providers: [], hostDirectives: [{ directive: i2.BaseButtonDirective, outputs: ["click", "click", "focus", "focus", "blur", "blur"] }], ngImport: i0, template: "<button\n role=\"button\"\n [class.stroked]=\"buttonType === 'stroked'\"\n [class.facebook]=\"network === 'facebook'\"\n [class.twitter]=\"network === 'twitter'\"\n [class.instagram]=\"network === 'instagram'\"\n [class.linkedin]=\"network === 'linkedin'\"\n [class.youtube]=\"network === 'youtube'\"\n [class.tiktok]=\"network === 'tiktok'\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [attr.id]=\"baseButtonDirective.hostId\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n (click)=\"baseButtonDirective.onClickHandle($event)\"\n (focus)=\"baseButtonDirective.onFocusHandle($event)\"\n (blur)=\"baseButtonDirective.onBlurHandle($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-disabled]=\"disabled?.toString()\">\n <ap-symbol *ngIf=\"!loading\" [symbolId]=\"symbolIdPerNetwork[network][buttonType]\" size=\"micro\"></ap-symbol>\n <ap-loader *ngIf=\"loading\" [color]=\"buttonType === 'default' ? 'white' : network\" [diameter]=\"16\"></ap-loader>\n <ng-content select=\"span\"></ng-content>\n</button>\n", styles: ["ap-social-button{display:inline-flex;position:relative}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:8px;min-height:36px;max-height:36px;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: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{background-color:var(--ref-color-twitter-100)}ap-social-button button.twitter span,ap-social-button button.twitter ap-symbol{color:var(--ref-color-white)}ap-social-button button.twitter:hover{background-color:#3eaef4}ap-social-button button.twitter:active:not(:disabled){background-color:#73c4f7}ap-social-button button.twitter:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.twitter.loading{background-color:#73c4f7}ap-social-button button.twitter.stroked{background:transparent;border:1px solid var(--ref-color-twitter-100)}ap-social-button button.twitter.stroked span{color:var(--ref-color-twitter-100)}ap-social-button button.twitter.stroked:hover{background:transparent;border-color:#1a8cd8}ap-social-button button.twitter.stroked:hover span{color:#1a8cd8}ap-social-button button.twitter.stroked:active:not(:disabled){border-color:#1a8cd8;background:transparent}ap-social-button button.twitter.stroked:active:not(:disabled) span{color:#1a8cd8}ap-social-button button.twitter.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-twitter-100);background:transparent}ap-social-button button.twitter.stroked:disabled{opacity:.2}ap-social-button button.twitter.stroked.loading{border-color:var(--ref-color-twitter-100);background:transparent}ap-social-button button.instagram{background:linear-gradient(90deg,#FEDA75 0%,#FA7E1E 26.56%,#D62976 50.52%,#962FBF 73.96%,#4F5BD5 100%)}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 0%,#FCB178 26.56%,#DC478A 50.52%,#A942D1 73.96%,#6B75DB 100%)}ap-social-button button.instagram:active:not(:disabled){background:linear-gradient(90deg,#FFF3D1 0%,#FCB178 26.56%,#E576A8 50.52%,#BD6FDC 73.96%,#989FE6 100%)}ap-social-button button.instagram:disabled{background:var(--ref-color-grey-20)}ap-social-button button.instagram.loading{background:linear-gradient(90deg,#FFF3D1 0%,#FCB178 26.56%,#E576A8 50.52%,#BD6FDC 73.96%,#989FE6 100%)}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 0%,#FA7E1E 26.56%,#D62976 50.52%,#962FBF 73.96%,#4F5BD5 100%);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:34px}ap-social-button button.instagram.stroked span{background:linear-gradient(90deg,#FEDA75 0%,#FA7E1E 26.56%,#D62976 50.52%,#962FBF 73.96%,#4F5BD5 100%);-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 0%,#FA7E1E 26.56%,#D62976 50.52%,#962FBF 73.96%,#4F5BD5 100%)}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.tiktok{background-color:var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok span,ap-social-button button.tiktok ap-symbol{color:var(--ref-color-white)}ap-social-button button.tiktok:hover{background-color:#202020}ap-social-button button.tiktok:active:not(:disabled){background-color:#2e2e2e}ap-social-button button.tiktok:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.tiktok.loading{background-color:#2e2e2e}ap-social-button button.tiktok.stroked{background:transparent;border:1px solid var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok.stroked span{color:var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok.stroked:hover{background:transparent;border-color:#202020}ap-social-button button.tiktok.stroked:hover span{color:#202020}ap-social-button button.tiktok.stroked:active:not(:disabled){border-color:#2e2e2e;background:transparent}ap-social-button button.tiktok.stroked:active:not(:disabled) span{color:#2e2e2e}ap-social-button button.tiktok.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-twitter-100--ref-color-tiktok-default-100);background:transparent}ap-social-button button.tiktok.stroked:disabled{opacity:.2}ap-social-button button.tiktok.stroked.loading{border-color:var(--ref-color-twitter-100--ref-color-tiktok-default-100);background:transparent}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AgorapulseUiAnimationsModule }, { kind: "component", type: i3.LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
65
60
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: SocialButtonComponent, decorators: [{
|
|
66
61
|
type: Component,
|
|
67
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-social-button[name]', standalone: true, imports: [NgIf, SymbolComponent, CommonModule, AgorapulseUiAnimationsModule], providers: [], encapsulation: ViewEncapsulation.None, template: "<button\n [class.stroked]=\"buttonType === 'stroked'\"\n [class.facebook]=\"network === 'facebook'\"\n [class.twitter]=\"network === 'twitter'\"\n [class.instagram]=\"network === 'instagram'\"\n [class.linkedin]=\"network === 'linkedin'\"\n [class.youtube]=\"network === 'youtube'\"\n [class.tiktok]=\"network === 'tiktok'\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [attr.data-test]=\"hostDataTest ?? name\"\n (click)=\"click.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-disabled]=\"disabled?.toString()\"\n>\n <ap-symbol *ngIf=\"!loading\"\n [symbolId]=\"symbolIdPerNetwork[network][buttonType]\"\n size=\"micro\"\n ></ap-symbol>\n <ap-loader\n *ngIf=\"loading\"\n [color]=\"buttonType === 'default' ? 'white' : network\"\n [diameter]=\"16\"\n ></ap-loader>\n <ng-content select=\"span\"></ng-content>\n</button>\n", styles: ["ap-social-button{display:inline-flex;position:relative}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:8px;min-height:36px;max-height:36px;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: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{background-color:var(--ref-color-twitter-100)}ap-social-button button.twitter span,ap-social-button button.twitter ap-symbol{color:var(--ref-color-white)}ap-social-button button.twitter:hover{background-color:#3eaef4}ap-social-button button.twitter:active:not(:disabled){background-color:#73c4f7}ap-social-button button.twitter:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.twitter.loading{background-color:#73c4f7}ap-social-button button.twitter.stroked{background:transparent;border:1px solid var(--ref-color-twitter-100)}ap-social-button button.twitter.stroked span{color:var(--ref-color-twitter-100)}ap-social-button button.twitter.stroked:hover{background:transparent;border-color:#1a8cd8}ap-social-button button.twitter.stroked:hover span{color:#1a8cd8}ap-social-button button.twitter.stroked:active:not(:disabled){border-color:#1a8cd8;background:transparent}ap-social-button button.twitter.stroked:active:not(:disabled) span{color:#1a8cd8}ap-social-button button.twitter.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-twitter-100);background:transparent}ap-social-button button.twitter.stroked:disabled{opacity:.2}ap-social-button button.twitter.stroked.loading{border-color:var(--ref-color-twitter-100);background:transparent}ap-social-button button.instagram{background:linear-gradient(90deg,#FEDA75 0%,#FA7E1E 26.56%,#D62976 50.52%,#962FBF 73.96%,#4F5BD5 100%)}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 0%,#FCB178 26.56%,#DC478A 50.52%,#A942D1 73.96%,#6B75DB 100%)}ap-social-button button.instagram:active:not(:disabled){background:linear-gradient(90deg,#FFF3D1 0%,#FCB178 26.56%,#E576A8 50.52%,#BD6FDC 73.96%,#989FE6 100%)}ap-social-button button.instagram:disabled{background:var(--ref-color-grey-20)}ap-social-button button.instagram.loading{background:linear-gradient(90deg,#FFF3D1 0%,#FCB178 26.56%,#E576A8 50.52%,#BD6FDC 73.96%,#989FE6 100%)}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 0%,#FA7E1E 26.56%,#D62976 50.52%,#962FBF 73.96%,#4F5BD5 100%);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:34px}ap-social-button button.instagram.stroked span{background:linear-gradient(90deg,#FEDA75 0%,#FA7E1E 26.56%,#D62976 50.52%,#962FBF 73.96%,#4F5BD5 100%);-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 0%,#FA7E1E 26.56%,#D62976 50.52%,#962FBF 73.96%,#4F5BD5 100%)}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.tiktok{background-color:var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok span,ap-social-button button.tiktok ap-symbol{color:var(--ref-color-white)}ap-social-button button.tiktok:hover{background-color:#202020}ap-social-button button.tiktok:active:not(:disabled){background-color:#2e2e2e}ap-social-button button.tiktok:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.tiktok.loading{background-color:#2e2e2e}ap-social-button button.tiktok.stroked{background:transparent;border:1px solid var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok.stroked span{color:var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok.stroked:hover{background:transparent;border-color:#202020}ap-social-button button.tiktok.stroked:hover span{color:#202020}ap-social-button button.tiktok.stroked:active:not(:disabled){border-color:#2e2e2e;background:transparent}ap-social-button button.tiktok.stroked:active:not(:disabled) span{color:#2e2e2e}ap-social-button button.tiktok.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-twitter-100--ref-color-tiktok-default-100);background:transparent}ap-social-button button.tiktok.stroked:disabled{opacity:.2}ap-social-button button.tiktok.stroked.loading{border-color:var(--ref-color-twitter-100--ref-color-tiktok-default-100);background:transparent}\n"] }]
|
|
68
|
-
|
|
62
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-social-button[name]', standalone: true, imports: [NgIf, SymbolComponent, CommonModule, AgorapulseUiAnimationsModule], providers: [], encapsulation: ViewEncapsulation.None, hostDirectives: [
|
|
63
|
+
{
|
|
64
|
+
directive: BaseButtonDirective,
|
|
65
|
+
//eslint-disable-next-line
|
|
66
|
+
outputs: ['click', 'focus', 'blur'],
|
|
67
|
+
},
|
|
68
|
+
], template: "<button\n role=\"button\"\n [class.stroked]=\"buttonType === 'stroked'\"\n [class.facebook]=\"network === 'facebook'\"\n [class.twitter]=\"network === 'twitter'\"\n [class.instagram]=\"network === 'instagram'\"\n [class.linkedin]=\"network === 'linkedin'\"\n [class.youtube]=\"network === 'youtube'\"\n [class.tiktok]=\"network === 'tiktok'\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [attr.id]=\"baseButtonDirective.hostId\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n (click)=\"baseButtonDirective.onClickHandle($event)\"\n (focus)=\"baseButtonDirective.onFocusHandle($event)\"\n (blur)=\"baseButtonDirective.onBlurHandle($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-disabled]=\"disabled?.toString()\">\n <ap-symbol *ngIf=\"!loading\" [symbolId]=\"symbolIdPerNetwork[network][buttonType]\" size=\"micro\"></ap-symbol>\n <ap-loader *ngIf=\"loading\" [color]=\"buttonType === 'default' ? 'white' : network\" [diameter]=\"16\"></ap-loader>\n <ng-content select=\"span\"></ng-content>\n</button>\n", styles: ["ap-social-button{display:inline-flex;position:relative}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:8px;min-height:36px;max-height:36px;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: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{background-color:var(--ref-color-twitter-100)}ap-social-button button.twitter span,ap-social-button button.twitter ap-symbol{color:var(--ref-color-white)}ap-social-button button.twitter:hover{background-color:#3eaef4}ap-social-button button.twitter:active:not(:disabled){background-color:#73c4f7}ap-social-button button.twitter:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.twitter.loading{background-color:#73c4f7}ap-social-button button.twitter.stroked{background:transparent;border:1px solid var(--ref-color-twitter-100)}ap-social-button button.twitter.stroked span{color:var(--ref-color-twitter-100)}ap-social-button button.twitter.stroked:hover{background:transparent;border-color:#1a8cd8}ap-social-button button.twitter.stroked:hover span{color:#1a8cd8}ap-social-button button.twitter.stroked:active:not(:disabled){border-color:#1a8cd8;background:transparent}ap-social-button button.twitter.stroked:active:not(:disabled) span{color:#1a8cd8}ap-social-button button.twitter.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-twitter-100);background:transparent}ap-social-button button.twitter.stroked:disabled{opacity:.2}ap-social-button button.twitter.stroked.loading{border-color:var(--ref-color-twitter-100);background:transparent}ap-social-button button.instagram{background:linear-gradient(90deg,#FEDA75 0%,#FA7E1E 26.56%,#D62976 50.52%,#962FBF 73.96%,#4F5BD5 100%)}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 0%,#FCB178 26.56%,#DC478A 50.52%,#A942D1 73.96%,#6B75DB 100%)}ap-social-button button.instagram:active:not(:disabled){background:linear-gradient(90deg,#FFF3D1 0%,#FCB178 26.56%,#E576A8 50.52%,#BD6FDC 73.96%,#989FE6 100%)}ap-social-button button.instagram:disabled{background:var(--ref-color-grey-20)}ap-social-button button.instagram.loading{background:linear-gradient(90deg,#FFF3D1 0%,#FCB178 26.56%,#E576A8 50.52%,#BD6FDC 73.96%,#989FE6 100%)}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 0%,#FA7E1E 26.56%,#D62976 50.52%,#962FBF 73.96%,#4F5BD5 100%);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:34px}ap-social-button button.instagram.stroked span{background:linear-gradient(90deg,#FEDA75 0%,#FA7E1E 26.56%,#D62976 50.52%,#962FBF 73.96%,#4F5BD5 100%);-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 0%,#FA7E1E 26.56%,#D62976 50.52%,#962FBF 73.96%,#4F5BD5 100%)}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.tiktok{background-color:var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok span,ap-social-button button.tiktok ap-symbol{color:var(--ref-color-white)}ap-social-button button.tiktok:hover{background-color:#202020}ap-social-button button.tiktok:active:not(:disabled){background-color:#2e2e2e}ap-social-button button.tiktok:disabled{background-color:var(--ref-color-grey-20)}ap-social-button button.tiktok.loading{background-color:#2e2e2e}ap-social-button button.tiktok.stroked{background:transparent;border:1px solid var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok.stroked span{color:var(--ref-color-tiktok-default-100)}ap-social-button button.tiktok.stroked:hover{background:transparent;border-color:#202020}ap-social-button button.tiktok.stroked:hover span{color:#202020}ap-social-button button.tiktok.stroked:active:not(:disabled){border-color:#2e2e2e;background:transparent}ap-social-button button.tiktok.stroked:active:not(:disabled) span{color:#2e2e2e}ap-social-button button.tiktok.stroked:focus:not(:disabled):not(:active){border-color:var(--ref-color-twitter-100--ref-color-tiktok-default-100);background:transparent}ap-social-button button.tiktok.stroked:disabled{opacity:.2}ap-social-button button.tiktok.stroked.loading{border-color:var(--ref-color-twitter-100--ref-color-tiktok-default-100);background:transparent}\n"] }]
|
|
69
|
+
}], ctorParameters: function () { return [{ type: i1.SymbolRegistry }]; }, propDecorators: { ariaLabel: [{
|
|
69
70
|
type: Input
|
|
70
71
|
}], disabled: [{
|
|
71
72
|
type: Input
|
|
72
|
-
}], loading: [{
|
|
73
|
-
type: Input
|
|
74
73
|
}], name: [{
|
|
75
74
|
type: Input
|
|
75
|
+
}], loading: [{
|
|
76
|
+
type: Input
|
|
76
77
|
}], network: [{
|
|
77
78
|
type: Input
|
|
78
79
|
}], buttonType: [{
|
|
79
80
|
type: Input
|
|
80
|
-
}], click: [{
|
|
81
|
-
type: Output
|
|
82
|
-
}], focus: [{
|
|
83
|
-
type: Output
|
|
84
|
-
}], blur: [{
|
|
85
|
-
type: Output
|
|
86
81
|
}] } });
|
|
87
82
|
|
|
88
83
|
/**
|
|
@@ -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 {
|
|
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 {ChangeDetectionStrategy, Component, inject, Input, ViewEncapsulation} from '@angular/core';\nimport {CommonModule, NgIf} from '@angular/common';\nimport {\n apFacebook,\n apInstagramOutline,\n apLinkedin,\n apLinkedinOfficial,\n apTiktokOfficial,\n apTiktokWhiteOfficial,\n apTwitter,\n apYoutube,\n apYoutubeOfficial,\n SymbolComponent,\n SymbolRegistry,\n} from '@agorapulse/ui-symbol';\nimport {AgorapulseUiAnimationsModule} from '@agorapulse/ui-animations';\nimport {BaseButtonDirective} from '@agorapulse/ui-components/directives';\n\ntype Service = 'facebook' | 'instagram' | 'twitter' | 'linkedin' | 'youtube' | 'tiktok';\ntype SocialButtonType = 'default' | 'stroked';\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-social-button[name]',\n styleUrls: ['./social-button.component.scss'],\n standalone: true,\n imports: [NgIf, SymbolComponent, CommonModule, AgorapulseUiAnimationsModule],\n providers: [],\n templateUrl: './social-button.component.html',\n encapsulation: ViewEncapsulation.None,\n hostDirectives: [\n {\n directive: BaseButtonDirective,\n //eslint-disable-next-line\n outputs: ['click', 'focus', 'blur'],\n },\n ],\n})\nexport class SocialButtonComponent {\n readonly baseButtonDirective: BaseButtonDirective = inject(BaseButtonDirective, {self: true});\n\n @Input() ariaLabel: string;\n @Input() disabled: boolean | undefined = false;\n @Input() name: string;\n @Input() loading: boolean | undefined = false;\n @Input() network: Service = 'facebook';\n @Input() buttonType: SocialButtonType = 'default';\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: 'twitter',\n stroked: 'twitter-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 };\n\n constructor(private symbolRegistry: SymbolRegistry) {\n this.symbolRegistry.registerSymbols([\n apFacebook,\n apTwitter,\n apLinkedin,\n apLinkedinOfficial,\n apYoutubeOfficial,\n apYoutube,\n apInstagramOutline,\n apTiktokOfficial,\n apTiktokWhiteOfficial,\n ]);\n }\n}\n","<button\n role=\"button\"\n [class.stroked]=\"buttonType === 'stroked'\"\n [class.facebook]=\"network === 'facebook'\"\n [class.twitter]=\"network === 'twitter'\"\n [class.instagram]=\"network === 'instagram'\"\n [class.linkedin]=\"network === 'linkedin'\"\n [class.youtube]=\"network === 'youtube'\"\n [class.tiktok]=\"network === 'tiktok'\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [attr.id]=\"baseButtonDirective.hostId\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n (click)=\"baseButtonDirective.onClickHandle($event)\"\n (focus)=\"baseButtonDirective.onFocusHandle($event)\"\n (blur)=\"baseButtonDirective.onBlurHandle($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-disabled]=\"disabled?.toString()\">\n <ap-symbol *ngIf=\"!loading\" [symbolId]=\"symbolIdPerNetwork[network][buttonType]\" size=\"micro\"></ap-symbol>\n <ap-loader *ngIf=\"loading\" [color]=\"buttonType === 'default' ? 'white' : network\" [diameter]=\"16\"></ap-loader>\n <ng-content select=\"span\"></ng-content>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|