@tolle_/tolle-ui 18.2.13 → 18.2.14
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,16 @@ 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
|
+
<div class="sticky top-0 z-10 border-b border-border bg-popover p-2 shadow-sm">
|
|
13088
13105
|
<tolle-input
|
|
13089
13106
|
size="sm"
|
|
13090
13107
|
placeholder="Search country..."
|
|
13091
13108
|
[(ngModel)]="searchQuery"
|
|
13092
13109
|
(ngModelChange)="filterCountries($event)"
|
|
13093
13110
|
class="w-full"
|
|
13094
|
-
#searchInput
|
|
13095
|
-
>
|
|
13111
|
+
#searchInput>
|
|
13096
13112
|
<i prefix class="ri-search-line"></i>
|
|
13097
13113
|
</tolle-input>
|
|
13098
13114
|
</div>
|
|
@@ -13101,20 +13117,22 @@ class CountrySelectorComponent {
|
|
|
13101
13117
|
<div
|
|
13102
13118
|
*ngFor="let country of shadowCountries"
|
|
13103
13119
|
(click)="selectCountry(country)"
|
|
13104
|
-
[class]="getItemClass(country)"
|
|
13105
|
-
|
|
13106
|
-
<div class="flex items-center gap-3 w-full">
|
|
13120
|
+
[class]="getItemClass(country)">
|
|
13121
|
+
<div class="flex w-full items-center gap-3">
|
|
13107
13122
|
<img
|
|
13108
13123
|
[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>
|
|
13124
|
+
class="h-4 w-6 flex-shrink-0 rounded-sm border border-border object-cover"
|
|
13125
|
+
[alt]="country.name" />
|
|
13126
|
+
<span class="flex-1 truncate text-sm">{{ country.name }}</span>
|
|
13113
13127
|
<span class="text-xs text-muted-foreground">{{ country.dialCode }}</span>
|
|
13114
|
-
<i
|
|
13128
|
+
<i
|
|
13129
|
+
*ngIf="selectedCountry?.isoAlpha2 === country.isoAlpha2"
|
|
13130
|
+
class="ri-check-line text-primary"></i>
|
|
13115
13131
|
</div>
|
|
13116
13132
|
</div>
|
|
13117
|
-
<div
|
|
13133
|
+
<div
|
|
13134
|
+
*ngIf="shadowCountries.length === 0"
|
|
13135
|
+
class="py-6 text-center text-sm text-muted-foreground">
|
|
13118
13136
|
No countries found.
|
|
13119
13137
|
</div>
|
|
13120
13138
|
</div>
|
|
@@ -13124,16 +13142,14 @@ class CountrySelectorComponent {
|
|
|
13124
13142
|
<ng-container *ngIf="!disabled">
|
|
13125
13143
|
<p
|
|
13126
13144
|
*ngIf="hint && !error"
|
|
13127
|
-
class="text-xs text-muted-foreground
|
|
13128
|
-
[class.opacity-0]="isFocused && hideHintOnFocus"
|
|
13129
|
-
>
|
|
13145
|
+
class="px-1 text-xs text-muted-foreground transition-opacity duration-200"
|
|
13146
|
+
[class.opacity-0]="isFocused && hideHintOnFocus">
|
|
13130
13147
|
{{ hint }}
|
|
13131
13148
|
</p>
|
|
13132
13149
|
<p
|
|
13133
13150
|
*ngIf="error && errorMessage"
|
|
13134
13151
|
[id]="id + '-error'"
|
|
13135
|
-
class="
|
|
13136
|
-
>
|
|
13152
|
+
class="px-1 text-xs font-medium text-destructive">
|
|
13137
13153
|
{{ errorMessage }}
|
|
13138
13154
|
</p>
|
|
13139
13155
|
</ng-container>
|
|
@@ -13150,19 +13166,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
13150
13166
|
{
|
|
13151
13167
|
provide: NG_VALUE_ACCESSOR,
|
|
13152
13168
|
useExisting: forwardRef(() => CountrySelectorComponent),
|
|
13153
|
-
multi: true
|
|
13154
|
-
}
|
|
13169
|
+
multi: true,
|
|
13170
|
+
},
|
|
13155
13171
|
],
|
|
13156
13172
|
template: `
|
|
13157
|
-
<div class="flex flex-col gap-1.5
|
|
13158
|
-
<label
|
|
13159
|
-
*ngIf="label"
|
|
13160
|
-
[for]="id"
|
|
13161
|
-
[class]="computedLabelClass">
|
|
13173
|
+
<div class="flex w-full flex-col gap-1.5">
|
|
13174
|
+
<label *ngIf="label" [for]="id" [class]="computedLabelClass">
|
|
13162
13175
|
{{ label }}
|
|
13163
13176
|
</label>
|
|
13164
13177
|
|
|
13165
|
-
<tolle-popover
|
|
13178
|
+
<tolle-popover
|
|
13179
|
+
#popover
|
|
13180
|
+
[placement]="'bottom-start'"
|
|
13181
|
+
(onOpen)="onPopoverOpen()"
|
|
13182
|
+
(onClose)="onPopoverClose()">
|
|
13166
13183
|
<div trigger class="w-full">
|
|
13167
13184
|
<button
|
|
13168
13185
|
type="button"
|
|
@@ -13172,19 +13189,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
13172
13189
|
(blur)="onBlur()"
|
|
13173
13190
|
(focus)="onFocus()"
|
|
13174
13191
|
[attr.aria-invalid]="error"
|
|
13175
|
-
[attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
|
|
13176
|
-
>
|
|
13192
|
+
[attr.aria-describedby]="error && errorMessage ? id + '-error' : null">
|
|
13177
13193
|
<div class="flex items-center gap-2 truncate">
|
|
13178
13194
|
<img
|
|
13179
13195
|
*ngIf="selectedCountry"
|
|
13180
13196
|
[src]="getFlagUrl(selectedCountry.flag)"
|
|
13181
|
-
class="h-4 w-6 rounded-sm border border-border object-cover
|
|
13182
|
-
[alt]="selectedCountry.name"
|
|
13183
|
-
/>
|
|
13197
|
+
class="h-4 w-6 flex-shrink-0 rounded-sm border border-border object-cover"
|
|
13198
|
+
[alt]="selectedCountry.name" />
|
|
13184
13199
|
<span *ngIf="selectedCountry && showName" class="truncate font-medium">
|
|
13185
13200
|
{{ selectedCountry.name }}
|
|
13186
13201
|
</span>
|
|
13187
|
-
<span *ngIf="!selectedCountry" class="text-muted-foreground
|
|
13202
|
+
<span *ngIf="!selectedCountry" class="truncate text-muted-foreground">
|
|
13188
13203
|
{{ placeholder }}
|
|
13189
13204
|
</span>
|
|
13190
13205
|
</div>
|
|
@@ -13192,16 +13207,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
13192
13207
|
</button>
|
|
13193
13208
|
</div>
|
|
13194
13209
|
|
|
13195
|
-
<div
|
|
13196
|
-
|
|
13210
|
+
<div
|
|
13211
|
+
class="flex min-w-[300px] max-w-[400px] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md">
|
|
13212
|
+
<div class="sticky top-0 z-10 border-b border-border bg-popover p-2 shadow-sm">
|
|
13197
13213
|
<tolle-input
|
|
13198
13214
|
size="sm"
|
|
13199
13215
|
placeholder="Search country..."
|
|
13200
13216
|
[(ngModel)]="searchQuery"
|
|
13201
13217
|
(ngModelChange)="filterCountries($event)"
|
|
13202
13218
|
class="w-full"
|
|
13203
|
-
#searchInput
|
|
13204
|
-
>
|
|
13219
|
+
#searchInput>
|
|
13205
13220
|
<i prefix class="ri-search-line"></i>
|
|
13206
13221
|
</tolle-input>
|
|
13207
13222
|
</div>
|
|
@@ -13210,20 +13225,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
13210
13225
|
<div
|
|
13211
13226
|
*ngFor="let country of shadowCountries"
|
|
13212
13227
|
(click)="selectCountry(country)"
|
|
13213
|
-
[class]="getItemClass(country)"
|
|
13214
|
-
|
|
13215
|
-
<div class="flex items-center gap-3 w-full">
|
|
13228
|
+
[class]="getItemClass(country)">
|
|
13229
|
+
<div class="flex w-full items-center gap-3">
|
|
13216
13230
|
<img
|
|
13217
13231
|
[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>
|
|
13232
|
+
class="h-4 w-6 flex-shrink-0 rounded-sm border border-border object-cover"
|
|
13233
|
+
[alt]="country.name" />
|
|
13234
|
+
<span class="flex-1 truncate text-sm">{{ country.name }}</span>
|
|
13222
13235
|
<span class="text-xs text-muted-foreground">{{ country.dialCode }}</span>
|
|
13223
|
-
<i
|
|
13236
|
+
<i
|
|
13237
|
+
*ngIf="selectedCountry?.isoAlpha2 === country.isoAlpha2"
|
|
13238
|
+
class="ri-check-line text-primary"></i>
|
|
13224
13239
|
</div>
|
|
13225
13240
|
</div>
|
|
13226
|
-
<div
|
|
13241
|
+
<div
|
|
13242
|
+
*ngIf="shadowCountries.length === 0"
|
|
13243
|
+
class="py-6 text-center text-sm text-muted-foreground">
|
|
13227
13244
|
No countries found.
|
|
13228
13245
|
</div>
|
|
13229
13246
|
</div>
|
|
@@ -13233,21 +13250,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
13233
13250
|
<ng-container *ngIf="!disabled">
|
|
13234
13251
|
<p
|
|
13235
13252
|
*ngIf="hint && !error"
|
|
13236
|
-
class="text-xs text-muted-foreground
|
|
13237
|
-
[class.opacity-0]="isFocused && hideHintOnFocus"
|
|
13238
|
-
>
|
|
13253
|
+
class="px-1 text-xs text-muted-foreground transition-opacity duration-200"
|
|
13254
|
+
[class.opacity-0]="isFocused && hideHintOnFocus">
|
|
13239
13255
|
{{ hint }}
|
|
13240
13256
|
</p>
|
|
13241
13257
|
<p
|
|
13242
13258
|
*ngIf="error && errorMessage"
|
|
13243
13259
|
[id]="id + '-error'"
|
|
13244
|
-
class="
|
|
13245
|
-
>
|
|
13260
|
+
class="px-1 text-xs font-medium text-destructive">
|
|
13246
13261
|
{{ errorMessage }}
|
|
13247
13262
|
</p>
|
|
13248
13263
|
</ng-container>
|
|
13249
13264
|
</div>
|
|
13250
|
-
|
|
13265
|
+
`,
|
|
13251
13266
|
}]
|
|
13252
13267
|
}], propDecorators: { id: [{
|
|
13253
13268
|
type: Input
|
|
@@ -13282,6 +13297,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
13282
13297
|
}], popover: [{
|
|
13283
13298
|
type: ViewChild,
|
|
13284
13299
|
args: ['popover']
|
|
13300
|
+
}], searchInput: [{
|
|
13301
|
+
type: ViewChild,
|
|
13302
|
+
args: ['searchInput']
|
|
13285
13303
|
}] } });
|
|
13286
13304
|
|
|
13287
13305
|
class PhoneNumberInputComponent {
|