@agorapulse/ui-components 18.0.16 → 18.0.17
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.17.tgz +0 -0
- package/button/button.component.d.ts +2 -2
- package/esm2022/add-comment/add-comment.component.mjs +1 -1
- package/esm2022/badge/badge.component.mjs +3 -3
- package/esm2022/button/button.component.mjs +7 -14
- package/esm2022/confirm-modal/confirm-modal.component.mjs +2 -2
- package/esm2022/counter/counter.component.mjs +3 -3
- package/esm2022/icon-button/icon-button.component.mjs +6 -5
- package/esm2022/infobox/infobox.component.mjs +14 -7
- package/esm2022/labels/label.component.mjs +4 -5
- package/esm2022/modal/modal.component.mjs +1 -1
- package/esm2022/nav-selector/nav-selector-group/nav-selector-group.component.mjs +13 -3
- package/esm2022/nav-selector/nav-selector-leaf/nav-selector-leaf.component.mjs +9 -3
- package/esm2022/nav-selector/nav-selector-leaf-detail/nav-selector-leaf-detail.component.mjs +6 -4
- package/esm2022/nav-selector/nav-selector-popover/nav-selector-popover-item.component.mjs +9 -5
- package/esm2022/nav-selector/nav-selector-popover/nav-selector-popover.component.mjs +6 -4
- package/esm2022/nav-selector/nav-selector.component.mjs +2 -2
- package/esm2022/neo-datepicker/neo-datepicker.component.mjs +1 -1
- package/esm2022/paginator/paginator.component.mjs +2 -4
- package/esm2022/radio/radio.component.mjs +3 -4
- package/esm2022/social-button/social-button.component.mjs +3 -3
- package/esm2022/split-button/split-button.component.mjs +7 -6
- package/esm2022/status/status.component.mjs +3 -3
- package/esm2022/status-card/status-card.component.mjs +3 -4
- package/esm2022/tag/tag.component.mjs +3 -3
- package/esm2022/toggle/toggle.component.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-add-comment.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-add-comment.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-badge.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-badge.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-button.mjs +6 -13
- package/fesm2022/agorapulse-ui-components-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-confirm-modal.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-confirm-modal.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-counter.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-counter.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-icon-button.mjs +5 -4
- package/fesm2022/agorapulse-ui-components-icon-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-infobox.mjs +12 -5
- package/fesm2022/agorapulse-ui-components-infobox.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-labels.mjs +3 -4
- package/fesm2022/agorapulse-ui-components-labels.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-modal.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-modal.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs +38 -15
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-neo-datepicker.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-neo-datepicker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-paginator.mjs +1 -3
- package/fesm2022/agorapulse-ui-components-paginator.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-radio.mjs +2 -3
- package/fesm2022/agorapulse-ui-components-radio.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-social-button.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-social-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-split-button.mjs +6 -5
- package/fesm2022/agorapulse-ui-components-split-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-status-card.mjs +2 -3
- package/fesm2022/agorapulse-ui-components-status-card.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-status.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-status.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-tag.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-tag.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-toggle.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-toggle.mjs.map +1 -1
- package/icon-button/icon-button.component.d.ts +2 -1
- package/nav-selector/nav-selector-group/nav-selector-group.component.d.ts +5 -0
- package/nav-selector/nav-selector-leaf/nav-selector-leaf.component.d.ts +4 -0
- package/nav-selector/nav-selector-popover/nav-selector-popover-item.component.d.ts +1 -0
- package/package.json +1 -1
- package/split-button/split-button.component.d.ts +2 -1
- package/agorapulse-ui-components-18.0.16.tgz +0 -0
|
@@ -41,7 +41,7 @@ class ConfirmModalComponent {
|
|
|
41
41
|
return confirmModal;
|
|
42
42
|
}
|
|
43
43
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ConfirmModalComponent, deps: [{ token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
44
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ConfirmModalComponent, isStandalone: true, selector: "ap-confirm-modal", inputs: { contentText: "contentText", footerCancelButtonId: "footerCancelButtonId", footerCancelButtonLabel: "footerCancelButtonLabel", footerConfirmButtonId: "footerConfirmButtonId", footerConfirmButtonLabel: "footerConfirmButtonLabel", headerTitle: "headerTitle" }, ngImport: i0, template: "<ng-template #headerTemplate>\n <h2>{{ headerTitle }}</h2>\n</ng-template>\n\n<ng-template #mainTemplate>\n <p>{{ contentText }}</p>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"buttons\">\n <ap-button\n name=\"confirm-modal-cancel-button\"\n [config]=\"{\n style: 'ghost',\n color: 'grey'\n }\"\n [id]=\"footerCancelButtonId\"\n (click)=\"onCancel()\">\n <span>\n {{ footerCancelButtonLabel }}\n </span>\n </ap-button>\n <ap-button\n name=\"confirm-modal-confirm-button\"\n cdkFocusInitial\n [config]=\"{\n style: 'primary',\n color: 'orange'\n }\"\n [id]=\"footerConfirmButtonId\"\n (click)=\"onConfirm()\">\n <span>\n {{ footerConfirmButtonLabel }}\n </span>\n </ap-button>\n </div>\n</ng-template>\n\n<ap-modal\n [closable]=\"true\"\n [headerTemplate]=\"headerTemplate\"\n [mainTemplate]=\"mainTemplate\"\n [footerTemplate]=\"footerTemplate\" />\n", styles: [".buttons{display:flex;gap:var(--ref-spacing-sm)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "
|
|
44
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ConfirmModalComponent, isStandalone: true, selector: "ap-confirm-modal", inputs: { contentText: "contentText", footerCancelButtonId: "footerCancelButtonId", footerCancelButtonLabel: "footerCancelButtonLabel", footerConfirmButtonId: "footerConfirmButtonId", footerConfirmButtonLabel: "footerConfirmButtonLabel", headerTitle: "headerTitle" }, ngImport: i0, template: "<ng-template #headerTemplate>\n <h2>{{ headerTitle }}</h2>\n</ng-template>\n\n<ng-template #mainTemplate>\n <p>{{ contentText }}</p>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"buttons\">\n <ap-button\n name=\"confirm-modal-cancel-button\"\n [config]=\"{\n style: 'ghost',\n color: 'grey'\n }\"\n [id]=\"footerCancelButtonId\"\n (click)=\"onCancel()\">\n <span>\n {{ footerCancelButtonLabel }}\n </span>\n </ap-button>\n <ap-button\n name=\"confirm-modal-confirm-button\"\n cdkFocusInitial\n [config]=\"{\n style: 'primary',\n color: 'orange'\n }\"\n [id]=\"footerConfirmButtonId\"\n (click)=\"onConfirm()\">\n <span>\n {{ footerConfirmButtonLabel }}\n </span>\n </ap-button>\n </div>\n</ng-template>\n\n<ap-modal\n [closable]=\"true\"\n [headerTemplate]=\"headerTemplate\"\n [mainTemplate]=\"mainTemplate\"\n [footerTemplate]=\"footerTemplate\" />\n", styles: [".buttons{display:flex;gap:var(--ref-spacing-sm)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: ModalComponent, selector: "ap-modal", inputs: ["closable", "headerBottomBorderEnabled", "footerTemplate", "footerVisible", "headerTemplate", "headerVisible", "mainTemplate", "sidePaneTemplate", "sidePaneStyle", "containerStyle", "headerStyle", "contentStyle", "footerStyle", "defaultLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
45
45
|
}
|
|
46
46
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ConfirmModalComponent, decorators: [{
|
|
47
47
|
type: Component,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-confirm-modal.mjs","sources":["../../../libs/ui-components/confirm-modal/src/confirm-modal.component.ts","../../../libs/ui-components/confirm-modal/src/confirm-modal.component.html","../../../libs/ui-components/confirm-modal/src/agorapulse-ui-components-confirm-modal.ts"],"sourcesContent":["import { ButtonComponent } from '@agorapulse/ui-components/button';\nimport { ModalComponent, ModalConfig } from '@agorapulse/ui-components/modal';\nimport { ComponentType } from '@angular/cdk/portal';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { MatDialog, MatDialogRef } from '@angular/material/dialog';\nimport { ConfirmModalTexts } from './confirm-modal-texts.model';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-confirm-modal',\n templateUrl: 'confirm-modal.component.html',\n styleUrls: ['./confirm-modal.component.scss'],\n imports: [ButtonComponent, ModalComponent],\n standalone: true,\n})\nexport class ConfirmModalComponent {\n @Input() contentText: string = '';\n @Input() footerCancelButtonId: string = 'cancel';\n @Input() footerCancelButtonLabel: string = '';\n @Input() footerConfirmButtonId: string = 'confirm';\n @Input() footerConfirmButtonLabel: string = '';\n @Input() headerTitle: string = '';\n\n constructor(public dialogRef: MatDialogRef<ComponentType<any>>) {\n dialogRef.disableClose = true;\n }\n\n onCancel() {\n this.dialogRef.close(false);\n }\n\n onConfirm() {\n this.dialogRef.close(true);\n }\n\n static open(dialog: MatDialog, confirmModalTexts: ConfirmModalTexts, modalConfig: ModalConfig | null = null) {\n if (!modalConfig) {\n modalConfig = {};\n }\n if (!modalConfig.matDialogConfig) {\n modalConfig.matDialogConfig = {\n width: '550px',\n };\n }\n const confirmModal = ModalComponent.openWithComponent(dialog, modalConfig, ConfirmModalComponent);\n confirmModal.componentInstance.contentText = confirmModalTexts.contentText;\n confirmModal.componentInstance.footerConfirmButtonId = confirmModalTexts.footerConfirmButtonId;\n confirmModal.componentInstance.footerConfirmButtonLabel = confirmModalTexts.footerConfirmButtonLabel;\n confirmModal.componentInstance.footerCancelButtonId = confirmModalTexts.footerCancelButtonId;\n confirmModal.componentInstance.footerCancelButtonLabel = confirmModalTexts.footerCancelButtonLabel;\n confirmModal.componentInstance.headerTitle = confirmModalTexts.headerTitle;\n return confirmModal;\n }\n}\n","<ng-template #headerTemplate>\n <h2>{{ headerTitle }}</h2>\n</ng-template>\n\n<ng-template #mainTemplate>\n <p>{{ contentText }}</p>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"buttons\">\n <ap-button\n name=\"confirm-modal-cancel-button\"\n [config]=\"{\n style: 'ghost',\n color: 'grey'\n }\"\n [id]=\"footerCancelButtonId\"\n (click)=\"onCancel()\">\n <span>\n {{ footerCancelButtonLabel }}\n </span>\n </ap-button>\n <ap-button\n name=\"confirm-modal-confirm-button\"\n cdkFocusInitial\n [config]=\"{\n style: 'primary',\n color: 'orange'\n }\"\n [id]=\"footerConfirmButtonId\"\n (click)=\"onConfirm()\">\n <span>\n {{ footerConfirmButtonLabel }}\n </span>\n </ap-button>\n </div>\n</ng-template>\n\n<ap-modal\n [closable]=\"true\"\n [headerTemplate]=\"headerTemplate\"\n [mainTemplate]=\"mainTemplate\"\n [footerTemplate]=\"footerTemplate\" />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;MAea,qBAAqB,CAAA;AAQX,IAAA,SAAA;IAPV,WAAW,GAAW,EAAE;IACxB,oBAAoB,GAAW,QAAQ;IACvC,uBAAuB,GAAW,EAAE;IACpC,qBAAqB,GAAW,SAAS;IACzC,wBAAwB,GAAW,EAAE;IACrC,WAAW,GAAW,EAAE;AAEjC,IAAA,WAAA,CAAmB,SAA2C,EAAA;QAA3C,IAAS,CAAA,SAAA,GAAT,SAAS;AACxB,QAAA,SAAS,CAAC,YAAY,GAAG,IAAI;;IAGjC,QAAQ,GAAA;AACJ,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC;;IAG/B,SAAS,GAAA;AACL,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC;;IAG9B,OAAO,IAAI,CAAC,MAAiB,EAAE,iBAAoC,EAAE,cAAkC,IAAI,EAAA;QACvG,IAAI,CAAC,WAAW,EAAE;YACd,WAAW,GAAG,EAAE;;AAEpB,QAAA,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE;YAC9B,WAAW,CAAC,eAAe,GAAG;AAC1B,gBAAA,KAAK,EAAE,OAAO;aACjB;;AAEL,QAAA,MAAM,YAAY,GAAG,cAAc,CAAC,iBAAiB,CAAC,MAAM,EAAE,WAAW,EAAE,qBAAqB,CAAC;QACjG,YAAY,CAAC,iBAAiB,CAAC,WAAW,GAAG,iBAAiB,CAAC,WAAW;QAC1E,YAAY,CAAC,iBAAiB,CAAC,qBAAqB,GAAG,iBAAiB,CAAC,qBAAqB;QAC9F,YAAY,CAAC,iBAAiB,CAAC,wBAAwB,GAAG,iBAAiB,CAAC,wBAAwB;QACpG,YAAY,CAAC,iBAAiB,CAAC,oBAAoB,GAAG,iBAAiB,CAAC,oBAAoB;QAC5F,YAAY,CAAC,iBAAiB,CAAC,uBAAuB,GAAG,iBAAiB,CAAC,uBAAuB;QAClG,YAAY,CAAC,iBAAiB,CAAC,WAAW,GAAG,iBAAiB,CAAC,WAAW;AAC1E,QAAA,OAAO,YAAY;;uGApCd,qBAAqB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,ECflC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,uBAAA,EAAA,yBAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,wBAAA,EAAA,0BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,2pCA2CA,ED/Bc,MAAA,EAAA,CAAA,oDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,eAAe
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-confirm-modal.mjs","sources":["../../../libs/ui-components/confirm-modal/src/confirm-modal.component.ts","../../../libs/ui-components/confirm-modal/src/confirm-modal.component.html","../../../libs/ui-components/confirm-modal/src/agorapulse-ui-components-confirm-modal.ts"],"sourcesContent":["import { ButtonComponent } from '@agorapulse/ui-components/button';\nimport { ModalComponent, ModalConfig } from '@agorapulse/ui-components/modal';\nimport { ComponentType } from '@angular/cdk/portal';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { MatDialog, MatDialogRef } from '@angular/material/dialog';\nimport { ConfirmModalTexts } from './confirm-modal-texts.model';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-confirm-modal',\n templateUrl: 'confirm-modal.component.html',\n styleUrls: ['./confirm-modal.component.scss'],\n imports: [ButtonComponent, ModalComponent],\n standalone: true,\n})\nexport class ConfirmModalComponent {\n @Input() contentText: string = '';\n @Input() footerCancelButtonId: string = 'cancel';\n @Input() footerCancelButtonLabel: string = '';\n @Input() footerConfirmButtonId: string = 'confirm';\n @Input() footerConfirmButtonLabel: string = '';\n @Input() headerTitle: string = '';\n\n constructor(public dialogRef: MatDialogRef<ComponentType<any>>) {\n dialogRef.disableClose = true;\n }\n\n onCancel() {\n this.dialogRef.close(false);\n }\n\n onConfirm() {\n this.dialogRef.close(true);\n }\n\n static open(dialog: MatDialog, confirmModalTexts: ConfirmModalTexts, modalConfig: ModalConfig | null = null) {\n if (!modalConfig) {\n modalConfig = {};\n }\n if (!modalConfig.matDialogConfig) {\n modalConfig.matDialogConfig = {\n width: '550px',\n };\n }\n const confirmModal = ModalComponent.openWithComponent(dialog, modalConfig, ConfirmModalComponent);\n confirmModal.componentInstance.contentText = confirmModalTexts.contentText;\n confirmModal.componentInstance.footerConfirmButtonId = confirmModalTexts.footerConfirmButtonId;\n confirmModal.componentInstance.footerConfirmButtonLabel = confirmModalTexts.footerConfirmButtonLabel;\n confirmModal.componentInstance.footerCancelButtonId = confirmModalTexts.footerCancelButtonId;\n confirmModal.componentInstance.footerCancelButtonLabel = confirmModalTexts.footerCancelButtonLabel;\n confirmModal.componentInstance.headerTitle = confirmModalTexts.headerTitle;\n return confirmModal;\n }\n}\n","<ng-template #headerTemplate>\n <h2>{{ headerTitle }}</h2>\n</ng-template>\n\n<ng-template #mainTemplate>\n <p>{{ contentText }}</p>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"buttons\">\n <ap-button\n name=\"confirm-modal-cancel-button\"\n [config]=\"{\n style: 'ghost',\n color: 'grey'\n }\"\n [id]=\"footerCancelButtonId\"\n (click)=\"onCancel()\">\n <span>\n {{ footerCancelButtonLabel }}\n </span>\n </ap-button>\n <ap-button\n name=\"confirm-modal-confirm-button\"\n cdkFocusInitial\n [config]=\"{\n style: 'primary',\n color: 'orange'\n }\"\n [id]=\"footerConfirmButtonId\"\n (click)=\"onConfirm()\">\n <span>\n {{ footerConfirmButtonLabel }}\n </span>\n </ap-button>\n </div>\n</ng-template>\n\n<ap-modal\n [closable]=\"true\"\n [headerTemplate]=\"headerTemplate\"\n [mainTemplate]=\"mainTemplate\"\n [footerTemplate]=\"footerTemplate\" />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;MAea,qBAAqB,CAAA;AAQX,IAAA,SAAA;IAPV,WAAW,GAAW,EAAE;IACxB,oBAAoB,GAAW,QAAQ;IACvC,uBAAuB,GAAW,EAAE;IACpC,qBAAqB,GAAW,SAAS;IACzC,wBAAwB,GAAW,EAAE;IACrC,WAAW,GAAW,EAAE;AAEjC,IAAA,WAAA,CAAmB,SAA2C,EAAA;QAA3C,IAAS,CAAA,SAAA,GAAT,SAAS;AACxB,QAAA,SAAS,CAAC,YAAY,GAAG,IAAI;;IAGjC,QAAQ,GAAA;AACJ,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC;;IAG/B,SAAS,GAAA;AACL,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC;;IAG9B,OAAO,IAAI,CAAC,MAAiB,EAAE,iBAAoC,EAAE,cAAkC,IAAI,EAAA;QACvG,IAAI,CAAC,WAAW,EAAE;YACd,WAAW,GAAG,EAAE;;AAEpB,QAAA,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE;YAC9B,WAAW,CAAC,eAAe,GAAG;AAC1B,gBAAA,KAAK,EAAE,OAAO;aACjB;;AAEL,QAAA,MAAM,YAAY,GAAG,cAAc,CAAC,iBAAiB,CAAC,MAAM,EAAE,WAAW,EAAE,qBAAqB,CAAC;QACjG,YAAY,CAAC,iBAAiB,CAAC,WAAW,GAAG,iBAAiB,CAAC,WAAW;QAC1E,YAAY,CAAC,iBAAiB,CAAC,qBAAqB,GAAG,iBAAiB,CAAC,qBAAqB;QAC9F,YAAY,CAAC,iBAAiB,CAAC,wBAAwB,GAAG,iBAAiB,CAAC,wBAAwB;QACpG,YAAY,CAAC,iBAAiB,CAAC,oBAAoB,GAAG,iBAAiB,CAAC,oBAAoB;QAC5F,YAAY,CAAC,iBAAiB,CAAC,uBAAuB,GAAG,iBAAiB,CAAC,uBAAuB;QAClG,YAAY,CAAC,iBAAiB,CAAC,WAAW,GAAG,iBAAiB,CAAC,WAAW;AAC1E,QAAA,OAAO,YAAY;;uGApCd,qBAAqB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,ECflC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,uBAAA,EAAA,yBAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,wBAAA,EAAA,0BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,2pCA2CA,ED/Bc,MAAA,EAAA,CAAA,oDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,eAAe,sPAAE,cAAc,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,2BAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,aAAA,EAAA,cAAA,EAAA,aAAA,EAAA,eAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAGhC,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBARjC,SAAS;sCACW,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,kBAAkB,EAAA,OAAA,EAGnB,CAAC,eAAe,EAAE,cAAc,CAAC,EAAA,UAAA,EAC9B,IAAI,EAAA,QAAA,EAAA,2pCAAA,EAAA,MAAA,EAAA,CAAA,oDAAA,CAAA,EAAA;iFAGP,WAAW,EAAA,CAAA;sBAAnB;gBACQ,oBAAoB,EAAA,CAAA;sBAA5B;gBACQ,uBAAuB,EAAA,CAAA;sBAA/B;gBACQ,qBAAqB,EAAA,CAAA;sBAA7B;gBACQ,wBAAwB,EAAA,CAAA;sBAAhC;gBACQ,WAAW,EAAA,CAAA;sBAAnB;;;AErBL;;AAEG;;;;"}
|
|
@@ -22,11 +22,11 @@ class CounterComponent {
|
|
|
22
22
|
background = true;
|
|
23
23
|
notif = false;
|
|
24
24
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CounterComponent, isStandalone: true, selector: "ap-counter", inputs: { color: "color", size: "size", background: "background", notif: "notif" }, host: { properties: { "class.orange": "this.isOrangeColor", "class.blue": "this.isBlueColor", "class.grey": "this.isGreyColor", "class.normal": "this.isSizeNormal", "class.big": "this.isSizeBig", "class.bg": "this.background", "class.notif": "this.notif" } }, ngImport: i0, template: "<ng-content
|
|
25
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CounterComponent, isStandalone: true, selector: "ap-counter", inputs: { color: "color", size: "size", background: "background", notif: "notif" }, host: { properties: { "class.orange": "this.isOrangeColor", "class.blue": "this.isBlueColor", "class.grey": "this.isGreyColor", "class.normal": "this.isSizeNormal", "class.big": "this.isSizeBig", "class.bg": "this.background", "class.notif": "this.notif" } }, ngImport: i0, template: "<ng-content>0</ng-content>\n", styles: ["ap-counter{display:flex;align-items:center;justify-content:center;width:fit-content;border-radius:var(--comp-counter-border-radius);padding:0 2px;box-sizing:border-box}ap-counter.normal{font-weight:var(--comp-counter-text-style-font-weight);font-family:var(--comp-counter-text-style-font-family);line-height:var(--comp-counter-text-style-line-height);font-size:var(--comp-counter-text-style-size);height:var(--comp-counter-height);max-height:var(--comp-counter-height)}ap-counter.big{font-weight:var(--comp-counter-big-text-style-font-weight);font-family:var(--comp-counter-big-text-style-font-family);line-height:var(--comp-counter-big-text-style-line-height);font-size:var(--comp-counter-big-text-style-size);height:var(--comp-counter-big-height);max-height:var(--comp-counter-big-height)}ap-counter.blue{color:var(--comp-counter-blue-color)}ap-counter.blue.bg{background-color:var(--comp-counter-blue-with-background-background-color)}ap-counter.orange{color:var(--comp-counter-orange-color)}ap-counter.orange.bg{color:var(--comp-counter-orange-with-background-color);background-color:var(--comp-counter-orange-with-background-background-color)}ap-counter.grey{color:var(--comp-counter-grey-color)}ap-counter.grey.bg{background-color:var(--comp-counter-grey-with-background-background-color)}ap-counter.notif{padding:0 4px;border-radius:var(--comp-counter-notif-border-radius);font-size:var(--comp-counter-text-style-size);font-weight:var(--comp-counter-text-style-font-weight);font-family:var(--comp-counter-text-style-font-family);line-height:var(--comp-counter-text-style-line-height);min-width:var(--comp-counter-notif-min-width);height:var(--comp-counter-notif-min-width);color:var(--comp-counter-notif-color);background-color:var(--comp-counter-notif-background-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
26
26
|
}
|
|
27
27
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CounterComponent, decorators: [{
|
|
28
28
|
type: Component,
|
|
29
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-counter', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<ng-content
|
|
29
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-counter', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<ng-content>0</ng-content>\n", styles: ["ap-counter{display:flex;align-items:center;justify-content:center;width:fit-content;border-radius:var(--comp-counter-border-radius);padding:0 2px;box-sizing:border-box}ap-counter.normal{font-weight:var(--comp-counter-text-style-font-weight);font-family:var(--comp-counter-text-style-font-family);line-height:var(--comp-counter-text-style-line-height);font-size:var(--comp-counter-text-style-size);height:var(--comp-counter-height);max-height:var(--comp-counter-height)}ap-counter.big{font-weight:var(--comp-counter-big-text-style-font-weight);font-family:var(--comp-counter-big-text-style-font-family);line-height:var(--comp-counter-big-text-style-line-height);font-size:var(--comp-counter-big-text-style-size);height:var(--comp-counter-big-height);max-height:var(--comp-counter-big-height)}ap-counter.blue{color:var(--comp-counter-blue-color)}ap-counter.blue.bg{background-color:var(--comp-counter-blue-with-background-background-color)}ap-counter.orange{color:var(--comp-counter-orange-color)}ap-counter.orange.bg{color:var(--comp-counter-orange-with-background-color);background-color:var(--comp-counter-orange-with-background-background-color)}ap-counter.grey{color:var(--comp-counter-grey-color)}ap-counter.grey.bg{background-color:var(--comp-counter-grey-with-background-background-color)}ap-counter.notif{padding:0 4px;border-radius:var(--comp-counter-notif-border-radius);font-size:var(--comp-counter-text-style-size);font-weight:var(--comp-counter-text-style-font-weight);font-family:var(--comp-counter-text-style-font-family);line-height:var(--comp-counter-text-style-line-height);min-width:var(--comp-counter-notif-min-width);height:var(--comp-counter-notif-min-width);color:var(--comp-counter-notif-color);background-color:var(--comp-counter-notif-background-color)}\n"] }]
|
|
30
30
|
}], propDecorators: { isOrangeColor: [{
|
|
31
31
|
type: HostBinding,
|
|
32
32
|
args: ['class.orange']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-counter.mjs","sources":["../../../libs/ui-components/counter/src/counter.component.ts","../../../libs/ui-components/counter/src/counter.component.html","../../../libs/ui-components/counter/src/agorapulse-ui-components-counter.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';\n\nexport type CounterColor = 'blue' | 'orange' | 'grey';\nexport type CounterSize = 'big' | 'normal';\nexport type CounterStyle = 'default' | 'notif';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-counter',\n standalone: true,\n templateUrl: './counter.component.html',\n imports: [],\n styleUrls: ['./counter.component.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class CounterComponent {\n @HostBinding('class.orange') get isOrangeColor(): boolean {\n return this.color === 'orange' && !this.notif;\n }\n @HostBinding('class.blue') get isBlueColor(): boolean {\n return this.color === 'blue' && !this.notif;\n }\n @HostBinding('class.grey') get isGreyColor(): boolean {\n return this.color === 'grey' && !this.notif;\n }\n @Input()\n color: CounterColor = 'orange';\n\n @HostBinding('class.normal') get isSizeNormal(): boolean {\n return this.size === 'normal' && !this.notif;\n }\n @HostBinding('class.big') get isSizeBig(): boolean {\n return this.size === 'big' && !this.notif;\n }\n\n @Input()\n size: CounterSize = 'normal';\n\n @HostBinding('class.bg')\n @Input()\n background: boolean = true;\n\n @HostBinding('class.notif')\n @Input()\n notif: boolean = false;\n}\n","<ng-content
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-counter.mjs","sources":["../../../libs/ui-components/counter/src/counter.component.ts","../../../libs/ui-components/counter/src/counter.component.html","../../../libs/ui-components/counter/src/agorapulse-ui-components-counter.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';\n\nexport type CounterColor = 'blue' | 'orange' | 'grey';\nexport type CounterSize = 'big' | 'normal';\nexport type CounterStyle = 'default' | 'notif';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-counter',\n standalone: true,\n templateUrl: './counter.component.html',\n imports: [],\n styleUrls: ['./counter.component.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class CounterComponent {\n @HostBinding('class.orange') get isOrangeColor(): boolean {\n return this.color === 'orange' && !this.notif;\n }\n @HostBinding('class.blue') get isBlueColor(): boolean {\n return this.color === 'blue' && !this.notif;\n }\n @HostBinding('class.grey') get isGreyColor(): boolean {\n return this.color === 'grey' && !this.notif;\n }\n @Input()\n color: CounterColor = 'orange';\n\n @HostBinding('class.normal') get isSizeNormal(): boolean {\n return this.size === 'normal' && !this.notif;\n }\n @HostBinding('class.big') get isSizeBig(): boolean {\n return this.size === 'big' && !this.notif;\n }\n\n @Input()\n size: CounterSize = 'normal';\n\n @HostBinding('class.bg')\n @Input()\n background: boolean = true;\n\n @HostBinding('class.notif')\n @Input()\n notif: boolean = false;\n}\n","<ng-content>0</ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAea,gBAAgB,CAAA;AACzB,IAAA,IAAiC,aAAa,GAAA;QAC1C,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK;;AAEjD,IAAA,IAA+B,WAAW,GAAA;QACtC,OAAO,IAAI,CAAC,KAAK,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK;;AAE/C,IAAA,IAA+B,WAAW,GAAA;QACtC,OAAO,IAAI,CAAC,KAAK,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK;;IAG/C,KAAK,GAAiB,QAAQ;AAE9B,IAAA,IAAiC,YAAY,GAAA;QACzC,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK;;AAEhD,IAAA,IAA8B,SAAS,GAAA;QACnC,OAAO,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK;;IAI7C,IAAI,GAAgB,QAAQ;IAI5B,UAAU,GAAY,IAAI;IAI1B,KAAK,GAAY,KAAK;uGA7Bb,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,8ZCf7B,8BACA,EAAA,MAAA,EAAA,CAAA,svDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDca,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAT5B,SAAS;sCACW,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,YAAY,EAAA,UAAA,EACV,IAAI,EAAA,OAAA,EAEP,EAAE,EAAA,aAAA,EAEI,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,CAAA,svDAAA,CAAA,EAAA;8BAGJ,aAAa,EAAA,CAAA;sBAA7C,WAAW;uBAAC,cAAc;gBAGI,WAAW,EAAA,CAAA;sBAAzC,WAAW;uBAAC,YAAY;gBAGM,WAAW,EAAA,CAAA;sBAAzC,WAAW;uBAAC,YAAY;gBAIzB,KAAK,EAAA,CAAA;sBADJ;gBAGgC,YAAY,EAAA,CAAA;sBAA5C,WAAW;uBAAC,cAAc;gBAGG,SAAS,EAAA,CAAA;sBAAtC,WAAW;uBAAC,WAAW;gBAKxB,IAAI,EAAA,CAAA;sBADH;gBAKD,UAAU,EAAA,CAAA;sBAFT,WAAW;uBAAC,UAAU;;sBACtB;gBAKD,KAAK,EAAA,CAAA;sBAFJ,WAAW;uBAAC,aAAa;;sBACzB;;;AE3CL;;AAEG;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { LoaderComponent } from '@agorapulse/ui-animations';
|
|
2
2
|
import * as i1 from '@agorapulse/ui-symbol';
|
|
3
|
-
import { apPremiumStar, SymbolComponent } from '@agorapulse/ui-symbol';
|
|
3
|
+
import { apPremiumStar, SymbolComponent, withSymbols, completeIconSet } from '@agorapulse/ui-symbol';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { EventEmitter, booleanAttribute, HostListener, ViewChild, ContentChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
|
+
import { input, EventEmitter, booleanAttribute, HostListener, ViewChild, ContentChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
6
6
|
import * as i2 from '@angular/material/menu';
|
|
7
7
|
import { MatMenuModule } from '@angular/material/menu';
|
|
8
8
|
|
|
@@ -14,6 +14,7 @@ class IconButtonComponent {
|
|
|
14
14
|
color = 'none';
|
|
15
15
|
disabled = false;
|
|
16
16
|
menuTrigger = null;
|
|
17
|
+
symbolId = input();
|
|
17
18
|
set locked(locked) {
|
|
18
19
|
this._locked = locked;
|
|
19
20
|
if (locked) {
|
|
@@ -74,11 +75,11 @@ class IconButtonComponent {
|
|
|
74
75
|
}
|
|
75
76
|
}
|
|
76
77
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IconButtonComponent, deps: [{ token: i1.SymbolRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
77
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: IconButtonComponent, isStandalone: true, selector: "ap-icon-button", inputs: { ariaLabel: "ariaLabel", name: "name", color: "color", disabled:
|
|
78
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: IconButtonComponent, isStandalone: true, selector: "ap-icon-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, menuTrigger: { classPropertyName: "menuTrigger", publicName: "menuTrigger", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" } }, providers: [withSymbols(...completeIconSet)], 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 #trigger=\"matMenuTrigger\"\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [matMenuTriggerFor]=\"menuTrigger\"\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 (menuOpened)=\"menuOpened.emit()\"\n (menuClosed)=\"menuClosed.emit()\">\n @if (!loading) {\n @if (symbolId()) {\n <ap-symbol [symbolId]=\"symbolId()\" />\n } @else {\n <ng-content />\n }\n }\n @if (loading) {\n <ap-loader\n color=\"white\"\n [diameter]=\"16\" />\n }\n @if (locked) {\n <div class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"sm\" />\n </div>\n }\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[disabled]{pointer-events:none}ap-icon-button button.icon-button{margin:0;display:flex;justify-content:center;align-items:center;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;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);min-width:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2);min-height:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2)}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 ap-symbol .svg svg{height:100%;width:100%}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:#fff}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: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { 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 });
|
|
78
79
|
}
|
|
79
80
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
80
81
|
type: Component,
|
|
81
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-icon-button', standalone: true, imports: [SymbolComponent, LoaderComponent, MatMenuModule], encapsulation: ViewEncapsulation.None, template: "<button\n #button\n #trigger=\"matMenuTrigger\"\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [matMenuTriggerFor]=\"menuTrigger\"\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 (menuOpened)=\"menuOpened.emit()\"\n (menuClosed)=\"menuClosed.emit()\">\n @if (!loading) {\n <ng-content />\n }\n @if (loading) {\n <ap-loader\n color=\"white\"\n [diameter]=\"16\" />\n }\n @if (locked) {\n <div class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"sm\" />\n </div>\n }\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[disabled]{pointer-events:none}ap-icon-button button.icon-button{margin:0;display:flex;justify-content:center;align-items:center;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;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);min-width:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2);min-height:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2)}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 ap-symbol .svg svg{height:100%;width:100%}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:#fff}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"] }]
|
|
82
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-icon-button', standalone: true, imports: [SymbolComponent, LoaderComponent, MatMenuModule], providers: [withSymbols(...completeIconSet)], encapsulation: ViewEncapsulation.None, template: "<button\n #button\n #trigger=\"matMenuTrigger\"\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [matMenuTriggerFor]=\"menuTrigger\"\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 (menuOpened)=\"menuOpened.emit()\"\n (menuClosed)=\"menuClosed.emit()\">\n @if (!loading) {\n @if (symbolId()) {\n <ap-symbol [symbolId]=\"symbolId()\" />\n } @else {\n <ng-content />\n }\n }\n @if (loading) {\n <ap-loader\n color=\"white\"\n [diameter]=\"16\" />\n }\n @if (locked) {\n <div class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"sm\" />\n </div>\n }\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[disabled]{pointer-events:none}ap-icon-button button.icon-button{margin:0;display:flex;justify-content:center;align-items:center;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;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);min-width:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2);min-height:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2)}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 ap-symbol .svg svg{height:100%;width:100%}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:#fff}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"] }]
|
|
82
83
|
}], ctorParameters: () => [{ type: i1.SymbolRegistry }, { type: i0.ElementRef }], propDecorators: { ariaLabel: [{
|
|
83
84
|
type: Input
|
|
84
85
|
}], name: [{
|
|
@@ -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 { LoaderComponent } from '@agorapulse/ui-animations';\nimport { apPremiumStar, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\n\nimport {\n booleanAttribute,\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 { MatMenuModule, MatMenuPanel } from '@angular/material/menu';\n\nexport type ButtonType = 'flat' | 'stroked-transparent' | 'stroked';\nexport type ButtonColor = 'none' | 'blue' | 'red' | 'green';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-icon-button',\n styleUrls: ['./icon-button.component.scss'],\n standalone: true,\n imports: [SymbolComponent, LoaderComponent, MatMenuModule],\n templateUrl: './icon-button.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class IconButtonComponent {\n @Input() ariaLabel = '';\n @Input() name = '';\n @Input() color: ButtonColor = 'none';\n @Input({\n transform: booleanAttribute,\n })\n disabled: boolean = false;\n @Input() menuTrigger: MatMenuPanel | null = null;\n\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\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\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 @Output() menuOpened: EventEmitter<void> = new EventEmitter();\n @Output() menuClosed: EventEmitter<void> = 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 | undefined = undefined;\n focused: boolean = false;\n\n constructor(\n private symbolRegistry: SymbolRegistry,\n private elementRef: ElementRef\n ) {\n this.symbolRegistry.registerSymbols([apPremiumStar]);\n this.hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');\n }\n\n onClickHandle($event: MouseEvent): void {\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 #trigger=\"matMenuTrigger\"\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [matMenuTriggerFor]=\"menuTrigger\"\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 (menuOpened)=\"menuOpened.emit()\"\n (menuClosed)=\"menuClosed.emit()\">\n @if (!loading) {\n <ng-content />\n }\n @if (loading) {\n <ap-loader\n color=\"white\"\n [diameter]=\"16\" />\n }\n @if (locked) {\n <div class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"sm\" />\n </div>\n }\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;
|
|
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 { LoaderComponent } from '@agorapulse/ui-animations';\nimport { agorapulseSymbol, apPremiumStar, completeIconSet, SymbolComponent, SymbolRegistry, withSymbols } from '@agorapulse/ui-symbol';\n\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n HostListener,\n input,\n Input,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { MatMenuModule, MatMenuPanel } from '@angular/material/menu';\n\nexport type ButtonType = 'flat' | 'stroked-transparent' | 'stroked';\nexport type ButtonColor = 'none' | 'blue' | 'red' | 'green';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-icon-button',\n styleUrls: ['./icon-button.component.scss'],\n standalone: true,\n imports: [SymbolComponent, LoaderComponent, MatMenuModule],\n providers: [withSymbols(...completeIconSet)],\n templateUrl: './icon-button.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class IconButtonComponent {\n @Input() ariaLabel = '';\n @Input() name = '';\n @Input() color: ButtonColor = 'none';\n @Input({\n transform: booleanAttribute,\n })\n disabled: boolean = false;\n @Input() menuTrigger: MatMenuPanel | null = null;\n symbolId = input<agorapulseSymbol>();\n\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\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\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 @Output() menuOpened: EventEmitter<void> = new EventEmitter();\n @Output() menuClosed: EventEmitter<void> = 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 | undefined = undefined;\n focused: boolean = false;\n\n constructor(\n private symbolRegistry: SymbolRegistry,\n private elementRef: ElementRef\n ) {\n this.symbolRegistry.registerSymbols([apPremiumStar]);\n this.hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');\n }\n\n onClickHandle($event: MouseEvent): void {\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 #trigger=\"matMenuTrigger\"\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [matMenuTriggerFor]=\"menuTrigger\"\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 (menuOpened)=\"menuOpened.emit()\"\n (menuClosed)=\"menuClosed.emit()\">\n @if (!loading) {\n @if (symbolId()) {\n <ap-symbol [symbolId]=\"symbolId()\" />\n } @else {\n <ng-content />\n }\n }\n @if (loading) {\n <ap-loader\n color=\"white\"\n [diameter]=\"16\" />\n }\n @if (locked) {\n <div class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"sm\" />\n </div>\n }\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { ButtonComponent } from '@agorapulse/ui-components/button';
|
|
2
|
+
import { CloseButtonComponent } from '@agorapulse/ui-components/close-button';
|
|
2
3
|
import { SymbolRegistry, apInfoFill, apErrorFill, apWarningFill, apRemoveCircle, apRoundedCheckFill, apClose, apDeleteNoCircle, SymbolComponent } from '@agorapulse/ui-symbol';
|
|
3
|
-
import { NgClass } from '@angular/common';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
5
|
import { inject, ElementRef, EventEmitter, booleanAttribute, Output, Input, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
6
|
-
import { CloseButtonComponent } from '@agorapulse/ui-components/close-button';
|
|
7
6
|
|
|
8
7
|
// Increasing integer for generating unique ids for infobox components.
|
|
9
8
|
let nextUniqueId = 0;
|
|
@@ -36,7 +35,15 @@ class InfoboxComponent {
|
|
|
36
35
|
success: 'rounded-check_fill',
|
|
37
36
|
};
|
|
38
37
|
constructor() {
|
|
39
|
-
this.symbolRegistry.registerSymbols([
|
|
38
|
+
this.symbolRegistry.registerSymbols([
|
|
39
|
+
apInfoFill,
|
|
40
|
+
apErrorFill,
|
|
41
|
+
apWarningFill,
|
|
42
|
+
apRemoveCircle,
|
|
43
|
+
apRoundedCheckFill,
|
|
44
|
+
apClose,
|
|
45
|
+
apDeleteNoCircle,
|
|
46
|
+
]);
|
|
40
47
|
this.defaultButtonId = `infobox-button-${++nextUniqueId}`;
|
|
41
48
|
}
|
|
42
49
|
onClickButton() {
|
|
@@ -47,11 +54,11 @@ class InfoboxComponent {
|
|
|
47
54
|
this.closed.emit();
|
|
48
55
|
}
|
|
49
56
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InfoboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
50
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { buttonId: "buttonId", buttonLabel: "buttonLabel", buttonDataTrack: "buttonDataTrack", closable: ["closable", "closable", booleanAttribute], title: "title", type: "type", width: "width" }, outputs: { buttonClicked: "buttonClicked", closed: "closed" }, host: { properties: { "class.full-width": "this.fullWidth" } }, ngImport: i0, template: "<div\n class=\"main\"\n [class.info]=\"type === 'info'\"\n [class.warning]=\"type === 'warning'\"\n [class.error]=\"type === 'error'\"\n [class.success]=\"type === 'success'\"\n [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n class=\"status\"\n size=\"sm\"\n [symbolId]=\"symbolIds[type]\" />\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n @if (title) {\n <span class=\"title\">\n {{ title }}\n </span>\n }\n <span class=\"text\">\n <ng-content
|
|
57
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { buttonId: "buttonId", buttonLabel: "buttonLabel", buttonDataTrack: "buttonDataTrack", closable: ["closable", "closable", booleanAttribute], title: "title", type: "type", width: "width" }, outputs: { buttonClicked: "buttonClicked", closed: "closed" }, host: { properties: { "class.full-width": "this.fullWidth" } }, ngImport: i0, template: "<div\n class=\"main\"\n [class.info]=\"type === 'info'\"\n [class.warning]=\"type === 'warning'\"\n [class.error]=\"type === 'error'\"\n [class.success]=\"type === 'success'\"\n [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n class=\"status\"\n size=\"sm\"\n [symbolId]=\"symbolIds[type]\" />\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n @if (title) {\n <span class=\"title\">\n {{ title }}\n </span>\n }\n <span class=\"text\">\n <ng-content>Infobox text</ng-content>\n </span>\n </div>\n @if (buttonLabel) {\n <ap-button\n name=\"infobox-button\"\n [id]=\"buttonId ?? defaultButtonId\"\n [attr.data-track]=\"buttonDataTrack\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n }\n </div>\n </div>\n @if (closable) {\n <ap-close-button (closed)=\"onCloseInfobox()\" />\n }\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 20px;container:infobox/inline-size;display:block;width:100%;max-width:100%}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:center}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items:flex-start;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content{display:flex;gap:var(--ref-spacing-xs);align-items:flex-start;flex:1}ap-infobox .main .wrapper .symbol-content .content{display:flex;flex-direction:column;align-items:flex-start;flex:1;justify-content:space-between;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content .content ap-button button{width:unset}ap-infobox .main .wrapper .symbol-content .content .texts{display:flex;flex-direction:column;overflow-wrap:anywhere}ap-infobox .main .wrapper .symbol-content .content .texts .title{font-weight:var(--comp-infobox-text-title-weight);font-family:var(--comp-infobox-text-title-font-family);font-size:var(--comp-infobox-text-title-size);line-height:var(--comp-infobox-text-title-line-height)}ap-infobox .main.info{background-color:var(--comp-infobox-info-background-color)}ap-infobox .main.info ap-symbol.status{align-self:baseline;color:var(--comp-infobox-info-icon-color)}ap-infobox .main.info .status-banner{background-color:var(--comp-infobox-info-border-left-color)}ap-infobox .main.warning{background-color:var(--comp-infobox-warning-background-color)}ap-infobox .main.warning ap-symbol.status{color:var(--comp-infobox-warning-icon-color)}ap-infobox .main.warning .status-banner{background-color:var(--comp-infobox-warning-border-left-color)}ap-infobox .main.error{background-color:var(--comp-infobox-error-background-color)}ap-infobox .main.error ap-symbol.status{color:var(--comp-infobox-error-icon-color)}ap-infobox .main.error .status-banner{background-color:var(--comp-infobox-error-border-left-color)}ap-infobox .main.success{background-color:var(--comp-infobox-success-background-color)}ap-infobox .main.success ap-symbol.status{color:var(--comp-infobox-success-icon-color)}ap-infobox .main.success .status-banner{background-color:var(--comp-infobox-success-border-left-color)}@container infobox (min-width: 588px){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: CloseButtonComponent, selector: "ap-close-button", inputs: ["disabled", "ariaLabel", "dataTest"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
51
58
|
}
|
|
52
59
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InfoboxComponent, decorators: [{
|
|
53
60
|
type: Component,
|
|
54
|
-
args: [{ selector: 'ap-infobox', standalone: true, imports: [SymbolComponent,
|
|
61
|
+
args: [{ selector: 'ap-infobox', standalone: true, imports: [SymbolComponent, ButtonComponent, CloseButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"main\"\n [class.info]=\"type === 'info'\"\n [class.warning]=\"type === 'warning'\"\n [class.error]=\"type === 'error'\"\n [class.success]=\"type === 'success'\"\n [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n class=\"status\"\n size=\"sm\"\n [symbolId]=\"symbolIds[type]\" />\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n @if (title) {\n <span class=\"title\">\n {{ title }}\n </span>\n }\n <span class=\"text\">\n <ng-content>Infobox text</ng-content>\n </span>\n </div>\n @if (buttonLabel) {\n <ap-button\n name=\"infobox-button\"\n [id]=\"buttonId ?? defaultButtonId\"\n [attr.data-track]=\"buttonDataTrack\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n }\n </div>\n </div>\n @if (closable) {\n <ap-close-button (closed)=\"onCloseInfobox()\" />\n }\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 20px;container:infobox/inline-size;display:block;width:100%;max-width:100%}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:center}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items:flex-start;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content{display:flex;gap:var(--ref-spacing-xs);align-items:flex-start;flex:1}ap-infobox .main .wrapper .symbol-content .content{display:flex;flex-direction:column;align-items:flex-start;flex:1;justify-content:space-between;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content .content ap-button button{width:unset}ap-infobox .main .wrapper .symbol-content .content .texts{display:flex;flex-direction:column;overflow-wrap:anywhere}ap-infobox .main .wrapper .symbol-content .content .texts .title{font-weight:var(--comp-infobox-text-title-weight);font-family:var(--comp-infobox-text-title-font-family);font-size:var(--comp-infobox-text-title-size);line-height:var(--comp-infobox-text-title-line-height)}ap-infobox .main.info{background-color:var(--comp-infobox-info-background-color)}ap-infobox .main.info ap-symbol.status{align-self:baseline;color:var(--comp-infobox-info-icon-color)}ap-infobox .main.info .status-banner{background-color:var(--comp-infobox-info-border-left-color)}ap-infobox .main.warning{background-color:var(--comp-infobox-warning-background-color)}ap-infobox .main.warning ap-symbol.status{color:var(--comp-infobox-warning-icon-color)}ap-infobox .main.warning .status-banner{background-color:var(--comp-infobox-warning-border-left-color)}ap-infobox .main.error{background-color:var(--comp-infobox-error-background-color)}ap-infobox .main.error ap-symbol.status{color:var(--comp-infobox-error-icon-color)}ap-infobox .main.error .status-banner{background-color:var(--comp-infobox-error-border-left-color)}ap-infobox .main.success{background-color:var(--comp-infobox-success-background-color)}ap-infobox .main.success ap-symbol.status{color:var(--comp-infobox-success-icon-color)}ap-infobox .main.success .status-banner{background-color:var(--comp-infobox-success-border-left-color)}@container infobox (min-width: 588px){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"] }]
|
|
55
62
|
}], ctorParameters: () => [], propDecorators: { fullWidth: [{
|
|
56
63
|
type: HostBinding,
|
|
57
64
|
args: ['class.full-width']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-infobox.mjs","sources":["../../../libs/ui-components/infobox/src/infobox.component.ts","../../../libs/ui-components/infobox/src/infobox.component.html","../../../libs/ui-components/infobox/src/agorapulse-ui-components-infobox.ts"],"sourcesContent":["import { ButtonComponent } from '@agorapulse/ui-components/button';\nimport {\n SymbolComponent,\n SymbolRegistry,\n agorapulseSymbol,\n
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-infobox.mjs","sources":["../../../libs/ui-components/infobox/src/infobox.component.ts","../../../libs/ui-components/infobox/src/infobox.component.html","../../../libs/ui-components/infobox/src/agorapulse-ui-components-infobox.ts"],"sourcesContent":["import { ButtonComponent } from '@agorapulse/ui-components/button';\nimport { CloseButtonComponent } from '@agorapulse/ui-components/close-button';\nimport {\n SymbolComponent,\n SymbolRegistry,\n agorapulseSymbol,\n apClose,\n apDeleteNoCircle,\n apErrorFill,\n apInfoFill,\n apRemoveCircle,\n apRoundedCheckFill,\n apWarningFill,\n} from '@agorapulse/ui-symbol';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n HostBinding,\n Input,\n Output,\n ViewEncapsulation,\n booleanAttribute,\n inject,\n} from '@angular/core';\nexport type InfoboxDirection = 'column' | 'row';\nexport type InfoboxWidth = 'fit' | 'full-width';\n\n// Increasing integer for generating unique ids for infobox components.\nlet nextUniqueId = 0;\n\n@Component({\n selector: 'ap-infobox',\n templateUrl: './infobox.component.html',\n styleUrls: ['./infobox.component.scss'],\n standalone: true,\n imports: [SymbolComponent, ButtonComponent, CloseButtonComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class InfoboxComponent {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly elementRef = inject(ElementRef);\n\n @HostBinding('class.full-width') fullWidth: boolean = false;\n\n @Input() buttonId: string | null = null;\n @Input() buttonLabel: string | undefined = undefined;\n @Input() buttonDataTrack: string | null = null;\n @Input({\n transform: booleanAttribute,\n })\n closable = false;\n @Input() title?: string;\n @Input() type: 'info' | 'warning' | 'error' | 'success' = 'info';\n\n @Input() set width(width: InfoboxWidth) {\n this._width = width;\n this.fullWidth = width === 'full-width';\n }\n get width(): InfoboxWidth {\n return this._width;\n }\n private _width: InfoboxWidth = 'fit';\n\n @Output() buttonClicked = new EventEmitter<void>();\n @Output() closed = new EventEmitter<void>();\n\n displayDirection: 'horizontal' | 'vertical' = 'horizontal';\n defaultButtonId: string = '';\n\n readonly symbolIds: { [k: string]: agorapulseSymbol } = {\n info: 'info_fill',\n warning: 'warning_fill',\n error: 'error_fill',\n success: 'rounded-check_fill',\n };\n\n constructor() {\n this.symbolRegistry.registerSymbols([\n apInfoFill,\n apErrorFill,\n apWarningFill,\n apRemoveCircle,\n apRoundedCheckFill,\n apClose,\n apDeleteNoCircle,\n ]);\n this.defaultButtonId = `infobox-button-${++nextUniqueId}`;\n }\n\n onClickButton(): void {\n this.buttonClicked.emit();\n }\n\n onCloseInfobox(): void {\n this.elementRef.nativeElement.remove();\n this.closed.emit();\n }\n}\n","<div\n class=\"main\"\n [class.info]=\"type === 'info'\"\n [class.warning]=\"type === 'warning'\"\n [class.error]=\"type === 'error'\"\n [class.success]=\"type === 'success'\"\n [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n class=\"status\"\n size=\"sm\"\n [symbolId]=\"symbolIds[type]\" />\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n @if (title) {\n <span class=\"title\">\n {{ title }}\n </span>\n }\n <span class=\"text\">\n <ng-content>Infobox text</ng-content>\n </span>\n </div>\n @if (buttonLabel) {\n <ap-button\n name=\"infobox-button\"\n [id]=\"buttonId ?? defaultButtonId\"\n [attr.data-track]=\"buttonDataTrack\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n }\n </div>\n </div>\n @if (closable) {\n <ap-close-button (closed)=\"onCloseInfobox()\" />\n }\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { inject, ElementRef, NgZone, EventEmitter, booleanAttribute, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { BehaviorSubject } from 'rxjs';
|
|
4
|
-
import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
|
|
5
|
-
import { SymbolRegistry, apRemoveBold, SymbolComponent } from '@agorapulse/ui-symbol';
|
|
6
|
-
import { NgClass } from '@angular/common';
|
|
7
4
|
import { CloseButtonComponent } from '@agorapulse/ui-components/close-button';
|
|
5
|
+
import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
|
|
6
|
+
import { SymbolRegistry, apRemoveBold } from '@agorapulse/ui-symbol';
|
|
8
7
|
import * as i1 from '@agorapulse/ui-components/text-measurement';
|
|
9
8
|
|
|
10
9
|
class LabelComponent {
|
|
@@ -43,7 +42,7 @@ class LabelComponent {
|
|
|
43
42
|
}
|
|
44
43
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: LabelComponent, decorators: [{
|
|
45
44
|
type: Component,
|
|
46
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-label', standalone: true, imports: [
|
|
45
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-label', standalone: true, imports: [TooltipDirective, CloseButtonComponent], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"label\"\n [class.removable]=\"removable\"\n [apTooltip]=\"tooltipEnabled ? content : ''\">\n <span class=\"label-content\">{{ content }}</span>\n @if (removable) {\n <ap-close-button (closed)=\"onClearLabel($event)\" />\n }\n</div>\n", styles: ["ap-label{display:flex;--button-size: calc(var(--comp-label-height) - 4px);--max-width: 180px}ap-label .label{padding:0 var(--ref-spacing-xxs);color:var(--comp-label-text-color);align-self:center;background:var(--comp-label-background-color);border-radius:var(--comp-label-border-radius);text-wrap:none;display:flex;align-items:center;border:none;padding:0 var(--comp-label-padding-right) 0 var(--comp-label-padding-left);height:var(--comp-label-height);box-sizing:border-box;text-overflow:ellipsis}ap-label .label.removable{gap:var(--comp-label-closable-spacing);padding:0 var(--comp-label-closable-padding-right) 0 var(--ref-spacing-xxs)}ap-label .label .label-content{max-width:var(--max-width);color:var(--comp-label-text-color);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--comp-label-text-style-font-family);font-size:var(--comp-label-text-style-size);line-height:var(--comp-label-text-style-line-height);font-weight:var(--comp-label-text-style-font-weight)}\n"] }]
|
|
47
46
|
}], ctorParameters: () => [], propDecorators: { content: [{
|
|
48
47
|
type: Input,
|
|
49
48
|
args: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-labels.mjs","sources":["../../../libs/ui-components/labels/src/label.component.ts","../../../libs/ui-components/labels/src/label.component.html","../../../libs/ui-components/labels/src/label-list.component.ts","../../../libs/ui-components/labels/src/label-list.component.html","../../../libs/ui-components/labels/src/agorapulse-ui-components-labels.ts"],"sourcesContent":["import { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { apRemoveBold, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { NgClass } from '@angular/common';\nimport {\n AfterViewInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n inject,\n Input,\n NgZone,\n OnDestroy,\n Output,\n ViewEncapsulation,\n} from '@angular/core';\nimport { CloseButtonComponent } from '@agorapulse/ui-components/close-button';\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-label',\n standalone: true,\n templateUrl: './label.component.html',\n imports: [NgClass, TooltipDirective, SymbolComponent, CloseButtonComponent],\n styleUrls: ['./label.component.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class LabelComponent implements AfterViewInit, OnDestroy {\n private elementRef: ElementRef = inject(ElementRef);\n private symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n private zone: NgZone = inject(NgZone);\n\n @Input({\n required: true,\n })\n content!: string;\n @Input() selectorWidth: number = 0; //Width of the selector input, if applicable\n @Input({ transform: booleanAttribute }) removable: boolean = false;\n\n @Output() remove = new EventEmitter<{ content: string; $event: MouseEvent }>();\n\n private observer: ResizeObserver | undefined = undefined;\n tooltipEnabled: boolean = false;\n\n constructor() {\n this.symbolRegistry.registerSymbols([apRemoveBold]);\n }\n\n ngAfterViewInit(): void {\n this.observer = new ResizeObserver(entries => {\n this.zone.run(() => {\n const containerWidth =\n this.elementRef.nativeElement.clientWidth > 0 ? this.elementRef.nativeElement.clientWidth : this.selectorWidth;\n if (containerWidth > 0) {\n this.tooltipEnabled = entries[0].target.scrollWidth > containerWidth;\n }\n });\n });\n this.observer.observe(this.elementRef.nativeElement.getElementsByClassName('label-content')[0]);\n }\n\n ngOnDestroy() {\n this.observer?.unobserve(this.elementRef.nativeElement.children[0]);\n }\n\n onClearLabel($event: MouseEvent) {\n this.elementRef.nativeElement.remove();\n this.remove.emit({ content: this.content, $event });\n }\n}\n","<div\n class=\"label\"\n [class.removable]=\"removable\"\n [apTooltip]=\"tooltipEnabled ? content : ''\">\n <span class=\"label-content\">{{ content }}</span>\n @if (removable) {\n <ap-close-button (closed)=\"onClearLabel($event)\" />\n }\n</div>\n","import { TextMeasurementService } from '@agorapulse/ui-components/text-measurement';\n\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n NgZone,\n OnChanges,\n OnDestroy,\n Output,\n SimpleChanges,\n} from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\nimport { LabelComponent } from './label.component';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-label-list',\n templateUrl: './label-list.component.html',\n styleUrls: ['./label-list.component.scss'],\n standalone: true,\n imports: [LabelComponent],\n})\nexport class LabelListComponent implements AfterContentInit, OnChanges, OnDestroy {\n @Input() labels: string[] = [];\n @Input() removeLabelsEnabled: boolean = false;\n @Input() responsive: boolean = false;\n @Input() seeLessTranslation: string = 'See less';\n @Input() hiddenLabelsTranslation: string = 'labels';\n @Output() removeLabel = new EventEmitter<string>();\n\n badgeWidth: number = 0;\n expanded: boolean = false;\n howManyItemsLeft = 0;\n responsiveLabels: string[] = [];\n\n private observer: ResizeObserver;\n private width$ = new BehaviorSubject<number>(0);\n\n constructor(\n private changeDetectorRef: ChangeDetectorRef,\n private elementRef: ElementRef,\n private textMeasurementService: TextMeasurementService,\n private zone: NgZone\n ) {\n this.observer = new ResizeObserver(entries => {\n this.zone.run(() => {\n this.width$.next(entries[0].contentRect.width);\n });\n });\n }\n\n ngAfterContentInit(): void {\n if (this.responsive) {\n this.generateResponsiveLabels(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0].offsetWidth);\n\n this.observer.observe(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0]);\n this.width$.subscribe(width => {\n this.generateResponsiveLabels(width);\n });\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.labels.currentValue && this.responsive) {\n this.generateResponsiveLabels(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0].offsetWidth);\n }\n }\n\n ngOnDestroy() {\n this.observer.unobserve(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0]);\n }\n\n onExpand() {\n this.expanded = !this.expanded;\n }\n\n onRemoveLabel({ content }: { content: string }): void {\n this.removeLabel.emit(content);\n }\n\n onResize() {\n this.generateResponsiveLabels(this.elementRef.nativeElement.children[0].offsetWidth);\n }\n\n public trackByLabelContent(_: number, entry: string) {\n return entry;\n }\n\n private generateResponsiveLabels(width: number) {\n let seeMoreElementWidth = this.textMeasurementService.calculateTextWidth('+'.concat(this.labels.length.toString()), 14, 'Averta');\n seeMoreElementWidth += 1 + 8 + 8 + 1; // border-left + padding-left + padding-right + border-right\n let elementWidth = width - 16 - 16; // width - padding-left - padding-right\n elementWidth -= seeMoreElementWidth;\n let currentIndex = 0;\n for (let index = 0; index < this.labels.length; index++) {\n let textWidth = this.textMeasurementService.calculateTextWidth(this.labels[index], 14, 'Averta');\n textWidth += 1 + 8 + (this.removeLabelsEnabled ? 25 : 8) + 1 + 4; // border-left + padding-left + padding-right + border-right + label spacing\n elementWidth -= textWidth;\n if (elementWidth <= 0) {\n break;\n }\n currentIndex = index;\n }\n if (currentIndex + 1 === this.labels.length) {\n this.expanded = false;\n }\n this.howManyItemsLeft = this.labels.length - (currentIndex + 1);\n this.badgeWidth =\n this.howManyItemsLeft > 0 && currentIndex === 0\n ? this.textMeasurementService.calculateTextWidth('+' + this.howManyItemsLeft, 14, 'Averta') + 22\n : 0;\n this.responsiveLabels = this.labels.slice(0, currentIndex + 1);\n this.changeDetectorRef.markForCheck();\n }\n}\n","<div\n class=\"labels-list\"\n (window:resize)=\"onResize()\">\n @if (responsive) {\n @for (label of expanded ? labels : responsiveLabels; track label) {\n <ap-label\n [content]=\"label\"\n [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n [removable]=\"removeLabelsEnabled\"\n (remove)=\"onRemoveLabel($event)\" />\n }\n @if (!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0) {\n <a\n class=\"standalone\"\n role=\"button\"\n (click)=\"onExpand()\">\n +{{ howManyItemsLeft }} {{ hiddenLabelsTranslation }}\n </a>\n }\n @if (expanded) {\n <a\n class=\"standalone\"\n role=\"button\"\n (click)=\"onExpand()\">\n {{ seeLessTranslation }}\n </a>\n }\n } @else {\n @for (label of labels; track trackByLabelContent($index, label)) {\n <ap-label\n [content]=\"label\"\n [removable]=\"removeLabelsEnabled\"\n (remove)=\"onRemoveLabel($event)\" />\n }\n }\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-labels.mjs","sources":["../../../libs/ui-components/labels/src/label.component.ts","../../../libs/ui-components/labels/src/label.component.html","../../../libs/ui-components/labels/src/label-list.component.ts","../../../libs/ui-components/labels/src/label-list.component.html","../../../libs/ui-components/labels/src/agorapulse-ui-components-labels.ts"],"sourcesContent":["import { CloseButtonComponent } from '@agorapulse/ui-components/close-button';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { apRemoveBold, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport {\n AfterViewInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n inject,\n Input,\n NgZone,\n OnDestroy,\n Output,\n ViewEncapsulation,\n} from '@angular/core';\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-label',\n standalone: true,\n templateUrl: './label.component.html',\n imports: [TooltipDirective, CloseButtonComponent],\n styleUrls: ['./label.component.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class LabelComponent implements AfterViewInit, OnDestroy {\n private elementRef: ElementRef = inject(ElementRef);\n private symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n private zone: NgZone = inject(NgZone);\n\n @Input({\n required: true,\n })\n content!: string;\n @Input() selectorWidth: number = 0; //Width of the selector input, if applicable\n @Input({ transform: booleanAttribute }) removable: boolean = false;\n\n @Output() remove = new EventEmitter<{ content: string; $event: MouseEvent }>();\n\n private observer: ResizeObserver | undefined = undefined;\n tooltipEnabled: boolean = false;\n\n constructor() {\n this.symbolRegistry.registerSymbols([apRemoveBold]);\n }\n\n ngAfterViewInit(): void {\n this.observer = new ResizeObserver(entries => {\n this.zone.run(() => {\n const containerWidth =\n this.elementRef.nativeElement.clientWidth > 0 ? this.elementRef.nativeElement.clientWidth : this.selectorWidth;\n if (containerWidth > 0) {\n this.tooltipEnabled = entries[0].target.scrollWidth > containerWidth;\n }\n });\n });\n this.observer.observe(this.elementRef.nativeElement.getElementsByClassName('label-content')[0]);\n }\n\n ngOnDestroy() {\n this.observer?.unobserve(this.elementRef.nativeElement.children[0]);\n }\n\n onClearLabel($event: MouseEvent) {\n this.elementRef.nativeElement.remove();\n this.remove.emit({ content: this.content, $event });\n }\n}\n","<div\n class=\"label\"\n [class.removable]=\"removable\"\n [apTooltip]=\"tooltipEnabled ? content : ''\">\n <span class=\"label-content\">{{ content }}</span>\n @if (removable) {\n <ap-close-button (closed)=\"onClearLabel($event)\" />\n }\n</div>\n","import { TextMeasurementService } from '@agorapulse/ui-components/text-measurement';\n\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n NgZone,\n OnChanges,\n OnDestroy,\n Output,\n SimpleChanges,\n} from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\nimport { LabelComponent } from './label.component';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-label-list',\n templateUrl: './label-list.component.html',\n styleUrls: ['./label-list.component.scss'],\n standalone: true,\n imports: [LabelComponent],\n})\nexport class LabelListComponent implements AfterContentInit, OnChanges, OnDestroy {\n @Input() labels: string[] = [];\n @Input() removeLabelsEnabled: boolean = false;\n @Input() responsive: boolean = false;\n @Input() seeLessTranslation: string = 'See less';\n @Input() hiddenLabelsTranslation: string = 'labels';\n @Output() removeLabel = new EventEmitter<string>();\n\n badgeWidth: number = 0;\n expanded: boolean = false;\n howManyItemsLeft = 0;\n responsiveLabels: string[] = [];\n\n private observer: ResizeObserver;\n private width$ = new BehaviorSubject<number>(0);\n\n constructor(\n private changeDetectorRef: ChangeDetectorRef,\n private elementRef: ElementRef,\n private textMeasurementService: TextMeasurementService,\n private zone: NgZone\n ) {\n this.observer = new ResizeObserver(entries => {\n this.zone.run(() => {\n this.width$.next(entries[0].contentRect.width);\n });\n });\n }\n\n ngAfterContentInit(): void {\n if (this.responsive) {\n this.generateResponsiveLabels(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0].offsetWidth);\n\n this.observer.observe(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0]);\n this.width$.subscribe(width => {\n this.generateResponsiveLabels(width);\n });\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.labels.currentValue && this.responsive) {\n this.generateResponsiveLabels(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0].offsetWidth);\n }\n }\n\n ngOnDestroy() {\n this.observer.unobserve(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0]);\n }\n\n onExpand() {\n this.expanded = !this.expanded;\n }\n\n onRemoveLabel({ content }: { content: string }): void {\n this.removeLabel.emit(content);\n }\n\n onResize() {\n this.generateResponsiveLabels(this.elementRef.nativeElement.children[0].offsetWidth);\n }\n\n public trackByLabelContent(_: number, entry: string) {\n return entry;\n }\n\n private generateResponsiveLabels(width: number) {\n let seeMoreElementWidth = this.textMeasurementService.calculateTextWidth('+'.concat(this.labels.length.toString()), 14, 'Averta');\n seeMoreElementWidth += 1 + 8 + 8 + 1; // border-left + padding-left + padding-right + border-right\n let elementWidth = width - 16 - 16; // width - padding-left - padding-right\n elementWidth -= seeMoreElementWidth;\n let currentIndex = 0;\n for (let index = 0; index < this.labels.length; index++) {\n let textWidth = this.textMeasurementService.calculateTextWidth(this.labels[index], 14, 'Averta');\n textWidth += 1 + 8 + (this.removeLabelsEnabled ? 25 : 8) + 1 + 4; // border-left + padding-left + padding-right + border-right + label spacing\n elementWidth -= textWidth;\n if (elementWidth <= 0) {\n break;\n }\n currentIndex = index;\n }\n if (currentIndex + 1 === this.labels.length) {\n this.expanded = false;\n }\n this.howManyItemsLeft = this.labels.length - (currentIndex + 1);\n this.badgeWidth =\n this.howManyItemsLeft > 0 && currentIndex === 0\n ? this.textMeasurementService.calculateTextWidth('+' + this.howManyItemsLeft, 14, 'Averta') + 22\n : 0;\n this.responsiveLabels = this.labels.slice(0, currentIndex + 1);\n this.changeDetectorRef.markForCheck();\n }\n}\n","<div\n class=\"labels-list\"\n (window:resize)=\"onResize()\">\n @if (responsive) {\n @for (label of expanded ? labels : responsiveLabels; track label) {\n <ap-label\n [content]=\"label\"\n [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n [removable]=\"removeLabelsEnabled\"\n (remove)=\"onRemoveLabel($event)\" />\n }\n @if (!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0) {\n <a\n class=\"standalone\"\n role=\"button\"\n (click)=\"onExpand()\">\n +{{ howManyItemsLeft }} {{ hiddenLabelsTranslation }}\n </a>\n }\n @if (expanded) {\n <a\n class=\"standalone\"\n role=\"button\"\n (click)=\"onExpand()\">\n {{ seeLessTranslation }}\n </a>\n }\n } @else {\n @for (label of labels; track trackByLabelContent($index, label)) {\n <ap-label\n [content]=\"label\"\n [removable]=\"removeLabelsEnabled\"\n (remove)=\"onRemoveLabel($event)\" />\n }\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|