@testgorilla/tgo-ui 7.6.1 → 7.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/components/password-strength/password-strength.component.d.ts +1 -0
  2. package/components/radio-button/radio-button.component.d.ts +10 -1
  3. package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs +1 -1
  4. package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs.map +1 -1
  5. package/fesm2022/testgorilla-tgo-ui-components-password-strength.mjs +6 -2
  6. package/fesm2022/testgorilla-tgo-ui-components-password-strength.mjs.map +1 -1
  7. package/fesm2022/testgorilla-tgo-ui-components-radio-button.mjs +17 -5
  8. package/fesm2022/testgorilla-tgo-ui-components-radio-button.mjs.map +1 -1
  9. package/mcp/catalog.json +1 -1
  10. package/package.json +27 -27
package/components/password-strength/password-strength.component.d.ts CHANGED
@@ -30,6 +30,7 @@ export declare class PasswordStrengthComponent {
30
30
  protected criteriaPassed: {
31
31
  [key: string]: boolean;
32
32
  };
33
+ protected showError: boolean;
33
34
  private _password;
34
35
  protected criteria: {
35
36
  translateKey: string;
package/components/radio-button/radio-button.component.d.ts CHANGED
@@ -73,6 +73,15 @@ export declare class RadioButtonComponent implements OnInit, OnChanges, ControlV
73
73
  * @memberof RadioButtonComponent
74
74
  */
75
75
  multiple: boolean;
76
+ /**
77
+ * Renders the radio button as a media card. The image/video/gif passed via
78
+ * the `[radio-media]` content slot fills the card and the radio + label sit
79
+ * on top, in the bottom-left, with a dark scrim for contrast.
80
+ *
81
+ * @type {boolean}
82
+ * @memberof RadioButtonComponent
83
+ */
84
+ mediaCard: boolean;
76
85
  /**
77
86
  * Determines value of the radio button.
78
87
  * Default: false
@@ -185,5 +194,5 @@ export declare class RadioButtonComponent implements OnInit, OnChanges, ControlV
185
194
  onFocus(isFocus: boolean): void;
186
195
  focus(): void;
187
196
  static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonComponent, [{ optional: true; }, { optional: true; self: true; }, { optional: true; host: true; }, null, null, null, null]>;
188
- static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "ui-radio-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "allowUnselect": { "alias": "allowUnselect"; "required": false; }; "companyColor": { "alias": "companyColor"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "value": { "alias": "value"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "truncateText": { "alias": "truncateText"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hideTooltipOnEllipsis": { "alias": "hideTooltipOnEllipsis"; "required": false; }; }, { "changeRadio": "changeRadio"; }, never, ["[radio-label]"], false, never>;
197
+ static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "ui-radio-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "allowUnselect": { "alias": "allowUnselect"; "required": false; }; "companyColor": { "alias": "companyColor"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "mediaCard": { "alias": "mediaCard"; "required": false; }; "value": { "alias": "value"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "truncateText": { "alias": "truncateText"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hideTooltipOnEllipsis": { "alias": "hideTooltipOnEllipsis"; "required": false; }; }, { "changeRadio": "changeRadio"; }, never, ["[radio-media]", "[radio-label]"], false, never>;
189
198
  }
package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs CHANGED
@@ -214,7 +214,7 @@ class FilterButtonComponent {
214
214
  this.cdr.markForCheck();
215
215
  }
216
216
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
217
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: FilterButtonComponent, isStandalone: false, selector: "ui-filter-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: false, isRequired: false, transformFunction: null }, singleSelection: { classPropertyName: "singleSelection", publicName: "singleSelection", isSignal: false, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: false, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: false, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", optionChange: "optionChange" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true }, { propertyName: "filterOptions", predicate: ["filterOption"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <ui-button\n [matTooltip]=\"tooltip()\"\n [matTooltipClass]=\"'tooltip-multi-line ' + applicationTheme\"\n [matTooltipPosition]=\"'above'\"\n class=\"ui-filter-button-trigger\"\n [class.button-opened]=\"isOpen()\"\n [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n [label]=\"displayedLabel() || label\"\n [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n (click)=\"toggle()\"\n type=\"button\"\n size=\"small\"\n [role]=\"'combobox'\"\n [tooltip]=\"value.length ? ' ' : ''\"\n [attr.aria-expanded]=\"isOpen()\"\n [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n [iconPosition]=\"iconPosition\"\n [applicationTheme]=\"applicationTheme\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n ></ui-button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"outsideClick()\"\n >\n @if (displayedOptions().length) {\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n translationContext + 'ACTIVE_ITEM'\n | uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n | async\n }}\n </div>\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n ? translationContext + 'SELECTED'\n : translationContext + 'DESELECTED'\n )\n | uiTranslate\n | async\n }}\n </div>\n }\n <div class=\"ui-filter-button\" #overlayContainer>\n <div class=\"ui-filter-button-header\" *ngIf=\"options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH\">\n <ui-field\n type=\"search\"\n [showBottomContent]=\"false\"\n [ngModel]=\"search()\"\n (ngModelChange)=\"search.set($event)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-field>\n </div>\n <div class=\"ui-filter-button-list\" #list tabindex=\"0\" (keydown)=\"keyDownHandler($event)\">\n @if (!displayedOptions().length && options().length) {\n <div class=\"no-results-found\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </div>\n } @else {\n <div *ngFor=\"let section of displayedOptions(); index as i\">\n <div\n *ngIf=\"section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle\"\n class=\"section-title\"\n >\n {{ section.sectionTitle }}\n </div>\n <div\n class=\"item\"\n [class.item-selected]=\"isSelected(section.value)\"\n tabindex=\"0\"\n (click)=\"optionChanged(!isSelected(section.value), section)\"\n (keydown.enter)=\"optionChanged(!isSelected(section.value), section)\"\n >\n <ui-radio-button\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [selected]=\"isSelected(section.value)\"\n (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n >\n </ui-radio-button>\n <ui-checkbox\n (click)=\"$event.stopPropagation()\"\n [class.with-label-number]=\"section.labelNumber !== undefined\"\n *ngIf=\"!singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [checked]=\"isSelected(section.value)\"\n (changed)=\"optionChanged($event, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n ></ui-checkbox>\n <ui-icon *ngIf=\"section.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n <span\n #tooltip=\"matTooltip\"\n class=\"item-label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ section.label }}\n </span>\n <span class=\"item-number\" *ngIf=\"section.labelNumber !== undefined\">({{ section.labelNumber }})</span>\n </div>\n </div>\n }\n </div>\n @if (!options().length && !!noOptionsMessage) {\n <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n } @else {\n <div class=\"ui-filter-button-footer\" *ngIf=\"allowClear || message\">\n <ui-button\n *ngIf=\"allowClear\"\n variant=\"text\"\n size=\"small\"\n [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n (click)=\"clearValue()\"\n [applicationTheme]=\"applicationTheme\"\n (keydown.escape)=\"toggle()\"\n ></ui-button>\n <div class=\"ui-filter-button-footer-message\">\n {{ message }}\n </div>\n </div>\n }\n </div>\n </ng-template>\n</ng-container>\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}ui-filter-button{display:inline-block}ui-filter-button ui-button .button-wrapper button{padding:7px 24px!important}ui-filter-button ui-button .button-wrapper button .icon ui-icon mat-icon.size-16 svg{width:24px;height:24px}ui-filter-button ui-button .button-wrapper button .label{line-clamp:1;-webkit-line-clamp:1!important}ui-filter-button ui-button.button-opened .button-wrapper button{background-color:#666!important;border-color:#666}ui-filter-button ui-button button.secondary{border:1px solid #242424}ui-filter-button ui-button button.secondary:hover{border-color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button{margin-top:4px;box-shadow:0 4px 16px #24242414;border-radius:10px;background-color:#fff;padding:0 0 8px;width:240px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-header{padding:8px 16px 0}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list{max-height:290px;overflow-y:auto;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .no-results-found{padding:8px 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item{padding:0 16px 0 5px;display:flex;align-items:center;gap:5px;height:48px;cursor:pointer}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item:hover,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-selected{background-color:#f4f4f4}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox.with-label-number{max-width:calc(100% - 25px)}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-number{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer ui-button{margin-left:-5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer-message{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-no-options{padding:24px}.tooltip-multi-line .mdc-tooltip__surface{text-align:left;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i5.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i6.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i7.CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "companyColor", "name", "label", "multiple", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "hideBuiltInErrors", "hideLabelInErrors", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changed"] }, { kind: "component", type: i8.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: "directive", type: i9.EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: i10.RadioButtonComponent, selector: "ui-radio-button", inputs: ["disabled", "selected", "allowUnselect", "companyColor", "name", "label", "multiple", "value", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex", "hideTooltipOnEllipsis"], outputs: ["changeRadio"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
217
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: FilterButtonComponent, isStandalone: false, selector: "ui-filter-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: false, isRequired: false, transformFunction: null }, singleSelection: { classPropertyName: "singleSelection", publicName: "singleSelection", isSignal: false, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: false, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: false, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", optionChange: "optionChange" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true }, { propertyName: "filterOptions", predicate: ["filterOption"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <ui-button\n [matTooltip]=\"tooltip()\"\n [matTooltipClass]=\"'tooltip-multi-line ' + applicationTheme\"\n [matTooltipPosition]=\"'above'\"\n class=\"ui-filter-button-trigger\"\n [class.button-opened]=\"isOpen()\"\n [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n [label]=\"displayedLabel() || label\"\n [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n (click)=\"toggle()\"\n type=\"button\"\n size=\"small\"\n [role]=\"'combobox'\"\n [tooltip]=\"value.length ? ' ' : ''\"\n [attr.aria-expanded]=\"isOpen()\"\n [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n [iconPosition]=\"iconPosition\"\n [applicationTheme]=\"applicationTheme\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n ></ui-button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"outsideClick()\"\n >\n @if (displayedOptions().length) {\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n translationContext + 'ACTIVE_ITEM'\n | uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n | async\n }}\n </div>\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n ? translationContext + 'SELECTED'\n : translationContext + 'DESELECTED'\n )\n | uiTranslate\n | async\n }}\n </div>\n }\n <div class=\"ui-filter-button\" #overlayContainer>\n <div class=\"ui-filter-button-header\" *ngIf=\"options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH\">\n <ui-field\n type=\"search\"\n [showBottomContent]=\"false\"\n [ngModel]=\"search()\"\n (ngModelChange)=\"search.set($event)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-field>\n </div>\n <div class=\"ui-filter-button-list\" #list tabindex=\"0\" (keydown)=\"keyDownHandler($event)\">\n @if (!displayedOptions().length && options().length) {\n <div class=\"no-results-found\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </div>\n } @else {\n <div *ngFor=\"let section of displayedOptions(); index as i\">\n <div\n *ngIf=\"section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle\"\n class=\"section-title\"\n >\n {{ section.sectionTitle }}\n </div>\n <div\n class=\"item\"\n [class.item-selected]=\"isSelected(section.value)\"\n tabindex=\"0\"\n (click)=\"optionChanged(!isSelected(section.value), section)\"\n (keydown.enter)=\"optionChanged(!isSelected(section.value), section)\"\n >\n <ui-radio-button\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [selected]=\"isSelected(section.value)\"\n (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n >\n </ui-radio-button>\n <ui-checkbox\n (click)=\"$event.stopPropagation()\"\n [class.with-label-number]=\"section.labelNumber !== undefined\"\n *ngIf=\"!singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [checked]=\"isSelected(section.value)\"\n (changed)=\"optionChanged($event, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n ></ui-checkbox>\n <ui-icon *ngIf=\"section.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n <span\n #tooltip=\"matTooltip\"\n class=\"item-label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ section.label }}\n </span>\n <span class=\"item-number\" *ngIf=\"section.labelNumber !== undefined\">({{ section.labelNumber }})</span>\n </div>\n </div>\n }\n </div>\n @if (!options().length && !!noOptionsMessage) {\n <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n } @else {\n <div class=\"ui-filter-button-footer\" *ngIf=\"allowClear || message\">\n <ui-button\n *ngIf=\"allowClear\"\n variant=\"text\"\n size=\"small\"\n [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n (click)=\"clearValue()\"\n [applicationTheme]=\"applicationTheme\"\n (keydown.escape)=\"toggle()\"\n ></ui-button>\n <div class=\"ui-filter-button-footer-message\">\n {{ message }}\n </div>\n </div>\n }\n </div>\n </ng-template>\n</ng-container>\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}ui-filter-button{display:inline-block}ui-filter-button ui-button .button-wrapper button{padding:7px 24px!important}ui-filter-button ui-button .button-wrapper button .icon ui-icon mat-icon.size-16 svg{width:24px;height:24px}ui-filter-button ui-button .button-wrapper button .label{line-clamp:1;-webkit-line-clamp:1!important}ui-filter-button ui-button.button-opened .button-wrapper button{background-color:#666!important;border-color:#666}ui-filter-button ui-button button.secondary{border:1px solid #242424}ui-filter-button ui-button button.secondary:hover{border-color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button{margin-top:4px;box-shadow:0 4px 16px #24242414;border-radius:10px;background-color:#fff;padding:0 0 8px;width:240px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-header{padding:8px 16px 0}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list{max-height:290px;overflow-y:auto;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .no-results-found{padding:8px 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item{padding:0 16px 0 5px;display:flex;align-items:center;gap:5px;height:48px;cursor:pointer}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item:hover,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-selected{background-color:#f4f4f4}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox.with-label-number{max-width:calc(100% - 25px)}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-number{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer ui-button{margin-left:-5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer-message{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-no-options{padding:24px}.tooltip-multi-line .mdc-tooltip__surface{text-align:left;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i5.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i6.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i7.CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "companyColor", "name", "label", "multiple", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "hideBuiltInErrors", "hideLabelInErrors", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changed"] }, { kind: "component", type: i8.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: "directive", type: i9.EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: i10.RadioButtonComponent, selector: "ui-radio-button", inputs: ["disabled", "selected", "allowUnselect", "companyColor", "name", "label", "multiple", "mediaCard", "value", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex", "hideTooltipOnEllipsis"], outputs: ["changeRadio"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
218
218
  }
219
219
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FilterButtonComponent, decorators: [{
220
220
  type: Component,
package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"testgorilla-tgo-ui-components-filter-button.mjs","sources":["../../../components/filter-button/filter-button.component.ts","../../../components/filter-button/filter-button.component.html","../../../components/filter-button/filter-button.component.module.ts","../../../components/filter-button/testgorilla-tgo-ui-components-filter-button.ts"],"sourcesContent":["import { FocusKeyManager } from '@angular/cdk/a11y';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n EventEmitter,\n HostBinding,\n Inject,\n input,\n Input,\n OnChanges,\n Optional,\n Output,\n QueryList,\n signal,\n SimpleChanges,\n ViewChild,\n ViewChildren,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IKeyboardEvent } from '@testgorilla/tgo-ui/components/core';\nimport { ButtonIconPosition } from '@testgorilla/tgo-ui/components/button';\nimport { IconName } from '@testgorilla/tgo-ui/components/icon';\nimport { FilterButtonOption, FilterValue, OptionChangeEvent } from './filter-button.model';\n\n@Component({\n selector: 'ui-filter-button',\n templateUrl: './filter-button.component.html',\n styleUrls: ['./filter-button.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class FilterButtonComponent implements OnChanges {\n @HostBinding() class = 'ui-filter-button';\n\n /**\n * The button label when no value is selected.\n *\n * @type {string}\n * @memberof FilterButtonComponent\n */\n @Input() label = '';\n\n /**\n * Optional message to display on the overflow bottom.\n *\n * @type {string}\n * @memberof FilterButtonComponent\n */\n @Input() message? = '';\n\n /**\n * List of selected values.\n *\n * @type {string[]}\n * @memberof FilterButtonComponent\n */\n @Input() value: FilterValue[] = [];\n\n /**\n * Whether the component is disabled.\n * Default: false.\n *\n * @type {boolean}\n * @memberof FilterButtonComponent\n */\n @Input() disabled = false;\n\n /**\n * List of options.\n *\n * @type {OptionType}\n * @memberof FilterButtonComponent\n */\n options = input<FilterButtonOption[]>([]);\n\n /**\n * Whether the user should be allowed to clear the values.\n * Default: true.\n *\n * @type {boolean}\n * @memberof FilterButtonComponent\n */\n @Input() allowClear = true;\n\n /**\n * Whether the user should be allowed to select single or multiple values.\n * Default: false.\n *\n * @type {boolean}\n * @memberof FilterButtonComponent\n */\n @Input() singleSelection? = false;\n\n /**\n * The icon name to display.\n *\n * @type {string}\n * @memberof FilterButtonComponent\n *\n **/\n\n @Input() iconName?: IconName;\n\n /**\n * The position of the icon.\n * Default: 'right'.\n *\n * @type {ButtonIconPosition}\n * @memberof FilterButtonComponent\n */\n @Input() iconPosition?: ButtonIconPosition = 'right';\n\n /**\n * Optional message to display if there are no options to select available\n *\n * @type {string}\n * @memberof FilterButtonComponent\n */\n @Input() noOptionsMessage? = '';\n\n /**\n * Emits the list of selected values when the selection changes.\n *\n * @type {EventEmitter<string[]>}\n * @memberof FilterButtonComponent\n */\n @Output() changed = new EventEmitter<FilterValue[]>();\n\n /**\n * Emits the option change event\n *\n * @type {EventEmitter<OptionChangeEvent>}\n * @memberof FilterButtonComponent\n */\n @Output() optionChange = new EventEmitter<OptionChangeEvent>();\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof FilterButtonComponent\n */\n @HostBinding('attr.theme')\n @Input()\n applicationTheme: ApplicationTheme = 'light';\n\n @ViewChild('overlayContainer') overlayContainer: any;\n @ViewChildren('filterOption') filterOptions: QueryList<any>;\n\n isOpen = signal<boolean>(false);\n displayedLabel = signal<string>('');\n tooltip = signal<string>('');\n search = signal<string>('');\n showTooltip: { [key: string]: boolean } = {};\n displayedOptions = computed(() => {\n let lastSectionTitle: string;\n return this.options()\n .map(option => {\n lastSectionTitle = option.sectionTitle || lastSectionTitle;\n return { ...option, sectionTitle: lastSectionTitle };\n })\n .filter(option => option.label.toLowerCase().includes(this.search().toLowerCase()));\n });\n readonly MIN_OPTIONS_LENGTH_FOR_SEARCH = 8;\n protected keyManager: FocusKeyManager<HTMLElement>;\n protected translationContext = 'FILTER_BUTTON.';\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,\n private readonly cdr: ChangeDetectorRef\n ) {\n if (this.defaultAppTheme) {\n this.applicationTheme = this.defaultAppTheme;\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['value']) {\n this.updateLabel();\n }\n }\n\n clearValue(): void {\n this.value = [];\n this.updateLabel();\n this.changed.emit(this.value);\n }\n\n outsideClick() {\n window.setTimeout(() => {\n this.isOpen.set(false);\n });\n }\n\n toggle(): void {\n this.isOpen.set(!this.isOpen());\n if (this.isOpen()) {\n this.keyManager = new FocusKeyManager(this.filterOptions).withWrap();\n this.keyManager.setActiveItem(0);\n }\n this.cdr.markForCheck();\n }\n\n isSelected(value?: FilterValue) {\n return this.value?.includes(value || '');\n }\n\n optionChanged(selected: boolean, option: FilterButtonOption) {\n this.value = this.value || [];\n if (this.singleSelection) {\n this.value = selected ? [option.value] : [];\n } else {\n if (selected) {\n this.value.push(option.value);\n } else {\n this.value.splice(this.value.indexOf(option.value), 1);\n }\n }\n this.changed.emit(this.value);\n this.optionChange.emit({ selected, option });\n this.updateLabel();\n }\n\n keyDownHandler(ev: any) {\n if (ev.key === IKeyboardEvent.ARROW_DOWN) {\n ev.preventDefault();\n this.keyManager.setNextItemActive();\n } else if (ev.key === IKeyboardEvent.ARROW_UP) {\n ev.preventDefault();\n this.keyManager.setPreviousItemActive();\n } else if (ev.key === IKeyboardEvent.ESCAPE) {\n this.isOpen.set(false);\n }\n }\n\n onLabelEllipsisChange(isEllipsis: boolean, value: FilterValue): void {\n this.showTooltip[value] = isEllipsis;\n }\n\n private updateLabel() {\n this.value = this.value || [];\n let displayedLabel = '';\n let tooltip = '';\n const sortedLabels = this.options()\n .filter(option => this.value.includes(option.value))\n .map(item => item?.label || '');\n\n if (sortedLabels.length > 0) {\n displayedLabel = this.options().find(option => option.value === this.value[0])?.label || '';\n tooltip = `${this.label}${sortedLabels.map(value => `\\n • ${value}`).join('')}`;\n }\n\n if (this.value.length > 1) {\n displayedLabel += ` (+${this.value.length - 1})`;\n }\n this.displayedLabel.set(displayedLabel);\n this.tooltip.set(tooltip);\n this.cdr.markForCheck();\n }\n}\n","<ng-container>\n <ui-button\n [matTooltip]=\"tooltip()\"\n [matTooltipClass]=\"'tooltip-multi-line ' + applicationTheme\"\n [matTooltipPosition]=\"'above'\"\n class=\"ui-filter-button-trigger\"\n [class.button-opened]=\"isOpen()\"\n [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n [label]=\"displayedLabel() || label\"\n [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n (click)=\"toggle()\"\n type=\"button\"\n size=\"small\"\n [role]=\"'combobox'\"\n [tooltip]=\"value.length ? ' ' : ''\"\n [attr.aria-expanded]=\"isOpen()\"\n [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n [iconPosition]=\"iconPosition\"\n [applicationTheme]=\"applicationTheme\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n ></ui-button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"outsideClick()\"\n >\n @if (displayedOptions().length) {\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n translationContext + 'ACTIVE_ITEM'\n | uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n | async\n }}\n </div>\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n ? translationContext + 'SELECTED'\n : translationContext + 'DESELECTED'\n )\n | uiTranslate\n | async\n }}\n </div>\n }\n <div class=\"ui-filter-button\" #overlayContainer>\n <div class=\"ui-filter-button-header\" *ngIf=\"options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH\">\n <ui-field\n type=\"search\"\n [showBottomContent]=\"false\"\n [ngModel]=\"search()\"\n (ngModelChange)=\"search.set($event)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-field>\n </div>\n <div class=\"ui-filter-button-list\" #list tabindex=\"0\" (keydown)=\"keyDownHandler($event)\">\n @if (!displayedOptions().length && options().length) {\n <div class=\"no-results-found\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </div>\n } @else {\n <div *ngFor=\"let section of displayedOptions(); index as i\">\n <div\n *ngIf=\"section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle\"\n class=\"section-title\"\n >\n {{ section.sectionTitle }}\n </div>\n <div\n class=\"item\"\n [class.item-selected]=\"isSelected(section.value)\"\n tabindex=\"0\"\n (click)=\"optionChanged(!isSelected(section.value), section)\"\n (keydown.enter)=\"optionChanged(!isSelected(section.value), section)\"\n >\n <ui-radio-button\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [selected]=\"isSelected(section.value)\"\n (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n >\n </ui-radio-button>\n <ui-checkbox\n (click)=\"$event.stopPropagation()\"\n [class.with-label-number]=\"section.labelNumber !== undefined\"\n *ngIf=\"!singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [checked]=\"isSelected(section.value)\"\n (changed)=\"optionChanged($event, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n ></ui-checkbox>\n <ui-icon *ngIf=\"section.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n <span\n #tooltip=\"matTooltip\"\n class=\"item-label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ section.label }}\n </span>\n <span class=\"item-number\" *ngIf=\"section.labelNumber !== undefined\">({{ section.labelNumber }})</span>\n </div>\n </div>\n }\n </div>\n @if (!options().length && !!noOptionsMessage) {\n <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n } @else {\n <div class=\"ui-filter-button-footer\" *ngIf=\"allowClear || message\">\n <ui-button\n *ngIf=\"allowClear\"\n variant=\"text\"\n size=\"small\"\n [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n (click)=\"clearValue()\"\n [applicationTheme]=\"applicationTheme\"\n (keydown.escape)=\"toggle()\"\n ></ui-button>\n <div class=\"ui-filter-button-footer-message\">\n {{ message }}\n </div>\n </div>\n }\n </div>\n </ng-template>\n</ng-container>\n","import { EllipseTextDirective } from '@testgorilla/tgo-ui/components/core';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { FilterButtonComponent } from './filter-button.component';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { CheckboxComponentModule } from '@testgorilla/tgo-ui/components/checkbox';\nimport { RadioButtonComponentModule } from '@testgorilla/tgo-ui/components/radio-button';\nimport { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';\nimport { FormsModule } from '@angular/forms';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\n@NgModule({\n declarations: [FilterButtonComponent],\n imports: [\n CommonModule,\n FormsModule,\n MatTooltipModule,\n OverlayModule,\n UiTranslatePipe,\n ButtonComponentModule,\n IconComponentModule,\n CheckboxComponentModule,\n FieldComponentModule,\n EllipseTextDirective,\n RadioButtonComponentModule,\n ],\n exports: [FilterButtonComponent],\n})\nexport class FilterButtonComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"testgorilla-tgo-ui-components-filter-button.mjs","sources":["../../../components/filter-button/filter-button.component.ts","../../../components/filter-button/filter-button.component.html","../../../components/filter-button/filter-button.component.module.ts","../../../components/filter-button/testgorilla-tgo-ui-components-filter-button.ts"],"sourcesContent":["import { FocusKeyManager } from '@angular/cdk/a11y';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n EventEmitter,\n HostBinding,\n Inject,\n input,\n Input,\n OnChanges,\n Optional,\n Output,\n QueryList,\n signal,\n SimpleChanges,\n ViewChild,\n ViewChildren,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IKeyboardEvent } from '@testgorilla/tgo-ui/components/core';\nimport { ButtonIconPosition } from '@testgorilla/tgo-ui/components/button';\nimport { IconName } from '@testgorilla/tgo-ui/components/icon';\nimport { FilterButtonOption, FilterValue, OptionChangeEvent } from './filter-button.model';\n\n@Component({\n selector: 'ui-filter-button',\n templateUrl: './filter-button.component.html',\n styleUrls: ['./filter-button.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class FilterButtonComponent implements OnChanges {\n @HostBinding() class = 'ui-filter-button';\n\n /**\n * The button label when no value is selected.\n *\n * @type {string}\n * @memberof FilterButtonComponent\n */\n @Input() label = '';\n\n /**\n * Optional message to display on the overflow bottom.\n *\n * @type {string}\n * @memberof FilterButtonComponent\n */\n @Input() message? = '';\n\n /**\n * List of selected values.\n *\n * @type {string[]}\n * @memberof FilterButtonComponent\n */\n @Input() value: FilterValue[] = [];\n\n /**\n * Whether the component is disabled.\n * Default: false.\n *\n * @type {boolean}\n * @memberof FilterButtonComponent\n */\n @Input() disabled = false;\n\n /**\n * List of options.\n *\n * @type {OptionType}\n * @memberof FilterButtonComponent\n */\n options = input<FilterButtonOption[]>([]);\n\n /**\n * Whether the user should be allowed to clear the values.\n * Default: true.\n *\n * @type {boolean}\n * @memberof FilterButtonComponent\n */\n @Input() allowClear = true;\n\n /**\n * Whether the user should be allowed to select single or multiple values.\n * Default: false.\n *\n * @type {boolean}\n * @memberof FilterButtonComponent\n */\n @Input() singleSelection? = false;\n\n /**\n * The icon name to display.\n *\n * @type {string}\n * @memberof FilterButtonComponent\n *\n **/\n\n @Input() iconName?: IconName;\n\n /**\n * The position of the icon.\n * Default: 'right'.\n *\n * @type {ButtonIconPosition}\n * @memberof FilterButtonComponent\n */\n @Input() iconPosition?: ButtonIconPosition = 'right';\n\n /**\n * Optional message to display if there are no options to select available\n *\n * @type {string}\n * @memberof FilterButtonComponent\n */\n @Input() noOptionsMessage? = '';\n\n /**\n * Emits the list of selected values when the selection changes.\n *\n * @type {EventEmitter<string[]>}\n * @memberof FilterButtonComponent\n */\n @Output() changed = new EventEmitter<FilterValue[]>();\n\n /**\n * Emits the option change event\n *\n * @type {EventEmitter<OptionChangeEvent>}\n * @memberof FilterButtonComponent\n */\n @Output() optionChange = new EventEmitter<OptionChangeEvent>();\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof FilterButtonComponent\n */\n @HostBinding('attr.theme')\n @Input()\n applicationTheme: ApplicationTheme = 'light';\n\n @ViewChild('overlayContainer') overlayContainer: any;\n @ViewChildren('filterOption') filterOptions: QueryList<any>;\n\n isOpen = signal<boolean>(false);\n displayedLabel = signal<string>('');\n tooltip = signal<string>('');\n search = signal<string>('');\n showTooltip: { [key: string]: boolean } = {};\n displayedOptions = computed(() => {\n let lastSectionTitle: string;\n return this.options()\n .map(option => {\n lastSectionTitle = option.sectionTitle || lastSectionTitle;\n return { ...option, sectionTitle: lastSectionTitle };\n })\n .filter(option => option.label.toLowerCase().includes(this.search().toLowerCase()));\n });\n readonly MIN_OPTIONS_LENGTH_FOR_SEARCH = 8;\n protected keyManager: FocusKeyManager<HTMLElement>;\n protected translationContext = 'FILTER_BUTTON.';\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,\n private readonly cdr: ChangeDetectorRef\n ) {\n if (this.defaultAppTheme) {\n this.applicationTheme = this.defaultAppTheme;\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['value']) {\n this.updateLabel();\n }\n }\n\n clearValue(): void {\n this.value = [];\n this.updateLabel();\n this.changed.emit(this.value);\n }\n\n outsideClick() {\n window.setTimeout(() => {\n this.isOpen.set(false);\n });\n }\n\n toggle(): void {\n this.isOpen.set(!this.isOpen());\n if (this.isOpen()) {\n this.keyManager = new FocusKeyManager(this.filterOptions).withWrap();\n this.keyManager.setActiveItem(0);\n }\n this.cdr.markForCheck();\n }\n\n isSelected(value?: FilterValue) {\n return this.value?.includes(value || '');\n }\n\n optionChanged(selected: boolean, option: FilterButtonOption) {\n this.value = this.value || [];\n if (this.singleSelection) {\n this.value = selected ? [option.value] : [];\n } else {\n if (selected) {\n this.value.push(option.value);\n } else {\n this.value.splice(this.value.indexOf(option.value), 1);\n }\n }\n this.changed.emit(this.value);\n this.optionChange.emit({ selected, option });\n this.updateLabel();\n }\n\n keyDownHandler(ev: any) {\n if (ev.key === IKeyboardEvent.ARROW_DOWN) {\n ev.preventDefault();\n this.keyManager.setNextItemActive();\n } else if (ev.key === IKeyboardEvent.ARROW_UP) {\n ev.preventDefault();\n this.keyManager.setPreviousItemActive();\n } else if (ev.key === IKeyboardEvent.ESCAPE) {\n this.isOpen.set(false);\n }\n }\n\n onLabelEllipsisChange(isEllipsis: boolean, value: FilterValue): void {\n this.showTooltip[value] = isEllipsis;\n }\n\n private updateLabel() {\n this.value = this.value || [];\n let displayedLabel = '';\n let tooltip = '';\n const sortedLabels = this.options()\n .filter(option => this.value.includes(option.value))\n .map(item => item?.label || '');\n\n if (sortedLabels.length > 0) {\n displayedLabel = this.options().find(option => option.value === this.value[0])?.label || '';\n tooltip = `${this.label}${sortedLabels.map(value => `\\n • ${value}`).join('')}`;\n }\n\n if (this.value.length > 1) {\n displayedLabel += ` (+${this.value.length - 1})`;\n }\n this.displayedLabel.set(displayedLabel);\n this.tooltip.set(tooltip);\n this.cdr.markForCheck();\n }\n}\n","<ng-container>\n <ui-button\n [matTooltip]=\"tooltip()\"\n [matTooltipClass]=\"'tooltip-multi-line ' + applicationTheme\"\n [matTooltipPosition]=\"'above'\"\n class=\"ui-filter-button-trigger\"\n [class.button-opened]=\"isOpen()\"\n [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n [label]=\"displayedLabel() || label\"\n [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n (click)=\"toggle()\"\n type=\"button\"\n size=\"small\"\n [role]=\"'combobox'\"\n [tooltip]=\"value.length ? ' ' : ''\"\n [attr.aria-expanded]=\"isOpen()\"\n [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n [iconPosition]=\"iconPosition\"\n [applicationTheme]=\"applicationTheme\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n ></ui-button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"outsideClick()\"\n >\n @if (displayedOptions().length) {\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n translationContext + 'ACTIVE_ITEM'\n | uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n | async\n }}\n </div>\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n ? translationContext + 'SELECTED'\n : translationContext + 'DESELECTED'\n )\n | uiTranslate\n | async\n }}\n </div>\n }\n <div class=\"ui-filter-button\" #overlayContainer>\n <div class=\"ui-filter-button-header\" *ngIf=\"options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH\">\n <ui-field\n type=\"search\"\n [showBottomContent]=\"false\"\n [ngModel]=\"search()\"\n (ngModelChange)=\"search.set($event)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-field>\n </div>\n <div class=\"ui-filter-button-list\" #list tabindex=\"0\" (keydown)=\"keyDownHandler($event)\">\n @if (!displayedOptions().length && options().length) {\n <div class=\"no-results-found\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </div>\n } @else {\n <div *ngFor=\"let section of displayedOptions(); index as i\">\n <div\n *ngIf=\"section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle\"\n class=\"section-title\"\n >\n {{ section.sectionTitle }}\n </div>\n <div\n class=\"item\"\n [class.item-selected]=\"isSelected(section.value)\"\n tabindex=\"0\"\n (click)=\"optionChanged(!isSelected(section.value), section)\"\n (keydown.enter)=\"optionChanged(!isSelected(section.value), section)\"\n >\n <ui-radio-button\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [selected]=\"isSelected(section.value)\"\n (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n >\n </ui-radio-button>\n <ui-checkbox\n (click)=\"$event.stopPropagation()\"\n [class.with-label-number]=\"section.labelNumber !== undefined\"\n *ngIf=\"!singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [checked]=\"isSelected(section.value)\"\n (changed)=\"optionChanged($event, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n ></ui-checkbox>\n <ui-icon *ngIf=\"section.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n <span\n #tooltip=\"matTooltip\"\n class=\"item-label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ section.label }}\n </span>\n <span class=\"item-number\" *ngIf=\"section.labelNumber !== undefined\">({{ section.labelNumber }})</span>\n </div>\n </div>\n }\n </div>\n @if (!options().length && !!noOptionsMessage) {\n <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n } @else {\n <div class=\"ui-filter-button-footer\" *ngIf=\"allowClear || message\">\n <ui-button\n *ngIf=\"allowClear\"\n variant=\"text\"\n size=\"small\"\n [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n (click)=\"clearValue()\"\n [applicationTheme]=\"applicationTheme\"\n (keydown.escape)=\"toggle()\"\n ></ui-button>\n <div class=\"ui-filter-button-footer-message\">\n {{ message }}\n </div>\n </div>\n }\n </div>\n </ng-template>\n</ng-container>\n","import { EllipseTextDirective } from '@testgorilla/tgo-ui/components/core';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { FilterButtonComponent } from './filter-button.component';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { CheckboxComponentModule } from '@testgorilla/tgo-ui/components/checkbox';\nimport { RadioButtonComponentModule } from '@testgorilla/tgo-ui/components/radio-button';\nimport { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';\nimport { FormsModule } from '@angular/forms';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\n@NgModule({\n declarations: [FilterButtonComponent],\n imports: [\n CommonModule,\n FormsModule,\n MatTooltipModule,\n OverlayModule,\n UiTranslatePipe,\n ButtonComponentModule,\n IconComponentModule,\n CheckboxComponentModule,\n FieldComponentModule,\n EllipseTextDirective,\n RadioButtonComponentModule,\n ],\n exports: [FilterButtonComponent],\n})\nexport class FilterButtonComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/fesm2022/testgorilla-tgo-ui-components-password-strength.mjs CHANGED
@@ -18,6 +18,9 @@ class PasswordStrengthComponent {
18
18
  */
19
19
  set password(value) {
20
20
  this._password = value;
21
+ if (value && value.length > 0) {
22
+ this.showError = true;
23
+ }
21
24
  this.checkCriteria(this._password);
22
25
  }
23
26
  constructor(defaultAppTheme) {
@@ -38,6 +41,7 @@ class PasswordStrengthComponent {
38
41
  */
39
42
  this.validationCheck = new EventEmitter();
40
43
  this.criteriaPassed = {};
44
+ this.showError = false;
41
45
  this._password = '';
42
46
  this.criteria = [
43
47
  { translateKey: 'PASSWORD.LOWERCASE', key: 'hasLowercase' },
@@ -78,11 +82,11 @@ class PasswordStrengthComponent {
78
82
  return this.applicationTheme === 'classic' ? 'Round-check' : 'Check-round-in-line';
79
83
  }
80
84
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PasswordStrengthComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
81
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: PasswordStrengthComponent, isStandalone: false, selector: "ui-password-strength", inputs: { applicationTheme: "applicationTheme", password: "password" }, outputs: { validationCheck: "validationCheck" }, ngImport: i0, template: "<div class=\"criteria-container\">\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n </div>\n\n <div\n *ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n </div>\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}.criteria-container{margin-top:14px}.criteria-container .progress{margin-bottom:16px}.criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.criteria-container .criterion.error span{color:#e02800}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i3.ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.UiTranslatePipe, name: "uiTranslate" }] }); }
85
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: PasswordStrengthComponent, isStandalone: false, selector: "ui-password-strength", inputs: { applicationTheme: "applicationTheme", password: "password" }, outputs: { validationCheck: "validationCheck" }, ngImport: i0, template: "<div class=\"criteria-container\">\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n </div>\n\n <div\n *ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n </div>\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}.criteria-container{margin-top:14px}.criteria-container .progress{margin-bottom:16px}.criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.criteria-container .criterion.error span{color:#e02800}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i3.ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.UiTranslatePipe, name: "uiTranslate" }] }); }
82
86
  }
83
87
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PasswordStrengthComponent, decorators: [{
84
88
  type: Component,
85
- args: [{ selector: 'ui-password-strength', standalone: false, template: "<div class=\"criteria-container\">\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n </div>\n\n <div\n *ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n </div>\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}.criteria-container{margin-top:14px}.criteria-container .progress{margin-bottom:16px}.criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.criteria-container .criterion.error span{color:#e02800}\n"] }]
89
+ args: [{ selector: 'ui-password-strength', standalone: false, template: "<div class=\"criteria-container\">\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n </div>\n\n <div\n *ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n </div>\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}.criteria-container{margin-top:14px}.criteria-container .progress{margin-bottom:16px}.criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.criteria-container .criterion.error span{color:#e02800}\n"] }]
86
90
  }], ctorParameters: () => [{ type: undefined, decorators: [{
87
91
  type: Optional
88
92
  }, {
package/fesm2022/testgorilla-tgo-ui-components-password-strength.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"testgorilla-tgo-ui-components-password-strength.mjs","sources":["../../../components/password-strength/password-strength.component.ts","../../../components/password-strength/password-strength.component.html","../../../components/password-strength/password-strength.component.module.ts","../../../components/password-strength/testgorilla-tgo-ui-components-password-strength.ts"],"sourcesContent":["import { Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconName } from '@testgorilla/tgo-ui/components/icon';\n\n@Component({\n selector: 'ui-password-strength',\n templateUrl: './password-strength.component.html',\n styleUrls: ['./password-strength.component.scss'],\n standalone: false,\n})\nexport class PasswordStrengthComponent {\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof PasswordStrengthComponent\n */\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /**\n * The password that needs to be checked\n * @property password\n * @type {string}\n * @memberof PasswordStrengthComponent\n */\n @Input() set password(value: string) {\n this._password = value;\n this.checkCriteria(this._password);\n }\n\n /**\n * Event that outputs validation check result\n * @property validationCheck\n * @type {boolean}\n * @memberof PasswordStrengthComponent\n */\n @Output() validationCheck = new EventEmitter<boolean>();\n\n protected progressValue: number;\n protected criteriaPassed: { [key: string]: boolean } = {};\n private _password = '';\n protected criteria: { translateKey: string; key: string }[] = [\n { translateKey: 'PASSWORD.LOWERCASE', key: 'hasLowercase' },\n { translateKey: 'PASSWORD.UPPERCASE', key: 'hasUppercase' },\n { translateKey: 'PASSWORD.NUMBER', key: 'hasNumber' },\n { translateKey: 'PASSWORD.SPECIAL_CHARACTER', key: 'hasSpecialChar' },\n { translateKey: 'PASSWORD.CHARACTERS', key: 'hasMinLength' },\n ];\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (this.defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n checkCriteria(password: string): void {\n this.criteriaPassed = {\n hasLowercase: /^(?=.*?[a-z])/.test(password),\n hasUppercase: /^(?=.*?[A-Z])/.test(password),\n hasNumber: /^(?=.*?[0-9])/.test(password),\n hasSpecialChar: /^(?=.*?[\" !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~])/.test(password),\n hasMinLength: password.length >= 12,\n };\n\n const passedCount = this.countPassed();\n this.progressValue = Math.min(Math.max(passedCount * (100 / Object.keys(this.criteriaPassed).length), 1), 100);\n this.validationCheck.emit(passedCount === Object.keys(this.criteriaPassed).length);\n }\n\n private countPassed(): number {\n let count = 0;\n for (const key in this.criteriaPassed) {\n if (Object.prototype.hasOwnProperty.call(this.criteriaPassed, key) && this.criteriaPassed[key]) {\n count++;\n }\n }\n return count;\n }\n\n get infoIcon(): IconName {\n return this.applicationTheme === 'classic' ? 'Info' : 'Info-in-line';\n }\n\n get checkIcon(): IconName {\n return this.applicationTheme === 'classic' ? 'Round-check' : 'Check-round-in-line';\n }\n}\n","<div class=\"criteria-container\">\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n </div>\n\n <div\n *ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PasswordStrengthComponent } from './password-strength.component';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ProgressBarComponentModule } from '@testgorilla/tgo-ui/components/progress-bar';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\n\n@NgModule({\n declarations: [PasswordStrengthComponent],\n imports: [CommonModule, IconComponentModule, ProgressBarComponentModule, UiTranslatePipe],\n exports: [PasswordStrengthComponent],\n})\nexport class PasswordStrengthComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;MAUa,yBAAyB,CAAA;AAUpC;;;;;AAKG;IACH,IAAa,QAAQ,CAAC,KAAa,EAAA;AACjC,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC;IACpC;AAqBA,IAAA,WAAA,CAC6E,eAAiC,EAAA;QAAjC,IAAA,CAAA,eAAe,GAAf,eAAe;AAxC5F;;;;;;AAMG;QACM,IAAA,CAAA,gBAAgB,GAAqB,OAAO;AAarD;;;;;AAKG;AACO,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,YAAY,EAAW;QAG7C,IAAA,CAAA,cAAc,GAA+B,EAAE;QACjD,IAAA,CAAA,SAAS,GAAG,EAAE;AACZ,QAAA,IAAA,CAAA,QAAQ,GAA4C;AAC5D,YAAA,EAAE,YAAY,EAAE,oBAAoB,EAAE,GAAG,EAAE,cAAc,EAAE;AAC3D,YAAA,EAAE,YAAY,EAAE,oBAAoB,EAAE,GAAG,EAAE,cAAc,EAAE;AAC3D,YAAA,EAAE,YAAY,EAAE,iBAAiB,EAAE,GAAG,EAAE,WAAW,EAAE;AACrD,YAAA,EAAE,YAAY,EAAE,4BAA4B,EAAE,GAAG,EAAE,gBAAgB,EAAE;AACrE,YAAA,EAAE,YAAY,EAAE,qBAAqB,EAAE,GAAG,EAAE,cAAc,EAAE;SAC7D;AAKC,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACxB,YAAA,IAAI,CAAC,gBAAgB,GAAG,eAAe;QACzC;IACF;AAEA,IAAA,aAAa,CAAC,QAAgB,EAAA;QAC5B,IAAI,CAAC,cAAc,GAAG;AACpB,YAAA,YAAY,EAAE,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC5C,YAAA,YAAY,EAAE,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC5C,YAAA,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC;AACzC,YAAA,cAAc,EAAE,6CAA6C,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC5E,YAAA,YAAY,EAAE,QAAQ,CAAC,MAAM,IAAI,EAAE;SACpC;AAED,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE;AACtC,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,IAAI,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC;AAC9G,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC;IACpF;IAEQ,WAAW,GAAA;QACjB,IAAI,KAAK,GAAG,CAAC;AACb,QAAA,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;YACrC,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE;AAC9F,gBAAA,KAAK,EAAE;YACT;QACF;AACA,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,MAAM,GAAG,cAAc;IACtE;AAEA,IAAA,IAAI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,aAAa,GAAG,qBAAqB;IACpF;AA9EW,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,yBAAyB,kBAyCd,oCAAoC,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAzC/C,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,yBAAyB,0MCVtC,qsBAsBA,EAAA,MAAA,EAAA,CAAA,2uFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,IAAA,EAAA,aAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FDZa,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBANrC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sBAAsB,cAGpB,KAAK,EAAA,QAAA,EAAA,qsBAAA,EAAA,MAAA,EAAA,CAAA,2uFAAA,CAAA,EAAA;;0BA2Cd;;0BAAY,MAAM;2BAAC,oCAAoC;yCAjCjD,gBAAgB,EAAA,CAAA;sBAAxB;gBAQY,QAAQ,EAAA,CAAA;sBAApB;gBAWS,eAAe,EAAA,CAAA;sBAAxB;;;MEzBU,+BAA+B,CAAA;+GAA/B,+BAA+B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAA/B,+BAA+B,EAAA,YAAA,EAAA,CAJ3B,yBAAyB,CAAA,EAAA,OAAA,EAAA,CAC9B,YAAY,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,eAAe,CAAA,EAAA,OAAA,EAAA,CAC9E,yBAAyB,CAAA,EAAA,CAAA,CAAA;AAExB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,+BAA+B,EAAA,OAAA,EAAA,CAHhC,YAAY,EAAE,mBAAmB,EAAE,0BAA0B,CAAA,EAAA,CAAA,CAAA;;4FAG5D,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAL3C,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,yBAAyB,CAAC;oBACzC,OAAO,EAAE,CAAC,YAAY,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,eAAe,CAAC;oBACzF,OAAO,EAAE,CAAC,yBAAyB,CAAC;AACrC,iBAAA;;;ACXD;;AAEG;;;;"}
1
+ {"version":3,"file":"testgorilla-tgo-ui-components-password-strength.mjs","sources":["../../../components/password-strength/password-strength.component.ts","../../../components/password-strength/password-strength.component.html","../../../components/password-strength/password-strength.component.module.ts","../../../components/password-strength/testgorilla-tgo-ui-components-password-strength.ts"],"sourcesContent":["import { Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconName } from '@testgorilla/tgo-ui/components/icon';\n\n@Component({\n selector: 'ui-password-strength',\n templateUrl: './password-strength.component.html',\n styleUrls: ['./password-strength.component.scss'],\n standalone: false,\n})\nexport class PasswordStrengthComponent {\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof PasswordStrengthComponent\n */\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /**\n * The password that needs to be checked\n * @property password\n * @type {string}\n * @memberof PasswordStrengthComponent\n */\n @Input() set password(value: string) {\n this._password = value;\n if (value && value.length > 0) {\n this.showError = true;\n }\n this.checkCriteria(this._password);\n }\n\n /**\n * Event that outputs validation check result\n * @property validationCheck\n * @type {boolean}\n * @memberof PasswordStrengthComponent\n */\n @Output() validationCheck = new EventEmitter<boolean>();\n\n protected progressValue: number;\n protected criteriaPassed: { [key: string]: boolean } = {};\n protected showError = false;\n private _password = '';\n protected criteria: { translateKey: string; key: string }[] = [\n { translateKey: 'PASSWORD.LOWERCASE', key: 'hasLowercase' },\n { translateKey: 'PASSWORD.UPPERCASE', key: 'hasUppercase' },\n { translateKey: 'PASSWORD.NUMBER', key: 'hasNumber' },\n { translateKey: 'PASSWORD.SPECIAL_CHARACTER', key: 'hasSpecialChar' },\n { translateKey: 'PASSWORD.CHARACTERS', key: 'hasMinLength' },\n ];\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (this.defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n checkCriteria(password: string): void {\n this.criteriaPassed = {\n hasLowercase: /^(?=.*?[a-z])/.test(password),\n hasUppercase: /^(?=.*?[A-Z])/.test(password),\n hasNumber: /^(?=.*?[0-9])/.test(password),\n hasSpecialChar: /^(?=.*?[\" !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~])/.test(password),\n hasMinLength: password.length >= 12,\n };\n\n const passedCount = this.countPassed();\n this.progressValue = Math.min(Math.max(passedCount * (100 / Object.keys(this.criteriaPassed).length), 1), 100);\n this.validationCheck.emit(passedCount === Object.keys(this.criteriaPassed).length);\n }\n\n private countPassed(): number {\n let count = 0;\n for (const key in this.criteriaPassed) {\n if (Object.prototype.hasOwnProperty.call(this.criteriaPassed, key) && this.criteriaPassed[key]) {\n count++;\n }\n }\n return count;\n }\n\n get infoIcon(): IconName {\n return this.applicationTheme === 'classic' ? 'Info' : 'Info-in-line';\n }\n\n get checkIcon(): IconName {\n return this.applicationTheme === 'classic' ? 'Round-check' : 'Check-round-in-line';\n }\n}\n","<div class=\"criteria-container\">\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n </div>\n\n <div\n *ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PasswordStrengthComponent } from './password-strength.component';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ProgressBarComponentModule } from '@testgorilla/tgo-ui/components/progress-bar';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\n\n@NgModule({\n declarations: [PasswordStrengthComponent],\n imports: [CommonModule, IconComponentModule, ProgressBarComponentModule, UiTranslatePipe],\n exports: [PasswordStrengthComponent],\n})\nexport class PasswordStrengthComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/fesm2022/testgorilla-tgo-ui-components-radio-button.mjs CHANGED
@@ -22,8 +22,9 @@ class RadioButtonComponent {
22
22
  if (this._isProcessingClick) {
23
23
  return;
24
24
  }
25
- if (event.target?.classList?.value?.includes?.('mat-mdc-radio-button') ||
26
- event.target?.classList?.value?.includes?.('mdc-form-field')) {
25
+ const targetClasses = event.target?.classList?.value ?? '';
26
+ const fromMediaArea = this.mediaCard && event.target?.closest?.('.media-card-wrapper');
27
+ if (targetClasses.includes('mat-mdc-radio-button') || targetClasses.includes('mdc-form-field') || fromMediaArea) {
27
28
  this._isProcessingClick = true;
28
29
  this.radioElement._inputElement.nativeElement.click();
29
30
  this._isProcessingClick = false;
@@ -99,6 +100,15 @@ class RadioButtonComponent {
99
100
  * @memberof RadioButtonComponent
100
101
  */
101
102
  this.multiple = false;
103
+ /**
104
+ * Renders the radio button as a media card. The image/video/gif passed via
105
+ * the `[radio-media]` content slot fills the card and the radio + label sit
106
+ * on top, in the bottom-left, with a dark scrim for contrast.
107
+ *
108
+ * @type {boolean}
109
+ * @memberof RadioButtonComponent
110
+ */
111
+ this.mediaCard = false;
102
112
  /**
103
113
  *
104
114
  * Defines the application theme
@@ -220,7 +230,7 @@ class RadioButtonComponent {
220
230
  this.changeRadio?.emit({ optionName: this.radioElement.value, optionChecked: this.radioElement.checked });
221
231
  }
222
232
  else {
223
- this.selected = this.radioElement.checked;
233
+ this.selected = true;
224
234
  this.changeRadio.emit({ optionName: this.radioElement.value, optionChecked: true });
225
235
  }
226
236
  if (this.disabled) {
@@ -285,7 +295,7 @@ class RadioButtonComponent {
285
295
  this.radioElement.focus();
286
296
  }
287
297
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RadioButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgControl, host: true, optional: true }, { token: i0.DestroyRef }, { token: i2.FocusMonitor }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
288
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: RadioButtonComponent, isStandalone: false, selector: "ui-radio-button", inputs: { disabled: "disabled", selected: "selected", allowUnselect: "allowUnselect", companyColor: "companyColor", name: "name", label: "label", multiple: "multiple", value: "value", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", hasError: "hasError", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", truncateText: "truncateText", alignment: "alignment", tabIndex: "tabIndex", hideTooltipOnEllipsis: "hideTooltipOnEllipsis" }, outputs: { changeRadio: "changeRadio" }, host: { listeners: { "focus": "radioElement.focus()", "click": "onHostClick($event)" }, properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "style.--color": "this.companyColor" } }, viewQueries: [{ propertyName: "radioElement", first: true, predicate: ["radio"], descendants: true }, { propertyName: "tooltipElement", first: true, predicate: ["tooltip"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #radioContainer\n tabindex=\"0\"\n [class]=\"multiple ? 'radio-container' : 'radio'\"\n [class.multiple-disabled]=\"disabled && multiple\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"clickRadio(); radioContainer.focus()\"\n (keydown.space)=\"clickRadio(); radioContainer.focus()\"\n>\n <mat-radio-button\n #radio\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n class=\"radio-button\"\n [required]=\"ariaRequired\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n [tabIndex]=\"tabIndex\"\n >\n @if (label) {\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ label }}</span\n >\n }\n <ng-content select=\"[radio-label]\"></ng-content>\n </mat-radio-button>\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}.mat-mdc-radio-button.mat-accent{--mat-radio-checked-ripple-color: var(--color) !important;--mdc-radio-selected-focus-icon-color: var(--color) !important;--mdc-radio-selected-pressed-icon-color: var(--color) !important}::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__inner-circle{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-radio-button .mat-ripple-element{background-color:var(--color)!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled.mat-radio-checked .mdc-radio__outer-circle,.mat-radio-button.mat-radio-disabled .mdc-radio__outer-circle{border-color:#888!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled .mdc-radio__inner-circle{background-color:#888!important}[theme=dark] .mat-mdc-radio-button,[theme=light] .mat-mdc-radio-button{width:100%!important}[theme=dark] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mdc-form-field{width:100%}[theme=dark] .mat-mdc-radio-button.mat-accent,[theme=light] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #242424 !important}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled{--mdc-radio-disabled-unselected-icon-color: #919191;--mdc-radio-disabled-selected-icon-opacity: 1;--mdc-radio-disabled-unselected-icon-opacity: 1;--color: #919191}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background{background:#e9e9e9;border-radius:100%}[theme=dark] ::ng-deep .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio__background{background:#fff!important;border-radius:100%;scale:.8}[theme=dark] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle,[theme=light] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:1px}[theme=dark] ::ng-deep .mat-ripple,[theme=light] ::ng-deep .mat-ripple{display:none}[haserror=true] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:2px}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-checked ::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border:1px solid #ffffff;border-radius:64px;background:#fff}.multiple-checked ::ng-deep label{color:#fff;height:100%}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#f4f4f4;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800}.multiple-unchecked{border:1px solid #e0e0e0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #e0e0e0}.multiple-unchecked ::ng-deep label{height:100%}.multiple-unchecked ::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff}.multiple-unchecked[theme=dark][hasError=false]:not(.multiple-disabled):hover,.multiple-unchecked[theme=light][hasError=false]:not(.multiple-disabled):hover{outline:1px solid #242424;background:#fff;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}.multiple-unchecked ::ng-deep label,.multiple-checked ::ng-deep label{padding-left:0;width:fit-content;cursor:pointer}.radio-container{cursor:pointer}.radio-container .label{cursor:pointer;-webkit-user-select:none;user-select:none}.radio-button .label{cursor:pointer;-webkit-user-select:none;user-select:none;padding-left:4px}:host *[hasError=true] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #e02800 !important;--mdc-radio-unselected-hover-icon-color: #e02800 !important;--mdc-radio-unselected-focus-icon-color: #e02800 !important}:host ::ng-deep .mat-mdc-radio-touch-target{height:40px;width:40px}.radio,.radio-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.radio[alignment=top] ::ng-deep .mdc-form-field,.radio-container[alignment=top] ::ng-deep .mdc-form-field{align-items:start}.radio[alignment=top] .label,.radio-container[alignment=top] .label{margin-top:10px}.radio[truncate-text=true] .label,.radio[truncate-text=true] ::ng-deep label,.radio-container[truncate-text=true] .label,.radio-container[truncate-text=true] ::ng-deep label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.radio-container[hasError=true]{outline:1px solid #e02800}.radio .label{display:block;width:100%;cursor:pointer}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused{outline:none;--mat-radio-checked-ripple-color: transparent !important;--mat-radio-ripple-color: transparent !important}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;outline:2px solid #ffffff;border-radius:100px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i5.EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
298
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: RadioButtonComponent, isStandalone: false, selector: "ui-radio-button", inputs: { disabled: "disabled", selected: "selected", allowUnselect: "allowUnselect", companyColor: "companyColor", name: "name", label: "label", multiple: "multiple", mediaCard: "mediaCard", value: "value", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", hasError: "hasError", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", truncateText: "truncateText", alignment: "alignment", tabIndex: "tabIndex", hideTooltipOnEllipsis: "hideTooltipOnEllipsis" }, outputs: { changeRadio: "changeRadio" }, host: { listeners: { "focus": "radioElement.focus()", "click": "onHostClick($event)" }, properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "style.--color": "this.companyColor" } }, viewQueries: [{ propertyName: "radioElement", first: true, predicate: ["radio"], descendants: true }, { propertyName: "tooltipElement", first: true, predicate: ["tooltip"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #radioContainer\n tabindex=\"0\"\n [class]=\"multiple ? 'radio-container' : 'radio'\"\n [class.multiple-disabled]=\"disabled && multiple\"\n [class.media-card]=\"mediaCard\"\n [class.media-card-selected]=\"mediaCard && selected\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"clickRadio(); radioContainer.focus()\"\n (keydown.space)=\"clickRadio(); radioContainer.focus()\"\n>\n @if (mediaCard) {\n <div class=\"media-card-wrapper\" aria-hidden=\"true\">\n <ng-content select=\"[radio-media]\"></ng-content>\n </div>\n }\n <mat-radio-button\n #radio\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n class=\"radio-button\"\n [required]=\"ariaRequired\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n [tabIndex]=\"tabIndex\"\n >\n @if (label) {\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ label }}</span\n >\n }\n <ng-content select=\"[radio-label]\"></ng-content>\n </mat-radio-button>\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}.mat-mdc-radio-button.mat-accent{--mat-radio-checked-ripple-color: var(--color) !important;--mdc-radio-selected-focus-icon-color: var(--color) !important;--mdc-radio-selected-pressed-icon-color: var(--color) !important}::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__inner-circle{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-radio-button .mat-ripple-element{background-color:var(--color)!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled.mat-radio-checked .mdc-radio__outer-circle,.mat-radio-button.mat-radio-disabled .mdc-radio__outer-circle{border-color:#888!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled .mdc-radio__inner-circle{background-color:#888!important}[theme=dark] .mat-mdc-radio-button,[theme=light] .mat-mdc-radio-button{width:100%!important}[theme=dark] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mdc-form-field{width:100%}[theme=dark] .mat-mdc-radio-button.mat-accent,[theme=light] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #242424 !important}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled{--mdc-radio-disabled-unselected-icon-color: #919191;--mdc-radio-disabled-selected-icon-opacity: 1;--mdc-radio-disabled-unselected-icon-opacity: 1;--color: #919191}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background{background:#e9e9e9;border-radius:100%}[theme=dark] ::ng-deep .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio__background{background:#fff!important;border-radius:100%;scale:.8}[theme=dark] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle,[theme=light] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:1px}[theme=dark] ::ng-deep .mat-ripple,[theme=light] ::ng-deep .mat-ripple{display:none}[haserror=true] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:2px}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-checked ::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border:1px solid #ffffff;border-radius:64px;background:#fff}.multiple-checked ::ng-deep label{color:#fff;height:100%}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#f4f4f4;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800}.multiple-unchecked{border:1px solid #e0e0e0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #e0e0e0}.multiple-unchecked ::ng-deep label{height:100%}.multiple-unchecked ::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff}.multiple-unchecked[theme=dark][hasError=false]:not(.multiple-disabled):hover,.multiple-unchecked[theme=light][hasError=false]:not(.multiple-disabled):hover{outline:1px solid #242424;background:#fff;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}.multiple-unchecked ::ng-deep label,.multiple-checked ::ng-deep label{padding-left:0;width:fit-content;cursor:pointer}.radio-container{cursor:pointer}.radio-container .label{cursor:pointer;-webkit-user-select:none;user-select:none}.radio-button .label{cursor:pointer;-webkit-user-select:none;user-select:none;padding-left:4px}:host *[hasError=true] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #e02800 !important;--mdc-radio-unselected-hover-icon-color: #e02800 !important;--mdc-radio-unselected-focus-icon-color: #e02800 !important}:host ::ng-deep .mat-mdc-radio-touch-target{height:40px;width:40px}.radio,.radio-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.radio[alignment=top] ::ng-deep .mdc-form-field,.radio-container[alignment=top] ::ng-deep .mdc-form-field{align-items:start}.radio[alignment=top] .label,.radio-container[alignment=top] .label{margin-top:10px}.radio[truncate-text=true] .label,.radio[truncate-text=true] ::ng-deep label,.radio-container[truncate-text=true] .label,.radio-container[truncate-text=true] ::ng-deep label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.radio-container[hasError=true]{outline:1px solid #e02800}.media-card{position:relative;overflow:hidden;border-radius:10px;cursor:pointer;background:#242424}.media-card .media-card-wrapper{display:block;width:100%;height:100%}.media-card .media-card-wrapper ::ng-deep>*{display:block;width:100%;height:100%;object-fit:cover}.media-card ::ng-deep .mat-mdc-radio-button{position:absolute;bottom:12px;left:12px;z-index:1;width:auto!important}.media-card ::ng-deep .mat-mdc-radio-button .mdc-form-field{border-radius:100px;background:#242424bf;padding-right:10px}.media-card ::ng-deep .mat-mdc-radio-button .mdc-form-field .mdc-radio{padding-right:0}.media-card ::ng-deep .mat-mdc-radio-button .mat-mdc-tooltip-trigger.label{color:#fff;font-weight:500}.media-card ::ng-deep .mdc-form-field{width:auto}.media-card[hasError=true]{outline:2px solid #e02800;outline-offset:2px}.media-card-selected{outline:2px solid #242424;outline-offset:2px}.radio .label{display:block;width:100%;cursor:pointer}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused{outline:none;--mat-radio-checked-ripple-color: transparent !important;--mat-radio-ripple-color: transparent !important}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;outline:2px solid #ffffff;border-radius:100px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i5.EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
289
299
  }
290
300
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RadioButtonComponent, decorators: [{
291
301
  type: Component,
@@ -299,7 +309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
299
309
  // programmatically set, for example inside of a focus trap, in this case we want to forward
300
310
  // the focus to the mat-radio-button element.
301
311
  '(focus)': 'radioElement.focus()',
302
- }, standalone: false, template: "<div\n #radioContainer\n tabindex=\"0\"\n [class]=\"multiple ? 'radio-container' : 'radio'\"\n [class.multiple-disabled]=\"disabled && multiple\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"clickRadio(); radioContainer.focus()\"\n (keydown.space)=\"clickRadio(); radioContainer.focus()\"\n>\n <mat-radio-button\n #radio\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n class=\"radio-button\"\n [required]=\"ariaRequired\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n [tabIndex]=\"tabIndex\"\n >\n @if (label) {\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ label }}</span\n >\n }\n <ng-content select=\"[radio-label]\"></ng-content>\n </mat-radio-button>\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}.mat-mdc-radio-button.mat-accent{--mat-radio-checked-ripple-color: var(--color) !important;--mdc-radio-selected-focus-icon-color: var(--color) !important;--mdc-radio-selected-pressed-icon-color: var(--color) !important}::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__inner-circle{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-radio-button .mat-ripple-element{background-color:var(--color)!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled.mat-radio-checked .mdc-radio__outer-circle,.mat-radio-button.mat-radio-disabled .mdc-radio__outer-circle{border-color:#888!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled .mdc-radio__inner-circle{background-color:#888!important}[theme=dark] .mat-mdc-radio-button,[theme=light] .mat-mdc-radio-button{width:100%!important}[theme=dark] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mdc-form-field{width:100%}[theme=dark] .mat-mdc-radio-button.mat-accent,[theme=light] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #242424 !important}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled{--mdc-radio-disabled-unselected-icon-color: #919191;--mdc-radio-disabled-selected-icon-opacity: 1;--mdc-radio-disabled-unselected-icon-opacity: 1;--color: #919191}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background{background:#e9e9e9;border-radius:100%}[theme=dark] ::ng-deep .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio__background{background:#fff!important;border-radius:100%;scale:.8}[theme=dark] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle,[theme=light] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:1px}[theme=dark] ::ng-deep .mat-ripple,[theme=light] ::ng-deep .mat-ripple{display:none}[haserror=true] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:2px}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-checked ::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border:1px solid #ffffff;border-radius:64px;background:#fff}.multiple-checked ::ng-deep label{color:#fff;height:100%}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#f4f4f4;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800}.multiple-unchecked{border:1px solid #e0e0e0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #e0e0e0}.multiple-unchecked ::ng-deep label{height:100%}.multiple-unchecked ::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff}.multiple-unchecked[theme=dark][hasError=false]:not(.multiple-disabled):hover,.multiple-unchecked[theme=light][hasError=false]:not(.multiple-disabled):hover{outline:1px solid #242424;background:#fff;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}.multiple-unchecked ::ng-deep label,.multiple-checked ::ng-deep label{padding-left:0;width:fit-content;cursor:pointer}.radio-container{cursor:pointer}.radio-container .label{cursor:pointer;-webkit-user-select:none;user-select:none}.radio-button .label{cursor:pointer;-webkit-user-select:none;user-select:none;padding-left:4px}:host *[hasError=true] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #e02800 !important;--mdc-radio-unselected-hover-icon-color: #e02800 !important;--mdc-radio-unselected-focus-icon-color: #e02800 !important}:host ::ng-deep .mat-mdc-radio-touch-target{height:40px;width:40px}.radio,.radio-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.radio[alignment=top] ::ng-deep .mdc-form-field,.radio-container[alignment=top] ::ng-deep .mdc-form-field{align-items:start}.radio[alignment=top] .label,.radio-container[alignment=top] .label{margin-top:10px}.radio[truncate-text=true] .label,.radio[truncate-text=true] ::ng-deep label,.radio-container[truncate-text=true] .label,.radio-container[truncate-text=true] ::ng-deep label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.radio-container[hasError=true]{outline:1px solid #e02800}.radio .label{display:block;width:100%;cursor:pointer}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused{outline:none;--mat-radio-checked-ripple-color: transparent !important;--mat-radio-ripple-color: transparent !important}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;outline:2px solid #ffffff;border-radius:100px}\n"] }]
312
+ }, standalone: false, template: "<div\n #radioContainer\n tabindex=\"0\"\n [class]=\"multiple ? 'radio-container' : 'radio'\"\n [class.multiple-disabled]=\"disabled && multiple\"\n [class.media-card]=\"mediaCard\"\n [class.media-card-selected]=\"mediaCard && selected\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"clickRadio(); radioContainer.focus()\"\n (keydown.space)=\"clickRadio(); radioContainer.focus()\"\n>\n @if (mediaCard) {\n <div class=\"media-card-wrapper\" aria-hidden=\"true\">\n <ng-content select=\"[radio-media]\"></ng-content>\n </div>\n }\n <mat-radio-button\n #radio\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n class=\"radio-button\"\n [required]=\"ariaRequired\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n [tabIndex]=\"tabIndex\"\n >\n @if (label) {\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ label }}</span\n >\n }\n <ng-content select=\"[radio-label]\"></ng-content>\n </mat-radio-button>\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}.mat-mdc-radio-button.mat-accent{--mat-radio-checked-ripple-color: var(--color) !important;--mdc-radio-selected-focus-icon-color: var(--color) !important;--mdc-radio-selected-pressed-icon-color: var(--color) !important}::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__inner-circle{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-radio-button .mat-ripple-element{background-color:var(--color)!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled.mat-radio-checked .mdc-radio__outer-circle,.mat-radio-button.mat-radio-disabled .mdc-radio__outer-circle{border-color:#888!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled .mdc-radio__inner-circle{background-color:#888!important}[theme=dark] .mat-mdc-radio-button,[theme=light] .mat-mdc-radio-button{width:100%!important}[theme=dark] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mdc-form-field{width:100%}[theme=dark] .mat-mdc-radio-button.mat-accent,[theme=light] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #242424 !important}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled{--mdc-radio-disabled-unselected-icon-color: #919191;--mdc-radio-disabled-selected-icon-opacity: 1;--mdc-radio-disabled-unselected-icon-opacity: 1;--color: #919191}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background{background:#e9e9e9;border-radius:100%}[theme=dark] ::ng-deep .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio__background{background:#fff!important;border-radius:100%;scale:.8}[theme=dark] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle,[theme=light] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:1px}[theme=dark] ::ng-deep .mat-ripple,[theme=light] ::ng-deep .mat-ripple{display:none}[haserror=true] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:2px}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-checked ::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border:1px solid #ffffff;border-radius:64px;background:#fff}.multiple-checked ::ng-deep label{color:#fff;height:100%}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#f4f4f4;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800}.multiple-unchecked{border:1px solid #e0e0e0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #e0e0e0}.multiple-unchecked ::ng-deep label{height:100%}.multiple-unchecked ::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff}.multiple-unchecked[theme=dark][hasError=false]:not(.multiple-disabled):hover,.multiple-unchecked[theme=light][hasError=false]:not(.multiple-disabled):hover{outline:1px solid #242424;background:#fff;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}.multiple-unchecked ::ng-deep label,.multiple-checked ::ng-deep label{padding-left:0;width:fit-content;cursor:pointer}.radio-container{cursor:pointer}.radio-container .label{cursor:pointer;-webkit-user-select:none;user-select:none}.radio-button .label{cursor:pointer;-webkit-user-select:none;user-select:none;padding-left:4px}:host *[hasError=true] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #e02800 !important;--mdc-radio-unselected-hover-icon-color: #e02800 !important;--mdc-radio-unselected-focus-icon-color: #e02800 !important}:host ::ng-deep .mat-mdc-radio-touch-target{height:40px;width:40px}.radio,.radio-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.radio[alignment=top] ::ng-deep .mdc-form-field,.radio-container[alignment=top] ::ng-deep .mdc-form-field{align-items:start}.radio[alignment=top] .label,.radio-container[alignment=top] .label{margin-top:10px}.radio[truncate-text=true] .label,.radio[truncate-text=true] ::ng-deep label,.radio-container[truncate-text=true] .label,.radio-container[truncate-text=true] ::ng-deep label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.radio-container[hasError=true]{outline:1px solid #e02800}.media-card{position:relative;overflow:hidden;border-radius:10px;cursor:pointer;background:#242424}.media-card .media-card-wrapper{display:block;width:100%;height:100%}.media-card .media-card-wrapper ::ng-deep>*{display:block;width:100%;height:100%;object-fit:cover}.media-card ::ng-deep .mat-mdc-radio-button{position:absolute;bottom:12px;left:12px;z-index:1;width:auto!important}.media-card ::ng-deep .mat-mdc-radio-button .mdc-form-field{border-radius:100px;background:#242424bf;padding-right:10px}.media-card ::ng-deep .mat-mdc-radio-button .mdc-form-field .mdc-radio{padding-right:0}.media-card ::ng-deep .mat-mdc-radio-button .mat-mdc-tooltip-trigger.label{color:#fff;font-weight:500}.media-card ::ng-deep .mdc-form-field{width:auto}.media-card[hasError=true]{outline:2px solid #e02800;outline-offset:2px}.media-card-selected{outline:2px solid #242424;outline-offset:2px}.radio .label{display:block;width:100%;cursor:pointer}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused{outline:none;--mat-radio-checked-ripple-color: transparent !important;--mat-radio-ripple-color: transparent !important}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;outline:2px solid #ffffff;border-radius:100px}\n"] }]
303
313
  }], ctorParameters: () => [{ type: undefined, decorators: [{
304
314
  type: Optional
305
315
  }, {
@@ -333,6 +343,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
333
343
  type: Input
334
344
  }], multiple: [{
335
345
  type: Input
346
+ }], mediaCard: [{
347
+ type: Input
336
348
  }], value: [{
337
349
  type: Input
338
350
  }], applicationTheme: [{