@testgorilla/tgo-ui 9.3.3 → 10.0.0

package/fesm2022/testgorilla-tgo-ui-components-universal-skills.mjs

@@ -115,10 +115,10 @@ class UniversalSkillsService {
     getStaticSkillAreaGroupMap() {
         return this.staticSkillAreaGroupMap;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UniversalSkillsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UniversalSkillsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UniversalSkillsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UniversalSkillsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UniversalSkillsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UniversalSkillsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -177,10 +177,10 @@ class UniversalSkillsReportComponent {
         }
         return isLabelRequest ? scoreBadgeLabel : scoreBadgeColor;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UniversalSkillsReportComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: UniversalSkillsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: UniversalSkillsReportComponent, isStandalone: true, selector: "ui-universal-skills-report", inputs: { applicationTheme: "applicationTheme", skillAreaDataList: "skillAreaDataList" }, ngImport: i0, template: "@for (skillAreaGroup of skillAreaGroupMap | keyvalue; track skillAreaGroup) {\n  <div class=\"universal-skills-report\">\n    <section class=\"title-and-info\">\n      <h4>{{ skillAreaGroup.value.title | uiTranslate | async }}</h4>\n      <span>{{ skillAreaGroup.value.description | uiTranslate | async }}</span>\n    </section>\n    <section class=\"accordion-items\">\n      @for (skillAreaData of skillAreaGroup?.value?.skillAreaList; track skillAreaData) {\n        <ui-accordion class=\"universal-skills-accordion\" label=\"-\" [allowCustomHeader]=\"true\">\n          <div customHeader class=\"custom-header\">\n            <h4 class=\"custom-header-subtitle\">\n              {{\n                translationContext + 'SKILL_AREA_TYPES.' + skillAreaData.skillAreaName + '.TITLE' | uiTranslate | async\n              }}\n            </h4>\n            <div class=\"inner-container\">\n              <ui-badge\n                class=\"percentile-scoring-badge\"\n                [label]=\"\n                  (skillAreaData.percentileScoring | memoizeFunc: getScoreBadgeLabel : this | uiTranslate | async) ||\n                  'neutral'\n                \"\n                [rebrandColor]=\"skillAreaData.percentileScoring | memoizeFunc: getScoreBadgeColor : this\"\n                [applicationTheme]=\"'light'\"\n              ></ui-badge>\n              <h5 class=\"percentile-quantity\">\n                {{ skillAreaData?.percentileScoring }}\n                <sup class=\"percentile-suffix\">{{\n                  skillAreaData.percentileScoring | ordinalSuffix | uiTranslate | async\n                }}</sup>\n                {{ translationContext + 'PERCENTILE' | uiTranslate | async }}\n              </h5>\n              <ui-progress-bar\n                class=\"percentile-scoring-bar\"\n                mode=\"determinate\"\n                [progress]=\"skillAreaData.percentileScoring\"\n              ></ui-progress-bar>\n            </div>\n          </div>\n          <div class=\"content-container\">\n            <p class=\"skill-description\">\n              {{\n                translationContext + 'SKILL_AREA_TYPES.' + skillAreaData.skillAreaName + '.DESCRIPTION'\n                  | uiTranslate\n                  | async\n              }}\n            </p>\n            <h5>\n              {{ skillAreaData.percentileScoring | memoizeFunc: getScoreBadgeLabel : this | uiTranslate | async }} score\n            </h5>\n            <div class=\"inner-container\">\n              <p>\n                {{\n                  translationContext +\n                    'SKILL_AREA_TYPES.' +\n                    skillAreaData.skillAreaName +\n                    '.' +\n                    ([skillAreaData.percentileScoring, true] | memoizeFunc: checkScoreClassification : this) +\n                    '.GENERAL'\n                    | uiTranslate\n                    | async\n                }}\n              </p>\n            </div>\n            <div class=\"inner-container\">\n              <p>\n                {{\n                  translationContext +\n                    'SKILL_AREA_TYPES.' +\n                    skillAreaData.skillAreaName +\n                    '.' +\n                    ([skillAreaData.percentileScoring, true] | memoizeFunc: checkScoreClassification : this) +\n                    '.WORK_ENVIRONMENT'\n                    | uiTranslate\n                    | async\n                }}\n              </p>\n            </div>\n            <div class=\"inner-container\">\n              <p>\n                {{\n                  translationContext +\n                    'SKILL_AREA_TYPES.' +\n                    skillAreaData.skillAreaName +\n                    '.' +\n                    ([skillAreaData.percentileScoring, true] | memoizeFunc: checkScoreClassification : this) +\n                    '.RECOMMENDATIONS'\n                    | uiTranslate\n                    | async\n                }}\n              </p>\n            </div>\n          </div>\n        </ui-accordion>\n      }\n    </section>\n  </div>\n}\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.universal-skills-report{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:2.2rem}.universal-skills-report:last-of-type{margin-bottom:0}.universal-skills-report .title-and-info{width:100%;display:flex;flex-direction:column;gap:.7rem}.universal-skills-report .accordion-items{width:100%;display:flex;flex-direction:column;gap:.6rem}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .custom-header-subtitle{font-weight:400}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .inner-container{width:70%;max-width:450px;display:flex;justify-content:space-between;align-items:center;gap:1rem}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .inner-container .percentile-scoring-badge{width:126px;display:flex;justify-content:center}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .inner-container .percentile-quantity{margin-top:-.4rem;white-space:nowrap}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .inner-container .percentile-quantity .percentile-suffix{font-size:8px;line-height:22px;font-weight:700;margin-left:-.1rem}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .inner-container .percentile-scoring-bar{width:180px;height:8px}@media(max-width:600px){.universal-skills-report .accordion-items .universal-skills-accordion .custom-header{flex-direction:column;align-items:flex-start;min-height:60px}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .custom-header-subtitle{white-space:nowrap}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .inner-container{width:100%;max-width:none;position:absolute;top:45px;left:0;padding:0 1.5rem 0 1rem}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .inner-container .percentile-scoring-badge{justify-content:flex-start}}.universal-skills-report .accordion-items .universal-skills-accordion ::ng-deep .mat-accordion .mat-expansion-panel{border:1px solid #d3d3d3}.universal-skills-report .accordion-items .universal-skills-accordion ::ng-deep .mat-accordion .mat-expansion-panel .mat-expansion-panel-body{background-color:transparent}.universal-skills-report .accordion-items .universal-skills-accordion ::ng-deep .mat-accordion .mat-expansion-panel .mat-expansion-panel-body .content-container{display:flex;flex-direction:column;gap:1rem}.universal-skills-report .accordion-items .universal-skills-accordion ::ng-deep .mat-accordion .mat-expansion-panel .mat-expansion-panel-body .content-container p{line-height:21px;margin:0}.universal-skills-report .accordion-items .universal-skills-accordion ::ng-deep .mat-accordion .mat-expansion-panel .mat-expansion-panel-body .content-container .skill-description{color:#666;line-height:22px;margin:.5rem 0}.universal-skills-report .accordion-items .universal-skills-accordion ::ng-deep .mat-accordion .mat-expansion-panel .mat-expansion-panel-body .content-container .inner-container{background-color:#f4f4f4;padding:1rem;border-radius:10px;display:flex;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "component", type: AccordionComponent, selector: "ui-accordion", inputs: ["label", "open", "disabled", "showPremiumIcon", "premiumTooltipText", "applicationTheme", "labelIcon", "variant", "allowCustomHeader", "noBackgroundColor", "toggleIconPosition"], outputs: ["closed", "opened"] }, { kind: "component", type: BadgeComponent, selector: "ui-badge", inputs: ["label", "staticLabel", "icon", "iconColor", "trailingIcon", "trailingIconColor", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel", "enableAnimation"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: OrdinalSuffixPipe, name: "ordinalSuffix" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UniversalSkillsReportComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: UniversalSkillsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: UniversalSkillsReportComponent, isStandalone: true, selector: "ui-universal-skills-report", inputs: { applicationTheme: "applicationTheme", skillAreaDataList: "skillAreaDataList" }, ngImport: i0, template: "@for (skillAreaGroup of skillAreaGroupMap | keyvalue; track skillAreaGroup) {\n  <div class=\"universal-skills-report\">\n    <section class=\"title-and-info\">\n      <h4>{{ skillAreaGroup.value.title | uiTranslate | async }}</h4>\n      <span>{{ skillAreaGroup.value.description | uiTranslate | async }}</span>\n    </section>\n    <section class=\"accordion-items\">\n      @for (skillAreaData of skillAreaGroup?.value?.skillAreaList; track skillAreaData) {\n        <ui-accordion class=\"universal-skills-accordion\" label=\"-\" [allowCustomHeader]=\"true\">\n          <div customHeader class=\"custom-header\">\n            <h4 class=\"custom-header-subtitle\">\n              {{\n                translationContext + 'SKILL_AREA_TYPES.' + skillAreaData.skillAreaName + '.TITLE' | uiTranslate | async\n              }}\n            </h4>\n            <div class=\"inner-container\">\n              <ui-badge\n                class=\"percentile-scoring-badge\"\n                [label]=\"\n                  (skillAreaData.percentileScoring | memoizeFunc: getScoreBadgeLabel : this | uiTranslate | async) ||\n                  'neutral'\n                \"\n                [rebrandColor]=\"skillAreaData.percentileScoring | memoizeFunc: getScoreBadgeColor : this\"\n                [applicationTheme]=\"'light'\"\n              ></ui-badge>\n              <h5 class=\"percentile-quantity\">\n                {{ skillAreaData?.percentileScoring }}\n                <sup class=\"percentile-suffix\">{{\n                  skillAreaData.percentileScoring | ordinalSuffix | uiTranslate | async\n                }}</sup>\n                {{ translationContext + 'PERCENTILE' | uiTranslate | async }}\n              </h5>\n              <ui-progress-bar\n                class=\"percentile-scoring-bar\"\n                mode=\"determinate\"\n                [progress]=\"skillAreaData.percentileScoring\"\n              ></ui-progress-bar>\n            </div>\n          </div>\n          <div class=\"content-container\">\n            <p class=\"skill-description\">\n              {{\n                translationContext + 'SKILL_AREA_TYPES.' + skillAreaData.skillAreaName + '.DESCRIPTION'\n                  | uiTranslate\n                  | async\n              }}\n            </p>\n            <h5>\n              {{ skillAreaData.percentileScoring | memoizeFunc: getScoreBadgeLabel : this | uiTranslate | async }} score\n            </h5>\n            <div class=\"inner-container\">\n              <p>\n                {{\n                  translationContext +\n                    'SKILL_AREA_TYPES.' +\n                    skillAreaData.skillAreaName +\n                    '.' +\n                    ([skillAreaData.percentileScoring, true] | memoizeFunc: checkScoreClassification : this) +\n                    '.GENERAL'\n                    | uiTranslate\n                    | async\n                }}\n              </p>\n            </div>\n            <div class=\"inner-container\">\n              <p>\n                {{\n                  translationContext +\n                    'SKILL_AREA_TYPES.' +\n                    skillAreaData.skillAreaName +\n                    '.' +\n                    ([skillAreaData.percentileScoring, true] | memoizeFunc: checkScoreClassification : this) +\n                    '.WORK_ENVIRONMENT'\n                    | uiTranslate\n                    | async\n                }}\n              </p>\n            </div>\n            <div class=\"inner-container\">\n              <p>\n                {{\n                  translationContext +\n                    'SKILL_AREA_TYPES.' +\n                    skillAreaData.skillAreaName +\n                    '.' +\n                    ([skillAreaData.percentileScoring, true] | memoizeFunc: checkScoreClassification : this) +\n                    '.RECOMMENDATIONS'\n                    | uiTranslate\n                    | async\n                }}\n              </p>\n            </div>\n          </div>\n        </ui-accordion>\n      }\n    </section>\n  </div>\n}\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.universal-skills-report{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:2.2rem}.universal-skills-report:last-of-type{margin-bottom:0}.universal-skills-report .title-and-info{width:100%;display:flex;flex-direction:column;gap:.7rem}.universal-skills-report .accordion-items{width:100%;display:flex;flex-direction:column;gap:.6rem}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .custom-header-subtitle{font-weight:400}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .inner-container{width:70%;max-width:450px;display:flex;justify-content:space-between;align-items:center;gap:1rem}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .inner-container .percentile-scoring-badge{width:126px;display:flex;justify-content:center}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .inner-container .percentile-quantity{margin-top:-.4rem;white-space:nowrap}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .inner-container .percentile-quantity .percentile-suffix{font-size:8px;line-height:22px;font-weight:700;margin-left:-.1rem}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .inner-container .percentile-scoring-bar{width:180px;height:8px}@media(max-width:600px){.universal-skills-report .accordion-items .universal-skills-accordion .custom-header{flex-direction:column;align-items:flex-start;min-height:60px}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .custom-header-subtitle{white-space:nowrap}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .inner-container{width:100%;max-width:none;position:absolute;top:45px;left:0;padding:0 1.5rem 0 1rem}.universal-skills-report .accordion-items .universal-skills-accordion .custom-header .inner-container .percentile-scoring-badge{justify-content:flex-start}}.universal-skills-report .accordion-items .universal-skills-accordion ::ng-deep .mat-accordion .mat-expansion-panel{border:1px solid #d3d3d3}.universal-skills-report .accordion-items .universal-skills-accordion ::ng-deep .mat-accordion .mat-expansion-panel .mat-expansion-panel-body{background-color:transparent}.universal-skills-report .accordion-items .universal-skills-accordion ::ng-deep .mat-accordion .mat-expansion-panel .mat-expansion-panel-body .content-container{display:flex;flex-direction:column;gap:1rem}.universal-skills-report .accordion-items .universal-skills-accordion ::ng-deep .mat-accordion .mat-expansion-panel .mat-expansion-panel-body .content-container p{line-height:21px;margin:0}.universal-skills-report .accordion-items .universal-skills-accordion ::ng-deep .mat-accordion .mat-expansion-panel .mat-expansion-panel-body .content-container .skill-description{color:#666;line-height:22px;margin:.5rem 0}.universal-skills-report .accordion-items .universal-skills-accordion ::ng-deep .mat-accordion .mat-expansion-panel .mat-expansion-panel-body .content-container .inner-container{background-color:#f4f4f4;padding:1rem;border-radius:10px;display:flex;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "component", type: AccordionComponent, selector: "ui-accordion", inputs: ["label", "open", "disabled", "showPremiumIcon", "premiumTooltipText", "applicationTheme", "labelIcon", "variant", "allowCustomHeader", "noBackgroundColor", "toggleIconPosition"], outputs: ["closed", "opened"] }, { kind: "component", type: BadgeComponent, selector: "ui-badge", inputs: ["label", "staticLabel", "icon", "iconColor", "trailingIcon", "trailingIconColor", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel", "enableAnimation"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: OrdinalSuffixPipe, name: "ordinalSuffix" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UniversalSkillsReportComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UniversalSkillsReportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-universal-skills-report', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AccordionComponent,
@@ -204,8 +204,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 
 class UniversalSkillsReportComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UniversalSkillsReportComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: UniversalSkillsReportComponentModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UniversalSkillsReportComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: UniversalSkillsReportComponentModule, imports: [CommonModule,
             AccordionComponentModule,
             BadgeComponentModule,
             ProgressBarComponentModule,
@@ -214,13 +214,13 @@ class UniversalSkillsReportComponentModule {
             OrdinalSuffixPipe,
             KeyValuePipe,
             UniversalSkillsReportComponent], exports: [UniversalSkillsReportComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UniversalSkillsReportComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UniversalSkillsReportComponentModule, imports: [CommonModule,
             AccordionComponentModule,
             BadgeComponentModule,
             ProgressBarComponentModule,
             UniversalSkillsReportComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UniversalSkillsReportComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UniversalSkillsReportComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -317,10 +317,10 @@ class UniversalSkillsSpiderChartsComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UniversalSkillsSpiderChartsComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: UniversalSkillsService }, { token: i2.UiTranslatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: UniversalSkillsSpiderChartsComponent, isStandalone: true, selector: "ui-universal-skills-spider-charts", inputs: { applicationTheme: "applicationTheme", skillAreaDataList: "skillAreaDataList", loading: "loading", size: "size" }, ngImport: i0, template: "@for (spiderChartData of skillAreaSpiderChartData; track spiderChartData) {\n  <ui-accordion\n    class=\"universal-skills-spider-charts\"\n    [label]=\"(spiderChartData.title | uiTranslate | async) || ''\"\n    variant=\"filter\"\n  >\n    <ui-spider-chart\n      [spiderChartData]=\"spiderChartData.spiderChartData\"\n      [loading]=\"loading\"\n      [size]=\"size\"\n    ></ui-spider-chart>\n  </ui-accordion>\n  @if ($index < skillAreaSpiderChartData.length - 1) {\n    <ui-divider class=\"universal-skills-spider-charts-divider\" size=\"small\"></ui-divider>\n  }\n}\n", styles: [".universal-skills-spider-charts ::ng-deep .accordion-wrapper[theme=light] .mat-expansion-panel .mat-expansion-panel-header .accordion-label{font-weight:700}.universal-skills-spider-charts-divider ::ng-deep .ui-divider-wrapper{margin-top:8px;margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: AccordionComponent, selector: "ui-accordion", inputs: ["label", "open", "disabled", "showPremiumIcon", "premiumTooltipText", "applicationTheme", "labelIcon", "variant", "allowCustomHeader", "noBackgroundColor", "toggleIconPosition"], outputs: ["closed", "opened"] }, { kind: "component", type: SpiderChartComponent, selector: "ui-spider-chart", inputs: ["size", "spiderChartData", "stepSize", "ariaLabel", "loading", "applicationTheme"] }, { kind: "component", type: DividerComponent, selector: "ui-divider", inputs: ["size", "companyColor", "applicationTheme", "label"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UniversalSkillsSpiderChartsComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: UniversalSkillsService }, { token: i2.UiTranslatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: UniversalSkillsSpiderChartsComponent, isStandalone: true, selector: "ui-universal-skills-spider-charts", inputs: { applicationTheme: "applicationTheme", skillAreaDataList: "skillAreaDataList", loading: "loading", size: "size" }, ngImport: i0, template: "@for (spiderChartData of skillAreaSpiderChartData; track spiderChartData) {\n  <ui-accordion\n    class=\"universal-skills-spider-charts\"\n    [label]=\"(spiderChartData.title | uiTranslate | async) || ''\"\n    variant=\"filter\"\n  >\n    <ui-spider-chart\n      [spiderChartData]=\"spiderChartData.spiderChartData\"\n      [loading]=\"loading\"\n      [size]=\"size\"\n    ></ui-spider-chart>\n  </ui-accordion>\n  @if ($index < skillAreaSpiderChartData.length - 1) {\n    <ui-divider class=\"universal-skills-spider-charts-divider\" size=\"small\"></ui-divider>\n  }\n}\n", styles: [".universal-skills-spider-charts ::ng-deep .accordion-wrapper[theme=light] .mat-expansion-panel .mat-expansion-panel-header .accordion-label{font-weight:700}.universal-skills-spider-charts-divider ::ng-deep .ui-divider-wrapper{margin-top:8px;margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: AccordionComponent, selector: "ui-accordion", inputs: ["label", "open", "disabled", "showPremiumIcon", "premiumTooltipText", "applicationTheme", "labelIcon", "variant", "allowCustomHeader", "noBackgroundColor", "toggleIconPosition"], outputs: ["closed", "opened"] }, { kind: "component", type: SpiderChartComponent, selector: "ui-spider-chart", inputs: ["size", "spiderChartData", "stepSize", "ariaLabel", "loading", "applicationTheme"] }, { kind: "component", type: DividerComponent, selector: "ui-divider", inputs: ["size", "companyColor", "applicationTheme", "label"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UniversalSkillsSpiderChartsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UniversalSkillsSpiderChartsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-universal-skills-spider-charts', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AccordionComponent, SpiderChartComponent, DividerComponent, AsyncPipe, UiTranslatePipe], template: "@for (spiderChartData of skillAreaSpiderChartData; track spiderChartData) {\n  <ui-accordion\n    class=\"universal-skills-spider-charts\"\n    [label]=\"(spiderChartData.title | uiTranslate | async) || ''\"\n    variant=\"filter\"\n  >\n    <ui-spider-chart\n      [spiderChartData]=\"spiderChartData.spiderChartData\"\n      [loading]=\"loading\"\n      [size]=\"size\"\n    ></ui-spider-chart>\n  </ui-accordion>\n  @if ($index < skillAreaSpiderChartData.length - 1) {\n    <ui-divider class=\"universal-skills-spider-charts-divider\" size=\"small\"></ui-divider>\n  }\n}\n", styles: [".universal-skills-spider-charts ::ng-deep .accordion-wrapper[theme=light] .mat-expansion-panel .mat-expansion-panel-header .accordion-label{font-weight:700}.universal-skills-spider-charts-divider ::ng-deep .ui-divider-wrapper{margin-top:8px;margin-bottom:8px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -339,8 +339,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 
 class UniversalSkillsSpiderChartsComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UniversalSkillsSpiderChartsComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: UniversalSkillsSpiderChartsComponentModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UniversalSkillsSpiderChartsComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: UniversalSkillsSpiderChartsComponentModule, imports: [CommonModule,
             AccordionComponentModule,
             BadgeComponentModule,
             ProgressBarComponentModule,
@@ -351,7 +351,7 @@ class UniversalSkillsSpiderChartsComponentModule {
             OrdinalSuffixPipe,
             KeyValuePipe,
             UniversalSkillsSpiderChartsComponent], exports: [UniversalSkillsSpiderChartsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UniversalSkillsSpiderChartsComponentModule, providers: [UiTranslatePipe], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UniversalSkillsSpiderChartsComponentModule, providers: [UiTranslatePipe], imports: [CommonModule,
             AccordionComponentModule,
             BadgeComponentModule,
             ProgressBarComponentModule,
@@ -359,7 +359,7 @@ class UniversalSkillsSpiderChartsComponentModule {
             DividerComponentModule,
             UniversalSkillsSpiderChartsComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UniversalSkillsSpiderChartsComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UniversalSkillsSpiderChartsComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/testgorilla-tgo-ui-components-validation-error.mjs

@@ -69,10 +69,10 @@ class ValidationErrorComponent {
         }
         return template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ValidationErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ValidationErrorComponent, isStandalone: true, selector: "ui-validation-error", inputs: { ngControl: "ngControl", touchedOn: "touchedOn", errorMessage: "errorMessage", label: "label", applicationTheme: "applicationTheme", customErrors: "customErrors" }, host: { properties: { "attr.theme": "this.applicationTheme" } }, ngImport: i0, template: "@for (key of customErrorKeys; track $index) {\n  @if (ngControl?.hasError(key) && (touchedOn ? ngControl?.touched : true)) {\n    <div class=\"errors\">\n      <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n      <span>{{ resolveErrorMessage(key) }}</span>\n    </div>\n  }\n}\n\n@if (ngControl?.hasError('maxlength') && !customErrors['maxlength']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{\n      translationContextErrors + 'MAX_LENGTH' | uiTranslate: { maxlength: getErrorValue('maxlength') } | async\n    }}</span>\n  </div>\n}\n\n@if (ngControl?.hasError('minlength') && !customErrors['min']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{\n      translationContextErrors + 'MIN_LENGTH' | uiTranslate: { maxlength: getErrorValue('minlength') } | async\n    }}</span>\n  </div>\n}\n\n@if (ngControl?.hasError('min') && !customErrors['min']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{ translationContextErrors + 'MIN' | uiTranslate: { min: getErrorValue('min') } | async }}</span>\n  </div>\n}\n\n@if (ngControl?.hasError('max') && !customErrors['max']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{ translationContextErrors + 'MAX' | uiTranslate: { max: getErrorValue('max') } | async }}</span>\n  </div>\n}\n\n@if (ngControl?.hasError('required') && (touchedOn ? ngControl?.touched : true) && !customErrors['required']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{\n      translationContextErrors + (label ? 'REQUIRED_FIELD' : 'REQUIRED') | uiTranslate: { label } | async\n    }}</span>\n  </div>\n}\n\n@if (ngControl?.hasError('email') && !customErrors['email']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{ translationContextErrors + 'EMAIL_INCORRECT' | uiTranslate | async }}</span>\n  </div>\n}\n\n@if (errorMessage) {\n  <div class=\"custom-errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{ errorMessage }}</span>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ValidationErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ValidationErrorComponent, isStandalone: true, selector: "ui-validation-error", inputs: { ngControl: "ngControl", touchedOn: "touchedOn", errorMessage: "errorMessage", label: "label", applicationTheme: "applicationTheme", customErrors: "customErrors" }, host: { properties: { "attr.theme": "this.applicationTheme" } }, ngImport: i0, template: "@for (key of customErrorKeys; track $index) {\n  @if (ngControl?.hasError(key) && (touchedOn ? ngControl?.touched : true)) {\n    <div class=\"errors\">\n      <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n      <span>{{ resolveErrorMessage(key) }}</span>\n    </div>\n  }\n}\n\n@if (ngControl?.hasError('maxlength') && !customErrors['maxlength']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{\n      translationContextErrors + 'MAX_LENGTH' | uiTranslate: { maxlength: getErrorValue('maxlength') } | async\n    }}</span>\n  </div>\n}\n\n@if (ngControl?.hasError('minlength') && !customErrors['min']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{\n      translationContextErrors + 'MIN_LENGTH' | uiTranslate: { maxlength: getErrorValue('minlength') } | async\n    }}</span>\n  </div>\n}\n\n@if (ngControl?.hasError('min') && !customErrors['min']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{ translationContextErrors + 'MIN' | uiTranslate: { min: getErrorValue('min') } | async }}</span>\n  </div>\n}\n\n@if (ngControl?.hasError('max') && !customErrors['max']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{ translationContextErrors + 'MAX' | uiTranslate: { max: getErrorValue('max') } | async }}</span>\n  </div>\n}\n\n@if (ngControl?.hasError('required') && (touchedOn ? ngControl?.touched : true) && !customErrors['required']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{\n      translationContextErrors + (label ? 'REQUIRED_FIELD' : 'REQUIRED') | uiTranslate: { label } | async\n    }}</span>\n  </div>\n}\n\n@if (ngControl?.hasError('email') && !customErrors['email']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{ translationContextErrors + 'EMAIL_INCORRECT' | uiTranslate | async }}</span>\n  </div>\n}\n\n@if (errorMessage) {\n  <div class=\"custom-errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{ errorMessage }}</span>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ValidationErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ValidationErrorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-validation-error', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponentModule, AsyncPipe, UiTranslatePipe], template: "@for (key of customErrorKeys; track $index) {\n  @if (ngControl?.hasError(key) && (touchedOn ? ngControl?.touched : true)) {\n    <div class=\"errors\">\n      <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n      <span>{{ resolveErrorMessage(key) }}</span>\n    </div>\n  }\n}\n\n@if (ngControl?.hasError('maxlength') && !customErrors['maxlength']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{\n      translationContextErrors + 'MAX_LENGTH' | uiTranslate: { maxlength: getErrorValue('maxlength') } | async\n    }}</span>\n  </div>\n}\n\n@if (ngControl?.hasError('minlength') && !customErrors['min']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{\n      translationContextErrors + 'MIN_LENGTH' | uiTranslate: { maxlength: getErrorValue('minlength') } | async\n    }}</span>\n  </div>\n}\n\n@if (ngControl?.hasError('min') && !customErrors['min']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{ translationContextErrors + 'MIN' | uiTranslate: { min: getErrorValue('min') } | async }}</span>\n  </div>\n}\n\n@if (ngControl?.hasError('max') && !customErrors['max']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{ translationContextErrors + 'MAX' | uiTranslate: { max: getErrorValue('max') } | async }}</span>\n  </div>\n}\n\n@if (ngControl?.hasError('required') && (touchedOn ? ngControl?.touched : true) && !customErrors['required']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{\n      translationContextErrors + (label ? 'REQUIRED_FIELD' : 'REQUIRED') | uiTranslate: { label } | async\n    }}</span>\n  </div>\n}\n\n@if (ngControl?.hasError('email') && !customErrors['email']) {\n  <div class=\"errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{ translationContextErrors + 'EMAIL_INCORRECT' | uiTranslate | async }}</span>\n  </div>\n}\n\n@if (errorMessage) {\n  <div class=\"custom-errors\">\n    <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n    <span>{{ errorMessage }}</span>\n  </div>\n}\n" }]
         }], propDecorators: { ngControl: [{
@@ -93,11 +93,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 
 class ValidationErrorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ValidationErrorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ValidationErrorModule, imports: [CommonModule, IconComponentModule, UiTranslatePipe, ValidationErrorComponent], exports: [ValidationErrorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ValidationErrorModule, imports: [CommonModule, IconComponentModule, ValidationErrorComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ValidationErrorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ValidationErrorModule, imports: [CommonModule, IconComponentModule, UiTranslatePipe, ValidationErrorComponent], exports: [ValidationErrorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ValidationErrorModule, imports: [CommonModule, IconComponentModule, ValidationErrorComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ValidationErrorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ValidationErrorModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [ValidationErrorComponent],

package/fesm2022/testgorilla-tgo-ui-components-write-with-ai.mjs

@@ -130,39 +130,39 @@ class WriteWithAiLlmService {
         parts.push('Respond with only the requested content. Do not include explanations or preamble.');
         return parts.join('\n\n');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WriteWithAiLlmService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WriteWithAiLlmService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WriteWithAiLlmService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WriteWithAiLlmService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WriteWithAiLlmService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WriteWithAiLlmService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.HttpClient }] });
 
 class WriteWithAiComponent {
     constructor() {
-        this.value = input('', ...(ngDevMode ? [{ debugName: "value" }] : []));
-        this.standalone = input(false, ...(ngDevMode ? [{ debugName: "standalone" }] : []));
-        this.defaultOpen = input(false, ...(ngDevMode ? [{ debugName: "defaultOpen" }] : []));
-        this.fieldLabel = input('', ...(ngDevMode ? [{ debugName: "fieldLabel" }] : []));
-        this.header = input('', ...(ngDevMode ? [{ debugName: "header" }] : []));
-        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-        this.promptValue = input('', ...(ngDevMode ? [{ debugName: "promptValue" }] : []));
-        this.tags = input([], ...(ngDevMode ? [{ debugName: "tags" }] : []));
-        this.status = input('idle', ...(ngDevMode ? [{ debugName: "status" }] : []));
-        this.subheader = input(undefined, ...(ngDevMode ? [{ debugName: "subheader" }] : []));
-        this.llmConfig = input(undefined, ...(ngDevMode ? [{ debugName: "llmConfig" }] : []));
+        this.value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.standalone = input(false, ...(ngDevMode ? [{ debugName: "standalone" }] : /* istanbul ignore next */ []));
+        this.defaultOpen = input(false, ...(ngDevMode ? [{ debugName: "defaultOpen" }] : /* istanbul ignore next */ []));
+        this.fieldLabel = input('', ...(ngDevMode ? [{ debugName: "fieldLabel" }] : /* istanbul ignore next */ []));
+        this.header = input('', ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.promptValue = input('', ...(ngDevMode ? [{ debugName: "promptValue" }] : /* istanbul ignore next */ []));
+        this.tags = input([], ...(ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []));
+        this.status = input('idle', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        this.subheader = input(undefined, ...(ngDevMode ? [{ debugName: "subheader" }] : /* istanbul ignore next */ []));
+        this.llmConfig = input(undefined, ...(ngDevMode ? [{ debugName: "llmConfig" }] : /* istanbul ignore next */ []));
         /** Layout: make the inner field stretch to fill its container height. */
-        this.fullHeight = input(false, ...(ngDevMode ? [{ debugName: "fullHeight" }] : []));
+        this.fullHeight = input(false, ...(ngDevMode ? [{ debugName: "fullHeight" }] : /* istanbul ignore next */ []));
         /** Layout: render the inner field without a visible border. */
-        this.borderless = input(false, ...(ngDevMode ? [{ debugName: "borderless" }] : []));
+        this.borderless = input(false, ...(ngDevMode ? [{ debugName: "borderless" }] : /* istanbul ignore next */ []));
         /**
          * When true, hides the free-text `ui-prompt` and renders the `tags` chips on their own.
          * Clicking a chip submits its label as the prompt via `promptSubmit`.
          * Use this when the host backend only accepts a constrained set of prompts (e.g. an enum).
          */
-        this.tagsOnly = input(false, ...(ngDevMode ? [{ debugName: "tagsOnly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.tagsOnly = input(false, { ...(ngDevMode ? { debugName: "tagsOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Opaque host metadata emitted with promptSubmit for backend integrations. */
-        this.metadata = input({}, ...(ngDevMode ? [{ debugName: "metadata" }] : []));
+        this.metadata = input({}, ...(ngDevMode ? [{ debugName: "metadata" }] : /* istanbul ignore next */ []));
         this.valueChange = output();
         this.promptChange = output();
         this.promptSubmit = output();
@@ -172,17 +172,17 @@ class WriteWithAiComponent {
         this.destroyRef = inject(DestroyRef);
         this.llmService = inject(WriteWithAiLlmService);
         this.uiTranslate = inject(UiTranslatePipe);
-        this.promptModel = signal('', ...(ngDevMode ? [{ debugName: "promptModel" }] : []));
-        this.isPanelManuallyOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPanelManuallyOpen" }] : []));
-        this.internalStatus = signal('idle', ...(ngDevMode ? [{ debugName: "internalStatus" }] : []));
-        this.internalValue = signal('', ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+        this.promptModel = signal('', ...(ngDevMode ? [{ debugName: "promptModel" }] : /* istanbul ignore next */ []));
+        this.isPanelManuallyOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPanelManuallyOpen" }] : /* istanbul ignore next */ []));
+        this.internalStatus = signal('idle', ...(ngDevMode ? [{ debugName: "internalStatus" }] : /* istanbul ignore next */ []));
+        this.internalValue = signal('', ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
         this.cancelRequest$ = new Subject();
         /** ControlValueAccessor: whether the form control is disabled. */
-        this.cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+        this.cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
         /** Tag carousel (tagsOnly mode): scroll container + arrow-enabled state. */
-        this.tagsScrollRef = viewChild('tagsScrollContainer', ...(ngDevMode ? [{ debugName: "tagsScrollRef" }] : []));
-        this.canScrollTagsLeft = signal(false, ...(ngDevMode ? [{ debugName: "canScrollTagsLeft" }] : []));
-        this.canScrollTagsRight = signal(false, ...(ngDevMode ? [{ debugName: "canScrollTagsRight" }] : []));
+        this.tagsScrollRef = viewChild('tagsScrollContainer', ...(ngDevMode ? [{ debugName: "tagsScrollRef" }] : /* istanbul ignore next */ []));
+        this.canScrollTagsLeft = signal(false, ...(ngDevMode ? [{ debugName: "canScrollTagsLeft" }] : /* istanbul ignore next */ []));
+        this.canScrollTagsRight = signal(false, ...(ngDevMode ? [{ debugName: "canScrollTagsRight" }] : /* istanbul ignore next */ []));
         /** ControlValueAccessor callbacks. */
         this.onChange = () => { };
         this.onTouched = () => { };
@@ -193,11 +193,11 @@ class WriteWithAiComponent {
             this.uiTranslate.transform(`${this.translationContext}MAKE_CHANGES`),
             this.uiTranslate.transform(`${this.translationContext}TRY_AGAIN`),
         ]).pipe(map(([cancel, accept, makeChanges, tryAgain]) => ({ cancel, accept, makeChanges, tryAgain }))), { initialValue: { cancel: '', accept: '', makeChanges: '', tryAgain: '' } });
-        this.isDefaultMode = computed(() => this.llmConfig()?.default === true, ...(ngDevMode ? [{ debugName: "isDefaultMode" }] : []));
-        this.effectiveStatus = computed(() => (this.isDefaultMode() ? this.internalStatus() : this.status()), ...(ngDevMode ? [{ debugName: "effectiveStatus" }] : []));
-        this.effectiveValue = computed(() => (this.isDefaultMode() ? this.internalValue() : this.value()), ...(ngDevMode ? [{ debugName: "effectiveValue" }] : []));
-        this.isPanelVisible = computed(() => this.standalone() || this.isPanelManuallyOpen(), ...(ngDevMode ? [{ debugName: "isPanelVisible" }] : []));
-        this.promptTags = computed(() => this.tags().map(tag => ({ id: tag.id, label: tag.label, autocomplete: tag.description ?? '' })), ...(ngDevMode ? [{ debugName: "promptTags" }] : []));
+        this.isDefaultMode = computed(() => this.llmConfig()?.default === true, ...(ngDevMode ? [{ debugName: "isDefaultMode" }] : /* istanbul ignore next */ []));
+        this.effectiveStatus = computed(() => (this.isDefaultMode() ? this.internalStatus() : this.status()), ...(ngDevMode ? [{ debugName: "effectiveStatus" }] : /* istanbul ignore next */ []));
+        this.effectiveValue = computed(() => (this.isDefaultMode() ? this.internalValue() : this.value()), ...(ngDevMode ? [{ debugName: "effectiveValue" }] : /* istanbul ignore next */ []));
+        this.isPanelVisible = computed(() => this.standalone() || this.isPanelManuallyOpen(), ...(ngDevMode ? [{ debugName: "isPanelVisible" }] : /* istanbul ignore next */ []));
+        this.promptTags = computed(() => this.tags().map(tag => ({ id: tag.id, label: tag.label, autocomplete: tag.description ?? '' })), ...(ngDevMode ? [{ debugName: "promptTags" }] : /* istanbul ignore next */ []));
         this.statusConfig = computed(() => {
             const l = this.labels();
             switch (this.effectiveStatus()) {
@@ -230,8 +230,8 @@ class WriteWithAiComponent {
                 default:
                     return null;
             }
-        }, ...(ngDevMode ? [{ debugName: "statusConfig" }] : []));
-        this.promptModelData = computed(() => ({ text: this.promptModel(), files: [] }), ...(ngDevMode ? [{ debugName: "promptModelData" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "statusConfig" }] : /* istanbul ignore next */ []));
+        this.promptModelData = computed(() => ({ text: this.promptModel(), files: [] }), ...(ngDevMode ? [{ debugName: "promptModelData" }] : /* istanbul ignore next */ []));
         effect(() => {
             const promptValue = this.promptValue();
             const isDefault = this.isDefaultMode();
@@ -405,8 +405,8 @@ class WriteWithAiComponent {
         }
         this.requestRefine.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WriteWithAiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: WriteWithAiComponent, isStandalone: true, selector: "ui-write-with-ai", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, standalone: { classPropertyName: "standalone", publicName: "standalone", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, promptValue: { classPropertyName: "promptValue", publicName: "promptValue", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: true, isRequired: false, transformFunction: null }, llmConfig: { classPropertyName: "llmConfig", publicName: "llmConfig", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, tagsOnly: { classPropertyName: "tagsOnly", publicName: "tagsOnly", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", promptChange: "promptChange", promptSubmit: "promptSubmit", cancelPending: "cancelPending", acceptResult: "acceptResult", requestRefine: "requestRefine" }, host: { styleAttribute: "display: block" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WriteWithAiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: WriteWithAiComponent, isStandalone: true, selector: "ui-write-with-ai", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, standalone: { classPropertyName: "standalone", publicName: "standalone", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, promptValue: { classPropertyName: "promptValue", publicName: "promptValue", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: true, isRequired: false, transformFunction: null }, llmConfig: { classPropertyName: "llmConfig", publicName: "llmConfig", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, tagsOnly: { classPropertyName: "tagsOnly", publicName: "tagsOnly", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", promptChange: "promptChange", promptSubmit: "promptSubmit", cancelPending: "cancelPending", acceptResult: "acceptResult", requestRefine: "requestRefine" }, host: { styleAttribute: "display: block" }, providers: [
             UiTranslatePipe,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -415,7 +415,7 @@ class WriteWithAiComponent {
             },
         ], viewQueries: [{ propertyName: "tagsScrollRef", first: true, predicate: ["tagsScrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"write-with-ai\"\n  [class.write-with-ai--standalone]=\"standalone()\"\n  [class.write-with-ai--full-height]=\"fullHeight()\"\n>\n  @if (!standalone()) {\n    <div class=\"write-with-ai__host\">\n      <ui-field\n        [label]=\"fieldLabel() || (translationContext + 'FIELD_LABEL' | uiTranslate | async)!\"\n        type=\"textarea\"\n        [showBottomContent]=\"false\"\n        [fullHeight]=\"fullHeight()\"\n        [borderless]=\"borderless()\"\n        [disabled]=\"cvaDisabled()\"\n        [ngModel]=\"effectiveValue()\"\n        (ngModelChange)=\"handleValueInput($event)\"\n      ></ui-field>\n      <ui-button\n        class=\"write-with-ai__cta\"\n        variant=\"ghost-ai\"\n        size=\"small\"\n        [label]=\"(translationContext + 'AI_ASSIST' | uiTranslate | async)!\"\n        iconName=\"Sparkle-in-line\"\n        iconPosition=\"left\"\n        [disabled]=\"isPanelVisible() || cvaDisabled()\"\n        (buttonClickEvent)=\"togglePanel()\"\n      ></ui-button>\n    </div>\n  }\n\n  @if (isPanelVisible()) {\n    <section\n      class=\"write-with-ai__panel\"\n      [class.write-with-ai__panel--loading]=\"effectiveStatus() === 'loading'\"\n      role=\"region\"\n      [attr.aria-label]=\"(translationContext + 'AI_WRITING_ASSISTANT' | uiTranslate | async)!\"\n    >\n      <header class=\"write-with-ai__panel-header\">\n        <div class=\"write-with-ai__panel-heading\">\n          <div class=\"write-with-ai__title-row\">\n            @if (effectiveStatus() !== 'loading') {\n              <ui-icon class=\"write-with-ai__title-icon\" name=\"Sparkle-in-line\" color=\"ai\"></ui-icon>\n            }\n            <h4 class=\"write-with-ai__title\">\n              {{ header() || (translationContext + 'HEADER' | uiTranslate | async) }}\n            </h4>\n          </div>\n          @if (subheader()) {\n            <p class=\"write-with-ai__subheader\">{{ subheader() }}</p>\n          }\n        </div>\n        @if (!standalone()) {\n          <ui-button\n            variant=\"icon-button\"\n            iconName=\"Close\"\n            size=\"small\"\n            [tooltip]=\"(translationContext + 'CLOSE' | uiTranslate | async)!\"\n            [ariaLabel]=\"(translationContext + 'CLOSE_AI_ASSISTANT' | uiTranslate | async)!\"\n            (buttonClickEvent)=\"togglePanel()\"\n          ></ui-button>\n        }\n      </header>\n\n      @if (effectiveStatus() === 'idle') {\n        @if (tagsOnly()) {\n          @if (tags().length) {\n            <div class=\"write-with-ai__tags-prompt\">\n              <div\n                class=\"write-with-ai__tags-container\"\n                role=\"group\"\n                [attr.aria-label]=\"header() || (translationContext + 'HEADER' | uiTranslate | async)\"\n                #tagsScrollContainer\n                (scroll)=\"measureTagScroll(tagsScrollContainer)\"\n              >\n                @for (tag of tags(); track tag.id) {\n                  <ui-tag\n                    [label]=\"tag.label\"\n                    [ariaLabel]=\"tag.label\"\n                    [isDisabled]=\"cvaDisabled()\"\n                    (press)=\"handleTagClick(tag)\"\n                  ></ui-tag>\n                }\n              </div>\n              <div class=\"write-with-ai__tags-arrows\">\n                <ui-button\n                  variant=\"icon-button\"\n                  size=\"small\"\n                  iconName=\"Arrow-chevron-left-in-line\"\n                  [tooltip]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n                  [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n                  [disabled]=\"cvaDisabled() || !canScrollTagsLeft()\"\n                  (buttonClickEvent)=\"scrollTags(tagsScrollContainer, -1)\"\n                ></ui-button>\n                <ui-button\n                  variant=\"icon-button\"\n                  size=\"small\"\n                  iconName=\"Arrow-chevron-right-in-line\"\n                  [tooltip]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n                  [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n                  [disabled]=\"cvaDisabled() || !canScrollTagsRight()\"\n                  (buttonClickEvent)=\"scrollTags(tagsScrollContainer, 1)\"\n                ></ui-button>\n              </div>\n            </div>\n          }\n        } @else {\n          <div class=\"write-with-ai__prompt\">\n            <ui-prompt\n              [ngModel]=\"promptModelData()\"\n              (ngModelChange)=\"handlePromptModelChange($event)\"\n              [tags]=\"promptTags()\"\n              [placeholder]=\"placeholder() || (translationContext + 'PLACEHOLDER' | uiTranslate | async)!\"\n              [showSendButton]=\"true\"\n              (promptData)=\"handlePromptSubmit($event)\"\n            ></ui-prompt>\n          </div>\n        }\n      }\n\n      @if (statusConfig(); as cfg) {\n        <ui-alert-banner\n          [alertType]=\"cfg.alertType\"\n          alertVariant=\"callout\"\n          [message]=\"(cfg.messageKey | uiTranslate | async)!\"\n          [includeDismissButton]=\"false\"\n          [isLoading]=\"cfg.variant === 'loading'\"\n          [hasIcon]=\"cfg.variant !== 'loading'\"\n          [actions]=\"cfg.actions\"\n          [isFullWidth]=\"true\"\n        ></ui-alert-banner>\n      }\n\n      <div class=\"write-with-ai__caveat\">\n        <ui-ai-caveat></ui-ai-caveat>\n      </div>\n    </section>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.write-with-ai{display:flex;flex-direction:column;gap:8px;padding-top:8px;max-width:100%;overflow:hidden}.write-with-ai--full-height{height:100%}.write-with-ai--full-height .write-with-ai__host{flex:1}.write-with-ai__host{position:relative;display:flex;flex-direction:column}.write-with-ai__cta{position:absolute;right:8px;bottom:8px;z-index:1;background-color:#fff;border-radius:100px}.write-with-ai__panel{border:none;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px;background-color:#f4f4f4}.write-with-ai__panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.write-with-ai__panel-heading{display:flex;flex-direction:column;gap:8px}.write-with-ai__title-row{display:flex;align-items:center;gap:8px}.write-with-ai__title{margin:0}.write-with-ai__subheader{margin:0;font-size:14px;line-height:22px;font-weight:400;color:#242424}.write-with-ai__quick-actions{display:flex;gap:8px;flex-wrap:wrap}.write-with-ai__prompt{display:flex;flex-direction:column;gap:4px}.write-with-ai__tags-prompt{display:flex;align-items:center;gap:4px;padding:8px;border:1px solid #919191;border-radius:10px;background-color:#fff}.write-with-ai__tags-container{display:flex;flex-flow:row nowrap;align-items:center;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.write-with-ai__tags-container::-webkit-scrollbar{display:none}.write-with-ai__tags-arrows{display:flex;align-items:center;gap:4px;flex-shrink:0}.write-with-ai__status-actions{display:flex;gap:8px;justify-content:flex-end}.write-with-ai__caveat{font-size:12px}@keyframes pulse-text{0%,to{opacity:1}50%{opacity:.5}}:host ::ng-deep .write-with-ai__host textarea{padding-bottom:48px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FieldComponentModule }, { kind: "component", type: i2.FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "isAutocompleteOff", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "autosizableTextarea", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i4.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: PromptModule }, { kind: "component", type: i5.PromptComponent, selector: "ui-prompt", inputs: ["tags", "actionTag", "maxCharacters", "supportedFileTypes", "autoClear", "showSendButton", "sendButtonDisabled", "enableFileUpload", "loading", "placeholder", "errorMessage", "dropdownItems", "dropdownHeading", "showDropdownClose", "disabled"], outputs: ["promptData", "actionTagFileSelected", "dropdownItemSelected", "dropdownClosed"] }, { kind: "ngmodule", type: AiCaveatComponentModule }, { kind: "component", type: i6.AiCaveatComponent, selector: "ui-ai-caveat", inputs: ["applicationTheme"] }, { kind: "ngmodule", type: AlertBannerComponentModule }, { kind: "component", type: i7.AlertBannerComponent, selector: "ui-alert-banner", inputs: ["alertType", "alertVariant", "message", "includeDismissButton", "shadow", "linkText", "linkUrl", "linkTarget", "actions", "applicationTheme", "isFullWidth", "closeButtonTooltip", "hasIcon", "isLoading", "fixed", "ariaDescribedby", "secondaryAlerts"], outputs: ["dismiss"] }, { kind: "ngmodule", type: TagComponentModule }, { kind: "component", type: i8.TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired", "showBadge", "notificationsAmount"], outputs: ["isSelectedChange", "close", "press"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WriteWithAiComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WriteWithAiComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-write-with-ai', changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'display: block' }, providers: [
                         UiTranslatePipe,
@@ -439,11 +439,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], standalone: [{ type: i0.Input, args: [{ isSignal: true, alias: "standalone", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], fieldLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldLabel", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], promptValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "promptValue", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], subheader: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheader", required: false }] }], llmConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "llmConfig", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], tagsOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagsOnly", required: false }] }], metadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "metadata", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], promptChange: [{ type: i0.Output, args: ["promptChange"] }], promptSubmit: [{ type: i0.Output, args: ["promptSubmit"] }], cancelPending: [{ type: i0.Output, args: ["cancelPending"] }], acceptResult: [{ type: i0.Output, args: ["acceptResult"] }], requestRefine: [{ type: i0.Output, args: ["requestRefine"] }], tagsScrollRef: [{ type: i0.ViewChild, args: ['tagsScrollContainer', { isSignal: true }] }] } });
 
 class WriteWithAiComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WriteWithAiComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: WriteWithAiComponentModule, imports: [WriteWithAiComponent], exports: [WriteWithAiComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WriteWithAiComponentModule, imports: [WriteWithAiComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WriteWithAiComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: WriteWithAiComponentModule, imports: [WriteWithAiComponent], exports: [WriteWithAiComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WriteWithAiComponentModule, imports: [WriteWithAiComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WriteWithAiComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WriteWithAiComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [WriteWithAiComponent],