@agorapulse/ui-components 15.1.24 → 15.1.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/agorapulse-ui-components-15.1.25.tgz +0 -0
- package/esm2020/infobox/infobox.component.mjs +3 -3
- package/fesm2015/agorapulse-ui-components-infobox.mjs +2 -2
- package/fesm2015/agorapulse-ui-components-infobox.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-components-infobox.mjs +2 -2
- package/fesm2020/agorapulse-ui-components-infobox.mjs.map +1 -1
- package/package.json +1 -1
- package/agorapulse-ui-components-15.1.24.tgz +0 -0
|
Binary file
|
|
@@ -47,10 +47,10 @@ export class InfoboxComponent {
|
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
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 [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;container:infobox/inline-size;display:block}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items: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 .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){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"], dependencies: [{ kind: "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 });
|
|
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 [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;container:infobox/inline-size;display:block;width:100%;max-width:100%}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items: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 .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){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"], dependencies: [{ kind: "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 });
|
|
51
51
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: InfoboxComponent, decorators: [{
|
|
52
52
|
type: Component,
|
|
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 [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;container:infobox/inline-size;display:block}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items: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 .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){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"] }]
|
|
53
|
+
args: [{ selector: 'ap-infobox', standalone: true, imports: [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 [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;container:infobox/inline-size;display:block;width:100%;max-width:100%}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items: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 .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){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"] }]
|
|
54
54
|
}], ctorParameters: function () { return []; }, propDecorators: { fullWidth: [{
|
|
55
55
|
type: HostBinding,
|
|
56
56
|
args: ['class.full-width']
|
|
@@ -67,4 +67,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
|
|
|
67
67
|
}], buttonClicked: [{
|
|
68
68
|
type: Output
|
|
69
69
|
}] } });
|
|
70
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
70
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5mb2JveC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL3VpLWNvbXBvbmVudHMvaW5mb2JveC9zcmMvaW5mb2JveC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9saWJzL3VpLWNvbXBvbmVudHMvaW5mb2JveC9zcmMvaW5mb2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsZUFBZSxFQUFDLE1BQU0sa0NBQWtDLENBQUM7QUFDakUsT0FBTyxFQUVILHdCQUF3QixFQUN4QixhQUFhLEVBQ2IsYUFBYSxFQUNiLE9BQU8sRUFDUCxtQkFBbUIsRUFDbkIsY0FBYyxFQUNkLGNBQWMsR0FDakIsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLEVBQUMsT0FBTyxFQUFFLElBQUksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQzlDLE9BQU8sRUFBZ0IsVUFBVSxFQUFFLFlBQVksRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN0RSxPQUFPLEVBQUMsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3JDLE9BQU8sRUFBQyxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDckMsT0FBTyxFQUFDLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLGlCQUFpQixFQUFDLE1BQU0sZUFBZSxDQUFDOzs7QUFheEcsTUFBTSxPQUFPLGdCQUFnQjtJQWF6QixJQUFhLEtBQUssQ0FBQyxLQUFtQjtRQUNsQyxJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztRQUNwQixJQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssS0FBSyxZQUFZLENBQUM7SUFDNUMsQ0FBQztJQUNELElBQUksS0FBSztRQUNMLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUN2QixDQUFDO0lBY0Q7UUFoQ2lCLCtCQUEwQixHQUFHLEdBQUcsQ0FBQztRQUVqQyxtQkFBYyxHQUFHLE1BQU0sQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUN4QyxlQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBRWhCLGNBQVMsR0FBWSxLQUFLLENBQUM7UUFHbkQsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUUxQixTQUFJLEdBQTZDLE1BQU0sQ0FBQztRQVN6RCxXQUFNLEdBQWlCLEtBQUssQ0FBQztRQUUzQixrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFFbkQscUJBQWdCLEdBQThCLFlBQVksQ0FBQztRQUVsRCxjQUFTLEdBQW9DO1lBQ2xELElBQUksRUFBRSxvQkFBb0I7WUFDMUIsT0FBTyxFQUFFLGNBQWM7WUFDdkIsS0FBSyxFQUFFLGVBQWU7WUFDdEIsT0FBTyxFQUFFLGNBQWM7U0FDMUIsQ0FBQztRQUdFLElBQUksQ0FBQyxjQUFjLENBQUMsZUFBZSxDQUFDO1lBQ2hDLG1CQUFtQjtZQUNuQixhQUFhO1lBQ2IsY0FBYztZQUNkLGFBQWE7WUFDYixPQUFPO1NBQ1YsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVELGFBQWE7UUFDVCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzlCLENBQUM7SUFFRCxjQUFjO1FBQ1YsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsTUFBTSxFQUFFLENBQUM7SUFDM0MsQ0FBQzs7NkdBakRRLGdCQUFnQjtpR0FBaEIsZ0JBQWdCLCtSQzVCN0IsbzVGQTBEQSx1c0hEbENjLHdCQUF3QixpS0FBVyxJQUFJLDZGQUFFLGVBQWU7MkZBSXpELGdCQUFnQjtrQkFUNUIsU0FBUzsrQkFDSSxZQUFZLGNBR1YsSUFBSSxXQUNQLENBQUMsd0JBQXdCLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxlQUFlLENBQUMsbUJBQ2xELHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUk7MEVBUUosU0FBUztzQkFBekMsV0FBVzt1QkFBQyxrQkFBa0I7Z0JBRXRCLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUVPLEtBQUs7c0JBQWpCLEtBQUs7Z0JBU0ksYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7QnV0dG9uQ29tcG9uZW50fSBmcm9tICdAYWdvcmFwdWxzZS91aS1jb21wb25lbnRzL2J1dHRvbic7XG5pbXBvcnQge1xuICAgIGFnb3JhcHVsc2VTeW1ib2wsXG4gICAgQWdvcmFwdWxzZVVpU3ltYm9sTW9kdWxlLFxuICAgIGFwQWxlcnRDaXJjbGUsXG4gICAgYXBDaGVja0NpcmNsZSxcbiAgICBhcENsb3NlLFxuICAgIGFwSW5mb3JtYXRpb25DaXJjbGUsXG4gICAgYXBSZW1vdmVDaXJjbGUsXG4gICAgU3ltYm9sUmVnaXN0cnksXG59IGZyb20gJ0BhZ29yYXB1bHNlL3VpLXN5bWJvbCc7XG5pbXBvcnQge05nQ2xhc3MsIE5nSWZ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge0FmdGVyVmlld0luaXQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlcn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge091dHB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge2luamVjdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0NoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCwgVmlld0VuY2Fwc3VsYXRpb259IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuZXhwb3J0IHR5cGUgSW5mb2JveERpcmVjdGlvbiA9ICdjb2x1bW4nIHwgJ3Jvdyc7XG5leHBvcnQgdHlwZSBJbmZvYm94V2lkdGggPSAnZml0JyB8ICdmdWxsLXdpZHRoJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdhcC1pbmZvYm94JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vaW5mb2JveC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vaW5mb2JveC5jb21wb25lbnQuc2NzcyddLFxuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgaW1wb3J0czogW0Fnb3JhcHVsc2VVaVN5bWJvbE1vZHVsZSwgTmdDbGFzcywgTmdJZiwgQnV0dG9uQ29tcG9uZW50XSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBJbmZvYm94Q29tcG9uZW50IHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IENPTlRBSU5FUl9XSURUSF9CUkVBS1BPSU5UID0gNTg4O1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBzeW1ib2xSZWdpc3RyeSA9IGluamVjdChTeW1ib2xSZWdpc3RyeSk7XG4gICAgcHJpdmF0ZSByZWFkb25seSBlbGVtZW50UmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5mdWxsLXdpZHRoJykgZnVsbFdpZHRoOiBib29sZWFuID0gZmFsc2U7XG5cbiAgICBASW5wdXQoKSBidXR0b25MYWJlbDogc3RyaW5nO1xuICAgIEBJbnB1dCgpIGNsb3NhYmxlOiBib29sZWFuID0gZmFsc2U7XG4gICAgQElucHV0KCkgdGl0bGU/OiBzdHJpbmc7XG4gICAgQElucHV0KCkgdHlwZTogJ2luZm8nIHwgJ3dhcm5pbmcnIHwgJ2Vycm9yJyB8ICdzdWNjZXNzJyA9ICdpbmZvJztcblxuICAgIEBJbnB1dCgpIHNldCB3aWR0aCh3aWR0aDogSW5mb2JveFdpZHRoKSB7XG4gICAgICAgIHRoaXMuX3dpZHRoID0gd2lkdGg7XG4gICAgICAgIHRoaXMuZnVsbFdpZHRoID0gd2lkdGggPT09ICdmdWxsLXdpZHRoJztcbiAgICB9XG4gICAgZ2V0IHdpZHRoKCk6IEluZm9ib3hXaWR0aCB7XG4gICAgICAgIHJldHVybiB0aGlzLl93aWR0aDtcbiAgICB9XG4gICAgcHJpdmF0ZSBfd2lkdGg6IEluZm9ib3hXaWR0aCA9ICdmaXQnO1xuXG4gICAgQE91dHB1dCgpIGJ1dHRvbkNsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgICBkaXNwbGF5RGlyZWN0aW9uOiAnaG9yaXpvbnRhbCcgfCAndmVydGljYWwnID0gJ2hvcml6b250YWwnO1xuXG4gICAgcmVhZG9ubHkgc3ltYm9sSWRzOiB7W2s6IHN0cmluZ106IGFnb3JhcHVsc2VTeW1ib2x9ID0ge1xuICAgICAgICBpbmZvOiAnaW5mb3JtYXRpb24tY2lyY2xlJyxcbiAgICAgICAgd2FybmluZzogJ2FsZXJ0LWNpcmNsZScsXG4gICAgICAgIGVycm9yOiAncmVtb3ZlLWNpcmNsZScsXG4gICAgICAgIHN1Y2Nlc3M6ICdjaGVjay1jaXJjbGUnLFxuICAgIH07XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgdGhpcy5zeW1ib2xSZWdpc3RyeS5yZWdpc3RlclN5bWJvbHMoW1xuICAgICAgICAgICAgYXBJbmZvcm1hdGlvbkNpcmNsZSxcbiAgICAgICAgICAgIGFwQWxlcnRDaXJjbGUsXG4gICAgICAgICAgICBhcFJlbW92ZUNpcmNsZSxcbiAgICAgICAgICAgIGFwQ2hlY2tDaXJjbGUsXG4gICAgICAgICAgICBhcENsb3NlLFxuICAgICAgICBdKTtcbiAgICB9XG5cbiAgICBvbkNsaWNrQnV0dG9uKCk6IHZvaWQge1xuICAgICAgICB0aGlzLmJ1dHRvbkNsaWNrZWQuZW1pdCgpO1xuICAgIH1cblxuICAgIG9uQ2xvc2VJbmZvYm94KCk6IHZvaWQge1xuICAgICAgICB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5yZW1vdmUoKTtcbiAgICB9XG59XG4iLCI8ZGl2XG4gICAgY2xhc3M9XCJtYWluXCJcbiAgICBbY2xhc3MuaW5mb109XCJ0eXBlID09PSAnaW5mbydcIlxuICAgIFtjbGFzcy53YXJuaW5nXT1cInR5cGUgPT09ICd3YXJuaW5nJ1wiXG4gICAgW2NsYXNzLmVycm9yXT1cInR5cGUgPT09ICdlcnJvcidcIlxuICAgIFtjbGFzcy5zdWNjZXNzXT1cInR5cGUgPT09ICdzdWNjZXNzJ1wiXG4gICAgW2NsYXNzLmhhcy10aXRsZV09XCIhIXRpdGxlXCI+XG4gICAgPGRpdiBjbGFzcz1cInN0YXR1cy1iYW5uZXJcIj48L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwid3JhcHBlclwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwic3ltYm9sLWNvbnRlbnRcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzeW1ib2wtd3JhcHBlclwiPlxuICAgICAgICAgICAgICAgIDxhcC1zeW1ib2xcbiAgICAgICAgICAgICAgICAgICAgW3N5bWJvbElkXT1cInN5bWJvbElkc1t0eXBlXVwiXG4gICAgICAgICAgICAgICAgICAgIGNsYXNzPVwic3RhdHVzXCJcbiAgICAgICAgICAgICAgICAgICAgc2l6ZT1cIm1pY3JvXCI+PC9hcC1zeW1ib2w+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjb250ZW50XCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInRleHRzXCI+XG4gICAgICAgICAgICAgICAgICAgIDxzcGFuXG4gICAgICAgICAgICAgICAgICAgICAgICAqbmdJZj1cInRpdGxlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGl0bGVcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIHt7IHRpdGxlIH19XG4gICAgICAgICAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJ0ZXh0XCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICAgICAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiYnV0dG9uTGFiZWxcIj5cbiAgICAgICAgICAgICAgICAgICAgPGFwLWJ1dHRvblxuICAgICAgICAgICAgICAgICAgICAgICAgbmFtZT1cImluZm9ib3gtYnV0dG9uXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtjb25maWddPVwie1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHN0eWxlOiAnc3Ryb2tlZCcsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgY29sb3I6ICdncmV5J1xuICAgICAgICAgICAgICAgICAgICAgICAgfVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwib25DbGlja0J1dHRvbigpXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICB7eyBidXR0b25MYWJlbCB9fVxuICAgICAgICAgICAgICAgICAgICA8L2FwLWJ1dHRvbj5cbiAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImNsb3NhYmxlXCI+XG4gICAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJjbG9zYWJsZS1idXR0b25cIlxuICAgICAgICAgICAgICAgIChjbGljayk9XCJvbkNsb3NlSW5mb2JveCgpXCI+XG4gICAgICAgICAgICAgICAgPHN2Z1xuICAgICAgICAgICAgICAgICAgICB3aWR0aD1cIjhcIlxuICAgICAgICAgICAgICAgICAgICBoZWlnaHQ9XCI4XCJcbiAgICAgICAgICAgICAgICAgICAgdmlld0JveD1cIjAgMCA4IDhcIlxuICAgICAgICAgICAgICAgICAgICBmaWxsPVwibm9uZVwiXG4gICAgICAgICAgICAgICAgICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIj5cbiAgICAgICAgICAgICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgICAgICAgICAgICAgIGQ9XCJNNy4zMjQ1IDAuNjczMzM2QzcuMTY1MTggMC41MTQ1NjUgNi45NDk0MyAwLjQyNTQxNSA2LjcyNDUgMC40MjU0MTVDNi40OTk1OCAwLjQyNTQxNSA2LjI4MzgzIDAuNTE0NTY1IDYuMTI0NTEgMC42NzMzMzZMNC4wMDY1MSAyLjc5MTM0TDEuODg1ODQgMC42NzMzMzZDMS43MjQ5OSAwLjUxOTYwNyAxLjUxMDM2IDAuNDM0OTU1IDEuMjg3ODggMC40Mzc1MDFDMS4wNjU0IDAuNDQwMDQ4IDAuODUyNzU2IDAuNTI5NTkxIDAuNjk1NDcyIDAuNjg2OTYyQzAuNTM4MTg5IDAuODQ0MzMzIDAuNDQ4NzYzIDEuMDU3MDIgMC40NDYzNCAxLjI3OTUxQzAuNDQzOTE2IDEuNTAxOTkgMC41Mjg2ODcgMS43MTY1OCAwLjY4MjUwNSAxLjg3NzM0TDIuNzk5ODQgMy45OTUzNEwwLjY4MjUwNSA2LjExNEMwLjUyODY4NyA2LjI3NDc2IDAuNDQzOTE2IDYuNDg5MzUgMC40NDYzNCA2LjcxMTgzQzAuNDQ4NzYzIDYuOTM0MzEgMC41MzgxODkgNy4xNDcgMC42OTU0NzIgNy4zMDQzOEMwLjg1Mjc1NiA3LjQ2MTc1IDEuMDY1NCA3LjU1MTI5IDEuMjg3ODggNy41NTM4NEMxLjUxMDM2IDcuNTU2MzggMS43MjQ5OSA3LjQ3MTczIDEuODg1ODQgNy4zMThMNC4wMDMxNyA1LjJMNi4xMjExNyA3LjMxODY3QzYuMjgzNjQgNy40NjMwNyA2LjQ5NTIgNy41Mzk4NiA2LjcxMjQ3IDcuNTMzMjlDNi45Mjk3NCA3LjUyNjcxIDcuMTM2MjcgNy40MzcyOCA3LjI4OTcyIDcuMjgzMzJDNy40NDMxNiA3LjEyOTM2IDcuNTMxOTEgNi45MjI1NCA3LjUzNzc2IDYuNzA1MjVDNy41NDM2IDYuNDg3OTYgNy40NjYxMSA2LjI3NjY2IDcuMzIxMTcgNi4xMTQ2N0w1LjIwMzg0IDMuOTk2TDcuMzIxMTcgMS44NzhDNy40ODEzMiAxLjcxODY3IDcuNTcxNjQgMS41MDIyNiA3LjU3MjI2IDEuMjc2MzZDNy41NzI4OSAxLjA1MDQ1IDcuNDgzNzcgMC44MzM1NDggNy4zMjQ1IDAuNjczMzM2WlwiXG4gICAgICAgICAgICAgICAgICAgICAgICBmaWxsPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgICAgICAgICAgICA8L3N2Zz5cbiAgICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -45,10 +45,10 @@ class InfoboxComponent {
|
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
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 [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;container:infobox/inline-size;display:block}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items: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 .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){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"], dependencies: [{ kind: "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 });
|
|
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 [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;container:infobox/inline-size;display:block;width:100%;max-width:100%}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items: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 .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){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"], dependencies: [{ kind: "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 });
|
|
49
49
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: InfoboxComponent, decorators: [{
|
|
50
50
|
type: Component,
|
|
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 [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;container:infobox/inline-size;display:block}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items: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 .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){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"] }]
|
|
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 [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;container:infobox/inline-size;display:block;width:100%;max-width:100%}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items: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 .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){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"] }]
|
|
52
52
|
}], ctorParameters: function () { return []; }, propDecorators: { fullWidth: [{
|
|
53
53
|
type: HostBinding,
|
|
54
54
|
args: ['class.full-width']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-infobox.mjs","sources":["../../../libs/ui-components/infobox/src/infobox.component.ts","../../../libs/ui-components/infobox/src/infobox.component.html","../../../libs/ui-components/infobox/src/agorapulse-ui-components-infobox.ts"],"sourcesContent":["import {ButtonComponent} from '@agorapulse/ui-components/button';\nimport {\n 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 [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;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,o5FA0DA,EAAA,MAAA,EAAA,CAAA,
|
|
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 [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -45,10 +45,10 @@ class InfoboxComponent {
|
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
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 [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;container:infobox/inline-size;display:block}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items: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 .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){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"], dependencies: [{ kind: "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 });
|
|
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 [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;container:infobox/inline-size;display:block;width:100%;max-width:100%}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items: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 .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){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"], dependencies: [{ kind: "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 });
|
|
49
49
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: InfoboxComponent, decorators: [{
|
|
50
50
|
type: Component,
|
|
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 [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;container:infobox/inline-size;display:block}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items: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 .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){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"] }]
|
|
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 [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;container:infobox/inline-size;display:block;width:100%;max-width:100%}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items: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 .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){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"] }]
|
|
52
52
|
}], ctorParameters: function () { return []; }, propDecorators: { fullWidth: [{
|
|
53
53
|
type: HostBinding,
|
|
54
54
|
args: ['class.full-width']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-infobox.mjs","sources":["../../../libs/ui-components/infobox/src/infobox.component.ts","../../../libs/ui-components/infobox/src/infobox.component.html","../../../libs/ui-components/infobox/src/agorapulse-ui-components-infobox.ts"],"sourcesContent":["import {ButtonComponent} from '@agorapulse/ui-components/button';\nimport {\n 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 [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;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,o5FA0DA,EAAA,MAAA,EAAA,CAAA,
|
|
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 [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n [symbolId]=\"symbolIds[type]\"\n class=\"status\"\n size=\"micro\"></ap-symbol>\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content></ng-content>\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
Binary file
|