UI: add pattern support for labels to button widgets.

ui-ngx/src/app/modules/home/components/widget/lib/button/action-button-widget.component.html

@@ -24,6 +24,7 @@
     [borderRadius]="borderRadius"
     [disabled]="disabled"
     [activated]="activated"
+    [ctx]="ctx"
     (clicked)="onClick($event)">
   </tb-widget-button>
   <div *ngIf="error" class="tb-action-widget-error-container">

ui-ngx/src/app/modules/home/components/widget/lib/button/command-button-widget.component.html

@@ -23,6 +23,7 @@
     [appearance]="appearance"
     [borderRadius]="borderRadius"
     [disabled]="disabled"
+    [ctx]="ctx"
     (clicked)="onClick($event)">
   </tb-widget-button>
   <div *ngIf="error" class="tb-action-widget-error-container">

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.html

@@ -48,6 +48,7 @@
         widgets.button.preview
       </div>
       <tb-widget-button
+        #widgetButtonPreview
         [appearance]="previewAppearance"
         [borderRadius]="borderRadius"
         disableEvents

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.ts

@@ -14,7 +14,16 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
@@ -32,6 +41,7 @@ import {
 } from '@shared/components/button/widget-button.models';
 import { merge } from 'rxjs';
 import { deepClone } from '@core/utils';
+import { WidgetButtonComponent } from '@shared/components/button/widget-button.component';
 
 @Component({
   selector: 'tb-widget-button-custom-style-panel',
@@ -42,6 +52,9 @@ import { deepClone } from '@core/utils';
 })
 export class WidgetButtonCustomStylePanelComponent extends PageComponent implements OnInit {
 
+  @ViewChild('widgetButtonPreview')
+  widgetButtonPreview: WidgetButtonComponent;
+
   @Input()
   appearance: WidgetButtonAppearance;
 
@@ -54,8 +67,19 @@ export class WidgetButtonCustomStylePanelComponent extends PageComponent impleme
   @Input()
   customStyle: WidgetButtonCustomStyle;
 
+  private popoverValue: TbPopoverComponent<WidgetButtonCustomStylePanelComponent>;
+
   @Input()
-  popover: TbPopoverComponent<WidgetButtonCustomStylePanelComponent>;
+  set popover(popover: TbPopoverComponent<WidgetButtonCustomStylePanelComponent>) {
+    this.popoverValue = popover;
+    popover.tbAnimationDone.subscribe(() => {
+      this.widgetButtonPreview?.validateSize();
+    });
+  }
+
+  get popover(): TbPopoverComponent<WidgetButtonCustomStylePanelComponent> {
+    return this.popoverValue;
+  }
 
   @Output()
   customStyleApplied = new EventEmitter<WidgetButtonCustomStyle>();
@@ -125,7 +149,7 @@ export class WidgetButtonCustomStylePanelComponent extends PageComponent impleme
     if (customStyle?.overrideBackgroundColor) {
       backgroundColor = customStyle?.backgroundColor;
     }
-    let dropShadow = this.appearance.type === WidgetButtonType.basic ? false : true;
+    let dropShadow = this.appearance.type !== WidgetButtonType.basic;
     if (customStyle?.overrideDropShadow) {
       dropShadow = customStyle?.dropShadow;
     }

ui-ngx/src/app/shared/components/button/widget-button.component.html

@@ -34,6 +34,6 @@
         [style.pointer-events]="disableEvents ? 'none' : ''">
   <div #widgetButtonContent class="tb-widget-button-content" *ngIf="appearance.showIcon || appearance.showLabel">
     <tb-icon matButtonIcon *ngIf="appearance.showIcon" [style]="iconStyle">{{ appearance.icon }}</tb-icon>
-    <span *ngIf="appearance.showLabel" class="tb-widget-button-label">{{ appearance.label }}</span>
+    <span *ngIf="appearance.showLabel" class="tb-widget-button-label">{{ label$ | async }}</span>
   </div>
 </button>

ui-ngx/src/app/shared/components/button/widget-button.component.ts

@@ -25,7 +25,8 @@ import {
   OnInit,
   Output,
   Renderer2,
-  SimpleChanges, ViewChild,
+  SimpleChanges,
+  ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 import {
@@ -36,6 +37,8 @@ import { coerceBoolean } from '@shared/decorators/coercion';
 import { ComponentStyle, iconStyle } from '@shared/models/widget-settings.models';
 import { UtilsService } from '@core/services/utils.service';
 import { ResizeObserver } from '@juggle/resize-observer';
+import { Observable, of } from 'rxjs';
+import { WidgetContext } from '@home/models/widget-component.models';
 
 const initialButtonHeight = 60;
 const horizontalLayoutPadding = 24;
@@ -81,9 +84,14 @@ export class WidgetButtonComponent implements OnInit, AfterViewInit, OnDestroy,
   @coerceBoolean()
   disableEvents = false;
 
+  @Input()
+  ctx: WidgetContext;
+
   @Output()
   clicked = new EventEmitter<MouseEvent>();
 
+  label$: Observable<string>;
+
   iconStyle: ComponentStyle = {};
 
   mousePressed = false;
@@ -122,11 +130,20 @@ export class WidgetButtonComponent implements OnInit, AfterViewInit, OnDestroy,
     this.clearAppearanceCss();
   }
 
+  public validateSize() {
+    if (this.appearance.autoScale && this.widgetButton.nativeElement) {
+      this.onResize();
+    }
+  }
+
   private updateAppearance(): void {
     this.clearAppearanceCss();
     if (this.appearance.showIcon) {
       this.iconStyle = iconStyle(this.appearance.iconSize, this.appearance.iconSizeUnit);
     }
+    if (this.appearance.showLabel) {
+      this.label$ = this.ctx ? this.ctx.registerLabelPattern(this.appearance.label, this.label$) : of(this.appearance.label);
+    }
     const appearanceCss = generateWidgetButtonAppearanceCss(this.appearance);
     this.appearanceCssClass = this.utils.applyCssToElement(this.renderer, this.elementRef.nativeElement,
       'tb-widget-button', appearanceCss);