@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
|
@@ -2,26 +2,21 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { inject, EventEmitter, SimpleChange, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, ContentChild, Output } from '@angular/core';
|
|
3
3
|
import { CommonModule, NgIf } from '@angular/common';
|
|
4
4
|
import { SymbolRegistry, apArrowDown1, SymbolComponent } from '@agorapulse/ui-symbol';
|
|
5
|
-
import * as
|
|
5
|
+
import * as i2 from '@angular/material/menu';
|
|
6
6
|
import { MatMenuModule } from '@angular/material/menu';
|
|
7
|
+
import * as i1 from '@agorapulse/ui-components/directives';
|
|
8
|
+
import { BaseButtonDirective } from '@agorapulse/ui-components/directives';
|
|
7
9
|
|
|
8
10
|
class SplitButtonComponent {
|
|
9
|
-
constructor(
|
|
10
|
-
this.elementRef = elementRef;
|
|
11
|
+
constructor() {
|
|
11
12
|
this.symbolRegistry = inject(SymbolRegistry);
|
|
13
|
+
this.baseButtonDirective = inject(BaseButtonDirective, { self: true });
|
|
12
14
|
this.disabled = false;
|
|
13
15
|
this.splitDisabled = false;
|
|
14
16
|
this.symbolPosition = 'right';
|
|
15
|
-
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
16
|
-
this.click = new EventEmitter();
|
|
17
|
-
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
18
|
-
this.focus = new EventEmitter();
|
|
19
|
-
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
20
|
-
this.blur = new EventEmitter();
|
|
21
17
|
this.menuOpened = new EventEmitter();
|
|
22
18
|
this.menuClosed = new EventEmitter();
|
|
23
19
|
this.menuOpen = false;
|
|
24
|
-
this.hostDataTest = elementRef.nativeElement.getAttribute('data-test');
|
|
25
20
|
this.symbolRegistry.registerSymbols([apArrowDown1]);
|
|
26
21
|
}
|
|
27
22
|
ngAfterViewChecked() {
|
|
@@ -32,64 +27,55 @@ class SplitButtonComponent {
|
|
|
32
27
|
});
|
|
33
28
|
}
|
|
34
29
|
}
|
|
35
|
-
onClickHandle($event) {
|
|
36
|
-
$event.stopImmediatePropagation();
|
|
37
|
-
this.buttonElement.nativeElement.blur();
|
|
38
|
-
this.click.emit($event);
|
|
39
|
-
this.focus.emit($event);
|
|
40
|
-
}
|
|
41
30
|
onSplitButtonClickHandle($event) {
|
|
42
31
|
$event.stopImmediatePropagation();
|
|
43
32
|
}
|
|
44
33
|
handleMenuOpened() {
|
|
45
34
|
this.menuOpened.emit();
|
|
46
35
|
this.menuOpen = true;
|
|
47
|
-
this.buttonElement.
|
|
36
|
+
this.baseButtonDirective.buttonElement.blur();
|
|
48
37
|
this.splitButtonElement.nativeElement.blur();
|
|
49
38
|
}
|
|
50
39
|
handleMenuClosed() {
|
|
51
40
|
this.menuClosed.emit();
|
|
52
41
|
this.menuOpen = false;
|
|
53
|
-
this.buttonElement.
|
|
42
|
+
this.baseButtonDirective.buttonElement.blur();
|
|
54
43
|
this.splitButtonElement.nativeElement.blur();
|
|
55
44
|
}
|
|
56
45
|
}
|
|
57
|
-
SplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: SplitButtonComponent, deps: [
|
|
58
|
-
SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: SplitButtonComponent, isStandalone: true, selector: "ap-split-button[name]", inputs: { ariaLabel: "ariaLabel",
|
|
46
|
+
SplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
47
|
+
SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: SplitButtonComponent, isStandalone: true, selector: "ap-split-button[name]", inputs: { ariaLabel: "ariaLabel", disabled: "disabled", name: "name", config: "config", menuTrigger: "menuTrigger", splitDisabled: "splitDisabled", symbolPosition: "symbolPosition", splitButtonDataTest: "splitButtonDataTest" }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed" }, providers: [], queries: [{ propertyName: "symbolComponent", first: true, predicate: SymbolComponent, descendants: true }], viewQueries: [{ propertyName: "splitButtonElement", first: true, predicate: ["splitButton"], descendants: true }], hostDirectives: [{ directive: i1.BaseButtonDirective, outputs: ["click", "click", "focus", "focus", "blur", "blur"] }], ngImport: i0, template: "<button\n role=\"button\"\n [class.primary]=\"config.style === 'primary'\"\n [class.orange]=\"config.color === 'orange'\"\n [class.blue]=\"config.color === 'blue'\"\n [class.inverse]=\"symbolPosition === 'left'\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [attr.id]=\"baseButtonDirective.hostId\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-disabled]=\"disabled?.toString()\"\n (click)=\"baseButtonDirective.onClickHandle($event)\"\n (focus)=\"baseButtonDirective.focus.emit($event)\"\n (blur)=\"baseButtonDirective.blur.emit($event)\"\n>\n <ng-content select=\"span\"></ng-content>\n <ng-content select=\"ap-symbol\"></ng-content>\n</button>\n<button\n #splitButton\n #trigger=\"matMenuTrigger\"\n role=\"button\"\n [class.primary]=\"config.style === 'primary'\"\n [class.orange]=\"config.color === 'orange'\"\n [class.blue]=\"config.color === 'blue'\"\n [disabled]=\"splitDisabled\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-disabled]=\"splitDisabled.toString()\"\n [attr.data-test]=\"splitButtonDataTest ?? name + '-split'\"\n (click)=\"onSplitButtonClickHandle($event)\"\n [matMenuTriggerFor]=\"menuTrigger\"\n (menuClosed)=\"handleMenuClosed()\"\n (menuOpened)=\"handleMenuOpened()\"\n>\n <ap-symbol symbolId=\"arrow-down-1\"\n size=\"nano\"\n [class.opened]=\"menuOpen\"></ap-symbol>\n</button>\n", styles: ["ap-split-button{--loading-bar-width: 50px;display:inline-flex;gap:1px;position:relative}ap-split-button button{border:none;position:relative;padding:var(--comp-split-button-padding-horizontal) var(--comp-split-button-padding-vertical);overflow:hidden;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px}ap-split-button button.inverse{flex-direction:row-reverse}ap-split-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-split-button button:disabled{pointer-events:none}@media (hover: hover){ap-split-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px;z-index:10}}ap-split-button button span{font-size:var(--comp-split-button-text-size);font-family:var(--comp-split-button-text-font-family);line-height:var(--comp-split-button-text-line-height);font-weight:var(--comp-split-button-text-weight);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}ap-split-button button.loading{pointer-events:none}ap-split-button button.primary span,ap-split-button button.primary ap-symbol{color:var(--ref-color-white)}ap-split-button button.primary.orange{background:var(--ref-color-orange-100)}ap-split-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-split-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-split-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-split-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-split-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-split-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-split-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-split-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-split-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-split-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-split-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-split-button button:first-child{border-top-left-radius:var(--comp-split-button-border-radius);border-bottom-left-radius:var(--comp-split-button-border-radius)}ap-split-button button:last-child{border-top-right-radius:var(--comp-split-button-border-radius);border-bottom-right-radius:var(--comp-split-button-border-radius);padding:var(--comp-split-button-padding-horizontal) 10px var(--comp-split-button-padding-horizontal) 10px}ap-split-button button ap-symbol{will-change:transform;transition:.2s ease-in-out}ap-split-button button ap-symbol.opened{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
59
48
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: SplitButtonComponent, decorators: [{
|
|
60
49
|
type: Component,
|
|
61
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-split-button[name]', standalone: true, imports: [NgIf, SymbolComponent, CommonModule, MatMenuModule], providers: [], encapsulation: ViewEncapsulation.None,
|
|
62
|
-
|
|
50
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-split-button[name]', standalone: true, imports: [NgIf, SymbolComponent, CommonModule, MatMenuModule], providers: [], encapsulation: ViewEncapsulation.None, hostDirectives: [
|
|
51
|
+
{
|
|
52
|
+
directive: BaseButtonDirective,
|
|
53
|
+
//eslint-disable-next-line
|
|
54
|
+
outputs: ['click', 'focus', 'blur'],
|
|
55
|
+
},
|
|
56
|
+
], template: "<button\n role=\"button\"\n [class.primary]=\"config.style === 'primary'\"\n [class.orange]=\"config.color === 'orange'\"\n [class.blue]=\"config.color === 'blue'\"\n [class.inverse]=\"symbolPosition === 'left'\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [attr.id]=\"baseButtonDirective.hostId\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-disabled]=\"disabled?.toString()\"\n (click)=\"baseButtonDirective.onClickHandle($event)\"\n (focus)=\"baseButtonDirective.focus.emit($event)\"\n (blur)=\"baseButtonDirective.blur.emit($event)\"\n>\n <ng-content select=\"span\"></ng-content>\n <ng-content select=\"ap-symbol\"></ng-content>\n</button>\n<button\n #splitButton\n #trigger=\"matMenuTrigger\"\n role=\"button\"\n [class.primary]=\"config.style === 'primary'\"\n [class.orange]=\"config.color === 'orange'\"\n [class.blue]=\"config.color === 'blue'\"\n [disabled]=\"splitDisabled\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-disabled]=\"splitDisabled.toString()\"\n [attr.data-test]=\"splitButtonDataTest ?? name + '-split'\"\n (click)=\"onSplitButtonClickHandle($event)\"\n [matMenuTriggerFor]=\"menuTrigger\"\n (menuClosed)=\"handleMenuClosed()\"\n (menuOpened)=\"handleMenuOpened()\"\n>\n <ap-symbol symbolId=\"arrow-down-1\"\n size=\"nano\"\n [class.opened]=\"menuOpen\"></ap-symbol>\n</button>\n", styles: ["ap-split-button{--loading-bar-width: 50px;display:inline-flex;gap:1px;position:relative}ap-split-button button{border:none;position:relative;padding:var(--comp-split-button-padding-horizontal) var(--comp-split-button-padding-vertical);overflow:hidden;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px}ap-split-button button.inverse{flex-direction:row-reverse}ap-split-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-split-button button:disabled{pointer-events:none}@media (hover: hover){ap-split-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px;z-index:10}}ap-split-button button span{font-size:var(--comp-split-button-text-size);font-family:var(--comp-split-button-text-font-family);line-height:var(--comp-split-button-text-line-height);font-weight:var(--comp-split-button-text-weight);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}ap-split-button button.loading{pointer-events:none}ap-split-button button.primary span,ap-split-button button.primary ap-symbol{color:var(--ref-color-white)}ap-split-button button.primary.orange{background:var(--ref-color-orange-100)}ap-split-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-split-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-split-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-split-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-split-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-split-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-split-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-split-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-split-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-split-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-split-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-split-button button:first-child{border-top-left-radius:var(--comp-split-button-border-radius);border-bottom-left-radius:var(--comp-split-button-border-radius)}ap-split-button button:last-child{border-top-right-radius:var(--comp-split-button-border-radius);border-bottom-right-radius:var(--comp-split-button-border-radius);padding:var(--comp-split-button-padding-horizontal) 10px var(--comp-split-button-padding-horizontal) 10px}ap-split-button button ap-symbol{will-change:transform;transition:.2s ease-in-out}ap-split-button button ap-symbol.opened{transform:rotate(180deg)}\n"] }]
|
|
57
|
+
}], ctorParameters: function () { return []; }, propDecorators: { ariaLabel: [{
|
|
58
|
+
type: Input
|
|
59
|
+
}], disabled: [{
|
|
60
|
+
type: Input
|
|
61
|
+
}], name: [{
|
|
63
62
|
type: Input
|
|
64
63
|
}], config: [{
|
|
65
64
|
type: Input
|
|
66
65
|
}], menuTrigger: [{
|
|
67
66
|
type: Input
|
|
68
|
-
}], disabled: [{
|
|
69
|
-
type: Input
|
|
70
67
|
}], splitDisabled: [{
|
|
71
68
|
type: Input
|
|
72
|
-
}], name: [{
|
|
73
|
-
type: Input
|
|
74
69
|
}], symbolPosition: [{
|
|
75
70
|
type: Input
|
|
76
71
|
}], splitButtonDataTest: [{
|
|
77
72
|
type: Input
|
|
78
|
-
}], buttonElement: [{
|
|
79
|
-
type: ViewChild,
|
|
80
|
-
args: ['button']
|
|
81
73
|
}], splitButtonElement: [{
|
|
82
74
|
type: ViewChild,
|
|
83
75
|
args: ['splitButton']
|
|
84
76
|
}], symbolComponent: [{
|
|
85
77
|
type: ContentChild,
|
|
86
78
|
args: [SymbolComponent]
|
|
87
|
-
}], click: [{
|
|
88
|
-
type: Output
|
|
89
|
-
}], focus: [{
|
|
90
|
-
type: Output
|
|
91
|
-
}], blur: [{
|
|
92
|
-
type: Output
|
|
93
79
|
}], menuOpened: [{
|
|
94
80
|
type: Output
|
|
95
81
|
}], menuClosed: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-split-button.mjs","sources":["../../../libs/ui-components/split-button/src/split-button.component.ts","../../../libs/ui-components/split-button/src/split-button.component.html","../../../libs/ui-components/split-button/src/agorapulse-ui-components-split-button.ts"],"sourcesContent":["import {\n AfterViewChecked,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n inject,\n Input,\n Output,\n SimpleChange,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport {CommonModule, NgIf} from '@angular/common';\nimport {apArrowDown1, SymbolComponent, SymbolRegistry} from '@agorapulse/ui-symbol';\nimport {MatLegacyMenu} from '@angular/material/legacy-menu';\nimport {MatMenuModule} from '@angular/material/menu';\n\ntype SplitButtonConfig = {style: 'primary'; color: 'orange' | 'blue'};\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-split-button[name]',\n styleUrls: ['./split-button.component.scss'],\n standalone: true,\n imports: [NgIf, SymbolComponent, CommonModule, MatMenuModule],\n providers: [],\n templateUrl: './split-button.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class SplitButtonComponent implements AfterViewChecked {\n private symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n @Input() ariaLabel: string;\n @Input()
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-split-button.mjs","sources":["../../../libs/ui-components/split-button/src/split-button.component.ts","../../../libs/ui-components/split-button/src/split-button.component.html","../../../libs/ui-components/split-button/src/agorapulse-ui-components-split-button.ts"],"sourcesContent":["import {\n AfterViewChecked,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n inject,\n Input,\n Output,\n SimpleChange,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport {CommonModule, NgIf} from '@angular/common';\nimport {apArrowDown1, SymbolComponent, SymbolRegistry} from '@agorapulse/ui-symbol';\nimport {MatLegacyMenu} from '@angular/material/legacy-menu';\nimport {MatMenuModule} from '@angular/material/menu';\nimport {BaseButtonDirective} from '@agorapulse/ui-components/directives';\n\ntype SplitButtonConfig = {style: 'primary'; color: 'orange' | 'blue'};\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-split-button[name]',\n styleUrls: ['./split-button.component.scss'],\n standalone: true,\n imports: [NgIf, SymbolComponent, CommonModule, MatMenuModule],\n providers: [],\n templateUrl: './split-button.component.html',\n encapsulation: ViewEncapsulation.None,\n hostDirectives: [\n {\n directive: BaseButtonDirective,\n //eslint-disable-next-line\n outputs: ['click', 'focus', 'blur'],\n },\n ],\n})\nexport class SplitButtonComponent implements AfterViewChecked {\n private symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\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() config: SplitButtonConfig;\n @Input() menuTrigger: MatLegacyMenu;\n @Input() splitDisabled: boolean = false;\n @Input() symbolPosition: 'left' | 'right' = 'right';\n @Input() splitButtonDataTest: string;\n\n @ViewChild('splitButton') splitButtonElement: ElementRef<HTMLButtonElement>;\n\n @ContentChild(SymbolComponent) symbolComponent: SymbolComponent;\n\n @Output() menuOpened: EventEmitter<void> = new EventEmitter();\n @Output() menuClosed: EventEmitter<void> = new EventEmitter();\n\n menuOpen = false;\n\n constructor() {\n this.symbolRegistry.registerSymbols([apArrowDown1]);\n }\n\n ngAfterViewChecked(): void {\n if (this.symbolComponent) {\n this.symbolComponent.size = 'micro';\n this.symbolComponent.ngOnChanges({\n size: new SimpleChange(null, this.symbolComponent.size, false),\n });\n }\n }\n\n onSplitButtonClickHandle($event: MouseEvent): void {\n $event.stopImmediatePropagation();\n }\n\n handleMenuOpened(): void {\n this.menuOpened.emit();\n this.menuOpen = true;\n this.baseButtonDirective.buttonElement.blur();\n this.splitButtonElement.nativeElement.blur();\n }\n\n handleMenuClosed(): void {\n this.menuClosed.emit();\n this.menuOpen = false;\n this.baseButtonDirective.buttonElement.blur();\n this.splitButtonElement.nativeElement.blur();\n }\n}\n","<button\n role=\"button\"\n [class.primary]=\"config.style === 'primary'\"\n [class.orange]=\"config.color === 'orange'\"\n [class.blue]=\"config.color === 'blue'\"\n [class.inverse]=\"symbolPosition === 'left'\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [attr.id]=\"baseButtonDirective.hostId\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-disabled]=\"disabled?.toString()\"\n (click)=\"baseButtonDirective.onClickHandle($event)\"\n (focus)=\"baseButtonDirective.focus.emit($event)\"\n (blur)=\"baseButtonDirective.blur.emit($event)\"\n>\n <ng-content select=\"span\"></ng-content>\n <ng-content select=\"ap-symbol\"></ng-content>\n</button>\n<button\n #splitButton\n #trigger=\"matMenuTrigger\"\n role=\"button\"\n [class.primary]=\"config.style === 'primary'\"\n [class.orange]=\"config.color === 'orange'\"\n [class.blue]=\"config.color === 'blue'\"\n [disabled]=\"splitDisabled\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-disabled]=\"splitDisabled.toString()\"\n [attr.data-test]=\"splitButtonDataTest ?? name + '-split'\"\n (click)=\"onSplitButtonClickHandle($event)\"\n [matMenuTriggerFor]=\"menuTrigger\"\n (menuClosed)=\"handleMenuClosed()\"\n (menuOpened)=\"handleMenuOpened()\"\n>\n <ap-symbol symbolId=\"arrow-down-1\"\n size=\"nano\"\n [class.opened]=\"menuOpen\"></ap-symbol>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;MAuCa,oBAAoB,CAAA;AAsB7B,IAAA,WAAA,GAAA;AArBQ,QAAA,IAAA,CAAA,cAAc,GAAmB,MAAM,CAAC,cAAc,CAAC,CAAC;QACvD,IAAmB,CAAA,mBAAA,GAAwB,MAAM,CAAC,mBAAmB,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;QAGrF,IAAQ,CAAA,QAAA,GAAwB,KAAK,CAAC;QAItC,IAAa,CAAA,aAAA,GAAY,KAAK,CAAC;QAC/B,IAAc,CAAA,cAAA,GAAqB,OAAO,CAAC;AAO1C,QAAA,IAAA,CAAA,UAAU,GAAuB,IAAI,YAAY,EAAE,CAAC;AACpD,QAAA,IAAA,CAAA,UAAU,GAAuB,IAAI,YAAY,EAAE,CAAC;QAE9D,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QAGb,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;KACvD;IAED,kBAAkB,GAAA;QACd,IAAI,IAAI,CAAC,eAAe,EAAE;AACtB,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,GAAG,OAAO,CAAC;AACpC,YAAA,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC;AAC7B,gBAAA,IAAI,EAAE,IAAI,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC;AACjE,aAAA,CAAC,CAAC;AACN,SAAA;KACJ;AAED,IAAA,wBAAwB,CAAC,MAAkB,EAAA;QACvC,MAAM,CAAC,wBAAwB,EAAE,CAAC;KACrC;IAED,gBAAgB,GAAA;AACZ,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;AACvB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;AACrB,QAAA,IAAI,CAAC,mBAAmB,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;AAC9C,QAAA,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAChD;IAED,gBAAgB,GAAA;AACZ,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;AACvB,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;AACtB,QAAA,IAAI,CAAC,mBAAmB,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;AAC9C,QAAA,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAChD;;iHAnDQ,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;qGAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,WAAA,EAAA,aAAA,EAAA,aAAA,EAAA,eAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,SAAA,EAXlB,EAAE,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EA0BC,eAAe,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,oBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,OAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,OAAA,EAAA,OAAA,EAAA,MAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtDjC,4+CAuCA,EAAA,MAAA,EAAA,CAAA,2xFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDZoB,eAAe,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,6CAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;2FAYnD,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAjBhC,SAAS;sCACW,uBAAuB,CAAC,MAAM,EACrC,QAAA,EAAA,uBAAuB,cAErB,IAAI,EAAA,OAAA,EACP,CAAC,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,CAAC,EAAA,SAAA,EAClD,EAAE,EAEE,aAAA,EAAA,iBAAiB,CAAC,IAAI,EACrB,cAAA,EAAA;AACZ,wBAAA;AACI,4BAAA,SAAS,EAAE,mBAAmB;;AAE9B,4BAAA,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC;AACtC,yBAAA;AACJ,qBAAA,EAAA,QAAA,EAAA,4+CAAA,EAAA,MAAA,EAAA,CAAA,2xFAAA,CAAA,EAAA,CAAA;0EAMQ,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,MAAM,EAAA,CAAA;sBAAd,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBACG,mBAAmB,EAAA,CAAA;sBAA3B,KAAK;gBAEoB,kBAAkB,EAAA,CAAA;sBAA3C,SAAS;uBAAC,aAAa,CAAA;gBAEO,eAAe,EAAA,CAAA;sBAA7C,YAAY;uBAAC,eAAe,CAAA;gBAEnB,UAAU,EAAA,CAAA;sBAAnB,MAAM;gBACG,UAAU,EAAA,CAAA;sBAAnB,MAAM;;;AEzDX;;AAEG;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ElementRef, EventEmitter } from '@angular/core';
|
|
2
2
|
import { SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export type ButtonType = 'flat' | 'stroked-transparent' | 'stroked';
|
|
5
5
|
export type ButtonColor = 'none' | 'blue' | 'red' | 'green';
|
|
6
|
-
export declare class IconButtonComponent
|
|
6
|
+
export declare class IconButtonComponent {
|
|
7
7
|
private symbolRegistry;
|
|
8
8
|
private elementRef;
|
|
9
9
|
ariaLabel: string;
|
|
@@ -23,9 +23,12 @@ export declare class IconButtonComponent implements AfterContentInit {
|
|
|
23
23
|
private _loading;
|
|
24
24
|
private _locked;
|
|
25
25
|
hostDataTest: string;
|
|
26
|
+
focused: boolean;
|
|
26
27
|
constructor(symbolRegistry: SymbolRegistry, elementRef: ElementRef);
|
|
27
|
-
ngAfterContentInit(): void;
|
|
28
28
|
onClickHandle($event: MouseEvent): void;
|
|
29
|
+
onBlurHandle($event: FocusEvent): void;
|
|
30
|
+
onFocusHandle($event: FocusEvent): void;
|
|
31
|
+
onSpaceKeyUp(event: KeyboardEvent): void;
|
|
29
32
|
static ɵfac: i0.ɵɵFactoryDeclaration<IconButtonComponent, never>;
|
|
30
33
|
static ɵcmp: i0.ɵɵComponentDeclaration<IconButtonComponent, "ap-icon-button", never, { "ariaLabel": "ariaLabel"; "name": "name"; "color": "color"; "disabled": "disabled"; "locked": "locked"; "loading": "loading"; "type": "type"; }, { "onClick": "onClick"; "onFocus": "onFocus"; "onBlur": "onBlur"; }, ["symbolComponent"], ["*"], true, never>;
|
|
31
34
|
}
|
package/package.json
CHANGED
|
@@ -1,24 +1,21 @@
|
|
|
1
|
-
import { ElementRef, EventEmitter } from '@angular/core';
|
|
2
1
|
import { SymbolRegistry } from '@agorapulse/ui-symbol';
|
|
2
|
+
import { BaseButtonDirective } from '@agorapulse/ui-components/directives';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
|
+
import * as i1 from "@agorapulse/ui-components/directives";
|
|
4
5
|
type Service = 'facebook' | 'instagram' | 'twitter' | 'linkedin' | 'youtube' | 'tiktok';
|
|
5
6
|
type SocialButtonType = 'default' | 'stroked';
|
|
6
7
|
export declare class SocialButtonComponent {
|
|
7
|
-
private elementRef;
|
|
8
8
|
private symbolRegistry;
|
|
9
|
+
readonly baseButtonDirective: BaseButtonDirective;
|
|
9
10
|
ariaLabel: string;
|
|
10
|
-
disabled: boolean;
|
|
11
|
-
loading: boolean;
|
|
11
|
+
disabled: boolean | undefined;
|
|
12
12
|
name: string;
|
|
13
|
+
loading: boolean | undefined;
|
|
13
14
|
network: Service;
|
|
14
15
|
buttonType: SocialButtonType;
|
|
15
|
-
click: EventEmitter<MouseEvent>;
|
|
16
|
-
focus: EventEmitter<FocusEvent>;
|
|
17
|
-
blur: EventEmitter<FocusEvent>;
|
|
18
|
-
hostDataTest: string;
|
|
19
16
|
symbolIdPerNetwork: Record<Service, Record<SocialButtonType, string>>;
|
|
20
|
-
constructor(
|
|
17
|
+
constructor(symbolRegistry: SymbolRegistry);
|
|
21
18
|
static ɵfac: i0.ɵɵFactoryDeclaration<SocialButtonComponent, never>;
|
|
22
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SocialButtonComponent, "ap-social-button[name]", never, { "ariaLabel": "ariaLabel"; "disabled": "disabled"; "
|
|
19
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SocialButtonComponent, "ap-social-button[name]", never, { "ariaLabel": "ariaLabel"; "disabled": "disabled"; "name": "name"; "loading": "loading"; "network": "network"; "buttonType": "buttonType"; }, {}, never, ["span"], true, [{ directive: typeof i1.BaseButtonDirective; inputs: {}; outputs: { "click": "click"; "focus": "focus"; "blur": "blur"; }; }]>;
|
|
23
20
|
}
|
|
24
21
|
export {};
|
|
@@ -1,39 +1,35 @@
|
|
|
1
1
|
import { AfterViewChecked, ElementRef, EventEmitter } from '@angular/core';
|
|
2
2
|
import { SymbolComponent } from '@agorapulse/ui-symbol';
|
|
3
3
|
import { MatLegacyMenu } from '@angular/material/legacy-menu';
|
|
4
|
+
import { BaseButtonDirective } from '@agorapulse/ui-components/directives';
|
|
4
5
|
import * as i0 from "@angular/core";
|
|
6
|
+
import * as i1 from "@agorapulse/ui-components/directives";
|
|
5
7
|
type SplitButtonConfig = {
|
|
6
8
|
style: 'primary';
|
|
7
9
|
color: 'orange' | 'blue';
|
|
8
10
|
};
|
|
9
11
|
export declare class SplitButtonComponent implements AfterViewChecked {
|
|
10
|
-
private elementRef;
|
|
11
12
|
private symbolRegistry;
|
|
13
|
+
readonly baseButtonDirective: BaseButtonDirective;
|
|
12
14
|
ariaLabel: string;
|
|
15
|
+
disabled: boolean | undefined;
|
|
16
|
+
name: string;
|
|
13
17
|
config: SplitButtonConfig;
|
|
14
18
|
menuTrigger: MatLegacyMenu;
|
|
15
|
-
disabled: boolean;
|
|
16
19
|
splitDisabled: boolean;
|
|
17
|
-
name: string;
|
|
18
20
|
symbolPosition: 'left' | 'right';
|
|
19
21
|
splitButtonDataTest: string;
|
|
20
|
-
buttonElement: ElementRef<HTMLButtonElement>;
|
|
21
22
|
splitButtonElement: ElementRef<HTMLButtonElement>;
|
|
22
23
|
symbolComponent: SymbolComponent;
|
|
23
|
-
click: EventEmitter<MouseEvent>;
|
|
24
|
-
focus: EventEmitter<FocusEvent>;
|
|
25
|
-
blur: EventEmitter<FocusEvent>;
|
|
26
24
|
menuOpened: EventEmitter<void>;
|
|
27
25
|
menuClosed: EventEmitter<void>;
|
|
28
|
-
hostDataTest: string;
|
|
29
26
|
menuOpen: boolean;
|
|
30
|
-
constructor(
|
|
27
|
+
constructor();
|
|
31
28
|
ngAfterViewChecked(): void;
|
|
32
|
-
onClickHandle($event: MouseEvent): void;
|
|
33
29
|
onSplitButtonClickHandle($event: MouseEvent): void;
|
|
34
30
|
handleMenuOpened(): void;
|
|
35
31
|
handleMenuClosed(): void;
|
|
36
32
|
static ɵfac: i0.ɵɵFactoryDeclaration<SplitButtonComponent, never>;
|
|
37
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SplitButtonComponent, "ap-split-button[name]", never, { "ariaLabel": "ariaLabel"; "
|
|
33
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SplitButtonComponent, "ap-split-button[name]", never, { "ariaLabel": "ariaLabel"; "disabled": "disabled"; "name": "name"; "config": "config"; "menuTrigger": "menuTrigger"; "splitDisabled": "splitDisabled"; "symbolPosition": "symbolPosition"; "splitButtonDataTest": "splitButtonDataTest"; }, { "menuOpened": "menuOpened"; "menuClosed": "menuClosed"; }, ["symbolComponent"], ["span", "ap-symbol"], true, [{ directive: typeof i1.BaseButtonDirective; inputs: {}; outputs: { "click": "click"; "focus": "focus"; "blur": "blur"; }; }]>;
|
|
38
34
|
}
|
|
39
35
|
export {};
|
|
Binary file
|