@agorapulse/ui-components 20.3.3 → 20.3.5
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-20.3.5.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-infobox.mjs +4 -3
- package/fesm2022/agorapulse-ui-components-infobox.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-tabs.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-tabs.mjs.map +1 -1
- package/infobox/index.d.ts +3 -2
- package/package.json +1 -1
- package/agorapulse-ui-components-20.3.3.tgz +0 -0
|
Binary file
|
|
@@ -2,7 +2,7 @@ import { ButtonComponent } from '@agorapulse/ui-components/button';
|
|
|
2
2
|
import { CloseButtonComponent } from '@agorapulse/ui-components/close-button';
|
|
3
3
|
import { SymbolRegistry, apInfoFill, apErrorFill, apWarningFill, apTrash, apRoundedCheckFill, apClose, SymbolComponent } from '@agorapulse/ui-symbol';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { inject, ElementRef, EventEmitter, booleanAttribute, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
|
+
import { inject, ElementRef, input, EventEmitter, booleanAttribute, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
6
6
|
|
|
7
7
|
// Increasing integer for generating unique ids for infobox components.
|
|
8
8
|
let nextUniqueId = 0;
|
|
@@ -12,6 +12,7 @@ class InfoboxComponent {
|
|
|
12
12
|
buttonId = null;
|
|
13
13
|
buttonLabel = undefined;
|
|
14
14
|
buttonDataTrack = null;
|
|
15
|
+
buttonSymbolId = input(...(ngDevMode ? [undefined, { debugName: "buttonSymbolId" }] : []));
|
|
15
16
|
closable = false;
|
|
16
17
|
title;
|
|
17
18
|
type = 'info';
|
|
@@ -37,11 +38,11 @@ class InfoboxComponent {
|
|
|
37
38
|
this.closed.emit();
|
|
38
39
|
}
|
|
39
40
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: InfoboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
40
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { buttonId: "buttonId", buttonLabel: "buttonLabel", buttonDataTrack: "buttonDataTrack", closable:
|
|
41
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: false, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: false, isRequired: false, transformFunction: null }, buttonDataTrack: { classPropertyName: "buttonDataTrack", publicName: "buttonDataTrack", isSignal: false, isRequired: false, transformFunction: null }, buttonSymbolId: { classPropertyName: "buttonSymbolId", publicName: "buttonSymbolId", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked", closed: "closed" }, 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 />\n </span>\n </div>\n @if (buttonLabel) {\n <ap-button\n name=\"infobox-button\"\n symbolPosition=\"left\"\n [symbolId]=\"buttonSymbolId()\"\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 });
|
|
41
42
|
}
|
|
42
43
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: InfoboxComponent, decorators: [{
|
|
43
44
|
type: Component,
|
|
44
|
-
args: [{ selector: 'ap-infobox', 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 />\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"] }]
|
|
45
|
+
args: [{ selector: 'ap-infobox', 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 />\n </span>\n </div>\n @if (buttonLabel) {\n <ap-button\n name=\"infobox-button\"\n symbolPosition=\"left\"\n [symbolId]=\"buttonSymbolId()\"\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"] }]
|
|
45
46
|
}], ctorParameters: () => [], propDecorators: { buttonId: [{
|
|
46
47
|
type: Input
|
|
47
48
|
}], buttonLabel: [{
|
|
@@ -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 { CloseButtonComponent } from '@agorapulse/ui-components/close-button';\nimport {\n SymbolComponent,\n SymbolRegistry,\n agorapulseSymbol,\n apClose,\n apErrorFill,\n apInfoFill,\n apRoundedCheckFill,\n apTrash,\n apWarningFill,\n} from '@agorapulse/ui-symbol';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n Output,\n ViewEncapsulation,\n booleanAttribute,\n inject,\n} from '@angular/core';\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 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 @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 @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([apInfoFill, apErrorFill, apWarningFill, apTrash, apRoundedCheckFill, apClose]);\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 />\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":";;;;;;
|
|
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 apErrorFill,\n apInfoFill,\n apRoundedCheckFill,\n apTrash,\n apWarningFill,\n} from '@agorapulse/ui-symbol';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n Output,\n ViewEncapsulation,\n booleanAttribute,\n inject,\n input,\n} from '@angular/core';\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 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 @Input() buttonId: string | null = null;\n @Input() buttonLabel: string | undefined = undefined;\n @Input() buttonDataTrack: string | null = null;\n buttonSymbolId = input<agorapulseSymbol>();\n @Input({\n transform: booleanAttribute,\n })\n closable = false;\n @Input() title?: string;\n @Input() type: 'info' | 'warning' | 'error' | 'success' = 'info';\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([apInfoFill, apErrorFill, apWarningFill, apTrash, apRoundedCheckFill, apClose]);\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 />\n </span>\n </div>\n @if (buttonLabel) {\n <ap-button\n name=\"infobox-button\"\n symbolPosition=\"left\"\n [symbolId]=\"buttonSymbolId()\"\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":";;;;;;AA0BA;AACA,IAAI,YAAY,GAAG,CAAC;MAUP,gBAAgB,CAAA;AACR,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;AACvC,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;IAEvC,QAAQ,GAAkB,IAAI;IAC9B,WAAW,GAAuB,SAAS;IAC3C,eAAe,GAAkB,IAAI;IAC9C,cAAc,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAoB;IAI1C,QAAQ,GAAG,KAAK;AACP,IAAA,KAAK;IACL,IAAI,GAA6C,MAAM;AAEtD,IAAA,aAAa,GAAG,IAAI,YAAY,EAAQ;AACxC,IAAA,MAAM,GAAG,IAAI,YAAY,EAAQ;IAE3C,gBAAgB,GAA8B,YAAY;IAC1D,eAAe,GAAW,EAAE;AAEnB,IAAA,SAAS,GAAsC;AACpD,QAAA,IAAI,EAAE,WAAW;AACjB,QAAA,OAAO,EAAE,cAAc;AACvB,QAAA,KAAK,EAAE,YAAY;AACnB,QAAA,OAAO,EAAE,oBAAoB;KAChC;AAED,IAAA,WAAA,GAAA;AACI,QAAA,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,OAAO,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAAC;AACnH,QAAA,IAAI,CAAC,eAAe,GAAG,kBAAkB,EAAE,YAAY,EAAE;;IAG7D,aAAa,GAAA;AACT,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;;IAG7B,cAAc,GAAA;AACV,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,EAAE;AACtC,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;;uGAvCb,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EASV,gBAAgB,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9CnC,kuDAiDA,4nGDhBc,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAAA,OAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,oBAAoB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAIvD,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,OAAA,EAGb,CAAC,eAAe,EAAE,eAAe,EAAE,oBAAoB,CAAC,EAAA,eAAA,EAChD,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,kuDAAA,EAAA,MAAA,EAAA,CAAA,okGAAA,CAAA,EAAA;wDAM5B,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,eAAe,EAAA,CAAA;sBAAvB;gBAKD,QAAQ,EAAA,CAAA;sBAHP,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA;gBAEQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBAES,aAAa,EAAA,CAAA;sBAAtB;gBACS,MAAM,EAAA,CAAA;sBAAf;;;AErDL;;AAEG;;;;"}
|
|
@@ -93,11 +93,11 @@ class TabsComponent {
|
|
|
93
93
|
indicatorEl.style.backgroundColor = color;
|
|
94
94
|
}
|
|
95
95
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
96
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: TabsComponent, isStandalone: true, selector: "ap-tabs", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, providers: [withSymbols(apFeatureLock)], queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, isSignal: true }, { propertyName: "tabNav", first: true, predicate: ["tabNav"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ap-tabs\">\n <!-- Tab Navigation -->\n <div\n #tabNav\n class=\"ap-tabs__nav\"\n role=\"tablist\">\n @for (tab of tabs(); track $index) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ap-tabs__tab\"\n [class.ap-tabs__tab--active]=\"activeTabIndex() === $index\"\n [class.ap-tabs__tab--disabled]=\"tab.disabled()\"\n [class.ap-tabs__tab--feature-locked]=\"tab.featureLocked()\"\n [attr.aria-selected]=\"activeTabIndex() === $index\"\n [attr.aria-controls]=\"componentId() + '-panel-' + $index\"\n [attr.id]=\"componentId() + '-tab-' + $index\"\n [attr.data-tab-index]=\"$index\"\n [disabled]=\"disabled() || tab.disabled()\"\n [tabindex]=\"disabled() || tab.disabled() ? -1 : 0\"\n (click)=\"selectTab($index)\"\n (keydown)=\"onKeyDown($event, $index)\">\n <div class=\"ap-tabs__tab-content\">\n <div class=\"ap-tabs__tab-header\">\n @if (tab.symbolId()) {\n <ap-symbol\n class=\"ap-tabs__tab-icon\"\n size=\"sm\"\n [symbolId]=\"tab.symbolId()\"\n [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'purple' : 'blue') : 'basic-grey'\" />\n }\n <span class=\"ap-tabs__tab-label\">{{ tab.label() }}</span>\n @if (tab.featureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n class=\"ap-tabs__tab-feature-lock\" />\n }\n @if (tab.counter() && !tab.featureLocked()) {\n <ap-counter [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'blue' : 'blue') : 'grey'\">\n {{ tab.counter() }}\n </ap-counter>\n }\n </div>\n </div>\n </button>\n }\n <!-- Sliding indicator -->\n <div\n #indicator\n class=\"ap-tabs__indicator\"></div>\n </div>\n\n <!-- Tab Panels -->\n <div class=\"ap-tabs__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.ap-tabs{display:flex;flex-direction:column;width:100%}.ap-tabs__nav{display:flex;align-items:center;border-bottom:1px solid var(--comp-tabs-border-color);
|
|
96
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: TabsComponent, isStandalone: true, selector: "ap-tabs", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, providers: [withSymbols(apFeatureLock)], queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, isSignal: true }, { propertyName: "tabNav", first: true, predicate: ["tabNav"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ap-tabs\">\n <!-- Tab Navigation -->\n <div\n #tabNav\n class=\"ap-tabs__nav\"\n role=\"tablist\">\n @for (tab of tabs(); track $index) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ap-tabs__tab\"\n [class.ap-tabs__tab--active]=\"activeTabIndex() === $index\"\n [class.ap-tabs__tab--disabled]=\"tab.disabled()\"\n [class.ap-tabs__tab--feature-locked]=\"tab.featureLocked()\"\n [attr.aria-selected]=\"activeTabIndex() === $index\"\n [attr.aria-controls]=\"componentId() + '-panel-' + $index\"\n [attr.id]=\"componentId() + '-tab-' + $index\"\n [attr.data-tab-index]=\"$index\"\n [disabled]=\"disabled() || tab.disabled()\"\n [tabindex]=\"disabled() || tab.disabled() ? -1 : 0\"\n (click)=\"selectTab($index)\"\n (keydown)=\"onKeyDown($event, $index)\">\n <div class=\"ap-tabs__tab-content\">\n <div class=\"ap-tabs__tab-header\">\n @if (tab.symbolId()) {\n <ap-symbol\n class=\"ap-tabs__tab-icon\"\n size=\"sm\"\n [symbolId]=\"tab.symbolId()\"\n [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'purple' : 'blue') : 'basic-grey'\" />\n }\n <span class=\"ap-tabs__tab-label\">{{ tab.label() }}</span>\n @if (tab.featureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n class=\"ap-tabs__tab-feature-lock\" />\n }\n @if (tab.counter() && !tab.featureLocked()) {\n <ap-counter [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'blue' : 'blue') : 'grey'\">\n {{ tab.counter() }}\n </ap-counter>\n }\n </div>\n </div>\n </button>\n }\n <!-- Sliding indicator -->\n <div\n #indicator\n class=\"ap-tabs__indicator\"></div>\n </div>\n\n <!-- Tab Panels -->\n <div class=\"ap-tabs__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.ap-tabs{display:flex;flex-direction:column;width:100%}.ap-tabs .ap-tabs__nav{display:flex;align-items:center;border-bottom:1px solid var(--comp-tabs-border-color);position:relative}.ap-tabs .ap-tabs__tab{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-family:var(--comp-tabs-text-font-family);text-align:center;position:relative;white-space:nowrap;padding:var(--comp-tabs-tab-padding);font-size:var(--comp-tabs-tab-font-size);line-height:var(--comp-tabs-tab-line-height);min-height:var(--comp-tabs-tab-min-height);color:var(--comp-tabs-tab-text-color-default)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-content{display:flex;flex-direction:column;align-items:center;gap:var(--comp-tabs-tab-content-gap)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-header{display:flex;align-items:center;gap:var(--comp-tabs-tab-header-gap)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-label{font-weight:inherit;font-size:inherit;line-height:inherit}.ap-tabs .ap-tabs__tab .ap-tabs__tab-feature-lock{width:16px;height:16px;color:var(--comp-tabs-tab-feature-lock-color)}.ap-tabs .ap-tabs__tab:hover:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-hover-background-color)}.ap-tabs .ap-tabs__tab:focus{outline:none}.ap-tabs .ap-tabs__tab:focus-visible:not(.ap-tabs__tab--active){outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius);background-color:var(--comp-tabs-tab-focus-background-color)}.ap-tabs .ap-tabs__tab:active:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-active-background-color)}.ap-tabs .ap-tabs__tab:disabled{cursor:not-allowed;opacity:.5}.ap-tabs .ap-tabs__tab .ap-tabs__tab--active{color:var(--comp-tabs-tab-text-color-active);text-shadow:.5px 0 0 currentColor}.ap-tabs .ap-tabs__tab .ap-tabs__tab--active:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius)}.ap-tabs .ap-tabs__tab .ap-tabs__tab--disabled{color:var(--comp-tabs-tab-text-color-disabled);cursor:not-allowed}.ap-tabs .ap-tabs__tab .ap-tabs__tab--feature-locked:hover:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-feature-locked-hover-background-color)}.ap-tabs .ap-tabs__tab .ap-tabs__tab--feature-locked:focus-visible:not(.ap-tabs__tab--active){color:var(--comp-tabs-tab-text-color-feature-locked-focus);background-color:var(--comp-tabs-tab-feature-locked-focus-background-color)}.ap-tabs .ap-tabs__tab .ap-tabs__tab--feature-locked:active:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-feature-locked-active-background-color)}.ap-tabs .ap-tabs__tab .ap-tabs__tab--feature-locked.ap-tabs__tab--active{color:var(--comp-tabs-tab-text-color-feature-locked-active);text-shadow:.5px 0 0 currentColor}.ap-tabs .ap-tabs__tab .ap-tabs__tab--feature-locked.ap-tabs__tab--active:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius)}.ap-tabs .ap-tabs__indicator{position:absolute;bottom:-1px;height:4px;background-color:var(--comp-tabs-tab-active-indicator-color);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1);transform-origin:left}.ap-tabs .ap-tabs__content{flex:1;width:100%;padding-top:var(--comp-tabs-content-spacing)}.ap-tabs .ap-tabs__panel{display:none;width:100%}.ap-tabs .ap-tabs__panel--active{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
97
97
|
}
|
|
98
98
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TabsComponent, decorators: [{
|
|
99
99
|
type: Component,
|
|
100
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tabs', imports: [CommonModule, CounterComponent, SymbolComponent], providers: [withSymbols(apFeatureLock)], template: "<div class=\"ap-tabs\">\n <!-- Tab Navigation -->\n <div\n #tabNav\n class=\"ap-tabs__nav\"\n role=\"tablist\">\n @for (tab of tabs(); track $index) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ap-tabs__tab\"\n [class.ap-tabs__tab--active]=\"activeTabIndex() === $index\"\n [class.ap-tabs__tab--disabled]=\"tab.disabled()\"\n [class.ap-tabs__tab--feature-locked]=\"tab.featureLocked()\"\n [attr.aria-selected]=\"activeTabIndex() === $index\"\n [attr.aria-controls]=\"componentId() + '-panel-' + $index\"\n [attr.id]=\"componentId() + '-tab-' + $index\"\n [attr.data-tab-index]=\"$index\"\n [disabled]=\"disabled() || tab.disabled()\"\n [tabindex]=\"disabled() || tab.disabled() ? -1 : 0\"\n (click)=\"selectTab($index)\"\n (keydown)=\"onKeyDown($event, $index)\">\n <div class=\"ap-tabs__tab-content\">\n <div class=\"ap-tabs__tab-header\">\n @if (tab.symbolId()) {\n <ap-symbol\n class=\"ap-tabs__tab-icon\"\n size=\"sm\"\n [symbolId]=\"tab.symbolId()\"\n [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'purple' : 'blue') : 'basic-grey'\" />\n }\n <span class=\"ap-tabs__tab-label\">{{ tab.label() }}</span>\n @if (tab.featureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n class=\"ap-tabs__tab-feature-lock\" />\n }\n @if (tab.counter() && !tab.featureLocked()) {\n <ap-counter [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'blue' : 'blue') : 'grey'\">\n {{ tab.counter() }}\n </ap-counter>\n }\n </div>\n </div>\n </button>\n }\n <!-- Sliding indicator -->\n <div\n #indicator\n class=\"ap-tabs__indicator\"></div>\n </div>\n\n <!-- Tab Panels -->\n <div class=\"ap-tabs__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.ap-tabs{display:flex;flex-direction:column;width:100%}.ap-tabs__nav{display:flex;align-items:center;border-bottom:1px solid var(--comp-tabs-border-color);
|
|
100
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tabs', imports: [CommonModule, CounterComponent, SymbolComponent], providers: [withSymbols(apFeatureLock)], template: "<div class=\"ap-tabs\">\n <!-- Tab Navigation -->\n <div\n #tabNav\n class=\"ap-tabs__nav\"\n role=\"tablist\">\n @for (tab of tabs(); track $index) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ap-tabs__tab\"\n [class.ap-tabs__tab--active]=\"activeTabIndex() === $index\"\n [class.ap-tabs__tab--disabled]=\"tab.disabled()\"\n [class.ap-tabs__tab--feature-locked]=\"tab.featureLocked()\"\n [attr.aria-selected]=\"activeTabIndex() === $index\"\n [attr.aria-controls]=\"componentId() + '-panel-' + $index\"\n [attr.id]=\"componentId() + '-tab-' + $index\"\n [attr.data-tab-index]=\"$index\"\n [disabled]=\"disabled() || tab.disabled()\"\n [tabindex]=\"disabled() || tab.disabled() ? -1 : 0\"\n (click)=\"selectTab($index)\"\n (keydown)=\"onKeyDown($event, $index)\">\n <div class=\"ap-tabs__tab-content\">\n <div class=\"ap-tabs__tab-header\">\n @if (tab.symbolId()) {\n <ap-symbol\n class=\"ap-tabs__tab-icon\"\n size=\"sm\"\n [symbolId]=\"tab.symbolId()\"\n [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'purple' : 'blue') : 'basic-grey'\" />\n }\n <span class=\"ap-tabs__tab-label\">{{ tab.label() }}</span>\n @if (tab.featureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n class=\"ap-tabs__tab-feature-lock\" />\n }\n @if (tab.counter() && !tab.featureLocked()) {\n <ap-counter [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'blue' : 'blue') : 'grey'\">\n {{ tab.counter() }}\n </ap-counter>\n }\n </div>\n </div>\n </button>\n }\n <!-- Sliding indicator -->\n <div\n #indicator\n class=\"ap-tabs__indicator\"></div>\n </div>\n\n <!-- Tab Panels -->\n <div class=\"ap-tabs__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.ap-tabs{display:flex;flex-direction:column;width:100%}.ap-tabs .ap-tabs__nav{display:flex;align-items:center;border-bottom:1px solid var(--comp-tabs-border-color);position:relative}.ap-tabs .ap-tabs__tab{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-family:var(--comp-tabs-text-font-family);text-align:center;position:relative;white-space:nowrap;padding:var(--comp-tabs-tab-padding);font-size:var(--comp-tabs-tab-font-size);line-height:var(--comp-tabs-tab-line-height);min-height:var(--comp-tabs-tab-min-height);color:var(--comp-tabs-tab-text-color-default)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-content{display:flex;flex-direction:column;align-items:center;gap:var(--comp-tabs-tab-content-gap)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-header{display:flex;align-items:center;gap:var(--comp-tabs-tab-header-gap)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-label{font-weight:inherit;font-size:inherit;line-height:inherit}.ap-tabs .ap-tabs__tab .ap-tabs__tab-feature-lock{width:16px;height:16px;color:var(--comp-tabs-tab-feature-lock-color)}.ap-tabs .ap-tabs__tab:hover:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-hover-background-color)}.ap-tabs .ap-tabs__tab:focus{outline:none}.ap-tabs .ap-tabs__tab:focus-visible:not(.ap-tabs__tab--active){outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius);background-color:var(--comp-tabs-tab-focus-background-color)}.ap-tabs .ap-tabs__tab:active:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-active-background-color)}.ap-tabs .ap-tabs__tab:disabled{cursor:not-allowed;opacity:.5}.ap-tabs .ap-tabs__tab .ap-tabs__tab--active{color:var(--comp-tabs-tab-text-color-active);text-shadow:.5px 0 0 currentColor}.ap-tabs .ap-tabs__tab .ap-tabs__tab--active:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius)}.ap-tabs .ap-tabs__tab .ap-tabs__tab--disabled{color:var(--comp-tabs-tab-text-color-disabled);cursor:not-allowed}.ap-tabs .ap-tabs__tab .ap-tabs__tab--feature-locked:hover:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-feature-locked-hover-background-color)}.ap-tabs .ap-tabs__tab .ap-tabs__tab--feature-locked:focus-visible:not(.ap-tabs__tab--active){color:var(--comp-tabs-tab-text-color-feature-locked-focus);background-color:var(--comp-tabs-tab-feature-locked-focus-background-color)}.ap-tabs .ap-tabs__tab .ap-tabs__tab--feature-locked:active:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-feature-locked-active-background-color)}.ap-tabs .ap-tabs__tab .ap-tabs__tab--feature-locked.ap-tabs__tab--active{color:var(--comp-tabs-tab-text-color-feature-locked-active);text-shadow:.5px 0 0 currentColor}.ap-tabs .ap-tabs__tab .ap-tabs__tab--feature-locked.ap-tabs__tab--active:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius)}.ap-tabs .ap-tabs__indicator{position:absolute;bottom:-1px;height:4px;background-color:var(--comp-tabs-tab-active-indicator-color);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1);transform-origin:left}.ap-tabs .ap-tabs__content{flex:1;width:100%;padding-top:var(--comp-tabs-content-spacing)}.ap-tabs .ap-tabs__panel{display:none;width:100%}.ap-tabs .ap-tabs__panel--active{display:block}\n"] }]
|
|
101
101
|
}] });
|
|
102
102
|
|
|
103
103
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-tabs.mjs","sources":["../../../libs/ui-components/tabs/src/tab/tab.component.ts","../../../libs/ui-components/tabs/src/tab/tab.component.html","../../../libs/ui-components/tabs/src/tabs.component.ts","../../../libs/ui-components/tabs/src/tabs.component.html","../../../libs/ui-components/tabs/src/agorapulse-ui-components-tabs.ts"],"sourcesContent":["import { agorapulseSymbol } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-tab',\n templateUrl: './tab.component.html',\n})\nexport class TabComponent {\n label = input.required<string>();\n counter = input<number>();\n disabled = input(false);\n featureLocked = input(false);\n symbolId = input<agorapulseSymbol>();\n\n isActive = signal(false);\n tabIndex = signal(0);\n}\n","@if (isActive()) {\n <div\n role=\"tabpanel\"\n class=\"ap-tab__panel\"\n [attr.id]=\"'ap-tab-panel-' + tabIndex()\"\n [attr.aria-labelledby]=\"'ap-tab-' + tabIndex()\">\n <ng-content />\n </div>\n}\n","import { CounterComponent } from '@agorapulse/ui-components/counter';\nimport { SymbolComponent, withSymbols } from '@agorapulse/ui-symbol';\nimport { apFeatureLock } from '@agorapulse/ui-symbol/icons';\nimport { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n contentChildren,\n effect,\n ElementRef,\n input,\n linkedSignal,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { TabComponent } from './tab/tab.component';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-tabs',\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n imports: [CommonModule, CounterComponent, SymbolComponent],\n providers: [withSymbols(apFeatureLock)],\n})\nexport class TabsComponent {\n tabs = contentChildren(TabComponent);\n indicator = viewChild<ElementRef<HTMLElement>>('indicator');\n tabNav = viewChild<ElementRef<HTMLElement>>('tabNav');\n\n selectedIndex = input(0);\n disabled = input(false);\n\n tabChange = output<{ index: number; tab: TabComponent }>();\n\n // Unique ID per component instance to prevent DOM ID conflicts\n private static nextId = 0;\n readonly componentId = signal(`ap-tabs-${TabsComponent.nextId++}`);\n\n readonly activeTabIndex = linkedSignal(() => this.selectedIndex());\n\n private readonly updateIndicatorPositionEffect = effect(() => {\n const activeIndex = this.activeTabIndex();\n const tabs = this.tabs();\n tabs.forEach((tab, index) => {\n tab.isActive.set(index === activeIndex);\n tab.tabIndex.set(index);\n });\n this.updateIndicatorPosition(activeIndex);\n });\n\n selectTab(index: number): void {\n if (this.disabled() || index < 0 || index >= this.tabs().length) {\n return;\n }\n\n const tab = this.tabs()[index];\n if (tab?.disabled()) {\n return;\n }\n\n this.activeTabIndex.set(index);\n this.tabChange.emit({ index, tab });\n }\n\n onKeyDown(event: KeyboardEvent, index: number): void {\n switch (event.key) {\n case 'Enter':\n case ' ':\n event.preventDefault();\n this.selectTab(index);\n break;\n }\n }\n\n private focusTab(index: number): void {\n const tabButton = document.querySelector(`[data-tab-index=\"${index}\"]`) as HTMLElement;\n tabButton?.focus();\n }\n\n private updateIndicatorPosition(activeIndex: number): void {\n const indicatorEl = this.indicator()?.nativeElement;\n const tabNavEl = this.tabNav()?.nativeElement;\n\n if (!indicatorEl || !tabNavEl) {\n // If elements aren't ready, try again in the next tick\n setTimeout(() => this.updateIndicatorPosition(activeIndex), 0);\n return;\n }\n\n const activeTab = tabNavEl.querySelector(`[data-tab-index=\"${activeIndex}\"]`) as HTMLElement;\n if (!activeTab) {\n // If tab button isn't ready, try again in the next tick\n setTimeout(() => this.updateIndicatorPosition(activeIndex), 0);\n return;\n }\n\n const tabRect = activeTab.getBoundingClientRect();\n const navRect = tabNavEl.getBoundingClientRect();\n\n const left = tabRect.left - navRect.left;\n const width = tabRect.width;\n\n // Check if active tab is feature locked to change indicator color\n const isFeatureLocked = this.tabs()[activeIndex]?.featureLocked();\n const color = isFeatureLocked\n ? 'var(--comp-tabs-tab-feature-locked-indicator-color)'\n : 'var(--comp-tabs-tab-active-indicator-color)';\n\n indicatorEl.style.transform = `translateX(${left}px)`;\n indicatorEl.style.width = `${width}px`;\n indicatorEl.style.backgroundColor = color;\n }\n}\n","<div class=\"ap-tabs\">\n <!-- Tab Navigation -->\n <div\n #tabNav\n class=\"ap-tabs__nav\"\n role=\"tablist\">\n @for (tab of tabs(); track $index) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ap-tabs__tab\"\n [class.ap-tabs__tab--active]=\"activeTabIndex() === $index\"\n [class.ap-tabs__tab--disabled]=\"tab.disabled()\"\n [class.ap-tabs__tab--feature-locked]=\"tab.featureLocked()\"\n [attr.aria-selected]=\"activeTabIndex() === $index\"\n [attr.aria-controls]=\"componentId() + '-panel-' + $index\"\n [attr.id]=\"componentId() + '-tab-' + $index\"\n [attr.data-tab-index]=\"$index\"\n [disabled]=\"disabled() || tab.disabled()\"\n [tabindex]=\"disabled() || tab.disabled() ? -1 : 0\"\n (click)=\"selectTab($index)\"\n (keydown)=\"onKeyDown($event, $index)\">\n <div class=\"ap-tabs__tab-content\">\n <div class=\"ap-tabs__tab-header\">\n @if (tab.symbolId()) {\n <ap-symbol\n class=\"ap-tabs__tab-icon\"\n size=\"sm\"\n [symbolId]=\"tab.symbolId()\"\n [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'purple' : 'blue') : 'basic-grey'\" />\n }\n <span class=\"ap-tabs__tab-label\">{{ tab.label() }}</span>\n @if (tab.featureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n class=\"ap-tabs__tab-feature-lock\" />\n }\n @if (tab.counter() && !tab.featureLocked()) {\n <ap-counter [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'blue' : 'blue') : 'grey'\">\n {{ tab.counter() }}\n </ap-counter>\n }\n </div>\n </div>\n </button>\n }\n <!-- Sliding indicator -->\n <div\n #indicator\n class=\"ap-tabs__indicator\"></div>\n </div>\n\n <!-- Tab Panels -->\n <div class=\"ap-tabs__content\">\n <ng-content />\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
|
+
{"version":3,"file":"agorapulse-ui-components-tabs.mjs","sources":["../../../libs/ui-components/tabs/src/tab/tab.component.ts","../../../libs/ui-components/tabs/src/tab/tab.component.html","../../../libs/ui-components/tabs/src/tabs.component.ts","../../../libs/ui-components/tabs/src/tabs.component.html","../../../libs/ui-components/tabs/src/agorapulse-ui-components-tabs.ts"],"sourcesContent":["import { agorapulseSymbol } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-tab',\n templateUrl: './tab.component.html',\n})\nexport class TabComponent {\n label = input.required<string>();\n counter = input<number>();\n disabled = input(false);\n featureLocked = input(false);\n symbolId = input<agorapulseSymbol>();\n\n isActive = signal(false);\n tabIndex = signal(0);\n}\n","@if (isActive()) {\n <div\n role=\"tabpanel\"\n class=\"ap-tab__panel\"\n [attr.id]=\"'ap-tab-panel-' + tabIndex()\"\n [attr.aria-labelledby]=\"'ap-tab-' + tabIndex()\">\n <ng-content />\n </div>\n}\n","import { CounterComponent } from '@agorapulse/ui-components/counter';\nimport { SymbolComponent, withSymbols } from '@agorapulse/ui-symbol';\nimport { apFeatureLock } from '@agorapulse/ui-symbol/icons';\nimport { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n contentChildren,\n effect,\n ElementRef,\n input,\n linkedSignal,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { TabComponent } from './tab/tab.component';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-tabs',\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n imports: [CommonModule, CounterComponent, SymbolComponent],\n providers: [withSymbols(apFeatureLock)],\n})\nexport class TabsComponent {\n tabs = contentChildren(TabComponent);\n indicator = viewChild<ElementRef<HTMLElement>>('indicator');\n tabNav = viewChild<ElementRef<HTMLElement>>('tabNav');\n\n selectedIndex = input(0);\n disabled = input(false);\n\n tabChange = output<{ index: number; tab: TabComponent }>();\n\n // Unique ID per component instance to prevent DOM ID conflicts\n private static nextId = 0;\n readonly componentId = signal(`ap-tabs-${TabsComponent.nextId++}`);\n\n readonly activeTabIndex = linkedSignal(() => this.selectedIndex());\n\n private readonly updateIndicatorPositionEffect = effect(() => {\n const activeIndex = this.activeTabIndex();\n const tabs = this.tabs();\n tabs.forEach((tab, index) => {\n tab.isActive.set(index === activeIndex);\n tab.tabIndex.set(index);\n });\n this.updateIndicatorPosition(activeIndex);\n });\n\n selectTab(index: number): void {\n if (this.disabled() || index < 0 || index >= this.tabs().length) {\n return;\n }\n\n const tab = this.tabs()[index];\n if (tab?.disabled()) {\n return;\n }\n\n this.activeTabIndex.set(index);\n this.tabChange.emit({ index, tab });\n }\n\n onKeyDown(event: KeyboardEvent, index: number): void {\n switch (event.key) {\n case 'Enter':\n case ' ':\n event.preventDefault();\n this.selectTab(index);\n break;\n }\n }\n\n private focusTab(index: number): void {\n const tabButton = document.querySelector(`[data-tab-index=\"${index}\"]`) as HTMLElement;\n tabButton?.focus();\n }\n\n private updateIndicatorPosition(activeIndex: number): void {\n const indicatorEl = this.indicator()?.nativeElement;\n const tabNavEl = this.tabNav()?.nativeElement;\n\n if (!indicatorEl || !tabNavEl) {\n // If elements aren't ready, try again in the next tick\n setTimeout(() => this.updateIndicatorPosition(activeIndex), 0);\n return;\n }\n\n const activeTab = tabNavEl.querySelector(`[data-tab-index=\"${activeIndex}\"]`) as HTMLElement;\n if (!activeTab) {\n // If tab button isn't ready, try again in the next tick\n setTimeout(() => this.updateIndicatorPosition(activeIndex), 0);\n return;\n }\n\n const tabRect = activeTab.getBoundingClientRect();\n const navRect = tabNavEl.getBoundingClientRect();\n\n const left = tabRect.left - navRect.left;\n const width = tabRect.width;\n\n // Check if active tab is feature locked to change indicator color\n const isFeatureLocked = this.tabs()[activeIndex]?.featureLocked();\n const color = isFeatureLocked\n ? 'var(--comp-tabs-tab-feature-locked-indicator-color)'\n : 'var(--comp-tabs-tab-active-indicator-color)';\n\n indicatorEl.style.transform = `translateX(${left}px)`;\n indicatorEl.style.width = `${width}px`;\n indicatorEl.style.backgroundColor = color;\n }\n}\n","<div class=\"ap-tabs\">\n <!-- Tab Navigation -->\n <div\n #tabNav\n class=\"ap-tabs__nav\"\n role=\"tablist\">\n @for (tab of tabs(); track $index) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ap-tabs__tab\"\n [class.ap-tabs__tab--active]=\"activeTabIndex() === $index\"\n [class.ap-tabs__tab--disabled]=\"tab.disabled()\"\n [class.ap-tabs__tab--feature-locked]=\"tab.featureLocked()\"\n [attr.aria-selected]=\"activeTabIndex() === $index\"\n [attr.aria-controls]=\"componentId() + '-panel-' + $index\"\n [attr.id]=\"componentId() + '-tab-' + $index\"\n [attr.data-tab-index]=\"$index\"\n [disabled]=\"disabled() || tab.disabled()\"\n [tabindex]=\"disabled() || tab.disabled() ? -1 : 0\"\n (click)=\"selectTab($index)\"\n (keydown)=\"onKeyDown($event, $index)\">\n <div class=\"ap-tabs__tab-content\">\n <div class=\"ap-tabs__tab-header\">\n @if (tab.symbolId()) {\n <ap-symbol\n class=\"ap-tabs__tab-icon\"\n size=\"sm\"\n [symbolId]=\"tab.symbolId()\"\n [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'purple' : 'blue') : 'basic-grey'\" />\n }\n <span class=\"ap-tabs__tab-label\">{{ tab.label() }}</span>\n @if (tab.featureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n class=\"ap-tabs__tab-feature-lock\" />\n }\n @if (tab.counter() && !tab.featureLocked()) {\n <ap-counter [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'blue' : 'blue') : 'grey'\">\n {{ tab.counter() }}\n </ap-counter>\n }\n </div>\n </div>\n </button>\n }\n <!-- Sliding indicator -->\n <div\n #indicator\n class=\"ap-tabs__indicator\"></div>\n </div>\n\n <!-- Tab Panels -->\n <div class=\"ap-tabs__content\">\n <ng-content />\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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"}
|
package/infobox/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { agorapulseSymbol } from '@agorapulse/ui-symbol';
|
|
2
1
|
import * as i0 from '@angular/core';
|
|
3
2
|
import { EventEmitter } from '@angular/core';
|
|
3
|
+
import { agorapulseSymbol } from '@agorapulse/ui-symbol';
|
|
4
4
|
|
|
5
5
|
declare class InfoboxComponent {
|
|
6
6
|
private readonly symbolRegistry;
|
|
@@ -8,6 +8,7 @@ declare class InfoboxComponent {
|
|
|
8
8
|
buttonId: string | null;
|
|
9
9
|
buttonLabel: string | undefined;
|
|
10
10
|
buttonDataTrack: string | null;
|
|
11
|
+
buttonSymbolId: i0.InputSignal<string | undefined>;
|
|
11
12
|
closable: boolean;
|
|
12
13
|
title?: string;
|
|
13
14
|
type: 'info' | 'warning' | 'error' | 'success';
|
|
@@ -22,7 +23,7 @@ declare class InfoboxComponent {
|
|
|
22
23
|
onClickButton(): void;
|
|
23
24
|
onCloseInfobox(): void;
|
|
24
25
|
static ɵfac: i0.ɵɵFactoryDeclaration<InfoboxComponent, never>;
|
|
25
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<InfoboxComponent, "ap-infobox", never, { "buttonId": { "alias": "buttonId"; "required": false; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; }; "buttonDataTrack": { "alias": "buttonDataTrack"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "title": { "alias": "title"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, { "buttonClicked": "buttonClicked"; "closed": "closed"; }, never, ["*"], true, never>;
|
|
26
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<InfoboxComponent, "ap-infobox", never, { "buttonId": { "alias": "buttonId"; "required": false; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; }; "buttonDataTrack": { "alias": "buttonDataTrack"; "required": false; }; "buttonSymbolId": { "alias": "buttonSymbolId"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; }; "title": { "alias": "title"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, { "buttonClicked": "buttonClicked"; "closed": "closed"; }, never, ["*"], true, never>;
|
|
26
27
|
static ngAcceptInputType_closable: unknown;
|
|
27
28
|
}
|
|
28
29
|
|
package/package.json
CHANGED
|
Binary file
|