Merge pull request #70 from squidit/feature/SQ-64533-label-template

feat: Add support for generic label templates in sq-input component
squidit · Jun 28, 2024 · e3c5514 · e3c5514
2 parents 112f8fc + a1b22ae
commit e3c5514
Show file tree

Hide file tree

Showing 17 changed files with 94 additions and 16 deletions.
diff --git a/src/components/sq-input-date/sq-input-date.component.html b/src/components/sq-input-date/sq-input-date.component.html
@@ -1,13 +1,16 @@
 <div class="wrapper-all-inside-input {{ customClass }}">
   <label
     class="display-flex"
-    *ngIf="label?.length || tooltipMessage"
+    *ngIf="label?.length || tooltipMessage || labelTemplate"
     [ngClass]="{
       readonly: readonly
     }"
     [for]="id"
   >
-    <div *ngIf="label" [ngStyle]="{ 'color': labelColor }" [innerHtml]="label | universalSafe"></div>
+    <div *ngIf="label && !labelTemplate" [ngStyle]="{ 'color': labelColor }" [innerHtml]="label | universalSafe"></div>
+    <div *ngIf="labelTemplate">
+      <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
+    </div>
     <sq-tooltip
       *ngIf="tooltipMessage"
       class="ml-1"

diff --git a/src/components/sq-input-date/sq-input-date.component.ts b/src/components/sq-input-date/sq-input-date.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, Optional } from '@angular/core'
+import { Component, ContentChild, ElementRef, Input, Optional, TemplateRef } from '@angular/core'
 import { TranslateService } from '@ngx-translate/core'
 import { ValidatorHelper } from '../../helpers/validator.helper'
 import { SqInputComponent } from '../sq-input/sq-input.component'
@@ -55,6 +55,12 @@ export class SqInputDateComponent extends SqInputComponent {
     return this._value.toISOString().split('T')[0]
   }
 
+  /**
+   * Reference to a label template.
+   */
+  @ContentChild('labelTemplate')
+  override labelTemplate: TemplateRef<HTMLElement> | null = null
+
   /**
    * Constructs a new instance of SqInputDateComponent.
    * @param validatorHelper - The ValidatorHelper service for input validation.

diff --git a/src/components/sq-input-mask/sq-input-mask.component.html b/src/components/sq-input-mask/sq-input-mask.component.html
@@ -1,13 +1,16 @@
 <div class="wrapper-all-inside-input {{ customClass }}">
   <label
     class="display-flex"
-    *ngIf="label?.length || tooltipMessage"
+    *ngIf="label?.length || tooltipMessage || labelTemplate"
     [ngClass]="{
       readonly: readonly
     }"
     [for]="id"
   >
-    <div *ngIf="label" [ngStyle]="{ 'color': labelColor }" [innerHtml]="label | universalSafe"></div>
+    <div *ngIf="label && !labelTemplate" [ngStyle]="{ 'color': labelColor }" [innerHtml]="label | universalSafe"></div>
+    <div *ngIf="labelTemplate">
+      <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
+    </div>
     <sq-tooltip
       *ngIf="tooltipMessage"
       class="ml-1"

diff --git a/src/components/sq-input-mask/sq-input-mask.component.ts b/src/components/sq-input-mask/sq-input-mask.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, Optional } from "@angular/core"
+import { Component, ContentChild, ElementRef, Input, Optional, TemplateRef } from "@angular/core"
 import { ValidatorHelper } from '../../helpers/validator.helper'
 import { TranslateService } from "@ngx-translate/core"
 import { SqInputComponent } from "../sq-input/sq-input.component"
@@ -75,6 +75,12 @@ export class SqInputMaskComponent extends SqInputComponent {
    */
   @Input() maxValue?: number
 
+  /**
+   * Reference to a label template.
+   */
+  @ContentChild('labelTemplate')
+  override labelTemplate: TemplateRef<HTMLElement> | null = null
+
   /**
    * Reference to the native element.
    */

diff --git a/src/components/sq-input-money/sq-input-money.component.html b/src/components/sq-input-money/sq-input-money.component.html
@@ -36,12 +36,16 @@
   (keyPressUp)="keyPressUp.emit($event)"
   (keyPressDown)="keyPressDown.emit($event)"
 >
+  <ng-container *ngIf="labelTemplateOverwrite">
+    <ng-template #labelTemplate>
+      <ng-container *ngTemplateOutlet="labelTemplateOverwrite"></ng-container>
+    </ng-template>
+  </ng-container>
   <ng-container *ngIf="prefix">
     <ng-template #leftLabel>
       {{ prefix }}
     </ng-template>
   </ng-container>
-
   <ng-container *ngIf="rightLabelOverwrite">
     <ng-template #rightLabel>
       <ng-container *ngTemplateOutlet="rightLabelOverwrite"></ng-container>

diff --git a/src/components/sq-input-money/sq-input-money.component.ts b/src/components/sq-input-money/sq-input-money.component.ts
@@ -88,6 +88,12 @@ export class SqInputMoneyComponent extends SqInputComponent implements OnChanges
   @ContentChild('rightLabelOverwrite')
   rightLabelOverwrite: TemplateRef<HTMLElement> | null = null
 
+  /**
+   * Reference to a label template.
+   */
+  @ContentChild('labelTemplate')
+  labelTemplateOverwrite: TemplateRef<HTMLElement> | null = null
+
   /**
    * Constructs a new instance of SqInputMaskComponent.
    * @param validatorHelper - The ValidatorHelper service for input validation.

diff --git a/src/components/sq-input-number/sq-input-number.component.html b/src/components/sq-input-number/sq-input-number.component.html
@@ -37,6 +37,11 @@
   (keyPressUp)="keyPressUp.emit($event)"
   (keyPressDown)="keyPressDown.emit($event)"
 >
+<ng-container *ngIf="labelTemplateOverwrite">
+  <ng-template #labelTemplate>
+    <ng-container *ngTemplateOutlet="labelTemplateOverwrite"></ng-container>
+  </ng-template>
+</ng-container>
   <ng-container *ngIf="leftLabelOverwrite">
     <ng-template #leftLabel>
       <ng-container *ngTemplateOutlet="leftLabelOverwrite"></ng-container>

diff --git a/src/components/sq-input-number/sq-input-number.component.ts b/src/components/sq-input-number/sq-input-number.component.ts
@@ -89,6 +89,12 @@ export class SqInputNumberComponent extends SqInputComponent {
   @ContentChild('rightLabelOverwrite')
   rightLabelOverwrite: TemplateRef<HTMLElement> | null = null
 
+  /**
+   * Reference to a label template.
+   */
+  @ContentChild('labelTemplate')
+  labelTemplateOverwrite: TemplateRef<HTMLElement> | null = null
+
   /**
    * Reference to the native element.
    */

diff --git a/src/components/sq-input-range/sq-input-range.component.html b/src/components/sq-input-range/sq-input-range.component.html
@@ -3,14 +3,17 @@
 }">
   <label
     class="display-flex"
-    *ngIf="label?.length"
+    *ngIf="label?.length || labelTemplate"
     [ngClass]="{
       readonly: readonly
     }"
     [for]="id"
   >
-    <div *ngIf="label?.length" [ngStyle]="{ 'color': labelColor }" [innerHtml]="label | universalSafe"></div>
+    <div *ngIf="label?.length && !labelTemplate" [ngStyle]="{ 'color': labelColor }" [innerHtml]="label | universalSafe"></div>
   </label>
+  <div *ngIf="labelTemplate">
+    <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
+  </div>
   <div
     class="p-0 wrapper-input wrapper-input-squid"
     [ngClass]="{

diff --git a/src/components/sq-input-range/sq-input-range.component.ts b/src/components/sq-input-range/sq-input-range.component.ts
@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, ElementRef, EventEmitter, Input, OnChanges, Optional, Output, SimpleChanges, ViewChild } from '@angular/core'
+import { AfterContentInit, Component, ContentChild, ElementRef, EventEmitter, Input, OnChanges, Optional, Output, SimpleChanges, TemplateRef, ViewChild } from '@angular/core'
 import { TranslateService } from '@ngx-translate/core'
 import { ValidatorHelper } from '../../helpers/validator.helper'
 import { sleep } from '../../helpers/sleep.helper'
@@ -133,6 +133,13 @@ export class SqInputRangeComponent implements AfterContentInit, OnChanges {
    */
   @ViewChild('input') input!: ElementRef
 
+  /**
+   * Reference to a label template.
+   */
+  @ContentChild('labelTemplate')
+  labelTemplate: TemplateRef<HTMLElement> | null = null
+
+
   /**
    * The error message associated with the input.
    */

diff --git a/src/components/sq-select/sq-select.component.html b/src/components/sq-select/sq-select.component.html
@@ -1,13 +1,16 @@
 <div class="wrapper-all-inside-input {{ customClass }}">
   <label
     class="display-flex"
-    *ngIf="label?.length || tooltipMessage"
+    *ngIf="label?.length || tooltipMessage || labelTemplate"
     [ngClass]="{
       readonly: readonly
     }"
     [for]="id"
   >
-    <div *ngIf="label" [ngStyle]="{ 'color': labelColor }" [innerHtml]="label | universalSafe"></div>
+    <div *ngIf="label && !labelTemplate" [ngStyle]="{ 'color': labelColor }" [innerHtml]="label | universalSafe"></div>
+    <div *ngIf="labelTemplate">
+      <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
+    </div>
     <sq-tooltip
       *ngIf="tooltipMessage"
       class="ml-1"

diff --git a/src/components/sq-select/sq-select.component.ts b/src/components/sq-select/sq-select.component.ts
@@ -185,6 +185,12 @@ export class SqSelectComponent {
   @ContentChild('rightLabel')
   rightLabel: TemplateRef<HTMLElement> | null = null
 
+  /**
+   * Reference to a right-aligned label template.
+   */
+  @ContentChild('labelTemplate')
+  labelTemplate: TemplateRef<HTMLElement> | null = null
+
   /**
    * The error state of the select input.
    */

diff --git a/src/components/sq-selector/sq-selector.component.html b/src/components/sq-selector/sq-selector.component.html
@@ -8,11 +8,16 @@
     block: block,
   }"
 >
-  <label [for]="id" *ngIf="leftLabel" [ngClass]="{'label-max-width': hideInput}">
+  <label [for]="id" *ngIf="leftLabel && !labelTemplate" [ngClass]="{'label-max-width': hideInput}">
     <ng-container
       *ngTemplateOutlet="leftLabel; context: context"
     ></ng-container>
   </label>
+  <label for="id" *ngIf="labelTemplate" [ngClass]="{'label-max-width': hideInput}">
+    <div *ngIf="labelTemplate">
+      <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
+    </div>
+  </label>
   <input
     [id]="id"
     [name]="name"

diff --git a/src/components/sq-selector/sq-selector.component.ts b/src/components/sq-selector/sq-selector.component.ts
@@ -205,6 +205,12 @@ export class SqSelectorComponent implements OnChanges {
   @ContentChild('leftLabel')
   leftLabel: TemplateRef<HTMLElement> | null = null
 
+  /**
+   * Reference to a right-aligned label template.
+   */
+  @ContentChild('labelTemplate')
+  labelTemplate: TemplateRef<HTMLElement> | null = null
+
   /**
    * Indicates whether the selector input is currently checked.
    */

diff --git a/src/components/sq-textarea/sq-textarea.component.html b/src/components/sq-textarea/sq-textarea.component.html
@@ -1,13 +1,16 @@
 <div class="wrapper-all-inside-input {{ customClass }}">
   <label
     class="display-flex"
-    *ngIf="label?.length || tooltipMessage"
+    *ngIf="label?.length || tooltipMessage || labelTemplate"
     [ngClass]="{
       readonly: readonly
     }"
     [for]="id"
   >
-    <div *ngIf="label" [ngStyle]="{ 'color': labelColor }" [innerHtml]="label | universalSafe"></div>
+    <div *ngIf="label && !labelTemplate" [ngStyle]="{ 'color': labelColor }" [innerHtml]="label | universalSafe"></div>
+    <div *ngIf="labelTemplate">
+      <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
+    </div>
     <sq-tooltip
       *ngIf="tooltipMessage"
       class="ml-1"

diff --git a/src/components/sq-textarea/sq-textarea.component.ts b/src/components/sq-textarea/sq-textarea.component.ts
@@ -183,6 +183,12 @@ export class SqTextAreaComponent {
   @ContentChild('rightLabel')
   rightLabel: TemplateRef<HTMLElement> | null = null
 
+  /**
+   * Reference to a label template.
+   */
+  @ContentChild('labelTemplate')
+  labelTemplate: TemplateRef<HTMLElement> | null = null
+
   /**
    * Represents the error state of the textarea.
    */

diff --git a/src/package.json b/src/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@squidit/ngx-css",
-  "version": "1.3.39",
+  "version": "1.3.40",
   "peerDependencies": {
     "@angular/common": ">=15.0.0",
     "@angular/core": ">=15.0.0",