@tolle_/tolle-ui 18.2.13 → 18.2.15
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/tolle-ui.mjs
CHANGED
|
@@ -12932,6 +12932,7 @@ class CountrySelectorComponent {
|
|
|
12932
12932
|
showName = true;
|
|
12933
12933
|
onSelect = new EventEmitter();
|
|
12934
12934
|
popover;
|
|
12935
|
+
searchInput;
|
|
12935
12936
|
countryCodesService = inject(CountryCodesService);
|
|
12936
12937
|
sanitizer = inject(DomSanitizer);
|
|
12937
12938
|
cdr = inject(ChangeDetectorRef);
|
|
@@ -12958,20 +12959,20 @@ class CountrySelectorComponent {
|
|
|
12958
12959
|
'focus:ring-4',
|
|
12959
12960
|
'focus:ring-ring/30',
|
|
12960
12961
|
'focus:ring-offset-0',
|
|
12961
|
-
'focus:border-primary/80'
|
|
12962
|
+
'focus:border-primary/80',
|
|
12962
12963
|
], !(this.readonly || this.disabled) && 'hover:border-accent', this.error && [
|
|
12963
12964
|
'border-destructive',
|
|
12964
12965
|
!(this.readonly || this.disabled) && [
|
|
12965
12966
|
'focus:border-destructive/80',
|
|
12966
|
-
'focus:ring-destructive/30'
|
|
12967
|
-
]
|
|
12967
|
+
'focus:ring-destructive/30',
|
|
12968
|
+
],
|
|
12968
12969
|
], this.disabled && 'cursor-not-allowed opacity-50 border-opacity-50', this.readonly && 'cursor-default border-dashed', this.class);
|
|
12969
12970
|
}
|
|
12970
12971
|
get computedLabelClass() {
|
|
12971
|
-
return cn(
|
|
12972
|
+
return cn('text-sm font-medium text-foreground leading-none transition-opacity duration-200', this.disabled && 'opacity-50');
|
|
12972
12973
|
}
|
|
12973
12974
|
get iconClass() {
|
|
12974
|
-
return cn('ri-arrow-down-s-line text-muted-foreground ml-2 transition-transform duration-200', this.popover?.isOpen ? 'rotate-180' : '',
|
|
12975
|
+
return cn('ri-arrow-down-s-line text-muted-foreground ml-2 transition-transform duration-200', this.popover?.isOpen ? 'rotate-180' : '', this.size === 'xs' || this.size === 'sm' ? 'text-[14px]' : 'text-[18px]', (this.disabled || this.readonly) && 'opacity-30');
|
|
12975
12976
|
}
|
|
12976
12977
|
getItemClass(country) {
|
|
12977
12978
|
const isSelected = this.selectedCountry?.isoAlpha2 === country.isoAlpha2;
|
|
@@ -12995,11 +12996,16 @@ class CountrySelectorComponent {
|
|
|
12995
12996
|
}
|
|
12996
12997
|
getReturnValue(country) {
|
|
12997
12998
|
switch (this.returnValue) {
|
|
12998
|
-
case 'object':
|
|
12999
|
-
|
|
13000
|
-
case '
|
|
13001
|
-
|
|
13002
|
-
|
|
12999
|
+
case 'object':
|
|
13000
|
+
return country;
|
|
13001
|
+
case 'isoAlpha2':
|
|
13002
|
+
return country.isoAlpha2;
|
|
13003
|
+
case 'dialCode':
|
|
13004
|
+
return country.dialCode;
|
|
13005
|
+
case 'name':
|
|
13006
|
+
return country.name;
|
|
13007
|
+
default:
|
|
13008
|
+
return country.isoAlpha2;
|
|
13003
13009
|
}
|
|
13004
13010
|
}
|
|
13005
13011
|
onFocus() {
|
|
@@ -13009,6 +13015,11 @@ class CountrySelectorComponent {
|
|
|
13009
13015
|
this.isFocused = false;
|
|
13010
13016
|
this.onTouched();
|
|
13011
13017
|
}
|
|
13018
|
+
onPopoverOpen() {
|
|
13019
|
+
setTimeout(() => {
|
|
13020
|
+
this.searchInput?.nativeElement?.focus();
|
|
13021
|
+
}, 0);
|
|
13022
|
+
}
|
|
13012
13023
|
onPopoverClose() {
|
|
13013
13024
|
this.searchQuery = '';
|
|
13014
13025
|
this.filterCountries('');
|
|
@@ -13034,26 +13045,33 @@ class CountrySelectorComponent {
|
|
|
13034
13045
|
}
|
|
13035
13046
|
this.cdr.markForCheck();
|
|
13036
13047
|
}
|
|
13037
|
-
registerOnChange(fn) {
|
|
13038
|
-
|
|
13039
|
-
|
|
13048
|
+
registerOnChange(fn) {
|
|
13049
|
+
this.onChange = fn;
|
|
13050
|
+
}
|
|
13051
|
+
registerOnTouched(fn) {
|
|
13052
|
+
this.onTouched = fn;
|
|
13053
|
+
}
|
|
13054
|
+
setDisabledState(isDisabled) {
|
|
13055
|
+
this.disabled = isDisabled;
|
|
13056
|
+
}
|
|
13040
13057
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CountrySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13041
13058
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CountrySelectorComponent, isStandalone: true, selector: "tolle-country-selector", inputs: { id: "id", label: "label", hint: "hint", errorMessage: "errorMessage", error: "error", hideHintOnFocus: "hideHintOnFocus", placeholder: "placeholder", class: "class", disabled: "disabled", readonly: "readonly", size: "size", defaultCountryCode: "defaultCountryCode", returnValue: "returnValue", showName: "showName" }, outputs: { onSelect: "onSelect" }, providers: [
|
|
13042
13059
|
{
|
|
13043
13060
|
provide: NG_VALUE_ACCESSOR,
|
|
13044
13061
|
useExisting: forwardRef(() => CountrySelectorComponent),
|
|
13045
|
-
multi: true
|
|
13046
|
-
}
|
|
13047
|
-
], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: `
|
|
13048
|
-
<div class="flex flex-col gap-1.5
|
|
13049
|
-
<label
|
|
13050
|
-
*ngIf="label"
|
|
13051
|
-
[for]="id"
|
|
13052
|
-
[class]="computedLabelClass">
|
|
13062
|
+
multi: true,
|
|
13063
|
+
},
|
|
13064
|
+
], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: `
|
|
13065
|
+
<div class="flex w-full flex-col gap-1.5">
|
|
13066
|
+
<label *ngIf="label" [for]="id" [class]="computedLabelClass">
|
|
13053
13067
|
{{ label }}
|
|
13054
13068
|
</label>
|
|
13055
13069
|
|
|
13056
|
-
<tolle-popover
|
|
13070
|
+
<tolle-popover
|
|
13071
|
+
#popover
|
|
13072
|
+
[placement]="'bottom-start'"
|
|
13073
|
+
(onOpen)="onPopoverOpen()"
|
|
13074
|
+
(onClose)="onPopoverClose()">
|
|
13057
13075
|
<div trigger class="w-full">
|
|
13058
13076
|
<button
|
|
13059
13077
|
type="button"
|
|
@@ -13063,19 +13081,17 @@ class CountrySelectorComponent {
|
|
|
13063
13081
|
(blur)="onBlur()"
|
|
13064
13082
|
(focus)="onFocus()"
|
|
13065
13083
|
[attr.aria-invalid]="error"
|
|
13066
|
-
[attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
|
|
13067
|
-
>
|
|
13084
|
+
[attr.aria-describedby]="error && errorMessage ? id + '-error' : null">
|
|
13068
13085
|
<div class="flex items-center gap-2 truncate">
|
|
13069
13086
|
<img
|
|
13070
13087
|
*ngIf="selectedCountry"
|
|
13071
13088
|
[src]="getFlagUrl(selectedCountry.flag)"
|
|
13072
|
-
class="h-4 w-6 rounded-sm border border-border object-cover
|
|
13073
|
-
[alt]="selectedCountry.name"
|
|
13074
|
-
/>
|
|
13089
|
+
class="h-4 w-6 flex-shrink-0 rounded-sm border border-border object-cover"
|
|
13090
|
+
[alt]="selectedCountry.name" />
|
|
13075
13091
|
<span *ngIf="selectedCountry && showName" class="truncate font-medium">
|
|
13076
13092
|
{{ selectedCountry.name }}
|
|
13077
13093
|
</span>
|
|
13078
|
-
<span *ngIf="!selectedCountry" class="text-muted-foreground
|
|
13094
|
+
<span *ngIf="!selectedCountry" class="truncate text-muted-foreground">
|
|
13079
13095
|
{{ placeholder }}
|
|
13080
13096
|
</span>
|
|
13081
13097
|
</div>
|
|
@@ -13083,16 +13099,17 @@ class CountrySelectorComponent {
|
|
|
13083
13099
|
</button>
|
|
13084
13100
|
</div>
|
|
13085
13101
|
|
|
13086
|
-
<div
|
|
13087
|
-
|
|
13102
|
+
<div
|
|
13103
|
+
class="flex min-w-[300px] max-w-[400px] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md"
|
|
13104
|
+
(mousedown)="$event.stopPropagation()">
|
|
13105
|
+
<div class="sticky top-0 z-10 border-b border-border bg-popover p-2 shadow-sm">
|
|
13088
13106
|
<tolle-input
|
|
13089
13107
|
size="sm"
|
|
13090
13108
|
placeholder="Search country..."
|
|
13091
13109
|
[(ngModel)]="searchQuery"
|
|
13092
13110
|
(ngModelChange)="filterCountries($event)"
|
|
13093
13111
|
class="w-full"
|
|
13094
|
-
#searchInput
|
|
13095
|
-
>
|
|
13112
|
+
#searchInput>
|
|
13096
13113
|
<i prefix class="ri-search-line"></i>
|
|
13097
13114
|
</tolle-input>
|
|
13098
13115
|
</div>
|
|
@@ -13101,20 +13118,22 @@ class CountrySelectorComponent {
|
|
|
13101
13118
|
<div
|
|
13102
13119
|
*ngFor="let country of shadowCountries"
|
|
13103
13120
|
(click)="selectCountry(country)"
|
|
13104
|
-
[class]="getItemClass(country)"
|
|
13105
|
-
|
|
13106
|
-
<div class="flex items-center gap-3 w-full">
|
|
13121
|
+
[class]="getItemClass(country)">
|
|
13122
|
+
<div class="flex w-full items-center gap-3">
|
|
13107
13123
|
<img
|
|
13108
13124
|
[src]="getFlagUrl(country.flag)"
|
|
13109
|
-
class="h-4 w-6 rounded-sm border border-border object-cover
|
|
13110
|
-
[alt]="country.name"
|
|
13111
|
-
|
|
13112
|
-
<span class="text-sm flex-1 truncate">{{ country.name }}</span>
|
|
13125
|
+
class="h-4 w-6 flex-shrink-0 rounded-sm border border-border object-cover"
|
|
13126
|
+
[alt]="country.name" />
|
|
13127
|
+
<span class="flex-1 truncate text-sm">{{ country.name }}</span>
|
|
13113
13128
|
<span class="text-xs text-muted-foreground">{{ country.dialCode }}</span>
|
|
13114
|
-
<i
|
|
13129
|
+
<i
|
|
13130
|
+
*ngIf="selectedCountry?.isoAlpha2 === country.isoAlpha2"
|
|
13131
|
+
class="ri-check-line text-primary"></i>
|
|
13115
13132
|
</div>
|
|
13116
13133
|
</div>
|
|
13117
|
-
<div
|
|
13134
|
+
<div
|
|
13135
|
+
*ngIf="shadowCountries.length === 0"
|
|
13136
|
+
class="py-6 text-center text-sm text-muted-foreground">
|
|
13118
13137
|
No countries found.
|
|
13119
13138
|
</div>
|
|
13120
13139
|
</div>
|
|
@@ -13124,16 +13143,14 @@ class CountrySelectorComponent {
|
|
|
13124
13143
|
<ng-container *ngIf="!disabled">
|
|
13125
13144
|
<p
|
|
13126
13145
|
*ngIf="hint && !error"
|
|
13127
|
-
class="text-xs text-muted-foreground
|
|
13128
|
-
[class.opacity-0]="isFocused && hideHintOnFocus"
|
|
13129
|
-
>
|
|
13146
|
+
class="px-1 text-xs text-muted-foreground transition-opacity duration-200"
|
|
13147
|
+
[class.opacity-0]="isFocused && hideHintOnFocus">
|
|
13130
13148
|
{{ hint }}
|
|
13131
13149
|
</p>
|
|
13132
13150
|
<p
|
|
13133
13151
|
*ngIf="error && errorMessage"
|
|
13134
13152
|
[id]="id + '-error'"
|
|
13135
|
-
class="
|
|
13136
|
-
>
|
|
13153
|
+
class="px-1 text-xs font-medium text-destructive">
|
|
13137
13154
|
{{ errorMessage }}
|
|
13138
13155
|
</p>
|
|
13139
13156
|
</ng-container>
|
|
@@ -13150,19 +13167,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
13150
13167
|
{
|
|
13151
13168
|
provide: NG_VALUE_ACCESSOR,
|
|
13152
13169
|
useExisting: forwardRef(() => CountrySelectorComponent),
|
|
13153
|
-
multi: true
|
|
13154
|
-
}
|
|
13170
|
+
multi: true,
|
|
13171
|
+
},
|
|
13155
13172
|
],
|
|
13156
13173
|
template: `
|
|
13157
|
-
<div class="flex flex-col gap-1.5
|
|
13158
|
-
<label
|
|
13159
|
-
*ngIf="label"
|
|
13160
|
-
[for]="id"
|
|
13161
|
-
[class]="computedLabelClass">
|
|
13174
|
+
<div class="flex w-full flex-col gap-1.5">
|
|
13175
|
+
<label *ngIf="label" [for]="id" [class]="computedLabelClass">
|
|
13162
13176
|
{{ label }}
|
|
13163
13177
|
</label>
|
|
13164
13178
|
|
|
13165
|
-
<tolle-popover
|
|
13179
|
+
<tolle-popover
|
|
13180
|
+
#popover
|
|
13181
|
+
[placement]="'bottom-start'"
|
|
13182
|
+
(onOpen)="onPopoverOpen()"
|
|
13183
|
+
(onClose)="onPopoverClose()">
|
|
13166
13184
|
<div trigger class="w-full">
|
|
13167
13185
|
<button
|
|
13168
13186
|
type="button"
|
|
@@ -13172,19 +13190,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
13172
13190
|
(blur)="onBlur()"
|
|
13173
13191
|
(focus)="onFocus()"
|
|
13174
13192
|
[attr.aria-invalid]="error"
|
|
13175
|
-
[attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
|
|
13176
|
-
>
|
|
13193
|
+
[attr.aria-describedby]="error && errorMessage ? id + '-error' : null">
|
|
13177
13194
|
<div class="flex items-center gap-2 truncate">
|
|
13178
13195
|
<img
|
|
13179
13196
|
*ngIf="selectedCountry"
|
|
13180
13197
|
[src]="getFlagUrl(selectedCountry.flag)"
|
|
13181
|
-
class="h-4 w-6 rounded-sm border border-border object-cover
|
|
13182
|
-
[alt]="selectedCountry.name"
|
|
13183
|
-
/>
|
|
13198
|
+
class="h-4 w-6 flex-shrink-0 rounded-sm border border-border object-cover"
|
|
13199
|
+
[alt]="selectedCountry.name" />
|
|
13184
13200
|
<span *ngIf="selectedCountry && showName" class="truncate font-medium">
|
|
13185
13201
|
{{ selectedCountry.name }}
|
|
13186
13202
|
</span>
|
|
13187
|
-
<span *ngIf="!selectedCountry" class="text-muted-foreground
|
|
13203
|
+
<span *ngIf="!selectedCountry" class="truncate text-muted-foreground">
|
|
13188
13204
|
{{ placeholder }}
|
|
13189
13205
|
</span>
|
|
13190
13206
|
</div>
|
|
@@ -13192,16 +13208,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
13192
13208
|
</button>
|
|
13193
13209
|
</div>
|
|
13194
13210
|
|
|
13195
|
-
<div
|
|
13196
|
-
|
|
13211
|
+
<div
|
|
13212
|
+
class="flex min-w-[300px] max-w-[400px] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md"
|
|
13213
|
+
(mousedown)="$event.stopPropagation()">
|
|
13214
|
+
<div class="sticky top-0 z-10 border-b border-border bg-popover p-2 shadow-sm">
|
|
13197
13215
|
<tolle-input
|
|
13198
13216
|
size="sm"
|
|
13199
13217
|
placeholder="Search country..."
|
|
13200
13218
|
[(ngModel)]="searchQuery"
|
|
13201
13219
|
(ngModelChange)="filterCountries($event)"
|
|
13202
13220
|
class="w-full"
|
|
13203
|
-
#searchInput
|
|
13204
|
-
>
|
|
13221
|
+
#searchInput>
|
|
13205
13222
|
<i prefix class="ri-search-line"></i>
|
|
13206
13223
|
</tolle-input>
|
|
13207
13224
|
</div>
|
|
@@ -13210,20 +13227,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
13210
13227
|
<div
|
|
13211
13228
|
*ngFor="let country of shadowCountries"
|
|
13212
13229
|
(click)="selectCountry(country)"
|
|
13213
|
-
[class]="getItemClass(country)"
|
|
13214
|
-
|
|
13215
|
-
<div class="flex items-center gap-3 w-full">
|
|
13230
|
+
[class]="getItemClass(country)">
|
|
13231
|
+
<div class="flex w-full items-center gap-3">
|
|
13216
13232
|
<img
|
|
13217
13233
|
[src]="getFlagUrl(country.flag)"
|
|
13218
|
-
class="h-4 w-6 rounded-sm border border-border object-cover
|
|
13219
|
-
[alt]="country.name"
|
|
13220
|
-
|
|
13221
|
-
<span class="text-sm flex-1 truncate">{{ country.name }}</span>
|
|
13234
|
+
class="h-4 w-6 flex-shrink-0 rounded-sm border border-border object-cover"
|
|
13235
|
+
[alt]="country.name" />
|
|
13236
|
+
<span class="flex-1 truncate text-sm">{{ country.name }}</span>
|
|
13222
13237
|
<span class="text-xs text-muted-foreground">{{ country.dialCode }}</span>
|
|
13223
|
-
<i
|
|
13238
|
+
<i
|
|
13239
|
+
*ngIf="selectedCountry?.isoAlpha2 === country.isoAlpha2"
|
|
13240
|
+
class="ri-check-line text-primary"></i>
|
|
13224
13241
|
</div>
|
|
13225
13242
|
</div>
|
|
13226
|
-
<div
|
|
13243
|
+
<div
|
|
13244
|
+
*ngIf="shadowCountries.length === 0"
|
|
13245
|
+
class="py-6 text-center text-sm text-muted-foreground">
|
|
13227
13246
|
No countries found.
|
|
13228
13247
|
</div>
|
|
13229
13248
|
</div>
|
|
@@ -13233,21 +13252,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
13233
13252
|
<ng-container *ngIf="!disabled">
|
|
13234
13253
|
<p
|
|
13235
13254
|
*ngIf="hint && !error"
|
|
13236
|
-
class="text-xs text-muted-foreground
|
|
13237
|
-
[class.opacity-0]="isFocused && hideHintOnFocus"
|
|
13238
|
-
>
|
|
13255
|
+
class="px-1 text-xs text-muted-foreground transition-opacity duration-200"
|
|
13256
|
+
[class.opacity-0]="isFocused && hideHintOnFocus">
|
|
13239
13257
|
{{ hint }}
|
|
13240
13258
|
</p>
|
|
13241
13259
|
<p
|
|
13242
13260
|
*ngIf="error && errorMessage"
|
|
13243
13261
|
[id]="id + '-error'"
|
|
13244
|
-
class="
|
|
13245
|
-
>
|
|
13262
|
+
class="px-1 text-xs font-medium text-destructive">
|
|
13246
13263
|
{{ errorMessage }}
|
|
13247
13264
|
</p>
|
|
13248
13265
|
</ng-container>
|
|
13249
13266
|
</div>
|
|
13250
|
-
|
|
13267
|
+
`,
|
|
13251
13268
|
}]
|
|
13252
13269
|
}], propDecorators: { id: [{
|
|
13253
13270
|
type: Input
|
|
@@ -13282,6 +13299,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
13282
13299
|
}], popover: [{
|
|
13283
13300
|
type: ViewChild,
|
|
13284
13301
|
args: ['popover']
|
|
13302
|
+
}], searchInput: [{
|
|
13303
|
+
type: ViewChild,
|
|
13304
|
+
args: ['searchInput']
|
|
13285
13305
|
}] } });
|
|
13286
13306
|
|
|
13287
13307
|
class PhoneNumberInputComponent {
|