@agorapulse/ui-components 16.4.0 → 16.4.1

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.
Files changed (7) hide show
  1. package/agorapulse-ui-components-16.4.1.tgz +0 -0
  2. package/esm2022/infobox/infobox.component.mjs +13 -3
  3. package/fesm2022/agorapulse-ui-components-infobox.mjs +12 -2
  4. package/fesm2022/agorapulse-ui-components-infobox.mjs.map +1 -1
  5. package/infobox/infobox.component.d.ts +4 -1
  6. package/package.json +1 -1
  7. package/agorapulse-ui-components-16.4.0.tgz +0 -0
package/esm2022/infobox/infobox.component.mjs CHANGED
@@ -3,11 +3,15 @@ import { SymbolComponent, SymbolRegistry, apAlertCircle, apCheckCircle, apClose,
3
3
  import { NgClass, NgIf } from '@angular/common';
4
4
  import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewEncapsulation, booleanAttribute, inject } from '@angular/core';
5
5
  import * as i0 from "@angular/core";
6
+ // Increasing integer for generating unique ids for infobox components.
7
+ let nextUniqueId = 0;
6
8
  export class InfoboxComponent {
7
9
  symbolRegistry = inject(SymbolRegistry);
8
10
  elementRef = inject(ElementRef);
9
11
  fullWidth = false;
12
+ buttonId = null;
10
13
  buttonLabel = undefined;
14
+ buttonDataTrack = null;
11
15
  closable = false;
12
16
  title;
13
17
  type = 'info';
@@ -22,6 +26,7 @@ export class InfoboxComponent {
22
26
  buttonClicked = new EventEmitter();
23
27
  closed = new EventEmitter();
24
28
  displayDirection = 'horizontal';
29
+ defaultButtonId = '';
25
30
  symbolIds = {
26
31
  info: 'information-circle',
27
32
  warning: 'alert-circle',
@@ -30,6 +35,7 @@ export class InfoboxComponent {
30
35
  };
31
36
  constructor() {
32
37
  this.symbolRegistry.registerSymbols([apInformationCircle, apAlertCircle, apRemoveCircle, apCheckCircle, apClose]);
38
+ this.defaultButtonId = `infobox-button-${++nextUniqueId}`;
33
39
  }
34
40
  onClickButton() {
35
41
  this.buttonClicked.emit();
@@ -39,16 +45,20 @@ export class InfoboxComponent {
39
45
  this.closed.emit();
40
46
  }
41
47
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: InfoboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
42
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.10", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { buttonLabel: "buttonLabel", 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=\"micro\"\n [symbolId]=\"symbolIds[type]\" />\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content />\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;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:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}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: ["color", "symbolId", "size"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "ionicModalEnabled"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
48
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.10", 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=\"micro\"\n [symbolId]=\"symbolIds[type]\" />\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content />\n </span>\n </div>\n <ng-container *ngIf=\"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 </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;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:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}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: ["color", "symbolId", "size"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "ionicModalEnabled"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
43
49
  }
44
50
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: InfoboxComponent, decorators: [{
45
51
  type: Component,
46
- args: [{ selector: 'ap-infobox', standalone: true, imports: [SymbolComponent, NgClass, NgIf, ButtonComponent], 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=\"micro\"\n [symbolId]=\"symbolIds[type]\" />\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content />\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;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:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}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"] }]
52
+ args: [{ selector: 'ap-infobox', standalone: true, imports: [SymbolComponent, NgClass, NgIf, ButtonComponent], 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=\"micro\"\n [symbolId]=\"symbolIds[type]\" />\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content />\n </span>\n </div>\n <ng-container *ngIf=\"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 </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;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:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}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"] }]
47
53
  }], ctorParameters: function () { return []; }, propDecorators: { fullWidth: [{
48
54
  type: HostBinding,
49
55
  args: ['class.full-width']
56
+ }], buttonId: [{
57
+ type: Input
50
58
  }], buttonLabel: [{
51
59
  type: Input
60
+ }], buttonDataTrack: [{
61
+ type: Input
52
62
  }], closable: [{
53
63
  type: Input,
54
64
  args: [{
@@ -65,4 +75,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImpo
65
75
  }], closed: [{
66
76
  type: Output
67
77
  }] } });
68
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5mb2JveC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL3VpLWNvbXBvbmVudHMvaW5mb2JveC9zcmMvaW5mb2JveC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9saWJzL3VpLWNvbXBvbmVudHMvaW5mb2JveC9zcmMvaW5mb2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDbkUsT0FBTyxFQUNILGVBQWUsRUFDZixjQUFjLEVBRWQsYUFBYSxFQUNiLGFBQWEsRUFDYixPQUFPLEVBQ1AsbUJBQW1CLEVBQ25CLGNBQWMsR0FDakIsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ2hELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxpQkFBaUIsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBYXRLLE1BQU0sT0FBTyxnQkFBZ0I7SUFDUixjQUFjLEdBQUcsTUFBTSxDQUFDLGNBQWMsQ0FBQyxDQUFDO0lBQ3hDLFVBQVUsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7SUFFaEIsU0FBUyxHQUFZLEtBQUssQ0FBQztJQUVuRCxXQUFXLEdBQXVCLFNBQVMsQ0FBQztJQUdsRCxRQUFRLEdBQUcsS0FBSyxDQUFDO0lBQ1gsS0FBSyxDQUFVO0lBQ2YsSUFBSSxHQUE2QyxNQUFNLENBQUM7SUFFakUsSUFBYSxLQUFLLENBQUMsS0FBbUI7UUFDbEMsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7UUFDcEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLEtBQUssWUFBWSxDQUFDO0lBQzVDLENBQUM7SUFDRCxJQUFJLEtBQUs7UUFDTCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDdkIsQ0FBQztJQUNPLE1BQU0sR0FBaUIsS0FBSyxDQUFDO0lBRTNCLGFBQWEsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0lBQ3pDLE1BQU0sR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0lBRTVDLGdCQUFnQixHQUE4QixZQUFZLENBQUM7SUFFbEQsU0FBUyxHQUFzQztRQUNwRCxJQUFJLEVBQUUsb0JBQW9CO1FBQzFCLE9BQU8sRUFBRSxjQUFjO1FBQ3ZCLEtBQUssRUFBRSxlQUFlO1FBQ3RCLE9BQU8sRUFBRSxjQUFjO0tBQzFCLENBQUM7SUFFRjtRQUNJLElBQUksQ0FBQyxjQUFjLENBQUMsZUFBZSxDQUFDLENBQUMsbUJBQW1CLEVBQUUsYUFBYSxFQUFFLGNBQWMsRUFBRSxhQUFhLEVBQUUsT0FBTyxDQUFDLENBQUMsQ0FBQztJQUN0SCxDQUFDO0lBRUQsYUFBYTtRQUNULElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDOUIsQ0FBQztJQUVELGNBQWM7UUFDVixJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUN2QyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3ZCLENBQUM7d0dBN0NRLGdCQUFnQjs0RkFBaEIsZ0JBQWdCLHVIQVFWLGdCQUFnQiwwTUNqQ25DLCszRkEwREEsOHVIRHJDYyxlQUFlLDZGQUFXLElBQUksNkZBQUUsZUFBZTs7NEZBSWhELGdCQUFnQjtrQkFUNUIsU0FBUzsrQkFDSSxZQUFZLGNBR1YsSUFBSSxXQUNQLENBQUMsZUFBZSxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsZUFBZSxDQUFDLG1CQUN6Qyx1QkFBdUIsQ0FBQyxNQUFNLGlCQUNoQyxpQkFBaUIsQ0FBQyxJQUFJOzBFQU1KLFNBQVM7c0JBQXpDLFdBQVc7dUJBQUMsa0JBQWtCO2dCQUV0QixXQUFXO3NCQUFuQixLQUFLO2dCQUdILFFBQVE7c0JBRlYsS0FBSzt1QkFBQzt3QkFDSCxTQUFTLEVBQUUsZ0JBQWdCO3FCQUM5QjtnQkFDUSxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUVPLEtBQUs7c0JBQWpCLEtBQUs7Z0JBU0ksYUFBYTtzQkFBdEIsTUFBTTtnQkFDRyxNQUFNO3NCQUFmLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tICdAYWdvcmFwdWxzZS91aS1jb21wb25lbnRzL2J1dHRvbic7XG5pbXBvcnQge1xuICAgIFN5bWJvbENvbXBvbmVudCxcbiAgICBTeW1ib2xSZWdpc3RyeSxcbiAgICBhZ29yYXB1bHNlU3ltYm9sLFxuICAgIGFwQWxlcnRDaXJjbGUsXG4gICAgYXBDaGVja0NpcmNsZSxcbiAgICBhcENsb3NlLFxuICAgIGFwSW5mb3JtYXRpb25DaXJjbGUsXG4gICAgYXBSZW1vdmVDaXJjbGUsXG59IGZyb20gJ0BhZ29yYXB1bHNlL3VpLXN5bWJvbCc7XG5pbXBvcnQgeyBOZ0NsYXNzLCBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSG9zdEJpbmRpbmcsIElucHV0LCBPdXRwdXQsIFZpZXdFbmNhcHN1bGF0aW9uLCBib29sZWFuQXR0cmlidXRlLCBpbmplY3QgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmV4cG9ydCB0eXBlIEluZm9ib3hEaXJlY3Rpb24gPSAnY29sdW1uJyB8ICdyb3cnO1xuZXhwb3J0IHR5cGUgSW5mb2JveFdpZHRoID0gJ2ZpdCcgfCAnZnVsbC13aWR0aCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnYXAtaW5mb2JveCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2luZm9ib3guY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2luZm9ib3guY29tcG9uZW50LnNjc3MnXSxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIGltcG9ydHM6IFtTeW1ib2xDb21wb25lbnQsIE5nQ2xhc3MsIE5nSWYsIEJ1dHRvbkNvbXBvbmVudF0sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgSW5mb2JveENvbXBvbmVudCB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBzeW1ib2xSZWdpc3RyeSA9IGluamVjdChTeW1ib2xSZWdpc3RyeSk7XG4gICAgcHJpdmF0ZSByZWFkb25seSBlbGVtZW50UmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5mdWxsLXdpZHRoJykgZnVsbFdpZHRoOiBib29sZWFuID0gZmFsc2U7XG5cbiAgICBASW5wdXQoKSBidXR0b25MYWJlbDogc3RyaW5nIHwgdW5kZWZpbmVkID0gdW5kZWZpbmVkO1xuICAgIEBJbnB1dCh7XG4gICAgICAgIHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSxcbiAgICB9KSBjbG9zYWJsZSA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIHRpdGxlPzogc3RyaW5nO1xuICAgIEBJbnB1dCgpIHR5cGU6ICdpbmZvJyB8ICd3YXJuaW5nJyB8ICdlcnJvcicgfCAnc3VjY2VzcycgPSAnaW5mbyc7XG5cbiAgICBASW5wdXQoKSBzZXQgd2lkdGgod2lkdGg6IEluZm9ib3hXaWR0aCkge1xuICAgICAgICB0aGlzLl93aWR0aCA9IHdpZHRoO1xuICAgICAgICB0aGlzLmZ1bGxXaWR0aCA9IHdpZHRoID09PSAnZnVsbC13aWR0aCc7XG4gICAgfVxuICAgIGdldCB3aWR0aCgpOiBJbmZvYm94V2lkdGgge1xuICAgICAgICByZXR1cm4gdGhpcy5fd2lkdGg7XG4gICAgfVxuICAgIHByaXZhdGUgX3dpZHRoOiBJbmZvYm94V2lkdGggPSAnZml0JztcblxuICAgIEBPdXRwdXQoKSBidXR0b25DbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuICAgIEBPdXRwdXQoKSBjbG9zZWQgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgICBkaXNwbGF5RGlyZWN0aW9uOiAnaG9yaXpvbnRhbCcgfCAndmVydGljYWwnID0gJ2hvcml6b250YWwnO1xuXG4gICAgcmVhZG9ubHkgc3ltYm9sSWRzOiB7IFtrOiBzdHJpbmddOiBhZ29yYXB1bHNlU3ltYm9sIH0gPSB7XG4gICAgICAgIGluZm86ICdpbmZvcm1hdGlvbi1jaXJjbGUnLFxuICAgICAgICB3YXJuaW5nOiAnYWxlcnQtY2lyY2xlJyxcbiAgICAgICAgZXJyb3I6ICdyZW1vdmUtY2lyY2xlJyxcbiAgICAgICAgc3VjY2VzczogJ2NoZWNrLWNpcmNsZScsXG4gICAgfTtcblxuICAgIGNvbnN0cnVjdG9yKCkge1xuICAgICAgICB0aGlzLnN5bWJvbFJlZ2lzdHJ5LnJlZ2lzdGVyU3ltYm9scyhbYXBJbmZvcm1hdGlvbkNpcmNsZSwgYXBBbGVydENpcmNsZSwgYXBSZW1vdmVDaXJjbGUsIGFwQ2hlY2tDaXJjbGUsIGFwQ2xvc2VdKTtcbiAgICB9XG5cbiAgICBvbkNsaWNrQnV0dG9uKCk6IHZvaWQge1xuICAgICAgICB0aGlzLmJ1dHRvbkNsaWNrZWQuZW1pdCgpO1xuICAgIH1cblxuICAgIG9uQ2xvc2VJbmZvYm94KCk6IHZvaWQge1xuICAgICAgICB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5yZW1vdmUoKTtcbiAgICAgICAgdGhpcy5jbG9zZWQuZW1pdCgpO1xuICAgIH1cbn1cbiIsIjxkaXZcbiAgICBjbGFzcz1cIm1haW5cIlxuICAgIFtjbGFzcy5pbmZvXT1cInR5cGUgPT09ICdpbmZvJ1wiXG4gICAgW2NsYXNzLndhcm5pbmddPVwidHlwZSA9PT0gJ3dhcm5pbmcnXCJcbiAgICBbY2xhc3MuZXJyb3JdPVwidHlwZSA9PT0gJ2Vycm9yJ1wiXG4gICAgW2NsYXNzLnN1Y2Nlc3NdPVwidHlwZSA9PT0gJ3N1Y2Nlc3MnXCJcbiAgICBbY2xhc3MuaGFzLXRpdGxlXT1cIiEhdGl0bGVcIj5cbiAgICA8ZGl2IGNsYXNzPVwic3RhdHVzLWJhbm5lclwiPjwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJ3cmFwcGVyXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJzeW1ib2wtY29udGVudFwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInN5bWJvbC13cmFwcGVyXCI+XG4gICAgICAgICAgICAgICAgPGFwLXN5bWJvbFxuICAgICAgICAgICAgICAgICAgICBjbGFzcz1cInN0YXR1c1wiXG4gICAgICAgICAgICAgICAgICAgIHNpemU9XCJtaWNyb1wiXG4gICAgICAgICAgICAgICAgICAgIFtzeW1ib2xJZF09XCJzeW1ib2xJZHNbdHlwZV1cIiAvPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY29udGVudFwiPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ0ZXh0c1wiPlxuICAgICAgICAgICAgICAgICAgICA8c3BhblxuICAgICAgICAgICAgICAgICAgICAgICAgKm5nSWY9XCJ0aXRsZVwiXG4gICAgICAgICAgICAgICAgICAgICAgICBjbGFzcz1cInRpdGxlXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICB7eyB0aXRsZSB9fVxuICAgICAgICAgICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidGV4dFwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQgLz5cbiAgICAgICAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJidXR0b25MYWJlbFwiPlxuICAgICAgICAgICAgICAgICAgICA8YXAtYnV0dG9uXG4gICAgICAgICAgICAgICAgICAgICAgICBuYW1lPVwiaW5mb2JveC1idXR0b25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgW2NvbmZpZ109XCJ7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgc3R5bGU6ICdzdHJva2VkJyxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb2xvcjogJ2dyZXknXG4gICAgICAgICAgICAgICAgICAgICAgICB9XCJcbiAgICAgICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJvbkNsaWNrQnV0dG9uKClcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIHt7IGJ1dHRvbkxhYmVsIH19XG4gICAgICAgICAgICAgICAgICAgIDwvYXAtYnV0dG9uPlxuICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiY2xvc2FibGVcIj5cbiAgICAgICAgICAgIDxidXR0b25cbiAgICAgICAgICAgICAgICBjbGFzcz1cImNsb3NhYmxlLWJ1dHRvblwiXG4gICAgICAgICAgICAgICAgKGNsaWNrKT1cIm9uQ2xvc2VJbmZvYm94KClcIj5cbiAgICAgICAgICAgICAgICA8c3ZnXG4gICAgICAgICAgICAgICAgICAgIHdpZHRoPVwiOFwiXG4gICAgICAgICAgICAgICAgICAgIGhlaWdodD1cIjhcIlxuICAgICAgICAgICAgICAgICAgICB2aWV3Qm94PVwiMCAwIDggOFwiXG4gICAgICAgICAgICAgICAgICAgIGZpbGw9XCJub25lXCJcbiAgICAgICAgICAgICAgICAgICAgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiPlxuICAgICAgICAgICAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgICAgICAgICAgICAgZD1cIk03LjMyNDUgMC42NzMzMzZDNy4xNjUxOCAwLjUxNDU2NSA2Ljk0OTQzIDAuNDI1NDE1IDYuNzI0NSAwLjQyNTQxNUM2LjQ5OTU4IDAuNDI1NDE1IDYuMjgzODMgMC41MTQ1NjUgNi4xMjQ1MSAwLjY3MzMzNkw0LjAwNjUxIDIuNzkxMzRMMS44ODU4NCAwLjY3MzMzNkMxLjcyNDk5IDAuNTE5NjA3IDEuNTEwMzYgMC40MzQ5NTUgMS4yODc4OCAwLjQzNzUwMUMxLjA2NTQgMC40NDAwNDggMC44NTI3NTYgMC41Mjk1OTEgMC42OTU0NzIgMC42ODY5NjJDMC41MzgxODkgMC44NDQzMzMgMC40NDg3NjMgMS4wNTcwMiAwLjQ0NjM0IDEuMjc5NTFDMC40NDM5MTYgMS41MDE5OSAwLjUyODY4NyAxLjcxNjU4IDAuNjgyNTA1IDEuODc3MzRMMi43OTk4NCAzLjk5NTM0TDAuNjgyNTA1IDYuMTE0QzAuNTI4Njg3IDYuMjc0NzYgMC40NDM5MTYgNi40ODkzNSAwLjQ0NjM0IDYuNzExODNDMC40NDg3NjMgNi45MzQzMSAwLjUzODE4OSA3LjE0NyAwLjY5NTQ3MiA3LjMwNDM4QzAuODUyNzU2IDcuNDYxNzUgMS4wNjU0IDcuNTUxMjkgMS4yODc4OCA3LjU1Mzg0QzEuNTEwMzYgNy41NTYzOCAxLjcyNDk5IDcuNDcxNzMgMS44ODU4NCA3LjMxOEw0LjAwMzE3IDUuMkw2LjEyMTE3IDcuMzE4NjdDNi4yODM2NCA3LjQ2MzA3IDYuNDk1MiA3LjUzOTg2IDYuNzEyNDcgNy41MzMyOUM2LjkyOTc0IDcuNTI2NzEgNy4xMzYyNyA3LjQzNzI4IDcuMjg5NzIgNy4yODMzMkM3LjQ0MzE2IDcuMTI5MzYgNy41MzE5MSA2LjkyMjU0IDcuNTM3NzYgNi43MDUyNUM3LjU0MzYgNi40ODc5NiA3LjQ2NjExIDYuMjc2NjYgNy4zMjExNyA2LjExNDY3TDUuMjAzODQgMy45OTZMNy4zMjExNyAxLjg3OEM3LjQ4MTMyIDEuNzE4NjcgNy41NzE2NCAxLjUwMjI2IDcuNTcyMjYgMS4yNzYzNkM3LjU3Mjg5IDEuMDUwNDUgNy40ODM3NyAwLjgzMzU0OCA3LjMyNDUgMC42NzMzMzZaXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgICAgICAgICAgICAgIDwvc3ZnPlxuICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvZGl2PlxuPC9kaXY+XG4iXX0=
78
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5mb2JveC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL3VpLWNvbXBvbmVudHMvaW5mb2JveC9zcmMvaW5mb2JveC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9saWJzL3VpLWNvbXBvbmVudHMvaW5mb2JveC9zcmMvaW5mb2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDbkUsT0FBTyxFQUNILGVBQWUsRUFDZixjQUFjLEVBRWQsYUFBYSxFQUNiLGFBQWEsRUFDYixPQUFPLEVBQ1AsbUJBQW1CLEVBQ25CLGNBQWMsR0FDakIsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ2hELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxpQkFBaUIsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBSXRLLHVFQUF1RTtBQUN2RSxJQUFJLFlBQVksR0FBRyxDQUFDLENBQUM7QUFXckIsTUFBTSxPQUFPLGdCQUFnQjtJQUNSLGNBQWMsR0FBRyxNQUFNLENBQUMsY0FBYyxDQUFDLENBQUM7SUFDeEMsVUFBVSxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUVoQixTQUFTLEdBQVksS0FBSyxDQUFDO0lBRW5ELFFBQVEsR0FBa0IsSUFBSSxDQUFDO0lBQy9CLFdBQVcsR0FBdUIsU0FBUyxDQUFDO0lBQzVDLGVBQWUsR0FBa0IsSUFBSSxDQUFDO0lBRzVDLFFBQVEsR0FBRyxLQUFLLENBQUM7SUFDWCxLQUFLLENBQVU7SUFDZixJQUFJLEdBQTZDLE1BQU0sQ0FBQztJQUVqRSxJQUFhLEtBQUssQ0FBQyxLQUFtQjtRQUNsQyxJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztRQUNwQixJQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssS0FBSyxZQUFZLENBQUM7SUFDNUMsQ0FBQztJQUNELElBQUksS0FBSztRQUNMLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUN2QixDQUFDO0lBQ08sTUFBTSxHQUFpQixLQUFLLENBQUM7SUFFM0IsYUFBYSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7SUFDekMsTUFBTSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7SUFFNUMsZ0JBQWdCLEdBQThCLFlBQVksQ0FBQztJQUMzRCxlQUFlLEdBQVcsRUFBRSxDQUFDO0lBR3BCLFNBQVMsR0FBc0M7UUFDcEQsSUFBSSxFQUFFLG9CQUFvQjtRQUMxQixPQUFPLEVBQUUsY0FBYztRQUN2QixLQUFLLEVBQUUsZUFBZTtRQUN0QixPQUFPLEVBQUUsY0FBYztLQUMxQixDQUFDO0lBRUY7UUFDSSxJQUFJLENBQUMsY0FBYyxDQUFDLGVBQWUsQ0FBQyxDQUFDLG1CQUFtQixFQUFFLGFBQWEsRUFBRSxjQUFjLEVBQUUsYUFBYSxFQUFFLE9BQU8sQ0FBQyxDQUFDLENBQUM7UUFDbEgsSUFBSSxDQUFDLGVBQWUsR0FBRyxrQkFBa0IsRUFBRSxZQUFZLEVBQUUsQ0FBQTtJQUM3RCxDQUFDO0lBRUQsYUFBYTtRQUNULElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDOUIsQ0FBQztJQUVELGNBQWM7UUFDVixJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUN2QyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3ZCLENBQUM7d0dBbERRLGdCQUFnQjs0RkFBaEIsZ0JBQWdCLGlMQVVWLGdCQUFnQiwwTUN0Q25DLDQvRkE0REEsOHVIRHBDYyxlQUFlLDZGQUFXLElBQUksNkZBQUUsZUFBZTs7NEZBSWhELGdCQUFnQjtrQkFUNUIsU0FBUzsrQkFDSSxZQUFZLGNBR1YsSUFBSSxXQUNQLENBQUMsZUFBZSxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsZUFBZSxDQUFDLG1CQUN6Qyx1QkFBdUIsQ0FBQyxNQUFNLGlCQUNoQyxpQkFBaUIsQ0FBQyxJQUFJOzBFQU1KLFNBQVM7c0JBQXpDLFdBQVc7dUJBQUMsa0JBQWtCO2dCQUV0QixRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFHSCxRQUFRO3NCQUZWLEtBQUs7dUJBQUM7d0JBQ0gsU0FBUyxFQUFFLGdCQUFnQjtxQkFDOUI7Z0JBQ1EsS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFFTyxLQUFLO3NCQUFqQixLQUFLO2dCQVNJLGFBQWE7c0JBQXRCLE1BQU07Z0JBQ0csTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnQGFnb3JhcHVsc2UvdWktY29tcG9uZW50cy9idXR0b24nO1xuaW1wb3J0IHtcbiAgICBTeW1ib2xDb21wb25lbnQsXG4gICAgU3ltYm9sUmVnaXN0cnksXG4gICAgYWdvcmFwdWxzZVN5bWJvbCxcbiAgICBhcEFsZXJ0Q2lyY2xlLFxuICAgIGFwQ2hlY2tDaXJjbGUsXG4gICAgYXBDbG9zZSxcbiAgICBhcEluZm9ybWF0aW9uQ2lyY2xlLFxuICAgIGFwUmVtb3ZlQ2lyY2xlLFxufSBmcm9tICdAYWdvcmFwdWxzZS91aS1zeW1ib2wnO1xuaW1wb3J0IHsgTmdDbGFzcywgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT3V0cHV0LCBWaWV3RW5jYXBzdWxhdGlvbiwgYm9vbGVhbkF0dHJpYnV0ZSwgaW5qZWN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5leHBvcnQgdHlwZSBJbmZvYm94RGlyZWN0aW9uID0gJ2NvbHVtbicgfCAncm93JztcbmV4cG9ydCB0eXBlIEluZm9ib3hXaWR0aCA9ICdmaXQnIHwgJ2Z1bGwtd2lkdGgnO1xuXG4vLyBJbmNyZWFzaW5nIGludGVnZXIgZm9yIGdlbmVyYXRpbmcgdW5pcXVlIGlkcyBmb3IgaW5mb2JveCBjb21wb25lbnRzLlxubGV0IG5leHRVbmlxdWVJZCA9IDA7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnYXAtaW5mb2JveCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2luZm9ib3guY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2luZm9ib3guY29tcG9uZW50LnNjc3MnXSxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIGltcG9ydHM6IFtTeW1ib2xDb21wb25lbnQsIE5nQ2xhc3MsIE5nSWYsIEJ1dHRvbkNvbXBvbmVudF0sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgSW5mb2JveENvbXBvbmVudCB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBzeW1ib2xSZWdpc3RyeSA9IGluamVjdChTeW1ib2xSZWdpc3RyeSk7XG4gICAgcHJpdmF0ZSByZWFkb25seSBlbGVtZW50UmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5mdWxsLXdpZHRoJykgZnVsbFdpZHRoOiBib29sZWFuID0gZmFsc2U7XG5cbiAgICBASW5wdXQoKSBidXR0b25JZDogc3RyaW5nIHwgbnVsbCA9IG51bGw7XG4gICAgQElucHV0KCkgYnV0dG9uTGFiZWw6IHN0cmluZyB8IHVuZGVmaW5lZCA9IHVuZGVmaW5lZDtcbiAgICBASW5wdXQoKSBidXR0b25EYXRhVHJhY2s6IHN0cmluZyB8IG51bGwgPSBudWxsO1xuICAgIEBJbnB1dCh7XG4gICAgICAgIHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSxcbiAgICB9KSBjbG9zYWJsZSA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIHRpdGxlPzogc3RyaW5nO1xuICAgIEBJbnB1dCgpIHR5cGU6ICdpbmZvJyB8ICd3YXJuaW5nJyB8ICdlcnJvcicgfCAnc3VjY2VzcycgPSAnaW5mbyc7XG5cbiAgICBASW5wdXQoKSBzZXQgd2lkdGgod2lkdGg6IEluZm9ib3hXaWR0aCkge1xuICAgICAgICB0aGlzLl93aWR0aCA9IHdpZHRoO1xuICAgICAgICB0aGlzLmZ1bGxXaWR0aCA9IHdpZHRoID09PSAnZnVsbC13aWR0aCc7XG4gICAgfVxuICAgIGdldCB3aWR0aCgpOiBJbmZvYm94V2lkdGgge1xuICAgICAgICByZXR1cm4gdGhpcy5fd2lkdGg7XG4gICAgfVxuICAgIHByaXZhdGUgX3dpZHRoOiBJbmZvYm94V2lkdGggPSAnZml0JztcblxuICAgIEBPdXRwdXQoKSBidXR0b25DbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuICAgIEBPdXRwdXQoKSBjbG9zZWQgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgICBkaXNwbGF5RGlyZWN0aW9uOiAnaG9yaXpvbnRhbCcgfCAndmVydGljYWwnID0gJ2hvcml6b250YWwnO1xuICAgIGRlZmF1bHRCdXR0b25JZDogc3RyaW5nID0gJyc7XG5cblxuICAgIHJlYWRvbmx5IHN5bWJvbElkczogeyBbazogc3RyaW5nXTogYWdvcmFwdWxzZVN5bWJvbCB9ID0ge1xuICAgICAgICBpbmZvOiAnaW5mb3JtYXRpb24tY2lyY2xlJyxcbiAgICAgICAgd2FybmluZzogJ2FsZXJ0LWNpcmNsZScsXG4gICAgICAgIGVycm9yOiAncmVtb3ZlLWNpcmNsZScsXG4gICAgICAgIHN1Y2Nlc3M6ICdjaGVjay1jaXJjbGUnLFxuICAgIH07XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgdGhpcy5zeW1ib2xSZWdpc3RyeS5yZWdpc3RlclN5bWJvbHMoW2FwSW5mb3JtYXRpb25DaXJjbGUsIGFwQWxlcnRDaXJjbGUsIGFwUmVtb3ZlQ2lyY2xlLCBhcENoZWNrQ2lyY2xlLCBhcENsb3NlXSk7XG4gICAgICAgIHRoaXMuZGVmYXVsdEJ1dHRvbklkID0gYGluZm9ib3gtYnV0dG9uLSR7KytuZXh0VW5pcXVlSWR9YFxuICAgIH1cblxuICAgIG9uQ2xpY2tCdXR0b24oKTogdm9pZCB7XG4gICAgICAgIHRoaXMuYnV0dG9uQ2xpY2tlZC5lbWl0KCk7XG4gICAgfVxuXG4gICAgb25DbG9zZUluZm9ib3goKTogdm9pZCB7XG4gICAgICAgIHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnJlbW92ZSgpO1xuICAgICAgICB0aGlzLmNsb3NlZC5lbWl0KCk7XG4gICAgfVxufVxuIiwiPGRpdlxuICAgIGNsYXNzPVwibWFpblwiXG4gICAgW2NsYXNzLmluZm9dPVwidHlwZSA9PT0gJ2luZm8nXCJcbiAgICBbY2xhc3Mud2FybmluZ109XCJ0eXBlID09PSAnd2FybmluZydcIlxuICAgIFtjbGFzcy5lcnJvcl09XCJ0eXBlID09PSAnZXJyb3InXCJcbiAgICBbY2xhc3Muc3VjY2Vzc109XCJ0eXBlID09PSAnc3VjY2VzcydcIlxuICAgIFtjbGFzcy5oYXMtdGl0bGVdPVwiISF0aXRsZVwiPlxuICAgIDxkaXYgY2xhc3M9XCJzdGF0dXMtYmFubmVyXCI+PC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cIndyYXBwZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInN5bWJvbC1jb250ZW50XCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwic3ltYm9sLXdyYXBwZXJcIj5cbiAgICAgICAgICAgICAgICA8YXAtc3ltYm9sXG4gICAgICAgICAgICAgICAgICAgIGNsYXNzPVwic3RhdHVzXCJcbiAgICAgICAgICAgICAgICAgICAgc2l6ZT1cIm1pY3JvXCJcbiAgICAgICAgICAgICAgICAgICAgW3N5bWJvbElkXT1cInN5bWJvbElkc1t0eXBlXVwiIC8+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjb250ZW50XCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInRleHRzXCI+XG4gICAgICAgICAgICAgICAgICAgIDxzcGFuXG4gICAgICAgICAgICAgICAgICAgICAgICAqbmdJZj1cInRpdGxlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGl0bGVcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIHt7IHRpdGxlIH19XG4gICAgICAgICAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJ0ZXh0XCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8bmctY29udGVudCAvPlxuICAgICAgICAgICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImJ1dHRvbkxhYmVsXCI+XG4gICAgICAgICAgICAgICAgICAgIDxhcC1idXR0b25cbiAgICAgICAgICAgICAgICAgICAgICAgIG5hbWU9XCJpbmZvYm94LWJ1dHRvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICBbaWRdPVwiYnV0dG9uSWQgPz8gZGVmYXVsdEJ1dHRvbklkXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFthdHRyLmRhdGEtdHJhY2tdPVwiYnV0dG9uRGF0YVRyYWNrXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtjb25maWddPVwie1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHN0eWxlOiAnc3Ryb2tlZCcsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgY29sb3I6ICdncmV5J1xuICAgICAgICAgICAgICAgICAgICAgICAgfVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwib25DbGlja0J1dHRvbigpXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICB7eyBidXR0b25MYWJlbCB9fVxuICAgICAgICAgICAgICAgICAgICA8L2FwLWJ1dHRvbj5cbiAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImNsb3NhYmxlXCI+XG4gICAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJjbG9zYWJsZS1idXR0b25cIlxuICAgICAgICAgICAgICAgIChjbGljayk9XCJvbkNsb3NlSW5mb2JveCgpXCI+XG4gICAgICAgICAgICAgICAgPHN2Z1xuICAgICAgICAgICAgICAgICAgICB3aWR0aD1cIjhcIlxuICAgICAgICAgICAgICAgICAgICBoZWlnaHQ9XCI4XCJcbiAgICAgICAgICAgICAgICAgICAgdmlld0JveD1cIjAgMCA4IDhcIlxuICAgICAgICAgICAgICAgICAgICBmaWxsPVwibm9uZVwiXG4gICAgICAgICAgICAgICAgICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIj5cbiAgICAgICAgICAgICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgICAgICAgICAgICAgIGQ9XCJNNy4zMjQ1IDAuNjczMzM2QzcuMTY1MTggMC41MTQ1NjUgNi45NDk0MyAwLjQyNTQxNSA2LjcyNDUgMC40MjU0MTVDNi40OTk1OCAwLjQyNTQxNSA2LjI4MzgzIDAuNTE0NTY1IDYuMTI0NTEgMC42NzMzMzZMNC4wMDY1MSAyLjc5MTM0TDEuODg1ODQgMC42NzMzMzZDMS43MjQ5OSAwLjUxOTYwNyAxLjUxMDM2IDAuNDM0OTU1IDEuMjg3ODggMC40Mzc1MDFDMS4wNjU0IDAuNDQwMDQ4IDAuODUyNzU2IDAuNTI5NTkxIDAuNjk1NDcyIDAuNjg2OTYyQzAuNTM4MTg5IDAuODQ0MzMzIDAuNDQ4NzYzIDEuMDU3MDIgMC40NDYzNCAxLjI3OTUxQzAuNDQzOTE2IDEuNTAxOTkgMC41Mjg2ODcgMS43MTY1OCAwLjY4MjUwNSAxLjg3NzM0TDIuNzk5ODQgMy45OTUzNEwwLjY4MjUwNSA2LjExNEMwLjUyODY4NyA2LjI3NDc2IDAuNDQzOTE2IDYuNDg5MzUgMC40NDYzNCA2LjcxMTgzQzAuNDQ4NzYzIDYuOTM0MzEgMC41MzgxODkgNy4xNDcgMC42OTU0NzIgNy4zMDQzOEMwLjg1Mjc1NiA3LjQ2MTc1IDEuMDY1NCA3LjU1MTI5IDEuMjg3ODggNy41NTM4NEMxLjUxMDM2IDcuNTU2MzggMS43MjQ5OSA3LjQ3MTczIDEuODg1ODQgNy4zMThMNC4wMDMxNyA1LjJMNi4xMjExNyA3LjMxODY3QzYuMjgzNjQgNy40NjMwNyA2LjQ5NTIgNy41Mzk4NiA2LjcxMjQ3IDcuNTMzMjlDNi45Mjk3NCA3LjUyNjcxIDcuMTM2MjcgNy40MzcyOCA3LjI4OTcyIDcuMjgzMzJDNy40NDMxNiA3LjEyOTM2IDcuNTMxOTEgNi45MjI1NCA3LjUzNzc2IDYuNzA1MjVDNy41NDM2IDYuNDg3OTYgNy40NjYxMSA2LjI3NjY2IDcuMzIxMTcgNi4xMTQ2N0w1LjIwMzg0IDMuOTk2TDcuMzIxMTcgMS44NzhDNy40ODEzMiAxLjcxODY3IDcuNTcxNjQgMS41MDIyNiA3LjU3MjI2IDEuMjc2MzZDNy41NzI4OSAxLjA1MDQ1IDcuNDgzNzcgMC44MzM1NDggNy4zMjQ1IDAuNjczMzM2WlwiXG4gICAgICAgICAgICAgICAgICAgICAgICBmaWxsPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgICAgICAgICAgICA8L3N2Zz5cbiAgICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuIl19
package/fesm2022/agorapulse-ui-components-infobox.mjs CHANGED
@@ -4,11 +4,15 @@ import { NgIf, NgClass } from '@angular/common';
4
4
  import * as i0 from '@angular/core';
5
5
  import { inject, ElementRef, EventEmitter, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input, Output } from '@angular/core';
6
6
 
7
+ // Increasing integer for generating unique ids for infobox components.
8
+ let nextUniqueId = 0;
7
9
  class InfoboxComponent {
8
10
  symbolRegistry = inject(SymbolRegistry);
9
11
  elementRef = inject(ElementRef);
10
12
  fullWidth = false;
13
+ buttonId = null;
11
14
  buttonLabel = undefined;
15
+ buttonDataTrack = null;
12
16
  closable = false;
13
17
  title;
14
18
  type = 'info';
@@ -23,6 +27,7 @@ class InfoboxComponent {
23
27
  buttonClicked = new EventEmitter();
24
28
  closed = new EventEmitter();
25
29
  displayDirection = 'horizontal';
30
+ defaultButtonId = '';
26
31
  symbolIds = {
27
32
  info: 'information-circle',
28
33
  warning: 'alert-circle',
@@ -31,6 +36,7 @@ class InfoboxComponent {
31
36
  };
32
37
  constructor() {
33
38
  this.symbolRegistry.registerSymbols([apInformationCircle, apAlertCircle, apRemoveCircle, apCheckCircle, apClose]);
39
+ this.defaultButtonId = `infobox-button-${++nextUniqueId}`;
34
40
  }
35
41
  onClickButton() {
36
42
  this.buttonClicked.emit();
@@ -40,16 +46,20 @@ class InfoboxComponent {
40
46
  this.closed.emit();
41
47
  }
42
48
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: InfoboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
43
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.10", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { buttonLabel: "buttonLabel", 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=\"micro\"\n [symbolId]=\"symbolIds[type]\" />\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content />\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;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:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}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: ["color", "symbolId", "size"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "ionicModalEnabled"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
49
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.10", 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=\"micro\"\n [symbolId]=\"symbolIds[type]\" />\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content />\n </span>\n </div>\n <ng-container *ngIf=\"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 </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;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:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}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: ["color", "symbolId", "size"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "ionicModalEnabled"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
44
50
  }
45
51
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: InfoboxComponent, decorators: [{
46
52
  type: Component,
47
- args: [{ selector: 'ap-infobox', standalone: true, imports: [SymbolComponent, NgClass, NgIf, ButtonComponent], 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=\"micro\"\n [symbolId]=\"symbolIds[type]\" />\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content />\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;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:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}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"] }]
53
+ args: [{ selector: 'ap-infobox', standalone: true, imports: [SymbolComponent, NgClass, NgIf, ButtonComponent], 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=\"micro\"\n [symbolId]=\"symbolIds[type]\" />\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content />\n </span>\n </div>\n <ng-container *ngIf=\"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 </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;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:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}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"] }]
48
54
  }], ctorParameters: function () { return []; }, propDecorators: { fullWidth: [{
49
55
  type: HostBinding,
50
56
  args: ['class.full-width']
57
+ }], buttonId: [{
58
+ type: Input
51
59
  }], buttonLabel: [{
52
60
  type: Input
61
+ }], buttonDataTrack: [{
62
+ type: Input
53
63
  }], closable: [{
54
64
  type: Input,
55
65
  args: [{
package/fesm2022/agorapulse-ui-components-infobox.mjs.map CHANGED
@@ -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 apAlertCircle,\n apCheckCircle,\n apClose,\n apInformationCircle,\n apRemoveCircle,\n} from '@agorapulse/ui-symbol';\nimport { NgClass, NgIf } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewEncapsulation, booleanAttribute, inject } from '@angular/core';\nexport type InfoboxDirection = 'column' | 'row';\nexport type InfoboxWidth = 'fit' | 'full-width';\n\n@Component({\n selector: 'ap-infobox',\n templateUrl: './infobox.component.html',\n styleUrls: ['./infobox.component.scss'],\n standalone: true,\n imports: [SymbolComponent, NgClass, NgIf, ButtonComponent],\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() buttonLabel: string | undefined = undefined;\n @Input({\n transform: booleanAttribute,\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\n readonly symbolIds: { [k: string]: agorapulseSymbol } = {\n info: 'information-circle',\n warning: 'alert-circle',\n error: 'remove-circle',\n success: 'check-circle',\n };\n\n constructor() {\n this.symbolRegistry.registerSymbols([apInformationCircle, apAlertCircle, apRemoveCircle, apCheckCircle, apClose]);\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=\"micro\"\n [symbolId]=\"symbolIds[type]\" />\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content />\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\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-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 apAlertCircle,\n apCheckCircle,\n apClose,\n apInformationCircle,\n apRemoveCircle,\n} from '@agorapulse/ui-symbol';\nimport { NgClass, NgIf } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewEncapsulation, booleanAttribute, inject } 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, NgClass, NgIf, ButtonComponent],\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 }) 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\n readonly symbolIds: { [k: string]: agorapulseSymbol } = {\n info: 'information-circle',\n warning: 'alert-circle',\n error: 'remove-circle',\n success: 'check-circle',\n };\n\n constructor() {\n this.symbolRegistry.registerSymbols([apInformationCircle, apAlertCircle, apRemoveCircle, apCheckCircle, 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=\"micro\"\n [symbolId]=\"symbolIds[type]\" />\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content />\n </span>\n </div>\n <ng-container *ngIf=\"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 </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\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/infobox.component.d.ts CHANGED
@@ -7,7 +7,9 @@ export declare class InfoboxComponent {
7
7
  private readonly symbolRegistry;
8
8
  private readonly elementRef;
9
9
  fullWidth: boolean;
10
+ buttonId: string | null;
10
11
  buttonLabel: string | undefined;
12
+ buttonDataTrack: string | null;
11
13
  closable: boolean;
12
14
  title?: string;
13
15
  type: 'info' | 'warning' | 'error' | 'success';
@@ -17,6 +19,7 @@ export declare class InfoboxComponent {
17
19
  buttonClicked: EventEmitter<void>;
18
20
  closed: EventEmitter<void>;
19
21
  displayDirection: 'horizontal' | 'vertical';
22
+ defaultButtonId: string;
20
23
  readonly symbolIds: {
21
24
  [k: string]: agorapulseSymbol;
22
25
  };
@@ -24,6 +27,6 @@ export declare class InfoboxComponent {
24
27
  onClickButton(): void;
25
28
  onCloseInfobox(): void;
26
29
  static ɵfac: i0.ɵɵFactoryDeclaration<InfoboxComponent, never>;
27
- static ɵcmp: i0.ɵɵComponentDeclaration<InfoboxComponent, "ap-infobox", never, { "buttonLabel": { "alias": "buttonLabel"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "title": { "alias": "title"; "required": false; }; "type": { "alias": "type"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "buttonClicked": "buttonClicked"; "closed": "closed"; }, never, ["*"], true, never>;
30
+ static ɵcmp: i0.ɵɵComponentDeclaration<InfoboxComponent, "ap-infobox", never, { "buttonId": { "alias": "buttonId"; "required": false; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; }; "buttonDataTrack": { "alias": "buttonDataTrack"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "title": { "alias": "title"; "required": false; }; "type": { "alias": "type"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "buttonClicked": "buttonClicked"; "closed": "closed"; }, never, ["*"], true, never>;
28
31
  static ngAcceptInputType_closable: unknown;
29
32
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@agorapulse/ui-components",
3
3
  "description": "Agorapulse UI Components Library",
4
- "version": "16.4.0",
4
+ "version": "16.4.1",
5
5
  "author": "Benoit Hediard",
6
6
  "repository": {
7
7
  "type": "git",
package/agorapulse-ui-components-16.4.0.tgz DELETED
Binary file