@sarasanalytics-com/design-system 0.0.153 → 0.0.155
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 +3 -3
- package/esm2022/lib/form-input/form-input.component.mjs +3 -3
- package/esm2022/lib/query-builder-formly/query-builder-formly.component.mjs +3 -3
- package/fesm2022/sarasanalytics-com-design-system.mjs +6 -6
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -2302,7 +2302,7 @@ class FormInputComponent extends FieldType {
|
|
|
2302
2302
|
}
|
|
2303
2303
|
}
|
|
2304
2304
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2305
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormInputComponent, isStandalone: true, selector: "sa-input", inputs: { icon: "icon", params: "params" }, viewQueries: [{ propertyName: "formInput", first: true, predicate: ["formInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <h2 class=\"sa-input-big-label\">\n {{props?.['bigLabel']}}\n </h2>\n <p class=\"sa-input-big-description\">\n {{props?.['bigDescription']}}\n </p>\n </div>\n }\n @if(!!props?.['label']){\n <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <div class=\"sa-input-label-tooltip-container\">\n <span class=\"sa-input-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-input-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\n !== false){\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\n }\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n (click)=\"onInputFieldClick($event)\">\n @if(pretext){\n <div class=\"sa-input-pretext\">\n {{pretext}}\n </div>\n }\n\n <!-- Multi-value chip display -->\n @if(isMultiValue) {\n <div class=\"chip-container\">\n <sa-chip \n *ngFor=\"let chip of (chipValues || [])?.slice(startInd,startInd+labelLimit) let i = index\"\n [text]=\"chip?.value || chip?.label || chip\"\n [type]=\"'regular'\"\n [state]=\"'primary'\"\n [filling]=\"'filled'\"\n [iconPosition]=\"'right'\"\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\n (onClickEvent)=\"removeChip(i)\">\n </sa-chip>\n \n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"(chipValues || []).length > (startInd + labelLimit)\">\n <sa-chip [text]=\"'+' + ((chipValues || []).length - (startInd + labelLimit))\" \n type=\"regular\" \n state=\"primary\" \n filling=\"filled\">\n </sa-chip>\n </div>\n\n <input\n [ngClass]=\"'chip-input'\"\n matInput [type]=\"type\"\n [disabled]=\"field.props.disabled || false\"\n [placeholder]=\"chipValues.length === 0 ? (props?.placeholder || params?.placeholder || '') : ''\"\n (focus)=\"onFocus()\"\n (blur)=\"onChipBlur()\"\n (input)=\"onChipInputChange($event)\"\n (keydown)=\"onChipKeyDown($event)\"\n [(ngModel)]=\"currentInputValue\"\n #formInput />\n </div>\n } @else {\n <!-- Standard single-value input (backward compatibility) -->\n <input\n [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\n matInput [type]=\"props?.type || type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n [disabled]=\"field.props.disabled || false\"\n [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n }\n\n @if(params?.type === 'password'){\n <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\n }@else if(params?.type === 'email' && icon.show){\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\n (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\n }\n @else if(icon?.name){\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon?.size || '24'\" [color]=\"icon?.color || ''\"\n [ngClass]=\"icon?.show ? '' : 'hide'\"></sa-icon>\n }\n </div>\n @if((!formControl.valid) || (params?.supportText)){\n <div class=\"support-label {{formControl.invalid && formControl.touched ? params?.className : ''}}\" [ngClass]=\"[\n formControl.invalid && formControl.touched ? 'invalid' : 'idle'\n ]\">\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n {{getFormSupportText()}}\n </div>\n }\n </div>\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:var(--semantic-error-500, #BD271E)}.sa-input-field.invalid{--border: 1px solid var(--semantic-error-500, #BD271E)}.sa-input-field.invalid sa-icon{--form-email-icon-color: var(--semantic-error-500, #BD271E)}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-pretext{margin-right:2px}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.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)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container,.sa-input-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description,.sa-input-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}.sa-input-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}.sa-input-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.d-flex{display:flex}.chip-container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;min-height:20px}.chip-input{border:none;outline:none;background:transparent;flex:1;min-width:60px;font-size:14px;font-family:inherit;color:inherit}.chip-input::placeholder{color:var(--text-medium-emphasis, #6D6979)}.chip-container sa-chip{margin:2px 0}@media screen and (max-width: 1024px){.masked{font-weight:unset}}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }] }); }
|
|
2305
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormInputComponent, isStandalone: true, selector: "sa-input", inputs: { icon: "icon", params: "params" }, viewQueries: [{ propertyName: "formInput", first: true, predicate: ["formInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <h2 class=\"sa-input-big-label\">\n {{props?.['bigLabel']}}\n </h2>\n <p class=\"sa-input-big-description\">\n {{props?.['bigDescription']}}\n </p>\n </div>\n }\n @if(!!props?.['label']){\n <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <div class=\"sa-input-label-tooltip-container\">\n <span class=\"sa-input-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-input-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\n !== false){\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\n }\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n (click)=\"onInputFieldClick($event)\">\n @if(pretext){\n <div class=\"sa-input-pretext\">\n {{pretext}}\n </div>\n }\n\n <!-- Multi-value chip display -->\n @if(isMultiValue) {\n <div class=\"chip-container\">\n <sa-chip \n *ngFor=\"let chip of (chipValues || [])?.slice(startInd,startInd+labelLimit) let i = index\"\n [text]=\"chip?.value || chip?.label || chip\"\n [type]=\"'regular'\"\n [state]=\"'primary'\"\n [filling]=\"'filled'\"\n [iconPosition]=\"'right'\"\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\n (onClickEvent)=\"removeChip(i)\">\n </sa-chip>\n \n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"(chipValues || []).length > (startInd + labelLimit)\">\n <sa-chip [text]=\"'+' + ((chipValues || []).length - (startInd + labelLimit))\" \n type=\"regular\" \n state=\"primary\" \n filling=\"filled\">\n </sa-chip>\n </div>\n <input\n [ngClass]=\"'chip-input'\"\n matInput [type]=\"type\"\n [disabled]=\"field.props.disabled || false\"\n [placeholder]=\"chipValues.length === 0 ? (props?.placeholder || params?.placeholder || '') : ''\"\n (focus)=\"onFocus()\"\n (blur)=\"onChipBlur()\"\n (input)=\"onChipInputChange($event)\"\n (keydown)=\"onChipKeyDown($event)\"\n [(ngModel)]=\"currentInputValue\"\n #formInput />\n </div>\n } @else {\n <!-- Standard single-value input (backward compatibility) -->\n @if(!!props?.['prefix']){\n <span matPrefix>{{props?.['prefix']}} </span>\n }\n <input\n [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\n matInput [type]=\"props?.type || type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n [disabled]=\"field.props.disabled || false\"\n [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n }\n\n @if(params?.type === 'password'){\n <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\n }@else if(params?.type === 'email' && icon.show){\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\n (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\n }\n @else if(icon?.name){\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon?.size || '24'\" [color]=\"icon?.color || ''\"\n [ngClass]=\"icon?.show ? '' : 'hide'\"></sa-icon>\n }\n </div>\n @if((!formControl.valid) || (params?.supportText)){\n <div class=\"support-label {{formControl.invalid && formControl.touched ? params?.className : ''}}\" [ngClass]=\"[\n formControl.invalid && formControl.touched ? 'invalid' : 'idle'\n ]\">\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n {{getFormSupportText()}}\n </div>\n }\n </div>\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:var(--semantic-error-500, #BD271E)}.sa-input-field.invalid{--border: 1px solid var(--semantic-error-500, #BD271E)}.sa-input-field.invalid sa-icon{--form-email-icon-color: var(--semantic-error-500, #BD271E)}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-pretext{margin-right:2px}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.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)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container,.sa-input-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description,.sa-input-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}.sa-input-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}.sa-input-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.d-flex{display:flex}.chip-container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;min-height:20px}.chip-input{border:none;outline:none;background:transparent;flex:1;min-width:60px;font-size:14px;font-family:inherit;color:inherit}.chip-input::placeholder{color:var(--text-medium-emphasis, #6D6979)}.chip-container sa-chip{margin:2px 0}@media screen and (max-width: 1024px){.masked{font-weight:unset}}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }] }); }
|
|
2306
2306
|
}
|
|
2307
2307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, decorators: [{
|
|
2308
2308
|
type: Component,
|
|
@@ -2314,7 +2314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2314
2314
|
IconComponent,
|
|
2315
2315
|
MatTooltipModule,
|
|
2316
2316
|
ChipsComponent
|
|
2317
|
-
], template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <h2 class=\"sa-input-big-label\">\n {{props?.['bigLabel']}}\n </h2>\n <p class=\"sa-input-big-description\">\n {{props?.['bigDescription']}}\n </p>\n </div>\n }\n @if(!!props?.['label']){\n <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <div class=\"sa-input-label-tooltip-container\">\n <span class=\"sa-input-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-input-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\n !== false){\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\n }\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n (click)=\"onInputFieldClick($event)\">\n @if(pretext){\n <div class=\"sa-input-pretext\">\n {{pretext}}\n </div>\n }\n\n <!-- Multi-value chip display -->\n @if(isMultiValue) {\n <div class=\"chip-container\">\n <sa-chip \n *ngFor=\"let chip of (chipValues || [])?.slice(startInd,startInd+labelLimit) let i = index\"\n [text]=\"chip?.value || chip?.label || chip\"\n [type]=\"'regular'\"\n [state]=\"'primary'\"\n [filling]=\"'filled'\"\n [iconPosition]=\"'right'\"\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\n (onClickEvent)=\"removeChip(i)\">\n </sa-chip>\n \n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"(chipValues || []).length > (startInd + labelLimit)\">\n <sa-chip [text]=\"'+' + ((chipValues || []).length - (startInd + labelLimit))\" \n type=\"regular\" \n state=\"primary\" \n filling=\"filled\">\n </sa-chip>\n </div>\n
|
|
2317
|
+
], template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <h2 class=\"sa-input-big-label\">\n {{props?.['bigLabel']}}\n </h2>\n <p class=\"sa-input-big-description\">\n {{props?.['bigDescription']}}\n </p>\n </div>\n }\n @if(!!props?.['label']){\n <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <div class=\"sa-input-label-tooltip-container\">\n <span class=\"sa-input-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-input-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\n !== false){\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\n }\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n (click)=\"onInputFieldClick($event)\">\n @if(pretext){\n <div class=\"sa-input-pretext\">\n {{pretext}}\n </div>\n }\n\n <!-- Multi-value chip display -->\n @if(isMultiValue) {\n <div class=\"chip-container\">\n <sa-chip \n *ngFor=\"let chip of (chipValues || [])?.slice(startInd,startInd+labelLimit) let i = index\"\n [text]=\"chip?.value || chip?.label || chip\"\n [type]=\"'regular'\"\n [state]=\"'primary'\"\n [filling]=\"'filled'\"\n [iconPosition]=\"'right'\"\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\n (onClickEvent)=\"removeChip(i)\">\n </sa-chip>\n \n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"(chipValues || []).length > (startInd + labelLimit)\">\n <sa-chip [text]=\"'+' + ((chipValues || []).length - (startInd + labelLimit))\" \n type=\"regular\" \n state=\"primary\" \n filling=\"filled\">\n </sa-chip>\n </div>\n <input\n [ngClass]=\"'chip-input'\"\n matInput [type]=\"type\"\n [disabled]=\"field.props.disabled || false\"\n [placeholder]=\"chipValues.length === 0 ? (props?.placeholder || params?.placeholder || '') : ''\"\n (focus)=\"onFocus()\"\n (blur)=\"onChipBlur()\"\n (input)=\"onChipInputChange($event)\"\n (keydown)=\"onChipKeyDown($event)\"\n [(ngModel)]=\"currentInputValue\"\n #formInput />\n </div>\n } @else {\n <!-- Standard single-value input (backward compatibility) -->\n @if(!!props?.['prefix']){\n <span matPrefix>{{props?.['prefix']}} </span>\n }\n <input\n [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\n matInput [type]=\"props?.type || type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n [disabled]=\"field.props.disabled || false\"\n [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n }\n\n @if(params?.type === 'password'){\n <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\n }@else if(params?.type === 'email' && icon.show){\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\n (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\n }\n @else if(icon?.name){\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon?.size || '24'\" [color]=\"icon?.color || ''\"\n [ngClass]=\"icon?.show ? '' : 'hide'\"></sa-icon>\n }\n </div>\n @if((!formControl.valid) || (params?.supportText)){\n <div class=\"support-label {{formControl.invalid && formControl.touched ? params?.className : ''}}\" [ngClass]=\"[\n formControl.invalid && formControl.touched ? 'invalid' : 'idle'\n ]\">\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n {{getFormSupportText()}}\n </div>\n }\n </div>\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:var(--semantic-error-500, #BD271E)}.sa-input-field.invalid{--border: 1px solid var(--semantic-error-500, #BD271E)}.sa-input-field.invalid sa-icon{--form-email-icon-color: var(--semantic-error-500, #BD271E)}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-pretext{margin-right:2px}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.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)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container,.sa-input-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description,.sa-input-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}.sa-input-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}.sa-input-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.d-flex{display:flex}.chip-container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;min-height:20px}.chip-input{border:none;outline:none;background:transparent;flex:1;min-width:60px;font-size:14px;font-family:inherit;color:inherit}.chip-input::placeholder{color:var(--text-medium-emphasis, #6D6979)}.chip-container sa-chip{margin:2px 0}@media screen and (max-width: 1024px){.masked{font-weight:unset}}\n"] }]
|
|
2318
2318
|
}], ctorParameters: () => [], propDecorators: { formInput: [{
|
|
2319
2319
|
type: ViewChild,
|
|
2320
2320
|
args: ['formInput']
|
|
@@ -3371,7 +3371,7 @@ class CategoryDropdownComponent extends FieldType {
|
|
|
3371
3371
|
this.destroy$.complete();
|
|
3372
3372
|
}
|
|
3373
3373
|
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\"></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 }] }); }
|
|
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 }] }); }
|
|
3375
3375
|
}
|
|
3376
3376
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CategoryDropdownComponent, decorators: [{
|
|
3377
3377
|
type: Component,
|
|
@@ -3389,7 +3389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
3389
3389
|
MatDatepickerModule,
|
|
3390
3390
|
MatNativeDateModule,
|
|
3391
3391
|
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\"></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"] }]
|
|
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"] }]
|
|
3393
3393
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { searchInput: [{
|
|
3394
3394
|
type: ViewChild,
|
|
3395
3395
|
args: ['searchInput']
|
|
@@ -5139,7 +5139,7 @@ class QueryBuilderFormlyComponent extends FieldArrayType {
|
|
|
5139
5139
|
this.add(); // start fresh with one row
|
|
5140
5140
|
}
|
|
5141
5141
|
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 (subField of subField.fieldGroup; track $index) {\n @if(!!subField.props['hasDynamicType']){\n @switch (getFilterType(subField)) {\n @case ('STRING') {\n <formly-field [field]=\"subField\"></formly-field>\n }\n @case ('NUMBER') {\n <formly-field [field]=\"subField\"></formly-field>\n }\n @case ('BOOLEAN') {\n <formly-field [field]=\"subField\"></formly-field>\n }\n @case ('DATE') {\n\n }\n @case ('SELECT') {\n <formly-field [field]=\"createField(subField)\"></formly-field>\n }\n @default {\n <formly-field [field]=\"createField(subField)\"></formly-field>\n }\n }\n }@else{\n <formly-field\n class=\"col\"\n [field]=\"subField\"\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-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}\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 }] }); }
|
|
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 (subField of subField.fieldGroup; track $index) {\n @if(!!subField.props['hasDynamicType']){\n @switch (getFilterType(subField)) {\n @case ('STRING') {\n <formly-field [field]=\"subField\"></formly-field>\n }\n @case ('NUMBER') {\n <formly-field [field]=\"subField\"></formly-field>\n }\n @case ('BOOLEAN') {\n <formly-field [field]=\"subField\"></formly-field>\n }\n @case ('CURRENCY') {\n <formly-field [field]=\"subField\"></formly-field>\n }\n @case ('DATE') {\n\n }\n @case ('SELECT') {\n <formly-field [field]=\"createField(subField)\"></formly-field>\n }\n @default {\n <formly-field [field]=\"createField(subField)\"></formly-field>\n }\n }\n }@else{\n <formly-field\n class=\"col\"\n [field]=\"subField\"\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-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}\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 }] }); }
|
|
5143
5143
|
}
|
|
5144
5144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryBuilderFormlyComponent, decorators: [{
|
|
5145
5145
|
type: Component,
|
|
@@ -5153,7 +5153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
5153
5153
|
MatSelectModule,
|
|
5154
5154
|
MatOptionModule,
|
|
5155
5155
|
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 (subField of subField.fieldGroup; track $index) {\n @if(!!subField.props['hasDynamicType']){\n @switch (getFilterType(subField)) {\n @case ('STRING') {\n <formly-field [field]=\"subField\"></formly-field>\n }\n @case ('NUMBER') {\n <formly-field [field]=\"subField\"></formly-field>\n }\n @case ('BOOLEAN') {\n <formly-field [field]=\"subField\"></formly-field>\n }\n @case ('DATE') {\n\n }\n @case ('SELECT') {\n <formly-field [field]=\"createField(subField)\"></formly-field>\n }\n @default {\n <formly-field [field]=\"createField(subField)\"></formly-field>\n }\n }\n }@else{\n <formly-field\n class=\"col\"\n [field]=\"subField\"\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-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}\n"] }]
|
|
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 (subField of subField.fieldGroup; track $index) {\n @if(!!subField.props['hasDynamicType']){\n @switch (getFilterType(subField)) {\n @case ('STRING') {\n <formly-field [field]=\"subField\"></formly-field>\n }\n @case ('NUMBER') {\n <formly-field [field]=\"subField\"></formly-field>\n }\n @case ('BOOLEAN') {\n <formly-field [field]=\"subField\"></formly-field>\n }\n @case ('CURRENCY') {\n <formly-field [field]=\"subField\"></formly-field>\n }\n @case ('DATE') {\n\n }\n @case ('SELECT') {\n <formly-field [field]=\"createField(subField)\"></formly-field>\n }\n @default {\n <formly-field [field]=\"createField(subField)\"></formly-field>\n }\n }\n }@else{\n <formly-field\n class=\"col\"\n [field]=\"subField\"\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-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}\n"] }]
|
|
5157
5157
|
}] });
|
|
5158
5158
|
|
|
5159
5159
|
class QueryBuilderTextareaComponent {
|