@agorapulse/ui-components 15.1.18 → 15.1.19

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 (9) hide show
  1. package/agorapulse-ui-components-15.1.19.tgz +0 -0
  2. package/esm2020/infobox/infobox.component.mjs +51 -18
  3. package/fesm2015/agorapulse-ui-components-infobox.mjs +47 -17
  4. package/fesm2015/agorapulse-ui-components-infobox.mjs.map +1 -1
  5. package/fesm2020/agorapulse-ui-components-infobox.mjs +47 -17
  6. package/fesm2020/agorapulse-ui-components-infobox.mjs.map +1 -1
  7. package/infobox/infobox.component.d.ts +20 -6
  8. package/package.json +1 -1
  9. package/agorapulse-ui-components-15.1.18.tgz +0 -0
package/esm2020/infobox/infobox.component.mjs CHANGED
@@ -1,37 +1,70 @@
1
- import { AgorapulseUiSymbolModule, apAlertCircle, apAlertTriangle, apInformationCircle, apLike } from '@agorapulse/ui-symbol';
2
- import { NgClass } from '@angular/common';
3
- import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
1
+ import { ButtonComponent } from '@agorapulse/ui-components/button';
2
+ import { AgorapulseUiSymbolModule, apAlertCircle, apCheckCircle, apClose, apInformationCircle, apRemoveCircle, SymbolRegistry, } from '@agorapulse/ui-symbol';
3
+ import { NgClass, NgIf } from '@angular/common';
4
+ import { ElementRef, EventEmitter } from '@angular/core';
5
+ import { Output } from '@angular/core';
6
+ import { inject } from '@angular/core';
7
+ import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
4
8
  import * as i0 from "@angular/core";
5
9
  import * as i1 from "@agorapulse/ui-symbol";
6
10
  export class InfoboxComponent {
7
- constructor(symbolRegistry) {
8
- this.symbolRegistry = symbolRegistry;
11
+ set width(width) {
12
+ this._width = width;
13
+ this.fullWidth = width === 'full-width';
14
+ }
15
+ get width() {
16
+ return this._width;
17
+ }
18
+ constructor() {
19
+ this.CONTAINER_WIDTH_BREAKPOINT = 588;
20
+ this.symbolRegistry = inject(SymbolRegistry);
21
+ this.elementRef = inject(ElementRef);
22
+ this.fullWidth = false;
23
+ this.closable = false;
9
24
  this.type = 'info';
10
- this.fitContent = false;
25
+ this._width = 'fit';
26
+ this.buttonClicked = new EventEmitter();
27
+ this.displayDirection = 'horizontal';
11
28
  this.symbolIds = {
12
29
  info: 'information-circle',
13
- warning: 'alert-triangle',
14
- error: 'alert-circle',
15
- success: 'like',
30
+ warning: 'alert-circle',
31
+ error: 'remove-circle',
32
+ success: 'check-circle',
16
33
  };
17
34
  this.symbolRegistry.registerSymbols([
18
35
  apInformationCircle,
19
- apAlertTriangle,
20
36
  apAlertCircle,
21
- apLike
37
+ apRemoveCircle,
38
+ apCheckCircle,
39
+ apClose,
22
40
  ]);
23
41
  }
42
+ onClickButton() {
43
+ this.buttonClicked.emit();
44
+ }
45
+ onCloseInfobox() {
46
+ this.elementRef.nativeElement.remove();
47
+ }
24
48
  }
25
- InfoboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: InfoboxComponent, deps: [{ token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
26
- InfoboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { type: "type", text: "text", fitContent: "fitContent" }, ngImport: i0, template: "<div class=\"main\"\n [ngClass]=\"{'warning': type === 'warning', 'error': type === 'error', 'success': type === 'success'}\">\n <ap-symbol [symbolId]=\"symbolIds[type]\" size=\"micro\"></ap-symbol>\n <div>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.main{display:flex;font-size:14px;line-height:18px;align-items:center;color:#344563;padding:11px;border-radius:8px;background-color:#f3f9ff;border:1px solid #74bbfe}.main ap-symbol{padding:1px 8px 1px 0;align-self:baseline;color:#178dfe}.main.warning{background-color:#fffef2;border-color:#fbb500}.main.warning ap-symbol{color:#fbb500}.main.error{background-color:#fdf5f5;border-color:#f17171}.main.error ap-symbol{color:#e81313}.main.success{background-color:#f2f7f3;border-color:#45b854}.main.success ap-symbol{color:#45b854}\n"], dependencies: [{ kind: "ngmodule", type: AgorapulseUiSymbolModule }, { kind: "component", type: i1.SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
49
+ InfoboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: InfoboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
50
+ InfoboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { buttonLabel: "buttonLabel", closable: "closable", title: "title", type: "type", width: "width" }, outputs: { buttonClicked: "buttonClicked" }, 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 <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol [symbolId]=\"symbolIds[type]\" class=\"status\" size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span *ngIf=\"title\" class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></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 class=\"closable-button\" (click)=\"onCloseInfobox()\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" 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;width:100%;max-width:100%;overflow:hidden;border-radius:var(--comp-infobox-border-radius)}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);font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;width:100%;max-width:100%;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 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:start;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content{display:flex;gap:var(--ref-spacing-xs);align-items:start;flex:1}ap-infobox .main .wrapper .symbol-content .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main .wrapper .symbol-content .content{display:flex;flex-direction:column;align-items: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}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){.wrapper,.wrapper .symbol-content{align-items:center!important}.wrapper .symbol-content .symbol-wrapper{margin:0}.wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"], dependencies: [{ kind: "ngmodule", type: AgorapulseUiSymbolModule }, { kind: "component", type: i1.SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ap-button[name]", 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 });
27
51
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: InfoboxComponent, decorators: [{
28
52
  type: Component,
29
- args: [{ selector: 'ap-infobox', standalone: true, imports: [AgorapulseUiSymbolModule, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"main\"\n [ngClass]=\"{'warning': type === 'warning', 'error': type === 'error', 'success': type === 'success'}\">\n <ap-symbol [symbolId]=\"symbolIds[type]\" size=\"micro\"></ap-symbol>\n <div>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.main{display:flex;font-size:14px;line-height:18px;align-items:center;color:#344563;padding:11px;border-radius:8px;background-color:#f3f9ff;border:1px solid #74bbfe}.main ap-symbol{padding:1px 8px 1px 0;align-self:baseline;color:#178dfe}.main.warning{background-color:#fffef2;border-color:#fbb500}.main.warning ap-symbol{color:#fbb500}.main.error{background-color:#fdf5f5;border-color:#f17171}.main.error ap-symbol{color:#e81313}.main.success{background-color:#f2f7f3;border-color:#45b854}.main.success ap-symbol{color:#45b854}\n"] }]
30
- }], ctorParameters: function () { return [{ type: i1.SymbolRegistry }]; }, propDecorators: { type: [{
53
+ args: [{ selector: 'ap-infobox', standalone: true, imports: [AgorapulseUiSymbolModule, 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 <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol [symbolId]=\"symbolIds[type]\" class=\"status\" size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span *ngIf=\"title\" class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></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 class=\"closable-button\" (click)=\"onCloseInfobox()\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" 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;width:100%;max-width:100%;overflow:hidden;border-radius:var(--comp-infobox-border-radius)}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);font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;width:100%;max-width:100%;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 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:start;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content{display:flex;gap:var(--ref-spacing-xs);align-items:start;flex:1}ap-infobox .main .wrapper .symbol-content .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main .wrapper .symbol-content .content{display:flex;flex-direction:column;align-items: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}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){.wrapper,.wrapper .symbol-content{align-items:center!important}.wrapper .symbol-content .symbol-wrapper{margin:0}.wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"] }]
54
+ }], ctorParameters: function () { return []; }, propDecorators: { fullWidth: [{
55
+ type: HostBinding,
56
+ args: ['class.full-width']
57
+ }], buttonLabel: [{
58
+ type: Input
59
+ }], closable: [{
60
+ type: Input
61
+ }], title: [{
31
62
  type: Input
32
- }], text: [{
63
+ }], type: [{
33
64
  type: Input
34
- }], fitContent: [{
65
+ }], width: [{
35
66
  type: Input
67
+ }], buttonClicked: [{
68
+ type: Output
36
69
  }] } });
37
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5mb2JveC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL3VpLWNvbXBvbmVudHMvaW5mb2JveC9zcmMvaW5mb2JveC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9saWJzL3VpLWNvbXBvbmVudHMvaW5mb2JveC9zcmMvaW5mb2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUgsd0JBQXdCLEVBQUUsYUFBYSxFQUN2QyxlQUFlLEVBQ2YsbUJBQW1CLEVBQUUsTUFBTSxFQUU5QixNQUFNLHVCQUF1QixDQUFDO0FBQy9CLE9BQU8sRUFBQyxPQUFPLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUN4QyxPQUFPLEVBQUMsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBQyxNQUFNLGVBQWUsQ0FBQzs7O0FBVXhFLE1BQU0sT0FBTyxnQkFBZ0I7SUFZekIsWUFBbUIsY0FBOEI7UUFBOUIsbUJBQWMsR0FBZCxjQUFjLENBQWdCO1FBWHhDLFNBQUksR0FBNkMsTUFBTSxDQUFDO1FBRXhELGVBQVUsR0FBWSxLQUFLLENBQUM7UUFFNUIsY0FBUyxHQUFvQztZQUNsRCxJQUFJLEVBQUUsb0JBQW9CO1lBQzFCLE9BQU8sRUFBRSxnQkFBZ0I7WUFDekIsS0FBSyxFQUFFLGNBQWM7WUFDckIsT0FBTyxFQUFFLE1BQU07U0FDbEIsQ0FBQztRQUdFLElBQUksQ0FBQyxjQUFjLENBQUMsZUFBZSxDQUFDO1lBQ2hDLG1CQUFtQjtZQUNuQixlQUFlO1lBQ2YsYUFBYTtZQUNiLE1BQU07U0FDVCxDQUFDLENBQUM7SUFDUCxDQUFDOzs2R0FuQlEsZ0JBQWdCO2lHQUFoQixnQkFBZ0Isd0lDbEI3QixrUkFPQSxrL0xEUWMsd0JBQXdCLGlLQUFFLE9BQU87MkZBR2xDLGdCQUFnQjtrQkFSNUIsU0FBUzsrQkFDSSxZQUFZLGNBR1YsSUFBSSxXQUNQLENBQUMsd0JBQXdCLEVBQUUsT0FBTyxDQUFDLG1CQUMzQix1QkFBdUIsQ0FBQyxNQUFNO3FHQUd0QyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIGFnb3JhcHVsc2VTeW1ib2wsXG4gICAgQWdvcmFwdWxzZVVpU3ltYm9sTW9kdWxlLCBhcEFsZXJ0Q2lyY2xlLFxuICAgIGFwQWxlcnRUcmlhbmdsZSxcbiAgICBhcEluZm9ybWF0aW9uQ2lyY2xlLCBhcExpa2UsXG4gICAgU3ltYm9sUmVnaXN0cnlcbn0gZnJvbSAnQGFnb3JhcHVsc2UvdWktc3ltYm9sJztcbmltcG9ydCB7TmdDbGFzc30gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7Q2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2FwLWluZm9ib3gnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9pbmZvYm94LmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9pbmZvYm94LmNvbXBvbmVudC5zY3NzJ10sXG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBpbXBvcnRzOiBbQWdvcmFwdWxzZVVpU3ltYm9sTW9kdWxlLCBOZ0NsYXNzXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgSW5mb2JveENvbXBvbmVudCB7XG4gICAgQElucHV0KCkgdHlwZTogJ2luZm8nIHwgJ3dhcm5pbmcnIHwgJ2Vycm9yJyB8ICdzdWNjZXNzJyA9ICdpbmZvJztcbiAgICBASW5wdXQoKSB0ZXh0OiBzdHJpbmc7XG4gICAgQElucHV0KCkgZml0Q29udGVudDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gICAgcmVhZG9ubHkgc3ltYm9sSWRzOiB7W2s6IHN0cmluZ106IGFnb3JhcHVsc2VTeW1ib2x9ID0ge1xuICAgICAgICBpbmZvOiAnaW5mb3JtYXRpb24tY2lyY2xlJyxcbiAgICAgICAgd2FybmluZzogJ2FsZXJ0LXRyaWFuZ2xlJyxcbiAgICAgICAgZXJyb3I6ICdhbGVydC1jaXJjbGUnLFxuICAgICAgICBzdWNjZXNzOiAnbGlrZScsXG4gICAgfTtcblxuICAgIGNvbnN0cnVjdG9yKHB1YmxpYyBzeW1ib2xSZWdpc3RyeTogU3ltYm9sUmVnaXN0cnkpIHtcbiAgICAgICAgdGhpcy5zeW1ib2xSZWdpc3RyeS5yZWdpc3RlclN5bWJvbHMoW1xuICAgICAgICAgICAgYXBJbmZvcm1hdGlvbkNpcmNsZSxcbiAgICAgICAgICAgIGFwQWxlcnRUcmlhbmdsZSxcbiAgICAgICAgICAgIGFwQWxlcnRDaXJjbGUsXG4gICAgICAgICAgICBhcExpa2VcbiAgICAgICAgXSk7XG4gICAgfVxufVxuIiwiPGRpdiBjbGFzcz1cIm1haW5cIlxuICAgIFtuZ0NsYXNzXT1cInsnd2FybmluZyc6IHR5cGUgPT09ICd3YXJuaW5nJywgJ2Vycm9yJzogdHlwZSA9PT0gJ2Vycm9yJywgJ3N1Y2Nlc3MnOiB0eXBlID09PSAnc3VjY2Vzcyd9XCI+XG4gICAgPGFwLXN5bWJvbCBbc3ltYm9sSWRdPVwic3ltYm9sSWRzW3R5cGVdXCIgc2l6ZT1cIm1pY3JvXCI+PC9hcC1zeW1ib2w+XG4gICAgPGRpdj5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuPC9kaXY+XG4iXX0=
70
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5mb2JveC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL3VpLWNvbXBvbmVudHMvaW5mb2JveC9zcmMvaW5mb2JveC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9saWJzL3VpLWNvbXBvbmVudHMvaW5mb2JveC9zcmMvaW5mb2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsZUFBZSxFQUFDLE1BQU0sa0NBQWtDLENBQUM7QUFDakUsT0FBTyxFQUVILHdCQUF3QixFQUN4QixhQUFhLEVBQ2IsYUFBYSxFQUNiLE9BQU8sRUFDUCxtQkFBbUIsRUFDbkIsY0FBYyxFQUNkLGNBQWMsR0FDakIsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLEVBQUMsT0FBTyxFQUFFLElBQUksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQzlDLE9BQU8sRUFBZ0IsVUFBVSxFQUFFLFlBQVksRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN0RSxPQUFPLEVBQUMsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3JDLE9BQU8sRUFBQyxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDckMsT0FBTyxFQUFDLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLGlCQUFpQixFQUFDLE1BQU0sZUFBZSxDQUFDOzs7QUFheEcsTUFBTSxPQUFPLGdCQUFnQjtJQWF6QixJQUFhLEtBQUssQ0FBQyxLQUFtQjtRQUNsQyxJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztRQUNwQixJQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssS0FBSyxZQUFZLENBQUM7SUFDNUMsQ0FBQztJQUNELElBQUksS0FBSztRQUNMLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUN2QixDQUFDO0lBY0Q7UUFoQ2lCLCtCQUEwQixHQUFHLEdBQUcsQ0FBQztRQUVqQyxtQkFBYyxHQUFHLE1BQU0sQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUN4QyxlQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBRWhCLGNBQVMsR0FBWSxLQUFLLENBQUM7UUFHbkQsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUUxQixTQUFJLEdBQTZDLE1BQU0sQ0FBQztRQVN6RCxXQUFNLEdBQWlCLEtBQUssQ0FBQztRQUUzQixrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFFbkQscUJBQWdCLEdBQThCLFlBQVksQ0FBQztRQUVsRCxjQUFTLEdBQW9DO1lBQ2xELElBQUksRUFBRSxvQkFBb0I7WUFDMUIsT0FBTyxFQUFFLGNBQWM7WUFDdkIsS0FBSyxFQUFFLGVBQWU7WUFDdEIsT0FBTyxFQUFFLGNBQWM7U0FDMUIsQ0FBQztRQUdFLElBQUksQ0FBQyxjQUFjLENBQUMsZUFBZSxDQUFDO1lBQ2hDLG1CQUFtQjtZQUNuQixhQUFhO1lBQ2IsY0FBYztZQUNkLGFBQWE7WUFDYixPQUFPO1NBQ1YsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVELGFBQWE7UUFDVCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzlCLENBQUM7SUFFRCxjQUFjO1FBQ1YsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsTUFBTSxFQUFFLENBQUM7SUFDM0MsQ0FBQzs7NkdBakRRLGdCQUFnQjtpR0FBaEIsZ0JBQWdCLCtSQzVCN0IscW5GQTZDQSwrcUhEckJjLHdCQUF3QixpS0FBVyxJQUFJLDZGQUFFLGVBQWU7MkZBSXpELGdCQUFnQjtrQkFUNUIsU0FBUzsrQkFDSSxZQUFZLGNBR1YsSUFBSSxXQUNQLENBQUMsd0JBQXdCLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxlQUFlLENBQUMsbUJBQ2xELHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUk7MEVBUUosU0FBUztzQkFBekMsV0FBVzt1QkFBQyxrQkFBa0I7Z0JBRXRCLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUVPLEtBQUs7c0JBQWpCLEtBQUs7Z0JBU0ksYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7QnV0dG9uQ29tcG9uZW50fSBmcm9tICdAYWdvcmFwdWxzZS91aS1jb21wb25lbnRzL2J1dHRvbic7XG5pbXBvcnQge1xuICAgIGFnb3JhcHVsc2VTeW1ib2wsXG4gICAgQWdvcmFwdWxzZVVpU3ltYm9sTW9kdWxlLFxuICAgIGFwQWxlcnRDaXJjbGUsXG4gICAgYXBDaGVja0NpcmNsZSxcbiAgICBhcENsb3NlLFxuICAgIGFwSW5mb3JtYXRpb25DaXJjbGUsXG4gICAgYXBSZW1vdmVDaXJjbGUsXG4gICAgU3ltYm9sUmVnaXN0cnksXG59IGZyb20gJ0BhZ29yYXB1bHNlL3VpLXN5bWJvbCc7XG5pbXBvcnQge05nQ2xhc3MsIE5nSWZ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge0FmdGVyVmlld0luaXQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlcn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge091dHB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge2luamVjdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0NoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCwgVmlld0VuY2Fwc3VsYXRpb259IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuZXhwb3J0IHR5cGUgSW5mb2JveERpcmVjdGlvbiA9ICdjb2x1bW4nIHwgJ3Jvdyc7XG5leHBvcnQgdHlwZSBJbmZvYm94V2lkdGggPSAnZml0JyB8ICdmdWxsLXdpZHRoJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdhcC1pbmZvYm94JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vaW5mb2JveC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vaW5mb2JveC5jb21wb25lbnQuc2NzcyddLFxuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgaW1wb3J0czogW0Fnb3JhcHVsc2VVaVN5bWJvbE1vZHVsZSwgTmdDbGFzcywgTmdJZiwgQnV0dG9uQ29tcG9uZW50XSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBJbmZvYm94Q29tcG9uZW50IHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IENPTlRBSU5FUl9XSURUSF9CUkVBS1BPSU5UID0gNTg4O1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBzeW1ib2xSZWdpc3RyeSA9IGluamVjdChTeW1ib2xSZWdpc3RyeSk7XG4gICAgcHJpdmF0ZSByZWFkb25seSBlbGVtZW50UmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5mdWxsLXdpZHRoJykgZnVsbFdpZHRoOiBib29sZWFuID0gZmFsc2U7XG5cbiAgICBASW5wdXQoKSBidXR0b25MYWJlbDogc3RyaW5nO1xuICAgIEBJbnB1dCgpIGNsb3NhYmxlOiBib29sZWFuID0gZmFsc2U7XG4gICAgQElucHV0KCkgdGl0bGU/OiBzdHJpbmc7XG4gICAgQElucHV0KCkgdHlwZTogJ2luZm8nIHwgJ3dhcm5pbmcnIHwgJ2Vycm9yJyB8ICdzdWNjZXNzJyA9ICdpbmZvJztcblxuICAgIEBJbnB1dCgpIHNldCB3aWR0aCh3aWR0aDogSW5mb2JveFdpZHRoKSB7XG4gICAgICAgIHRoaXMuX3dpZHRoID0gd2lkdGg7XG4gICAgICAgIHRoaXMuZnVsbFdpZHRoID0gd2lkdGggPT09ICdmdWxsLXdpZHRoJztcbiAgICB9XG4gICAgZ2V0IHdpZHRoKCk6IEluZm9ib3hXaWR0aCB7XG4gICAgICAgIHJldHVybiB0aGlzLl93aWR0aDtcbiAgICB9XG4gICAgcHJpdmF0ZSBfd2lkdGg6IEluZm9ib3hXaWR0aCA9ICdmaXQnO1xuXG4gICAgQE91dHB1dCgpIGJ1dHRvbkNsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgICBkaXNwbGF5RGlyZWN0aW9uOiAnaG9yaXpvbnRhbCcgfCAndmVydGljYWwnID0gJ2hvcml6b250YWwnO1xuXG4gICAgcmVhZG9ubHkgc3ltYm9sSWRzOiB7W2s6IHN0cmluZ106IGFnb3JhcHVsc2VTeW1ib2x9ID0ge1xuICAgICAgICBpbmZvOiAnaW5mb3JtYXRpb24tY2lyY2xlJyxcbiAgICAgICAgd2FybmluZzogJ2FsZXJ0LWNpcmNsZScsXG4gICAgICAgIGVycm9yOiAncmVtb3ZlLWNpcmNsZScsXG4gICAgICAgIHN1Y2Nlc3M6ICdjaGVjay1jaXJjbGUnLFxuICAgIH07XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgdGhpcy5zeW1ib2xSZWdpc3RyeS5yZWdpc3RlclN5bWJvbHMoW1xuICAgICAgICAgICAgYXBJbmZvcm1hdGlvbkNpcmNsZSxcbiAgICAgICAgICAgIGFwQWxlcnRDaXJjbGUsXG4gICAgICAgICAgICBhcFJlbW92ZUNpcmNsZSxcbiAgICAgICAgICAgIGFwQ2hlY2tDaXJjbGUsXG4gICAgICAgICAgICBhcENsb3NlLFxuICAgICAgICBdKTtcbiAgICB9XG5cbiAgICBvbkNsaWNrQnV0dG9uKCk6IHZvaWQge1xuICAgICAgICB0aGlzLmJ1dHRvbkNsaWNrZWQuZW1pdCgpO1xuICAgIH1cblxuICAgIG9uQ2xvc2VJbmZvYm94KCk6IHZvaWQge1xuICAgICAgICB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5yZW1vdmUoKTtcbiAgICB9XG59XG4iLCI8ZGl2XG4gICAgY2xhc3M9XCJtYWluXCJcbiAgICBbY2xhc3MuaW5mb109XCJ0eXBlID09PSAnaW5mbydcIlxuICAgIFtjbGFzcy53YXJuaW5nXT1cInR5cGUgPT09ICd3YXJuaW5nJ1wiXG4gICAgW2NsYXNzLmVycm9yXT1cInR5cGUgPT09ICdlcnJvcidcIlxuICAgIFtjbGFzcy5zdWNjZXNzXT1cInR5cGUgPT09ICdzdWNjZXNzJ1wiPlxuICAgIDxkaXYgY2xhc3M9XCJzdGF0dXMtYmFubmVyXCI+PC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cIndyYXBwZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInN5bWJvbC1jb250ZW50XCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwic3ltYm9sLXdyYXBwZXJcIj5cbiAgICAgICAgICAgICAgICA8YXAtc3ltYm9sIFtzeW1ib2xJZF09XCJzeW1ib2xJZHNbdHlwZV1cIiBjbGFzcz1cInN0YXR1c1wiIHNpemU9XCJtaWNyb1wiPjwvYXAtc3ltYm9sPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY29udGVudFwiPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ0ZXh0c1wiPlxuICAgICAgICAgICAgICAgICAgICA8c3BhbiAqbmdJZj1cInRpdGxlXCIgY2xhc3M9XCJ0aXRsZVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAge3sgdGl0bGUgfX1cbiAgICAgICAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cInRleHRcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICAgICAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJidXR0b25MYWJlbFwiPlxuICAgICAgICAgICAgICAgICAgICA8YXAtYnV0dG9uXG4gICAgICAgICAgICAgICAgICAgICAgICBuYW1lPVwiaW5mb2JveC1idXR0b25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgW2NvbmZpZ109XCJ7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgc3R5bGU6ICdzdHJva2VkJyxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb2xvcjogJ2dyZXknXG4gICAgICAgICAgICAgICAgICAgICAgICB9XCJcbiAgICAgICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJvbkNsaWNrQnV0dG9uKClcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIHt7IGJ1dHRvbkxhYmVsIH19XG4gICAgICAgICAgICAgICAgICAgIDwvYXAtYnV0dG9uPlxuICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiY2xvc2FibGVcIj5cbiAgICAgICAgICAgIDxidXR0b24gY2xhc3M9XCJjbG9zYWJsZS1idXR0b25cIiAoY2xpY2spPVwib25DbG9zZUluZm9ib3goKVwiPlxuICAgICAgICAgICAgICAgIDxzdmcgd2lkdGg9XCI4XCIgaGVpZ2h0PVwiOFwiIHZpZXdCb3g9XCIwIDAgOCA4XCIgZmlsbD1cIm5vbmVcIiB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCI+XG4gICAgICAgICAgICAgICAgICAgIDxwYXRoXG4gICAgICAgICAgICAgICAgICAgICAgICBkPVwiTTcuMzI0NSAwLjY3MzMzNkM3LjE2NTE4IDAuNTE0NTY1IDYuOTQ5NDMgMC40MjU0MTUgNi43MjQ1IDAuNDI1NDE1QzYuNDk5NTggMC40MjU0MTUgNi4yODM4MyAwLjUxNDU2NSA2LjEyNDUxIDAuNjczMzM2TDQuMDA2NTEgMi43OTEzNEwxLjg4NTg0IDAuNjczMzM2QzEuNzI0OTkgMC41MTk2MDcgMS41MTAzNiAwLjQzNDk1NSAxLjI4Nzg4IDAuNDM3NTAxQzEuMDY1NCAwLjQ0MDA0OCAwLjg1Mjc1NiAwLjUyOTU5MSAwLjY5NTQ3MiAwLjY4Njk2MkMwLjUzODE4OSAwLjg0NDMzMyAwLjQ0ODc2MyAxLjA1NzAyIDAuNDQ2MzQgMS4yNzk1MUMwLjQ0MzkxNiAxLjUwMTk5IDAuNTI4Njg3IDEuNzE2NTggMC42ODI1MDUgMS44NzczNEwyLjc5OTg0IDMuOTk1MzRMMC42ODI1MDUgNi4xMTRDMC41Mjg2ODcgNi4yNzQ3NiAwLjQ0MzkxNiA2LjQ4OTM1IDAuNDQ2MzQgNi43MTE4M0MwLjQ0ODc2MyA2LjkzNDMxIDAuNTM4MTg5IDcuMTQ3IDAuNjk1NDcyIDcuMzA0MzhDMC44NTI3NTYgNy40NjE3NSAxLjA2NTQgNy41NTEyOSAxLjI4Nzg4IDcuNTUzODRDMS41MTAzNiA3LjU1NjM4IDEuNzI0OTkgNy40NzE3MyAxLjg4NTg0IDcuMzE4TDQuMDAzMTcgNS4yTDYuMTIxMTcgNy4zMTg2N0M2LjI4MzY0IDcuNDYzMDcgNi40OTUyIDcuNTM5ODYgNi43MTI0NyA3LjUzMzI5QzYuOTI5NzQgNy41MjY3MSA3LjEzNjI3IDcuNDM3MjggNy4yODk3MiA3LjI4MzMyQzcuNDQzMTYgNy4xMjkzNiA3LjUzMTkxIDYuOTIyNTQgNy41Mzc3NiA2LjcwNTI1QzcuNTQzNiA2LjQ4Nzk2IDcuNDY2MTEgNi4yNzY2NiA3LjMyMTE3IDYuMTE0NjdMNS4yMDM4NCAzLjk5Nkw3LjMyMTE3IDEuODc4QzcuNDgxMzIgMS43MTg2NyA3LjU3MTY0IDEuNTAyMjYgNy41NzIyNiAxLjI3NjM2QzcuNTcyODkgMS4wNTA0NSA3LjQ4Mzc3IDAuODMzNTQ4IDcuMzI0NSAwLjY3MzMzNlpcIlxuICAgICAgICAgICAgICAgICAgICAgICAgZmlsbD1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICAgICAgICAgICAgPC9zdmc+XG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
package/fesm2015/agorapulse-ui-components-infobox.mjs CHANGED
@@ -1,39 +1,69 @@
1
+ import { ButtonComponent } from '@agorapulse/ui-components/button';
1
2
  import * as i1 from '@agorapulse/ui-symbol';
2
- import { apInformationCircle, apAlertTriangle, apAlertCircle, apLike, AgorapulseUiSymbolModule } from '@agorapulse/ui-symbol';
3
- import { NgClass } from '@angular/common';
3
+ import { SymbolRegistry, apInformationCircle, apAlertCircle, apRemoveCircle, apCheckCircle, apClose, AgorapulseUiSymbolModule } from '@agorapulse/ui-symbol';
4
+ import { NgIf, NgClass } from '@angular/common';
4
5
  import * as i0 from '@angular/core';
5
- import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
6
+ import { inject, ElementRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input, Output } from '@angular/core';
6
7
 
7
8
  class InfoboxComponent {
8
- constructor(symbolRegistry) {
9
- this.symbolRegistry = symbolRegistry;
9
+ set width(width) {
10
+ this._width = width;
11
+ this.fullWidth = width === 'full-width';
12
+ }
13
+ get width() {
14
+ return this._width;
15
+ }
16
+ constructor() {
17
+ this.CONTAINER_WIDTH_BREAKPOINT = 588;
18
+ this.symbolRegistry = inject(SymbolRegistry);
19
+ this.elementRef = inject(ElementRef);
20
+ this.fullWidth = false;
21
+ this.closable = false;
10
22
  this.type = 'info';
11
- this.fitContent = false;
23
+ this._width = 'fit';
24
+ this.buttonClicked = new EventEmitter();
25
+ this.displayDirection = 'horizontal';
12
26
  this.symbolIds = {
13
27
  info: 'information-circle',
14
- warning: 'alert-triangle',
15
- error: 'alert-circle',
16
- success: 'like',
28
+ warning: 'alert-circle',
29
+ error: 'remove-circle',
30
+ success: 'check-circle',
17
31
  };
18
32
  this.symbolRegistry.registerSymbols([
19
33
  apInformationCircle,
20
- apAlertTriangle,
21
34
  apAlertCircle,
22
- apLike
35
+ apRemoveCircle,
36
+ apCheckCircle,
37
+ apClose,
23
38
  ]);
24
39
  }
40
+ onClickButton() {
41
+ this.buttonClicked.emit();
42
+ }
43
+ onCloseInfobox() {
44
+ this.elementRef.nativeElement.remove();
45
+ }
25
46
  }
26
- InfoboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: InfoboxComponent, deps: [{ token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
27
- InfoboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { type: "type", text: "text", fitContent: "fitContent" }, ngImport: i0, template: "<div class=\"main\"\n [ngClass]=\"{'warning': type === 'warning', 'error': type === 'error', 'success': type === 'success'}\">\n <ap-symbol [symbolId]=\"symbolIds[type]\" size=\"micro\"></ap-symbol>\n <div>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.main{display:flex;font-size:14px;line-height:18px;align-items:center;color:#344563;padding:11px;border-radius:8px;background-color:#f3f9ff;border:1px solid #74bbfe}.main ap-symbol{padding:1px 8px 1px 0;align-self:baseline;color:#178dfe}.main.warning{background-color:#fffef2;border-color:#fbb500}.main.warning ap-symbol{color:#fbb500}.main.error{background-color:#fdf5f5;border-color:#f17171}.main.error ap-symbol{color:#e81313}.main.success{background-color:#f2f7f3;border-color:#45b854}.main.success ap-symbol{color:#45b854}\n"], dependencies: [{ kind: "ngmodule", type: AgorapulseUiSymbolModule }, { kind: "component", type: i1.SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
47
+ InfoboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: InfoboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
48
+ InfoboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { buttonLabel: "buttonLabel", closable: "closable", title: "title", type: "type", width: "width" }, outputs: { buttonClicked: "buttonClicked" }, 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 <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol [symbolId]=\"symbolIds[type]\" class=\"status\" size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span *ngIf=\"title\" class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></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 class=\"closable-button\" (click)=\"onCloseInfobox()\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" 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;width:100%;max-width:100%;overflow:hidden;border-radius:var(--comp-infobox-border-radius)}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);font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;width:100%;max-width:100%;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 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:start;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content{display:flex;gap:var(--ref-spacing-xs);align-items:start;flex:1}ap-infobox .main .wrapper .symbol-content .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main .wrapper .symbol-content .content{display:flex;flex-direction:column;align-items: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}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){.wrapper,.wrapper .symbol-content{align-items:center!important}.wrapper .symbol-content .symbol-wrapper{margin:0}.wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"], dependencies: [{ kind: "ngmodule", type: AgorapulseUiSymbolModule }, { kind: "component", type: i1.SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ap-button[name]", 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 });
28
49
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: InfoboxComponent, decorators: [{
29
50
  type: Component,
30
- args: [{ selector: 'ap-infobox', standalone: true, imports: [AgorapulseUiSymbolModule, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"main\"\n [ngClass]=\"{'warning': type === 'warning', 'error': type === 'error', 'success': type === 'success'}\">\n <ap-symbol [symbolId]=\"symbolIds[type]\" size=\"micro\"></ap-symbol>\n <div>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.main{display:flex;font-size:14px;line-height:18px;align-items:center;color:#344563;padding:11px;border-radius:8px;background-color:#f3f9ff;border:1px solid #74bbfe}.main ap-symbol{padding:1px 8px 1px 0;align-self:baseline;color:#178dfe}.main.warning{background-color:#fffef2;border-color:#fbb500}.main.warning ap-symbol{color:#fbb500}.main.error{background-color:#fdf5f5;border-color:#f17171}.main.error ap-symbol{color:#e81313}.main.success{background-color:#f2f7f3;border-color:#45b854}.main.success ap-symbol{color:#45b854}\n"] }]
31
- }], ctorParameters: function () { return [{ type: i1.SymbolRegistry }]; }, propDecorators: { type: [{
51
+ args: [{ selector: 'ap-infobox', standalone: true, imports: [AgorapulseUiSymbolModule, 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 <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol [symbolId]=\"symbolIds[type]\" class=\"status\" size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span *ngIf=\"title\" class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></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 class=\"closable-button\" (click)=\"onCloseInfobox()\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" 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;width:100%;max-width:100%;overflow:hidden;border-radius:var(--comp-infobox-border-radius)}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);font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;width:100%;max-width:100%;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 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:start;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content{display:flex;gap:var(--ref-spacing-xs);align-items:start;flex:1}ap-infobox .main .wrapper .symbol-content .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main .wrapper .symbol-content .content{display:flex;flex-direction:column;align-items: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}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){.wrapper,.wrapper .symbol-content{align-items:center!important}.wrapper .symbol-content .symbol-wrapper{margin:0}.wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"] }]
52
+ }], ctorParameters: function () { return []; }, propDecorators: { fullWidth: [{
53
+ type: HostBinding,
54
+ args: ['class.full-width']
55
+ }], buttonLabel: [{
56
+ type: Input
57
+ }], closable: [{
58
+ type: Input
59
+ }], title: [{
32
60
  type: Input
33
- }], text: [{
61
+ }], type: [{
34
62
  type: Input
35
- }], fitContent: [{
63
+ }], width: [{
36
64
  type: Input
65
+ }], buttonClicked: [{
66
+ type: Output
37
67
  }] } });
38
68
 
39
69
  /**
package/fesm2015/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 {\n agorapulseSymbol,\n AgorapulseUiSymbolModule, apAlertCircle,\n apAlertTriangle,\n apInformationCircle, apLike,\n SymbolRegistry\n} from '@agorapulse/ui-symbol';\nimport {NgClass} from '@angular/common';\nimport {ChangeDetectionStrategy, Component, Input} from '@angular/core';\n\n@Component({\n selector: 'ap-infobox',\n templateUrl: './infobox.component.html',\n styleUrls: ['./infobox.component.scss'],\n standalone: true,\n imports: [AgorapulseUiSymbolModule, NgClass],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InfoboxComponent {\n @Input() type: 'info' | 'warning' | 'error' | 'success' = 'info';\n @Input() text: string;\n @Input() fitContent: boolean = false;\n\n readonly symbolIds: {[k: string]: agorapulseSymbol} = {\n info: 'information-circle',\n warning: 'alert-triangle',\n error: 'alert-circle',\n success: 'like',\n };\n\n constructor(public symbolRegistry: SymbolRegistry) {\n this.symbolRegistry.registerSymbols([\n apInformationCircle,\n apAlertTriangle,\n apAlertCircle,\n apLike\n ]);\n }\n}\n","<div class=\"main\"\n [ngClass]=\"{'warning': type === 'warning', 'error': type === 'error', 'success': type === 'success'}\">\n <ap-symbol [symbolId]=\"symbolIds[type]\" size=\"micro\"></ap-symbol>\n <div>\n <ng-content></ng-content>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;MAkBa,gBAAgB,CAAA;AAYzB,IAAA,WAAA,CAAmB,cAA8B,EAAA;AAA9B,QAAA,IAAc,CAAA,cAAA,GAAd,cAAc,CAAgB;AAXxC,QAAA,IAAI,CAAA,IAAA,GAA6C,MAAM,CAAC;AAExD,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK,CAAC;QAE5B,IAAA,CAAA,SAAS,GAAoC;AAClD,YAAA,IAAI,EAAE,oBAAoB;AAC1B,YAAA,OAAO,EAAE,gBAAgB;AACzB,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,OAAO,EAAE,MAAM;SAClB,CAAC;AAGE,QAAA,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC;YAChC,mBAAmB;YACnB,eAAe;YACf,aAAa;YACb,MAAM;AACT,SAAA,CAAC,CAAC;KACN;;6GAnBQ,gBAAgB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,cAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,gBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,EClB7B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,kRAOA,EDQc,MAAA,EAAA,CAAA,27LAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,wBAAwB,iKAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FAGlC,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;+BACI,YAAY,EAAA,UAAA,EAGV,IAAI,EAAA,OAAA,EACP,CAAC,wBAAwB,EAAE,OAAO,CAAC,EAAA,eAAA,EAC3B,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,kRAAA,EAAA,MAAA,EAAA,CAAA,27LAAA,CAAA,EAAA,CAAA;qGAGtC,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;;;AErBV;;AAEG;;;;"}
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 agorapulseSymbol,\n AgorapulseUiSymbolModule,\n apAlertCircle,\n apCheckCircle,\n apClose,\n apInformationCircle,\n apRemoveCircle,\n SymbolRegistry,\n} from '@agorapulse/ui-symbol';\nimport {NgClass, NgIf} from '@angular/common';\nimport {AfterViewInit, ElementRef, EventEmitter} from '@angular/core';\nimport {Output} from '@angular/core';\nimport {inject} from '@angular/core';\nimport {ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation} 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: [AgorapulseUiSymbolModule, NgClass, NgIf, ButtonComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class InfoboxComponent {\n private readonly CONTAINER_WIDTH_BREAKPOINT = 588;\n\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;\n @Input() closable: boolean = 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\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([\n apInformationCircle,\n apAlertCircle,\n apRemoveCircle,\n apCheckCircle,\n apClose,\n ]);\n }\n\n onClickButton(): void {\n this.buttonClicked.emit();\n }\n\n onCloseInfobox(): void {\n this.elementRef.nativeElement.remove();\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 <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol [symbolId]=\"symbolIds[type]\" class=\"status\" size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span *ngIf=\"title\" class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></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 class=\"closable-button\" (click)=\"onCloseInfobox()\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" 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":";;;;;;;MA4Ba,gBAAgB,CAAA;IAazB,IAAa,KAAK,CAAC,KAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AACpB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,KAAK,YAAY,CAAC;KAC3C;AACD,IAAA,IAAI,KAAK,GAAA;QACL,OAAO,IAAI,CAAC,MAAM,CAAC;KACtB;AAcD,IAAA,WAAA,GAAA;AAhCiB,QAAA,IAA0B,CAAA,0BAAA,GAAG,GAAG,CAAC;AAEjC,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AACxC,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AAEhB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK,CAAC;AAGnD,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK,CAAC;AAE1B,QAAA,IAAI,CAAA,IAAA,GAA6C,MAAM,CAAC;AASzD,QAAA,IAAM,CAAA,MAAA,GAAiB,KAAK,CAAC;AAE3B,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAAQ,CAAC;AAEnD,QAAA,IAAgB,CAAA,gBAAA,GAA8B,YAAY,CAAC;QAElD,IAAA,CAAA,SAAS,GAAoC;AAClD,YAAA,IAAI,EAAE,oBAAoB;AAC1B,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,KAAK,EAAE,eAAe;AACtB,YAAA,OAAO,EAAE,cAAc;SAC1B,CAAC;AAGE,QAAA,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC;YAChC,mBAAmB;YACnB,aAAa;YACb,cAAc;YACd,aAAa;YACb,OAAO;AACV,SAAA,CAAC,CAAC;KACN;IAED,aAAa,GAAA;AACT,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC7B;IAED,cAAc,GAAA;AACV,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;KAC1C;;6GAjDQ,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,gBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,+RC5B7B,qnFA6CA,EAAA,MAAA,EAAA,CAAA,wnHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDrBc,wBAAwB,EAAW,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FAAE,eAAe,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,mBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAAA,OAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;2FAIzD,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAT5B,SAAS;YACI,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,cAGV,IAAI,EAAA,OAAA,EACP,CAAC,wBAAwB,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,CAAC,mBAClD,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,qnFAAA,EAAA,MAAA,EAAA,CAAA,wnHAAA,CAAA,EAAA,CAAA;0EAQJ,SAAS,EAAA,CAAA;sBAAzC,WAAW;uBAAC,kBAAkB,CAAA;gBAEtB,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAEO,KAAK,EAAA,CAAA;sBAAjB,KAAK;gBASI,aAAa,EAAA,CAAA;sBAAtB,MAAM;;;AElDX;;AAEG;;;;"}
package/fesm2020/agorapulse-ui-components-infobox.mjs CHANGED
@@ -1,39 +1,69 @@
1
+ import { ButtonComponent } from '@agorapulse/ui-components/button';
1
2
  import * as i1 from '@agorapulse/ui-symbol';
2
- import { apInformationCircle, apAlertTriangle, apAlertCircle, apLike, AgorapulseUiSymbolModule } from '@agorapulse/ui-symbol';
3
- import { NgClass } from '@angular/common';
3
+ import { SymbolRegistry, apInformationCircle, apAlertCircle, apRemoveCircle, apCheckCircle, apClose, AgorapulseUiSymbolModule } from '@agorapulse/ui-symbol';
4
+ import { NgIf, NgClass } from '@angular/common';
4
5
  import * as i0 from '@angular/core';
5
- import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
6
+ import { inject, ElementRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input, Output } from '@angular/core';
6
7
 
7
8
  class InfoboxComponent {
8
- constructor(symbolRegistry) {
9
- this.symbolRegistry = symbolRegistry;
9
+ set width(width) {
10
+ this._width = width;
11
+ this.fullWidth = width === 'full-width';
12
+ }
13
+ get width() {
14
+ return this._width;
15
+ }
16
+ constructor() {
17
+ this.CONTAINER_WIDTH_BREAKPOINT = 588;
18
+ this.symbolRegistry = inject(SymbolRegistry);
19
+ this.elementRef = inject(ElementRef);
20
+ this.fullWidth = false;
21
+ this.closable = false;
10
22
  this.type = 'info';
11
- this.fitContent = false;
23
+ this._width = 'fit';
24
+ this.buttonClicked = new EventEmitter();
25
+ this.displayDirection = 'horizontal';
12
26
  this.symbolIds = {
13
27
  info: 'information-circle',
14
- warning: 'alert-triangle',
15
- error: 'alert-circle',
16
- success: 'like',
28
+ warning: 'alert-circle',
29
+ error: 'remove-circle',
30
+ success: 'check-circle',
17
31
  };
18
32
  this.symbolRegistry.registerSymbols([
19
33
  apInformationCircle,
20
- apAlertTriangle,
21
34
  apAlertCircle,
22
- apLike
35
+ apRemoveCircle,
36
+ apCheckCircle,
37
+ apClose,
23
38
  ]);
24
39
  }
40
+ onClickButton() {
41
+ this.buttonClicked.emit();
42
+ }
43
+ onCloseInfobox() {
44
+ this.elementRef.nativeElement.remove();
45
+ }
25
46
  }
26
- InfoboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: InfoboxComponent, deps: [{ token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
27
- InfoboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { type: "type", text: "text", fitContent: "fitContent" }, ngImport: i0, template: "<div class=\"main\"\n [ngClass]=\"{'warning': type === 'warning', 'error': type === 'error', 'success': type === 'success'}\">\n <ap-symbol [symbolId]=\"symbolIds[type]\" size=\"micro\"></ap-symbol>\n <div>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.main{display:flex;font-size:14px;line-height:18px;align-items:center;color:#344563;padding:11px;border-radius:8px;background-color:#f3f9ff;border:1px solid #74bbfe}.main ap-symbol{padding:1px 8px 1px 0;align-self:baseline;color:#178dfe}.main.warning{background-color:#fffef2;border-color:#fbb500}.main.warning ap-symbol{color:#fbb500}.main.error{background-color:#fdf5f5;border-color:#f17171}.main.error ap-symbol{color:#e81313}.main.success{background-color:#f2f7f3;border-color:#45b854}.main.success ap-symbol{color:#45b854}\n"], dependencies: [{ kind: "ngmodule", type: AgorapulseUiSymbolModule }, { kind: "component", type: i1.SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
47
+ InfoboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: InfoboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
48
+ InfoboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { buttonLabel: "buttonLabel", closable: "closable", title: "title", type: "type", width: "width" }, outputs: { buttonClicked: "buttonClicked" }, 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 <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol [symbolId]=\"symbolIds[type]\" class=\"status\" size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span *ngIf=\"title\" class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></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 class=\"closable-button\" (click)=\"onCloseInfobox()\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" 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;width:100%;max-width:100%;overflow:hidden;border-radius:var(--comp-infobox-border-radius)}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);font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;width:100%;max-width:100%;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 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:start;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content{display:flex;gap:var(--ref-spacing-xs);align-items:start;flex:1}ap-infobox .main .wrapper .symbol-content .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main .wrapper .symbol-content .content{display:flex;flex-direction:column;align-items: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}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){.wrapper,.wrapper .symbol-content{align-items:center!important}.wrapper .symbol-content .symbol-wrapper{margin:0}.wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"], dependencies: [{ kind: "ngmodule", type: AgorapulseUiSymbolModule }, { kind: "component", type: i1.SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ap-button[name]", 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 });
28
49
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: InfoboxComponent, decorators: [{
29
50
  type: Component,
30
- args: [{ selector: 'ap-infobox', standalone: true, imports: [AgorapulseUiSymbolModule, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"main\"\n [ngClass]=\"{'warning': type === 'warning', 'error': type === 'error', 'success': type === 'success'}\">\n <ap-symbol [symbolId]=\"symbolIds[type]\" size=\"micro\"></ap-symbol>\n <div>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.main{display:flex;font-size:14px;line-height:18px;align-items:center;color:#344563;padding:11px;border-radius:8px;background-color:#f3f9ff;border:1px solid #74bbfe}.main ap-symbol{padding:1px 8px 1px 0;align-self:baseline;color:#178dfe}.main.warning{background-color:#fffef2;border-color:#fbb500}.main.warning ap-symbol{color:#fbb500}.main.error{background-color:#fdf5f5;border-color:#f17171}.main.error ap-symbol{color:#e81313}.main.success{background-color:#f2f7f3;border-color:#45b854}.main.success ap-symbol{color:#45b854}\n"] }]
31
- }], ctorParameters: function () { return [{ type: i1.SymbolRegistry }]; }, propDecorators: { type: [{
51
+ args: [{ selector: 'ap-infobox', standalone: true, imports: [AgorapulseUiSymbolModule, 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 <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol [symbolId]=\"symbolIds[type]\" class=\"status\" size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span *ngIf=\"title\" class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></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 class=\"closable-button\" (click)=\"onCloseInfobox()\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" 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;width:100%;max-width:100%;overflow:hidden;border-radius:var(--comp-infobox-border-radius)}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);font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;width:100%;max-width:100%;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 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:start;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content{display:flex;gap:var(--ref-spacing-xs);align-items:start;flex:1}ap-infobox .main .wrapper .symbol-content .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main .wrapper .symbol-content .content{display:flex;flex-direction:column;align-items: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}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){.wrapper,.wrapper .symbol-content{align-items:center!important}.wrapper .symbol-content .symbol-wrapper{margin:0}.wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"] }]
52
+ }], ctorParameters: function () { return []; }, propDecorators: { fullWidth: [{
53
+ type: HostBinding,
54
+ args: ['class.full-width']
55
+ }], buttonLabel: [{
56
+ type: Input
57
+ }], closable: [{
58
+ type: Input
59
+ }], title: [{
32
60
  type: Input
33
- }], text: [{
61
+ }], type: [{
34
62
  type: Input
35
- }], fitContent: [{
63
+ }], width: [{
36
64
  type: Input
65
+ }], buttonClicked: [{
66
+ type: Output
37
67
  }] } });
38
68
 
39
69
  /**
package/fesm2020/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 {\n agorapulseSymbol,\n AgorapulseUiSymbolModule, apAlertCircle,\n apAlertTriangle,\n apInformationCircle, apLike,\n SymbolRegistry\n} from '@agorapulse/ui-symbol';\nimport {NgClass} from '@angular/common';\nimport {ChangeDetectionStrategy, Component, Input} from '@angular/core';\n\n@Component({\n selector: 'ap-infobox',\n templateUrl: './infobox.component.html',\n styleUrls: ['./infobox.component.scss'],\n standalone: true,\n imports: [AgorapulseUiSymbolModule, NgClass],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InfoboxComponent {\n @Input() type: 'info' | 'warning' | 'error' | 'success' = 'info';\n @Input() text: string;\n @Input() fitContent: boolean = false;\n\n readonly symbolIds: {[k: string]: agorapulseSymbol} = {\n info: 'information-circle',\n warning: 'alert-triangle',\n error: 'alert-circle',\n success: 'like',\n };\n\n constructor(public symbolRegistry: SymbolRegistry) {\n this.symbolRegistry.registerSymbols([\n apInformationCircle,\n apAlertTriangle,\n apAlertCircle,\n apLike\n ]);\n }\n}\n","<div class=\"main\"\n [ngClass]=\"{'warning': type === 'warning', 'error': type === 'error', 'success': type === 'success'}\">\n <ap-symbol [symbolId]=\"symbolIds[type]\" size=\"micro\"></ap-symbol>\n <div>\n <ng-content></ng-content>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;MAkBa,gBAAgB,CAAA;AAYzB,IAAA,WAAA,CAAmB,cAA8B,EAAA;QAA9B,IAAc,CAAA,cAAA,GAAd,cAAc,CAAgB;QAXxC,IAAI,CAAA,IAAA,GAA6C,MAAM,CAAC;QAExD,IAAU,CAAA,UAAA,GAAY,KAAK,CAAC;AAE5B,QAAA,IAAA,CAAA,SAAS,GAAoC;AAClD,YAAA,IAAI,EAAE,oBAAoB;AAC1B,YAAA,OAAO,EAAE,gBAAgB;AACzB,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,OAAO,EAAE,MAAM;SAClB,CAAC;AAGE,QAAA,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC;YAChC,mBAAmB;YACnB,eAAe;YACf,aAAa;YACb,MAAM;AACT,SAAA,CAAC,CAAC;KACN;;6GAnBQ,gBAAgB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,cAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,gBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,EClB7B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,kRAOA,EDQc,MAAA,EAAA,CAAA,27LAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,wBAAwB,iKAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FAGlC,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;+BACI,YAAY,EAAA,UAAA,EAGV,IAAI,EAAA,OAAA,EACP,CAAC,wBAAwB,EAAE,OAAO,CAAC,EAAA,eAAA,EAC3B,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,kRAAA,EAAA,MAAA,EAAA,CAAA,27LAAA,CAAA,EAAA,CAAA;qGAGtC,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;;;AErBV;;AAEG;;;;"}
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 agorapulseSymbol,\n AgorapulseUiSymbolModule,\n apAlertCircle,\n apCheckCircle,\n apClose,\n apInformationCircle,\n apRemoveCircle,\n SymbolRegistry,\n} from '@agorapulse/ui-symbol';\nimport {NgClass, NgIf} from '@angular/common';\nimport {AfterViewInit, ElementRef, EventEmitter} from '@angular/core';\nimport {Output} from '@angular/core';\nimport {inject} from '@angular/core';\nimport {ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation} 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: [AgorapulseUiSymbolModule, NgClass, NgIf, ButtonComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class InfoboxComponent {\n private readonly CONTAINER_WIDTH_BREAKPOINT = 588;\n\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;\n @Input() closable: boolean = 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\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([\n apInformationCircle,\n apAlertCircle,\n apRemoveCircle,\n apCheckCircle,\n apClose,\n ]);\n }\n\n onClickButton(): void {\n this.buttonClicked.emit();\n }\n\n onCloseInfobox(): void {\n this.elementRef.nativeElement.remove();\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 <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol [symbolId]=\"symbolIds[type]\" class=\"status\" size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span *ngIf=\"title\" class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></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 class=\"closable-button\" (click)=\"onCloseInfobox()\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" 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":";;;;;;;MA4Ba,gBAAgB,CAAA;IAazB,IAAa,KAAK,CAAC,KAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AACpB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,KAAK,YAAY,CAAC;KAC3C;AACD,IAAA,IAAI,KAAK,GAAA;QACL,OAAO,IAAI,CAAC,MAAM,CAAC;KACtB;AAcD,IAAA,WAAA,GAAA;QAhCiB,IAA0B,CAAA,0BAAA,GAAG,GAAG,CAAC;AAEjC,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AACxC,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QAEhB,IAAS,CAAA,SAAA,GAAY,KAAK,CAAC;QAGnD,IAAQ,CAAA,QAAA,GAAY,KAAK,CAAC;QAE1B,IAAI,CAAA,IAAA,GAA6C,MAAM,CAAC;QASzD,IAAM,CAAA,MAAA,GAAiB,KAAK,CAAC;AAE3B,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAAQ,CAAC;QAEnD,IAAgB,CAAA,gBAAA,GAA8B,YAAY,CAAC;AAElD,QAAA,IAAA,CAAA,SAAS,GAAoC;AAClD,YAAA,IAAI,EAAE,oBAAoB;AAC1B,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,KAAK,EAAE,eAAe;AACtB,YAAA,OAAO,EAAE,cAAc;SAC1B,CAAC;AAGE,QAAA,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC;YAChC,mBAAmB;YACnB,aAAa;YACb,cAAc;YACd,aAAa;YACb,OAAO;AACV,SAAA,CAAC,CAAC;KACN;IAED,aAAa,GAAA;AACT,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC7B;IAED,cAAc,GAAA;AACV,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;KAC1C;;6GAjDQ,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,gBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,+RC5B7B,qnFA6CA,EAAA,MAAA,EAAA,CAAA,wnHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDrBc,wBAAwB,EAAW,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FAAE,eAAe,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,mBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAAA,OAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;2FAIzD,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAT5B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,cAGV,IAAI,EAAA,OAAA,EACP,CAAC,wBAAwB,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,CAAC,mBAClD,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,qnFAAA,EAAA,MAAA,EAAA,CAAA,wnHAAA,CAAA,EAAA,CAAA;0EAQJ,SAAS,EAAA,CAAA;sBAAzC,WAAW;uBAAC,kBAAkB,CAAA;gBAEtB,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAEO,KAAK,EAAA,CAAA;sBAAjB,KAAK;gBASI,aAAa,EAAA,CAAA;sBAAtB,MAAM;;;AElDX;;AAEG;;;;"}
package/infobox/infobox.component.d.ts CHANGED
@@ -1,14 +1,28 @@
1
- import { agorapulseSymbol, SymbolRegistry } from '@agorapulse/ui-symbol';
1
+ import { agorapulseSymbol } from '@agorapulse/ui-symbol';
2
+ import { EventEmitter } from '@angular/core';
2
3
  import * as i0 from "@angular/core";
4
+ export type InfoboxDirection = 'column' | 'row';
5
+ export type InfoboxWidth = 'fit' | 'full-width';
3
6
  export declare class InfoboxComponent {
4
- symbolRegistry: SymbolRegistry;
7
+ private readonly CONTAINER_WIDTH_BREAKPOINT;
8
+ private readonly symbolRegistry;
9
+ private readonly elementRef;
10
+ fullWidth: boolean;
11
+ buttonLabel: string;
12
+ closable: boolean;
13
+ title?: string;
5
14
  type: 'info' | 'warning' | 'error' | 'success';
6
- text: string;
7
- fitContent: boolean;
15
+ set width(width: InfoboxWidth);
16
+ get width(): InfoboxWidth;
17
+ private _width;
18
+ buttonClicked: EventEmitter<void>;
19
+ displayDirection: 'horizontal' | 'vertical';
8
20
  readonly symbolIds: {
9
21
  [k: string]: agorapulseSymbol;
10
22
  };
11
- constructor(symbolRegistry: SymbolRegistry);
23
+ constructor();
24
+ onClickButton(): void;
25
+ onCloseInfobox(): void;
12
26
  static ɵfac: i0.ɵɵFactoryDeclaration<InfoboxComponent, never>;
13
- static ɵcmp: i0.ɵɵComponentDeclaration<InfoboxComponent, "ap-infobox", never, { "type": "type"; "text": "text"; "fitContent": "fitContent"; }, {}, never, ["*"], true, never>;
27
+ static ɵcmp: i0.ɵɵComponentDeclaration<InfoboxComponent, "ap-infobox", never, { "buttonLabel": "buttonLabel"; "closable": "closable"; "title": "title"; "type": "type"; "width": "width"; }, { "buttonClicked": "buttonClicked"; }, never, ["*"], true, never>;
14
28
  }
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": "15.1.18",
4
+ "version": "15.1.19",
5
5
  "author": "Benoit Hediard",
6
6
  "repository": {
7
7
  "type": "git",