@taiga-ui/experimental 4.87.0 → 4.89.0
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/components/input-phone-international/input-phone-international.component.mjs
CHANGED
|
@@ -136,7 +136,7 @@ class TuiInputPhoneInternational extends TuiControl {
|
|
|
136
136
|
tuiAsControl(TuiInputPhoneInternational),
|
|
137
137
|
tuiFallbackValueProvider(''),
|
|
138
138
|
tuiAutoFocusOptionsProvider({ preventScroll: true }),
|
|
139
|
-
], viewQueries: [{ propertyName: "list", predicate: TuiOptionNew, descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i1.MaskitoDirective }, { directive: i2.TuiWithTextfield }], ngImport: i0, template: "<ng-container *tuiTextfieldContent>\n <button\n appearance=\"textfield\"\n tabindex=\"-1\"\n tuiButton\n tuiChevron\n type=\"button\"\n class=\"t-ipi-select\"\n [attr.data-mode]=\"mode()\"\n [class.t-ipi-select_readonly]=\"readOnly()\"\n [disabled]=\"disabled()\"\n [size]=\"size()\"\n [tuiAppearanceFocus]=\"open()\"\n (pointerdown.prevent)=\"interactive() && open.set(!open())\"\n >\n <img\n class=\"t-ipi-flag\"\n [alt]=\"names()?.[code()]\"\n [class.t-ipi-flag_small]=\"size() === 's'\"\n [src]=\"code() | tuiFlag\"\n />\n </button>\n</ng-container>\n<ng-container *tuiTextfieldDropdown>\n <div\n *ngIf=\"countrySearch\"\n #element\n class=\"t-ipi-search\"\n >\n <tui-textfield\n [iconStart]=\"icons.search\"\n [tuiTextfieldSize]=\"size() === 's' ? 's' : 'm'\"\n >\n <input\n autocomplete=\"off\"\n tuiTextfield\n type=\"text\"\n [focused]=\"true\"\n [ngModel]=\"search()\"\n [ngModelOptions]=\"{standalone: true}\"\n [placeholder]=\"label()\"\n [tuiAutoFocus]=\"!!element.closest('tui-dropdown-mobile')\"\n (keydown.arrowDown)=\"list.get(0)?.nativeElement?.focus()\"\n (ngModelChange)=\"search.set($event)\"\n />\n </tui-textfield>\n </div>\n\n <tui-data-list class=\"t-ipi-options\">\n <button\n *ngFor=\"let item of filtered()\"\n new\n tuiOption\n type=\"button\"\n [tuiCell]=\"size()\"\n (click)=\"onItemClick(item.iso)\"\n >\n <img\n alt=\"\"\n class=\"t-ipi-flag\"\n [class.t-ipi-flag_small]=\"size() === 's'\"\n [src]=\"item.iso | tuiFlag\"\n />\n <span tuiTitle>{{ item.name }}</span>\n <span class=\"t-ipi-code\">{{ item.code }}</span>\n </button>\n </tui-data-list>\n</ng-container>\n", styles: ["[tuiTextfieldV=\"4.
|
|
139
|
+
], viewQueries: [{ propertyName: "list", predicate: TuiOptionNew, descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i1.MaskitoDirective }, { directive: i2.TuiWithTextfield }], ngImport: i0, template: "<ng-container *tuiTextfieldContent>\n <button\n appearance=\"textfield\"\n tabindex=\"-1\"\n tuiButton\n tuiChevron\n type=\"button\"\n class=\"t-ipi-select\"\n [attr.data-mode]=\"mode()\"\n [class.t-ipi-select_readonly]=\"readOnly()\"\n [disabled]=\"disabled()\"\n [size]=\"size()\"\n [tuiAppearanceFocus]=\"open()\"\n (pointerdown.prevent)=\"interactive() && open.set(!open())\"\n >\n <img\n class=\"t-ipi-flag\"\n [alt]=\"names()?.[code()]\"\n [class.t-ipi-flag_small]=\"size() === 's'\"\n [src]=\"code() | tuiFlag\"\n />\n </button>\n</ng-container>\n<ng-container *tuiTextfieldDropdown>\n <div\n *ngIf=\"countrySearch\"\n #element\n class=\"t-ipi-search\"\n >\n <tui-textfield\n [iconStart]=\"icons.search\"\n [tuiTextfieldSize]=\"size() === 's' ? 's' : 'm'\"\n >\n <input\n autocomplete=\"off\"\n tuiTextfield\n type=\"text\"\n [focused]=\"true\"\n [ngModel]=\"search()\"\n [ngModelOptions]=\"{standalone: true}\"\n [placeholder]=\"label()\"\n [tuiAutoFocus]=\"!!element.closest('tui-dropdown-mobile')\"\n (keydown.arrowDown)=\"list.get(0)?.nativeElement?.focus()\"\n (ngModelChange)=\"search.set($event)\"\n />\n </tui-textfield>\n </div>\n\n <tui-data-list class=\"t-ipi-options\">\n <button\n *ngFor=\"let item of filtered()\"\n new\n tuiOption\n type=\"button\"\n [tuiCell]=\"size()\"\n (click)=\"onItemClick(item.iso)\"\n >\n <img\n alt=\"\"\n class=\"t-ipi-flag\"\n [class.t-ipi-flag_small]=\"size() === 's'\"\n [src]=\"item.iso | tuiFlag\"\n />\n <span tuiTitle>{{ item.name }}</span>\n <span class=\"t-ipi-code\">{{ item.code }}</span>\n </button>\n </tui-data-list>\n</ng-container>\n", styles: ["[tuiTextfieldV=\"4.89.0\"] [tuiInputPhoneInternational][tuiInputPhoneInternational]{left:var(--t-offset);border-top-left-radius:0;border-bottom-left-radius:0;inline-size:calc(100% - var(--t-offset))}tui-root:has(tui-dropdown-mobile) [tuiTextfieldV=\"4.89.0\"] [tuiInputPhoneInternational][tuiInputPhoneInternational]{caret-color:transparent}[tuiTextfieldV=\"4.89.0\"] [tuiInputPhoneInternational][tuiInputPhoneInternational]+label{padding-inline-start:var(--t-offset)}[tuiTextfieldV=\"4.89.0\"][data-size=s]{--t-offset: 4.125rem}[tuiTextfieldV=\"4.89.0\"][data-size=s] .t-ipi-flag{margin:0 .1875rem}[tuiTextfieldV=\"4.89.0\"][data-size=m]{--t-offset: 4.875rem}[tuiTextfieldV=\"4.89.0\"][data-size=m] .t-ipi-flag{margin:0 -.1875rem}[tuiTextfieldV=\"4.89.0\"][data-size=l]{--t-offset: 5.25rem}[tuiTextfieldV=\"4.89.0\"][data-size=l] .t-ipi-flag{margin:0 -.1875rem}[tuiTextfieldV=\"4.89.0\"] .t-ipi-select{position:absolute;left:0;border-radius:inherit;border-top-right-radius:0;border-bottom-right-radius:0}[tuiTextfieldV=\"4.89.0\"] .t-ipi-select_readonly{pointer-events:none}.t-ipi-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:100%}.t-ipi-flag_small{inline-size:1.25rem;block-size:1.25rem}.t-ipi-code{color:var(--tui-text-secondary)}.t-ipi-search{position:sticky;top:0;z-index:1;background:var(--tui-background-elevation-3);padding:.375rem .375rem 0}@supports (-webkit-touch-callout: none){.t-ipi-search input:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}tui-dropdown-mobile .t-ipi-search{background:var(--tui-background-elevation-1)}tui-dropdown-mobile .t-ipi-options:not(:first-child){min-block-size:calc(100 * var(--tui-viewport-vh) - 8.75rem)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiCell, selector: "[tuiCell]:not(ng-template)", inputs: ["tuiCell", "tuiCellHeight"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i4.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i4.TuiOptionNew, selector: "button[tuiOption][new], a[tuiOption][new], label[tuiOption][new]", inputs: ["disabled"] }, { kind: "pipe", type: TuiFlagPipe, name: "tuiFlag" }, { kind: "component", type: i2.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i2.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i2.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i2.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }, { kind: "directive", type: TuiTextfieldContent, selector: "ng-template[tuiTextfieldContent]" }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
140
140
|
}
|
|
141
141
|
export { TuiInputPhoneInternational };
|
|
142
142
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputPhoneInternational, decorators: [{
|
|
@@ -166,7 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
166
166
|
'(input)': 'masked.set($event.target.value)',
|
|
167
167
|
'(click)': 'open.set(false)',
|
|
168
168
|
'(beforeinput.capture)': 'onPaste($event)',
|
|
169
|
-
}, template: "<ng-container *tuiTextfieldContent>\n <button\n appearance=\"textfield\"\n tabindex=\"-1\"\n tuiButton\n tuiChevron\n type=\"button\"\n class=\"t-ipi-select\"\n [attr.data-mode]=\"mode()\"\n [class.t-ipi-select_readonly]=\"readOnly()\"\n [disabled]=\"disabled()\"\n [size]=\"size()\"\n [tuiAppearanceFocus]=\"open()\"\n (pointerdown.prevent)=\"interactive() && open.set(!open())\"\n >\n <img\n class=\"t-ipi-flag\"\n [alt]=\"names()?.[code()]\"\n [class.t-ipi-flag_small]=\"size() === 's'\"\n [src]=\"code() | tuiFlag\"\n />\n </button>\n</ng-container>\n<ng-container *tuiTextfieldDropdown>\n <div\n *ngIf=\"countrySearch\"\n #element\n class=\"t-ipi-search\"\n >\n <tui-textfield\n [iconStart]=\"icons.search\"\n [tuiTextfieldSize]=\"size() === 's' ? 's' : 'm'\"\n >\n <input\n autocomplete=\"off\"\n tuiTextfield\n type=\"text\"\n [focused]=\"true\"\n [ngModel]=\"search()\"\n [ngModelOptions]=\"{standalone: true}\"\n [placeholder]=\"label()\"\n [tuiAutoFocus]=\"!!element.closest('tui-dropdown-mobile')\"\n (keydown.arrowDown)=\"list.get(0)?.nativeElement?.focus()\"\n (ngModelChange)=\"search.set($event)\"\n />\n </tui-textfield>\n </div>\n\n <tui-data-list class=\"t-ipi-options\">\n <button\n *ngFor=\"let item of filtered()\"\n new\n tuiOption\n type=\"button\"\n [tuiCell]=\"size()\"\n (click)=\"onItemClick(item.iso)\"\n >\n <img\n alt=\"\"\n class=\"t-ipi-flag\"\n [class.t-ipi-flag_small]=\"size() === 's'\"\n [src]=\"item.iso | tuiFlag\"\n />\n <span tuiTitle>{{ item.name }}</span>\n <span class=\"t-ipi-code\">{{ item.code }}</span>\n </button>\n </tui-data-list>\n</ng-container>\n", styles: ["[tuiTextfieldV=\"4.
|
|
169
|
+
}, template: "<ng-container *tuiTextfieldContent>\n <button\n appearance=\"textfield\"\n tabindex=\"-1\"\n tuiButton\n tuiChevron\n type=\"button\"\n class=\"t-ipi-select\"\n [attr.data-mode]=\"mode()\"\n [class.t-ipi-select_readonly]=\"readOnly()\"\n [disabled]=\"disabled()\"\n [size]=\"size()\"\n [tuiAppearanceFocus]=\"open()\"\n (pointerdown.prevent)=\"interactive() && open.set(!open())\"\n >\n <img\n class=\"t-ipi-flag\"\n [alt]=\"names()?.[code()]\"\n [class.t-ipi-flag_small]=\"size() === 's'\"\n [src]=\"code() | tuiFlag\"\n />\n </button>\n</ng-container>\n<ng-container *tuiTextfieldDropdown>\n <div\n *ngIf=\"countrySearch\"\n #element\n class=\"t-ipi-search\"\n >\n <tui-textfield\n [iconStart]=\"icons.search\"\n [tuiTextfieldSize]=\"size() === 's' ? 's' : 'm'\"\n >\n <input\n autocomplete=\"off\"\n tuiTextfield\n type=\"text\"\n [focused]=\"true\"\n [ngModel]=\"search()\"\n [ngModelOptions]=\"{standalone: true}\"\n [placeholder]=\"label()\"\n [tuiAutoFocus]=\"!!element.closest('tui-dropdown-mobile')\"\n (keydown.arrowDown)=\"list.get(0)?.nativeElement?.focus()\"\n (ngModelChange)=\"search.set($event)\"\n />\n </tui-textfield>\n </div>\n\n <tui-data-list class=\"t-ipi-options\">\n <button\n *ngFor=\"let item of filtered()\"\n new\n tuiOption\n type=\"button\"\n [tuiCell]=\"size()\"\n (click)=\"onItemClick(item.iso)\"\n >\n <img\n alt=\"\"\n class=\"t-ipi-flag\"\n [class.t-ipi-flag_small]=\"size() === 's'\"\n [src]=\"item.iso | tuiFlag\"\n />\n <span tuiTitle>{{ item.name }}</span>\n <span class=\"t-ipi-code\">{{ item.code }}</span>\n </button>\n </tui-data-list>\n</ng-container>\n", styles: ["[tuiTextfieldV=\"4.89.0\"] [tuiInputPhoneInternational][tuiInputPhoneInternational]{left:var(--t-offset);border-top-left-radius:0;border-bottom-left-radius:0;inline-size:calc(100% - var(--t-offset))}tui-root:has(tui-dropdown-mobile) [tuiTextfieldV=\"4.89.0\"] [tuiInputPhoneInternational][tuiInputPhoneInternational]{caret-color:transparent}[tuiTextfieldV=\"4.89.0\"] [tuiInputPhoneInternational][tuiInputPhoneInternational]+label{padding-inline-start:var(--t-offset)}[tuiTextfieldV=\"4.89.0\"][data-size=s]{--t-offset: 4.125rem}[tuiTextfieldV=\"4.89.0\"][data-size=s] .t-ipi-flag{margin:0 .1875rem}[tuiTextfieldV=\"4.89.0\"][data-size=m]{--t-offset: 4.875rem}[tuiTextfieldV=\"4.89.0\"][data-size=m] .t-ipi-flag{margin:0 -.1875rem}[tuiTextfieldV=\"4.89.0\"][data-size=l]{--t-offset: 5.25rem}[tuiTextfieldV=\"4.89.0\"][data-size=l] .t-ipi-flag{margin:0 -.1875rem}[tuiTextfieldV=\"4.89.0\"] .t-ipi-select{position:absolute;left:0;border-radius:inherit;border-top-right-radius:0;border-bottom-right-radius:0}[tuiTextfieldV=\"4.89.0\"] .t-ipi-select_readonly{pointer-events:none}.t-ipi-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:100%}.t-ipi-flag_small{inline-size:1.25rem;block-size:1.25rem}.t-ipi-code{color:var(--tui-text-secondary)}.t-ipi-search{position:sticky;top:0;z-index:1;background:var(--tui-background-elevation-3);padding:.375rem .375rem 0}@supports (-webkit-touch-callout: none){.t-ipi-search input:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}tui-dropdown-mobile .t-ipi-search{background:var(--tui-background-elevation-1)}tui-dropdown-mobile .t-ipi-options:not(:first-child){min-block-size:calc(100 * var(--tui-viewport-vh) - 8.75rem)}\n"] }]
|
|
170
170
|
}], propDecorators: { list: [{
|
|
171
171
|
type: ViewChildren,
|
|
172
172
|
args: [TuiOptionNew, { read: ElementRef }]
|
|
@@ -137,7 +137,7 @@ class TuiInputPhoneInternational extends TuiControl {
|
|
|
137
137
|
tuiAsControl(TuiInputPhoneInternational),
|
|
138
138
|
tuiFallbackValueProvider(''),
|
|
139
139
|
tuiAutoFocusOptionsProvider({ preventScroll: true }),
|
|
140
|
-
], viewQueries: [{ propertyName: "list", predicate: TuiOptionNew, descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i1.MaskitoDirective }, { directive: i2.TuiWithTextfield }], ngImport: i0, template: "<ng-container *tuiTextfieldContent>\n <button\n appearance=\"textfield\"\n tabindex=\"-1\"\n tuiButton\n tuiChevron\n type=\"button\"\n class=\"t-ipi-select\"\n [attr.data-mode]=\"mode()\"\n [class.t-ipi-select_readonly]=\"readOnly()\"\n [disabled]=\"disabled()\"\n [size]=\"size()\"\n [tuiAppearanceFocus]=\"open()\"\n (pointerdown.prevent)=\"interactive() && open.set(!open())\"\n >\n <img\n class=\"t-ipi-flag\"\n [alt]=\"names()?.[code()]\"\n [class.t-ipi-flag_small]=\"size() === 's'\"\n [src]=\"code() | tuiFlag\"\n />\n </button>\n</ng-container>\n<ng-container *tuiTextfieldDropdown>\n <div\n *ngIf=\"countrySearch\"\n #element\n class=\"t-ipi-search\"\n >\n <tui-textfield\n [iconStart]=\"icons.search\"\n [tuiTextfieldSize]=\"size() === 's' ? 's' : 'm'\"\n >\n <input\n autocomplete=\"off\"\n tuiTextfield\n type=\"text\"\n [focused]=\"true\"\n [ngModel]=\"search()\"\n [ngModelOptions]=\"{standalone: true}\"\n [placeholder]=\"label()\"\n [tuiAutoFocus]=\"!!element.closest('tui-dropdown-mobile')\"\n (keydown.arrowDown)=\"list.get(0)?.nativeElement?.focus()\"\n (ngModelChange)=\"search.set($event)\"\n />\n </tui-textfield>\n </div>\n\n <tui-data-list class=\"t-ipi-options\">\n <button\n *ngFor=\"let item of filtered()\"\n new\n tuiOption\n type=\"button\"\n [tuiCell]=\"size()\"\n (click)=\"onItemClick(item.iso)\"\n >\n <img\n alt=\"\"\n class=\"t-ipi-flag\"\n [class.t-ipi-flag_small]=\"size() === 's'\"\n [src]=\"item.iso | tuiFlag\"\n />\n <span tuiTitle>{{ item.name }}</span>\n <span class=\"t-ipi-code\">{{ item.code }}</span>\n </button>\n </tui-data-list>\n</ng-container>\n", styles: ["[tuiTextfieldV=\"4.
|
|
140
|
+
], viewQueries: [{ propertyName: "list", predicate: TuiOptionNew, descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i1.MaskitoDirective }, { directive: i2.TuiWithTextfield }], ngImport: i0, template: "<ng-container *tuiTextfieldContent>\n <button\n appearance=\"textfield\"\n tabindex=\"-1\"\n tuiButton\n tuiChevron\n type=\"button\"\n class=\"t-ipi-select\"\n [attr.data-mode]=\"mode()\"\n [class.t-ipi-select_readonly]=\"readOnly()\"\n [disabled]=\"disabled()\"\n [size]=\"size()\"\n [tuiAppearanceFocus]=\"open()\"\n (pointerdown.prevent)=\"interactive() && open.set(!open())\"\n >\n <img\n class=\"t-ipi-flag\"\n [alt]=\"names()?.[code()]\"\n [class.t-ipi-flag_small]=\"size() === 's'\"\n [src]=\"code() | tuiFlag\"\n />\n </button>\n</ng-container>\n<ng-container *tuiTextfieldDropdown>\n <div\n *ngIf=\"countrySearch\"\n #element\n class=\"t-ipi-search\"\n >\n <tui-textfield\n [iconStart]=\"icons.search\"\n [tuiTextfieldSize]=\"size() === 's' ? 's' : 'm'\"\n >\n <input\n autocomplete=\"off\"\n tuiTextfield\n type=\"text\"\n [focused]=\"true\"\n [ngModel]=\"search()\"\n [ngModelOptions]=\"{standalone: true}\"\n [placeholder]=\"label()\"\n [tuiAutoFocus]=\"!!element.closest('tui-dropdown-mobile')\"\n (keydown.arrowDown)=\"list.get(0)?.nativeElement?.focus()\"\n (ngModelChange)=\"search.set($event)\"\n />\n </tui-textfield>\n </div>\n\n <tui-data-list class=\"t-ipi-options\">\n <button\n *ngFor=\"let item of filtered()\"\n new\n tuiOption\n type=\"button\"\n [tuiCell]=\"size()\"\n (click)=\"onItemClick(item.iso)\"\n >\n <img\n alt=\"\"\n class=\"t-ipi-flag\"\n [class.t-ipi-flag_small]=\"size() === 's'\"\n [src]=\"item.iso | tuiFlag\"\n />\n <span tuiTitle>{{ item.name }}</span>\n <span class=\"t-ipi-code\">{{ item.code }}</span>\n </button>\n </tui-data-list>\n</ng-container>\n", styles: ["[tuiTextfieldV=\"4.89.0\"] [tuiInputPhoneInternational][tuiInputPhoneInternational]{left:var(--t-offset);border-top-left-radius:0;border-bottom-left-radius:0;inline-size:calc(100% - var(--t-offset))}tui-root:has(tui-dropdown-mobile) [tuiTextfieldV=\"4.89.0\"] [tuiInputPhoneInternational][tuiInputPhoneInternational]{caret-color:transparent}[tuiTextfieldV=\"4.89.0\"] [tuiInputPhoneInternational][tuiInputPhoneInternational]+label{padding-inline-start:var(--t-offset)}[tuiTextfieldV=\"4.89.0\"][data-size=s]{--t-offset: 4.125rem}[tuiTextfieldV=\"4.89.0\"][data-size=s] .t-ipi-flag{margin:0 .1875rem}[tuiTextfieldV=\"4.89.0\"][data-size=m]{--t-offset: 4.875rem}[tuiTextfieldV=\"4.89.0\"][data-size=m] .t-ipi-flag{margin:0 -.1875rem}[tuiTextfieldV=\"4.89.0\"][data-size=l]{--t-offset: 5.25rem}[tuiTextfieldV=\"4.89.0\"][data-size=l] .t-ipi-flag{margin:0 -.1875rem}[tuiTextfieldV=\"4.89.0\"] .t-ipi-select{position:absolute;left:0;border-radius:inherit;border-top-right-radius:0;border-bottom-right-radius:0}[tuiTextfieldV=\"4.89.0\"] .t-ipi-select_readonly{pointer-events:none}.t-ipi-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:100%}.t-ipi-flag_small{inline-size:1.25rem;block-size:1.25rem}.t-ipi-code{color:var(--tui-text-secondary)}.t-ipi-search{position:sticky;top:0;z-index:1;background:var(--tui-background-elevation-3);padding:.375rem .375rem 0}@supports (-webkit-touch-callout: none){.t-ipi-search input:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}tui-dropdown-mobile .t-ipi-search{background:var(--tui-background-elevation-1)}tui-dropdown-mobile .t-ipi-options:not(:first-child){min-block-size:calc(100 * var(--tui-viewport-vh) - 8.75rem)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiCell, selector: "[tuiCell]:not(ng-template)", inputs: ["tuiCell", "tuiCellHeight"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i4.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i4.TuiOptionNew, selector: "button[tuiOption][new], a[tuiOption][new], label[tuiOption][new]", inputs: ["disabled"] }, { kind: "pipe", type: TuiFlagPipe, name: "tuiFlag" }, { kind: "component", type: i2.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i2.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i2.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i2.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }, { kind: "directive", type: TuiTextfieldContent, selector: "ng-template[tuiTextfieldContent]" }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
141
141
|
}
|
|
142
142
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputPhoneInternational, decorators: [{
|
|
143
143
|
type: Component,
|
|
@@ -166,7 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
166
166
|
'(input)': 'masked.set($event.target.value)',
|
|
167
167
|
'(click)': 'open.set(false)',
|
|
168
168
|
'(beforeinput.capture)': 'onPaste($event)',
|
|
169
|
-
}, template: "<ng-container *tuiTextfieldContent>\n <button\n appearance=\"textfield\"\n tabindex=\"-1\"\n tuiButton\n tuiChevron\n type=\"button\"\n class=\"t-ipi-select\"\n [attr.data-mode]=\"mode()\"\n [class.t-ipi-select_readonly]=\"readOnly()\"\n [disabled]=\"disabled()\"\n [size]=\"size()\"\n [tuiAppearanceFocus]=\"open()\"\n (pointerdown.prevent)=\"interactive() && open.set(!open())\"\n >\n <img\n class=\"t-ipi-flag\"\n [alt]=\"names()?.[code()]\"\n [class.t-ipi-flag_small]=\"size() === 's'\"\n [src]=\"code() | tuiFlag\"\n />\n </button>\n</ng-container>\n<ng-container *tuiTextfieldDropdown>\n <div\n *ngIf=\"countrySearch\"\n #element\n class=\"t-ipi-search\"\n >\n <tui-textfield\n [iconStart]=\"icons.search\"\n [tuiTextfieldSize]=\"size() === 's' ? 's' : 'm'\"\n >\n <input\n autocomplete=\"off\"\n tuiTextfield\n type=\"text\"\n [focused]=\"true\"\n [ngModel]=\"search()\"\n [ngModelOptions]=\"{standalone: true}\"\n [placeholder]=\"label()\"\n [tuiAutoFocus]=\"!!element.closest('tui-dropdown-mobile')\"\n (keydown.arrowDown)=\"list.get(0)?.nativeElement?.focus()\"\n (ngModelChange)=\"search.set($event)\"\n />\n </tui-textfield>\n </div>\n\n <tui-data-list class=\"t-ipi-options\">\n <button\n *ngFor=\"let item of filtered()\"\n new\n tuiOption\n type=\"button\"\n [tuiCell]=\"size()\"\n (click)=\"onItemClick(item.iso)\"\n >\n <img\n alt=\"\"\n class=\"t-ipi-flag\"\n [class.t-ipi-flag_small]=\"size() === 's'\"\n [src]=\"item.iso | tuiFlag\"\n />\n <span tuiTitle>{{ item.name }}</span>\n <span class=\"t-ipi-code\">{{ item.code }}</span>\n </button>\n </tui-data-list>\n</ng-container>\n", styles: ["[tuiTextfieldV=\"4.
|
|
169
|
+
}, template: "<ng-container *tuiTextfieldContent>\n <button\n appearance=\"textfield\"\n tabindex=\"-1\"\n tuiButton\n tuiChevron\n type=\"button\"\n class=\"t-ipi-select\"\n [attr.data-mode]=\"mode()\"\n [class.t-ipi-select_readonly]=\"readOnly()\"\n [disabled]=\"disabled()\"\n [size]=\"size()\"\n [tuiAppearanceFocus]=\"open()\"\n (pointerdown.prevent)=\"interactive() && open.set(!open())\"\n >\n <img\n class=\"t-ipi-flag\"\n [alt]=\"names()?.[code()]\"\n [class.t-ipi-flag_small]=\"size() === 's'\"\n [src]=\"code() | tuiFlag\"\n />\n </button>\n</ng-container>\n<ng-container *tuiTextfieldDropdown>\n <div\n *ngIf=\"countrySearch\"\n #element\n class=\"t-ipi-search\"\n >\n <tui-textfield\n [iconStart]=\"icons.search\"\n [tuiTextfieldSize]=\"size() === 's' ? 's' : 'm'\"\n >\n <input\n autocomplete=\"off\"\n tuiTextfield\n type=\"text\"\n [focused]=\"true\"\n [ngModel]=\"search()\"\n [ngModelOptions]=\"{standalone: true}\"\n [placeholder]=\"label()\"\n [tuiAutoFocus]=\"!!element.closest('tui-dropdown-mobile')\"\n (keydown.arrowDown)=\"list.get(0)?.nativeElement?.focus()\"\n (ngModelChange)=\"search.set($event)\"\n />\n </tui-textfield>\n </div>\n\n <tui-data-list class=\"t-ipi-options\">\n <button\n *ngFor=\"let item of filtered()\"\n new\n tuiOption\n type=\"button\"\n [tuiCell]=\"size()\"\n (click)=\"onItemClick(item.iso)\"\n >\n <img\n alt=\"\"\n class=\"t-ipi-flag\"\n [class.t-ipi-flag_small]=\"size() === 's'\"\n [src]=\"item.iso | tuiFlag\"\n />\n <span tuiTitle>{{ item.name }}</span>\n <span class=\"t-ipi-code\">{{ item.code }}</span>\n </button>\n </tui-data-list>\n</ng-container>\n", styles: ["[tuiTextfieldV=\"4.89.0\"] [tuiInputPhoneInternational][tuiInputPhoneInternational]{left:var(--t-offset);border-top-left-radius:0;border-bottom-left-radius:0;inline-size:calc(100% - var(--t-offset))}tui-root:has(tui-dropdown-mobile) [tuiTextfieldV=\"4.89.0\"] [tuiInputPhoneInternational][tuiInputPhoneInternational]{caret-color:transparent}[tuiTextfieldV=\"4.89.0\"] [tuiInputPhoneInternational][tuiInputPhoneInternational]+label{padding-inline-start:var(--t-offset)}[tuiTextfieldV=\"4.89.0\"][data-size=s]{--t-offset: 4.125rem}[tuiTextfieldV=\"4.89.0\"][data-size=s] .t-ipi-flag{margin:0 .1875rem}[tuiTextfieldV=\"4.89.0\"][data-size=m]{--t-offset: 4.875rem}[tuiTextfieldV=\"4.89.0\"][data-size=m] .t-ipi-flag{margin:0 -.1875rem}[tuiTextfieldV=\"4.89.0\"][data-size=l]{--t-offset: 5.25rem}[tuiTextfieldV=\"4.89.0\"][data-size=l] .t-ipi-flag{margin:0 -.1875rem}[tuiTextfieldV=\"4.89.0\"] .t-ipi-select{position:absolute;left:0;border-radius:inherit;border-top-right-radius:0;border-bottom-right-radius:0}[tuiTextfieldV=\"4.89.0\"] .t-ipi-select_readonly{pointer-events:none}.t-ipi-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:100%}.t-ipi-flag_small{inline-size:1.25rem;block-size:1.25rem}.t-ipi-code{color:var(--tui-text-secondary)}.t-ipi-search{position:sticky;top:0;z-index:1;background:var(--tui-background-elevation-3);padding:.375rem .375rem 0}@supports (-webkit-touch-callout: none){.t-ipi-search input:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}tui-dropdown-mobile .t-ipi-search{background:var(--tui-background-elevation-1)}tui-dropdown-mobile .t-ipi-options:not(:first-child){min-block-size:calc(100 * var(--tui-viewport-vh) - 8.75rem)}\n"] }]
|
|
170
170
|
}], propDecorators: { list: [{
|
|
171
171
|
type: ViewChildren,
|
|
172
172
|
args: [TuiOptionNew, { read: ElementRef }]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@taiga-ui/experimental",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.89.0",
|
|
4
4
|
"description": "A package with Taiga UI experimental components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
"peerDependencies": {
|
|
14
14
|
"@angular/common": ">=16.0.0",
|
|
15
15
|
"@angular/core": ">=16.0.0",
|
|
16
|
-
"@taiga-ui/addon-commerce": "4.
|
|
17
|
-
"@taiga-ui/cdk": "4.
|
|
18
|
-
"@taiga-ui/core": "4.
|
|
19
|
-
"@taiga-ui/kit": "4.
|
|
20
|
-
"@taiga-ui/layout": "4.
|
|
16
|
+
"@taiga-ui/addon-commerce": "4.89.0",
|
|
17
|
+
"@taiga-ui/cdk": "4.89.0",
|
|
18
|
+
"@taiga-ui/core": "4.89.0",
|
|
19
|
+
"@taiga-ui/kit": "4.89.0",
|
|
20
|
+
"@taiga-ui/layout": "4.89.0",
|
|
21
21
|
"@taiga-ui/polymorpheus": "^4.10.0",
|
|
22
22
|
"rxjs": ">=7.0.0"
|
|
23
23
|
},
|
|
@@ -45,18 +45,18 @@
|
|
|
45
45
|
"esm": "./esm2022/components/accordion/taiga-ui-experimental-components-accordion.mjs",
|
|
46
46
|
"default": "./fesm2022/taiga-ui-experimental-components-accordion.mjs"
|
|
47
47
|
},
|
|
48
|
-
"./components/expand": {
|
|
49
|
-
"types": "./components/expand/index.d.ts",
|
|
50
|
-
"esm2022": "./esm2022/components/expand/taiga-ui-experimental-components-expand.mjs",
|
|
51
|
-
"esm": "./esm2022/components/expand/taiga-ui-experimental-components-expand.mjs",
|
|
52
|
-
"default": "./fesm2022/taiga-ui-experimental-components-expand.mjs"
|
|
53
|
-
},
|
|
54
48
|
"./components/dialog": {
|
|
55
49
|
"types": "./components/dialog/index.d.ts",
|
|
56
50
|
"esm2022": "./esm2022/components/dialog/taiga-ui-experimental-components-dialog.mjs",
|
|
57
51
|
"esm": "./esm2022/components/dialog/taiga-ui-experimental-components-dialog.mjs",
|
|
58
52
|
"default": "./fesm2022/taiga-ui-experimental-components-dialog.mjs"
|
|
59
53
|
},
|
|
54
|
+
"./components/expand": {
|
|
55
|
+
"types": "./components/expand/index.d.ts",
|
|
56
|
+
"esm2022": "./esm2022/components/expand/taiga-ui-experimental-components-expand.mjs",
|
|
57
|
+
"esm": "./esm2022/components/expand/taiga-ui-experimental-components-expand.mjs",
|
|
58
|
+
"default": "./fesm2022/taiga-ui-experimental-components-expand.mjs"
|
|
59
|
+
},
|
|
60
60
|
"./components/hint": {
|
|
61
61
|
"types": "./components/hint/index.d.ts",
|
|
62
62
|
"esm2022": "./esm2022/components/hint/taiga-ui-experimental-components-hint.mjs",
|