herum-shared 1.0.2 → 1.0.4
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/assets/shared/icons/numericSliderBubble.svg +3 -0
- package/atoms/index.d.ts +9 -4
- package/fesm2022/herum-shared-atoms.mjs +38 -18
- package/fesm2022/herum-shared-atoms.mjs.map +1 -1
- package/fesm2022/herum-shared-molecules.mjs +2 -2
- package/fesm2022/herum-shared-molecules.mjs.map +1 -1
- package/fesm2022/herum-shared-table.mjs +2 -2
- package/fesm2022/herum-shared-table.mjs.map +1 -1
- package/fesm2022/herum-shared.mjs +43 -23
- package/fesm2022/herum-shared.mjs.map +1 -1
- package/index.d.ts +11 -6
- package/molecules/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -256,7 +256,7 @@ class HerumAutocompleteComponent {
|
|
|
256
256
|
});
|
|
257
257
|
}
|
|
258
258
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumAutocompleteComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
259
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumAutocompleteComponent, isStandalone: false, selector: "herum-autocomplete", inputs: { options: "options", displayBy: "displayBy", subTitleBy: "subTitleBy", placeholder: "placeholder", noResultsText: "noResultsText", disabled: "disabled", isLoadingInput: "isLoadingInput", debounceTime: "debounceTime", selectedOption: "selectedOption", isBlurred: "isBlurred" }, outputs: { filterTextEmitter: "filterTextEmitter", selectedOptionEmitter: "selectedOptionEmitter" }, host: { listeners: { "window:click": "onWindowClick($event)" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #container class=\"autocomplete-container\" dir=\"rtl\" [class.disabled]=\"disabled\">\r\n <herum-input-field #filterInput class=\"autocomplete-input internal\" \r\n [type]=\"isBlurred ? 'search-blur' : 'search'\" [placeholder]=\"placeholder\"\r\n [debounceTime]=\"debounceTime\" [disabled]=\"disabled\" [inputValue]=\"currentSearchedItem\"\r\n (click)=\"_onInputClick($event)\" (inputValueEmitter)=\"_inputChange($event)\">\r\n </herum-input-field>\r\n\r\n <div class=\"autocomplete-dropdown\" [@openClose]=\"isDropdownOpen ? 'openDown' : 'closeUp'\" \r\n [class.hidden]=\"!isDropdownOpen\" [class.glass]=\"isBlurred\">\r\n <ng-container *ngIf=\"isLoadingInput || isWaitingForResults; else optionsList\">\r\n <div *ngFor=\"let _ of skeletonRows; let i = index\" class=\"autocomplete-option loading-state\">\r\n <span class=\"skeleton-text skeleton\" [ngStyle]=\"{width: _getSkeletonWidth(i) + 'px'}\"> </span>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #optionsList>\r\n <ng-container *ngIf=\"filteredOptions?.length; else noResults\">\r\n <a class=\"autocomplete-option\" *ngFor=\"let option of filteredOptions\" (click)=\"_onSelectOption(option)\">\r\n <div class=\"option-main\">\r\n <ng-container *ngIf=\"option.iconUrl; else defaultLeadingIcon\">\r\n <img [src]=\"option.iconUrl\" class=\"option-icon-img\" />\r\n </ng-container>\r\n \r\n <ng-template #defaultLeadingIcon>\r\n <img src=\"assets/hadracha/general/plus.svg\" class=\"option-icon\">\r\n </ng-template>\r\n\r\n <span [highlightText]=\"option[displayBy]\" [herumHighlight]=\"currentSearchedItem\"></span>\r\n </div>\r\n\r\n <span class=\"option-subtitle\" *ngIf=\"subTitleBy && option[subTitleBy]\">\r\n {{ option[subTitleBy] }}\r\n </span>\r\n </a>\r\n </ng-container>\r\n\r\n <ng-template #noResults>\r\n <a *ngIf=\"!(isLoadingInput || isWaitingForResults)\"\r\n class=\"autocomplete-option text-center no-results-blurred\">\r\n {{ noResultsText }}\r\n </a>\r\n </ng-template>\r\n </ng-template>\r\n </div>\r\n</div>", styles: [":host{--option-icon-size: 14px;--option-item-size: 28px;--autocomplete-visible-options: 5;--autocomplete-option-padding-vertical: 8px;--autocomplete-option-height: calc(var(--option-item-size) + 2 * var(--autocomplete-option-padding-vertical));--dropdown-height: calc(var(--autocomplete-option-height) * var(--autocomplete-visible-options));--loading-state-padding-vertical: calc((var(--option-item-size) + var(--autocomplete-option-padding-vertical)) / 2)}.autocomplete-container{position:relative;width:100%;direction:rtl}.autocomplete-container.disabled{opacity:.6;pointer-events:none}.autocomplete-container .autocomplete-input{width:100%;display:block}.autocomplete-container .autocomplete-dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;max-height:var(--dropdown-height);overflow-y:auto;overflow-x:hidden;line-height:var(--option-item-size)}.autocomplete-container .autocomplete-dropdown.hidden{pointer-events:none}.autocomplete-container .autocomplete-dropdown:not(.glass){background-color:var(--light-background-color);border-radius:var(--border-radius);box-shadow:0 2px 4px #00000029}.autocomplete-container .autocomplete-dropdown.glass .no-results-blurred{color:var(--text-color)!important}.autocomplete-container .autocomplete-dropdown .autocomplete-option{display:flex;align-items:center;justify-content:flex-start;padding:var(--autocomplete-option-padding-vertical) 16px;cursor:pointer;font-size:14px;color:var(--text-color);text-decoration:none}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-main{display:flex;align-items:center;gap:8px;min-width:0}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-subtitle{margin-inline-start:auto;white-space:nowrap;opacity:.75;font-size:12px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon{width:var(--option-icon-size);height:var(--option-icon-size);margin-left:4px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon-img{width:var(--option-item-size);height:var(--option-item-size);margin-left:8px;border-radius:16px}.autocomplete-container .autocomplete-dropdown .autocomplete-option.autocomplete-option{border-top:1px solid var(--divider-color)}.autocomplete-container .autocomplete-dropdown .autocomplete-option:hover{background-color:var(--hover-background)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.text-center{cursor:default;color:var(--homepage-separator)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.loading-state{padding-top:var(--loading-state-padding-vertical);padding-bottom:var(--loading-state-padding-vertical)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i4.HerumHighlightDirective, selector: "[herumHighlight]", inputs: ["highlightText", "herumHighlight"] }, { kind: "component", type: i2.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter"] }], animations: [openClose] });
|
|
259
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumAutocompleteComponent, isStandalone: false, selector: "herum-autocomplete", inputs: { options: "options", displayBy: "displayBy", subTitleBy: "subTitleBy", placeholder: "placeholder", noResultsText: "noResultsText", disabled: "disabled", isLoadingInput: "isLoadingInput", debounceTime: "debounceTime", selectedOption: "selectedOption", isBlurred: "isBlurred" }, outputs: { filterTextEmitter: "filterTextEmitter", selectedOptionEmitter: "selectedOptionEmitter" }, host: { listeners: { "window:click": "onWindowClick($event)" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #container class=\"autocomplete-container\" dir=\"rtl\" [class.disabled]=\"disabled\">\r\n <herum-input-field #filterInput class=\"autocomplete-input internal\" \r\n [type]=\"isBlurred ? 'search-blur' : 'search'\" [placeholder]=\"placeholder\"\r\n [debounceTime]=\"debounceTime\" [disabled]=\"disabled\" [inputValue]=\"currentSearchedItem\"\r\n (click)=\"_onInputClick($event)\" (inputValueEmitter)=\"_inputChange($event)\">\r\n </herum-input-field>\r\n\r\n <div class=\"autocomplete-dropdown\" [@openClose]=\"isDropdownOpen ? 'openDown' : 'closeUp'\" \r\n [class.hidden]=\"!isDropdownOpen\" [class.glass]=\"isBlurred\">\r\n <ng-container *ngIf=\"isLoadingInput || isWaitingForResults; else optionsList\">\r\n <div *ngFor=\"let _ of skeletonRows; let i = index\" class=\"autocomplete-option loading-state\">\r\n <span class=\"skeleton-text skeleton\" [ngStyle]=\"{width: _getSkeletonWidth(i) + 'px'}\"> </span>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #optionsList>\r\n <ng-container *ngIf=\"filteredOptions?.length; else noResults\">\r\n <a class=\"autocomplete-option\" *ngFor=\"let option of filteredOptions\" (click)=\"_onSelectOption(option)\">\r\n <div class=\"option-main\">\r\n <ng-container *ngIf=\"option.iconUrl; else defaultLeadingIcon\">\r\n <img [src]=\"option.iconUrl\" class=\"option-icon-img\" />\r\n </ng-container>\r\n \r\n <ng-template #defaultLeadingIcon>\r\n <img src=\"assets/hadracha/general/plus.svg\" class=\"option-icon\">\r\n </ng-template>\r\n\r\n <span [highlightText]=\"option[displayBy]\" [herumHighlight]=\"currentSearchedItem\"></span>\r\n </div>\r\n\r\n <span class=\"option-subtitle\" *ngIf=\"subTitleBy && option[subTitleBy]\">\r\n {{ option[subTitleBy] }}\r\n </span>\r\n </a>\r\n </ng-container>\r\n\r\n <ng-template #noResults>\r\n <a *ngIf=\"!(isLoadingInput || isWaitingForResults)\"\r\n class=\"autocomplete-option text-center no-results-blurred\">\r\n {{ noResultsText }}\r\n </a>\r\n </ng-template>\r\n </ng-template>\r\n </div>\r\n</div>", styles: [":host{--option-icon-size: 14px;--option-item-size: 28px;--autocomplete-visible-options: 5;--autocomplete-option-padding-vertical: 8px;--autocomplete-option-height: calc(var(--option-item-size) + 2 * var(--autocomplete-option-padding-vertical));--dropdown-height: calc(var(--autocomplete-option-height) * var(--autocomplete-visible-options));--loading-state-padding-vertical: calc((var(--option-item-size) + var(--autocomplete-option-padding-vertical)) / 2)}.autocomplete-container{position:relative;width:100%;direction:rtl}.autocomplete-container.disabled{opacity:.6;pointer-events:none}.autocomplete-container .autocomplete-input{width:100%;display:block}.autocomplete-container .autocomplete-dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;max-height:var(--dropdown-height);overflow-y:auto;overflow-x:hidden;line-height:var(--option-item-size)}.autocomplete-container .autocomplete-dropdown.hidden{pointer-events:none}.autocomplete-container .autocomplete-dropdown:not(.glass){background-color:var(--light-background-color);border-radius:var(--border-radius);box-shadow:0 2px 4px #00000029}.autocomplete-container .autocomplete-dropdown.glass .no-results-blurred{color:var(--text-color)!important}.autocomplete-container .autocomplete-dropdown .autocomplete-option{display:flex;align-items:center;justify-content:flex-start;padding:var(--autocomplete-option-padding-vertical) 16px;cursor:pointer;font-size:14px;color:var(--text-color);text-decoration:none}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-main{display:flex;align-items:center;gap:8px;min-width:0}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-subtitle{margin-inline-start:auto;white-space:nowrap;opacity:.75;font-size:12px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon{width:var(--option-icon-size);height:var(--option-icon-size);margin-left:4px}.autocomplete-container .autocomplete-dropdown .autocomplete-option .option-icon-img{width:var(--option-item-size);height:var(--option-item-size);margin-left:8px;border-radius:16px}.autocomplete-container .autocomplete-dropdown .autocomplete-option.autocomplete-option{border-top:1px solid var(--divider-color)}.autocomplete-container .autocomplete-dropdown .autocomplete-option:hover{background-color:var(--hover-background)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.text-center{cursor:default;color:var(--homepage-separator)}.autocomplete-container .autocomplete-dropdown .autocomplete-option.loading-state{padding-top:var(--loading-state-padding-vertical);padding-bottom:var(--loading-state-padding-vertical)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i4.HerumHighlightDirective, selector: "[herumHighlight]", inputs: ["highlightText", "herumHighlight"] }, { kind: "component", type: i2.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter", "isValidChange"] }], animations: [openClose] });
|
|
260
260
|
}
|
|
261
261
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumAutocompleteComponent, decorators: [{
|
|
262
262
|
type: Component,
|
|
@@ -604,7 +604,7 @@ class HerumDateTimeInputComponent {
|
|
|
604
604
|
return isValidDate && isValidTime;
|
|
605
605
|
}
|
|
606
606
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDateTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
607
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDateTimeInputComponent, isStandalone: false, selector: "herum-date-time-input", inputs: { placeholder: "placeholder", inputValue: "inputValue", minDate: "minDate", showSeconds: "showSeconds", rangeMode: "rangeMode" }, outputs: { dateChange: "dateChange", timeChange: "timeChange", disableChange: "disableChange" }, usesOnChanges: true, ngImport: i0, template: "<herum-input-field [placeholder]=\"placeholder\" [errorMsg]=\"errorMessage\" [isValid]=\"isValid\" [isBlurred]=\"true\"\r\n [inputValue]=\"inputValue\" [debounceTime]=\"debounceTime\" [ltrMode]=\"ltrMode\"\r\n (inputValueEmitter)=\"_valueChange($event)\">\r\n</herum-input-field>", dependencies: [{ kind: "component", type: i2.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter"] }] });
|
|
607
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: HerumDateTimeInputComponent, isStandalone: false, selector: "herum-date-time-input", inputs: { placeholder: "placeholder", inputValue: "inputValue", minDate: "minDate", showSeconds: "showSeconds", rangeMode: "rangeMode" }, outputs: { dateChange: "dateChange", timeChange: "timeChange", disableChange: "disableChange" }, usesOnChanges: true, ngImport: i0, template: "<herum-input-field [placeholder]=\"placeholder\" [errorMsg]=\"errorMessage\" [isValid]=\"isValid\" [isBlurred]=\"true\"\r\n [inputValue]=\"inputValue\" [debounceTime]=\"debounceTime\" [ltrMode]=\"ltrMode\"\r\n (inputValueEmitter)=\"_valueChange($event)\">\r\n</herum-input-field>", dependencies: [{ kind: "component", type: i2.HerumInputFieldComponent, selector: "herum-input-field", inputs: ["type", "placeholder", "disabled", "isBlocked", "isValid", "errorMsg", "showErrorMsgGap", "inputValue", "isLoading", "id", "debounceTime", "minValue", "maxValue", "isBlurred", "touched", "ltrMode", "preventMacroKeysPressEvent"], outputs: ["inputValueEmitter", "isValidChange"] }] });
|
|
608
608
|
}
|
|
609
609
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HerumDateTimeInputComponent, decorators: [{
|
|
610
610
|
type: Component,
|