@sarasanalytics-com/design-system 0.0.184 → 0.0.186
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/ng-select/ng-select.component.mjs +3 -3
- package/esm2022/lib/query-builder-formly/query-builder-formly.component.mjs +3 -3
- package/fesm2022/sarasanalytics-com-design-system.mjs +4 -4
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -3639,7 +3639,7 @@ class NgSelectComponent extends FieldType {
|
|
|
3639
3639
|
this.filteredOptions = [...this.field.props?.options];
|
|
3640
3640
|
}
|
|
3641
3641
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NgSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3642
|
-
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'\" [loading]=\"props?.loading || false\" \n class=\"ng-select-custom\"\n [matTooltip]=\"(!props?.multiple && formControl?.value && ((formControl?.value[props?.bindLabel || 'label']?.length > 50) || (formControl?.value?.length > 50))) ? (formControl?.value[props?.bindLabel || 'label'] || formControl?.value) : ''\"\n matTooltipPosition=\"above\">\n\n @if(!!props?.showSearchBar){\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 [matTooltip]=\"(item[props.bindLabel || 'label']?.length > 80) ? item[props.bindLabel || 'label'] : ''\" \n matTooltipPosition=\"right\">\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 <!-- Single select label template -->\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n <span class=\"ng-value-label\">\n {{ item[props.bindLabel || 'label'] }}\n </span>\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 [matTooltip]=\"(s[props.bindLabel || 'label']?.length > 30) ? s[props.bindLabel || 'label'] : ''\" \n matTooltipPosition=\"above\">\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\" \n (click)=\"toggleSummary()\" \n matTooltip=\"Click to expand all selected items\" \n matTooltipPosition=\"above\">\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 [matTooltip]=\"(s[props.bindLabel || 'label']?.length > 30) ? s[props.bindLabel || 'label'] : ''\" \n matTooltipPosition=\"above\">\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\" \n (click)=\"toggleSummary()\" \n matTooltip=\"Click to collapse\" \n matTooltipPosition=\"above\">\n <sa-icon class=\"ng-value-label\" size=\"18\" icon=\"leftChevronCircle\"></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 {{ props?.searchNotFoundText || '\u274C No items match \"' + searchValue + '\"' }}\n } @else {\n {{ props?.notFoundText || '\u26A0\uFE0F No options available' }}\n }\n </div>\n </ng-template>\n\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading\">\n <sa-icon icon=\"loader\" size=\"16\" class=\"loading-spinner\"></sa-icon>\n <span>Loading options...</span>\n </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:.188rem var(--small-8px, 8px) 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;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:.23rem var(--small-12px) .2rem var(--small-12px);height:1.875rem;min-height:2.438rem;border:1px solid var(--grey-100, #EAECF0);align-items:center}::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)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:var(--primary-50)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:flex}::ng-deep .ng-select-custom .loading{color:var(--text-medium-emphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);display:flex;align-items:center;justify-content:center;padding:12px;gap:8px}\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$3.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$3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3$3.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i3$3.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i3$3.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i3$3.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i3$3.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "imgWidth", "imgHeight", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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 }] }); }
|
|
3642
|
+
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'\" [loading]=\"props?.loading || false\" \n class=\"ng-select-custom\"\n [matTooltip]=\"(!props?.multiple && formControl?.value && ((formControl?.value[props?.bindLabel || 'label']?.length > 50) || (formControl?.value?.length > 50))) ? (formControl?.value[props?.bindLabel || 'label'] || formControl?.value) : ''\"\n matTooltipPosition=\"above\">\n\n @if(!!props?.showSearchBar){\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 [matTooltip]=\"(item[props.bindLabel || 'label']?.length > 40) ? item[props.bindLabel || 'label'] : ''\" \n matTooltipPosition=\"right\">\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 <!-- Single select label template -->\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n <span class=\"ng-value-label\">\n {{ item[props.bindLabel || 'label'] }}\n </span>\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 [matTooltip]=\"(s[props.bindLabel || 'label']?.length > 30) ? s[props.bindLabel || 'label'] : ''\" \n matTooltipPosition=\"above\">\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\" \n (click)=\"toggleSummary()\" \n matTooltip=\"Click to expand all selected items\" \n matTooltipPosition=\"above\">\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 [matTooltip]=\"(s[props.bindLabel || 'label']?.length > 30) ? s[props.bindLabel || 'label'] : ''\" \n matTooltipPosition=\"above\">\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\" \n (click)=\"toggleSummary()\" \n matTooltip=\"Click to collapse\" \n matTooltipPosition=\"above\">\n <sa-icon class=\"ng-value-label\" size=\"18\" icon=\"leftChevronCircle\"></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 {{ props?.searchNotFoundText || '\u274C No items match \"' + searchValue + '\"' }}\n } @else {\n {{ props?.notFoundText || '\u26A0\uFE0F No options available' }}\n }\n </div>\n </ng-template>\n\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading\">\n <sa-icon icon=\"loader\" size=\"16\" class=\"loading-spinner\"></sa-icon>\n <span>Loading options...</span>\n </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:.188rem var(--small-8px, 8px) 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:.23rem var(--small-12px) .2rem var(--small-12px);height:1.875rem;min-height:2.438rem;border:1px solid var(--grey-100, #EAECF0);align-items:center}::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)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:var(--primary-50)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:flex}::ng-deep .ng-select-custom .loading{color:var(--text-medium-emphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);display:flex;align-items:center;justify-content:center;padding:12px;gap:8px}\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$3.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$3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3$3.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i3$3.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i3$3.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i3$3.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i3$3.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "imgWidth", "imgHeight", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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 }] }); }
|
|
3643
3643
|
}
|
|
3644
3644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NgSelectComponent, decorators: [{
|
|
3645
3645
|
type: Component,
|
|
@@ -3659,7 +3659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
3659
3659
|
MatDatepickerModule,
|
|
3660
3660
|
MatNativeDateModule,
|
|
3661
3661
|
MatCheckboxModule,
|
|
3662
|
-
], 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'\" [loading]=\"props?.loading || false\" \n class=\"ng-select-custom\"\n [matTooltip]=\"(!props?.multiple && formControl?.value && ((formControl?.value[props?.bindLabel || 'label']?.length > 50) || (formControl?.value?.length > 50))) ? (formControl?.value[props?.bindLabel || 'label'] || formControl?.value) : ''\"\n matTooltipPosition=\"above\">\n\n @if(!!props?.showSearchBar){\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 [matTooltip]=\"(item[props.bindLabel || 'label']?.length > 80) ? item[props.bindLabel || 'label'] : ''\" \n matTooltipPosition=\"right\">\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 <!-- Single select label template -->\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n <span class=\"ng-value-label\">\n {{ item[props.bindLabel || 'label'] }}\n </span>\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 [matTooltip]=\"(s[props.bindLabel || 'label']?.length > 30) ? s[props.bindLabel || 'label'] : ''\" \n matTooltipPosition=\"above\">\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\" \n (click)=\"toggleSummary()\" \n matTooltip=\"Click to expand all selected items\" \n matTooltipPosition=\"above\">\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 [matTooltip]=\"(s[props.bindLabel || 'label']?.length > 30) ? s[props.bindLabel || 'label'] : ''\" \n matTooltipPosition=\"above\">\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\" \n (click)=\"toggleSummary()\" \n matTooltip=\"Click to collapse\" \n matTooltipPosition=\"above\">\n <sa-icon class=\"ng-value-label\" size=\"18\" icon=\"leftChevronCircle\"></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 {{ props?.searchNotFoundText || '\u274C No items match \"' + searchValue + '\"' }}\n } @else {\n {{ props?.notFoundText || '\u26A0\uFE0F No options available' }}\n }\n </div>\n </ng-template>\n\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading\">\n <sa-icon icon=\"loader\" size=\"16\" class=\"loading-spinner\"></sa-icon>\n <span>Loading options...</span>\n </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:.188rem var(--small-8px, 8px) 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;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:.23rem var(--small-12px) .2rem var(--small-12px);height:1.875rem;min-height:2.438rem;border:1px solid var(--grey-100, #EAECF0);align-items:center}::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)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:var(--primary-50)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:flex}::ng-deep .ng-select-custom .loading{color:var(--text-medium-emphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);display:flex;align-items:center;justify-content:center;padding:12px;gap:8px}\n"] }]
|
|
3662
|
+
], 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'\" [loading]=\"props?.loading || false\" \n class=\"ng-select-custom\"\n [matTooltip]=\"(!props?.multiple && formControl?.value && ((formControl?.value[props?.bindLabel || 'label']?.length > 50) || (formControl?.value?.length > 50))) ? (formControl?.value[props?.bindLabel || 'label'] || formControl?.value) : ''\"\n matTooltipPosition=\"above\">\n\n @if(!!props?.showSearchBar){\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 [matTooltip]=\"(item[props.bindLabel || 'label']?.length > 40) ? item[props.bindLabel || 'label'] : ''\" \n matTooltipPosition=\"right\">\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 <!-- Single select label template -->\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n <span class=\"ng-value-label\">\n {{ item[props.bindLabel || 'label'] }}\n </span>\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 [matTooltip]=\"(s[props.bindLabel || 'label']?.length > 30) ? s[props.bindLabel || 'label'] : ''\" \n matTooltipPosition=\"above\">\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\" \n (click)=\"toggleSummary()\" \n matTooltip=\"Click to expand all selected items\" \n matTooltipPosition=\"above\">\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 [matTooltip]=\"(s[props.bindLabel || 'label']?.length > 30) ? s[props.bindLabel || 'label'] : ''\" \n matTooltipPosition=\"above\">\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\" \n (click)=\"toggleSummary()\" \n matTooltip=\"Click to collapse\" \n matTooltipPosition=\"above\">\n <sa-icon class=\"ng-value-label\" size=\"18\" icon=\"leftChevronCircle\"></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 {{ props?.searchNotFoundText || '\u274C No items match \"' + searchValue + '\"' }}\n } @else {\n {{ props?.notFoundText || '\u26A0\uFE0F No options available' }}\n }\n </div>\n </ng-template>\n\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading\">\n <sa-icon icon=\"loader\" size=\"16\" class=\"loading-spinner\"></sa-icon>\n <span>Loading options...</span>\n </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:.188rem var(--small-8px, 8px) 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:.23rem var(--small-12px) .2rem var(--small-12px);height:1.875rem;min-height:2.438rem;border:1px solid var(--grey-100, #EAECF0);align-items:center}::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)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:var(--primary-50)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:flex}::ng-deep .ng-select-custom .loading{color:var(--text-medium-emphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);display:flex;align-items:center;justify-content:center;padding:12px;gap:8px}\n"] }]
|
|
3663
3663
|
}] });
|
|
3664
3664
|
|
|
3665
3665
|
class DropdownMenuComponent extends FieldType {
|
|
@@ -6200,7 +6200,7 @@ class QueryBuilderFormlyComponent extends FieldArrayType {
|
|
|
6200
6200
|
}, 100);
|
|
6201
6201
|
}
|
|
6202
6202
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryBuilderFormlyComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6203
|
-
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(row of field.fieldGroup; track row.id || $index; let last = $last) {\n @if($index > 0 && ((row?.model?.logicalOperator | uppercase) === 'AND' || row?.model?.logicalOperator === undefined)){\n <div class=\"segment-divider\" [@dividerAnimation]></div>\n }\n <div class=\"row align-items-baseline query-row\" \n [class.or-row]=\"(row?.model?.logicalOperator | uppercase) === 'OR'\"\n [class.before-or-row]=\"field?.fieldGroup && $index < ((field.fieldGroup?.length ?? 0) - 1) && (field.fieldGroup?.[$index + 1]?.model?.logicalOperator | uppercase) === 'OR'\"\n [@rowAnimation]>\n @if ($index === 0) {\n <span class=\"where-text flex-1\">Where the:</span>\n }\n @for (ruleField of row.fieldGroup; track ruleField.key || $index) {\n @if(!!ruleField?.props?.['hasDynamicType']){\n @switch (getFilterType(ruleField)) {\n @case ('STRING') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('NUMBER') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('BOOLEAN') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('CURRENCY') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('DATE') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('SELECT') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @default {\n <formly-field [field]=\"createField(ruleField)\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n }\n }@else{\n <formly-field class=\"col\" [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n }\n <div class=\"rule-icon-container\">\n @if(props?.['showCopyButton']){\n <sa-icon icon=\"copyOutlined\" size=\"20\" matTooltip=\"Copy\" class=\"copy-icon pointer {{(field?.fieldGroup?.length === (props?.['maxRows'] || 5)) || !isRowValidForCopy($index) ? 'disabled-part' : ''}}\" (click)=\"isRowValidForCopy($index) && copy($index)\"></sa-icon>\n }\n @if(props?.['showDeleteRowButton']){\n <sa-icon icon=\"deleteIcon\" size=\"20\" matTooltip=\"Delete\" class=\"delete-icon pointer {{field?.fieldGroup?.length === (1) ? 'disabled-part' : ''}}\" (click)=\"remove($index)\"></sa-icon>\n }\n </div>\n </div>\n }\n <!-- Buttons -->\n <div class=\"rule-button-container\">\n @if(props?.['showAddFilterButton']){\n <sa-button icon=\"add\" iconPosition=\"left\" text=\"Add filter\" (onClickEvent)=\"add()\"\n [state]=\"field?.fieldGroup?.length === (props?.['maxRows'] || 5) ? 'disabled' : 'default'\"\n type=\"outline\" size=\"medium\">\n </sa-button>\n }\n @if(props?.['showCount']){\n <span class=\"filters-count\">{{field?.fieldGroup?.length}}/{{props?.['maxRows'] || 5}} filters</span>\n }\n @if(props?.['showResetButton']){\n <sa-button iconPosition=\"left\" text=\"Reset\" (onClickEvent)=\"reset()\" 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 ::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}.date-range-container{display:flex;gap:var(--small-8px);align-items:center;width:100%}.date-range-container .value-input{flex:1;min-width:120px}.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{display:flex;align-items:center;gap:.5rem;transition:all .6s cubic-bezier(.4,0,.2,1)}.rule-button-container sa-button{transition:transform .3s cubic-bezier(.4,0,.2,1)}::ng-deep .query-builder-form-wrapper .filtervalue-class formly-group{display:flex;gap:var(--small-8px)}.segment-divider{width:-webkit-fill-available;height:.063rem;background:var(--grey-100)}::ng-deep .query-builder-form-wrapper .query-builder-date-range-divider{display:flex;align-items:center}::ng-deep .query-builder-form-wrapper .filtervalue-class{display:contents}
|
|
6203
|
+
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(row of field.fieldGroup; track row.id || $index; let last = $last) {\n @if($index > 0 && ((row?.model?.logicalOperator | uppercase) === 'AND' || row?.model?.logicalOperator === undefined)){\n <div class=\"segment-divider\" [@dividerAnimation]></div>\n }\n <div class=\"row align-items-baseline query-row\" \n [class.or-row]=\"(row?.model?.logicalOperator | uppercase) === 'OR'\"\n [class.before-or-row]=\"field?.fieldGroup && $index < ((field.fieldGroup?.length ?? 0) - 1) && (field.fieldGroup?.[$index + 1]?.model?.logicalOperator | uppercase) === 'OR'\"\n [@rowAnimation]>\n @if ($index === 0) {\n <span class=\"where-text flex-1\">Where the:</span>\n }\n @for (ruleField of row.fieldGroup; track ruleField.key || $index) {\n @if(!!ruleField?.props?.['hasDynamicType']){\n @switch (getFilterType(ruleField)) {\n @case ('STRING') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('NUMBER') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('BOOLEAN') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('CURRENCY') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('DATE') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('SELECT') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @default {\n <formly-field [field]=\"createField(ruleField)\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n }\n }@else{\n <formly-field class=\"col\" [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n }\n <div class=\"rule-icon-container\">\n @if(props?.['showCopyButton']){\n <sa-icon icon=\"copyOutlined\" size=\"20\" matTooltip=\"Copy\" class=\"copy-icon pointer {{(field?.fieldGroup?.length === (props?.['maxRows'] || 5)) || !isRowValidForCopy($index) ? 'disabled-part' : ''}}\" (click)=\"isRowValidForCopy($index) && copy($index)\"></sa-icon>\n }\n @if(props?.['showDeleteRowButton']){\n <sa-icon icon=\"deleteIcon\" size=\"20\" matTooltip=\"Delete\" class=\"delete-icon pointer {{field?.fieldGroup?.length === (1) ? 'disabled-part' : ''}}\" (click)=\"remove($index)\"></sa-icon>\n }\n </div>\n </div>\n }\n <!-- Buttons -->\n <div class=\"rule-button-container\">\n @if(props?.['showAddFilterButton']){\n <sa-button icon=\"add\" iconPosition=\"left\" text=\"Add filter\" (onClickEvent)=\"add()\"\n [state]=\"field?.fieldGroup?.length === (props?.['maxRows'] || 5) ? 'disabled' : 'default'\"\n type=\"outline\" size=\"medium\">\n </sa-button>\n }\n @if(props?.['showCount']){\n <span class=\"filters-count\">{{field?.fieldGroup?.length}}/{{props?.['maxRows'] || 5}} filters</span>\n }\n @if(props?.['showResetButton']){\n <sa-button iconPosition=\"left\" text=\"Reset\" (onClickEvent)=\"reset()\" 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 ::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}.date-range-container{display:flex;gap:var(--small-8px);align-items:center;width:100%}.date-range-container .value-input{flex:1;min-width:120px}.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{display:flex;align-items:center;gap:.5rem;transition:all .6s cubic-bezier(.4,0,.2,1)}.rule-button-container sa-button{transition:transform .3s cubic-bezier(.4,0,.2,1)}::ng-deep .query-builder-form-wrapper .filtervalue-class formly-group{display:flex;gap:var(--small-8px)}.segment-divider{width:-webkit-fill-available;height:.063rem;background:var(--grey-100)}::ng-deep .query-builder-form-wrapper .query-builder-date-range-divider{display:flex;align-items:center}::ng-deep .query-builder-form-wrapper .filtervalue-class{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$2.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", "imgWidth", "imgHeight", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: [
|
|
6204
6204
|
trigger('rowAnimation', [
|
|
6205
6205
|
transition(':enter', [
|
|
6206
6206
|
style({
|
|
@@ -6312,7 +6312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
6312
6312
|
MatDatepickerModule,
|
|
6313
6313
|
MatNativeDateModule,
|
|
6314
6314
|
MatTooltipModule
|
|
6315
|
-
], template: "<div class=\"sa-query-builder-container\">\n <div class=\"query-builder-body\">\n @for(row of field.fieldGroup; track row.id || $index; let last = $last) {\n @if($index > 0 && ((row?.model?.logicalOperator | uppercase) === 'AND' || row?.model?.logicalOperator === undefined)){\n <div class=\"segment-divider\" [@dividerAnimation]></div>\n }\n <div class=\"row align-items-baseline query-row\" \n [class.or-row]=\"(row?.model?.logicalOperator | uppercase) === 'OR'\"\n [class.before-or-row]=\"field?.fieldGroup && $index < ((field.fieldGroup?.length ?? 0) - 1) && (field.fieldGroup?.[$index + 1]?.model?.logicalOperator | uppercase) === 'OR'\"\n [@rowAnimation]>\n @if ($index === 0) {\n <span class=\"where-text flex-1\">Where the:</span>\n }\n @for (ruleField of row.fieldGroup; track ruleField.key || $index) {\n @if(!!ruleField?.props?.['hasDynamicType']){\n @switch (getFilterType(ruleField)) {\n @case ('STRING') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('NUMBER') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('BOOLEAN') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('CURRENCY') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('DATE') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('SELECT') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @default {\n <formly-field [field]=\"createField(ruleField)\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n }\n }@else{\n <formly-field class=\"col\" [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n }\n <div class=\"rule-icon-container\">\n @if(props?.['showCopyButton']){\n <sa-icon icon=\"copyOutlined\" size=\"20\" matTooltip=\"Copy\" class=\"copy-icon pointer {{(field?.fieldGroup?.length === (props?.['maxRows'] || 5)) || !isRowValidForCopy($index) ? 'disabled-part' : ''}}\" (click)=\"isRowValidForCopy($index) && copy($index)\"></sa-icon>\n }\n @if(props?.['showDeleteRowButton']){\n <sa-icon icon=\"deleteIcon\" size=\"20\" matTooltip=\"Delete\" class=\"delete-icon pointer {{field?.fieldGroup?.length === (1) ? 'disabled-part' : ''}}\" (click)=\"remove($index)\"></sa-icon>\n }\n </div>\n </div>\n }\n <!-- Buttons -->\n <div class=\"rule-button-container\">\n @if(props?.['showAddFilterButton']){\n <sa-button icon=\"add\" iconPosition=\"left\" text=\"Add filter\" (onClickEvent)=\"add()\"\n [state]=\"field?.fieldGroup?.length === (props?.['maxRows'] || 5) ? 'disabled' : 'default'\"\n type=\"outline\" size=\"medium\">\n </sa-button>\n }\n @if(props?.['showCount']){\n <span class=\"filters-count\">{{field?.fieldGroup?.length}}/{{props?.['maxRows'] || 5}} filters</span>\n }\n @if(props?.['showResetButton']){\n <sa-button iconPosition=\"left\" text=\"Reset\" (onClickEvent)=\"reset()\" 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 ::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}.date-range-container{display:flex;gap:var(--small-8px);align-items:center;width:100%}.date-range-container .value-input{flex:1;min-width:120px}.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{display:flex;align-items:center;gap:.5rem;transition:all .6s cubic-bezier(.4,0,.2,1)}.rule-button-container sa-button{transition:transform .3s cubic-bezier(.4,0,.2,1)}::ng-deep .query-builder-form-wrapper .filtervalue-class formly-group{display:flex;gap:var(--small-8px)}.segment-divider{width:-webkit-fill-available;height:.063rem;background:var(--grey-100)}::ng-deep .query-builder-form-wrapper .query-builder-date-range-divider{display:flex;align-items:center}::ng-deep .query-builder-form-wrapper .filtervalue-class{display:contents}
|
|
6315
|
+
], template: "<div class=\"sa-query-builder-container\">\n <div class=\"query-builder-body\">\n @for(row of field.fieldGroup; track row.id || $index; let last = $last) {\n @if($index > 0 && ((row?.model?.logicalOperator | uppercase) === 'AND' || row?.model?.logicalOperator === undefined)){\n <div class=\"segment-divider\" [@dividerAnimation]></div>\n }\n <div class=\"row align-items-baseline query-row\" \n [class.or-row]=\"(row?.model?.logicalOperator | uppercase) === 'OR'\"\n [class.before-or-row]=\"field?.fieldGroup && $index < ((field.fieldGroup?.length ?? 0) - 1) && (field.fieldGroup?.[$index + 1]?.model?.logicalOperator | uppercase) === 'OR'\"\n [@rowAnimation]>\n @if ($index === 0) {\n <span class=\"where-text flex-1\">Where the:</span>\n }\n @for (ruleField of row.fieldGroup; track ruleField.key || $index) {\n @if(!!ruleField?.props?.['hasDynamicType']){\n @switch (getFilterType(ruleField)) {\n @case ('STRING') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('NUMBER') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('BOOLEAN') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('CURRENCY') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('DATE') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @case ('SELECT') {\n <formly-field [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n @default {\n <formly-field [field]=\"createField(ruleField)\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n }\n }@else{\n <formly-field class=\"col\" [field]=\"ruleField\" matTooltip=\"Select a filter first\"\n [matTooltipDisabled]=\"!ruleField.formControl?.disabled\"></formly-field>\n }\n }\n <div class=\"rule-icon-container\">\n @if(props?.['showCopyButton']){\n <sa-icon icon=\"copyOutlined\" size=\"20\" matTooltip=\"Copy\" class=\"copy-icon pointer {{(field?.fieldGroup?.length === (props?.['maxRows'] || 5)) || !isRowValidForCopy($index) ? 'disabled-part' : ''}}\" (click)=\"isRowValidForCopy($index) && copy($index)\"></sa-icon>\n }\n @if(props?.['showDeleteRowButton']){\n <sa-icon icon=\"deleteIcon\" size=\"20\" matTooltip=\"Delete\" class=\"delete-icon pointer {{field?.fieldGroup?.length === (1) ? 'disabled-part' : ''}}\" (click)=\"remove($index)\"></sa-icon>\n }\n </div>\n </div>\n }\n <!-- Buttons -->\n <div class=\"rule-button-container\">\n @if(props?.['showAddFilterButton']){\n <sa-button icon=\"add\" iconPosition=\"left\" text=\"Add filter\" (onClickEvent)=\"add()\"\n [state]=\"field?.fieldGroup?.length === (props?.['maxRows'] || 5) ? 'disabled' : 'default'\"\n type=\"outline\" size=\"medium\">\n </sa-button>\n }\n @if(props?.['showCount']){\n <span class=\"filters-count\">{{field?.fieldGroup?.length}}/{{props?.['maxRows'] || 5}} filters</span>\n }\n @if(props?.['showResetButton']){\n <sa-button iconPosition=\"left\" text=\"Reset\" (onClickEvent)=\"reset()\" 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 ::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}.date-range-container{display:flex;gap:var(--small-8px);align-items:center;width:100%}.date-range-container .value-input{flex:1;min-width:120px}.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{display:flex;align-items:center;gap:.5rem;transition:all .6s cubic-bezier(.4,0,.2,1)}.rule-button-container sa-button{transition:transform .3s cubic-bezier(.4,0,.2,1)}::ng-deep .query-builder-form-wrapper .filtervalue-class formly-group{display:flex;gap:var(--small-8px)}.segment-divider{width:-webkit-fill-available;height:.063rem;background:var(--grey-100)}::ng-deep .query-builder-form-wrapper .query-builder-date-range-divider{display:flex;align-items:center}::ng-deep .query-builder-form-wrapper .filtervalue-class{display:contents}\n"] }]
|
|
6316
6316
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
|
|
6317
6317
|
|
|
6318
6318
|
class QueryBuilderTextareaComponent {
|