@taiga-ui/legacy 4.21.0 → 4.22.0-canary.9ea8f29
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/color-selector/flat-picker/flat-picker.component.mjs +2 -2
- package/esm2022/components/color-selector/linear-multi-picker/linear-multi-picker.component.mjs +2 -2
- package/esm2022/components/color-selector/linear-picker/linear-picker.component.mjs +2 -2
- package/esm2022/components/input-date-range/input-date-range.component.mjs +1 -1
- package/esm2022/components/multi-select/multi-select-group/multi-select-group.component.mjs +2 -2
- package/esm2022/components/textarea/textarea.component.mjs +2 -2
- package/fesm2022/taiga-ui-legacy-components-color-selector.mjs +6 -6
- package/fesm2022/taiga-ui-legacy-components-color-selector.mjs.map +1 -1
- package/fesm2022/taiga-ui-legacy-components-input-date-range.mjs +1 -1
- package/fesm2022/taiga-ui-legacy-components-input-date-range.mjs.map +1 -1
- package/fesm2022/taiga-ui-legacy-components-multi-select.mjs +2 -2
- package/fesm2022/taiga-ui-legacy-components-multi-select.mjs.map +1 -1
- package/fesm2022/taiga-ui-legacy-components-textarea.mjs +2 -2
- package/fesm2022/taiga-ui-legacy-components-textarea.mjs.map +1 -1
- package/package.json +7 -7
- package/utils/icons-path-factory.d.ts +1 -1
|
@@ -20,12 +20,12 @@ class TuiFlatPickerComponent {
|
|
|
20
20
|
return this.value[1] * 100;
|
|
21
21
|
}
|
|
22
22
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiFlatPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiFlatPickerComponent, selector: "tui-flat-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, providers: [TuiPickerService], ngImport: i0, template: "<div\n class=\"t-circle\"\n [style.left.%]=\"left\"\n [style.top.%]=\"top\"\n></div>\n", styles: [":host{position:relative;display:block}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:-.5rem 0 0 -.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
23
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiFlatPickerComponent, selector: "tui-flat-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, providers: [TuiPickerService], ngImport: i0, template: "<div\n class=\"t-circle\"\n [style.left.%]=\"left\"\n [style.top.%]=\"top\"\n></div>\n", styles: [":host{position:relative;display:block}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:-.5rem 0 0 -.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24
24
|
}
|
|
25
25
|
export { TuiFlatPickerComponent };
|
|
26
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiFlatPickerComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
|
-
args: [{ standalone: false, selector: 'tui-flat-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], template: "<div\n class=\"t-circle\"\n [style.left.%]=\"left\"\n [style.top.%]=\"top\"\n></div>\n", styles: [":host{position:relative;display:block}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:-.5rem 0 0 -.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
|
|
28
|
+
args: [{ standalone: false, selector: 'tui-flat-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], template: "<div\n class=\"t-circle\"\n [style.left.%]=\"left\"\n [style.top.%]=\"top\"\n></div>\n", styles: [":host{position:relative;display:block}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:-.5rem 0 0 -.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
|
|
29
29
|
}], propDecorators: { value: [{
|
|
30
30
|
type: Input
|
|
31
31
|
}], valueChange: [{
|
package/esm2022/components/color-selector/linear-multi-picker/linear-multi-picker.component.mjs
CHANGED
|
@@ -43,14 +43,14 @@ class TuiLinearMultiPickerComponent {
|
|
|
43
43
|
this.valueChange.emit(value);
|
|
44
44
|
}
|
|
45
45
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLinearMultiPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
46
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiLinearMultiPickerComponent, selector: "tui-linear-multi-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange", indexChange: "indexChange" }, host: { listeners: { "document:mouseup": "onMouseUp()" } }, providers: [TuiPickerService], ngImport: i0, template: "<div\n *ngFor=\"let item of value; let index = index\"\n class=\"t-circle\"\n [style.left.%]=\"item * 100\"\n (dblclick)=\"onClick(index)\"\n (mousedown)=\"onMouseDown(index)\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
46
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiLinearMultiPickerComponent, selector: "tui-linear-multi-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange", indexChange: "indexChange" }, host: { listeners: { "document:mouseup": "onMouseUp()" } }, providers: [TuiPickerService], ngImport: i0, template: "<div\n *ngFor=\"let item of value; let index = index\"\n class=\"t-circle\"\n [style.left.%]=\"item * 100\"\n (dblclick)=\"onClick(index)\"\n (mousedown)=\"onMouseDown(index)\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
47
47
|
}
|
|
48
48
|
export { TuiLinearMultiPickerComponent };
|
|
49
49
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLinearMultiPickerComponent, decorators: [{
|
|
50
50
|
type: Component,
|
|
51
51
|
args: [{ standalone: false, selector: 'tui-linear-multi-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], host: {
|
|
52
52
|
'(document:mouseup)': 'onMouseUp()',
|
|
53
|
-
}, template: "<div\n *ngFor=\"let item of value; let index = index\"\n class=\"t-circle\"\n [style.left.%]=\"item * 100\"\n (dblclick)=\"onClick(index)\"\n (mousedown)=\"onMouseDown(index)\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
|
|
53
|
+
}, template: "<div\n *ngFor=\"let item of value; let index = index\"\n class=\"t-circle\"\n [style.left.%]=\"item * 100\"\n (dblclick)=\"onClick(index)\"\n (mousedown)=\"onMouseDown(index)\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
|
|
54
54
|
}], propDecorators: { value: [{
|
|
55
55
|
type: Input
|
|
56
56
|
}], valueChange: [{
|
|
@@ -17,12 +17,12 @@ class TuiLinearPickerComponent {
|
|
|
17
17
|
return this.value * 100;
|
|
18
18
|
}
|
|
19
19
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLinearPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiLinearPickerComponent, selector: "tui-linear-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, providers: [TuiPickerService], ngImport: i0, template: "<div\n class=\"t-circle\"\n [style.left.%]=\"left\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
20
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiLinearPickerComponent, selector: "tui-linear-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, providers: [TuiPickerService], ngImport: i0, template: "<div\n class=\"t-circle\"\n [style.left.%]=\"left\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
21
21
|
}
|
|
22
22
|
export { TuiLinearPickerComponent };
|
|
23
23
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLinearPickerComponent, decorators: [{
|
|
24
24
|
type: Component,
|
|
25
|
-
args: [{ standalone: false, selector: 'tui-linear-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], template: "<div\n class=\"t-circle\"\n [style.left.%]=\"left\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
|
|
25
|
+
args: [{ standalone: false, selector: 'tui-linear-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], template: "<div\n class=\"t-circle\"\n [style.left.%]=\"left\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
|
|
26
26
|
}], propDecorators: { value: [{
|
|
27
27
|
type: Input
|
|
28
28
|
}], valueChange: [{
|
|
@@ -206,7 +206,7 @@ class TuiInputDateRangeComponent extends AbstractTuiNullableControl {
|
|
|
206
206
|
tuiDateStreamWithTransformer(TUI_DATE_RANGE_VALUE_TRANSFORMER),
|
|
207
207
|
tuiAsDataListHost(TuiInputDateRangeComponent),
|
|
208
208
|
TUI_MOBILE_CALENDAR_PROVIDER,
|
|
209
|
-
], viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n tuiDropdownOpenMonitor\n class=\"t-hosted\"\n [tuiDropdown]=\"dropdown\"\n [tuiDropdownEnabled]=\"interactive\"\n [tuiDropdownOpen]=\"open && interactive\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n <tui-primitive-textfield\n *tuiLet=\"dateFiller$ | async as dateFiller\"\n automation-id=\"tui-input-date-range__textfield\"\n tuiValueAccessor\n class=\"t-textfield\"\n [disabled]=\"computedDisabled\"\n [invalid]=\"computedInvalid\"\n [maskito]=\"computedMask\"\n [nativeId]=\"nativeId\"\n [pseudoActive]=\"pseudoActive\"\n [pseudoFocus]=\"innerPseudoFocused\"\n [pseudoHover]=\"pseudoHover\"\n [readOnly]=\"readOnly\"\n [tuiTextfieldFiller]=\"getComputedRangeFiller(dateFiller || '')\"\n [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\n [value]=\"computedValue\"\n (valueChange)=\"onValueChange($event)\"\n >\n <ng-content />\n <ng-content\n ngProjectAs=\"input\"\n select=\"input\"\n />\n\n <div\n *ngIf=\"showValueTemplate\"\n ngProjectAs=\"tuiContent\"\n class=\"t-value\"\n >\n <ng-container *polymorpheusOutlet=\"computedContent as text; context: {$implicit: value}\">\n {{ text }}\n </ng-container>\n </div>\n </tui-primitive-textfield>\n\n <ng-template #iconContent>\n <tui-icon\n *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n automation-id=\"tui-input-date-range__icon\"\n tuiAppearance=\"icon\"\n [class.t-icon_small]=\"size === 's'\"\n [class.t-icon]=\"!computedDisabled\"\n [icon]=\"src.toString()\"\n (click)=\"onIconClick()\"\n />\n </ng-template>\n\n <ng-template #dropdown>\n <tui-calendar-range\n [defaultViewedMonth]=\"defaultViewedMonth\"\n [disabledItemHandler]=\"disabledItemHandler\"\n [items]=\"items\"\n [markerHandler]=\"markerHandler\"\n [max]=\"max\"\n [maxLength]=\"maxLength\"\n [min]=\"min\"\n [minLength]=\"minLength\"\n [value]=\"value\"\n [(item)]=\"selectedActivePeriod\"\n (valueChange)=\"onRangeChange($event)\"\n />\n </ng-template>\n</div>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}.t-icon{pointer-events:auto}.t-icon_small{border-width:.25rem}.t-value{display:flex;inline-size:100%;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i3.TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: i4.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: i5.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i5.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i6.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i6.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { kind: "component", type: i7.TuiCalendarRange, selector: "tui-calendar-range", inputs: ["disabledItemHandler", "markerHandler", "items", "min", "max", "minLength", "maxLength", "
|
|
209
|
+
], viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n tuiDropdownOpenMonitor\n class=\"t-hosted\"\n [tuiDropdown]=\"dropdown\"\n [tuiDropdownEnabled]=\"interactive\"\n [tuiDropdownOpen]=\"open && interactive\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n <tui-primitive-textfield\n *tuiLet=\"dateFiller$ | async as dateFiller\"\n automation-id=\"tui-input-date-range__textfield\"\n tuiValueAccessor\n class=\"t-textfield\"\n [disabled]=\"computedDisabled\"\n [invalid]=\"computedInvalid\"\n [maskito]=\"computedMask\"\n [nativeId]=\"nativeId\"\n [pseudoActive]=\"pseudoActive\"\n [pseudoFocus]=\"innerPseudoFocused\"\n [pseudoHover]=\"pseudoHover\"\n [readOnly]=\"readOnly\"\n [tuiTextfieldFiller]=\"getComputedRangeFiller(dateFiller || '')\"\n [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\n [value]=\"computedValue\"\n (valueChange)=\"onValueChange($event)\"\n >\n <ng-content />\n <ng-content\n ngProjectAs=\"input\"\n select=\"input\"\n />\n\n <div\n *ngIf=\"showValueTemplate\"\n ngProjectAs=\"tuiContent\"\n class=\"t-value\"\n >\n <ng-container *polymorpheusOutlet=\"computedContent as text; context: {$implicit: value}\">\n {{ text }}\n </ng-container>\n </div>\n </tui-primitive-textfield>\n\n <ng-template #iconContent>\n <tui-icon\n *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n automation-id=\"tui-input-date-range__icon\"\n tuiAppearance=\"icon\"\n [class.t-icon_small]=\"size === 's'\"\n [class.t-icon]=\"!computedDisabled\"\n [icon]=\"src.toString()\"\n (click)=\"onIconClick()\"\n />\n </ng-template>\n\n <ng-template #dropdown>\n <tui-calendar-range\n [defaultViewedMonth]=\"defaultViewedMonth\"\n [disabledItemHandler]=\"disabledItemHandler\"\n [items]=\"items\"\n [markerHandler]=\"markerHandler\"\n [max]=\"max\"\n [maxLength]=\"maxLength\"\n [min]=\"min\"\n [minLength]=\"minLength\"\n [value]=\"value\"\n [(item)]=\"selectedActivePeriod\"\n (valueChange)=\"onRangeChange($event)\"\n />\n </ng-template>\n</div>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}.t-icon{pointer-events:auto}.t-icon_small{border-width:.25rem}.t-value{display:flex;inline-size:100%;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i3.TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: i4.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: i5.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i5.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i6.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i6.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { kind: "component", type: i7.TuiCalendarRange, selector: "tui-calendar-range", inputs: ["disabledItemHandler", "markerHandler", "items", "min", "max", "minLength", "maxLength", "item", "value", "defaultViewedMonth"], outputs: ["valueChange", "itemChange"] }, { kind: "directive", type: i6.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { kind: "directive", type: i6.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "component", type: i8.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i9.TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "directive", type: i10.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i10.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
210
210
|
}
|
|
211
211
|
__decorate([
|
|
212
212
|
tuiPure
|
|
@@ -63,7 +63,7 @@ class TuiMultiSelectGroupComponent {
|
|
|
63
63
|
return items.map(({ value }) => value).filter(tuiIsPresent);
|
|
64
64
|
}
|
|
65
65
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMultiSelectGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
66
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiMultiSelectGroupComponent, selector: "tui-opt-group[tuiMultiSelectGroup]", inputs: { label: "label" }, host: { properties: { "class._label": "label" } }, queries: [{ propertyName: "options", predicate: TuiOption }], ngImport: i0, template: "<span\n *tuiLet=\"value$ | async as value\"\n class=\"t-wrapper\"\n>\n <span class=\"t-label\">{{ label }}</span>\n <button\n *ngIf=\"label && !(empty$ | async)\"\n tuiLink\n type=\"button\"\n class=\"t-button\"\n [disabled]=\"!!(disabled$ | async)\"\n (click)=\"onClick(value)\"\n >\n {{ (multiSelectTexts$ | async)?.[value ? 'none' : 'all'] }}\n </button>\n</span>\n<ng-content />\n", styles: [":host._label:before{display:none}:host:not(:first-of-type) .t-label:not(:empty){padding-top:1.25rem}:host:not(:first-of-type) .t-button{margin-top:1.25rem}.t-wrapper{display:flex;align-items:flex-start}.t-label:not(:empty){flex:1;padding:.75rem 1rem .25rem .625rem}.t-button{margin:.75rem 1rem 0 auto}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: i3.TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
66
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiMultiSelectGroupComponent, selector: "tui-opt-group[tuiMultiSelectGroup]", inputs: { label: "label" }, host: { properties: { "class._label": "label" } }, queries: [{ propertyName: "options", predicate: TuiOption }], ngImport: i0, template: "<span\n *tuiLet=\"value$ | async as value\"\n class=\"t-wrapper\"\n>\n <span class=\"t-label\">{{ label }}</span>\n <button\n *ngIf=\"label && !(empty$ | async)\"\n tuiLink\n type=\"button\"\n class=\"t-button\"\n [disabled]=\"!!(disabled$ | async)\"\n (click)=\"onClick(value)\"\n >\n {{ (multiSelectTexts$ | async)?.[value ? 'none' : 'all'] }}\n </button>\n</span>\n<ng-content />\n", styles: [":host._label:before{display:none}:host:not(:first-of-type) .t-label:not(:empty){padding-top:1.25rem}:host:not(:first-of-type) .t-button{margin-top:1.25rem}.t-wrapper{display:flex;align-items:flex-start}.t-label:not(:empty){flex:1;padding:.75rem 1rem .25rem .625rem}.t-button{margin:.75rem 1rem 0 auto;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: i3.TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
67
67
|
}
|
|
68
68
|
__decorate([
|
|
69
69
|
tuiPure
|
|
@@ -88,7 +88,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
88
88
|
type: Component,
|
|
89
89
|
args: [{ standalone: false, selector: 'tui-opt-group[tuiMultiSelectGroup]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
90
90
|
'[class._label]': 'label',
|
|
91
|
-
}, template: "<span\n *tuiLet=\"value$ | async as value\"\n class=\"t-wrapper\"\n>\n <span class=\"t-label\">{{ label }}</span>\n <button\n *ngIf=\"label && !(empty$ | async)\"\n tuiLink\n type=\"button\"\n class=\"t-button\"\n [disabled]=\"!!(disabled$ | async)\"\n (click)=\"onClick(value)\"\n >\n {{ (multiSelectTexts$ | async)?.[value ? 'none' : 'all'] }}\n </button>\n</span>\n<ng-content />\n", styles: [":host._label:before{display:none}:host:not(:first-of-type) .t-label:not(:empty){padding-top:1.25rem}:host:not(:first-of-type) .t-button{margin-top:1.25rem}.t-wrapper{display:flex;align-items:flex-start}.t-label:not(:empty){flex:1;padding:.75rem 1rem .25rem .625rem}.t-button{margin:.75rem 1rem 0 auto}\n"] }]
|
|
91
|
+
}, template: "<span\n *tuiLet=\"value$ | async as value\"\n class=\"t-wrapper\"\n>\n <span class=\"t-label\">{{ label }}</span>\n <button\n *ngIf=\"label && !(empty$ | async)\"\n tuiLink\n type=\"button\"\n class=\"t-button\"\n [disabled]=\"!!(disabled$ | async)\"\n (click)=\"onClick(value)\"\n >\n {{ (multiSelectTexts$ | async)?.[value ? 'none' : 'all'] }}\n </button>\n</span>\n<ng-content />\n", styles: [":host._label:before{display:none}:host:not(:first-of-type) .t-label:not(:empty){padding-top:1.25rem}:host:not(:first-of-type) .t-button{margin-top:1.25rem}.t-wrapper{display:flex;align-items:flex-start}.t-label:not(:empty){flex:1;padding:.75rem 1rem .25rem .625rem}.t-button{margin:.75rem 1rem 0 auto;font-weight:400}\n"] }]
|
|
92
92
|
}], propDecorators: { options: [{
|
|
93
93
|
type: ContentChildren,
|
|
94
94
|
args: [TuiOption]
|
|
@@ -133,7 +133,7 @@ class TuiTextareaComponent extends AbstractTuiControl {
|
|
|
133
133
|
tuiAsFocusableItemAccessor(TuiTextareaComponent),
|
|
134
134
|
tuiAsControl(TuiTextareaComponent),
|
|
135
135
|
TEXTFIELD_CONTROLLER_PROVIDER,
|
|
136
|
-
], queries: [{ propertyName: "textfield", first: true, predicate: TuiTextfieldComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"hintOptions?.change$ | async\" />\n<div\n automation-id=\"tui-text-area__wrapper\"\n tuiWrapper\n class=\"t-outline\"\n [appearance]=\"appearance\"\n [disabled]=\"disabled\"\n [focus]=\"computedFocused\"\n [hover]=\"pseudoHover\"\n [invalid]=\"computedInvalid\"\n [readOnly]=\"readOnly\"\n>\n <div\n *ngIf=\"hasCounter\"\n automation-id=\"tui-text-area__counter\"\n class=\"t-counter\"\n >\n {{ value.length }}/{{ maxLength }}\n </div>\n\n <label\n class=\"t-content\"\n (mousedown)=\"onMouseDown($event)\"\n >\n <div class=\"t-wrapper\">\n <div\n *ngIf=\"hasPlaceholder\"\n automation-id=\"tui-text-area__placeholder\"\n class=\"t-placeholder\"\n [class.t-placeholder_raised]=\"placeholderRaised\"\n >\n <ng-content />\n </div>\n <tui-scrollbar\n automation-id=\"tui-text-area__scrollbar\"\n class=\"t-box\"\n [style.maxHeight.px]=\"computeMaxHeight\"\n >\n <div class=\"t-input-wrapper\">\n <div class=\"t-relative\">\n <div\n aria-hidden=\"true\"\n class=\"t-pseudo-content\"\n >\n <span [textContent]=\"fittedContent || nativeFocusableElement?.placeholder\"></span>\n <span\n class=\"t-pseudo-content__extra\"\n [textContent]=\"extraContent\"\n ></span>\n <span class=\"t-caret\"></span>\n </div>\n <textarea\n #focusableElement\n automation-id=\"tui-text-area__native\"\n class=\"t-input\"\n [disabled]=\"computedDisabled\"\n [id]=\"id\"\n [ngModelOptions]=\"{standalone: true}\"\n [readOnly]=\"readOnly\"\n [tabIndex]=\"computedFocusable ? 0 : -1\"\n [(ngModel)]=\"value\"\n ></textarea>\n <ng-content select=\"textarea\" />\n </div>\n </div>\n </tui-scrollbar>\n </div>\n <div class=\"t-icons\">\n <div\n *ngIf=\"iconLeftContent\"\n class=\"t-icon t-icon_left t-textfield-icon\"\n >\n <tui-icon\n *polymorpheusOutlet=\"iconLeftContent as src; context: {$implicit: size}\"\n tuiAppearance=\"icon\"\n [icon]=\"src.toString()\"\n />\n </div>\n <ng-container *ngIf=\"hasCustomContent\">\n <tui-icon\n *polymorpheusOutlet=\"controller.customContent as src\"\n [icon]=\"src\"\n />\n </ng-container>\n <ng-container *ngIf=\"hasCleaner\">\n <tui-icon\n *polymorpheusOutlet=\"iconCleaner as src; context: {$implicit: size}\"\n tuiAppearance=\"icon\"\n class=\"t-cleaner\"\n [icon]=\"src.toString()\"\n (click.stop)=\"onValueChange('')\"\n />\n </ng-container>\n <tui-tooltip\n *ngIf=\"hasTooltip\"\n automation-id=\"tui-text-area__tooltip\"\n [content]=\"hintOptions?.content\"\n [describeId]=\"id\"\n />\n <div\n *ngIf=\"iconContent\"\n class=\"t-icon t-textfield-icon\"\n >\n <tui-icon\n *polymorpheusOutlet=\"iconContent as src; context: {$implicit: size}\"\n tuiAppearance=\"icon\"\n [icon]=\"src.toString()\"\n />\n </div>\n </div>\n </label>\n</div>\n", styles: [":host{position:relative;z-index:0;display:flex;flex-direction:column;min-block-size:var(--tui-textarea-height);border-radius:var(--tui-radius-m);color:var(--tui-text-primary)}:host :host-context(*:disabled){pointer-events:none}:host[data-size=s]{--tui-height: var(--tui-height-s);--tui-textarea-height: 4.5625rem;font:var(--tui-font-text-s)}:host[data-size=m]{--tui-height: var(--tui-height-m);--tui-textarea-height: 5.5rem;font:var(--tui-font-text-s)}:host[data-size=l]{--tui-height: var(--tui-height-l);--tui-textarea-height: 6.75rem;font:var(--tui-font-text-m)}:host[data-size=m]._has-counter{--tui-textarea-height: 6.625rem}:host[data-size=l]._has-counter{--tui-textarea-height: 7.875rem}@supports (-webkit-hyphens: none){:host .t-pseudo-content,:host .t-input{text-wrap:balance}}.t-outline{min-block-size:inherit}.t-content{display:block;margin-top:0;margin-bottom:0;min-block-size:inherit;box-sizing:border-box;overflow:hidden;cursor:text}:host._disabled .t-content{cursor:auto;opacity:var(--tui-disabled-opacity)}:host:not(._expandable) .t-content{position:absolute;top:0;left:0;bottom:1px;right:0;min-block-size:auto}:host._has-counter:not(._expandable) .t-content{bottom:1.6875rem}:host._label-outside._has-counter:not(._expandable) .t-content{bottom:1rem}.t-wrapper{position:relative;inline-size:100%;block-size:100%;min-block-size:inherit;box-sizing:border-box;padding:calc((var(--tui-height) - 1.25rem) / 2) 0}:host[data-size=l]._label-outside .t-wrapper{padding:calc((var(--tui-height) - 1.5rem) / 2) 0}:host[data-size=m]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height) - 2.25rem) / 2) 0}:host[data-size=l]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height) - 2.625rem) / 2) 0}:host-context(table)[data-size=m]._label-outside .t-wrapper{padding-bottom:.75rem}:host-context(table)[data-size=l]._label-outside .t-wrapper{padding-bottom:1rem}.t-input-wrapper{min-block-size:inherit;inline-size:100%;flex:1}.t-relative{position:relative;min-block-size:inherit}.t-box{display:flex;min-block-size:calc(100% - 1rem);inline-size:100%}:host:not(._expandable) .t-box{block-size:calc(100% - 1rem)}:host:not(._expandable)._label-outside .t-box{block-size:100%}:host._has-counter._expandable .t-box{margin-bottom:1.25rem}:host[data-size=m]:not(._label-outside) .t-box{border-block-start:1rem solid transparent}:host[data-size=l]:not(._label-outside) .t-box{border-block-start:1.25rem solid transparent}.t-pseudo-content{white-space:pre-wrap;overflow-wrap:break-word;word-break:keep-all;pointer-events:none;color:transparent;overflow:hidden;border:0 solid transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0)}:host[data-size=s] .t-pseudo-content,:host[data-size=m] .t-pseudo-content{padding:0 .75rem}:host[data-size=l] .t-pseudo-content{padding:0 1rem}.t-pseudo-content__extra{background-color:var(--tui-status-negative-pale)}.t-input{padding:0;margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;-webkit-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;inline-size:100%;block-size:100%;box-sizing:border-box;resize:none;overflow:hidden;outline:none;border-style:solid;border-color:transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0)}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{-webkit-text-fill-color:var(--tui-text-primary)!important;border-color:var(--tui-service-autofill-background);box-shadow:0 0 0 100rem var(--tui-service-autofill-background) inset!important}.t-input:not(:last-of-type){display:none}.t-input::placeholder{color:var(--tui-text-tertiary);opacity:0}:host._focused .t-input:not(:read-only)::placeholder{opacity:1}:host[data-size=s] .t-input,:host[data-size=m] .t-input{padding:0 .75rem;font:var(--tui-font-text-s)}:host[data-size=l] .t-input{padding:0 1rem;font:var(--tui-font-text-m)}@supports (-webkit-marquee-repetition: infinite) and (object-fit: fill){:host._ios .t-input{padding-left:.8125rem}}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;inline-size:100%;-webkit-user-select:none;user-select:none;font:var(--tui-font-text-s);color:var(--tui-text-secondary);pointer-events:none;will-change:transform;transform:translateY(0);position:absolute;top:calc(var(--tui-height) / 2 - .625rem);left:0;max-inline-size:100%;border:0 solid transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);box-sizing:border-box}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-text-negative)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-tertiary)}:host[data-size=l] .t-placeholder{font:var(--tui-font-text-m);line-height:1.25rem}:host[data-size=l] .t-placeholder_raised{font-size:.8156rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-primary)}:host[data-size=s] .t-placeholder{padding:0 .75rem}:host[data-size=m] .t-placeholder{padding:0 .75rem}:host[data-size=l] .t-placeholder{padding:0 1rem}:host._label-outside .t-placeholder{overflow:initial;block-size:auto;white-space:initial}.t-icons{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;justify-content:flex-end;pointer-events:none;padding:calc((var(--tui-height) - 1.5rem) / 2) 1rem}:host[data-size=m] .t-icons{padding:calc((var(--tui-height) - 1.5rem) / 2) .625rem}.t-icons>:not(:first-child){margin-inline-start:.25rem}.t-icon{position:relative;display:flex;inline-size:1.5rem;block-size:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none}.t-icon_left{margin-inline-end:auto}.t-cleaner{position:relative;display:flex;inline-size:1.5rem;block-size:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none;pointer-events:auto;border-width:.25rem}:host._readonly .t-cleaner,:host._disabled .t-cleaner{pointer-events:none}.t-caret{display:inline-block;block-size:1rem;inline-size:0}.t-counter{position:absolute;right:.75rem;bottom:.5rem;font:var(--tui-font-text-s);pointer-events:none;margin-top:auto;text-align:end;color:var(--tui-text-tertiary)}:host._readonly .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance=icon]{pointer-events:none}@media (hover: hover) and (pointer: fine){:host:not(._readonly):not(._disabled):hover .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance=icon]:after{color:var(--tui-text-secondary)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }, { kind: "component", type: i4.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId", "context"] }, { kind: "directive", type: i5.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { kind: "directive", type: i6.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: i7.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i8.TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
136
|
+
], queries: [{ propertyName: "textfield", first: true, predicate: TuiTextfieldComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"hintOptions?.change$ | async\" />\n<div\n automation-id=\"tui-text-area__wrapper\"\n tuiWrapper\n class=\"t-outline\"\n [appearance]=\"appearance\"\n [disabled]=\"disabled\"\n [focus]=\"computedFocused\"\n [hover]=\"pseudoHover\"\n [invalid]=\"computedInvalid\"\n [readOnly]=\"readOnly\"\n>\n <div\n *ngIf=\"hasCounter\"\n automation-id=\"tui-text-area__counter\"\n class=\"t-counter\"\n >\n {{ value.length }}/{{ maxLength }}\n </div>\n\n <label\n class=\"t-content\"\n (mousedown)=\"onMouseDown($event)\"\n >\n <div class=\"t-wrapper\">\n <div\n *ngIf=\"hasPlaceholder\"\n automation-id=\"tui-text-area__placeholder\"\n class=\"t-placeholder\"\n [class.t-placeholder_raised]=\"placeholderRaised\"\n >\n <ng-content />\n </div>\n <tui-scrollbar\n automation-id=\"tui-text-area__scrollbar\"\n class=\"t-box\"\n [style.maxHeight.px]=\"computeMaxHeight\"\n >\n <div class=\"t-input-wrapper\">\n <div class=\"t-relative\">\n <div\n aria-hidden=\"true\"\n class=\"t-pseudo-content\"\n >\n <span [textContent]=\"fittedContent || nativeFocusableElement?.placeholder\"></span>\n <span\n class=\"t-pseudo-content__extra\"\n [textContent]=\"extraContent\"\n ></span>\n <span class=\"t-caret\"></span>\n </div>\n <textarea\n #focusableElement\n automation-id=\"tui-text-area__native\"\n class=\"t-input\"\n [disabled]=\"computedDisabled\"\n [id]=\"id\"\n [ngModelOptions]=\"{standalone: true}\"\n [readOnly]=\"readOnly\"\n [tabIndex]=\"computedFocusable ? 0 : -1\"\n [(ngModel)]=\"value\"\n ></textarea>\n <ng-content select=\"textarea\" />\n </div>\n </div>\n </tui-scrollbar>\n </div>\n <div class=\"t-icons\">\n <div\n *ngIf=\"iconLeftContent\"\n class=\"t-icon t-icon_left t-textfield-icon\"\n >\n <tui-icon\n *polymorpheusOutlet=\"iconLeftContent as src; context: {$implicit: size}\"\n tuiAppearance=\"icon\"\n [icon]=\"src.toString()\"\n />\n </div>\n <ng-container *ngIf=\"hasCustomContent\">\n <tui-icon\n *polymorpheusOutlet=\"controller.customContent as src\"\n [icon]=\"src\"\n />\n </ng-container>\n <ng-container *ngIf=\"hasCleaner\">\n <tui-icon\n *polymorpheusOutlet=\"iconCleaner as src; context: {$implicit: size}\"\n tuiAppearance=\"icon\"\n class=\"t-cleaner\"\n [icon]=\"src.toString()\"\n (click.stop)=\"onValueChange('')\"\n />\n </ng-container>\n <tui-tooltip\n *ngIf=\"hasTooltip\"\n automation-id=\"tui-text-area__tooltip\"\n [content]=\"hintOptions?.content\"\n [describeId]=\"id\"\n />\n <div\n *ngIf=\"iconContent\"\n class=\"t-icon t-textfield-icon\"\n >\n <tui-icon\n *polymorpheusOutlet=\"iconContent as src; context: {$implicit: size}\"\n tuiAppearance=\"icon\"\n [icon]=\"src.toString()\"\n />\n </div>\n </div>\n </label>\n</div>\n", styles: [":host{position:relative;z-index:0;display:flex;flex-direction:column;min-block-size:var(--tui-textarea-height);border-radius:var(--tui-radius-m);color:var(--tui-text-primary)}:host :host-context(*:disabled){pointer-events:none}:host[data-size=s]{--tui-height: var(--tui-height-s);--tui-textarea-height: 4.5625rem;font:var(--tui-font-text-s)}:host[data-size=m]{--tui-height: var(--tui-height-m);--tui-textarea-height: 5.5rem;font:var(--tui-font-text-s)}:host[data-size=l]{--tui-height: var(--tui-height-l);--tui-textarea-height: 6.75rem;font:var(--tui-font-text-m)}:host[data-size=m]._has-counter{--tui-textarea-height: 6.625rem}:host[data-size=l]._has-counter{--tui-textarea-height: 7.875rem}@supports (-webkit-hyphens: none){:host .t-pseudo-content,:host .t-input{text-wrap:balance}}.t-outline{min-block-size:inherit}.t-content{display:block;margin-top:0;margin-bottom:0;min-block-size:inherit;box-sizing:border-box;overflow:hidden;cursor:text}:host._disabled .t-content{cursor:auto;opacity:var(--tui-disabled-opacity)}:host:not(._expandable) .t-content{position:absolute;top:0;left:0;bottom:1px;right:0;min-block-size:auto}:host._has-counter:not(._expandable) .t-content{bottom:1.6875rem}:host._label-outside._has-counter:not(._expandable) .t-content{bottom:1rem}.t-wrapper{position:relative;inline-size:100%;block-size:100%;min-block-size:inherit;box-sizing:border-box;padding:calc((var(--tui-height) - 1.25rem) / 2) 0}:host[data-size=l]._label-outside .t-wrapper{padding:calc((var(--tui-height) - 1.5rem) / 2) 0}:host[data-size=m]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height) - 2.25rem) / 2) 0}:host[data-size=l]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height) - 2.625rem) / 2) 0}:host-context(table)[data-size=m]._label-outside .t-wrapper{padding-bottom:.75rem}:host-context(table)[data-size=l]._label-outside .t-wrapper{padding-bottom:1rem}.t-input-wrapper{min-block-size:inherit;inline-size:100%;flex:1}.t-relative{position:relative;min-block-size:inherit}.t-box{display:flex;min-block-size:calc(100% - 1rem);inline-size:100%;box-sizing:content-box}:host:not(._expandable) .t-box{block-size:calc(100% - 1rem)}:host:not(._expandable)._label-outside .t-box{block-size:100%}:host._has-counter._expandable .t-box{margin-bottom:1.25rem}:host[data-size=m]:not(._label-outside) .t-box{border-block-start:1rem solid transparent}:host[data-size=l]:not(._label-outside) .t-box{border-block-start:1.25rem solid transparent}.t-pseudo-content{white-space:pre-wrap;overflow-wrap:break-word;word-break:keep-all;pointer-events:none;color:transparent;overflow:hidden;border:0 solid transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0)}:host[data-size=s] .t-pseudo-content,:host[data-size=m] .t-pseudo-content{padding:0 .75rem}:host[data-size=l] .t-pseudo-content{padding:0 1rem}.t-pseudo-content__extra{background-color:var(--tui-status-negative-pale)}.t-input{padding:0;margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;-webkit-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;inline-size:100%;block-size:100%;box-sizing:border-box;resize:none;overflow:hidden;outline:none;border-style:solid;border-color:transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0)}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{-webkit-text-fill-color:var(--tui-text-primary)!important;border-color:var(--tui-service-autofill-background);box-shadow:0 0 0 100rem var(--tui-service-autofill-background) inset!important}.t-input:not(:last-of-type){display:none}.t-input::placeholder{color:var(--tui-text-tertiary);opacity:0}:host._focused .t-input:not(:read-only)::placeholder{opacity:1}:host[data-size=s] .t-input,:host[data-size=m] .t-input{padding:0 .75rem;font:var(--tui-font-text-s)}:host[data-size=l] .t-input{padding:0 1rem;font:var(--tui-font-text-m)}@supports (-webkit-marquee-repetition: infinite) and (object-fit: fill){:host._ios .t-input{padding-left:.8125rem}}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;inline-size:100%;-webkit-user-select:none;user-select:none;font:var(--tui-font-text-s);color:var(--tui-text-secondary);pointer-events:none;will-change:transform;transform:translateY(0);position:absolute;top:calc(var(--tui-height) / 2 - .625rem);left:0;max-inline-size:100%;border:0 solid transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);box-sizing:border-box}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-text-negative)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-tertiary)}:host[data-size=l] .t-placeholder{font:var(--tui-font-text-m);line-height:1.25rem}:host[data-size=l] .t-placeholder_raised{font-size:.8156rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-primary)}:host[data-size=s] .t-placeholder{padding:0 .75rem}:host[data-size=m] .t-placeholder{padding:0 .75rem}:host[data-size=l] .t-placeholder{padding:0 1rem}:host._label-outside .t-placeholder{overflow:initial;block-size:auto;white-space:initial}.t-icons{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;justify-content:flex-end;pointer-events:none;padding:calc((var(--tui-height) - 1.5rem) / 2) 1rem}:host[data-size=m] .t-icons{padding:calc((var(--tui-height) - 1.5rem) / 2) .625rem}.t-icons>:not(:first-child){margin-inline-start:.25rem}.t-icon{position:relative;display:flex;inline-size:1.5rem;block-size:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none}.t-icon_left{margin-inline-end:auto}.t-cleaner{position:relative;display:flex;inline-size:1.5rem;block-size:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none;pointer-events:auto;border-width:.25rem}:host._readonly .t-cleaner,:host._disabled .t-cleaner{pointer-events:none}.t-caret{display:inline-block;block-size:1rem;inline-size:0}.t-counter{position:absolute;right:.75rem;bottom:.5rem;font:var(--tui-font-text-s);pointer-events:none;margin-top:auto;text-align:end;color:var(--tui-text-tertiary)}:host._readonly .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance=icon]{pointer-events:none}@media (hover: hover) and (pointer: fine){:host:not(._readonly):not(._disabled):hover .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance=icon]:after{color:var(--tui-text-secondary)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }, { kind: "component", type: i4.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId", "context"] }, { kind: "directive", type: i5.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { kind: "directive", type: i6.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: i7.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i8.TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
137
137
|
}
|
|
138
138
|
export { TuiTextareaComponent };
|
|
139
139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTextareaComponent, decorators: [{
|
|
@@ -154,7 +154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
154
154
|
'[style.--border-start.rem]': 'borderStart',
|
|
155
155
|
'(focusin)': 'onFocused(true)',
|
|
156
156
|
'(focusout)': 'onFocused(false)',
|
|
157
|
-
}, template: "<ng-container *ngIf=\"hintOptions?.change$ | async\" />\n<div\n automation-id=\"tui-text-area__wrapper\"\n tuiWrapper\n class=\"t-outline\"\n [appearance]=\"appearance\"\n [disabled]=\"disabled\"\n [focus]=\"computedFocused\"\n [hover]=\"pseudoHover\"\n [invalid]=\"computedInvalid\"\n [readOnly]=\"readOnly\"\n>\n <div\n *ngIf=\"hasCounter\"\n automation-id=\"tui-text-area__counter\"\n class=\"t-counter\"\n >\n {{ value.length }}/{{ maxLength }}\n </div>\n\n <label\n class=\"t-content\"\n (mousedown)=\"onMouseDown($event)\"\n >\n <div class=\"t-wrapper\">\n <div\n *ngIf=\"hasPlaceholder\"\n automation-id=\"tui-text-area__placeholder\"\n class=\"t-placeholder\"\n [class.t-placeholder_raised]=\"placeholderRaised\"\n >\n <ng-content />\n </div>\n <tui-scrollbar\n automation-id=\"tui-text-area__scrollbar\"\n class=\"t-box\"\n [style.maxHeight.px]=\"computeMaxHeight\"\n >\n <div class=\"t-input-wrapper\">\n <div class=\"t-relative\">\n <div\n aria-hidden=\"true\"\n class=\"t-pseudo-content\"\n >\n <span [textContent]=\"fittedContent || nativeFocusableElement?.placeholder\"></span>\n <span\n class=\"t-pseudo-content__extra\"\n [textContent]=\"extraContent\"\n ></span>\n <span class=\"t-caret\"></span>\n </div>\n <textarea\n #focusableElement\n automation-id=\"tui-text-area__native\"\n class=\"t-input\"\n [disabled]=\"computedDisabled\"\n [id]=\"id\"\n [ngModelOptions]=\"{standalone: true}\"\n [readOnly]=\"readOnly\"\n [tabIndex]=\"computedFocusable ? 0 : -1\"\n [(ngModel)]=\"value\"\n ></textarea>\n <ng-content select=\"textarea\" />\n </div>\n </div>\n </tui-scrollbar>\n </div>\n <div class=\"t-icons\">\n <div\n *ngIf=\"iconLeftContent\"\n class=\"t-icon t-icon_left t-textfield-icon\"\n >\n <tui-icon\n *polymorpheusOutlet=\"iconLeftContent as src; context: {$implicit: size}\"\n tuiAppearance=\"icon\"\n [icon]=\"src.toString()\"\n />\n </div>\n <ng-container *ngIf=\"hasCustomContent\">\n <tui-icon\n *polymorpheusOutlet=\"controller.customContent as src\"\n [icon]=\"src\"\n />\n </ng-container>\n <ng-container *ngIf=\"hasCleaner\">\n <tui-icon\n *polymorpheusOutlet=\"iconCleaner as src; context: {$implicit: size}\"\n tuiAppearance=\"icon\"\n class=\"t-cleaner\"\n [icon]=\"src.toString()\"\n (click.stop)=\"onValueChange('')\"\n />\n </ng-container>\n <tui-tooltip\n *ngIf=\"hasTooltip\"\n automation-id=\"tui-text-area__tooltip\"\n [content]=\"hintOptions?.content\"\n [describeId]=\"id\"\n />\n <div\n *ngIf=\"iconContent\"\n class=\"t-icon t-textfield-icon\"\n >\n <tui-icon\n *polymorpheusOutlet=\"iconContent as src; context: {$implicit: size}\"\n tuiAppearance=\"icon\"\n [icon]=\"src.toString()\"\n />\n </div>\n </div>\n </label>\n</div>\n", styles: [":host{position:relative;z-index:0;display:flex;flex-direction:column;min-block-size:var(--tui-textarea-height);border-radius:var(--tui-radius-m);color:var(--tui-text-primary)}:host :host-context(*:disabled){pointer-events:none}:host[data-size=s]{--tui-height: var(--tui-height-s);--tui-textarea-height: 4.5625rem;font:var(--tui-font-text-s)}:host[data-size=m]{--tui-height: var(--tui-height-m);--tui-textarea-height: 5.5rem;font:var(--tui-font-text-s)}:host[data-size=l]{--tui-height: var(--tui-height-l);--tui-textarea-height: 6.75rem;font:var(--tui-font-text-m)}:host[data-size=m]._has-counter{--tui-textarea-height: 6.625rem}:host[data-size=l]._has-counter{--tui-textarea-height: 7.875rem}@supports (-webkit-hyphens: none){:host .t-pseudo-content,:host .t-input{text-wrap:balance}}.t-outline{min-block-size:inherit}.t-content{display:block;margin-top:0;margin-bottom:0;min-block-size:inherit;box-sizing:border-box;overflow:hidden;cursor:text}:host._disabled .t-content{cursor:auto;opacity:var(--tui-disabled-opacity)}:host:not(._expandable) .t-content{position:absolute;top:0;left:0;bottom:1px;right:0;min-block-size:auto}:host._has-counter:not(._expandable) .t-content{bottom:1.6875rem}:host._label-outside._has-counter:not(._expandable) .t-content{bottom:1rem}.t-wrapper{position:relative;inline-size:100%;block-size:100%;min-block-size:inherit;box-sizing:border-box;padding:calc((var(--tui-height) - 1.25rem) / 2) 0}:host[data-size=l]._label-outside .t-wrapper{padding:calc((var(--tui-height) - 1.5rem) / 2) 0}:host[data-size=m]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height) - 2.25rem) / 2) 0}:host[data-size=l]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height) - 2.625rem) / 2) 0}:host-context(table)[data-size=m]._label-outside .t-wrapper{padding-bottom:.75rem}:host-context(table)[data-size=l]._label-outside .t-wrapper{padding-bottom:1rem}.t-input-wrapper{min-block-size:inherit;inline-size:100%;flex:1}.t-relative{position:relative;min-block-size:inherit}.t-box{display:flex;min-block-size:calc(100% - 1rem);inline-size:100%}:host:not(._expandable) .t-box{block-size:calc(100% - 1rem)}:host:not(._expandable)._label-outside .t-box{block-size:100%}:host._has-counter._expandable .t-box{margin-bottom:1.25rem}:host[data-size=m]:not(._label-outside) .t-box{border-block-start:1rem solid transparent}:host[data-size=l]:not(._label-outside) .t-box{border-block-start:1.25rem solid transparent}.t-pseudo-content{white-space:pre-wrap;overflow-wrap:break-word;word-break:keep-all;pointer-events:none;color:transparent;overflow:hidden;border:0 solid transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0)}:host[data-size=s] .t-pseudo-content,:host[data-size=m] .t-pseudo-content{padding:0 .75rem}:host[data-size=l] .t-pseudo-content{padding:0 1rem}.t-pseudo-content__extra{background-color:var(--tui-status-negative-pale)}.t-input{padding:0;margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;-webkit-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;inline-size:100%;block-size:100%;box-sizing:border-box;resize:none;overflow:hidden;outline:none;border-style:solid;border-color:transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0)}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{-webkit-text-fill-color:var(--tui-text-primary)!important;border-color:var(--tui-service-autofill-background);box-shadow:0 0 0 100rem var(--tui-service-autofill-background) inset!important}.t-input:not(:last-of-type){display:none}.t-input::placeholder{color:var(--tui-text-tertiary);opacity:0}:host._focused .t-input:not(:read-only)::placeholder{opacity:1}:host[data-size=s] .t-input,:host[data-size=m] .t-input{padding:0 .75rem;font:var(--tui-font-text-s)}:host[data-size=l] .t-input{padding:0 1rem;font:var(--tui-font-text-m)}@supports (-webkit-marquee-repetition: infinite) and (object-fit: fill){:host._ios .t-input{padding-left:.8125rem}}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;inline-size:100%;-webkit-user-select:none;user-select:none;font:var(--tui-font-text-s);color:var(--tui-text-secondary);pointer-events:none;will-change:transform;transform:translateY(0);position:absolute;top:calc(var(--tui-height) / 2 - .625rem);left:0;max-inline-size:100%;border:0 solid transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);box-sizing:border-box}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-text-negative)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-tertiary)}:host[data-size=l] .t-placeholder{font:var(--tui-font-text-m);line-height:1.25rem}:host[data-size=l] .t-placeholder_raised{font-size:.8156rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-primary)}:host[data-size=s] .t-placeholder{padding:0 .75rem}:host[data-size=m] .t-placeholder{padding:0 .75rem}:host[data-size=l] .t-placeholder{padding:0 1rem}:host._label-outside .t-placeholder{overflow:initial;block-size:auto;white-space:initial}.t-icons{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;justify-content:flex-end;pointer-events:none;padding:calc((var(--tui-height) - 1.5rem) / 2) 1rem}:host[data-size=m] .t-icons{padding:calc((var(--tui-height) - 1.5rem) / 2) .625rem}.t-icons>:not(:first-child){margin-inline-start:.25rem}.t-icon{position:relative;display:flex;inline-size:1.5rem;block-size:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none}.t-icon_left{margin-inline-end:auto}.t-cleaner{position:relative;display:flex;inline-size:1.5rem;block-size:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none;pointer-events:auto;border-width:.25rem}:host._readonly .t-cleaner,:host._disabled .t-cleaner{pointer-events:none}.t-caret{display:inline-block;block-size:1rem;inline-size:0}.t-counter{position:absolute;right:.75rem;bottom:.5rem;font:var(--tui-font-text-s);pointer-events:none;margin-top:auto;text-align:end;color:var(--tui-text-tertiary)}:host._readonly .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance=icon]{pointer-events:none}@media (hover: hover) and (pointer: fine){:host:not(._readonly):not(._disabled):hover .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance=icon]:after{color:var(--tui-text-secondary)}}\n"] }]
|
|
157
|
+
}, template: "<ng-container *ngIf=\"hintOptions?.change$ | async\" />\n<div\n automation-id=\"tui-text-area__wrapper\"\n tuiWrapper\n class=\"t-outline\"\n [appearance]=\"appearance\"\n [disabled]=\"disabled\"\n [focus]=\"computedFocused\"\n [hover]=\"pseudoHover\"\n [invalid]=\"computedInvalid\"\n [readOnly]=\"readOnly\"\n>\n <div\n *ngIf=\"hasCounter\"\n automation-id=\"tui-text-area__counter\"\n class=\"t-counter\"\n >\n {{ value.length }}/{{ maxLength }}\n </div>\n\n <label\n class=\"t-content\"\n (mousedown)=\"onMouseDown($event)\"\n >\n <div class=\"t-wrapper\">\n <div\n *ngIf=\"hasPlaceholder\"\n automation-id=\"tui-text-area__placeholder\"\n class=\"t-placeholder\"\n [class.t-placeholder_raised]=\"placeholderRaised\"\n >\n <ng-content />\n </div>\n <tui-scrollbar\n automation-id=\"tui-text-area__scrollbar\"\n class=\"t-box\"\n [style.maxHeight.px]=\"computeMaxHeight\"\n >\n <div class=\"t-input-wrapper\">\n <div class=\"t-relative\">\n <div\n aria-hidden=\"true\"\n class=\"t-pseudo-content\"\n >\n <span [textContent]=\"fittedContent || nativeFocusableElement?.placeholder\"></span>\n <span\n class=\"t-pseudo-content__extra\"\n [textContent]=\"extraContent\"\n ></span>\n <span class=\"t-caret\"></span>\n </div>\n <textarea\n #focusableElement\n automation-id=\"tui-text-area__native\"\n class=\"t-input\"\n [disabled]=\"computedDisabled\"\n [id]=\"id\"\n [ngModelOptions]=\"{standalone: true}\"\n [readOnly]=\"readOnly\"\n [tabIndex]=\"computedFocusable ? 0 : -1\"\n [(ngModel)]=\"value\"\n ></textarea>\n <ng-content select=\"textarea\" />\n </div>\n </div>\n </tui-scrollbar>\n </div>\n <div class=\"t-icons\">\n <div\n *ngIf=\"iconLeftContent\"\n class=\"t-icon t-icon_left t-textfield-icon\"\n >\n <tui-icon\n *polymorpheusOutlet=\"iconLeftContent as src; context: {$implicit: size}\"\n tuiAppearance=\"icon\"\n [icon]=\"src.toString()\"\n />\n </div>\n <ng-container *ngIf=\"hasCustomContent\">\n <tui-icon\n *polymorpheusOutlet=\"controller.customContent as src\"\n [icon]=\"src\"\n />\n </ng-container>\n <ng-container *ngIf=\"hasCleaner\">\n <tui-icon\n *polymorpheusOutlet=\"iconCleaner as src; context: {$implicit: size}\"\n tuiAppearance=\"icon\"\n class=\"t-cleaner\"\n [icon]=\"src.toString()\"\n (click.stop)=\"onValueChange('')\"\n />\n </ng-container>\n <tui-tooltip\n *ngIf=\"hasTooltip\"\n automation-id=\"tui-text-area__tooltip\"\n [content]=\"hintOptions?.content\"\n [describeId]=\"id\"\n />\n <div\n *ngIf=\"iconContent\"\n class=\"t-icon t-textfield-icon\"\n >\n <tui-icon\n *polymorpheusOutlet=\"iconContent as src; context: {$implicit: size}\"\n tuiAppearance=\"icon\"\n [icon]=\"src.toString()\"\n />\n </div>\n </div>\n </label>\n</div>\n", styles: [":host{position:relative;z-index:0;display:flex;flex-direction:column;min-block-size:var(--tui-textarea-height);border-radius:var(--tui-radius-m);color:var(--tui-text-primary)}:host :host-context(*:disabled){pointer-events:none}:host[data-size=s]{--tui-height: var(--tui-height-s);--tui-textarea-height: 4.5625rem;font:var(--tui-font-text-s)}:host[data-size=m]{--tui-height: var(--tui-height-m);--tui-textarea-height: 5.5rem;font:var(--tui-font-text-s)}:host[data-size=l]{--tui-height: var(--tui-height-l);--tui-textarea-height: 6.75rem;font:var(--tui-font-text-m)}:host[data-size=m]._has-counter{--tui-textarea-height: 6.625rem}:host[data-size=l]._has-counter{--tui-textarea-height: 7.875rem}@supports (-webkit-hyphens: none){:host .t-pseudo-content,:host .t-input{text-wrap:balance}}.t-outline{min-block-size:inherit}.t-content{display:block;margin-top:0;margin-bottom:0;min-block-size:inherit;box-sizing:border-box;overflow:hidden;cursor:text}:host._disabled .t-content{cursor:auto;opacity:var(--tui-disabled-opacity)}:host:not(._expandable) .t-content{position:absolute;top:0;left:0;bottom:1px;right:0;min-block-size:auto}:host._has-counter:not(._expandable) .t-content{bottom:1.6875rem}:host._label-outside._has-counter:not(._expandable) .t-content{bottom:1rem}.t-wrapper{position:relative;inline-size:100%;block-size:100%;min-block-size:inherit;box-sizing:border-box;padding:calc((var(--tui-height) - 1.25rem) / 2) 0}:host[data-size=l]._label-outside .t-wrapper{padding:calc((var(--tui-height) - 1.5rem) / 2) 0}:host[data-size=m]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height) - 2.25rem) / 2) 0}:host[data-size=l]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height) - 2.625rem) / 2) 0}:host-context(table)[data-size=m]._label-outside .t-wrapper{padding-bottom:.75rem}:host-context(table)[data-size=l]._label-outside .t-wrapper{padding-bottom:1rem}.t-input-wrapper{min-block-size:inherit;inline-size:100%;flex:1}.t-relative{position:relative;min-block-size:inherit}.t-box{display:flex;min-block-size:calc(100% - 1rem);inline-size:100%;box-sizing:content-box}:host:not(._expandable) .t-box{block-size:calc(100% - 1rem)}:host:not(._expandable)._label-outside .t-box{block-size:100%}:host._has-counter._expandable .t-box{margin-bottom:1.25rem}:host[data-size=m]:not(._label-outside) .t-box{border-block-start:1rem solid transparent}:host[data-size=l]:not(._label-outside) .t-box{border-block-start:1.25rem solid transparent}.t-pseudo-content{white-space:pre-wrap;overflow-wrap:break-word;word-break:keep-all;pointer-events:none;color:transparent;overflow:hidden;border:0 solid transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0)}:host[data-size=s] .t-pseudo-content,:host[data-size=m] .t-pseudo-content{padding:0 .75rem}:host[data-size=l] .t-pseudo-content{padding:0 1rem}.t-pseudo-content__extra{background-color:var(--tui-status-negative-pale)}.t-input{padding:0;margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;-webkit-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;inline-size:100%;block-size:100%;box-sizing:border-box;resize:none;overflow:hidden;outline:none;border-style:solid;border-color:transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0)}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{-webkit-text-fill-color:var(--tui-text-primary)!important;border-color:var(--tui-service-autofill-background);box-shadow:0 0 0 100rem var(--tui-service-autofill-background) inset!important}.t-input:not(:last-of-type){display:none}.t-input::placeholder{color:var(--tui-text-tertiary);opacity:0}:host._focused .t-input:not(:read-only)::placeholder{opacity:1}:host[data-size=s] .t-input,:host[data-size=m] .t-input{padding:0 .75rem;font:var(--tui-font-text-s)}:host[data-size=l] .t-input{padding:0 1rem;font:var(--tui-font-text-m)}@supports (-webkit-marquee-repetition: infinite) and (object-fit: fill){:host._ios .t-input{padding-left:.8125rem}}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;inline-size:100%;-webkit-user-select:none;user-select:none;font:var(--tui-font-text-s);color:var(--tui-text-secondary);pointer-events:none;will-change:transform;transform:translateY(0);position:absolute;top:calc(var(--tui-height) / 2 - .625rem);left:0;max-inline-size:100%;border:0 solid transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);box-sizing:border-box}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-text-negative)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-tertiary)}:host[data-size=l] .t-placeholder{font:var(--tui-font-text-m);line-height:1.25rem}:host[data-size=l] .t-placeholder_raised{font-size:.8156rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-primary)}:host[data-size=s] .t-placeholder{padding:0 .75rem}:host[data-size=m] .t-placeholder{padding:0 .75rem}:host[data-size=l] .t-placeholder{padding:0 1rem}:host._label-outside .t-placeholder{overflow:initial;block-size:auto;white-space:initial}.t-icons{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;justify-content:flex-end;pointer-events:none;padding:calc((var(--tui-height) - 1.5rem) / 2) 1rem}:host[data-size=m] .t-icons{padding:calc((var(--tui-height) - 1.5rem) / 2) .625rem}.t-icons>:not(:first-child){margin-inline-start:.25rem}.t-icon{position:relative;display:flex;inline-size:1.5rem;block-size:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none}.t-icon_left{margin-inline-end:auto}.t-cleaner{position:relative;display:flex;inline-size:1.5rem;block-size:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none;pointer-events:auto;border-width:.25rem}:host._readonly .t-cleaner,:host._disabled .t-cleaner{pointer-events:none}.t-caret{display:inline-block;block-size:1rem;inline-size:0}.t-counter{position:absolute;right:.75rem;bottom:.5rem;font:var(--tui-font-text-s);pointer-events:none;margin-top:auto;text-align:end;color:var(--tui-text-tertiary)}:host._readonly .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance=icon]{pointer-events:none}@media (hover: hover) and (pointer: fine){:host:not(._readonly):not(._disabled):hover .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance=icon]:after{color:var(--tui-text-secondary)}}\n"] }]
|
|
158
158
|
}], propDecorators: { focusableElement: [{
|
|
159
159
|
type: ViewChild,
|
|
160
160
|
args: ['focusableElement']
|
|
@@ -159,11 +159,11 @@ class TuiFlatPickerComponent {
|
|
|
159
159
|
return this.value[1] * 100;
|
|
160
160
|
}
|
|
161
161
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiFlatPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
162
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiFlatPickerComponent, selector: "tui-flat-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, providers: [TuiPickerService], ngImport: i0, template: "<div\n class=\"t-circle\"\n [style.left.%]=\"left\"\n [style.top.%]=\"top\"\n></div>\n", styles: [":host{position:relative;display:block}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:-.5rem 0 0 -.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
162
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiFlatPickerComponent, selector: "tui-flat-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, providers: [TuiPickerService], ngImport: i0, template: "<div\n class=\"t-circle\"\n [style.left.%]=\"left\"\n [style.top.%]=\"top\"\n></div>\n", styles: [":host{position:relative;display:block}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:-.5rem 0 0 -.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
163
163
|
}
|
|
164
164
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiFlatPickerComponent, decorators: [{
|
|
165
165
|
type: Component,
|
|
166
|
-
args: [{ standalone: false, selector: 'tui-flat-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], template: "<div\n class=\"t-circle\"\n [style.left.%]=\"left\"\n [style.top.%]=\"top\"\n></div>\n", styles: [":host{position:relative;display:block}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:-.5rem 0 0 -.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
|
|
166
|
+
args: [{ standalone: false, selector: 'tui-flat-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], template: "<div\n class=\"t-circle\"\n [style.left.%]=\"left\"\n [style.top.%]=\"top\"\n></div>\n", styles: [":host{position:relative;display:block}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:-.5rem 0 0 -.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
|
|
167
167
|
}], propDecorators: { value: [{
|
|
168
168
|
type: Input
|
|
169
169
|
}], valueChange: [{
|
|
@@ -185,11 +185,11 @@ class TuiLinearPickerComponent {
|
|
|
185
185
|
return this.value * 100;
|
|
186
186
|
}
|
|
187
187
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLinearPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
188
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiLinearPickerComponent, selector: "tui-linear-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, providers: [TuiPickerService], ngImport: i0, template: "<div\n class=\"t-circle\"\n [style.left.%]=\"left\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
188
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiLinearPickerComponent, selector: "tui-linear-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, providers: [TuiPickerService], ngImport: i0, template: "<div\n class=\"t-circle\"\n [style.left.%]=\"left\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
189
189
|
}
|
|
190
190
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLinearPickerComponent, decorators: [{
|
|
191
191
|
type: Component,
|
|
192
|
-
args: [{ standalone: false, selector: 'tui-linear-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], template: "<div\n class=\"t-circle\"\n [style.left.%]=\"left\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
|
|
192
|
+
args: [{ standalone: false, selector: 'tui-linear-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], template: "<div\n class=\"t-circle\"\n [style.left.%]=\"left\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
|
|
193
193
|
}], propDecorators: { value: [{
|
|
194
194
|
type: Input
|
|
195
195
|
}], valueChange: [{
|
|
@@ -413,13 +413,13 @@ class TuiLinearMultiPickerComponent {
|
|
|
413
413
|
this.valueChange.emit(value);
|
|
414
414
|
}
|
|
415
415
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLinearMultiPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
416
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiLinearMultiPickerComponent, selector: "tui-linear-multi-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange", indexChange: "indexChange" }, host: { listeners: { "document:mouseup": "onMouseUp()" } }, providers: [TuiPickerService], ngImport: i0, template: "<div\n *ngFor=\"let item of value; let index = index\"\n class=\"t-circle\"\n [style.left.%]=\"item * 100\"\n (dblclick)=\"onClick(index)\"\n (mousedown)=\"onMouseDown(index)\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
416
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiLinearMultiPickerComponent, selector: "tui-linear-multi-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange", indexChange: "indexChange" }, host: { listeners: { "document:mouseup": "onMouseUp()" } }, providers: [TuiPickerService], ngImport: i0, template: "<div\n *ngFor=\"let item of value; let index = index\"\n class=\"t-circle\"\n [style.left.%]=\"item * 100\"\n (dblclick)=\"onClick(index)\"\n (mousedown)=\"onMouseDown(index)\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
417
417
|
}
|
|
418
418
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLinearMultiPickerComponent, decorators: [{
|
|
419
419
|
type: Component,
|
|
420
420
|
args: [{ standalone: false, selector: 'tui-linear-multi-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], host: {
|
|
421
421
|
'(document:mouseup)': 'onMouseUp()',
|
|
422
|
-
}, template: "<div\n *ngFor=\"let item of value; let index = index\"\n class=\"t-circle\"\n [style.left.%]=\"item * 100\"\n (dblclick)=\"onClick(index)\"\n (mousedown)=\"onMouseDown(index)\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
|
|
422
|
+
}, template: "<div\n *ngFor=\"let item of value; let index = index\"\n class=\"t-circle\"\n [style.left.%]=\"item * 100\"\n (dblclick)=\"onClick(index)\"\n (mousedown)=\"onMouseDown(index)\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
|
|
423
423
|
}], propDecorators: { value: [{
|
|
424
424
|
type: Input
|
|
425
425
|
}], valueChange: [{
|