@ardium-ui/ui 5.0.0-alpha.47 → 5.0.0-alpha.48
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/fesm2022/ardium-ui-ui.mjs +55 -21
- package/fesm2022/ardium-ui-ui.mjs.map +1 -1
- package/lib/_internal/item-storages/dropdown-item-storage.d.ts +4 -1
- package/lib/search-functions.d.ts +1 -1
- package/lib/select/select.component.d.ts +5 -4
- package/lib/select/select.defaults.d.ts +2 -2
- package/lib/types/item-storage.types.d.ts +2 -1
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ import { arraySignal, coerceBooleanProperty, coerceNumberProperty, coerceArrayPr
|
|
|
9
9
|
import { isDefined, any, isPrimitive, isAnyString, isNull, isNumber, isString, isArray, isFunction, isRegExp, evaluate, isObject, isPromise, isDate } from 'simple-bool';
|
|
10
10
|
import { resolvePath } from 'resolve-object-path';
|
|
11
11
|
import { toObservable } from '@angular/core/rxjs-interop';
|
|
12
|
-
import { map, Subject, merge, takeUntil, startWith, BehaviorSubject } from 'rxjs';
|
|
12
|
+
import { map, Subject, isObservable, firstValueFrom, merge, takeUntil, startWith, BehaviorSubject } from 'rxjs';
|
|
13
13
|
import { TakeChance } from 'take-chance';
|
|
14
14
|
import * as i1 from '@angular/common';
|
|
15
15
|
import { CommonModule, DatePipe, UpperCasePipe, TitleCasePipe, DOCUMENT, DecimalPipe, AsyncPipe } from '@angular/common';
|
|
@@ -2689,11 +2689,20 @@ class ItemStorage {
|
|
|
2689
2689
|
constructor(_ardParentComp) {
|
|
2690
2690
|
this._ardParentComp = _ardParentComp;
|
|
2691
2691
|
this._items = arraySignal([]);
|
|
2692
|
-
this.filteredItems = computed(() => this.items().filter(item => item.filtered)
|
|
2693
|
-
|
|
2694
|
-
|
|
2692
|
+
this.filteredItems = computed(() => this.items().filter(item => item.filtered), {
|
|
2693
|
+
equal: arrayEqualityFn,
|
|
2694
|
+
});
|
|
2695
|
+
this.selectedItems = computed(() => this.items().filter(item => item.selected), {
|
|
2696
|
+
equal: arrayEqualityFn,
|
|
2697
|
+
});
|
|
2698
|
+
this.highlightedItems = computed(() => this.items().filter(item => item.highlighted), {
|
|
2699
|
+
equal: arrayEqualityFn,
|
|
2700
|
+
});
|
|
2695
2701
|
this._lastHighlightedItem = signal(undefined);
|
|
2696
2702
|
this._recentlyHighlightedItem = signal(undefined);
|
|
2703
|
+
this.fndjf = effect(() => {
|
|
2704
|
+
console.log(this.filteredItems());
|
|
2705
|
+
});
|
|
2697
2706
|
this._groups = computed(() => {
|
|
2698
2707
|
const groupMap = this._createEmptyGroupMap();
|
|
2699
2708
|
for (const item of this.filteredItems()) {
|
|
@@ -2720,6 +2729,7 @@ class ItemStorage {
|
|
|
2720
2729
|
this.value = computed(() => this._itemsToValue(this.selectedItems()));
|
|
2721
2730
|
this.isNoItemsToSelect = computed(() => this.items().length === this.selectedItems().length);
|
|
2722
2731
|
this.isNoItemsFound = computed(() => this.filteredItems().length === 0);
|
|
2732
|
+
this.isAnyItemExactMatch = computed(() => this.filteredItems().some(item => item.isExactMatch));
|
|
2723
2733
|
this.isAnyItemSelected = computed(() => this.selectedItems().length > 0);
|
|
2724
2734
|
this.isAnyItemHighlighted = computed(() => this.highlightedItems().length > 0);
|
|
2725
2735
|
this.itemsLeftUntilLimit = computed(() => this._ardParentComp.multiselectable() && isDefined(this._ardParentComp.maxSelectedItems())
|
|
@@ -2770,7 +2780,7 @@ class ItemStorage {
|
|
|
2770
2780
|
item = this._primitiveItemsMapFn(item);
|
|
2771
2781
|
}
|
|
2772
2782
|
//map the item to create data bindings
|
|
2773
|
-
const ardOption = this._setItemsMapFn(item, (this.items().last()?.index ??
|
|
2783
|
+
const ardOption = this._setItemsMapFn(item, (this.items().last()?.index ?? -1) + 1, isItemPrimitive);
|
|
2774
2784
|
//push the item into all items
|
|
2775
2785
|
this._items.push(ardOption);
|
|
2776
2786
|
//add all items to filter array
|
|
@@ -2819,6 +2829,7 @@ class ItemStorage {
|
|
|
2819
2829
|
label: rawItemData.value?.toString?.() ?? String(rawItemData.value),
|
|
2820
2830
|
disabled: false,
|
|
2821
2831
|
filtered: true,
|
|
2832
|
+
isExactMatch: false,
|
|
2822
2833
|
selected: false,
|
|
2823
2834
|
highlighted: false,
|
|
2824
2835
|
group: undefined,
|
|
@@ -2861,6 +2872,7 @@ class ItemStorage {
|
|
|
2861
2872
|
disabled: disabled,
|
|
2862
2873
|
group: group,
|
|
2863
2874
|
filtered: true,
|
|
2875
|
+
isExactMatch: false,
|
|
2864
2876
|
selected: false,
|
|
2865
2877
|
highlighted: false,
|
|
2866
2878
|
highlighted_recently: false,
|
|
@@ -2933,9 +2945,11 @@ class ItemStorage {
|
|
|
2933
2945
|
return this.items().find(item => findBy(item));
|
|
2934
2946
|
}
|
|
2935
2947
|
async addCustomOption(value, fn) {
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2948
|
+
let optionValue = fn(value);
|
|
2949
|
+
if (isObservable(optionValue)) {
|
|
2950
|
+
optionValue = await firstValueFrom(optionValue);
|
|
2951
|
+
}
|
|
2952
|
+
else if (isPromise(optionValue)) {
|
|
2939
2953
|
try {
|
|
2940
2954
|
optionValue = await optionValue;
|
|
2941
2955
|
}
|
|
@@ -3076,7 +3090,10 @@ class ItemStorage {
|
|
|
3076
3090
|
filterTerm = filterTerm.toLocaleLowerCase();
|
|
3077
3091
|
}
|
|
3078
3092
|
const searchFn = this._ardParentComp.searchFn();
|
|
3079
|
-
this._updateItems(item =>
|
|
3093
|
+
this._updateItems(item => {
|
|
3094
|
+
const searchResult = searchFn(filterTerm, item);
|
|
3095
|
+
return { ...item, filtered: searchResult[0], isExactMatch: searchResult[1] };
|
|
3096
|
+
});
|
|
3080
3097
|
if (!this.isNoItemsFound)
|
|
3081
3098
|
this.highlightFirstItem();
|
|
3082
3099
|
else
|
|
@@ -3090,11 +3107,14 @@ class ItemStorage {
|
|
|
3090
3107
|
return this.items();
|
|
3091
3108
|
}
|
|
3092
3109
|
}
|
|
3110
|
+
function arrayEqualityFn(a, b) {
|
|
3111
|
+
return a === b || (a.length === 0 && b.length === 0) || (a.length === b.length && a.every((v, i) => v === b[i]));
|
|
3112
|
+
}
|
|
3093
3113
|
|
|
3094
3114
|
function searchInString(searchTerm, toSearch) {
|
|
3095
3115
|
if (toSearch === undefined)
|
|
3096
3116
|
return false;
|
|
3097
|
-
return
|
|
3117
|
+
return toSearch.indexOf(searchTerm) !== -1;
|
|
3098
3118
|
}
|
|
3099
3119
|
const searchFunctions = {
|
|
3100
3120
|
/**
|
|
@@ -3104,7 +3124,9 @@ const searchFunctions = {
|
|
|
3104
3124
|
* @returns `true` if the item matches the search term, otherwise `false`.
|
|
3105
3125
|
*/
|
|
3106
3126
|
byLabel: (searchTerm, item) => {
|
|
3107
|
-
|
|
3127
|
+
const lowerLabel = item.label.toLocaleLowerCase();
|
|
3128
|
+
const isExact = searchTerm === lowerLabel;
|
|
3129
|
+
return [isExact || searchInString(searchTerm, lowerLabel), isExact];
|
|
3108
3130
|
},
|
|
3109
3131
|
/**
|
|
3110
3132
|
* Determines if the item should appear in the search results, based on the value only.
|
|
@@ -3113,7 +3135,9 @@ const searchFunctions = {
|
|
|
3113
3135
|
* @returns `true` if the item matches the search term, otherwise `false`.
|
|
3114
3136
|
*/
|
|
3115
3137
|
byValue: (searchTerm, item) => {
|
|
3116
|
-
|
|
3138
|
+
const lowerValue = String(item.value).toLocaleLowerCase();
|
|
3139
|
+
const isExact = searchTerm === lowerValue;
|
|
3140
|
+
return [isExact || searchInString(searchTerm, lowerValue), isExact];
|
|
3117
3141
|
},
|
|
3118
3142
|
/**
|
|
3119
3143
|
* Determines if the item should appear in the search results, based on the group only.
|
|
@@ -3122,7 +3146,9 @@ const searchFunctions = {
|
|
|
3122
3146
|
* @returns `true` if the item matches the search term, otherwise `false`.
|
|
3123
3147
|
*/
|
|
3124
3148
|
byGroup: (searchTerm, item) => {
|
|
3125
|
-
|
|
3149
|
+
const lowerGroup = String(item.group).toLocaleLowerCase();
|
|
3150
|
+
const isExact = searchTerm === lowerGroup;
|
|
3151
|
+
return [isExact || searchInString(searchTerm, lowerGroup), isExact];
|
|
3126
3152
|
},
|
|
3127
3153
|
/**
|
|
3128
3154
|
* Determines if the item should appear in the search results, based on the label and group.
|
|
@@ -3131,7 +3157,9 @@ const searchFunctions = {
|
|
|
3131
3157
|
* @returns `true` if the item matches the search term, otherwise `false`.
|
|
3132
3158
|
*/
|
|
3133
3159
|
byLabelAndGroup: (searchTerm, item) => {
|
|
3134
|
-
|
|
3160
|
+
const labelMatch = searchFunctions.byLabel(searchTerm, item);
|
|
3161
|
+
const matchData = labelMatch[0] ? [true, labelMatch[1]] : searchFunctions.byGroup(searchTerm, item);
|
|
3162
|
+
return matchData;
|
|
3135
3163
|
},
|
|
3136
3164
|
/**
|
|
3137
3165
|
* Determines if the item should appear in the search results, based on the label and value.
|
|
@@ -3140,7 +3168,9 @@ const searchFunctions = {
|
|
|
3140
3168
|
* @returns `true` if the item matches the search term, otherwise `false`.
|
|
3141
3169
|
*/
|
|
3142
3170
|
byLabelAndValue: (searchTerm, item) => {
|
|
3143
|
-
|
|
3171
|
+
const labelMatch = searchFunctions.byLabel(searchTerm, item);
|
|
3172
|
+
const matchData = labelMatch[0] ? [true, labelMatch[1]] : searchFunctions.byValue(searchTerm, item);
|
|
3173
|
+
return matchData;
|
|
3144
3174
|
},
|
|
3145
3175
|
/**
|
|
3146
3176
|
* Determines if the item should appear in the search results, based on the label, group, and value.
|
|
@@ -3149,9 +3179,11 @@ const searchFunctions = {
|
|
|
3149
3179
|
* @returns `true` if the item matches the search term, otherwise `false`.
|
|
3150
3180
|
*/
|
|
3151
3181
|
byLabelAndGroupAndValue: (searchTerm, item) => {
|
|
3152
|
-
|
|
3153
|
-
|
|
3154
|
-
|
|
3182
|
+
const labelAndValueMatch = searchFunctions.byLabelAndValue(searchTerm, item);
|
|
3183
|
+
const matchData = labelAndValueMatch[0]
|
|
3184
|
+
? [true, labelAndValueMatch[1]]
|
|
3185
|
+
: searchFunctions.byGroup(searchTerm, item);
|
|
3186
|
+
return matchData;
|
|
3155
3187
|
},
|
|
3156
3188
|
};
|
|
3157
3189
|
|
|
@@ -3646,7 +3678,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
3646
3678
|
return coerceBooleanProperty(v) && this._defaultAddCustomFn;
|
|
3647
3679
|
},
|
|
3648
3680
|
});
|
|
3649
|
-
this.shouldShowAddCustom = computed(() => this.addCustom() !== false && this.searchTerm().length > 0 && this.itemStorage.
|
|
3681
|
+
this.shouldShowAddCustom = computed(() => this.addCustom() !== false && this.searchTerm().length > 0 && !this.itemStorage.isAnyItemExactMatch());
|
|
3650
3682
|
this.valueChange = output();
|
|
3651
3683
|
//! output events
|
|
3652
3684
|
this.addEvent = output({ alias: 'add' });
|
|
@@ -3690,6 +3722,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
3690
3722
|
itemData: item.itemData,
|
|
3691
3723
|
group: item.group,
|
|
3692
3724
|
disabled: item.disabled,
|
|
3725
|
+
isExactMatch: item.isExactMatch,
|
|
3693
3726
|
highlighted_recently: item.highlighted_recently,
|
|
3694
3727
|
}));
|
|
3695
3728
|
this.valueContextGenerator = computed(() => item => ({
|
|
@@ -3846,6 +3879,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
3846
3879
|
const newOptionObj = await this.itemStorage.addCustomOption(value, ac);
|
|
3847
3880
|
if (!newOptionObj)
|
|
3848
3881
|
return;
|
|
3882
|
+
console.log('new option obj', this.itemStorage.items());
|
|
3849
3883
|
this.selectItem(newOptionObj);
|
|
3850
3884
|
}
|
|
3851
3885
|
//! control value accessor
|
|
@@ -11953,11 +11987,11 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
|
|
|
11953
11987
|
this.currentHandle.set(null);
|
|
11954
11988
|
}
|
|
11955
11989
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRangeSliderComponent, deps: [{ token: ARD_SLIDER_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11956
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumRangeSliderComponent, isStandalone: false, selector: "ard-range-slider", inputs: { selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, minimumDistance: { classPropertyName: "minimumDistance", publicName: "minimumDistance", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:touchmove": "onPointerMove($event)" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-range-slider-container-master\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\r\n [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\r\n>\r\n <div class=\"ard-slider-container\">\r\n <div\r\n #track\r\n class=\"ard-slider-track\"\r\n (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n >\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n <div\r\n class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n [style]=\"{\r\n left: trackOverlayLeft(),\r\n width: trackOverlayWidth()\r\n }\"\r\n ></div>\r\n @if (showValueTicks()) {\r\n <div class=\"ard-value-tick-container\">\r\n @for (tick of _tickArray(); track tick) {\r\n <div\r\n class=\"ard-value-tick\"\r\n [style]=\"{ left: tick }\"\r\n ></div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-slider-handle\"\r\n [tabindex]=\"tabIndex()\"\r\n [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 1\"\r\n (pointerdown)=\"onPointerDownOnHandle($event, 1)\"\r\n (focus)=\"onHandleFocus($event, 1)\"\r\n (blur)=\"onBlur($event)\"\r\n [style]=\"{ left: handlePositionsPercent()[0] }\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n @if (tooltipBehavior() !== 'never') {\r\n <div\r\n class=\"ard-slider-tooltip-wrapper\"\r\n [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n [style]=\"{ left: handlePositionsPercent()[0] }\"\r\n >\r\n <ng-template\r\n #defaultTooltipTemplate\r\n let-value\r\n >\r\n <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n [ngTemplateOutletContext]=\"tooltipContexts().from\"\r\n >\r\n </ng-template>\r\n </div>\r\n }\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-slider-handle\"\r\n [tabindex]=\"tabIndex()\"\r\n [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 2\"\r\n (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\r\n (focus)=\"onHandleFocus($event, 2)\"\r\n (blur)=\"onBlur($event)\"\r\n [style]=\"{ left: handlePositionsPercent()[1] }\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n @if (tooltipBehavior() !== 'never') {\r\n <div\r\n class=\"ard-slider-tooltip-wrapper\"\r\n [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n [style]=\"{ left: handlePositionsPercent()[1] }\"\r\n >\r\n <ng-template\r\n #defaultTooltipTemplate\r\n let-value\r\n >\r\n <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n [ngTemplateOutletContext]=\"tooltipContexts().to\"\r\n >\r\n </ng-template>\r\n </div>\r\n }\r\n </div>\r\n @if (labelObjects().length > 0) {\r\n <div class=\"ard-slider-label-container\">\r\n @for (label of labelObjects(); track $index) {\r\n <div\r\n class=\"ard-slider-label\"\r\n [style]=\"{ left: label.positionPercent }\"\r\n >\r\n {{ label.label }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #handleThumbBase>\r\n <div class=\"ard-
|
|
11990
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumRangeSliderComponent, isStandalone: false, selector: "ard-range-slider", inputs: { selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, minimumDistance: { classPropertyName: "minimumDistance", publicName: "minimumDistance", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:touchmove": "onPointerMove($event)" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-range-slider-container-master\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\r\n [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\r\n>\r\n <div class=\"ard-slider-container\">\r\n <div\r\n #track\r\n class=\"ard-slider-track\"\r\n (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n >\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n <div\r\n class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n [style]=\"{\r\n left: trackOverlayLeft(),\r\n width: trackOverlayWidth()\r\n }\"\r\n ></div>\r\n @if (showValueTicks()) {\r\n <div class=\"ard-value-tick-container\">\r\n @for (tick of _tickArray(); track tick) {\r\n <div\r\n class=\"ard-value-tick\"\r\n [style]=\"{ left: tick }\"\r\n ></div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-slider-handle\"\r\n [tabindex]=\"tabIndex()\"\r\n [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 1\"\r\n (pointerdown)=\"onPointerDownOnHandle($event, 1)\"\r\n (focus)=\"onHandleFocus($event, 1)\"\r\n (blur)=\"onBlur($event)\"\r\n [style]=\"{ left: handlePositionsPercent()[0] }\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n @if (tooltipBehavior() !== 'never') {\r\n <div\r\n class=\"ard-slider-tooltip-wrapper\"\r\n [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n [style]=\"{ left: handlePositionsPercent()[0] }\"\r\n >\r\n <ng-template\r\n #defaultTooltipTemplate\r\n let-value\r\n >\r\n <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n [ngTemplateOutletContext]=\"tooltipContexts().from\"\r\n >\r\n </ng-template>\r\n </div>\r\n }\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-slider-handle\"\r\n [tabindex]=\"tabIndex()\"\r\n [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 2\"\r\n (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\r\n (focus)=\"onHandleFocus($event, 2)\"\r\n (blur)=\"onBlur($event)\"\r\n [style]=\"{ left: handlePositionsPercent()[1] }\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n @if (tooltipBehavior() !== 'never') {\r\n <div\r\n class=\"ard-slider-tooltip-wrapper\"\r\n [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n [style]=\"{ left: handlePositionsPercent()[1] }\"\r\n >\r\n <ng-template\r\n #defaultTooltipTemplate\r\n let-value\r\n >\r\n <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n [ngTemplateOutletContext]=\"tooltipContexts().to\"\r\n >\r\n </ng-template>\r\n </div>\r\n }\r\n </div>\r\n @if (labelObjects().length > 0) {\r\n <div class=\"ard-slider-label-container\">\r\n @for (label of labelObjects(); track $index) {\r\n <div\r\n class=\"ard-slider-label\"\r\n [style]=\"{ left: label.positionPercent }\"\r\n >\r\n {{ label.label }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #handleThumbBase>\r\n <div class=\"ard-slider-thumb\"></div>\r\n</ng-template>\r\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}ard-range-slider{display:block}.ard-range-slider-container-master{display:flex;flex-direction:column}.ard-range-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-range-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-range-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-range-slider-container-master .ard-slider-tooltip,.ard-range-slider-container-master .ard-slider-track,.ard-range-slider-container-master .ard-value-tick-container{position:relative}.ard-range-slider-container-master .ard-value-tick{position:absolute}.ard-range-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-range-slider-container-master .ard-slider-label{position:absolute;line-height:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
11957
11991
|
}
|
|
11958
11992
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRangeSliderComponent, decorators: [{
|
|
11959
11993
|
type: Component,
|
|
11960
|
-
args: [{ standalone: false, selector: 'ard-range-slider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-range-slider-container-master\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\r\n [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\r\n>\r\n <div class=\"ard-slider-container\">\r\n <div\r\n #track\r\n class=\"ard-slider-track\"\r\n (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n >\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n <div\r\n class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n [style]=\"{\r\n left: trackOverlayLeft(),\r\n width: trackOverlayWidth()\r\n }\"\r\n ></div>\r\n @if (showValueTicks()) {\r\n <div class=\"ard-value-tick-container\">\r\n @for (tick of _tickArray(); track tick) {\r\n <div\r\n class=\"ard-value-tick\"\r\n [style]=\"{ left: tick }\"\r\n ></div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-slider-handle\"\r\n [tabindex]=\"tabIndex()\"\r\n [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 1\"\r\n (pointerdown)=\"onPointerDownOnHandle($event, 1)\"\r\n (focus)=\"onHandleFocus($event, 1)\"\r\n (blur)=\"onBlur($event)\"\r\n [style]=\"{ left: handlePositionsPercent()[0] }\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n @if (tooltipBehavior() !== 'never') {\r\n <div\r\n class=\"ard-slider-tooltip-wrapper\"\r\n [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n [style]=\"{ left: handlePositionsPercent()[0] }\"\r\n >\r\n <ng-template\r\n #defaultTooltipTemplate\r\n let-value\r\n >\r\n <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n [ngTemplateOutletContext]=\"tooltipContexts().from\"\r\n >\r\n </ng-template>\r\n </div>\r\n }\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-slider-handle\"\r\n [tabindex]=\"tabIndex()\"\r\n [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 2\"\r\n (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\r\n (focus)=\"onHandleFocus($event, 2)\"\r\n (blur)=\"onBlur($event)\"\r\n [style]=\"{ left: handlePositionsPercent()[1] }\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n @if (tooltipBehavior() !== 'never') {\r\n <div\r\n class=\"ard-slider-tooltip-wrapper\"\r\n [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n [style]=\"{ left: handlePositionsPercent()[1] }\"\r\n >\r\n <ng-template\r\n #defaultTooltipTemplate\r\n let-value\r\n >\r\n <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n [ngTemplateOutletContext]=\"tooltipContexts().to\"\r\n >\r\n </ng-template>\r\n </div>\r\n }\r\n </div>\r\n @if (labelObjects().length > 0) {\r\n <div class=\"ard-slider-label-container\">\r\n @for (label of labelObjects(); track $index) {\r\n <div\r\n class=\"ard-slider-label\"\r\n [style]=\"{ left: label.positionPercent }\"\r\n >\r\n {{ label.label }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #handleThumbBase>\r\n <div class=\"ard-
|
|
11994
|
+
args: [{ standalone: false, selector: 'ard-range-slider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-range-slider-container-master\"\r\n [ngClass]=\"ngClasses()\"\r\n [class.ard-slider-handle-grabbed]=\"isSliderHandleGrabbed()\"\r\n [style]=\"{ '--_ard-slider-transition': sliderTransition() }\"\r\n>\r\n <div class=\"ard-slider-container\">\r\n <div\r\n #track\r\n class=\"ard-slider-track\"\r\n (pointerdown)=\"onTrackHitboxPointerDown($event)\"\r\n >\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-slider-track-overlay ard-slider-track-inactive\"></div>\r\n <div\r\n class=\"ard-slider-track-overlay ard-slider-track-active\"\r\n [style]=\"{\r\n left: trackOverlayLeft(),\r\n width: trackOverlayWidth()\r\n }\"\r\n ></div>\r\n @if (showValueTicks()) {\r\n <div class=\"ard-value-tick-container\">\r\n @for (tick of _tickArray(); track tick) {\r\n <div\r\n class=\"ard-value-tick\"\r\n [style]=\"{ left: tick }\"\r\n ></div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-slider-handle\"\r\n [tabindex]=\"tabIndex()\"\r\n [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 1\"\r\n (pointerdown)=\"onPointerDownOnHandle($event, 1)\"\r\n (focus)=\"onHandleFocus($event, 1)\"\r\n (blur)=\"onBlur($event)\"\r\n [style]=\"{ left: handlePositionsPercent()[0] }\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n @if (tooltipBehavior() !== 'never') {\r\n <div\r\n class=\"ard-slider-tooltip-wrapper\"\r\n [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n [style]=\"{ left: handlePositionsPercent()[0] }\"\r\n >\r\n <ng-template\r\n #defaultTooltipTemplate\r\n let-value\r\n >\r\n <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n [ngTemplateOutletContext]=\"tooltipContexts().from\"\r\n >\r\n </ng-template>\r\n </div>\r\n }\r\n <button\r\n #focusableElement\r\n type=\"button\"\r\n class=\"ard-slider-handle\"\r\n [tabindex]=\"tabIndex()\"\r\n [class.ard-grabbed]=\"isSliderHandleGrabbed() && currentHandle() === 2\"\r\n (pointerdown)=\"onPointerDownOnHandle($event, 2)\"\r\n (focus)=\"onHandleFocus($event, 2)\"\r\n (blur)=\"onBlur($event)\"\r\n [style]=\"{ left: handlePositionsPercent()[1] }\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-hitbox\"></div>\r\n </button>\r\n @if (tooltipBehavior() !== 'never') {\r\n <div\r\n class=\"ard-slider-tooltip-wrapper\"\r\n [class.ard-tooltip-always]=\"tooltipBehavior() === 'always'\"\r\n [style]=\"{ left: handlePositionsPercent()[1] }\"\r\n >\r\n <ng-template\r\n #defaultTooltipTemplate\r\n let-value\r\n >\r\n <div class=\"ard-slider-tooltip\">{{ value }}</div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"tooltipTemplate()?.template || defaultTooltipTemplate\"\r\n [ngTemplateOutletContext]=\"tooltipContexts().to\"\r\n >\r\n </ng-template>\r\n </div>\r\n }\r\n </div>\r\n @if (labelObjects().length > 0) {\r\n <div class=\"ard-slider-label-container\">\r\n @for (label of labelObjects(); track $index) {\r\n <div\r\n class=\"ard-slider-label\"\r\n [style]=\"{ left: label.positionPercent }\"\r\n >\r\n {{ label.label }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #handleThumbBase>\r\n <div class=\"ard-slider-thumb\"></div>\r\n</ng-template>\r\n", styles: ["body.ard-prevent-touch-actions,body.ard-prevent-touch-actions *{touch-action:none}ard-range-slider{display:block}.ard-range-slider-container-master{display:flex;flex-direction:column}.ard-range-slider-container-master.ard-labels-top{flex-direction:column-reverse}.ard-range-slider-container-master .ard-slider-tooltip-wrapper{position:absolute;transform:translate(-50%);pointer-events:none}.ard-range-slider-container-master.ard-tooltip-top .ard-slider-tooltip-wrapper{bottom:100%}.ard-range-slider-container-master.ard-tooltip-bottom .ard-slider-tooltip-wrapper{top:100%}.ard-range-slider-container-master .ard-slider-handle{position:absolute;left:0;transform:translate(-50%)}.ard-range-slider-container-master .ard-slider-tooltip,.ard-range-slider-container-master .ard-slider-track,.ard-range-slider-container-master .ard-value-tick-container{position:relative}.ard-range-slider-container-master .ard-value-tick{position:absolute}.ard-range-slider-container-master .ard-slider-label-container{position:relative;width:100%;height:1em}.ard-range-slider-container-master .ard-slider-label{position:absolute;line-height:1em}\n"] }]
|
|
11961
11995
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
11962
11996
|
type: Inject,
|
|
11963
11997
|
args: [ARD_SLIDER_DEFAULTS]
|