@smartbit4all/ng-client 6.0.24 → 6.0.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/esm2022/lib/view-context/smart-ui-action/ui-action-button/ui-action-button.component.mjs +80 -77
- package/fesm2022/smartbit4all-ng-client.mjs +78 -75
- package/fesm2022/smartbit4all-ng-client.mjs.map +1 -1
- package/lib/view-context/smart-ui-action/ui-action-button/ui-action-button.component.d.ts +12 -14
- package/package.json +1 -1
- package/smartbit4all-ng-client-6.0.25.tgz +0 -0
- package/smartbit4all-ng-client-6.0.24.tgz +0 -0
|
@@ -3375,43 +3375,52 @@ class UiActionButtonComponent {
|
|
|
3375
3375
|
constructor(changeDetector, compLib) {
|
|
3376
3376
|
this.changeDetector = changeDetector;
|
|
3377
3377
|
this._destroy$ = new Subject();
|
|
3378
|
-
|
|
3378
|
+
// --- Signal inputs (replace @Input()) ---
|
|
3379
|
+
this.disabled = input();
|
|
3380
|
+
this.descriptor = input.required();
|
|
3381
|
+
this.code = input();
|
|
3382
|
+
/**
|
|
3383
|
+
* Server-computed three-state view-activation flag (null = not an opener, false = inactive, true =
|
|
3384
|
+
* active), mapped to sb4-view-opener/-activated/-not-activated classes. Client never writes it.
|
|
3385
|
+
*/
|
|
3386
|
+
this.viewActivated = input();
|
|
3387
|
+
this.addedCssClass = input();
|
|
3388
|
+
this.addBasicClasses = input(true);
|
|
3389
|
+
this.iconPlaceholder = input();
|
|
3379
3390
|
this.actionClick = new EventEmitter();
|
|
3380
3391
|
this.actionDoubleClick = new EventEmitter();
|
|
3381
3392
|
this.componentLibrary = ComponentLibrary;
|
|
3382
3393
|
this.pressedButtonActive = true;
|
|
3383
3394
|
this.menuOpened = false;
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
|
|
3389
|
-
|
|
3390
|
-
|
|
3391
|
-
|
|
3392
|
-
|
|
3393
|
-
|
|
3394
|
-
|
|
3395
|
-
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
|
|
3403
|
-
|
|
3404
|
-
|
|
3405
|
-
|
|
3406
|
-
buildMainActionModel() {
|
|
3407
|
-
this.mainActionModel = {
|
|
3408
|
-
descriptor: this.descriptor,
|
|
3395
|
+
// Merges caller-supplied descriptor with defaults. Was done by mutating this.descriptor
|
|
3396
|
+
// in ngOnInit; descriptor is now a read-only input, so it's derived instead.
|
|
3397
|
+
this.effectiveDescriptor = computed(() => {
|
|
3398
|
+
const descriptor = this.descriptor();
|
|
3399
|
+
const code = this.code();
|
|
3400
|
+
const defaults = {
|
|
3401
|
+
title: code ?? 'UNDEFINED_BUTTON',
|
|
3402
|
+
color: 'primary',
|
|
3403
|
+
type: UiActionButtonType.NORMAL,
|
|
3404
|
+
};
|
|
3405
|
+
return {
|
|
3406
|
+
...defaults,
|
|
3407
|
+
...descriptor,
|
|
3408
|
+
title: descriptor?.title ?? defaults.title,
|
|
3409
|
+
color: descriptor?.color ?? defaults.color,
|
|
3410
|
+
type: descriptor?.type ?? defaults.type,
|
|
3411
|
+
};
|
|
3412
|
+
});
|
|
3413
|
+
// Was built once in ngOnInit / rebuilt in ngOnChanges; now recomputed whenever any
|
|
3414
|
+
// dependency signal changes.
|
|
3415
|
+
this.mainActionModel = computed(() => ({
|
|
3416
|
+
descriptor: this.effectiveDescriptor(),
|
|
3409
3417
|
uiAction: {
|
|
3410
|
-
descriptor: this.
|
|
3411
|
-
code: this.code,
|
|
3412
|
-
disabled: this.disabled ?? false,
|
|
3418
|
+
descriptor: this.effectiveDescriptor(),
|
|
3419
|
+
code: this.code(),
|
|
3420
|
+
disabled: this.disabled() ?? false,
|
|
3413
3421
|
},
|
|
3414
|
-
};
|
|
3422
|
+
}));
|
|
3423
|
+
this.compLib = compLib ?? ComponentLibrary.PRIMENG;
|
|
3415
3424
|
}
|
|
3416
3425
|
ngOnDestroy() {
|
|
3417
3426
|
this._destroy$.next();
|
|
@@ -3427,33 +3436,35 @@ class UiActionButtonComponent {
|
|
|
3427
3436
|
onActionDoubleClicked(event) {
|
|
3428
3437
|
this.actionDoubleClick.emit({
|
|
3429
3438
|
event,
|
|
3430
|
-
code: this.code,
|
|
3431
|
-
descriptor: this.
|
|
3439
|
+
code: this.code(),
|
|
3440
|
+
descriptor: this.effectiveDescriptor(),
|
|
3432
3441
|
});
|
|
3433
3442
|
}
|
|
3434
3443
|
iconPosition() {
|
|
3435
3444
|
return IconPosition;
|
|
3436
3445
|
}
|
|
3437
3446
|
isOnlyIcon() {
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3447
|
+
const type = this.effectiveDescriptor()?.type;
|
|
3448
|
+
return (type === UiActionButtonType.ICON ||
|
|
3449
|
+
type === UiActionButtonType.MINI_FAB ||
|
|
3450
|
+
type === UiActionButtonType.FAB);
|
|
3441
3451
|
}
|
|
3442
3452
|
getbtnClass() {
|
|
3443
|
-
if (!this.addBasicClasses) {
|
|
3453
|
+
if (!this.addBasicClasses()) {
|
|
3444
3454
|
return '';
|
|
3445
3455
|
}
|
|
3446
|
-
|
|
3447
|
-
|
|
3456
|
+
const color = this.effectiveDescriptor().color;
|
|
3457
|
+
if (color) {
|
|
3458
|
+
return 'p-button-' + color + ' sb4-' + color;
|
|
3448
3459
|
}
|
|
3449
3460
|
return '';
|
|
3450
3461
|
}
|
|
3451
3462
|
getType() {
|
|
3452
|
-
if (!this.addBasicClasses) {
|
|
3463
|
+
if (!this.addBasicClasses()) {
|
|
3453
3464
|
return '';
|
|
3454
3465
|
}
|
|
3455
3466
|
if (this.compLib === ComponentLibrary.PRIMENG) {
|
|
3456
|
-
switch (this.
|
|
3467
|
+
switch (this.effectiveDescriptor().type) {
|
|
3457
3468
|
case UiActionButtonType.NORMAL:
|
|
3458
3469
|
return {
|
|
3459
3470
|
'sb4-normal': true,
|
|
@@ -3510,7 +3521,7 @@ class UiActionButtonComponent {
|
|
|
3510
3521
|
}
|
|
3511
3522
|
}
|
|
3512
3523
|
else {
|
|
3513
|
-
switch (this.
|
|
3524
|
+
switch (this.effectiveDescriptor().type) {
|
|
3514
3525
|
case UiActionButtonType.NORMAL:
|
|
3515
3526
|
return 'mat-mdc-button sb4-normal';
|
|
3516
3527
|
case UiActionButtonType.FLAT:
|
|
@@ -3538,50 +3549,56 @@ class UiActionButtonComponent {
|
|
|
3538
3549
|
}
|
|
3539
3550
|
getCombinedClasses() {
|
|
3540
3551
|
const typeClasses = this.getType();
|
|
3541
|
-
const styleClasses = this.calcClasses(this.
|
|
3552
|
+
const styleClasses = this.calcClasses(this.effectiveDescriptor().style);
|
|
3542
3553
|
// Normalize typeClasses to object
|
|
3543
3554
|
const typeObj = typeof typeClasses === 'string'
|
|
3544
3555
|
? typeClasses.split(' ').reduce((acc, cls) => ({ ...acc, [cls]: true }), {})
|
|
3545
3556
|
: typeClasses;
|
|
3546
3557
|
// View-activation classes, orthogonal to the descriptor.type look classes above.
|
|
3547
|
-
const
|
|
3558
|
+
const viewActivated = this.viewActivated();
|
|
3559
|
+
const isOpener = viewActivated !== null && viewActivated !== undefined;
|
|
3548
3560
|
const activationClasses = {
|
|
3549
3561
|
'sb4-view-opener': isOpener,
|
|
3550
|
-
'sb4-view-activated':
|
|
3551
|
-
'sb4-view-not-activated':
|
|
3562
|
+
'sb4-view-activated': viewActivated === true,
|
|
3563
|
+
'sb4-view-not-activated': viewActivated === false,
|
|
3552
3564
|
};
|
|
3553
3565
|
return { ...typeObj, ...styleClasses, ...activationClasses };
|
|
3554
3566
|
}
|
|
3555
3567
|
renderPre() {
|
|
3556
|
-
|
|
3557
|
-
|
|
3568
|
+
const descriptor = this.effectiveDescriptor();
|
|
3569
|
+
return (descriptor.iconPosition === IconPosition.PRE &&
|
|
3570
|
+
(descriptor.icon != null || descriptor.iconResource != null));
|
|
3558
3571
|
}
|
|
3559
3572
|
renderPost() {
|
|
3560
|
-
|
|
3561
|
-
|
|
3573
|
+
const descriptor = this.effectiveDescriptor();
|
|
3574
|
+
return (descriptor.iconPosition === IconPosition.POST &&
|
|
3575
|
+
(descriptor.icon != null || descriptor.iconResource != null));
|
|
3562
3576
|
}
|
|
3563
3577
|
getColor() {
|
|
3564
|
-
return this.
|
|
3578
|
+
return this.effectiveDescriptor()?.color || 'text';
|
|
3565
3579
|
}
|
|
3566
3580
|
renderPlaceholderPre() {
|
|
3567
|
-
|
|
3568
|
-
|
|
3581
|
+
const iconPlaceholder = this.iconPlaceholder();
|
|
3582
|
+
return (iconPlaceholder === ButtonIconPlaceholder.PRE ||
|
|
3583
|
+
iconPlaceholder === ButtonIconPlaceholder.BOTH);
|
|
3569
3584
|
}
|
|
3570
3585
|
renderPlaceholderPost() {
|
|
3571
|
-
|
|
3572
|
-
|
|
3586
|
+
const iconPlaceholder = this.iconPlaceholder();
|
|
3587
|
+
return (iconPlaceholder === ButtonIconPlaceholder.POST ||
|
|
3588
|
+
iconPlaceholder === ButtonIconPlaceholder.BOTH);
|
|
3573
3589
|
}
|
|
3574
3590
|
getJustifyContent() {
|
|
3575
|
-
|
|
3591
|
+
const iconPlaceholder = this.iconPlaceholder();
|
|
3592
|
+
if (!iconPlaceholder) {
|
|
3576
3593
|
return null;
|
|
3577
3594
|
}
|
|
3578
|
-
if (
|
|
3595
|
+
if (iconPlaceholder === ButtonIconPlaceholder.BOTH) {
|
|
3579
3596
|
return 'center';
|
|
3580
3597
|
}
|
|
3581
|
-
if (
|
|
3598
|
+
if (iconPlaceholder === ButtonIconPlaceholder.PRE) {
|
|
3582
3599
|
return 'flex-start';
|
|
3583
3600
|
}
|
|
3584
|
-
if (
|
|
3601
|
+
if (iconPlaceholder === ButtonIconPlaceholder.POST) {
|
|
3585
3602
|
return 'flex-end';
|
|
3586
3603
|
}
|
|
3587
3604
|
return null;
|
|
@@ -3590,31 +3607,17 @@ class UiActionButtonComponent {
|
|
|
3590
3607
|
return 'rgb(from var(--' + this.getColor() + '-color) r g b / 0.8)';
|
|
3591
3608
|
}
|
|
3592
3609
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: COMPONENT_LIBRARY, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3593
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UiActionButtonComponent, selector: "ui-action-button", inputs: { disabled: "disabled", descriptor: "descriptor", code: "code", viewActivated: "viewActivated", addedCssClass: "addedCssClass", addBasicClasses: "addBasicClasses", iconPlaceholder: "iconPlaceholder" }, outputs: { actionClick: "actionClick", actionDoubleClick: "actionDoubleClick" },
|
|
3610
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: UiActionButtonComponent, selector: "ui-action-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, viewActivated: { classPropertyName: "viewActivated", publicName: "viewActivated", isSignal: true, isRequired: false, transformFunction: null }, addedCssClass: { classPropertyName: "addedCssClass", publicName: "addedCssClass", isSignal: true, isRequired: false, transformFunction: null }, addBasicClasses: { classPropertyName: "addBasicClasses", publicName: "addBasicClasses", isSignal: true, isRequired: false, transformFunction: null }, iconPlaceholder: { classPropertyName: "iconPlaceholder", publicName: "iconPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", actionDoubleClick: "actionDoubleClick" }, ngImport: i0, template: "@if (effectiveDescriptor().type === 'SEPARATOR') {\r\n <div class=\"separator\">\r\n @if (effectiveDescriptor().title) {\r\n <span class=\"separator-label\" [style.color]=\"getSeparatorColor()\">\r\n {{ effectiveDescriptor().title }}\r\n </span>\r\n }\r\n <hr class=\"separator-line\" [style.border-top-color]=\"getSeparatorColor()\" />\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"buttonWithBadge\"></ng-container>\r\n}\r\n\r\n<ng-template #buttonWithBadge>\r\n @if (effectiveDescriptor() && effectiveDescriptor().badge) {\r\n <ui-badge [descriptor]=\"effectiveDescriptor().badge\">\r\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n </ui-badge>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #buttonTemplate>\r\n @if (compLib === componentLibrary.PRIMENG) {\r\n <button\r\n pButton\r\n pRipple\r\n [smartTooltip]=\"effectiveDescriptor().tooltip\"\r\n [disabled]=\"!!disabled()\"\r\n (click)=\"onActionClicked($event, mainActionModel())\"\r\n (dblclick)=\"onActionDoubleClicked($event)\"\r\n [autofocus]=\"false\"\r\n [ngStyle]=\"calcStyle(effectiveDescriptor().style)\"\r\n [ngClass]=\"getCombinedClasses()\"\r\n [style.justify-content]=\"getJustifyContent()\"\r\n class=\"{{ getbtnClass() }} {{ addedCssClass() }}\"\r\n type=\"button\"\r\n [attr.data-testid]=\"code() ?? null\"\r\n >\r\n <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n </button>\r\n } @else {\r\n <button\r\n mat-button\r\n [smartTooltip]=\"effectiveDescriptor().tooltip\"\r\n [color]=\"effectiveDescriptor().color\"\r\n [disabled]=\"!!disabled()\"\r\n (click)=\"onActionClicked($event, mainActionModel())\"\r\n (dblclick)=\"onActionDoubleClicked($event)\"\r\n [ngStyle]=\"calcStyle(effectiveDescriptor().style)\"\r\n [ngClass]=\"getCombinedClasses()\"\r\n [style.justify-content]=\"getJustifyContent()\"\r\n class=\"{{ getbtnClass() }} {{ addedCssClass() }}\"\r\n type=\"button\"\r\n [attr.data-testid]=\"code() ?? null\"\r\n >\r\n <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n </button>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #text>\r\n @if (renderPre() || renderPlaceholderPre()) {\r\n <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n }\r\n {{ effectiveDescriptor().title }}\r\n @if (renderPost() || renderPlaceholderPost()) {\r\n <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #buttonIcon>\r\n @if (renderPlaceholderPre() || renderPlaceholderPost()) {\r\n <smart-icon></smart-icon>\r\n } @else if (effectiveDescriptor().iconResource) {\r\n <smart-icon\r\n [imageResource]=\"effectiveDescriptor().iconResource\"\r\n [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\r\n ></smart-icon>\r\n } @else {\r\n <smart-icon\r\n [icon]=\"effectiveDescriptor().icon\"\r\n [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\r\n ></smart-icon>\r\n }\r\n</ng-template>\r\n", styles: [":host{--text-color: black}:host ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center;line-height:1;padding:.75rem 1rem}:host{height:fit-content;width:fit-content;padding:unset;margin:unset}:host ::ng-deep .mdc-button__label{display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:center}:host ::ng-deep .mdc-button{height:fit-content;min-height:var(--mdc-text-button-container-height)}:host ::ng-deep .mat-mdc-icon-button ::ng-deep img{width:unset;height:unset}.separator{display:flex;flex-direction:column;padding:0 .5rem;width:100%}.separator-label{font-size:.7rem;color:#888;padding-bottom:.15rem}.separator-line{border:none;border-top:1px solid #e2e5e9;margin:0}:host ::ng-deep button.sb4-view-activated{background:var(--sb4-view-activated-bg, var(--primary-color, #1976d2));border-color:var(--sb4-view-activated-border-color, transparent);font-weight:var(--sb4-view-activated-font-weight, 600)}:host ::ng-deep button.sb4-view-activated,:host ::ng-deep button.sb4-view-activated *{color:var(--sb4-view-activated-color, var(--primary-color-text, #ffffff))!important}:host ::ng-deep button.sb4-view-activated:hover{background:var(--sb4-view-activated-bg, var(--primary-color, #1976d2))!important;box-shadow:var( --sb4-view-activated-hover-shadow, 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12) )}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiBadgeComponent, selector: "ui-badge", inputs: ["descriptor", "inputValue"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }] }); }
|
|
3594
3611
|
}
|
|
3595
3612
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UiActionButtonComponent, decorators: [{
|
|
3596
3613
|
type: Component,
|
|
3597
|
-
args: [{ selector: 'ui-action-button', template: "@if (
|
|
3614
|
+
args: [{ selector: 'ui-action-button', template: "@if (effectiveDescriptor().type === 'SEPARATOR') {\r\n <div class=\"separator\">\r\n @if (effectiveDescriptor().title) {\r\n <span class=\"separator-label\" [style.color]=\"getSeparatorColor()\">\r\n {{ effectiveDescriptor().title }}\r\n </span>\r\n }\r\n <hr class=\"separator-line\" [style.border-top-color]=\"getSeparatorColor()\" />\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"buttonWithBadge\"></ng-container>\r\n}\r\n\r\n<ng-template #buttonWithBadge>\r\n @if (effectiveDescriptor() && effectiveDescriptor().badge) {\r\n <ui-badge [descriptor]=\"effectiveDescriptor().badge\">\r\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n </ui-badge>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #buttonTemplate>\r\n @if (compLib === componentLibrary.PRIMENG) {\r\n <button\r\n pButton\r\n pRipple\r\n [smartTooltip]=\"effectiveDescriptor().tooltip\"\r\n [disabled]=\"!!disabled()\"\r\n (click)=\"onActionClicked($event, mainActionModel())\"\r\n (dblclick)=\"onActionDoubleClicked($event)\"\r\n [autofocus]=\"false\"\r\n [ngStyle]=\"calcStyle(effectiveDescriptor().style)\"\r\n [ngClass]=\"getCombinedClasses()\"\r\n [style.justify-content]=\"getJustifyContent()\"\r\n class=\"{{ getbtnClass() }} {{ addedCssClass() }}\"\r\n type=\"button\"\r\n [attr.data-testid]=\"code() ?? null\"\r\n >\r\n <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n </button>\r\n } @else {\r\n <button\r\n mat-button\r\n [smartTooltip]=\"effectiveDescriptor().tooltip\"\r\n [color]=\"effectiveDescriptor().color\"\r\n [disabled]=\"!!disabled()\"\r\n (click)=\"onActionClicked($event, mainActionModel())\"\r\n (dblclick)=\"onActionDoubleClicked($event)\"\r\n [ngStyle]=\"calcStyle(effectiveDescriptor().style)\"\r\n [ngClass]=\"getCombinedClasses()\"\r\n [style.justify-content]=\"getJustifyContent()\"\r\n class=\"{{ getbtnClass() }} {{ addedCssClass() }}\"\r\n type=\"button\"\r\n [attr.data-testid]=\"code() ?? null\"\r\n >\r\n <div *ngIf=\"isOnlyIcon(); then buttonIcon; else text\"></div>\r\n </button>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #text>\r\n @if (renderPre() || renderPlaceholderPre()) {\r\n <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n }\r\n {{ effectiveDescriptor().title }}\r\n @if (renderPost() || renderPlaceholderPost()) {\r\n <ng-container *ngTemplateOutlet=\"buttonIcon\" />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #buttonIcon>\r\n @if (renderPlaceholderPre() || renderPlaceholderPost()) {\r\n <smart-icon></smart-icon>\r\n } @else if (effectiveDescriptor().iconResource) {\r\n <smart-icon\r\n [imageResource]=\"effectiveDescriptor().iconResource\"\r\n [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\r\n ></smart-icon>\r\n } @else {\r\n <smart-icon\r\n [icon]=\"effectiveDescriptor().icon\"\r\n [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\r\n ></smart-icon>\r\n }\r\n</ng-template>\r\n", styles: [":host{--text-color: black}:host ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center;line-height:1;padding:.75rem 1rem}:host{height:fit-content;width:fit-content;padding:unset;margin:unset}:host ::ng-deep .mdc-button__label{display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:center}:host ::ng-deep .mdc-button{height:fit-content;min-height:var(--mdc-text-button-container-height)}:host ::ng-deep .mat-mdc-icon-button ::ng-deep img{width:unset;height:unset}.separator{display:flex;flex-direction:column;padding:0 .5rem;width:100%}.separator-label{font-size:.7rem;color:#888;padding-bottom:.15rem}.separator-line{border:none;border-top:1px solid #e2e5e9;margin:0}:host ::ng-deep button.sb4-view-activated{background:var(--sb4-view-activated-bg, var(--primary-color, #1976d2));border-color:var(--sb4-view-activated-border-color, transparent);font-weight:var(--sb4-view-activated-font-weight, 600)}:host ::ng-deep button.sb4-view-activated,:host ::ng-deep button.sb4-view-activated *{color:var(--sb4-view-activated-color, var(--primary-color-text, #ffffff))!important}:host ::ng-deep button.sb4-view-activated:hover{background:var(--sb4-view-activated-bg, var(--primary-color, #1976d2))!important;box-shadow:var( --sb4-view-activated-hover-shadow, 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12) )}\n"] }]
|
|
3598
3615
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentLibrary, decorators: [{
|
|
3599
3616
|
type: Inject,
|
|
3600
3617
|
args: [COMPONENT_LIBRARY]
|
|
3601
3618
|
}, {
|
|
3602
3619
|
type: Optional
|
|
3603
|
-
}] }], propDecorators: {
|
|
3604
|
-
type: Input
|
|
3605
|
-
}], descriptor: [{
|
|
3606
|
-
type: Input
|
|
3607
|
-
}], code: [{
|
|
3608
|
-
type: Input
|
|
3609
|
-
}], viewActivated: [{
|
|
3610
|
-
type: Input
|
|
3611
|
-
}], addedCssClass: [{
|
|
3612
|
-
type: Input
|
|
3613
|
-
}], addBasicClasses: [{
|
|
3614
|
-
type: Input
|
|
3615
|
-
}], iconPlaceholder: [{
|
|
3616
|
-
type: Input
|
|
3617
|
-
}], actionClick: [{
|
|
3620
|
+
}] }], propDecorators: { actionClick: [{
|
|
3618
3621
|
type: Output
|
|
3619
3622
|
}], actionDoubleClick: [{
|
|
3620
3623
|
type: Output
|