@leanix/components 0.4.792 → 0.4.794
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.
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, Input, Component,
|
|
2
|
+
import { InjectionToken, Input, Component, input, computed, ChangeDetectionStrategy, HostBinding, EventEmitter, HostListener, Output, Injectable, ElementRef, ViewChild, Inject, model, Directive, signal, Optional, Pipe, inject, NgModule, output, DestroyRef, ChangeDetectorRef, effect, ContentChild, afterRenderEffect, ContentChildren, ViewChildren, forwardRef, TemplateRef, viewChild, booleanAttribute, SecurityContext, Self, Host, Injector, ApplicationRef, createComponent } from '@angular/core';
|
|
3
3
|
import * as i1 from '@ngx-translate/core';
|
|
4
4
|
import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
|
|
5
|
+
import { IconComponent as IconComponent$1 } from '@ui5/webcomponents-ngx/main/icon';
|
|
5
6
|
import { NgTemplateOutlet, NgClass, AsyncPipe, UpperCasePipe, DecimalPipe, CommonModule, formatDate } from '@angular/common';
|
|
6
7
|
import { BusyIndicatorComponent } from '@ui5/webcomponents-ngx/main/busy-indicator';
|
|
7
|
-
import { IconComponent as IconComponent$1 } from '@ui5/webcomponents-ngx/main/icon';
|
|
8
8
|
import { __decorate } from 'tslib';
|
|
9
9
|
import { escape, trimEnd, sortBy, get, isEqual as isEqual$1, toLower, some, padCharsStart, toString, toNumber, isNaN as isNaN$1, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId as uniqueId$1 } from 'lodash/fp';
|
|
10
10
|
import * as i5 from 'rxjs';
|
|
@@ -112,8 +112,7 @@ const BANNER_TYPE = {
|
|
|
112
112
|
SUCCESS: 'success',
|
|
113
113
|
INFO: 'info',
|
|
114
114
|
WARNING: 'warning',
|
|
115
|
-
DANGER: 'danger'
|
|
116
|
-
GRAY: 'gray'
|
|
115
|
+
DANGER: 'danger'
|
|
117
116
|
};
|
|
118
117
|
const BANNER_SIZE = {
|
|
119
118
|
BIG: 'big',
|
|
@@ -125,65 +124,56 @@ const BANNER_SIZE = {
|
|
|
125
124
|
*/
|
|
126
125
|
class BannerComponent {
|
|
127
126
|
constructor() {
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
this.
|
|
132
|
-
/**
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
this._type.set(type);
|
|
140
|
-
this.iconClass.set(this.getIconClass(type));
|
|
141
|
-
}
|
|
142
|
-
get type() {
|
|
143
|
-
return this._type();
|
|
144
|
-
}
|
|
145
|
-
/**
|
|
146
|
-
* The size of the banner
|
|
147
|
-
*/
|
|
148
|
-
set size(size) {
|
|
149
|
-
this._size.set(size);
|
|
150
|
-
this.showIcon.set(size === BANNER_SIZE.BIG);
|
|
151
|
-
}
|
|
152
|
-
get size() {
|
|
153
|
-
return this._size();
|
|
127
|
+
/**
|
|
128
|
+
* The type of the banner
|
|
129
|
+
*/
|
|
130
|
+
this.type = input(BANNER_TYPE.WARNING);
|
|
131
|
+
/**
|
|
132
|
+
* The size of the banner
|
|
133
|
+
*/
|
|
134
|
+
this.size = input(BANNER_SIZE.BIG);
|
|
135
|
+
this.showIcon = computed(() => this.size() === BANNER_SIZE.BIG);
|
|
136
|
+
this.iconName = computed(() => this.getIconName(this.type()));
|
|
137
|
+
this.iconDesign = computed(() => this.getIconDesign(this.type()));
|
|
154
138
|
}
|
|
155
|
-
|
|
156
|
-
|
|
139
|
+
getIconName(type) {
|
|
140
|
+
switch (type) {
|
|
141
|
+
case BANNER_TYPE.SUCCESS:
|
|
142
|
+
return 'sys-enter-2';
|
|
143
|
+
case BANNER_TYPE.INFO:
|
|
144
|
+
return 'information';
|
|
145
|
+
case BANNER_TYPE.WARNING:
|
|
146
|
+
return 'alert';
|
|
147
|
+
case BANNER_TYPE.DANGER:
|
|
148
|
+
return 'error';
|
|
149
|
+
default:
|
|
150
|
+
return 'information';
|
|
151
|
+
}
|
|
157
152
|
}
|
|
158
|
-
|
|
159
|
-
getIconClass(type) {
|
|
153
|
+
getIconDesign(type) {
|
|
160
154
|
switch (type) {
|
|
161
155
|
case BANNER_TYPE.SUCCESS:
|
|
162
|
-
return '
|
|
156
|
+
return 'Positive';
|
|
163
157
|
case BANNER_TYPE.INFO:
|
|
164
|
-
return '
|
|
158
|
+
return 'Information';
|
|
165
159
|
case BANNER_TYPE.WARNING:
|
|
166
|
-
return '
|
|
160
|
+
return 'Critical';
|
|
167
161
|
case BANNER_TYPE.DANGER:
|
|
168
|
-
return '
|
|
162
|
+
return 'Negative';
|
|
169
163
|
default:
|
|
170
|
-
return '
|
|
164
|
+
return 'Information';
|
|
171
165
|
}
|
|
172
166
|
}
|
|
173
167
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
174
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: BannerComponent, isStandalone: true, selector: "lx-banner", inputs: { type: "type", size: "size" }, host: { properties: { "attr.type": "type", "attr.size": "size" } }, ngImport: i0, template: "<div class=\"banner-wrapper\">\n @if (showIcon()) {\n <
|
|
168
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: BannerComponent, isStandalone: true, selector: "lx-banner", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.type": "type()", "attr.size": "size()" } }, ngImport: i0, template: "<div class=\"banner-wrapper\">\n @if (showIcon()) {\n <ui5-icon [name]=\"iconName()\" [design]=\"iconDesign()\" />\n }\n <div class=\"banner-content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;border-left:2px solid}:host[type=success]{background-color:color-mix(in srgb,#33cc58 10%,white);border-color:#33cc58}:host[type=info]{background-color:color-mix(in srgb,#2889ff 10%,white);border-color:#2889ff}:host[type=warning]{background-color:color-mix(in srgb,#ffb62a 10%,white);border-color:#ffb62a}:host[type=danger]{background-color:color-mix(in srgb,#f96464 10%,white);border-color:#f96464}:host[size=big]{margin-bottom:12px}:host[size=big] .banner-wrapper{position:relative;padding:.75rem}:host[size=big] .banner-content{padding-left:2rem}:host[size=big] ui5-icon{position:absolute;top:.875rem;left:.75rem}:host[size=small]{margin-bottom:6px}:host[size=small] .banner-wrapper{padding:.5rem}:host ::ng-deep .banner-content h4{margin-top:0;color:inherit}:host ::ng-deep .banner-content .alert-link{font-weight:700}:host ::ng-deep .banner-content>p,:host ::ng-deep .banner-content>ul{margin-bottom:0}:host ::ng-deep .banner-content p+p{margin-bottom:5px}:host ::ng-deep .banner-content p:last-child{margin-bottom:0}\n"], dependencies: [{ kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
175
169
|
}
|
|
176
170
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BannerComponent, decorators: [{
|
|
177
171
|
type: Component,
|
|
178
|
-
args: [{ selector: 'lx-banner', host: {
|
|
179
|
-
'[attr.type]': 'type',
|
|
180
|
-
'[attr.size]': 'size'
|
|
181
|
-
},
|
|
182
|
-
}]
|
|
183
|
-
type: Input
|
|
184
|
-
}], size: [{
|
|
185
|
-
type: Input
|
|
186
|
-
}] } });
|
|
172
|
+
args: [{ selector: 'lx-banner', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
173
|
+
'[attr.type]': 'type()',
|
|
174
|
+
'[attr.size]': 'size()'
|
|
175
|
+
}, imports: [IconComponent$1], template: "<div class=\"banner-wrapper\">\n @if (showIcon()) {\n <ui5-icon [name]=\"iconName()\" [design]=\"iconDesign()\" />\n }\n <div class=\"banner-content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;border-left:2px solid}:host[type=success]{background-color:color-mix(in srgb,#33cc58 10%,white);border-color:#33cc58}:host[type=info]{background-color:color-mix(in srgb,#2889ff 10%,white);border-color:#2889ff}:host[type=warning]{background-color:color-mix(in srgb,#ffb62a 10%,white);border-color:#ffb62a}:host[type=danger]{background-color:color-mix(in srgb,#f96464 10%,white);border-color:#f96464}:host[size=big]{margin-bottom:12px}:host[size=big] .banner-wrapper{position:relative;padding:.75rem}:host[size=big] .banner-content{padding-left:2rem}:host[size=big] ui5-icon{position:absolute;top:.875rem;left:.75rem}:host[size=small]{margin-bottom:6px}:host[size=small] .banner-wrapper{padding:.5rem}:host ::ng-deep .banner-content h4{margin-top:0;color:inherit}:host ::ng-deep .banner-content .alert-link{font-weight:700}:host ::ng-deep .banner-content>p,:host ::ng-deep .banner-content>ul{margin-bottom:0}:host ::ng-deep .banner-content p+p{margin-bottom:5px}:host ::ng-deep .banner-content p:last-child{margin-bottom:0}\n"] }]
|
|
176
|
+
}] });
|
|
187
177
|
|
|
188
178
|
class ButtonGroupComponent {
|
|
189
179
|
constructor() {
|
|
@@ -2397,6 +2387,7 @@ class LxCoreUiModule {
|
|
|
2397
2387
|
UnescapeCurlyBracesPipe,
|
|
2398
2388
|
EmptyStateComponent] }); }
|
|
2399
2389
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: LxCoreUiModule, providers: [LxTimeAgo], imports: [TranslateModule.forChild(),
|
|
2390
|
+
BannerComponent,
|
|
2400
2391
|
ButtonComponent,
|
|
2401
2392
|
CollapsibleComponent,
|
|
2402
2393
|
EllipsisComponent,
|