@sarasanalytics-com/design-system 0.0.155 → 0.0.157
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/dropdown/category-dropdown/category-dropdown.component.mjs +22 -9
- package/esm2022/lib/dropdown/ng-select/ng-select.component.mjs +3 -3
- package/esm2022/lib/form-input/form-input.component.mjs +2 -2
- package/esm2022/lib/form-select/form-select.component.mjs +3 -3
- package/esm2022/lib/message-banner-v2/message-banner-v2.component.mjs +3 -3
- package/esm2022/lib/query-builder-formly/query-builder-formly.component.mjs +106 -112
- package/fesm2022/sarasanalytics-com-design-system.mjs +134 -128
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/lib/query-builder-formly/query-builder-formly.component.d.ts +0 -57
- package/package.json +1 -1
|
@@ -48,11 +48,11 @@ import * as i1$9 from '@angular/material/progress-bar';
|
|
|
48
48
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
49
49
|
import * as i3$2 from '@angular/material/card';
|
|
50
50
|
import { MatCardModule } from '@angular/material/card';
|
|
51
|
+
import { trigger, transition, style, animate, state } from '@angular/animations';
|
|
51
52
|
import * as i3$3 from '@angular/material/divider';
|
|
52
53
|
import { MatDividerModule } from '@angular/material/divider';
|
|
53
54
|
import * as i1$a from '@angular/material/radio';
|
|
54
55
|
import { MatRadioButton, MatRadioModule } from '@angular/material/radio';
|
|
55
|
-
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
56
56
|
|
|
57
57
|
class CardCustomHeaderComponent {
|
|
58
58
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCustomHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -2048,7 +2048,7 @@ class FormInputComponent extends FieldType {
|
|
|
2048
2048
|
};
|
|
2049
2049
|
}
|
|
2050
2050
|
ngOnInit() {
|
|
2051
|
-
this.inputVal = get(this.field.props, 'value', get(this.model, this.key)) || '';
|
|
2051
|
+
this.inputVal = get(this.field.props, 'value', get(this.model, [this.key])) || '';
|
|
2052
2052
|
this.disabled = this.field.props.disabled || false;
|
|
2053
2053
|
this.formControl?.setValue(this.inputVal);
|
|
2054
2054
|
this.params = this.params || this.field.props['params'];
|
|
@@ -2611,7 +2611,7 @@ class FormSelectComponent extends FieldType {
|
|
|
2611
2611
|
}
|
|
2612
2612
|
}
|
|
2613
2613
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2614
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", outputs: { hoverEvent: "hoverEvent" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent$1, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n @if(!!props?.['label']){\n <div class=\"sa-select-label-container\">\n <div class=\"sa-select-label-tooltip-container\">\n <span class=\"sa-select-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-select-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-select-field-container\">\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n class=\"clicked-label\">{{params.label}}\n </div>\n <div\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(!this.openState)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n <ng-select (change)=\"onNgSelectChange($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (click)=\"openClose(!this.openState)\" (blur)=\"openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\" [clearable]=\"false\" class=\"form-ng-select\"> \n <!-- Multi-label template for displaying selected items as chips -->\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" \n [id]=\"getFullObjectFromValue(item)[params?.bindValue || props?.['bindValue'] || 'id']\"\n [iconPath]=\"params.iconPath\" \n [text]=\"getFullObjectFromValue(item)[params?.bindLabel || props?.['bindLabel'] || 'name']\" \n [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" \n [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" \n [type]=\"params.type || 'regular'\" \n [state]=\"params.state || 'primary'\" \n [filling]=\"params.filling || 'filled'\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd > 0\"\n class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" \n [type]=\"params.type || 'regular'\" \n [state]=\"params.state || 'default'\" \n [filling]=\"params.filling || 'filled'\">\n </sa-chip>\n </div>\n </ng-template>\n \n <!-- Universal option template with tooltip support for any select type -->\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\n <div class=\"option-container\" [ngClass]=\"{'checkbox-option': params?.showCheckboxes, 'single-option-with-tooltip': !params?.showCheckboxes}\">\n <!-- Checkbox for multi-select -->\n <input *ngIf=\"params?.showCheckboxes\" \n type=\"checkbox\" \n [checked]=\"isOptionSelected(item)\" \n (mousedown)=\"toggleItemSelection(item, $event)\"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n class=\"option-checkbox\">\n \n <!-- Option label -->\n <span class=\"option-label\">{{ item[props?.['bindLabel'] || 'name'] }}</span>\n \n <!-- Tooltip icon - shows when item has description/tooltip -->\n <sa-icon *ngIf=\"item.description || item.tooltip\" \n [icon]=\"'infoCircleOutlined'\" \n [size]=\"'16'\" \n class=\"option-tooltip-icon d-flex\"\n [matTooltip]=\"item.description || item.tooltip || ''\" \n matTooltipClass=\"custom-tooltip\"\n [matTooltipDisabled]=\"!(item.description || item.tooltip)\">\n </sa-icon>\n </div>\n </ng-template>\n \n <!-- Simple header template for Select All / Unselect All when in checkbox mode -->\n <ng-template ng-header-tmp *ngIf=\"params?.showCheckboxes && params?.multiple\">\n <div class=\"select-all-header\">\n <span class=\"select-all-label\" (click)=\"selectAll()\">Select all</span>\n <span class=\"unselect-all-label\" (click)=\"unselectAll()\">Unselect all</span>\n </div>\n </ng-template>\n\n <ng-template ng-arrow-tmp>\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex custom-dropdown-arrow\" [size]=\"'18'\"></sa-icon>\n </ng-template>\n </ng-select>\n <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\n <sa-icon [icon]=\"'downChevronOutlined'\" tabindex=\"0\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(!this.openState)\"\n (blur)=\"openClose(false)\" ></sa-icon>\n </div>\n <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div> -->\n\n <div class=\"fallback-arrow\" *ngIf=\"!openState\">\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\"></sa-icon>\n </div>\n </div>\n @if(!formControl.valid){\n <div class=\"error-message-container\">\n <span class=\"error-message\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </span>\n </div>\n }\n <div class=\"support-label\">{{params.supportText}}</div>\n</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px) 0 var(--medium-30px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.invalid{border:1px solid var(--semantic-error-500, #BD271E)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}::ng-deep .ng-arrow-wrapper{pointer-events:none}.custom-select-container .ng-select{padding-left:1.25rem}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none;z-index:1000}.ng-select ::ng-deep .ng-select-container{box-shadow:none;position:relative;z-index:1}::ng-deep .ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{box-shadow:none}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--ng-select-chip-bg, var(--primary-50))}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:9999;background-color:#fff}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}.custom-select-container .ng-select ::ng-deep .ng-dropdown-panel{left:.45rem}.d-flex{display:flex}.custom-select-container.sa-select-container{display:flex;flex-direction:column;gap:var(--small-12px, 12px)}.sa-select-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.sa-select-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.right-icon{padding-right:1.2rem;color:#757575}.invalid .right-icon{color:var(--semantic-error-500, #BD271E)}.error-message{color:var(--semantic-error-500, #BD271E);font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:var(--small-16px);letter-spacing:.5px}.checkbox-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer;gap:8px;transition:background-color .2s ease}.checkbox-option:hover{background-color:var(--grey-50, #F9FAFB)}.option-checkbox{width:16px;height:16px;margin-right:8px;cursor:pointer;accent-color:var(--primary-500, #6B46C1)}.option-label{font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px;letter-spacing:.25px}.single-option-with-tooltip{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:8px;transition:background-color .2s ease;width:100%}.single-option-with-tooltip .option-label{flex:1;font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px;letter-spacing:.25px}.option-tooltip-icon{color:var(--grey-400, #98A2B3);cursor:pointer;flex-shrink:0}.option-tooltip-icon:hover{color:var(--primary-500, #6B46C1)}.select-all-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--grey-200, #E4E7EC);background-color:var(--grey-25, #FCFCFD);cursor:pointer;transition:background-color .2s ease}.select-all-header:hover{background-color:var(--grey-50, #F9FAFB)}.select-all-label,.unselect-all-label{font-size:14px;font-weight:500;color:var(--primary-500, #6B46C1);line-height:20px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s ease}.select-all-label:hover,.unselect-all-label:hover{background-color:var(--primary-50, #F3F4F6)}.unselect-all-label{color:var(--grey-600, #475467)}.unselect-all-label:hover{background-color:var(--grey-100, #F2F4F7)}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{color:var(--text-medium-emphasis, #6D6979)}::ng-deep .form-ng-select.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:transparent!important}::ng-deep .form-ng-select.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-highlighted{background-color:var(--grey-50, #F9FAFB)!important}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0}.custom-dropdown-arrow{color:var(--Grey-600, #475467);cursor:pointer;transition:transform .2s ease}.ng-select.ng-select-opened .custom-dropdown-arrow{transform:rotate(180deg)}.form-ng-select.ng-select ::ng-deep .ng-arrow-wrapper{display:flex!important;align-items:center;justify-content:center;padding-right:12px;width:18px;height:18px}.ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{display:none}.ng-select.ng-select-multiple ::ng-deep .ng-arrow-wrapper{display:flex!important}.fallback-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2;color:var(--Grey-600, #475467)}.ng-select ::ng-deep .ng-arrow-wrapper:not(:empty)+.fallback-arrow{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i3$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
2614
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", outputs: { hoverEvent: "hoverEvent" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent$1, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n @if(!!props?.['label']){\n <div class=\"sa-select-label-container\">\n <div class=\"sa-select-label-tooltip-container\">\n <span class=\"sa-select-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-select-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-select-field-container\">\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n class=\"clicked-label\">{{params.label}}\n </div>\n <div\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(!this.openState)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n <ng-select (change)=\"onNgSelectChange($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (click)=\"openClose(!this.openState)\" (blur)=\"openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\" [clearable]=\"false\" [closeOnSelect]=\"!params?.showCheckboxes\" class=\"form-ng-select\"> \n <!-- Multi-label template for displaying selected items as chips -->\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" \n [id]=\"getFullObjectFromValue(item)[params?.bindValue || props?.['bindValue'] || 'id']\"\n [iconPath]=\"params.iconPath\" \n [text]=\"getFullObjectFromValue(item)[params?.bindLabel || props?.['bindLabel'] || 'name']\" \n [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" \n [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" \n [type]=\"params.type || 'regular'\" \n [state]=\"params.state || 'primary'\" \n [filling]=\"params.filling || 'filled'\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd > 0\"\n class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" \n [type]=\"params.type || 'regular'\" \n [state]=\"params.state || 'default'\" \n [filling]=\"params.filling || 'filled'\">\n </sa-chip>\n </div>\n </ng-template>\n \n <!-- Universal option template with tooltip support for any select type -->\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\n <div class=\"option-container\" [ngClass]=\"{'checkbox-option': params?.showCheckboxes, 'single-option-with-tooltip': !params?.showCheckboxes}\">\n <!-- Checkbox for multi-select -->\n <input *ngIf=\"params?.showCheckboxes\" \n type=\"checkbox\" \n [checked]=\"isOptionSelected(item)\" \n (mousedown)=\"toggleItemSelection(item, $event)\"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n class=\"option-checkbox\">\n \n <!-- Option label -->\n <span class=\"option-label\">{{ item[props?.['bindLabel'] || 'name'] }}</span>\n \n <!-- Tooltip icon - shows when item has description/tooltip -->\n <sa-icon *ngIf=\"item.description || item.tooltip\" \n [icon]=\"'infoCircleOutlined'\" \n [size]=\"'16'\" \n class=\"option-tooltip-icon d-flex\"\n [matTooltip]=\"item.description || item.tooltip || ''\" \n matTooltipClass=\"custom-tooltip\"\n [matTooltipDisabled]=\"!(item.description || item.tooltip)\">\n </sa-icon>\n </div>\n </ng-template>\n \n <!-- Simple header template for Select All / Unselect All when in checkbox mode -->\n <ng-template ng-header-tmp *ngIf=\"params?.showCheckboxes && params?.multiple\">\n <div class=\"select-all-header\">\n <span class=\"select-all-label\" (click)=\"selectAll()\">Select all</span>\n <span class=\"unselect-all-label\" (click)=\"unselectAll()\">Unselect all</span>\n </div>\n </ng-template>\n\n <ng-template ng-arrow-tmp>\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex custom-dropdown-arrow\" [size]=\"'18'\"></sa-icon>\n </ng-template>\n </ng-select>\n <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\n <sa-icon [icon]=\"'downChevronOutlined'\" tabindex=\"0\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(!this.openState)\"\n (blur)=\"openClose(false)\" ></sa-icon>\n </div>\n <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div> -->\n\n <div class=\"fallback-arrow\" *ngIf=\"!openState\">\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\"></sa-icon>\n </div>\n </div>\n @if(!formControl.valid){\n <div class=\"error-message-container\">\n <span class=\"error-message\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </span>\n </div>\n }\n <div class=\"support-label\">{{params.supportText}}</div>\n</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px) 0 var(--medium-30px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.invalid{border:1px solid var(--semantic-error-500, #BD271E)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}::ng-deep .ng-arrow-wrapper{pointer-events:none}.custom-select-container .ng-select{padding-left:1.25rem}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none;z-index:1000}.ng-select ::ng-deep .ng-select-container{box-shadow:none;position:relative;z-index:1}::ng-deep .ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{box-shadow:none}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--ng-select-chip-bg, var(--primary-50))}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:9999;background-color:#fff}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}.custom-select-container .ng-select ::ng-deep .ng-dropdown-panel{left:.45rem}.d-flex{display:flex}.custom-select-container.sa-select-container{display:flex;flex-direction:column;gap:var(--small-12px, 12px)}.sa-select-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.sa-select-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.right-icon{padding-right:1.2rem;color:#757575}.invalid .right-icon{color:var(--semantic-error-500, #BD271E)}.error-message{color:var(--semantic-error-500, #BD271E);font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:var(--small-16px);letter-spacing:.5px}.checkbox-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer;gap:8px;transition:background-color .2s ease}.checkbox-option:hover{background-color:var(--grey-50, #F9FAFB)}.option-checkbox{width:16px;height:16px;margin-right:8px;cursor:pointer;accent-color:var(--primary-500, #6B46C1)}.option-label{font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px;letter-spacing:.25px}.single-option-with-tooltip{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:8px;transition:background-color .2s ease;width:100%}.single-option-with-tooltip .option-label{flex:1;font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px;letter-spacing:.25px}.option-tooltip-icon{color:var(--grey-400, #98A2B3);cursor:pointer;flex-shrink:0}.option-tooltip-icon:hover{color:var(--primary-500, #6B46C1)}.select-all-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--grey-200, #E4E7EC);background-color:var(--grey-25, #FCFCFD);cursor:pointer;transition:background-color .2s ease}.select-all-header:hover{background-color:var(--grey-50, #F9FAFB)}.select-all-label,.unselect-all-label{font-size:14px;font-weight:500;color:var(--primary-500, #6B46C1);line-height:20px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s ease}.select-all-label:hover,.unselect-all-label:hover{background-color:var(--primary-50, #F3F4F6)}.unselect-all-label{color:var(--grey-600, #475467)}.unselect-all-label:hover{background-color:var(--grey-100, #F2F4F7)}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{color:var(--text-medium-emphasis, #6D6979)}::ng-deep .form-ng-select.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:transparent!important}::ng-deep .form-ng-select.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-highlighted{background-color:var(--grey-50, #F9FAFB)!important}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0}.custom-dropdown-arrow{color:var(--Grey-600, #475467);cursor:pointer;transition:transform .2s ease}.ng-select.ng-select-opened .custom-dropdown-arrow{transform:rotate(180deg)}.form-ng-select.ng-select ::ng-deep .ng-arrow-wrapper{display:flex!important;align-items:center;justify-content:center;padding-right:12px;width:18px;height:18px}.ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{display:none}.ng-select.ng-select-multiple ::ng-deep .ng-arrow-wrapper{display:flex!important}.fallback-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2;color:var(--Grey-600, #475467)}.ng-select ::ng-deep .ng-arrow-wrapper:not(:empty)+.fallback-arrow{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i3$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
2615
2615
|
}
|
|
2616
2616
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, decorators: [{
|
|
2617
2617
|
type: Component,
|
|
@@ -2627,7 +2627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2627
2627
|
IconComponent,
|
|
2628
2628
|
CommonModule,
|
|
2629
2629
|
MatTooltipModule
|
|
2630
|
-
], template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n @if(!!props?.['label']){\n <div class=\"sa-select-label-container\">\n <div class=\"sa-select-label-tooltip-container\">\n <span class=\"sa-select-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-select-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-select-field-container\">\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n class=\"clicked-label\">{{params.label}}\n </div>\n <div\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(!this.openState)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n <ng-select (change)=\"onNgSelectChange($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (click)=\"openClose(!this.openState)\" (blur)=\"openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\" [clearable]=\"false\" class=\"form-ng-select\"> \n <!-- Multi-label template for displaying selected items as chips -->\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" \n [id]=\"getFullObjectFromValue(item)[params?.bindValue || props?.['bindValue'] || 'id']\"\n [iconPath]=\"params.iconPath\" \n [text]=\"getFullObjectFromValue(item)[params?.bindLabel || props?.['bindLabel'] || 'name']\" \n [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" \n [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" \n [type]=\"params.type || 'regular'\" \n [state]=\"params.state || 'primary'\" \n [filling]=\"params.filling || 'filled'\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd > 0\"\n class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" \n [type]=\"params.type || 'regular'\" \n [state]=\"params.state || 'default'\" \n [filling]=\"params.filling || 'filled'\">\n </sa-chip>\n </div>\n </ng-template>\n \n <!-- Universal option template with tooltip support for any select type -->\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\n <div class=\"option-container\" [ngClass]=\"{'checkbox-option': params?.showCheckboxes, 'single-option-with-tooltip': !params?.showCheckboxes}\">\n <!-- Checkbox for multi-select -->\n <input *ngIf=\"params?.showCheckboxes\" \n type=\"checkbox\" \n [checked]=\"isOptionSelected(item)\" \n (mousedown)=\"toggleItemSelection(item, $event)\"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n class=\"option-checkbox\">\n \n <!-- Option label -->\n <span class=\"option-label\">{{ item[props?.['bindLabel'] || 'name'] }}</span>\n \n <!-- Tooltip icon - shows when item has description/tooltip -->\n <sa-icon *ngIf=\"item.description || item.tooltip\" \n [icon]=\"'infoCircleOutlined'\" \n [size]=\"'16'\" \n class=\"option-tooltip-icon d-flex\"\n [matTooltip]=\"item.description || item.tooltip || ''\" \n matTooltipClass=\"custom-tooltip\"\n [matTooltipDisabled]=\"!(item.description || item.tooltip)\">\n </sa-icon>\n </div>\n </ng-template>\n \n <!-- Simple header template for Select All / Unselect All when in checkbox mode -->\n <ng-template ng-header-tmp *ngIf=\"params?.showCheckboxes && params?.multiple\">\n <div class=\"select-all-header\">\n <span class=\"select-all-label\" (click)=\"selectAll()\">Select all</span>\n <span class=\"unselect-all-label\" (click)=\"unselectAll()\">Unselect all</span>\n </div>\n </ng-template>\n\n <ng-template ng-arrow-tmp>\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex custom-dropdown-arrow\" [size]=\"'18'\"></sa-icon>\n </ng-template>\n </ng-select>\n <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\n <sa-icon [icon]=\"'downChevronOutlined'\" tabindex=\"0\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(!this.openState)\"\n (blur)=\"openClose(false)\" ></sa-icon>\n </div>\n <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div> -->\n\n <div class=\"fallback-arrow\" *ngIf=\"!openState\">\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\"></sa-icon>\n </div>\n </div>\n @if(!formControl.valid){\n <div class=\"error-message-container\">\n <span class=\"error-message\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </span>\n </div>\n }\n <div class=\"support-label\">{{params.supportText}}</div>\n</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px) 0 var(--medium-30px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.invalid{border:1px solid var(--semantic-error-500, #BD271E)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}::ng-deep .ng-arrow-wrapper{pointer-events:none}.custom-select-container .ng-select{padding-left:1.25rem}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none;z-index:1000}.ng-select ::ng-deep .ng-select-container{box-shadow:none;position:relative;z-index:1}::ng-deep .ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{box-shadow:none}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--ng-select-chip-bg, var(--primary-50))}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:9999;background-color:#fff}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}.custom-select-container .ng-select ::ng-deep .ng-dropdown-panel{left:.45rem}.d-flex{display:flex}.custom-select-container.sa-select-container{display:flex;flex-direction:column;gap:var(--small-12px, 12px)}.sa-select-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.sa-select-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.right-icon{padding-right:1.2rem;color:#757575}.invalid .right-icon{color:var(--semantic-error-500, #BD271E)}.error-message{color:var(--semantic-error-500, #BD271E);font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:var(--small-16px);letter-spacing:.5px}.checkbox-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer;gap:8px;transition:background-color .2s ease}.checkbox-option:hover{background-color:var(--grey-50, #F9FAFB)}.option-checkbox{width:16px;height:16px;margin-right:8px;cursor:pointer;accent-color:var(--primary-500, #6B46C1)}.option-label{font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px;letter-spacing:.25px}.single-option-with-tooltip{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:8px;transition:background-color .2s ease;width:100%}.single-option-with-tooltip .option-label{flex:1;font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px;letter-spacing:.25px}.option-tooltip-icon{color:var(--grey-400, #98A2B3);cursor:pointer;flex-shrink:0}.option-tooltip-icon:hover{color:var(--primary-500, #6B46C1)}.select-all-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--grey-200, #E4E7EC);background-color:var(--grey-25, #FCFCFD);cursor:pointer;transition:background-color .2s ease}.select-all-header:hover{background-color:var(--grey-50, #F9FAFB)}.select-all-label,.unselect-all-label{font-size:14px;font-weight:500;color:var(--primary-500, #6B46C1);line-height:20px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s ease}.select-all-label:hover,.unselect-all-label:hover{background-color:var(--primary-50, #F3F4F6)}.unselect-all-label{color:var(--grey-600, #475467)}.unselect-all-label:hover{background-color:var(--grey-100, #F2F4F7)}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{color:var(--text-medium-emphasis, #6D6979)}::ng-deep .form-ng-select.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:transparent!important}::ng-deep .form-ng-select.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-highlighted{background-color:var(--grey-50, #F9FAFB)!important}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0}.custom-dropdown-arrow{color:var(--Grey-600, #475467);cursor:pointer;transition:transform .2s ease}.ng-select.ng-select-opened .custom-dropdown-arrow{transform:rotate(180deg)}.form-ng-select.ng-select ::ng-deep .ng-arrow-wrapper{display:flex!important;align-items:center;justify-content:center;padding-right:12px;width:18px;height:18px}.ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{display:none}.ng-select.ng-select-multiple ::ng-deep .ng-arrow-wrapper{display:flex!important}.fallback-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2;color:var(--Grey-600, #475467)}.ng-select ::ng-deep .ng-arrow-wrapper:not(:empty)+.fallback-arrow{display:none}\n"] }]
|
|
2630
|
+
], template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n @if(!!props?.['label']){\n <div class=\"sa-select-label-container\">\n <div class=\"sa-select-label-tooltip-container\">\n <span class=\"sa-select-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-select-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-select-field-container\">\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n class=\"clicked-label\">{{params.label}}\n </div>\n <div\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(!this.openState)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n <ng-select (change)=\"onNgSelectChange($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (click)=\"openClose(!this.openState)\" (blur)=\"openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\" [clearable]=\"false\" [closeOnSelect]=\"!params?.showCheckboxes\" class=\"form-ng-select\"> \n <!-- Multi-label template for displaying selected items as chips -->\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" \n [id]=\"getFullObjectFromValue(item)[params?.bindValue || props?.['bindValue'] || 'id']\"\n [iconPath]=\"params.iconPath\" \n [text]=\"getFullObjectFromValue(item)[params?.bindLabel || props?.['bindLabel'] || 'name']\" \n [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" \n [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" \n [type]=\"params.type || 'regular'\" \n [state]=\"params.state || 'primary'\" \n [filling]=\"params.filling || 'filled'\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd > 0\"\n class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" \n [type]=\"params.type || 'regular'\" \n [state]=\"params.state || 'default'\" \n [filling]=\"params.filling || 'filled'\">\n </sa-chip>\n </div>\n </ng-template>\n \n <!-- Universal option template with tooltip support for any select type -->\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\n <div class=\"option-container\" [ngClass]=\"{'checkbox-option': params?.showCheckboxes, 'single-option-with-tooltip': !params?.showCheckboxes}\">\n <!-- Checkbox for multi-select -->\n <input *ngIf=\"params?.showCheckboxes\" \n type=\"checkbox\" \n [checked]=\"isOptionSelected(item)\" \n (mousedown)=\"toggleItemSelection(item, $event)\"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n class=\"option-checkbox\">\n \n <!-- Option label -->\n <span class=\"option-label\">{{ item[props?.['bindLabel'] || 'name'] }}</span>\n \n <!-- Tooltip icon - shows when item has description/tooltip -->\n <sa-icon *ngIf=\"item.description || item.tooltip\" \n [icon]=\"'infoCircleOutlined'\" \n [size]=\"'16'\" \n class=\"option-tooltip-icon d-flex\"\n [matTooltip]=\"item.description || item.tooltip || ''\" \n matTooltipClass=\"custom-tooltip\"\n [matTooltipDisabled]=\"!(item.description || item.tooltip)\">\n </sa-icon>\n </div>\n </ng-template>\n \n <!-- Simple header template for Select All / Unselect All when in checkbox mode -->\n <ng-template ng-header-tmp *ngIf=\"params?.showCheckboxes && params?.multiple\">\n <div class=\"select-all-header\">\n <span class=\"select-all-label\" (click)=\"selectAll()\">Select all</span>\n <span class=\"unselect-all-label\" (click)=\"unselectAll()\">Unselect all</span>\n </div>\n </ng-template>\n\n <ng-template ng-arrow-tmp>\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex custom-dropdown-arrow\" [size]=\"'18'\"></sa-icon>\n </ng-template>\n </ng-select>\n <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\n <sa-icon [icon]=\"'downChevronOutlined'\" tabindex=\"0\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(!this.openState)\"\n (blur)=\"openClose(false)\" ></sa-icon>\n </div>\n <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div> -->\n\n <div class=\"fallback-arrow\" *ngIf=\"!openState\">\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\"></sa-icon>\n </div>\n </div>\n @if(!formControl.valid){\n <div class=\"error-message-container\">\n <span class=\"error-message\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </span>\n </div>\n }\n <div class=\"support-label\">{{params.supportText}}</div>\n</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px) 0 var(--medium-30px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.invalid{border:1px solid var(--semantic-error-500, #BD271E)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}::ng-deep .ng-arrow-wrapper{pointer-events:none}.custom-select-container .ng-select{padding-left:1.25rem}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none;z-index:1000}.ng-select ::ng-deep .ng-select-container{box-shadow:none;position:relative;z-index:1}::ng-deep .ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{box-shadow:none}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--ng-select-chip-bg, var(--primary-50))}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:9999;background-color:#fff}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}.custom-select-container .ng-select ::ng-deep .ng-dropdown-panel{left:.45rem}.d-flex{display:flex}.custom-select-container.sa-select-container{display:flex;flex-direction:column;gap:var(--small-12px, 12px)}.sa-select-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.sa-select-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.right-icon{padding-right:1.2rem;color:#757575}.invalid .right-icon{color:var(--semantic-error-500, #BD271E)}.error-message{color:var(--semantic-error-500, #BD271E);font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:var(--small-16px);letter-spacing:.5px}.checkbox-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer;gap:8px;transition:background-color .2s ease}.checkbox-option:hover{background-color:var(--grey-50, #F9FAFB)}.option-checkbox{width:16px;height:16px;margin-right:8px;cursor:pointer;accent-color:var(--primary-500, #6B46C1)}.option-label{font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px;letter-spacing:.25px}.single-option-with-tooltip{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:8px;transition:background-color .2s ease;width:100%}.single-option-with-tooltip .option-label{flex:1;font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px;letter-spacing:.25px}.option-tooltip-icon{color:var(--grey-400, #98A2B3);cursor:pointer;flex-shrink:0}.option-tooltip-icon:hover{color:var(--primary-500, #6B46C1)}.select-all-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--grey-200, #E4E7EC);background-color:var(--grey-25, #FCFCFD);cursor:pointer;transition:background-color .2s ease}.select-all-header:hover{background-color:var(--grey-50, #F9FAFB)}.select-all-label,.unselect-all-label{font-size:14px;font-weight:500;color:var(--primary-500, #6B46C1);line-height:20px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s ease}.select-all-label:hover,.unselect-all-label:hover{background-color:var(--primary-50, #F3F4F6)}.unselect-all-label{color:var(--grey-600, #475467)}.unselect-all-label:hover{background-color:var(--grey-100, #F2F4F7)}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{color:var(--text-medium-emphasis, #6D6979)}::ng-deep .form-ng-select.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:transparent!important}::ng-deep .form-ng-select.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-highlighted{background-color:var(--grey-50, #F9FAFB)!important}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0}.custom-dropdown-arrow{color:var(--Grey-600, #475467);cursor:pointer;transition:transform .2s ease}.ng-select.ng-select-opened .custom-dropdown-arrow{transform:rotate(180deg)}.form-ng-select.ng-select ::ng-deep .ng-arrow-wrapper{display:flex!important;align-items:center;justify-content:center;padding-right:12px;width:18px;height:18px}.ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{display:none}.ng-select.ng-select-multiple ::ng-deep .ng-arrow-wrapper{display:flex!important}.fallback-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2;color:var(--Grey-600, #475467)}.ng-select ::ng-deep .ng-arrow-wrapper:not(:empty)+.fallback-arrow{display:none}\n"] }]
|
|
2631
2631
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hoverEvent: [{
|
|
2632
2632
|
type: Output,
|
|
2633
2633
|
args: ['hoverEvent']
|
|
@@ -3051,11 +3051,11 @@ class MessageBannerV2Component {
|
|
|
3051
3051
|
return allFieldsFilled && formValid;
|
|
3052
3052
|
}
|
|
3053
3053
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3054
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerV2Component, isStandalone: true, selector: "sa-message-banner-v2", inputs: { messageType: "messageType", contactUrl: "contactUrl", spacingBetweenImageAndDescription: "spacingBetweenImageAndDescription", contentGap: "contentGap", titleClass: "titleClass", descriptionClass: "descriptionClass", banner: "banner", formConfig: "formConfig", prebuiltFormFields: "prebuiltFormFields", messageIcon: "messageIcon", messageIconSize: "messageIconSize", title: "title", description: "description", buttons: "buttons" }, outputs: { onFormEvent: "onFormEvent", buttonClick: "buttonClick" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "@if (bannerContent(); as content) {\n <div class=\"error-page message-banner-v2\">\n <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\n <div class=\"image-container\"\n [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\n <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\n [style.--message-icon-height]=\"content.messageIconSize?.height\"\n [style.--message-icon-width]=\"content.messageIconSize?.width\" />\n </div>\n <div class=\"details\">\n <div class=\"title-description\">\n <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\n <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \n <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\n <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\n [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\n [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\n <div [innerHTML]=\"banner?.text\"></div>\n </sa-message-banner>\n </div>\n </div>\n \n <!-- Form inputs section -->\n <ng-container *ngIf=\"prebuiltFormFields || activeFormInputs?.length\">\n <div class=\"form-fields-container\">\n <div class=\"form-fields-scroll-area\">\n <!-- Prebuilt form fields (direct component rendering) -->\n <ng-container *ngIf=\"usePrebuiltFields() && prebuiltFormFields\">\n <ng-container *ngTemplateOutlet=\"prebuiltFormFields\"></ng-container>\n </ng-container>\n \n <!-- Use Formly for proper form rendering -->\n <form [formGroup]=\"form\" class=\"dialog-form\" *ngIf=\"!usePrebuiltFields() && activeFormInputs?.length\">\n <formly-form \n [form]=\"form\" \n [fields]=\"formlyFields\" \n [model]=\"model\"\n (modelChange)=\"onFormModelChange($event)\">\n </formly-form>\n \n <!-- Additional fields (conditional based on formLayout.conditionalFields) -->\n <div class=\"additional-fields\" *ngIf=\"shouldShowAdditionalFields()\">\n <formly-form \n [form]=\"form\" \n [fields]=\"additionalFormlyFields\" \n [model]=\"model\"\n (modelChange)=\"onFormModelChange($event)\">\n </formly-form>\n </div>\n </form>\n </div>\n </div>\n\n <!-- Custom form button(s) -->\n <div class=\"form-button-container\" *ngIf=\"activeCustomFormButton && !usePrebuiltFields()\">\n <!-- Support both single button and array of buttons -->\n <ng-container *ngIf=\"isButtonArray(); else singleButton\">\n <sa-button \n *ngFor=\"let button of activeCustomFormButton\"\n class=\"action-button\"\n [id]=\"button.id\"\n [text]=\"button.text\"\n [type]=\"button.type\"\n [size]=\"button.size\"\n [state]=\"button.state\"\n [ImagePath]=\"button.ImagePath\"\n [iconPosition]=\"button.iconPosition\"\n (click)=\"onButtonClick(button)\">\n </sa-button>\n </ng-container>\n \n <ng-template #singleButton>\n <sa-button class=\"action-button\"\n [id]=\"activeCustomFormButton.id\"\n [text]=\"activeCustomFormButton.text\"\n [type]=\"activeCustomFormButton.type\"\n [size]=\"activeCustomFormButton.size\"\n [state]=\"activeCustomFormButton.state\"\n [ImagePath]=\"activeCustomFormButton.ImagePath\"\n [iconPosition]=\"activeCustomFormButton.iconPosition\"\n (click)=\"onButtonClick(activeCustomFormButton)\">\n </sa-button>\n </ng-template>\n </div>\n \n <!-- Divider section -->\n <div class=\"divider-section\" *ngIf=\"activeDivider && !usePrebuiltFields()\">\n <div class=\"divider\"></div>\n <div class=\"divider-header\">\n <h3 class=\"divider-title\" *ngIf=\"activeDividerConfig.title\">{{ activeDividerConfig.title }}</h3>\n <p class=\"divider-subtitle\" *ngIf=\"activeDividerConfig.subtitle || activeDividerConfig.showSubtitleWhenEmpty\">\n {{ activeDividerConfig.subtitle || 'No items added yet' }}\n </p>\n </div>\n \n <!-- Chips section -->\n <div class=\"chip-list\" *ngIf=\"activeChips?.length && !usePrebuiltFields()\">\n <sa-chip \n *ngFor=\"let chip of activeChips\"\n [text]=\"chip.label || chip.text || chip\"\n [type]=\"'regular'\"\n [state]=\"'default'\"\n [filling]=\"'filled'\"\n [iconPosition]=\"'right'\"\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\n (onClickEvent)=\"chip.removable ? onChipRemove(chip) : null\">\n </sa-chip>\n </div>\n </div>\n </ng-container>\n \n @if(buttons){\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <sa-button \n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [state]=\"!areAllVisibleFieldsFilled() ? 'disabled' : ''\"\n [attr.aria-label]=\"button.text\">\n </sa-button>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, fit-content)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}::ng-deep .custom-contact-link{color:var(--primary-500, #7F56D9);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px;text-decoration:none}.access-restricted-title{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.access-restricted-description{text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);line-height:var(--medium-24px);max-width:44rem;white-space:normal;word-break:break-word}.access-error-title{color:var(--semantic-error-500, #BD271E);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.redirect-link{display:flex;align-items:center;gap:8px;cursor:pointer}.info-icon{width:16px;height:16px;color:var(--primary-500, #825CEE)}.learn-more-text{font-size:14px;color:var(--primary-500, #825CEE);text-decoration:none}.redirect-link:hover .learn-more-text{text-decoration:underline}.additional-fields{display:flex;gap:16px;width:100%}.form-button-container{display:flex;justify-content:flex-end;align-items:center;align-self:stretch}::ng-deep .form-button-container .action-button .sa-button{align-self:flex-start;display:flex;justify-content:center;align-items:center;gap:var(--small-3px, 3px);align-self:stretch}.divider-section{flex:0 0 auto;margin-top:32px;width:100%}.divider{width:100%;height:1px;background:var(--grey-200, #E4E7EC);margin-bottom:24px}.divider-header{margin-bottom:16px}.divider-title{font-size:16px;font-weight:600;color:var(--text-high-emphasis, #1C1B20);margin:0 0 8px;font-family:var(--font-family, Roboto)}.divider-subtitle{font-size:14px;font-weight:400;color:var(--text-medium-emphasis, #6D6979);margin:0;font-style:italic;font-family:var(--font-family, Roboto)}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.dialog-form{width:100%;display:block}.form-fields-container{min-height:0;flex:0 0 auto;width:100%;position:relative;z-index:1;overflow:visible}.dialog-form .form-row{display:flex;gap:16px;margin-bottom:16px;width:100%}.dialog-form .form-field-wrapper{flex:1;display:flex;flex-direction:column;gap:4px}.dialog-form .form-field-wrapper.full-width{flex:1 1 100%}.dialog-form .additional-fields{display:flex;flex-direction:column;gap:16px;width:100%}::ng-deep .dialog-form formly-form{width:100%;display:block}::ng-deep .dialog-form formly-group{width:100%;display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;margin:0;padding:0;grid-auto-rows:min-content}::ng-deep .dialog-form formly-field>formly-group{display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;width:100%}::ng-deep .dialog-form formly-field{width:100%;display:block}::ng-deep .dialog-form .col-6{width:100%;display:block}::ng-deep .dialog-form .col-12{width:100%;display:block;grid-column:span 2}::ng-deep .additional-fields formly-form{width:100%;display:block}::ng-deep .dialog-form lib-form-select{width:100%}::ng-deep .dialog-form .sa-select-container{width:100%;display:flex;flex-direction:column}::ng-deep .dialog-form .sa-select-field-container{width:100%;position:relative}::ng-deep .dialog-form .ng-select{min-height:44px;border-radius:4px;padding:unset;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}::ng-deep .dialog-form .sa-select-container .sa-select-field-container .ng-select-field{padding:unset;border:none}::ng-deep .dialog-form .ng-select.ng-select-focused{border-color:var(--primary-500, #825CEE);box-shadow:0 0 0 3px #825cee1a}::ng-deep .dialog-form .ng-select .ng-select-container{min-height:44px;padding:12px 16px}.form-fields-scroll-wrapper{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }] }); }
|
|
3054
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerV2Component, isStandalone: true, selector: "sa-message-banner-v2", inputs: { messageType: "messageType", contactUrl: "contactUrl", spacingBetweenImageAndDescription: "spacingBetweenImageAndDescription", contentGap: "contentGap", titleClass: "titleClass", descriptionClass: "descriptionClass", banner: "banner", formConfig: "formConfig", prebuiltFormFields: "prebuiltFormFields", messageIcon: "messageIcon", messageIconSize: "messageIconSize", title: "title", description: "description", buttons: "buttons" }, outputs: { onFormEvent: "onFormEvent", buttonClick: "buttonClick" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "@if (bannerContent(); as content) {\n <div class=\"error-page message-banner-v2\">\n <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\n <div class=\"image-container\"\n [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\n <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\n [style.--message-icon-height]=\"content.messageIconSize?.height\"\n [style.--message-icon-width]=\"content.messageIconSize?.width\" />\n </div>\n <div class=\"details\">\n <div class=\"title-description\">\n <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\n <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \n <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\n <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\n [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\n [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\n <div [innerHTML]=\"banner?.text\"></div>\n </sa-message-banner>\n </div>\n </div>\n \n <!-- Form inputs section -->\n <ng-container *ngIf=\"prebuiltFormFields || activeFormInputs?.length\">\n <div class=\"form-fields-container\">\n <div class=\"form-fields-scroll-area\">\n <!-- Prebuilt form fields (direct component rendering) -->\n <ng-container *ngIf=\"usePrebuiltFields() && prebuiltFormFields\">\n <ng-container *ngTemplateOutlet=\"prebuiltFormFields\"></ng-container>\n </ng-container>\n \n <!-- Use Formly for proper form rendering -->\n <form [formGroup]=\"form\" class=\"dialog-form\" *ngIf=\"!usePrebuiltFields() && activeFormInputs?.length\">\n <formly-form \n [form]=\"form\" \n [fields]=\"formlyFields\" \n [model]=\"model\"\n (modelChange)=\"onFormModelChange($event)\">\n </formly-form>\n \n <!-- Additional fields (conditional based on formLayout.conditionalFields) -->\n <div class=\"additional-fields\" *ngIf=\"shouldShowAdditionalFields()\">\n <formly-form \n [form]=\"form\" \n [fields]=\"additionalFormlyFields\" \n [model]=\"model\"\n (modelChange)=\"onFormModelChange($event)\">\n </formly-form>\n </div>\n </form>\n </div>\n </div>\n\n <!-- Custom form button(s) -->\n <div class=\"form-button-container\" *ngIf=\"activeCustomFormButton && !usePrebuiltFields()\">\n <!-- Support both single button and array of buttons -->\n <ng-container *ngIf=\"isButtonArray(); else singleButton\">\n <sa-button \n *ngFor=\"let button of activeCustomFormButton\"\n class=\"action-button\"\n [id]=\"button.id\"\n [text]=\"button.text\"\n [type]=\"button.type\"\n [size]=\"button.size\"\n [state]=\"button.state\"\n [ImagePath]=\"button.ImagePath\"\n [iconPosition]=\"button.iconPosition\"\n (click)=\"onButtonClick(button)\">\n </sa-button>\n </ng-container>\n \n <ng-template #singleButton>\n <sa-button class=\"action-button\"\n [id]=\"activeCustomFormButton.id\"\n [text]=\"activeCustomFormButton.text\"\n [type]=\"activeCustomFormButton.type\"\n [size]=\"activeCustomFormButton.size\"\n [state]=\"activeCustomFormButton.state\"\n [ImagePath]=\"activeCustomFormButton.ImagePath\"\n [iconPosition]=\"activeCustomFormButton.iconPosition\"\n (click)=\"onButtonClick(activeCustomFormButton)\">\n </sa-button>\n </ng-template>\n </div>\n \n <!-- Divider section -->\n <div class=\"divider-section\" *ngIf=\"activeDivider && !usePrebuiltFields()\">\n <div class=\"divider\"></div>\n <div class=\"divider-header\">\n <h3 class=\"divider-title\" *ngIf=\"activeDividerConfig.title\">{{ activeDividerConfig.title }}</h3>\n <p class=\"divider-subtitle\" *ngIf=\"activeDividerConfig.subtitle || activeDividerConfig.showSubtitleWhenEmpty\">\n {{ activeDividerConfig.subtitle || 'No items added yet' }}\n </p>\n </div>\n \n <!-- Chips section -->\n <div class=\"chip-list\" *ngIf=\"activeChips?.length && !usePrebuiltFields()\">\n <sa-chip \n *ngFor=\"let chip of activeChips\"\n [text]=\"chip.label || chip.text || chip\"\n [type]=\"'regular'\"\n [state]=\"'default'\"\n [filling]=\"'filled'\"\n [iconPosition]=\"'right'\"\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\n (onClickEvent)=\"chip.removable ? onChipRemove(chip) : null\">\n </sa-chip>\n </div>\n </div>\n </ng-container>\n \n @if(buttons){\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <sa-button \n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [state]=\"!areAllVisibleFieldsFilled() ? 'disabled' : ''\"\n [attr.aria-label]=\"button.text\">\n </sa-button>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, auto)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}::ng-deep .custom-contact-link{color:var(--primary-500, #7F56D9);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px;text-decoration:none}.access-restricted-title{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.access-restricted-description{text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);line-height:var(--medium-24px);max-width:44rem;white-space:normal;word-break:break-word}.access-error-title{color:var(--semantic-error-500, #BD271E);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.redirect-link{display:flex;align-items:center;gap:8px;cursor:pointer}.info-icon{width:16px;height:16px;color:var(--primary-500, #825CEE)}.learn-more-text{font-size:14px;color:var(--primary-500, #825CEE);text-decoration:none}.redirect-link:hover .learn-more-text{text-decoration:underline}.additional-fields{display:flex;gap:16px;width:100%}.form-button-container{display:flex;justify-content:flex-end;align-items:center;align-self:stretch}::ng-deep .form-button-container .action-button .sa-button{align-self:flex-start;display:flex;justify-content:center;align-items:center;gap:var(--small-3px, 3px);align-self:stretch}.divider-section{flex:0 0 auto;margin-top:32px;width:100%}.divider{width:100%;height:1px;background:var(--grey-200, #E4E7EC);margin-bottom:24px}.divider-header{margin-bottom:16px}.divider-title{font-size:16px;font-weight:600;color:var(--text-high-emphasis, #1C1B20);margin:0 0 8px;font-family:var(--font-family, Roboto)}.divider-subtitle{font-size:14px;font-weight:400;color:var(--text-medium-emphasis, #6D6979);margin:0;font-style:italic;font-family:var(--font-family, Roboto)}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.dialog-form{width:100%;display:block}.form-fields-container{min-height:0;flex:0 0 auto;width:100%;position:relative;z-index:1;overflow:visible}.dialog-form .form-row{display:flex;gap:16px;margin-bottom:16px;width:100%}.dialog-form .form-field-wrapper{flex:1;display:flex;flex-direction:column;gap:4px}.dialog-form .form-field-wrapper.full-width{flex:1 1 100%}.dialog-form .additional-fields{display:flex;flex-direction:column;gap:16px;width:100%}::ng-deep .dialog-form formly-form{width:100%;display:block}::ng-deep .dialog-form formly-group{width:100%;display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;margin:0;padding:0;grid-auto-rows:min-content}::ng-deep .dialog-form formly-field>formly-group{display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;width:100%}::ng-deep .dialog-form formly-field{width:100%;display:block}::ng-deep .dialog-form .col-6{width:100%;display:block}::ng-deep .dialog-form .col-12{width:100%;display:block;grid-column:span 2}::ng-deep .additional-fields formly-form{width:100%;display:block}::ng-deep .dialog-form lib-form-select{width:100%}::ng-deep .dialog-form .sa-select-container{width:100%;display:flex;flex-direction:column}::ng-deep .dialog-form .sa-select-field-container{width:100%;position:relative}::ng-deep .dialog-form .ng-select{min-height:44px;border-radius:4px;padding:unset;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}::ng-deep .dialog-form .sa-select-container .sa-select-field-container .ng-select-field{padding:unset;border:none}::ng-deep .dialog-form .ng-select.ng-select-focused{border-color:var(--primary-500, #825CEE);box-shadow:0 0 0 3px #825cee1a}::ng-deep .dialog-form .ng-select .ng-select-container{min-height:44px;padding:12px 16px}.form-fields-scroll-wrapper{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }] }); }
|
|
3055
3055
|
}
|
|
3056
3056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, decorators: [{
|
|
3057
3057
|
type: Component,
|
|
3058
|
-
args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, HttpClientModule, MessageBannerComponent, FormInputComponent, FormSelectComponent, FormsModule, ReactiveFormsModule, FormlyModule, ChipsComponent], providers: [IconService], template: "@if (bannerContent(); as content) {\n <div class=\"error-page message-banner-v2\">\n <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\n <div class=\"image-container\"\n [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\n <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\n [style.--message-icon-height]=\"content.messageIconSize?.height\"\n [style.--message-icon-width]=\"content.messageIconSize?.width\" />\n </div>\n <div class=\"details\">\n <div class=\"title-description\">\n <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\n <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \n <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\n <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\n [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\n [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\n <div [innerHTML]=\"banner?.text\"></div>\n </sa-message-banner>\n </div>\n </div>\n \n <!-- Form inputs section -->\n <ng-container *ngIf=\"prebuiltFormFields || activeFormInputs?.length\">\n <div class=\"form-fields-container\">\n <div class=\"form-fields-scroll-area\">\n <!-- Prebuilt form fields (direct component rendering) -->\n <ng-container *ngIf=\"usePrebuiltFields() && prebuiltFormFields\">\n <ng-container *ngTemplateOutlet=\"prebuiltFormFields\"></ng-container>\n </ng-container>\n \n <!-- Use Formly for proper form rendering -->\n <form [formGroup]=\"form\" class=\"dialog-form\" *ngIf=\"!usePrebuiltFields() && activeFormInputs?.length\">\n <formly-form \n [form]=\"form\" \n [fields]=\"formlyFields\" \n [model]=\"model\"\n (modelChange)=\"onFormModelChange($event)\">\n </formly-form>\n \n <!-- Additional fields (conditional based on formLayout.conditionalFields) -->\n <div class=\"additional-fields\" *ngIf=\"shouldShowAdditionalFields()\">\n <formly-form \n [form]=\"form\" \n [fields]=\"additionalFormlyFields\" \n [model]=\"model\"\n (modelChange)=\"onFormModelChange($event)\">\n </formly-form>\n </div>\n </form>\n </div>\n </div>\n\n <!-- Custom form button(s) -->\n <div class=\"form-button-container\" *ngIf=\"activeCustomFormButton && !usePrebuiltFields()\">\n <!-- Support both single button and array of buttons -->\n <ng-container *ngIf=\"isButtonArray(); else singleButton\">\n <sa-button \n *ngFor=\"let button of activeCustomFormButton\"\n class=\"action-button\"\n [id]=\"button.id\"\n [text]=\"button.text\"\n [type]=\"button.type\"\n [size]=\"button.size\"\n [state]=\"button.state\"\n [ImagePath]=\"button.ImagePath\"\n [iconPosition]=\"button.iconPosition\"\n (click)=\"onButtonClick(button)\">\n </sa-button>\n </ng-container>\n \n <ng-template #singleButton>\n <sa-button class=\"action-button\"\n [id]=\"activeCustomFormButton.id\"\n [text]=\"activeCustomFormButton.text\"\n [type]=\"activeCustomFormButton.type\"\n [size]=\"activeCustomFormButton.size\"\n [state]=\"activeCustomFormButton.state\"\n [ImagePath]=\"activeCustomFormButton.ImagePath\"\n [iconPosition]=\"activeCustomFormButton.iconPosition\"\n (click)=\"onButtonClick(activeCustomFormButton)\">\n </sa-button>\n </ng-template>\n </div>\n \n <!-- Divider section -->\n <div class=\"divider-section\" *ngIf=\"activeDivider && !usePrebuiltFields()\">\n <div class=\"divider\"></div>\n <div class=\"divider-header\">\n <h3 class=\"divider-title\" *ngIf=\"activeDividerConfig.title\">{{ activeDividerConfig.title }}</h3>\n <p class=\"divider-subtitle\" *ngIf=\"activeDividerConfig.subtitle || activeDividerConfig.showSubtitleWhenEmpty\">\n {{ activeDividerConfig.subtitle || 'No items added yet' }}\n </p>\n </div>\n \n <!-- Chips section -->\n <div class=\"chip-list\" *ngIf=\"activeChips?.length && !usePrebuiltFields()\">\n <sa-chip \n *ngFor=\"let chip of activeChips\"\n [text]=\"chip.label || chip.text || chip\"\n [type]=\"'regular'\"\n [state]=\"'default'\"\n [filling]=\"'filled'\"\n [iconPosition]=\"'right'\"\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\n (onClickEvent)=\"chip.removable ? onChipRemove(chip) : null\">\n </sa-chip>\n </div>\n </div>\n </ng-container>\n \n @if(buttons){\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <sa-button \n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [state]=\"!areAllVisibleFieldsFilled() ? 'disabled' : ''\"\n [attr.aria-label]=\"button.text\">\n </sa-button>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, fit-content)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}::ng-deep .custom-contact-link{color:var(--primary-500, #7F56D9);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px;text-decoration:none}.access-restricted-title{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.access-restricted-description{text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);line-height:var(--medium-24px);max-width:44rem;white-space:normal;word-break:break-word}.access-error-title{color:var(--semantic-error-500, #BD271E);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.redirect-link{display:flex;align-items:center;gap:8px;cursor:pointer}.info-icon{width:16px;height:16px;color:var(--primary-500, #825CEE)}.learn-more-text{font-size:14px;color:var(--primary-500, #825CEE);text-decoration:none}.redirect-link:hover .learn-more-text{text-decoration:underline}.additional-fields{display:flex;gap:16px;width:100%}.form-button-container{display:flex;justify-content:flex-end;align-items:center;align-self:stretch}::ng-deep .form-button-container .action-button .sa-button{align-self:flex-start;display:flex;justify-content:center;align-items:center;gap:var(--small-3px, 3px);align-self:stretch}.divider-section{flex:0 0 auto;margin-top:32px;width:100%}.divider{width:100%;height:1px;background:var(--grey-200, #E4E7EC);margin-bottom:24px}.divider-header{margin-bottom:16px}.divider-title{font-size:16px;font-weight:600;color:var(--text-high-emphasis, #1C1B20);margin:0 0 8px;font-family:var(--font-family, Roboto)}.divider-subtitle{font-size:14px;font-weight:400;color:var(--text-medium-emphasis, #6D6979);margin:0;font-style:italic;font-family:var(--font-family, Roboto)}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.dialog-form{width:100%;display:block}.form-fields-container{min-height:0;flex:0 0 auto;width:100%;position:relative;z-index:1;overflow:visible}.dialog-form .form-row{display:flex;gap:16px;margin-bottom:16px;width:100%}.dialog-form .form-field-wrapper{flex:1;display:flex;flex-direction:column;gap:4px}.dialog-form .form-field-wrapper.full-width{flex:1 1 100%}.dialog-form .additional-fields{display:flex;flex-direction:column;gap:16px;width:100%}::ng-deep .dialog-form formly-form{width:100%;display:block}::ng-deep .dialog-form formly-group{width:100%;display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;margin:0;padding:0;grid-auto-rows:min-content}::ng-deep .dialog-form formly-field>formly-group{display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;width:100%}::ng-deep .dialog-form formly-field{width:100%;display:block}::ng-deep .dialog-form .col-6{width:100%;display:block}::ng-deep .dialog-form .col-12{width:100%;display:block;grid-column:span 2}::ng-deep .additional-fields formly-form{width:100%;display:block}::ng-deep .dialog-form lib-form-select{width:100%}::ng-deep .dialog-form .sa-select-container{width:100%;display:flex;flex-direction:column}::ng-deep .dialog-form .sa-select-field-container{width:100%;position:relative}::ng-deep .dialog-form .ng-select{min-height:44px;border-radius:4px;padding:unset;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}::ng-deep .dialog-form .sa-select-container .sa-select-field-container .ng-select-field{padding:unset;border:none}::ng-deep .dialog-form .ng-select.ng-select-focused{border-color:var(--primary-500, #825CEE);box-shadow:0 0 0 3px #825cee1a}::ng-deep .dialog-form .ng-select .ng-select-container{min-height:44px;padding:12px 16px}.form-fields-scroll-wrapper{width:100%}\n"] }]
|
|
3058
|
+
args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, HttpClientModule, MessageBannerComponent, FormInputComponent, FormSelectComponent, FormsModule, ReactiveFormsModule, FormlyModule, ChipsComponent], providers: [IconService], template: "@if (bannerContent(); as content) {\n <div class=\"error-page message-banner-v2\">\n <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\n <div class=\"image-container\"\n [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\n <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\n [style.--message-icon-height]=\"content.messageIconSize?.height\"\n [style.--message-icon-width]=\"content.messageIconSize?.width\" />\n </div>\n <div class=\"details\">\n <div class=\"title-description\">\n <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\n <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \n <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\n <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\n [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\n [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\n <div [innerHTML]=\"banner?.text\"></div>\n </sa-message-banner>\n </div>\n </div>\n \n <!-- Form inputs section -->\n <ng-container *ngIf=\"prebuiltFormFields || activeFormInputs?.length\">\n <div class=\"form-fields-container\">\n <div class=\"form-fields-scroll-area\">\n <!-- Prebuilt form fields (direct component rendering) -->\n <ng-container *ngIf=\"usePrebuiltFields() && prebuiltFormFields\">\n <ng-container *ngTemplateOutlet=\"prebuiltFormFields\"></ng-container>\n </ng-container>\n \n <!-- Use Formly for proper form rendering -->\n <form [formGroup]=\"form\" class=\"dialog-form\" *ngIf=\"!usePrebuiltFields() && activeFormInputs?.length\">\n <formly-form \n [form]=\"form\" \n [fields]=\"formlyFields\" \n [model]=\"model\"\n (modelChange)=\"onFormModelChange($event)\">\n </formly-form>\n \n <!-- Additional fields (conditional based on formLayout.conditionalFields) -->\n <div class=\"additional-fields\" *ngIf=\"shouldShowAdditionalFields()\">\n <formly-form \n [form]=\"form\" \n [fields]=\"additionalFormlyFields\" \n [model]=\"model\"\n (modelChange)=\"onFormModelChange($event)\">\n </formly-form>\n </div>\n </form>\n </div>\n </div>\n\n <!-- Custom form button(s) -->\n <div class=\"form-button-container\" *ngIf=\"activeCustomFormButton && !usePrebuiltFields()\">\n <!-- Support both single button and array of buttons -->\n <ng-container *ngIf=\"isButtonArray(); else singleButton\">\n <sa-button \n *ngFor=\"let button of activeCustomFormButton\"\n class=\"action-button\"\n [id]=\"button.id\"\n [text]=\"button.text\"\n [type]=\"button.type\"\n [size]=\"button.size\"\n [state]=\"button.state\"\n [ImagePath]=\"button.ImagePath\"\n [iconPosition]=\"button.iconPosition\"\n (click)=\"onButtonClick(button)\">\n </sa-button>\n </ng-container>\n \n <ng-template #singleButton>\n <sa-button class=\"action-button\"\n [id]=\"activeCustomFormButton.id\"\n [text]=\"activeCustomFormButton.text\"\n [type]=\"activeCustomFormButton.type\"\n [size]=\"activeCustomFormButton.size\"\n [state]=\"activeCustomFormButton.state\"\n [ImagePath]=\"activeCustomFormButton.ImagePath\"\n [iconPosition]=\"activeCustomFormButton.iconPosition\"\n (click)=\"onButtonClick(activeCustomFormButton)\">\n </sa-button>\n </ng-template>\n </div>\n \n <!-- Divider section -->\n <div class=\"divider-section\" *ngIf=\"activeDivider && !usePrebuiltFields()\">\n <div class=\"divider\"></div>\n <div class=\"divider-header\">\n <h3 class=\"divider-title\" *ngIf=\"activeDividerConfig.title\">{{ activeDividerConfig.title }}</h3>\n <p class=\"divider-subtitle\" *ngIf=\"activeDividerConfig.subtitle || activeDividerConfig.showSubtitleWhenEmpty\">\n {{ activeDividerConfig.subtitle || 'No items added yet' }}\n </p>\n </div>\n \n <!-- Chips section -->\n <div class=\"chip-list\" *ngIf=\"activeChips?.length && !usePrebuiltFields()\">\n <sa-chip \n *ngFor=\"let chip of activeChips\"\n [text]=\"chip.label || chip.text || chip\"\n [type]=\"'regular'\"\n [state]=\"'default'\"\n [filling]=\"'filled'\"\n [iconPosition]=\"'right'\"\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\n (onClickEvent)=\"chip.removable ? onChipRemove(chip) : null\">\n </sa-chip>\n </div>\n </div>\n </ng-container>\n \n @if(buttons){\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <sa-button \n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [state]=\"!areAllVisibleFieldsFilled() ? 'disabled' : ''\"\n [attr.aria-label]=\"button.text\">\n </sa-button>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, auto)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}::ng-deep .custom-contact-link{color:var(--primary-500, #7F56D9);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px;text-decoration:none}.access-restricted-title{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.access-restricted-description{text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);line-height:var(--medium-24px);max-width:44rem;white-space:normal;word-break:break-word}.access-error-title{color:var(--semantic-error-500, #BD271E);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.redirect-link{display:flex;align-items:center;gap:8px;cursor:pointer}.info-icon{width:16px;height:16px;color:var(--primary-500, #825CEE)}.learn-more-text{font-size:14px;color:var(--primary-500, #825CEE);text-decoration:none}.redirect-link:hover .learn-more-text{text-decoration:underline}.additional-fields{display:flex;gap:16px;width:100%}.form-button-container{display:flex;justify-content:flex-end;align-items:center;align-self:stretch}::ng-deep .form-button-container .action-button .sa-button{align-self:flex-start;display:flex;justify-content:center;align-items:center;gap:var(--small-3px, 3px);align-self:stretch}.divider-section{flex:0 0 auto;margin-top:32px;width:100%}.divider{width:100%;height:1px;background:var(--grey-200, #E4E7EC);margin-bottom:24px}.divider-header{margin-bottom:16px}.divider-title{font-size:16px;font-weight:600;color:var(--text-high-emphasis, #1C1B20);margin:0 0 8px;font-family:var(--font-family, Roboto)}.divider-subtitle{font-size:14px;font-weight:400;color:var(--text-medium-emphasis, #6D6979);margin:0;font-style:italic;font-family:var(--font-family, Roboto)}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.dialog-form{width:100%;display:block}.form-fields-container{min-height:0;flex:0 0 auto;width:100%;position:relative;z-index:1;overflow:visible}.dialog-form .form-row{display:flex;gap:16px;margin-bottom:16px;width:100%}.dialog-form .form-field-wrapper{flex:1;display:flex;flex-direction:column;gap:4px}.dialog-form .form-field-wrapper.full-width{flex:1 1 100%}.dialog-form .additional-fields{display:flex;flex-direction:column;gap:16px;width:100%}::ng-deep .dialog-form formly-form{width:100%;display:block}::ng-deep .dialog-form formly-group{width:100%;display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;margin:0;padding:0;grid-auto-rows:min-content}::ng-deep .dialog-form formly-field>formly-group{display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;width:100%}::ng-deep .dialog-form formly-field{width:100%;display:block}::ng-deep .dialog-form .col-6{width:100%;display:block}::ng-deep .dialog-form .col-12{width:100%;display:block;grid-column:span 2}::ng-deep .additional-fields formly-form{width:100%;display:block}::ng-deep .dialog-form lib-form-select{width:100%}::ng-deep .dialog-form .sa-select-container{width:100%;display:flex;flex-direction:column}::ng-deep .dialog-form .sa-select-field-container{width:100%;position:relative}::ng-deep .dialog-form .ng-select{min-height:44px;border-radius:4px;padding:unset;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}::ng-deep .dialog-form .sa-select-container .sa-select-field-container .ng-select-field{padding:unset;border:none}::ng-deep .dialog-form .ng-select.ng-select-focused{border-color:var(--primary-500, #825CEE);box-shadow:0 0 0 3px #825cee1a}::ng-deep .dialog-form .ng-select .ng-select-container{min-height:44px;padding:12px 16px}.form-fields-scroll-wrapper{width:100%}\n"] }]
|
|
3059
3059
|
}], propDecorators: { messageType: [{
|
|
3060
3060
|
type: Input
|
|
3061
3061
|
}], contactUrl: [{
|
|
@@ -3277,12 +3277,25 @@ class CategoryDropdownComponent extends FieldType {
|
|
|
3277
3277
|
this.cdr.detectChanges();
|
|
3278
3278
|
if (this.categoryContainer && this.dropdownPanel) {
|
|
3279
3279
|
const containerWidth = this.categoryContainer.nativeElement.offsetWidth;
|
|
3280
|
-
|
|
3281
|
-
|
|
3282
|
-
const
|
|
3283
|
-
const panelWidthRem = (
|
|
3284
|
-
|
|
3285
|
-
this.renderer.setStyle(this.dropdownPanel.nativeElement, 'width',
|
|
3280
|
+
// Use panelWidthOffset if provided, otherwise fallback to fixed width
|
|
3281
|
+
const offset = this.props?.['panelWidthOffset'] ?? 320; // fallback to 320px (20rem)
|
|
3282
|
+
const panelWidthPx = offset;
|
|
3283
|
+
const panelWidthRem = panelWidthPx / 16; // Convert px to rem (assuming 16px = 1rem)
|
|
3284
|
+
const panelWidth = `${panelWidthRem}rem`;
|
|
3285
|
+
this.renderer.setStyle(this.dropdownPanel.nativeElement, 'min-width', panelWidth);
|
|
3286
|
+
this.renderer.setStyle(this.dropdownPanel.nativeElement, 'width', panelWidth);
|
|
3287
|
+
// Ensure proper positioning to prevent overflow
|
|
3288
|
+
const rect = this.categoryContainer.nativeElement.getBoundingClientRect();
|
|
3289
|
+
const viewportWidth = window.innerWidth;
|
|
3290
|
+
// If dropdown would overflow right edge, position left
|
|
3291
|
+
if (rect.right + panelWidthPx > viewportWidth) {
|
|
3292
|
+
this.renderer.setStyle(this.dropdownPanel.nativeElement, 'right', '0');
|
|
3293
|
+
this.renderer.setStyle(this.dropdownPanel.nativeElement, 'left', 'auto');
|
|
3294
|
+
}
|
|
3295
|
+
else {
|
|
3296
|
+
this.renderer.setStyle(this.dropdownPanel.nativeElement, 'left', '0');
|
|
3297
|
+
this.renderer.setStyle(this.dropdownPanel.nativeElement, 'right', 'auto');
|
|
3298
|
+
}
|
|
3286
3299
|
}
|
|
3287
3300
|
// 🔑 Sync selectedAttributes from formControl on every open
|
|
3288
3301
|
if (this.props?.['multiple']) {
|
|
@@ -3371,7 +3384,7 @@ class CategoryDropdownComponent extends FieldType {
|
|
|
3371
3384
|
this.destroy$.complete();
|
|
3372
3385
|
}
|
|
3373
3386
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CategoryDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3374
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CategoryDropdownComponent, isStandalone: true, selector: "sa-category-dropdown", host: { listeners: { "document:click": "onClick($event)" } }, providers: [IconService], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "categoryContainer", first: true, predicate: ["categoryContainer"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"custom-category-dropdown relative\" (click)=\"toggleDropdown()\">\n <!-- Dropdown Trigger / Display -->\n <div #categoryContainer class=\"custom-category-container\" [class.open]=\"isOpen()\">\n <div class=\"custom-category-attribute-container\">\n @if(props?.['multiple']){\n @if (selectedAttributes().length > 0) {\n @for (item of selectedAttributes(); track item[bindValue]) {\n <div class=\"custom-category-attribute custom-category-custom-chip\" (click)=\"$event.stopPropagation()\">\n <span class=\"custom-category-attribute-label\">{{ item[bindLabel] }}</span>\n <span class=\"custom-category-attribute-icon right\">\n <sa-icon icon=\"closeOutlined\" (click)=\"removeValue(item)\" size=\"11\"></sa-icon>\n </span>\n </div>\n }\n } @else {\n <span class=\"placeholder\">Select items</span>\n }\n } @else {\n @if(formControl.value) {\n <span class=\"custom-category-attribute-label\">{{ formControl.value[bindLabel] }}</span>\n } @else {\n <span class=\"placeholder\">Select item</span>\n }\n }\n </div>\n <div class=\"custom-category-arrow-wrapper\">\n <sa-icon icon=\"upDownChevronOutlined\" size=\"11\" class=\"searchIcons\"></sa-icon>\n </div>\n </div>\n\n <!-- Dropdown Panel -->\n @if (isOpen()) {\n <div #dropdownPanel class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\">\n <div class=\"search-input-container mat-form-field-density-5\">\n <mat-form-field [appearance]=\"props['appearance'] || 'outline'\" class=\"w-100\">\n <sa-icon icon=\"searchIcon\" size=\"20\" class=\"searchIcons\" matPrefix></sa-icon>\n <input #searchInput matInput type=\"text\" name=\"menu-search-bar\" class=\"search-input\"\n (keyup)=\"onSearch($event)\" [placeholder]=\"props?.['searchPlaceholder'] || 'Search'\" />\n <sa-icon class=\"pointer\" icon=\"closeOutlined\" size=\"15\" class=\"searchIcons\" matSuffix (click)=\"clearSearch($event)\"></sa-icon>\n </mat-form-field>\n </div>\n\n @if (filteredCategories().length > 0) {\n <div class=\"two-panel-dropdown\">\n <!-- Left Panel: Categories -->\n <div class=\"category-panel\">\n @for (cat of filteredCategories(); track cat[bindValue]) {\n <div class=\"category-item\" [class.active]=\"cat[bindValue] === selectedCategory()?.[bindValue]\"\n (click)=\"selectCategory(cat); $event.stopPropagation()\">\n <span class=\"category-label\">{{ cat[bindLabel] }}\n @if(props?.['showAttributesCount']){\n <span class=\"attributes-count\">({{ cat?.[bindAttributes]?.length }})</span>\n }\n </span>\n </div>\n }\n </div>\n <div class=\"dropdown-divider\"></div>\n\n <!-- Right Panel: Attributes -->\n <div class=\"attributes-panel\">\n @if(filteredAttributes().length > 0) {\n @for (val of filteredAttributes(); track val[bindValue]) {\n <div class=\"attribute-item pointer\"\n [class.active]=\"props?.['multiple'] ? isItemSelected(val) : formControl.value?.[bindValue] === val[bindValue]\" (click)=\"props?.['multiple'] ? toggleValue(val) : selectSingleValue(val); $event.stopPropagation()\">\n @if(props?.['multiple']){\n <label class=\"custom-checkbox-container\" (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [checked]=\"isItemSelected(val)\" (change)=\"toggleValue(val)\">\n <span class=\"checkmark\"></span>\n <span class=\"attribute-label\">{{ val[bindLabel] }}</span>\n </label>\n }\n @else{\n <label class=\"custom-checkbox-container\">\n <span class=\"attribute-label\">{{ val[bindLabel] }}</span>\n @if(val?.tooltip || val?.description){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"val?.tooltip || val?.description\" matTooltipClass=\"custom-tooltip\"\n class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </label>\n }\n </div>\n }\n }@else {\n <div class=\"p-4 text-center text-gray-500 w-full\">\n No items found.\n </div>\n }\n </div>\n </div>\n } @else {\n <div class=\"p-4 text-center text-gray-500 w-full\">\n No items found.\n </div>\n }\n </div>\n }\n</div>", styles: [".custom-category-container{display:flex;align-items:center;justify-content:space-between;border-radius:var(--small-4px, 4px);padding:.5rem .75rem;min-height:2.438rem;cursor:pointer;border:1px solid var(--grey-100, #EAECF0)}.custom-category-container.open{border-color:var(--primary-500)}.custom-category-attribute-container{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding-right:1.5rem}.custom-category-attribute{display:flex;align-items:center;background-color:#e5e7eb;border-radius:9999px;padding:.25rem .75rem;color:#374151;font-size:.875rem;font-weight:500}.custom-category-attribute-icon.right{margin-left:.5rem;cursor:pointer}.placeholder{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.custom-checkbox-container input{opacity:0;position:absolute;width:0;height:0}.checkmark{height:18px;width:18px;background-color:#f3f4f6;border:1px solid #d1d5db;border-radius:4px;position:relative;margin-right:8px}.custom-checkbox-container input:checked~.checkmark{background-color:#3b82f6;border-color:#3b82f6}.checkmark:after{content:\"\";position:absolute;display:none}.custom-checkbox-container input:checked~.checkmark:after{display:block}.custom-checkbox-container .checkmark:after{left:6px;top:2px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}::ng-deep .custom-category-dropdown .search-input-container .mat-mdc-form-field{width:-webkit-fill-available}.custom-category-dropdown .two-panel-dropdown{display:flex;min-height:250px;max-height:400px;background-color:#fff;overflow:hidden;top:calc(100% + 4px);gap:var(--medium-20px, 20px)}::ng-deep .custom-category-dropdown .search-input-container .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding:var(--small-2px, 2px) var(--small-12px, 12px)}.custom-category-dropdown .dropdown-divider{border-right:1px solid var(--grey-100, #EAECF0)}.custom-category-dropdown .category-label{color:var(--text-highemphasis, #1C1B20);text-align:left;font-family:var(--font-family, Roboto);font-size:var(--small-12px, 12px);font-style:normal;font-weight:400;line-height:var(--small-16px, 16px)}.custom-category-dropdown .attribute-label{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.custom-category-dropdown .category-item.active{border-radius:var(--small-4px, 4px);background:var(--primary-500)}.custom-category-dropdown .category-item.active .category-label{color:var(--text-white, #FFF);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-12px, 12px);font-style:normal;font-weight:500;line-height:var(--small-16px, 16px);letter-spacing:.5px}.custom-category-dropdown .category-item:not(.active):hover{border-radius:var(--small-4px, 4px);background-color:var(--primary-50)}.custom-category-dropdown .attribute-item:hover{border-radius:var(--small-4px, 4px);background-color:var(--primary-50)}.custom-category-dropdown .attribute-item.active{border-radius:var(--small-4px, 4px);background:var(--primary-500)}.custom-category-dropdown .attribute-item.active .attribute-label{color:var(--text-white, #FFF);font-weight:500}.custom-category-dropdown .category-panel{flex:2;overflow-y:auto;display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.custom-category-dropdown .category-item{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:var(--small-4px, 4px);background:var(--structural-white);cursor:pointer}.custom-category-dropdown .attributes-panel{flex:2;overflow-y:auto;display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px);align-self:stretch}.custom-category-dropdown .attribute-item{display:flex;padding:var(--small-8px, 8px) var(--small-8px, 8px);align-items:center;gap:var(--Small-4px, 4px)}.custom-checkbox-container{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:var(--small-4px, 4px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:var(--primary-500)}::ng-deep .custom-category-dropdown .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:var(--small-4px, 4px);border-bottom-right-radius:var(--small-4px, 4px);border-bottom-left-radius:0}::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:var(--grey-100)}::ng-deep .custom-category-dropdown .active .tooltip-container .info-icon{color:var(--structural-white)}.custom-category-dropdown .dropdown-panel{display:flex;padding:var(--small-16px, 16px) var(--medium-20px, 20px) var(--small-16px, 16px) var(--small-12px, 12px);flex-direction:column;gap:var(--small-10px, 10px);border-radius:var(--small-8px, 8px);background:var(--structural-white);width:fit-content;max-height:400px;box-shadow:0 1px 2px #0000004d,0 1px 2px #0000004d,0 2px 6px 2px #00000026;margin-top:0;box-sizing:border-box;position:absolute;z-index:1000;-webkit-overflow-scrolling:touch}.custom-category-container .custom-category-attribute-label{color:var(--text-highemphasis);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.custom-category-dropdown .searchIcons{color:var(--color-text-neutral-300, #757575)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSelectModule }] }); }
|
|
3387
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CategoryDropdownComponent, isStandalone: true, selector: "sa-category-dropdown", host: { listeners: { "document:click": "onClick($event)" } }, providers: [IconService], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "categoryContainer", first: true, predicate: ["categoryContainer"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"custom-category-dropdown relative\" (click)=\"toggleDropdown()\">\n <!-- Dropdown Trigger / Display -->\n <div #categoryContainer class=\"custom-category-container\" [class.open]=\"isOpen()\">\n <div class=\"custom-category-attribute-container\">\n @if(props?.['multiple']){\n @if (selectedAttributes().length > 0) {\n @for (item of selectedAttributes(); track item[bindValue]) {\n <div class=\"custom-category-attribute custom-category-custom-chip\" (click)=\"$event.stopPropagation()\">\n <span class=\"custom-category-attribute-label\">{{ item[bindLabel] }}</span>\n <span class=\"custom-category-attribute-icon right\">\n <sa-icon icon=\"closeOutlined\" (click)=\"removeValue(item)\" size=\"11\"></sa-icon>\n </span>\n </div>\n }\n } @else {\n <span class=\"placeholder\">Select items</span>\n }\n } @else {\n @if(formControl.value) {\n <span class=\"custom-category-attribute-label\">{{ formControl.value[bindLabel] }}</span>\n } @else {\n <span class=\"placeholder\">Select item</span>\n }\n }\n </div>\n <div class=\"custom-category-arrow-wrapper\">\n <sa-icon icon=\"upDownChevronOutlined\" size=\"11\" class=\"searchIcons\"></sa-icon>\n </div>\n </div>\n\n <!-- Dropdown Panel -->\n @if (isOpen()) {\n <div #dropdownPanel class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\">\n <div class=\"search-input-container mat-form-field-density-5\">\n <mat-form-field [appearance]=\"props['appearance'] || 'outline'\" class=\"w-100\">\n <sa-icon icon=\"searchIcon\" size=\"20\" class=\"searchIcons\" matPrefix></sa-icon>\n <input #searchInput matInput type=\"text\" name=\"menu-search-bar\" class=\"search-input\"\n (keyup)=\"onSearch($event)\" [placeholder]=\"props?.['searchPlaceholder'] || 'Search'\" />\n <sa-icon class=\"pointer\" icon=\"closeOutlined\" size=\"15\" class=\"searchIcons\" matSuffix\n (click)=\"clearSearch($event)\"></sa-icon>\n </mat-form-field>\n </div>\n\n @if (filteredCategories().length > 0) {\n <div class=\"two-panel-dropdown\">\n <!-- Left Panel: Categories -->\n <div class=\"category-panel\">\n @for (cat of filteredCategories(); track cat[bindValue]) {\n <div class=\"category-item\" [class.active]=\"cat[bindValue] === selectedCategory()?.[bindValue]\"\n (click)=\"selectCategory(cat); $event.stopPropagation()\">\n <span class=\"category-label\">{{ cat[bindLabel] }}\n @if(props?.['showAttributesCount']){\n <span class=\"attributes-count\">({{ cat?.[bindAttributes]?.length }})</span>\n }\n </span>\n </div>\n }\n </div>\n <div class=\"dropdown-divider\"></div>\n\n <!-- Right Panel: Attributes -->\n <div class=\"attributes-panel\">\n @if(filteredAttributes().length > 0) {\n @for (val of filteredAttributes(); track val[bindValue]) {\n <div class=\"attribute-item pointer\"\n [class.active]=\"props?.['multiple'] ? isItemSelected(val) : formControl.value?.[bindValue] === val[bindValue]\"\n (click)=\"props?.['multiple'] ? toggleValue(val) : selectSingleValue(val); $event.stopPropagation()\">\n @if(props?.['multiple']){\n <label class=\"custom-checkbox-container\" (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [checked]=\"isItemSelected(val)\" (change)=\"toggleValue(val)\">\n <span class=\"checkmark\"></span>\n <span class=\"attribute-label\">{{ val[bindLabel] }}</span>\n </label>\n }\n @else{\n <label class=\"custom-checkbox-container\">\n <span class=\"attribute-label\">{{ val[bindLabel] }}</span>\n @if(val?.tooltip || val?.description){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"val?.tooltip || val?.description\" matTooltipClass=\"custom-tooltip\"\n class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </label>\n }\n </div>\n }\n }@else {\n <div class=\"p-4 text-center text-gray-500 w-full\">\n No items found.\n </div>\n }\n </div>\n </div>\n } @else {\n <div class=\"p-4 text-center text-gray-500 w-full\">\n No items found.\n </div>\n }\n </div>\n }\n</div>", styles: [".custom-category-dropdown{position:relative;display:inline-block;width:100%}.custom-category-dropdown.relative{position:relative}.custom-category-container.open{border-color:var(--primary-500)}.custom-category-attribute-container{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding-right:1.5rem}.custom-category-container{display:flex;align-items:center;justify-content:space-between;border-radius:var(--small-4px, 4px);padding:.5rem .75rem;min-height:2.438rem;cursor:pointer;border:1px solid var(--grey-100, #EAECF0);width:100%;contain:layout style;will-change:auto}.custom-category-attribute{display:flex;align-items:center;background-color:var(--border-subtle, #e5e7eb);border-radius:9999px;padding:.25rem .75rem;color:var(--text-medium-emphasis, #374151);font-size:var(--small-14px, 14px);font-weight:500}.custom-category-attribute-icon.right{margin-left:.5rem;cursor:pointer}.placeholder{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.custom-checkbox-container input{opacity:0;position:absolute;width:0;height:0}.checkmark{height:1.125rem;width:1.125rem;background-color:var(--primary-50);border:1px solid var(--grey-100);border-radius:var(--small-4px, 4px);position:relative;margin-right:var(--small-8px, 8px)}.custom-checkbox-container input:checked~.checkmark{background-color:var(--primary-500);border-color:var(--primary-500)}.checkmark:after{content:\"\";position:absolute;display:none}.custom-checkbox-container input:checked~.checkmark:after{display:block}.custom-checkbox-container .checkmark:after{left:.375rem;top:.125rem;width:.375rem;height:.625rem;border:solid var(--structural-white);border-width:0 .125rem .125rem 0;transform:rotate(45deg)}::ng-deep .custom-category-dropdown .search-input-container .mat-mdc-form-field{width:-webkit-fill-available}.custom-category-dropdown .two-panel-dropdown{display:flex;min-height:15.625rem;max-height:25rem;background-color:var(--structural-white);overflow:hidden;top:calc(100% + var(--small-4px));gap:var(--medium-20px);width:100%;flex-shrink:0;contain:layout}::ng-deep .custom-category-dropdown .search-input-container .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding:var(--small-2px) var(--small-12px)}.custom-category-dropdown .dropdown-divider{border-right:1px solid var(--grey-100, #EAECF0)}.custom-category-dropdown .category-label{color:var(--text-highemphasis, #1C1B20);text-align:left;font-family:var(--font-family, Roboto);font-size:var(--small-12px, 12px);font-style:normal;font-weight:400;line-height:var(--small-16px, 16px)}.custom-category-dropdown .attribute-label{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.custom-category-dropdown .category-item.active{border-radius:var(--small-4px, 4px);background:var(--primary-500)}.custom-category-dropdown .category-item.active .category-label{color:var(--text-white, #FFF);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-12px, 12px);font-style:normal;font-weight:500;line-height:var(--small-16px, 16px);letter-spacing:.5px}.custom-category-dropdown .category-item:not(.active):hover{border-radius:var(--small-4px, 4px);background-color:var(--primary-50)}.custom-category-dropdown .attribute-item:hover{border-radius:var(--small-4px, 4px);background-color:var(--primary-50)}.custom-category-dropdown .attribute-item.active{border-radius:var(--small-4px, 4px);background:var(--primary-500)}.custom-category-dropdown .attribute-item.active .attribute-label{color:var(--text-white, #FFF);font-weight:500}.custom-category-dropdown .category-panel{flex:2;overflow-y:auto;display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.custom-category-dropdown .category-item{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:var(--small-4px, 4px);background:var(--structural-white);cursor:pointer}.custom-category-dropdown .attributes-panel{flex:2;overflow-y:auto;display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px);align-self:stretch}.custom-category-dropdown .attribute-item{display:flex;padding:var(--small-8px, 8px) var(--small-8px, 8px);align-items:center;gap:var(--Small-4px, 4px)}.custom-checkbox-container{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:var(--small-4px, 4px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:var(--primary-500)}::ng-deep .custom-category-dropdown .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:var(--small-4px, 4px);border-bottom-right-radius:var(--small-4px, 4px);border-bottom-left-radius:0}::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:var(--grey-100)}::ng-deep .custom-category-dropdown .active .tooltip-container .info-icon{color:var(--structural-white)}.custom-category-dropdown .dropdown-panel{display:flex;padding:var(--small-16px, 16px) var(--medium-20px, 20px) var(--small-16px, 16px) var(--small-12px, 12px);flex-direction:column;gap:var(--small-10px);border-radius:var(--small-8px);background:var(--structural-white);width:20rem;min-width:20rem;max-width:35rem;max-height:25rem;box-shadow:0 1px 2px #0000004d,0 1px 2px #0000004d,0 2px 6px 2px #00000026;margin-top:0;box-sizing:border-box;position:absolute;z-index:1000;-webkit-overflow-scrolling:touch;will-change:transform;contain:layout style}.custom-category-container .custom-category-attribute-label{color:var(--text-highemphasis);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.custom-category-dropdown .searchIcons{color:var(--color-text-neutral-300, #757575)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSelectModule }] }); }
|
|
3375
3388
|
}
|
|
3376
3389
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CategoryDropdownComponent, decorators: [{
|
|
3377
3390
|
type: Component,
|
|
@@ -3389,7 +3402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
3389
3402
|
MatDatepickerModule,
|
|
3390
3403
|
MatNativeDateModule,
|
|
3391
3404
|
MatCheckboxModule,
|
|
3392
|
-
MatSelectModule], providers: [IconService], template: "<div class=\"custom-category-dropdown relative\" (click)=\"toggleDropdown()\">\n <!-- Dropdown Trigger / Display -->\n <div #categoryContainer class=\"custom-category-container\" [class.open]=\"isOpen()\">\n <div class=\"custom-category-attribute-container\">\n @if(props?.['multiple']){\n @if (selectedAttributes().length > 0) {\n @for (item of selectedAttributes(); track item[bindValue]) {\n <div class=\"custom-category-attribute custom-category-custom-chip\" (click)=\"$event.stopPropagation()\">\n <span class=\"custom-category-attribute-label\">{{ item[bindLabel] }}</span>\n <span class=\"custom-category-attribute-icon right\">\n <sa-icon icon=\"closeOutlined\" (click)=\"removeValue(item)\" size=\"11\"></sa-icon>\n </span>\n </div>\n }\n } @else {\n <span class=\"placeholder\">Select items</span>\n }\n } @else {\n @if(formControl.value) {\n <span class=\"custom-category-attribute-label\">{{ formControl.value[bindLabel] }}</span>\n } @else {\n <span class=\"placeholder\">Select item</span>\n }\n }\n </div>\n <div class=\"custom-category-arrow-wrapper\">\n <sa-icon icon=\"upDownChevronOutlined\" size=\"11\" class=\"searchIcons\"></sa-icon>\n </div>\n </div>\n\n <!-- Dropdown Panel -->\n @if (isOpen()) {\n <div #dropdownPanel class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\">\n <div class=\"search-input-container mat-form-field-density-5\">\n <mat-form-field [appearance]=\"props['appearance'] || 'outline'\" class=\"w-100\">\n <sa-icon icon=\"searchIcon\" size=\"20\" class=\"searchIcons\" matPrefix></sa-icon>\n <input #searchInput matInput type=\"text\" name=\"menu-search-bar\" class=\"search-input\"\n (keyup)=\"onSearch($event)\" [placeholder]=\"props?.['searchPlaceholder'] || 'Search'\" />\n <sa-icon class=\"pointer\" icon=\"closeOutlined\" size=\"15\" class=\"searchIcons\" matSuffix (click)=\"clearSearch($event)\"></sa-icon>\n </mat-form-field>\n </div>\n\n @if (filteredCategories().length > 0) {\n <div class=\"two-panel-dropdown\">\n <!-- Left Panel: Categories -->\n <div class=\"category-panel\">\n @for (cat of filteredCategories(); track cat[bindValue]) {\n <div class=\"category-item\" [class.active]=\"cat[bindValue] === selectedCategory()?.[bindValue]\"\n (click)=\"selectCategory(cat); $event.stopPropagation()\">\n <span class=\"category-label\">{{ cat[bindLabel] }}\n @if(props?.['showAttributesCount']){\n <span class=\"attributes-count\">({{ cat?.[bindAttributes]?.length }})</span>\n }\n </span>\n </div>\n }\n </div>\n <div class=\"dropdown-divider\"></div>\n\n <!-- Right Panel: Attributes -->\n <div class=\"attributes-panel\">\n @if(filteredAttributes().length > 0) {\n @for (val of filteredAttributes(); track val[bindValue]) {\n <div class=\"attribute-item pointer\"\n [class.active]=\"props?.['multiple'] ? isItemSelected(val) : formControl.value?.[bindValue] === val[bindValue]\" (click)=\"props?.['multiple'] ? toggleValue(val) : selectSingleValue(val); $event.stopPropagation()\">\n @if(props?.['multiple']){\n <label class=\"custom-checkbox-container\" (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [checked]=\"isItemSelected(val)\" (change)=\"toggleValue(val)\">\n <span class=\"checkmark\"></span>\n <span class=\"attribute-label\">{{ val[bindLabel] }}</span>\n </label>\n }\n @else{\n <label class=\"custom-checkbox-container\">\n <span class=\"attribute-label\">{{ val[bindLabel] }}</span>\n @if(val?.tooltip || val?.description){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"val?.tooltip || val?.description\" matTooltipClass=\"custom-tooltip\"\n class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </label>\n }\n </div>\n }\n }@else {\n <div class=\"p-4 text-center text-gray-500 w-full\">\n No items found.\n </div>\n }\n </div>\n </div>\n } @else {\n <div class=\"p-4 text-center text-gray-500 w-full\">\n No items found.\n </div>\n }\n </div>\n }\n</div>", styles: [".custom-category-container{display:flex;align-items:center;justify-content:space-between;border-radius:var(--small-4px, 4px);padding:.5rem .75rem;min-height:2.438rem;cursor:pointer;border:1px solid var(--grey-100, #EAECF0)}.custom-category-container.open{border-color:var(--primary-500)}.custom-category-attribute-container{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding-right:1.5rem}.custom-category-attribute{display:flex;align-items:center;background-color:#e5e7eb;border-radius:9999px;padding:.25rem .75rem;color:#374151;font-size:.875rem;font-weight:500}.custom-category-attribute-icon.right{margin-left:.5rem;cursor:pointer}.placeholder{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.custom-checkbox-container input{opacity:0;position:absolute;width:0;height:0}.checkmark{height:18px;width:18px;background-color:#f3f4f6;border:1px solid #d1d5db;border-radius:4px;position:relative;margin-right:8px}.custom-checkbox-container input:checked~.checkmark{background-color:#3b82f6;border-color:#3b82f6}.checkmark:after{content:\"\";position:absolute;display:none}.custom-checkbox-container input:checked~.checkmark:after{display:block}.custom-checkbox-container .checkmark:after{left:6px;top:2px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}::ng-deep .custom-category-dropdown .search-input-container .mat-mdc-form-field{width:-webkit-fill-available}.custom-category-dropdown .two-panel-dropdown{display:flex;min-height:250px;max-height:400px;background-color:#fff;overflow:hidden;top:calc(100% + 4px);gap:var(--medium-20px, 20px)}::ng-deep .custom-category-dropdown .search-input-container .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding:var(--small-2px, 2px) var(--small-12px, 12px)}.custom-category-dropdown .dropdown-divider{border-right:1px solid var(--grey-100, #EAECF0)}.custom-category-dropdown .category-label{color:var(--text-highemphasis, #1C1B20);text-align:left;font-family:var(--font-family, Roboto);font-size:var(--small-12px, 12px);font-style:normal;font-weight:400;line-height:var(--small-16px, 16px)}.custom-category-dropdown .attribute-label{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.custom-category-dropdown .category-item.active{border-radius:var(--small-4px, 4px);background:var(--primary-500)}.custom-category-dropdown .category-item.active .category-label{color:var(--text-white, #FFF);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-12px, 12px);font-style:normal;font-weight:500;line-height:var(--small-16px, 16px);letter-spacing:.5px}.custom-category-dropdown .category-item:not(.active):hover{border-radius:var(--small-4px, 4px);background-color:var(--primary-50)}.custom-category-dropdown .attribute-item:hover{border-radius:var(--small-4px, 4px);background-color:var(--primary-50)}.custom-category-dropdown .attribute-item.active{border-radius:var(--small-4px, 4px);background:var(--primary-500)}.custom-category-dropdown .attribute-item.active .attribute-label{color:var(--text-white, #FFF);font-weight:500}.custom-category-dropdown .category-panel{flex:2;overflow-y:auto;display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.custom-category-dropdown .category-item{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:var(--small-4px, 4px);background:var(--structural-white);cursor:pointer}.custom-category-dropdown .attributes-panel{flex:2;overflow-y:auto;display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px);align-self:stretch}.custom-category-dropdown .attribute-item{display:flex;padding:var(--small-8px, 8px) var(--small-8px, 8px);align-items:center;gap:var(--Small-4px, 4px)}.custom-checkbox-container{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:var(--small-4px, 4px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:var(--primary-500)}::ng-deep .custom-category-dropdown .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:var(--small-4px, 4px);border-bottom-right-radius:var(--small-4px, 4px);border-bottom-left-radius:0}::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:var(--grey-100)}::ng-deep .custom-category-dropdown .active .tooltip-container .info-icon{color:var(--structural-white)}.custom-category-dropdown .dropdown-panel{display:flex;padding:var(--small-16px, 16px) var(--medium-20px, 20px) var(--small-16px, 16px) var(--small-12px, 12px);flex-direction:column;gap:var(--small-10px, 10px);border-radius:var(--small-8px, 8px);background:var(--structural-white);width:fit-content;max-height:400px;box-shadow:0 1px 2px #0000004d,0 1px 2px #0000004d,0 2px 6px 2px #00000026;margin-top:0;box-sizing:border-box;position:absolute;z-index:1000;-webkit-overflow-scrolling:touch}.custom-category-container .custom-category-attribute-label{color:var(--text-highemphasis);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.custom-category-dropdown .searchIcons{color:var(--color-text-neutral-300, #757575)}\n"] }]
|
|
3405
|
+
MatSelectModule], providers: [IconService], template: "<div class=\"custom-category-dropdown relative\" (click)=\"toggleDropdown()\">\n <!-- Dropdown Trigger / Display -->\n <div #categoryContainer class=\"custom-category-container\" [class.open]=\"isOpen()\">\n <div class=\"custom-category-attribute-container\">\n @if(props?.['multiple']){\n @if (selectedAttributes().length > 0) {\n @for (item of selectedAttributes(); track item[bindValue]) {\n <div class=\"custom-category-attribute custom-category-custom-chip\" (click)=\"$event.stopPropagation()\">\n <span class=\"custom-category-attribute-label\">{{ item[bindLabel] }}</span>\n <span class=\"custom-category-attribute-icon right\">\n <sa-icon icon=\"closeOutlined\" (click)=\"removeValue(item)\" size=\"11\"></sa-icon>\n </span>\n </div>\n }\n } @else {\n <span class=\"placeholder\">Select items</span>\n }\n } @else {\n @if(formControl.value) {\n <span class=\"custom-category-attribute-label\">{{ formControl.value[bindLabel] }}</span>\n } @else {\n <span class=\"placeholder\">Select item</span>\n }\n }\n </div>\n <div class=\"custom-category-arrow-wrapper\">\n <sa-icon icon=\"upDownChevronOutlined\" size=\"11\" class=\"searchIcons\"></sa-icon>\n </div>\n </div>\n\n <!-- Dropdown Panel -->\n @if (isOpen()) {\n <div #dropdownPanel class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\">\n <div class=\"search-input-container mat-form-field-density-5\">\n <mat-form-field [appearance]=\"props['appearance'] || 'outline'\" class=\"w-100\">\n <sa-icon icon=\"searchIcon\" size=\"20\" class=\"searchIcons\" matPrefix></sa-icon>\n <input #searchInput matInput type=\"text\" name=\"menu-search-bar\" class=\"search-input\"\n (keyup)=\"onSearch($event)\" [placeholder]=\"props?.['searchPlaceholder'] || 'Search'\" />\n <sa-icon class=\"pointer\" icon=\"closeOutlined\" size=\"15\" class=\"searchIcons\" matSuffix\n (click)=\"clearSearch($event)\"></sa-icon>\n </mat-form-field>\n </div>\n\n @if (filteredCategories().length > 0) {\n <div class=\"two-panel-dropdown\">\n <!-- Left Panel: Categories -->\n <div class=\"category-panel\">\n @for (cat of filteredCategories(); track cat[bindValue]) {\n <div class=\"category-item\" [class.active]=\"cat[bindValue] === selectedCategory()?.[bindValue]\"\n (click)=\"selectCategory(cat); $event.stopPropagation()\">\n <span class=\"category-label\">{{ cat[bindLabel] }}\n @if(props?.['showAttributesCount']){\n <span class=\"attributes-count\">({{ cat?.[bindAttributes]?.length }})</span>\n }\n </span>\n </div>\n }\n </div>\n <div class=\"dropdown-divider\"></div>\n\n <!-- Right Panel: Attributes -->\n <div class=\"attributes-panel\">\n @if(filteredAttributes().length > 0) {\n @for (val of filteredAttributes(); track val[bindValue]) {\n <div class=\"attribute-item pointer\"\n [class.active]=\"props?.['multiple'] ? isItemSelected(val) : formControl.value?.[bindValue] === val[bindValue]\"\n (click)=\"props?.['multiple'] ? toggleValue(val) : selectSingleValue(val); $event.stopPropagation()\">\n @if(props?.['multiple']){\n <label class=\"custom-checkbox-container\" (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [checked]=\"isItemSelected(val)\" (change)=\"toggleValue(val)\">\n <span class=\"checkmark\"></span>\n <span class=\"attribute-label\">{{ val[bindLabel] }}</span>\n </label>\n }\n @else{\n <label class=\"custom-checkbox-container\">\n <span class=\"attribute-label\">{{ val[bindLabel] }}</span>\n @if(val?.tooltip || val?.description){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"val?.tooltip || val?.description\" matTooltipClass=\"custom-tooltip\"\n class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </label>\n }\n </div>\n }\n }@else {\n <div class=\"p-4 text-center text-gray-500 w-full\">\n No items found.\n </div>\n }\n </div>\n </div>\n } @else {\n <div class=\"p-4 text-center text-gray-500 w-full\">\n No items found.\n </div>\n }\n </div>\n }\n</div>", styles: [".custom-category-dropdown{position:relative;display:inline-block;width:100%}.custom-category-dropdown.relative{position:relative}.custom-category-container.open{border-color:var(--primary-500)}.custom-category-attribute-container{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding-right:1.5rem}.custom-category-container{display:flex;align-items:center;justify-content:space-between;border-radius:var(--small-4px, 4px);padding:.5rem .75rem;min-height:2.438rem;cursor:pointer;border:1px solid var(--grey-100, #EAECF0);width:100%;contain:layout style;will-change:auto}.custom-category-attribute{display:flex;align-items:center;background-color:var(--border-subtle, #e5e7eb);border-radius:9999px;padding:.25rem .75rem;color:var(--text-medium-emphasis, #374151);font-size:var(--small-14px, 14px);font-weight:500}.custom-category-attribute-icon.right{margin-left:.5rem;cursor:pointer}.placeholder{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.custom-checkbox-container input{opacity:0;position:absolute;width:0;height:0}.checkmark{height:1.125rem;width:1.125rem;background-color:var(--primary-50);border:1px solid var(--grey-100);border-radius:var(--small-4px, 4px);position:relative;margin-right:var(--small-8px, 8px)}.custom-checkbox-container input:checked~.checkmark{background-color:var(--primary-500);border-color:var(--primary-500)}.checkmark:after{content:\"\";position:absolute;display:none}.custom-checkbox-container input:checked~.checkmark:after{display:block}.custom-checkbox-container .checkmark:after{left:.375rem;top:.125rem;width:.375rem;height:.625rem;border:solid var(--structural-white);border-width:0 .125rem .125rem 0;transform:rotate(45deg)}::ng-deep .custom-category-dropdown .search-input-container .mat-mdc-form-field{width:-webkit-fill-available}.custom-category-dropdown .two-panel-dropdown{display:flex;min-height:15.625rem;max-height:25rem;background-color:var(--structural-white);overflow:hidden;top:calc(100% + var(--small-4px));gap:var(--medium-20px);width:100%;flex-shrink:0;contain:layout}::ng-deep .custom-category-dropdown .search-input-container .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding:var(--small-2px) var(--small-12px)}.custom-category-dropdown .dropdown-divider{border-right:1px solid var(--grey-100, #EAECF0)}.custom-category-dropdown .category-label{color:var(--text-highemphasis, #1C1B20);text-align:left;font-family:var(--font-family, Roboto);font-size:var(--small-12px, 12px);font-style:normal;font-weight:400;line-height:var(--small-16px, 16px)}.custom-category-dropdown .attribute-label{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.custom-category-dropdown .category-item.active{border-radius:var(--small-4px, 4px);background:var(--primary-500)}.custom-category-dropdown .category-item.active .category-label{color:var(--text-white, #FFF);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-12px, 12px);font-style:normal;font-weight:500;line-height:var(--small-16px, 16px);letter-spacing:.5px}.custom-category-dropdown .category-item:not(.active):hover{border-radius:var(--small-4px, 4px);background-color:var(--primary-50)}.custom-category-dropdown .attribute-item:hover{border-radius:var(--small-4px, 4px);background-color:var(--primary-50)}.custom-category-dropdown .attribute-item.active{border-radius:var(--small-4px, 4px);background:var(--primary-500)}.custom-category-dropdown .attribute-item.active .attribute-label{color:var(--text-white, #FFF);font-weight:500}.custom-category-dropdown .category-panel{flex:2;overflow-y:auto;display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.custom-category-dropdown .category-item{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:var(--small-4px, 4px);background:var(--structural-white);cursor:pointer}.custom-category-dropdown .attributes-panel{flex:2;overflow-y:auto;display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px);align-self:stretch}.custom-category-dropdown .attribute-item{display:flex;padding:var(--small-8px, 8px) var(--small-8px, 8px);align-items:center;gap:var(--Small-4px, 4px)}.custom-checkbox-container{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:var(--small-4px, 4px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:var(--primary-500)}::ng-deep .custom-category-dropdown .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:var(--small-4px, 4px);border-bottom-right-radius:var(--small-4px, 4px);border-bottom-left-radius:0}::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:var(--grey-100)}::ng-deep .custom-category-dropdown .active .tooltip-container .info-icon{color:var(--structural-white)}.custom-category-dropdown .dropdown-panel{display:flex;padding:var(--small-16px, 16px) var(--medium-20px, 20px) var(--small-16px, 16px) var(--small-12px, 12px);flex-direction:column;gap:var(--small-10px);border-radius:var(--small-8px);background:var(--structural-white);width:20rem;min-width:20rem;max-width:35rem;max-height:25rem;box-shadow:0 1px 2px #0000004d,0 1px 2px #0000004d,0 2px 6px 2px #00000026;margin-top:0;box-sizing:border-box;position:absolute;z-index:1000;-webkit-overflow-scrolling:touch;will-change:transform;contain:layout style}.custom-category-container .custom-category-attribute-label{color:var(--text-highemphasis);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.custom-category-dropdown .searchIcons{color:var(--color-text-neutral-300, #757575)}\n"] }]
|
|
3393
3406
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { searchInput: [{
|
|
3394
3407
|
type: ViewChild,
|
|
3395
3408
|
args: ['searchInput']
|
|
@@ -3469,7 +3482,7 @@ class NgSelectComponent extends FieldType {
|
|
|
3469
3482
|
this.filteredOptions = [...this.field.props?.options];
|
|
3470
3483
|
}
|
|
3471
3484
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NgSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3472
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: NgSelectComponent, isStandalone: true, selector: "sa-ng-select", providers: [IconService], usesInheritance: true, ngImport: i0, template: "<ng-select \n[items]=\"filteredOptions\" \n[multiple]=\"props?.multiple || false\" \n[bindLabel]=\"props?.bindLabel || 'label'\"\n[closeOnSelect]=\"props?.closeOnselect || true\" \n[bindValue]=\"props?.bindValue || 'value'\"\n[placeholder]=\"props?.placeholder || 'Select Options'\" \n[searchable]=\"false\" \n[formControl]=\"formControl\"\n[clearable]=\"props?.isClearable\" \n[appearance]=\"props['appearance'] || 'outline'\" \nclass=\"ng-select-custom\">\n\n <ng-template ng-header-tmp>\n <div class=\"search-input-container mat-form-field-density-5\">\n <mat-form-field [appearance]=\"props['appearance'] || 'outline'\" class=\"w-100\">\n <sa-icon icon=\"searchIcon\" class=\"searchIcons\" size=\"20\" matPrefix></sa-icon>\n <input matInput type=\"text\" name=\"menu-search-bar\" class=\"search-input searchIcons\" (keyup)=\"onSearch($event)\"\n (keydown)=\"stopBackspacePropagation($event)\" [placeholder]=\"props?.searchPlaceholder || 'Search'\"\n [(ngModel)]=\"searchValue\" />\n <sa-icon icon=\"closeOutlined\" class=\"pointer searchIcons\" size=\"15\" matSuffix\n (click)=\"clearSearch($event)\"></sa-icon>\n </mat-form-field>\n </div>\n </ng-template>\n\n <!-- Option template with a checkbox in front of each row -->\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\n <div class=\"option-row\">\n @if(props?.multiple){\n <input type=\"checkbox\" [checked]=\"item$.selected\" tabindex=\"-1\" />\n }\n <span class=\"option-label\">{{ item[props.bindLabel || 'label'] }}</span>\n\n </div>\n </ng-template>\n\n <!-- Selected items chip template (optional) -->\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div class=\"chips ng-values-list\">\n\n <!-- If collapsed: show only first 2 + summary -->\n <ng-container *ngIf=\"!expandedSummary\">\n @for (s of items.slice(0, 2); track s[props.bindValue || 'value']) {\n <div class=\"ng-value\">\n <span class=\"ng-value-label\">{{ s[props.bindLabel || 'label'] }}</span>\n <span class=\"ng-value-icon right\" (click)=\"clear(s)\"><sa-icon icon=\"closeOutlined\"\n size=\"11\"></sa-icon></span>\n </div>\n }\n\n @if (items.length > 2) {\n <div class=\"ng-value summary-chip pointer\" (click)=\"toggleSummary()\">\n <span class=\"ng-value-label\">+{{ items.length - 2 }}</span>\n <span class=\"ng-value-icon right\" (click)=\"clearRemaining(items, clear)\"><sa-icon\n icon=\"closeOutlined\" size=\"11\"></sa-icon></span>\n </div>\n }\n </ng-container>\n\n <!-- If expanded: show all items -->\n <ng-container *ngIf=\"expandedSummary\">\n @for (s of items; track s[props.bindValue || 'value']) {\n <div class=\"ng-value\">\n <span class=\"ng-value-label\">{{ s[props.bindLabel || 'label'] }}</span>\n <span class=\"ng-value-icon right\" (click)=\"clear(s)\"><sa-icon icon=\"closeOutlined\"\n size=\"11\"></sa-icon></span>\n </div>\n }\n <!-- Collapse button -->\n <div class=\"ng-value summary-chip pointer\" (click)=\"toggleSummary()\">\n <sa-icon class=\"ng-value-label\" icon=\"leftChevronOutlined\"></sa-icon>\n </div>\n </ng-container>\n\n </div>\n </ng-template>\n\n @if(props?.footer){\n <ng-template ng-footer-tmp>\n <div class=\"dropdown-footer\">{{props?.footer?.description}}</div>\n </ng-template>\n }\n\n <ng-template ng-notfound-tmp>\n <div class=\"no-results\">\n @if (searchValue?.length > 0) {\n {{ \"\u274C No items match \\\"{{ searchValue }}\\\"\" || props?.searchNotFoundText}}\n } @else {\n {{ \"\u26A0\uFE0F No options available\" || props?.notFoundText}}\n }\n </div>\n </ng-template>\n\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading\">\u23F3 Loading options...</div>\n </ng-template>\n</ng-select>", styles: ["::ng-deep .ng-select-custom .search-input-container .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding:var(--small-2px, 2px) var(--small-12px, 12px)}.ng-select-custom .ng-values-list{display:flex;flex-wrap:wrap;gap:var(--small-8px, 8px)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:none;display:flex;align-items:center;font-size:var(--small-6px, 6px)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{border-radius:var(--small-4px, 4px);background:var(--grey-50, #F2F4F7);display:flex;padding:var(--small-2px, 2px) var(--small-8px, 8px);justify-content:center;align-items:center;gap:var(--small-4px, 4px)}.ng-select-custom .option-row{display:flex;width:18.75rem;height:2.5rem;padding:var(--small-12px, 12px);align-items:center;gap:var(--small-8px, 8px);flex-shrink:0}::ng-deep .ng-select-custom .mdc-form-field.mat-internal-form-field{display:flex;gap:var(--small-8px, 8px);align-items:center}::ng-deep .ng-select-custom .mdc-checkbox__ripple{display:none}::ng-deep .ng-select-custom .checkbox-style{display:flex;align-items:center}.ng-select-custom .ng-option input[type=checkbox],.ng-select input[type=checkbox]{accent-color:var(--primary-500);vertical-align:middle;width:var(--small-14px, 14px);height:var(--small-14px, 14px)}::ng-deep .ng-select-custom.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:var(--primary-50)}.option-label{color:var(--text-high-emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .search-input-container .mat-mdc-form-field{width:-webkit-fill-available}::ng-deep .ng-select-custom .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:var(--primary-50)}::ng-deep .ng-select .ng-arrow{display:none!important}::ng-deep .ng-select .ng-arrow-wrapper{width:var(--small-12px, 12px);height:var(--small-12px, 12px);display:flex;align-items:center;justify-content:center}::ng-deep .ng-select .ng-arrow-wrapper:after{content:\"\";display:inline-block;width:var(--small-8px, 8px);height:var(--small-12px, 12px);background:url(/assets/upDownChevronOutlined.svg) no-repeat center;background-size:contain}::ng-deep .ng-select-custom.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:var(--primary-500);box-shadow:none}::ng-deep .ng-select-custom.ng-select .no-results{padding:.8rem}::ng-deep .ng-select-custom.ng-select .ng-select-container{padding:0rem var(--small-12px) 0rem var(--small-12px);height:1.875rem;min-height:2.438rem;border:1px solid var(--grey-100, #EAECF0)}::ng-deep .ng-select-custom.ng-select .option-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .ng-value-label{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-family-roboto);font-size:.688rem;font-style:normal;font-weight:500;line-height:var(--small-16px, 16px);letter-spacing:.5px}::ng-deep .ng-select-custom.ng-select .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:var(--primary-500)}::ng-deep .ng-select-custom.ng-select .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:var(--small-4px, 4px);border-bottom-right-radius:var(--small-4px, 4px);border-bottom-left-radius:0}::ng-deep .ng-select-custom.ng-select.ng-select-single .ng-value-label{color:var(--text-highemphasis);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--grey-100)}.ng-select-custom .searchIcons{color:var(--color-text-neutral-300, #757575)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i3$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i3$1.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i3$1.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i3$1.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatCheckboxModule }] }); }
|
|
3485
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: NgSelectComponent, isStandalone: true, selector: "sa-ng-select", providers: [IconService], usesInheritance: true, ngImport: i0, template: "<ng-select [items]=\"filteredOptions\" [multiple]=\"props?.multiple || false\" [bindLabel]=\"props?.bindLabel || 'label'\"\n [closeOnSelect]=\"props?.closeOnselect || true\" [bindValue]=\"props?.bindValue || 'value'\"\n [placeholder]=\"props?.placeholder || 'Select'\" [searchable]=\"false\" [formControl]=\"formControl\"\n [clearable]=\"props?.isClearable\" [appearance]=\"props['appearance'] || 'outline'\" class=\"ng-select-custom\">\n\n <ng-template ng-header-tmp>\n <div class=\"search-input-container mat-form-field-density-5\">\n <mat-form-field [appearance]=\"props['appearance'] || 'outline'\" class=\"w-100\">\n <sa-icon icon=\"searchIcon\" class=\"searchIcons\" size=\"20\" matPrefix></sa-icon>\n <input matInput type=\"text\" name=\"menu-search-bar\" class=\"search-input searchIcons\"\n (keyup)=\"onSearch($event)\" (keydown)=\"stopBackspacePropagation($event)\"\n [placeholder]=\"props?.searchPlaceholder || 'Search'\" [(ngModel)]=\"searchValue\" />\n <sa-icon icon=\"closeOutlined\" class=\"pointer searchIcons\" size=\"15\" matSuffix\n (click)=\"clearSearch($event)\"></sa-icon>\n </mat-form-field>\n </div>\n </ng-template>\n\n <!-- Option template with a checkbox in front of each row -->\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\n <div class=\"option-row\">\n @if(props?.multiple){\n <input type=\"checkbox\" [checked]=\"item$.selected\" tabindex=\"-1\" />\n }\n <span class=\"option-label\">{{ item[props.bindLabel || 'label'] }}</span>\n\n </div>\n </ng-template>\n\n <!-- Selected items chip template (optional) -->\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div class=\"chips ng-values-list\">\n\n <!-- If collapsed: show only first 2 + summary -->\n <ng-container *ngIf=\"!expandedSummary\">\n @for (s of items.slice(0, 2); track s[props.bindValue || 'value']) {\n <div class=\"ng-value\">\n <span class=\"ng-value-label\">{{ s[props.bindLabel || 'label'] }}</span>\n <span class=\"ng-value-icon right\" (click)=\"clear(s)\"><sa-icon icon=\"closeOutlined\"\n size=\"11\"></sa-icon></span>\n </div>\n }\n\n @if (items.length > 2) {\n <div class=\"ng-value summary-chip pointer\" (click)=\"toggleSummary()\">\n <span class=\"ng-value-label\">+{{ items.length - 2 }}</span>\n <span class=\"ng-value-icon right\" (click)=\"clearRemaining(items, clear)\"><sa-icon\n icon=\"closeOutlined\" size=\"11\"></sa-icon></span>\n </div>\n }\n </ng-container>\n\n <!-- If expanded: show all items -->\n <ng-container *ngIf=\"expandedSummary\">\n @for (s of items; track s[props.bindValue || 'value']) {\n <div class=\"ng-value\">\n <span class=\"ng-value-label\">{{ s[props.bindLabel || 'label'] }}</span>\n <span class=\"ng-value-icon right\" (click)=\"clear(s)\"><sa-icon icon=\"closeOutlined\"\n size=\"11\"></sa-icon></span>\n </div>\n }\n <!-- Collapse button -->\n <div class=\"ng-value summary-chip pointer\" (click)=\"toggleSummary()\">\n <sa-icon class=\"ng-value-label\" icon=\"leftChevronOutlined\"></sa-icon>\n </div>\n </ng-container>\n\n </div>\n </ng-template>\n\n @if(props?.footer){\n <ng-template ng-footer-tmp>\n <div class=\"dropdown-footer\">{{props?.footer?.description}}</div>\n </ng-template>\n }\n\n <ng-template ng-notfound-tmp>\n <div class=\"no-results\">\n @if (searchValue?.length > 0) {\n {{ \"\u274C No items match \\\"{{ searchValue }}\\\"\" || props?.searchNotFoundText}}\n } @else {\n {{ \"\u26A0\uFE0F No options available\" || props?.notFoundText}}\n }\n </div>\n </ng-template>\n\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading\">\u23F3 Loading options...</div>\n </ng-template>\n</ng-select>", styles: ["::ng-deep .ng-select-custom .search-input-container .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding:var(--small-2px, 2px) var(--small-12px, 12px)}.ng-select-custom .ng-values-list{display:flex;flex-wrap:wrap;gap:var(--small-8px, 8px)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:none;display:flex;align-items:center;font-size:var(--small-6px, 6px)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{border-radius:var(--small-4px, 4px);background:var(--grey-50, #F2F4F7);display:flex;padding:var(--small-2px, 2px) var(--small-8px, 8px);justify-content:center;align-items:center;gap:var(--small-4px, 4px)}.ng-select-custom .option-row{display:flex;width:18.75rem;height:2.5rem;padding:var(--small-12px, 12px);align-items:center;gap:var(--small-8px, 8px);flex-shrink:0}::ng-deep .ng-select-custom .mdc-form-field.mat-internal-form-field{display:flex;gap:var(--small-8px, 8px);align-items:center}::ng-deep .ng-select-custom .mdc-checkbox__ripple{display:none}::ng-deep .ng-select-custom .checkbox-style{display:flex;align-items:center}.ng-select-custom .ng-option input[type=checkbox],.ng-select input[type=checkbox]{accent-color:var(--primary-500);vertical-align:middle;width:var(--small-14px, 14px);height:var(--small-14px, 14px)}::ng-deep .ng-select-custom.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:var(--primary-50)}.option-label{color:var(--text-high-emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .search-input-container .mat-mdc-form-field{width:-webkit-fill-available}::ng-deep .ng-select-custom .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:var(--primary-50)}::ng-deep .ng-select-custom.ng-select .ng-arrow-wrapper .ng-arrow{display:none}::ng-deep .ng-select .ng-arrow-wrapper{width:var(--small-12px, 12px);height:var(--small-12px, 12px);display:flex;align-items:center;justify-content:center}::ng-deep .ng-select .ng-arrow-wrapper:after{content:\"\";display:inline-block;width:var(--small-8px, 8px);height:var(--small-12px, 12px);background:url(/assets/upDownChevronOutlined.svg) no-repeat center;background-size:contain}::ng-deep .ng-select-custom.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:var(--primary-500);box-shadow:none}::ng-deep .ng-select-custom.ng-select .no-results{padding:.8rem}::ng-deep .ng-select-custom.ng-select .ng-select-container{padding:0rem var(--small-12px) 0rem var(--small-12px);height:1.875rem;min-height:2.438rem;border:1px solid var(--grey-100, #EAECF0)}::ng-deep .ng-select-custom.ng-select .option-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .ng-value-label{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-family-roboto);font-size:.688rem;font-style:normal;font-weight:500;line-height:var(--small-16px, 16px);letter-spacing:.5px}::ng-deep .ng-select-custom.ng-select .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:var(--primary-500)}::ng-deep .ng-select-custom.ng-select .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:var(--small-4px, 4px);border-bottom-right-radius:var(--small-4px, 4px);border-bottom-left-radius:0}::ng-deep .ng-select-custom.ng-select.ng-select-single .ng-value-label{color:var(--text-highemphasis);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--grey-100)}.ng-select-custom .searchIcons{color:var(--color-text-neutral-300, #757575)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i3$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i3$1.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i3$1.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i3$1.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatCheckboxModule }] }); }
|
|
3473
3486
|
}
|
|
3474
3487
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NgSelectComponent, decorators: [{
|
|
3475
3488
|
type: Component,
|
|
@@ -3489,7 +3502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
3489
3502
|
MatDatepickerModule,
|
|
3490
3503
|
MatNativeDateModule,
|
|
3491
3504
|
MatCheckboxModule,
|
|
3492
|
-
], providers: [IconService], template: "<ng-select
|
|
3505
|
+
], providers: [IconService], template: "<ng-select [items]=\"filteredOptions\" [multiple]=\"props?.multiple || false\" [bindLabel]=\"props?.bindLabel || 'label'\"\n [closeOnSelect]=\"props?.closeOnselect || true\" [bindValue]=\"props?.bindValue || 'value'\"\n [placeholder]=\"props?.placeholder || 'Select'\" [searchable]=\"false\" [formControl]=\"formControl\"\n [clearable]=\"props?.isClearable\" [appearance]=\"props['appearance'] || 'outline'\" class=\"ng-select-custom\">\n\n <ng-template ng-header-tmp>\n <div class=\"search-input-container mat-form-field-density-5\">\n <mat-form-field [appearance]=\"props['appearance'] || 'outline'\" class=\"w-100\">\n <sa-icon icon=\"searchIcon\" class=\"searchIcons\" size=\"20\" matPrefix></sa-icon>\n <input matInput type=\"text\" name=\"menu-search-bar\" class=\"search-input searchIcons\"\n (keyup)=\"onSearch($event)\" (keydown)=\"stopBackspacePropagation($event)\"\n [placeholder]=\"props?.searchPlaceholder || 'Search'\" [(ngModel)]=\"searchValue\" />\n <sa-icon icon=\"closeOutlined\" class=\"pointer searchIcons\" size=\"15\" matSuffix\n (click)=\"clearSearch($event)\"></sa-icon>\n </mat-form-field>\n </div>\n </ng-template>\n\n <!-- Option template with a checkbox in front of each row -->\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\n <div class=\"option-row\">\n @if(props?.multiple){\n <input type=\"checkbox\" [checked]=\"item$.selected\" tabindex=\"-1\" />\n }\n <span class=\"option-label\">{{ item[props.bindLabel || 'label'] }}</span>\n\n </div>\n </ng-template>\n\n <!-- Selected items chip template (optional) -->\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div class=\"chips ng-values-list\">\n\n <!-- If collapsed: show only first 2 + summary -->\n <ng-container *ngIf=\"!expandedSummary\">\n @for (s of items.slice(0, 2); track s[props.bindValue || 'value']) {\n <div class=\"ng-value\">\n <span class=\"ng-value-label\">{{ s[props.bindLabel || 'label'] }}</span>\n <span class=\"ng-value-icon right\" (click)=\"clear(s)\"><sa-icon icon=\"closeOutlined\"\n size=\"11\"></sa-icon></span>\n </div>\n }\n\n @if (items.length > 2) {\n <div class=\"ng-value summary-chip pointer\" (click)=\"toggleSummary()\">\n <span class=\"ng-value-label\">+{{ items.length - 2 }}</span>\n <span class=\"ng-value-icon right\" (click)=\"clearRemaining(items, clear)\"><sa-icon\n icon=\"closeOutlined\" size=\"11\"></sa-icon></span>\n </div>\n }\n </ng-container>\n\n <!-- If expanded: show all items -->\n <ng-container *ngIf=\"expandedSummary\">\n @for (s of items; track s[props.bindValue || 'value']) {\n <div class=\"ng-value\">\n <span class=\"ng-value-label\">{{ s[props.bindLabel || 'label'] }}</span>\n <span class=\"ng-value-icon right\" (click)=\"clear(s)\"><sa-icon icon=\"closeOutlined\"\n size=\"11\"></sa-icon></span>\n </div>\n }\n <!-- Collapse button -->\n <div class=\"ng-value summary-chip pointer\" (click)=\"toggleSummary()\">\n <sa-icon class=\"ng-value-label\" icon=\"leftChevronOutlined\"></sa-icon>\n </div>\n </ng-container>\n\n </div>\n </ng-template>\n\n @if(props?.footer){\n <ng-template ng-footer-tmp>\n <div class=\"dropdown-footer\">{{props?.footer?.description}}</div>\n </ng-template>\n }\n\n <ng-template ng-notfound-tmp>\n <div class=\"no-results\">\n @if (searchValue?.length > 0) {\n {{ \"\u274C No items match \\\"{{ searchValue }}\\\"\" || props?.searchNotFoundText}}\n } @else {\n {{ \"\u26A0\uFE0F No options available\" || props?.notFoundText}}\n }\n </div>\n </ng-template>\n\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading\">\u23F3 Loading options...</div>\n </ng-template>\n</ng-select>", styles: ["::ng-deep .ng-select-custom .search-input-container .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding:var(--small-2px, 2px) var(--small-12px, 12px)}.ng-select-custom .ng-values-list{display:flex;flex-wrap:wrap;gap:var(--small-8px, 8px)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:none;display:flex;align-items:center;font-size:var(--small-6px, 6px)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{border-radius:var(--small-4px, 4px);background:var(--grey-50, #F2F4F7);display:flex;padding:var(--small-2px, 2px) var(--small-8px, 8px);justify-content:center;align-items:center;gap:var(--small-4px, 4px)}.ng-select-custom .option-row{display:flex;width:18.75rem;height:2.5rem;padding:var(--small-12px, 12px);align-items:center;gap:var(--small-8px, 8px);flex-shrink:0}::ng-deep .ng-select-custom .mdc-form-field.mat-internal-form-field{display:flex;gap:var(--small-8px, 8px);align-items:center}::ng-deep .ng-select-custom .mdc-checkbox__ripple{display:none}::ng-deep .ng-select-custom .checkbox-style{display:flex;align-items:center}.ng-select-custom .ng-option input[type=checkbox],.ng-select input[type=checkbox]{accent-color:var(--primary-500);vertical-align:middle;width:var(--small-14px, 14px);height:var(--small-14px, 14px)}::ng-deep .ng-select-custom.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:var(--primary-50)}.option-label{color:var(--text-high-emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .search-input-container .mat-mdc-form-field{width:-webkit-fill-available}::ng-deep .ng-select-custom .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:var(--primary-50)}::ng-deep .ng-select-custom.ng-select .ng-arrow-wrapper .ng-arrow{display:none}::ng-deep .ng-select .ng-arrow-wrapper{width:var(--small-12px, 12px);height:var(--small-12px, 12px);display:flex;align-items:center;justify-content:center}::ng-deep .ng-select .ng-arrow-wrapper:after{content:\"\";display:inline-block;width:var(--small-8px, 8px);height:var(--small-12px, 12px);background:url(/assets/upDownChevronOutlined.svg) no-repeat center;background-size:contain}::ng-deep .ng-select-custom.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:var(--primary-500);box-shadow:none}::ng-deep .ng-select-custom.ng-select .no-results{padding:.8rem}::ng-deep .ng-select-custom.ng-select .ng-select-container{padding:0rem var(--small-12px) 0rem var(--small-12px);height:1.875rem;min-height:2.438rem;border:1px solid var(--grey-100, #EAECF0)}::ng-deep .ng-select-custom.ng-select .option-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .ng-value-label{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-family-roboto);font-size:.688rem;font-style:normal;font-weight:500;line-height:var(--small-16px, 16px);letter-spacing:.5px}::ng-deep .ng-select-custom.ng-select .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:var(--primary-500)}::ng-deep .ng-select-custom.ng-select .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:var(--small-4px, 4px);border-bottom-right-radius:var(--small-4px, 4px);border-bottom-left-radius:0}::ng-deep .ng-select-custom.ng-select.ng-select-single .ng-value-label{color:var(--text-highemphasis);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--grey-100)}.ng-select-custom .searchIcons{color:var(--color-text-neutral-300, #757575)}\n"] }]
|
|
3493
3506
|
}] });
|
|
3494
3507
|
|
|
3495
3508
|
class FilterComponent {
|
|
@@ -4980,24 +4993,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
4980
4993
|
}], ctorParameters: () => [{ type: QueryBuilderService }] });
|
|
4981
4994
|
|
|
4982
4995
|
class QueryBuilderFormlyComponent extends FieldArrayType {
|
|
4983
|
-
constructor() {
|
|
4984
|
-
super(...arguments);
|
|
4985
|
-
// reset(): void {
|
|
4986
|
-
// this.formControl.reset();
|
|
4987
|
-
// }
|
|
4988
|
-
/**
|
|
4989
|
-
* Duplicates the row at the given index.
|
|
4990
|
-
* A deep–clone of that row’s model is inserted right after the original row.
|
|
4991
|
-
*/
|
|
4992
|
-
this.copied = false;
|
|
4993
|
-
}
|
|
4994
4996
|
ngOnInit() {
|
|
4995
4997
|
}
|
|
4996
4998
|
getRowCondition(index) {
|
|
4997
4999
|
if (index === 0)
|
|
4998
5000
|
return 'and';
|
|
4999
5001
|
const ruleGroup = this.formControl.at(index);
|
|
5000
|
-
return ruleGroup.get('
|
|
5002
|
+
return ruleGroup.get('logicalOperator')?.value || 'and';
|
|
5001
5003
|
}
|
|
5002
5004
|
/**
|
|
5003
5005
|
* Sets the condition for a specific row
|
|
@@ -5006,9 +5008,9 @@ class QueryBuilderFormlyComponent extends FieldArrayType {
|
|
|
5006
5008
|
*/
|
|
5007
5009
|
setRowCondition(index, condition) {
|
|
5008
5010
|
if (index === 0)
|
|
5009
|
-
return; // First row doesn't have a
|
|
5011
|
+
return; // First row doesn't have a logical operator
|
|
5010
5012
|
const ruleGroup = this.formControl.at(index);
|
|
5011
|
-
ruleGroup.get('
|
|
5013
|
+
ruleGroup.get('logicalOperator')?.setValue(condition);
|
|
5012
5014
|
}
|
|
5013
5015
|
copyRule() {
|
|
5014
5016
|
}
|
|
@@ -5033,117 +5035,121 @@ class QueryBuilderFormlyComponent extends FieldArrayType {
|
|
|
5033
5035
|
}
|
|
5034
5036
|
return undefined;
|
|
5035
5037
|
}
|
|
5038
|
+
// reset(): void {
|
|
5039
|
+
// this.formControl.reset();
|
|
5040
|
+
// }
|
|
5041
|
+
/**
|
|
5042
|
+
* Duplicates the row at the given index.
|
|
5043
|
+
* A deep–clone of that row’s model is inserted right after the original row.
|
|
5044
|
+
*/
|
|
5036
5045
|
copy(index) {
|
|
5037
5046
|
const rowModel = this.formControl.at(index)?.value;
|
|
5038
5047
|
if (!rowModel)
|
|
5039
5048
|
return;
|
|
5040
|
-
|
|
5041
|
-
|
|
5042
|
-
|
|
5043
|
-
|
|
5044
|
-
|
|
5045
|
-
|
|
5046
|
-
|
|
5047
|
-
if (
|
|
5048
|
-
|
|
5049
|
-
|
|
5050
|
-
|
|
5051
|
-
|
|
5052
|
-
|
|
5053
|
-
|
|
5054
|
-
|
|
5055
|
-
|
|
5056
|
-
|
|
5057
|
-
|
|
5058
|
-
|
|
5059
|
-
|
|
5060
|
-
|
|
5061
|
-
|
|
5062
|
-
|
|
5063
|
-
|
|
5064
|
-
|
|
5065
|
-
|
|
5066
|
-
|
|
5067
|
-
|
|
5068
|
-
|
|
5069
|
-
|
|
5070
|
-
|
|
5071
|
-
|
|
5072
|
-
|
|
5073
|
-
field: filterValueField,
|
|
5074
|
-
value: newType,
|
|
5075
|
-
});
|
|
5049
|
+
const clonedModel = JSON.parse(JSON.stringify(rowModel));
|
|
5050
|
+
// Carry the value over to the new row so the onInit hook can restore it.
|
|
5051
|
+
if (clonedModel.filterValue !== undefined) {
|
|
5052
|
+
clonedModel._copiedValue = clonedModel.filterValue;
|
|
5053
|
+
}
|
|
5054
|
+
// If copying the first row (index 0), the new row (index 1) should have a logical operator
|
|
5055
|
+
// Set default logical operator to 'and' for the new row
|
|
5056
|
+
if (index === 0) {
|
|
5057
|
+
clonedModel.logicalOperator = 'and';
|
|
5058
|
+
}
|
|
5059
|
+
this.add(index + 1, clonedModel);
|
|
5060
|
+
// Force rebuild of the filterValue field by triggering attribute change
|
|
5061
|
+
setTimeout(() => {
|
|
5062
|
+
const newRowForm = this.formControl.at(index + 1);
|
|
5063
|
+
const attrCtrl = newRowForm?.get('attribute');
|
|
5064
|
+
const filterValueCtrl = newRowForm?.get('filterValue');
|
|
5065
|
+
if (attrCtrl && filterValueCtrl && clonedModel.attribute) {
|
|
5066
|
+
// Store the copied value in the form model before triggering rebuild
|
|
5067
|
+
const copiedValue = clonedModel._copiedValue;
|
|
5068
|
+
// Temporarily clear the attribute to force a change event
|
|
5069
|
+
attrCtrl.setValue(null, { emitEvent: false });
|
|
5070
|
+
// Then restore it to trigger the field type rebuild
|
|
5071
|
+
setTimeout(() => {
|
|
5072
|
+
attrCtrl.setValue(clonedModel.attribute, { emitEvent: true });
|
|
5073
|
+
// Ensure the copied value is still available after the rebuild
|
|
5074
|
+
setTimeout(() => {
|
|
5075
|
+
if (copiedValue !== undefined && !newRowForm.value._copiedValue) {
|
|
5076
|
+
// Re-add the copied value if it was lost during rebuild
|
|
5077
|
+
newRowForm.patchValue({ _copiedValue: copiedValue });
|
|
5078
|
+
filterValueCtrl.setValue(copiedValue);
|
|
5079
|
+
}
|
|
5080
|
+
}, 50);
|
|
5081
|
+
}, 10);
|
|
5076
5082
|
}
|
|
5077
|
-
}
|
|
5078
|
-
}
|
|
5079
|
-
createFieldProps(type) {
|
|
5080
|
-
switch (type) {
|
|
5081
|
-
case 'SELECT':
|
|
5082
|
-
return {
|
|
5083
|
-
placeholder: 'Select',
|
|
5084
|
-
multiple: false,
|
|
5085
|
-
bindLabel: 'label',
|
|
5086
|
-
bindValue: 'value',
|
|
5087
|
-
appearance: 'outline',
|
|
5088
|
-
isClearable: true,
|
|
5089
|
-
isSearchable: false,
|
|
5090
|
-
closeOnselect: true,
|
|
5091
|
-
required: true,
|
|
5092
|
-
disabled: false,
|
|
5093
|
-
};
|
|
5094
|
-
case 'STRING':
|
|
5095
|
-
return {
|
|
5096
|
-
placeholder: 'Enter value',
|
|
5097
|
-
appearance: 'outline',
|
|
5098
|
-
type: 'text'
|
|
5099
|
-
};
|
|
5100
|
-
case 'NUMBER':
|
|
5101
|
-
return {
|
|
5102
|
-
placeholder: 'Enter value',
|
|
5103
|
-
appearance: 'outline',
|
|
5104
|
-
type: 'number'
|
|
5105
|
-
};
|
|
5106
|
-
case 'DATE':
|
|
5107
|
-
return {
|
|
5108
|
-
placeholder: 'Select date',
|
|
5109
|
-
appearance: 'outline',
|
|
5110
|
-
type: 'date'
|
|
5111
|
-
};
|
|
5112
|
-
case 'CURRENCY':
|
|
5113
|
-
return {
|
|
5114
|
-
placeholder: 'Enter value',
|
|
5115
|
-
appearance: 'outline',
|
|
5116
|
-
};
|
|
5117
|
-
case 'BOOLEAN':
|
|
5118
|
-
return {
|
|
5119
|
-
placeholder: 'Enter value',
|
|
5120
|
-
appearance: 'outline',
|
|
5121
|
-
type: 'boolean',
|
|
5122
|
-
options: [
|
|
5123
|
-
{ value: true, label: 'True' },
|
|
5124
|
-
{ value: false, label: 'False' },
|
|
5125
|
-
],
|
|
5126
|
-
bindLabel: 'label',
|
|
5127
|
-
bindValue: 'value',
|
|
5128
|
-
disabled: false,
|
|
5129
|
-
};
|
|
5130
|
-
default:
|
|
5131
|
-
return {
|
|
5132
|
-
placeholder: 'Enter value',
|
|
5133
|
-
appearance: 'outline',
|
|
5134
|
-
};
|
|
5135
|
-
}
|
|
5083
|
+
});
|
|
5136
5084
|
}
|
|
5137
5085
|
reset() {
|
|
5138
5086
|
this.field.fieldGroup.splice(0, this.field.fieldGroup.length); // clear
|
|
5139
5087
|
this.add(); // start fresh with one row
|
|
5140
5088
|
}
|
|
5141
5089
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryBuilderFormlyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5142
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: QueryBuilderFormlyComponent, isStandalone: true, selector: "sa-query-builder-formly", providers: [], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-query-builder-container\">\n <div class=\"query-builder-body\">\n @for(subField of field.fieldGroup; track $index) {\n <div class=\"row align-items-baseline\">\n @if ($index === 0) {\n <span class=\"where-text flex-1\">Where</span>\n }\n @for (
|
|
5090
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: QueryBuilderFormlyComponent, isStandalone: true, selector: "sa-query-builder-formly", providers: [], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-query-builder-container\">\n <div class=\"query-builder-body\">\n @for(subField of field.fieldGroup; track subField.id || $index) {\n <div class=\"row align-items-baseline query-row\" [@rowAnimation]>\n @if ($index === 0) {\n <span class=\"where-text flex-1\">Where</span>\n }\n @for (innerField of subField.fieldGroup; track innerField.key || $index) {\n @if(!!innerField.props['hasDynamicType']){\n @switch (getFilterType(innerField)) {\n @case ('STRING') {\n <formly-field [field]=\"innerField\"></formly-field>\n }\n @case ('NUMBER') {\n <formly-field [field]=\"innerField\"></formly-field>\n }\n @case ('BOOLEAN') {\n <formly-field [field]=\"innerField\"></formly-field>\n }\n @case ('CURRENCY') {\n <formly-field [field]=\"innerField\"></formly-field>\n }\n @case ('DATE') {\n\n }\n @case ('SELECT') {\n <formly-field [field]=\"createField(innerField)\"></formly-field>\n }\n @default {\n <formly-field [field]=\"createField(innerField)\"></formly-field>\n }\n }\n }@else{\n <formly-field\n class=\"col\"\n [field]=\"innerField\"\n >\n </formly-field>\n }\n }\n @if(props?.['showCopyButton']){\n <sa-icon icon=\"copyOutlined\" class=\"copy-icon pointer\" (click)=\"copy($index)\"></sa-icon>\n }\n <sa-icon icon=\"deleteIcon\" class=\"delete-icon pointer\" (click)=\"remove($index)\"></sa-icon>\n </div>\n }\n \n <!-- Buttons -->\n <div class=\"rule-button-container\">\n <sa-button icon=\"add\" iconPosition=\"left\" text=\"Add filter\"\n (onClickEvent)=\"add()\"\n [state]=\"field?.fieldGroup?.length === (props?.['maxRows'] || 5) ? 'disabled' : 'default'\"\n type=\"outline\" size=\"medium\">\n </sa-button>\n <span class=\"filters-count\">({{field?.fieldGroup?.length}}/{{props?.['maxRows'] || 5}} filters)</span>\n @if(props?.['showResetButton']){\n <sa-button iconPosition=\"left\" text=\"Reset\"\n (onClickEvent)=\"reset()\"\n type=\"primary\" size=\"medium\">\n </sa-button>\n }\n </div> \n </div>\n</div>", styles: [".sa-query-builder-container{display:flex}.sa-query-builder-container .query-builder-body{display:flex;flex-direction:column;gap:var(--small-12px);width:-webkit-fill-available}.query-builder-body .row{display:flex;height:2.25rem;justify-content:center;align-items:center;flex:1 0 0;gap:var(--small-8px);width:-webkit-fill-available}.query-row{transition:all .2s ease-in-out;border-radius:var(--small-4px);padding:var(--small-4px);margin:2px 0}.query-row:hover{transform:translate(2px)}.query-row ::ng-deep .query-builder-form-wrapper{transition:all .15s ease-in-out}.query-builder-form-wrapper{width:-webkit-fill-available}::ng-deep .query-builder-form-wrapper .sa-input-field.idle{border-radius:var(--small-4px);border:1px solid var(--grey-100, #EAECF0);background:var(--white, #FFF);height:2.438rem}::ng-deep .query-builder-form-wrapper .sa-input-container{height:3.438rem}::ng-deep .query-builder-form-wrapper .sa-input-container .disabled .sa-input-field input{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:13px;font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.where-text{color:var(--text-medium-emphasis, #6D6979);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:var(--font-weight-500);line-height:var(--medium-20px);letter-spacing:.1px;width:80px}.flex-1{flex:1 1 0;min-width:80px}.flex-2{flex:2 1 0;min-width:120px}.flex-4{flex:4 1 0;min-width:200px}.copy-icon,.delete-icon{transition:all .2s ease-in-out;padding:4px;border-radius:4px;opacity:.7}.copy-icon:hover,.delete-icon:hover{opacity:1;transform:scale(1.1);background-color:#0000000d}.copy-icon:active,.delete-icon:active{transform:scale(.95)}.copy-icon:hover{color:var(--primary-500, #7C3AED)}.delete-icon:hover{color:var(--error-500, #EF4444)}.rule-button-container{transition:all .2s ease-in-out}.rule-button-container sa-button{transition:all .2s ease-in-out}.rule-button-container sa-button:hover{transform:translateY(-1px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }], animations: [
|
|
5091
|
+
trigger('rowAnimation', [
|
|
5092
|
+
transition(':enter', [
|
|
5093
|
+
style({
|
|
5094
|
+
opacity: 0,
|
|
5095
|
+
transform: 'translateY(-10px) scale(0.95)',
|
|
5096
|
+
height: '0px',
|
|
5097
|
+
overflow: 'hidden'
|
|
5098
|
+
}),
|
|
5099
|
+
animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({
|
|
5100
|
+
opacity: 1,
|
|
5101
|
+
transform: 'translateY(0) scale(1)',
|
|
5102
|
+
height: '*'
|
|
5103
|
+
}))
|
|
5104
|
+
]),
|
|
5105
|
+
transition(':leave', [
|
|
5106
|
+
style({
|
|
5107
|
+
opacity: 1,
|
|
5108
|
+
transform: 'translateY(0) scale(1)',
|
|
5109
|
+
height: '*'
|
|
5110
|
+
}),
|
|
5111
|
+
animate('250ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({
|
|
5112
|
+
opacity: 0,
|
|
5113
|
+
transform: 'translateY(-10px) scale(0.95)',
|
|
5114
|
+
height: '0px',
|
|
5115
|
+
overflow: 'hidden'
|
|
5116
|
+
}))
|
|
5117
|
+
])
|
|
5118
|
+
])
|
|
5119
|
+
] }); }
|
|
5143
5120
|
}
|
|
5144
5121
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryBuilderFormlyComponent, decorators: [{
|
|
5145
5122
|
type: Component,
|
|
5146
|
-
args: [{ selector: 'sa-query-builder-formly', standalone: true, providers: [],
|
|
5123
|
+
args: [{ selector: 'sa-query-builder-formly', standalone: true, providers: [], animations: [
|
|
5124
|
+
trigger('rowAnimation', [
|
|
5125
|
+
transition(':enter', [
|
|
5126
|
+
style({
|
|
5127
|
+
opacity: 0,
|
|
5128
|
+
transform: 'translateY(-10px) scale(0.95)',
|
|
5129
|
+
height: '0px',
|
|
5130
|
+
overflow: 'hidden'
|
|
5131
|
+
}),
|
|
5132
|
+
animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({
|
|
5133
|
+
opacity: 1,
|
|
5134
|
+
transform: 'translateY(0) scale(1)',
|
|
5135
|
+
height: '*'
|
|
5136
|
+
}))
|
|
5137
|
+
]),
|
|
5138
|
+
transition(':leave', [
|
|
5139
|
+
style({
|
|
5140
|
+
opacity: 1,
|
|
5141
|
+
transform: 'translateY(0) scale(1)',
|
|
5142
|
+
height: '*'
|
|
5143
|
+
}),
|
|
5144
|
+
animate('250ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({
|
|
5145
|
+
opacity: 0,
|
|
5146
|
+
transform: 'translateY(-10px) scale(0.95)',
|
|
5147
|
+
height: '0px',
|
|
5148
|
+
overflow: 'hidden'
|
|
5149
|
+
}))
|
|
5150
|
+
])
|
|
5151
|
+
])
|
|
5152
|
+
], imports: [
|
|
5147
5153
|
CommonModule,
|
|
5148
5154
|
ReactiveFormsModule,
|
|
5149
5155
|
FormlyModule,
|
|
@@ -5153,7 +5159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
5153
5159
|
MatSelectModule,
|
|
5154
5160
|
MatOptionModule,
|
|
5155
5161
|
MatIconModule
|
|
5156
|
-
], template: "<div class=\"sa-query-builder-container\">\n <div class=\"query-builder-body\">\n @for(subField of field.fieldGroup; track $index) {\n <div class=\"row align-items-baseline\">\n @if ($index === 0) {\n <span class=\"where-text flex-1\">Where</span>\n }\n @for (
|
|
5162
|
+
], template: "<div class=\"sa-query-builder-container\">\n <div class=\"query-builder-body\">\n @for(subField of field.fieldGroup; track subField.id || $index) {\n <div class=\"row align-items-baseline query-row\" [@rowAnimation]>\n @if ($index === 0) {\n <span class=\"where-text flex-1\">Where</span>\n }\n @for (innerField of subField.fieldGroup; track innerField.key || $index) {\n @if(!!innerField.props['hasDynamicType']){\n @switch (getFilterType(innerField)) {\n @case ('STRING') {\n <formly-field [field]=\"innerField\"></formly-field>\n }\n @case ('NUMBER') {\n <formly-field [field]=\"innerField\"></formly-field>\n }\n @case ('BOOLEAN') {\n <formly-field [field]=\"innerField\"></formly-field>\n }\n @case ('CURRENCY') {\n <formly-field [field]=\"innerField\"></formly-field>\n }\n @case ('DATE') {\n\n }\n @case ('SELECT') {\n <formly-field [field]=\"createField(innerField)\"></formly-field>\n }\n @default {\n <formly-field [field]=\"createField(innerField)\"></formly-field>\n }\n }\n }@else{\n <formly-field\n class=\"col\"\n [field]=\"innerField\"\n >\n </formly-field>\n }\n }\n @if(props?.['showCopyButton']){\n <sa-icon icon=\"copyOutlined\" class=\"copy-icon pointer\" (click)=\"copy($index)\"></sa-icon>\n }\n <sa-icon icon=\"deleteIcon\" class=\"delete-icon pointer\" (click)=\"remove($index)\"></sa-icon>\n </div>\n }\n \n <!-- Buttons -->\n <div class=\"rule-button-container\">\n <sa-button icon=\"add\" iconPosition=\"left\" text=\"Add filter\"\n (onClickEvent)=\"add()\"\n [state]=\"field?.fieldGroup?.length === (props?.['maxRows'] || 5) ? 'disabled' : 'default'\"\n type=\"outline\" size=\"medium\">\n </sa-button>\n <span class=\"filters-count\">({{field?.fieldGroup?.length}}/{{props?.['maxRows'] || 5}} filters)</span>\n @if(props?.['showResetButton']){\n <sa-button iconPosition=\"left\" text=\"Reset\"\n (onClickEvent)=\"reset()\"\n type=\"primary\" size=\"medium\">\n </sa-button>\n }\n </div> \n </div>\n</div>", styles: [".sa-query-builder-container{display:flex}.sa-query-builder-container .query-builder-body{display:flex;flex-direction:column;gap:var(--small-12px);width:-webkit-fill-available}.query-builder-body .row{display:flex;height:2.25rem;justify-content:center;align-items:center;flex:1 0 0;gap:var(--small-8px);width:-webkit-fill-available}.query-row{transition:all .2s ease-in-out;border-radius:var(--small-4px);padding:var(--small-4px);margin:2px 0}.query-row:hover{transform:translate(2px)}.query-row ::ng-deep .query-builder-form-wrapper{transition:all .15s ease-in-out}.query-builder-form-wrapper{width:-webkit-fill-available}::ng-deep .query-builder-form-wrapper .sa-input-field.idle{border-radius:var(--small-4px);border:1px solid var(--grey-100, #EAECF0);background:var(--white, #FFF);height:2.438rem}::ng-deep .query-builder-form-wrapper .sa-input-container{height:3.438rem}::ng-deep .query-builder-form-wrapper .sa-input-container .disabled .sa-input-field input{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:13px;font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.where-text{color:var(--text-medium-emphasis, #6D6979);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:var(--font-weight-500);line-height:var(--medium-20px);letter-spacing:.1px;width:80px}.flex-1{flex:1 1 0;min-width:80px}.flex-2{flex:2 1 0;min-width:120px}.flex-4{flex:4 1 0;min-width:200px}.copy-icon,.delete-icon{transition:all .2s ease-in-out;padding:4px;border-radius:4px;opacity:.7}.copy-icon:hover,.delete-icon:hover{opacity:1;transform:scale(1.1);background-color:#0000000d}.copy-icon:active,.delete-icon:active{transform:scale(.95)}.copy-icon:hover{color:var(--primary-500, #7C3AED)}.delete-icon:hover{color:var(--error-500, #EF4444)}.rule-button-container{transition:all .2s ease-in-out}.rule-button-container sa-button{transition:all .2s ease-in-out}.rule-button-container sa-button:hover{transform:translateY(-1px)}\n"] }]
|
|
5157
5163
|
}] });
|
|
5158
5164
|
|
|
5159
5165
|
class QueryBuilderTextareaComponent {
|