@agorapulse/ui-components 18.0.17 → 18.0.18
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-18.0.18.tgz +0 -0
- package/esm2022/avatar/avatar.component.mjs +2 -2
- package/esm2022/button/button.component.mjs +5 -4
- package/esm2022/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/icon-button/icon-button.component.mjs +4 -4
- package/esm2022/infobox/infobox.component.mjs +4 -18
- package/esm2022/radio/radio.component.mjs +3 -3
- package/esm2022/split-button/split-button.component.mjs +4 -4
- package/esm2022/tag/tag.component.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-avatar.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-avatar.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-button.mjs +4 -3
- package/fesm2022/agorapulse-ui-components-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-checkbox.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-checkbox.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-icon-button.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-icon-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-infobox.mjs +3 -17
- package/fesm2022/agorapulse-ui-components-infobox.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-radio.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-radio.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-split-button.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-split-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-tag.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-tag.mjs.map +1 -1
- package/infobox/infobox.component.d.ts +1 -7
- package/package.json +1 -1
- package/agorapulse-ui-components-18.0.17.tgz +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i1 from '@agorapulse/ui-components/directives';
|
|
2
2
|
import { BaseButtonDirective } from '@agorapulse/ui-components/directives';
|
|
3
|
-
import { SymbolRegistry, apChevronDown, SymbolComponent
|
|
3
|
+
import { SymbolRegistry, apChevronDown, SymbolComponent } from '@agorapulse/ui-symbol';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
5
|
import { inject, input, EventEmitter, booleanAttribute, HostListener, Output, ContentChild, ViewChild, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
6
6
|
import * as i2 from '@angular/material/menu';
|
|
@@ -73,11 +73,11 @@ class SplitButtonComponent {
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
76
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: SplitButtonComponent, isStandalone: true, selector: "ap-split-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: true, transformFunction: null }, menuTrigger: { classPropertyName: "menuTrigger", publicName: "menuTrigger", isSignal: false, isRequired: false, transformFunction: null }, splitDisabled: { classPropertyName: "splitDisabled", publicName: "splitDisabled", isSignal: false, isRequired: false, transformFunction: null }, symbolPosition: { classPropertyName: "symbolPosition", publicName: "symbolPosition", isSignal: false, isRequired: false, transformFunction: null }, splitButtonDataTest: { classPropertyName: "splitButtonDataTest", publicName: "splitButtonDataTest", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed", mainButtonClick: "mainButtonClick", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "(disabled && splitDisabled) || null" } },
|
|
76
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: SplitButtonComponent, isStandalone: true, selector: "ap-split-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: true, transformFunction: null }, menuTrigger: { classPropertyName: "menuTrigger", publicName: "menuTrigger", isSignal: false, isRequired: false, transformFunction: null }, splitDisabled: { classPropertyName: "splitDisabled", publicName: "splitDisabled", isSignal: false, isRequired: false, transformFunction: null }, symbolPosition: { classPropertyName: "symbolPosition", publicName: "symbolPosition", isSignal: false, isRequired: false, transformFunction: null }, splitButtonDataTest: { classPropertyName: "splitButtonDataTest", publicName: "splitButtonDataTest", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed", mainButtonClick: "mainButtonClick", focus: "focus", blur: "blur" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" }, properties: { "attr.disabled": "(disabled && splitDisabled) || null" } }, queries: [{ propertyName: "symbolComponent", first: true, predicate: SymbolComponent, descendants: true }], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true }, { propertyName: "splitButtonElement", first: true, predicate: ["splitButton"], descendants: true }], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: "<button\n #button\n type=\"button\"\n [class.primary]=\"config.style === 'primary'\"\n [class.orange]=\"config.color === 'orange'\"\n [class.blue]=\"config.color === 'blue'\"\n [class.inverse]=\"symbolPosition === 'left'\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [id]=\"id\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n (click)=\"onClickHandle($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\">\n <ng-content select=\"span\">\n <span>Button text</span>\n </ng-content>\n @if (symbolId()) {\n <ap-symbol [symbolId]=\"symbolId()\" />\n } @else {\n <ng-content select=\"ap-symbol\" />\n }\n</button>\n<button\n #splitButton\n type=\"button\"\n [class.primary]=\"config.style === 'primary'\"\n [class.orange]=\"config.color === 'orange'\"\n [class.blue]=\"config.color === 'blue'\"\n [disabled]=\"splitDisabled\"\n [id]=\"id + '-split'\"\n [attr.aria-labelledby]=\"id + '-split ' + id\"\n [attr.data-test]=\"splitButtonDataTest ?? name + '-split'\"\n [matMenuTriggerFor]=\"menuTrigger\"\n (click)=\"onSplitButtonClickHandle($event)\"\n (menuClosed)=\"handleMenuClosed()\"\n (menuOpened)=\"handleMenuOpened()\">\n <ap-symbol\n symbolId=\"chevron-down\"\n size=\"sm\"\n [class.opened]=\"menuOpen\" />\n <span class=\"visually-hidden\">Toggle</span>\n</button>\n", styles: ["ap-split-button{--loading-bar-width: 50px;display:inline-flex;gap:1px;position:relative}ap-split-button[disabled]{pointer-events:none}ap-split-button button{border:none;position:relative;padding:var(--comp-split-button-padding-horizontal) var(--comp-split-button-padding-vertical);max-height:var(--comp-button-height);min-height:var(--comp-button-height);overflow:hidden;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px}ap-split-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-split-button button.inverse{flex-direction:row-reverse}ap-split-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-split-button button:disabled{pointer-events:none}@media (hover: hover){ap-split-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px;z-index:10}}ap-split-button button span{font-size:var(--comp-split-button-text-size);font-family:var(--comp-split-button-text-font-family);line-height:var(--comp-split-button-text-line-height);font-weight:var(--comp-split-button-text-weight);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}ap-split-button button.loading{pointer-events:none}ap-split-button button.primary span,ap-split-button button.primary ap-symbol{color:var(--ref-color-white)}ap-split-button button.primary.orange{background:var(--ref-color-orange-100)}ap-split-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-split-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-split-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-split-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-split-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-split-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-split-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-split-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-split-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-split-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-split-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-split-button button:first-child{border-top-left-radius:var(--comp-split-button-border-radius);border-bottom-left-radius:var(--comp-split-button-border-radius)}ap-split-button button:last-child{border-top-right-radius:var(--comp-split-button-border-radius);border-bottom-right-radius:var(--comp-split-button-border-radius);padding:var(--comp-split-button-padding-horizontal) 10px var(--comp-split-button-padding-horizontal) 10px}ap-split-button button ap-symbol{will-change:transform;transition:.2s ease-in-out}ap-split-button button ap-symbol.opened{transform:rotate(180deg)}.visually-hidden{width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;position:absolute!important}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
77
77
|
}
|
|
78
78
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SplitButtonComponent, decorators: [{
|
|
79
79
|
type: Component,
|
|
80
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-split-button', standalone: true, imports: [SymbolComponent, MatMenuModule],
|
|
80
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-split-button', standalone: true, imports: [SymbolComponent, MatMenuModule], encapsulation: ViewEncapsulation.None, hostDirectives: [BaseButtonDirective], host: {
|
|
81
81
|
'[attr.disabled]': '(disabled && splitDisabled) || null',
|
|
82
82
|
}, template: "<button\n #button\n type=\"button\"\n [class.primary]=\"config.style === 'primary'\"\n [class.orange]=\"config.color === 'orange'\"\n [class.blue]=\"config.color === 'blue'\"\n [class.inverse]=\"symbolPosition === 'left'\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [id]=\"id\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n (click)=\"onClickHandle($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\">\n <ng-content select=\"span\">\n <span>Button text</span>\n </ng-content>\n @if (symbolId()) {\n <ap-symbol [symbolId]=\"symbolId()\" />\n } @else {\n <ng-content select=\"ap-symbol\" />\n }\n</button>\n<button\n #splitButton\n type=\"button\"\n [class.primary]=\"config.style === 'primary'\"\n [class.orange]=\"config.color === 'orange'\"\n [class.blue]=\"config.color === 'blue'\"\n [disabled]=\"splitDisabled\"\n [id]=\"id + '-split'\"\n [attr.aria-labelledby]=\"id + '-split ' + id\"\n [attr.data-test]=\"splitButtonDataTest ?? name + '-split'\"\n [matMenuTriggerFor]=\"menuTrigger\"\n (click)=\"onSplitButtonClickHandle($event)\"\n (menuClosed)=\"handleMenuClosed()\"\n (menuOpened)=\"handleMenuOpened()\">\n <ap-symbol\n symbolId=\"chevron-down\"\n size=\"sm\"\n [class.opened]=\"menuOpen\" />\n <span class=\"visually-hidden\">Toggle</span>\n</button>\n", styles: ["ap-split-button{--loading-bar-width: 50px;display:inline-flex;gap:1px;position:relative}ap-split-button[disabled]{pointer-events:none}ap-split-button button{border:none;position:relative;padding:var(--comp-split-button-padding-horizontal) var(--comp-split-button-padding-vertical);max-height:var(--comp-button-height);min-height:var(--comp-button-height);overflow:hidden;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px}ap-split-button button ap-symbol{width:16px;min-width:16px;max-width:16px;height:16px;min-height:16px;max-height:16px}ap-split-button button.inverse{flex-direction:row-reverse}ap-split-button button:hover:not(:disabled):not(.loading){cursor:pointer}ap-split-button button:disabled{pointer-events:none}@media (hover: hover){ap-split-button button:focus:not(:disabled):not(:active):not(.loading){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px;z-index:10}}ap-split-button button span{font-size:var(--comp-split-button-text-size);font-family:var(--comp-split-button-text-font-family);line-height:var(--comp-split-button-text-line-height);font-weight:var(--comp-split-button-text-weight);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}ap-split-button button.loading{pointer-events:none}ap-split-button button.primary span,ap-split-button button.primary ap-symbol{color:var(--ref-color-white)}ap-split-button button.primary.orange{background:var(--ref-color-orange-100)}ap-split-button button.primary.orange:hover{background-color:var(--ref-color-orange-80)}ap-split-button button.primary.orange:active:not(:disabled){background-color:var(--ref-color-orange-60)}ap-split-button button.primary.orange:disabled{background-color:var(--ref-color-orange-20)}ap-split-button button.primary.orange.loading{background-color:var(--ref-color-orange-60)}ap-split-button button.primary.orange .loading-bar{background-color:var(--ref-color-orange-100)}ap-split-button button.primary.blue{background:var(--ref-color-electric-blue-100)}ap-split-button button.primary.blue:hover{background-color:var(--ref-color-electric-blue-80)}ap-split-button button.primary.blue:active:not(:disabled){background-color:var(--ref-color-electric-blue-60)}ap-split-button button.primary.blue:disabled{background-color:var(--ref-color-electric-blue-20)}ap-split-button button.primary.blue.loading{background-color:var(--ref-color-electric-blue-60)}ap-split-button button.primary.blue .loading-bar{background-color:var(--ref-color-electric-blue-100)}ap-split-button button:first-child{border-top-left-radius:var(--comp-split-button-border-radius);border-bottom-left-radius:var(--comp-split-button-border-radius)}ap-split-button button:last-child{border-top-right-radius:var(--comp-split-button-border-radius);border-bottom-right-radius:var(--comp-split-button-border-radius);padding:var(--comp-split-button-padding-horizontal) 10px var(--comp-split-button-padding-horizontal) 10px}ap-split-button button ap-symbol{will-change:transform;transition:.2s ease-in-out}ap-split-button button ap-symbol.opened{transform:rotate(180deg)}.visually-hidden{width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;position:absolute!important}\n"] }]
|
|
83
83
|
}], ctorParameters: () => [], propDecorators: { buttonElement: [{
|
|
@@ -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 { BaseButtonDirective } from '@agorapulse/ui-components/directives';\nimport { agorapulseSymbol, apChevronDown, completeIconSet, SymbolComponent, SymbolRegistry, withSymbols } from '@agorapulse/ui-symbol';\nimport {\n AfterContentInit,\n AfterViewInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n HostListener,\n inject,\n input,\n Input,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { MatMenu, MatMenuModule } from '@angular/material/menu';\n\ntype SplitButtonConfig = { style: 'primary'; color: 'orange' | 'blue' };\n\nlet id = 1;\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-split-button',\n styleUrls: ['./split-button.component.scss'],\n standalone: true,\n imports: [SymbolComponent, MatMenuModule],\n providers: [withSymbols(...completeIconSet)],\n templateUrl: './split-button.component.html',\n encapsulation: ViewEncapsulation.None,\n hostDirectives: [BaseButtonDirective],\n // eslint-disable-next-line @angular-eslint/no-host-metadata-property\n host: {\n '[attr.disabled]': '(disabled && splitDisabled) || null',\n },\n})\nexport class SplitButtonComponent implements AfterContentInit, AfterViewInit {\n private symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n readonly baseButtonDirective: BaseButtonDirective = inject(BaseButtonDirective, { self: true });\n\n @ViewChild('button') buttonElement!: ElementRef<HTMLButtonElement>;\n\n @Input({ transform: booleanAttribute })\n disabled: boolean = false;\n @Input({ required: true })\n name = '';\n @Input({ required: true })\n config!: SplitButtonConfig;\n @Input() menuTrigger: MatMenu | null = null;\n @Input() splitDisabled: boolean = false;\n @Input() symbolPosition: 'left' | 'right' = 'right';\n @Input() splitButtonDataTest: string | undefined = undefined;\n symbolId = input<agorapulseSymbol>();\n\n @ViewChild('splitButton') splitButtonElement!: ElementRef<HTMLButtonElement>;\n\n @ContentChild(SymbolComponent) symbolComponent!: SymbolComponent;\n\n @Output() menuOpened: EventEmitter<void> = new EventEmitter();\n @Output() menuClosed: EventEmitter<void> = new EventEmitter();\n @Output() mainButtonClick: EventEmitter<MouseEvent> = new EventEmitter();\n // eslint-disable-next-line @angular-eslint/no-output-native\n @Output() focus: EventEmitter<FocusEvent> = new EventEmitter();\n // eslint-disable-next-line @angular-eslint/no-output-native\n @Output() blur: EventEmitter<FocusEvent> = new EventEmitter();\n\n id!: string;\n menuOpen = false;\n\n constructor() {\n this.symbolRegistry.registerSymbols([apChevronDown]);\n }\n\n ngAfterViewInit() {\n this.id = this.baseButtonDirective.hostId ?? `ap-split-button-${id++}`;\n }\n\n ngAfterContentInit() {\n if (this.symbolComponent) {\n this.symbolComponent.size.set('sm');\n }\n }\n\n onSplitButtonClickHandle($event: MouseEvent): void {\n $event.stopImmediatePropagation();\n }\n\n handleMenuOpened(): void {\n this.menuOpened.emit();\n this.menuOpen = true;\n this.buttonElement.nativeElement.blur();\n this.splitButtonElement.nativeElement.blur();\n }\n\n handleMenuClosed(): void {\n this.menuClosed.emit();\n this.menuOpen = false;\n this.buttonElement.nativeElement.blur();\n this.splitButtonElement.nativeElement.blur();\n }\n\n focused: boolean = false;\n\n onClickHandle($event: MouseEvent): void {\n if (this.disabled) {\n return;\n }\n $event.stopImmediatePropagation();\n this.mainButtonClick.emit($event);\n this.buttonElement.nativeElement.blur();\n this.blur.emit($event);\n }\n\n @HostListener('window:keyup.space', ['$event'])\n onSpaceKeyUp(event: KeyboardEvent) {\n if (this.focused) {\n event.preventDefault();\n this.buttonElement.nativeElement.click();\n }\n }\n}\n","<button\n #button\n type=\"button\"\n [class.primary]=\"config.style === 'primary'\"\n [class.orange]=\"config.color === 'orange'\"\n [class.blue]=\"config.color === 'blue'\"\n [class.inverse]=\"symbolPosition === 'left'\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [id]=\"id\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n (click)=\"onClickHandle($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\">\n <ng-content select=\"span\">\n <span>Button text</span>\n </ng-content>\n @if (symbolId()) {\n <ap-symbol [symbolId]=\"symbolId()\" />\n } @else {\n <ng-content select=\"ap-symbol\" />\n }\n</button>\n<button\n #splitButton\n type=\"button\"\n [class.primary]=\"config.style === 'primary'\"\n [class.orange]=\"config.color === 'orange'\"\n [class.blue]=\"config.color === 'blue'\"\n [disabled]=\"splitDisabled\"\n [id]=\"id + '-split'\"\n [attr.aria-labelledby]=\"id + '-split ' + id\"\n [attr.data-test]=\"splitButtonDataTest ?? name + '-split'\"\n [matMenuTriggerFor]=\"menuTrigger\"\n (click)=\"onSplitButtonClickHandle($event)\"\n (menuClosed)=\"handleMenuClosed()\"\n (menuOpened)=\"handleMenuOpened()\">\n <ap-symbol\n symbolId=\"chevron-down\"\n size=\"sm\"\n [class.opened]=\"menuOpen\" />\n <span class=\"visually-hidden\">Toggle</span>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
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 { BaseButtonDirective } from '@agorapulse/ui-components/directives';\nimport { agorapulseSymbol, apChevronDown, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport {\n AfterContentInit,\n AfterViewInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n HostListener,\n inject,\n input,\n Input,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { MatMenu, MatMenuModule } from '@angular/material/menu';\n\ntype SplitButtonConfig = { style: 'primary'; color: 'orange' | 'blue' };\n\nlet id = 1;\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-split-button',\n styleUrls: ['./split-button.component.scss'],\n standalone: true,\n imports: [SymbolComponent, MatMenuModule],\n templateUrl: './split-button.component.html',\n encapsulation: ViewEncapsulation.None,\n hostDirectives: [BaseButtonDirective],\n // eslint-disable-next-line @angular-eslint/no-host-metadata-property\n host: {\n '[attr.disabled]': '(disabled && splitDisabled) || null',\n },\n})\nexport class SplitButtonComponent implements AfterContentInit, AfterViewInit {\n private symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n readonly baseButtonDirective: BaseButtonDirective = inject(BaseButtonDirective, { self: true });\n\n @ViewChild('button') buttonElement!: ElementRef<HTMLButtonElement>;\n\n @Input({ transform: booleanAttribute })\n disabled: boolean = false;\n @Input({ required: true })\n name = '';\n @Input({ required: true })\n config!: SplitButtonConfig;\n @Input() menuTrigger: MatMenu | null = null;\n @Input() splitDisabled: boolean = false;\n @Input() symbolPosition: 'left' | 'right' = 'right';\n @Input() splitButtonDataTest: string | undefined = undefined;\n symbolId = input<agorapulseSymbol>();\n\n @ViewChild('splitButton') splitButtonElement!: ElementRef<HTMLButtonElement>;\n\n @ContentChild(SymbolComponent) symbolComponent!: SymbolComponent;\n\n @Output() menuOpened: EventEmitter<void> = new EventEmitter();\n @Output() menuClosed: EventEmitter<void> = new EventEmitter();\n @Output() mainButtonClick: EventEmitter<MouseEvent> = new EventEmitter();\n // eslint-disable-next-line @angular-eslint/no-output-native\n @Output() focus: EventEmitter<FocusEvent> = new EventEmitter();\n // eslint-disable-next-line @angular-eslint/no-output-native\n @Output() blur: EventEmitter<FocusEvent> = new EventEmitter();\n\n id!: string;\n menuOpen = false;\n\n constructor() {\n this.symbolRegistry.registerSymbols([apChevronDown]);\n }\n\n ngAfterViewInit() {\n this.id = this.baseButtonDirective.hostId ?? `ap-split-button-${id++}`;\n }\n\n ngAfterContentInit() {\n if (this.symbolComponent) {\n this.symbolComponent.size.set('sm');\n }\n }\n\n onSplitButtonClickHandle($event: MouseEvent): void {\n $event.stopImmediatePropagation();\n }\n\n handleMenuOpened(): void {\n this.menuOpened.emit();\n this.menuOpen = true;\n this.buttonElement.nativeElement.blur();\n this.splitButtonElement.nativeElement.blur();\n }\n\n handleMenuClosed(): void {\n this.menuClosed.emit();\n this.menuOpen = false;\n this.buttonElement.nativeElement.blur();\n this.splitButtonElement.nativeElement.blur();\n }\n\n focused: boolean = false;\n\n onClickHandle($event: MouseEvent): void {\n if (this.disabled) {\n return;\n }\n $event.stopImmediatePropagation();\n this.mainButtonClick.emit($event);\n this.buttonElement.nativeElement.blur();\n this.blur.emit($event);\n }\n\n @HostListener('window:keyup.space', ['$event'])\n onSpaceKeyUp(event: KeyboardEvent) {\n if (this.focused) {\n event.preventDefault();\n this.buttonElement.nativeElement.click();\n }\n }\n}\n","<button\n #button\n type=\"button\"\n [class.primary]=\"config.style === 'primary'\"\n [class.orange]=\"config.color === 'orange'\"\n [class.blue]=\"config.color === 'blue'\"\n [class.inverse]=\"symbolPosition === 'left'\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [id]=\"id\"\n [attr.data-test]=\"baseButtonDirective.hostDataTest ?? name\"\n (click)=\"onClickHandle($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\">\n <ng-content select=\"span\">\n <span>Button text</span>\n </ng-content>\n @if (symbolId()) {\n <ap-symbol [symbolId]=\"symbolId()\" />\n } @else {\n <ng-content select=\"ap-symbol\" />\n }\n</button>\n<button\n #splitButton\n type=\"button\"\n [class.primary]=\"config.style === 'primary'\"\n [class.orange]=\"config.color === 'orange'\"\n [class.blue]=\"config.color === 'blue'\"\n [disabled]=\"splitDisabled\"\n [id]=\"id + '-split'\"\n [attr.aria-labelledby]=\"id + '-split ' + id\"\n [attr.data-test]=\"splitButtonDataTest ?? name + '-split'\"\n [matMenuTriggerFor]=\"menuTrigger\"\n (click)=\"onSplitButtonClickHandle($event)\"\n (menuClosed)=\"handleMenuClosed()\"\n (menuOpened)=\"handleMenuOpened()\">\n <ap-symbol\n symbolId=\"chevron-down\"\n size=\"sm\"\n [class.opened]=\"menuOpen\" />\n <span class=\"visually-hidden\">Toggle</span>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CloseButtonComponent } from '@agorapulse/ui-components/close-button';
|
|
2
|
-
import { SymbolRegistry, apDeleteNoCircle
|
|
2
|
+
import { SymbolRegistry, apDeleteNoCircle } from '@agorapulse/ui-symbol';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { inject, ElementRef, EventEmitter, viewChild, computed, booleanAttribute, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
5
|
|
|
@@ -25,7 +25,7 @@ class TagComponent {
|
|
|
25
25
|
}
|
|
26
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TagComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tag', standalone: true, imports: [
|
|
28
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tag', standalone: true, imports: [CloseButtonComponent], encapsulation: ViewEncapsulation.None, template: "<div\n [class.blue]=\"color === 'blue'\"\n [class.menthol]=\"color === 'menthol'\"\n [class.grey]=\"color === 'grey'\"\n [class.tagOrange]=\"color === 'tagOrange'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.clearable]=\"clearable\"\n [class.mini]=\"mini\">\n <ng-content select=\"ap-symbol\" />\n <ng-content select=\"ap-avatar\" />\n\n <span #contentWrapper>\n <ng-content>Tag text</ng-content>\n </span>\n\n @if (clearable) {\n <!-- FIXME implement as a directive and combine with a button tag to have to full access to all attributes (aria-labelledby) -->\n <ap-close-button\n [ariaLabel]=\"'clear ' + contentText()\"\n (closed)=\"onClear($event)\" />\n }\n</div>\n", styles: ["ap-tag{--avatar-size: 16px;--button-size: 20px;display:inline-flex;vertical-align:middle}ap-tag>div{display:flex;align-items:center;justify-content:center;height:var(--comp-tag-height);max-height:var(--height);box-sizing:border-box;border-width:1px;border-style:solid;padding:0 var(--comp-tag-padding-right) 0 var(--comp-tag-padding-left);border-radius:var(--comp-tag-border-radius);gap:var(--ref-spacing-xxxs)}ap-tag>div.clearable{padding:0 calc(var(--comp-tag-closable-padding-right) - 1px) 0 var(--comp-tag-padding-left)}ap-tag>div.mini{height:var(--comp-tag-mini-height);padding:0 var(--comp-tag-mini-padding-right) 0 var(--comp-tag-mini-padding-left)}ap-tag>div span{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--comp-tag-text-style-size);line-height:var(--comp-tag-text-style-line-height);font-weight:var(--comp-tag-text-style-font-weight);font-family:var(--comp-tag-text-style-font-family)}ap-tag>div ap-avatar{min-width:var(--avatar-size);width:var(--avatar-size);max-width:var(--avatar-size);min-height:var(--avatar-size);height:var(--avatar-size);max-height:var(--avatar-size)}ap-tag>div ap-avatar img{width:var(--avatar-size);height:var(--avatar-size)}ap-tag>div.blue{background-color:var(--comp-tag-blue-background-color);border-color:var(--comp-tag-blue-border-color);color:var(--comp-tag-blue-text-color)}ap-tag>div.grey{background-color:var(--comp-tag-grey-background-color);border-color:var(--comp-tag-grey-border-color);color:var(--comp-tag-grey-text-color)}ap-tag>div.tagOrange{background-color:var(--comp-tag-tag-orange-background-color);border-color:var(--comp-tag-tag-orange-border-color);color:var(--comp-tag-tag-orange-text-color)}ap-tag>div.menthol{background-color:var(--comp-tag-menthol-background-color);border-color:var(--comp-tag-menthol-border-color);color:var(--comp-tag-menthol-text-color)}ap-tag>div.green{background-color:var(--comp-tag-green-background-color);border-color:var(--comp-tag-green-border-color);color:var(--comp-tag-green-text-color)}ap-tag>div.red{background-color:var(--comp-tag-red-background-color);border-color:var(--comp-tag-red-border-color);color:var(--comp-tag-red-text-color)}\n"] }]
|
|
29
29
|
}], ctorParameters: () => [], propDecorators: { clearable: [{
|
|
30
30
|
type: Input,
|
|
31
31
|
args: [{ transform: booleanAttribute }]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-tag.mjs","sources":["../../../libs/ui-components/tag/src/tag.component.ts","../../../libs/ui-components/tag/src/tag.component.html","../../../libs/ui-components/tag/src/agorapulse-ui-components-tag.ts"],"sourcesContent":["import { CloseButtonComponent } from '@agorapulse/ui-components/close-button';\nimport { apDeleteNoCircle,
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-tag.mjs","sources":["../../../libs/ui-components/tag/src/tag.component.ts","../../../libs/ui-components/tag/src/tag.component.html","../../../libs/ui-components/tag/src/agorapulse-ui-components-tag.ts"],"sourcesContent":["import { CloseButtonComponent } from '@agorapulse/ui-components/close-button';\nimport { apDeleteNoCircle, SymbolRegistry } from '@agorapulse/ui-symbol';\n\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n EventEmitter,\n inject,\n Input,\n Output,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\n\nexport type TagColor = 'blue' | 'grey' | 'menthol' | 'tagOrange' | 'red' | 'green';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-tag',\n standalone: true,\n templateUrl: './tag.component.html',\n imports: [CloseButtonComponent],\n styleUrls: ['./tag.component.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class TagComponent {\n private readonly elementRef: ElementRef = inject(ElementRef);\n private readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n\n constructor() {\n this.symbolRegistry.registerSymbols([apDeleteNoCircle]);\n }\n\n @Input({ transform: booleanAttribute }) clearable: boolean = false;\n @Input() color: TagColor = 'blue';\n @Input() mini = false;\n\n @Output() clear = new EventEmitter<{ $event: MouseEvent | PointerEvent }>();\n\n content = viewChild.required<ElementRef>('contentWrapper');\n contentText = computed(() => this.content().nativeElement.innerText);\n\n onClear($event: MouseEvent | PointerEvent): void {\n $event.stopImmediatePropagation();\n this.elementRef.nativeElement.remove();\n this.clear.emit({ $event });\n }\n}\n","<div\n [class.blue]=\"color === 'blue'\"\n [class.menthol]=\"color === 'menthol'\"\n [class.grey]=\"color === 'grey'\"\n [class.tagOrange]=\"color === 'tagOrange'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.clearable]=\"clearable\"\n [class.mini]=\"mini\">\n <ng-content select=\"ap-symbol\" />\n <ng-content select=\"ap-avatar\" />\n\n <span #contentWrapper>\n <ng-content>Tag text</ng-content>\n </span>\n\n @if (clearable) {\n <!-- FIXME implement as a directive and combine with a button tag to have to full access to all attributes (aria-labelledby) -->\n <ap-close-button\n [ariaLabel]=\"'clear ' + contentText()\"\n (closed)=\"onClear($event)\" />\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;MA4Ba,YAAY,CAAA;AACJ,IAAA,UAAU,GAAe,MAAM,CAAC,UAAU,CAAC;AAC3C,IAAA,cAAc,GAAmB,MAAM,CAAC,cAAc,CAAC;AAExE,IAAA,WAAA,GAAA;QACI,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,CAAC;;IAGnB,SAAS,GAAY,KAAK;IACzD,KAAK,GAAa,MAAM;IACxB,IAAI,GAAG,KAAK;AAEX,IAAA,KAAK,GAAG,IAAI,YAAY,EAAyC;AAE3E,IAAA,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAa,gBAAgB,CAAC;AAC1D,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC;AAEpE,IAAA,OAAO,CAAC,MAAiC,EAAA;QACrC,MAAM,CAAC,wBAAwB,EAAE;AACjC,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,EAAE;QACtC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;;uGApBtB,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,EAQD,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,CAAA,WAAA,EAAA,WAAA,EAAA,gBAAgB,CCpCxC,EAAA,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,0xBAuBA,8rEDCc,oBAAoB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAIrB,YAAY,EAAA,UAAA,EAAA,CAAA;kBATxB,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACrC,QAAA,EAAA,QAAQ,EACN,UAAA,EAAA,IAAI,EAEP,OAAA,EAAA,CAAC,oBAAoB,CAAC,EAEhB,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,0xBAAA,EAAA,MAAA,EAAA,CAAA,soEAAA,CAAA,EAAA;wDAUG,SAAS,EAAA,CAAA;sBAAhD,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;gBAC7B,KAAK,EAAA,CAAA;sBAAb;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBAES,KAAK,EAAA,CAAA;sBAAd;;;AExCL;;AAEG;;;;"}
|
|
@@ -1,21 +1,15 @@
|
|
|
1
1
|
import { agorapulseSymbol } from '@agorapulse/ui-symbol';
|
|
2
2
|
import { EventEmitter } from '@angular/core';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
|
-
export type InfoboxDirection = 'column' | 'row';
|
|
5
|
-
export type InfoboxWidth = 'fit' | 'full-width';
|
|
6
4
|
export declare class InfoboxComponent {
|
|
7
5
|
private readonly symbolRegistry;
|
|
8
6
|
private readonly elementRef;
|
|
9
|
-
fullWidth: boolean;
|
|
10
7
|
buttonId: string | null;
|
|
11
8
|
buttonLabel: string | undefined;
|
|
12
9
|
buttonDataTrack: string | null;
|
|
13
10
|
closable: boolean;
|
|
14
11
|
title?: string;
|
|
15
12
|
type: 'info' | 'warning' | 'error' | 'success';
|
|
16
|
-
set width(width: InfoboxWidth);
|
|
17
|
-
get width(): InfoboxWidth;
|
|
18
|
-
private _width;
|
|
19
13
|
buttonClicked: EventEmitter<void>;
|
|
20
14
|
closed: EventEmitter<void>;
|
|
21
15
|
displayDirection: 'horizontal' | 'vertical';
|
|
@@ -27,6 +21,6 @@ export declare class InfoboxComponent {
|
|
|
27
21
|
onClickButton(): void;
|
|
28
22
|
onCloseInfobox(): void;
|
|
29
23
|
static ɵfac: i0.ɵɵFactoryDeclaration<InfoboxComponent, never>;
|
|
30
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<InfoboxComponent, "ap-infobox", never, { "buttonId": { "alias": "buttonId"; "required": false; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; }; "buttonDataTrack": { "alias": "buttonDataTrack"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "title": { "alias": "title"; "required": false; }; "type": { "alias": "type"; "required": false; };
|
|
24
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<InfoboxComponent, "ap-infobox", never, { "buttonId": { "alias": "buttonId"; "required": false; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; }; "buttonDataTrack": { "alias": "buttonDataTrack"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "title": { "alias": "title"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, { "buttonClicked": "buttonClicked"; "closed": "closed"; }, never, ["*"], true, never>;
|
|
31
25
|
static ngAcceptInputType_closable: unknown;
|
|
32
26
|
}
|
package/package.json
CHANGED
|
Binary file
|