@taiga-ui/legacy 5.0.0 → 5.1.0-canary.71f34cd
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/taiga-ui-legacy-components-carousel.mjs +15 -15
- package/fesm2022/taiga-ui-legacy-components-dialog.mjs +9 -9
- package/fesm2022/taiga-ui-legacy-components-mobile-dialog.mjs +6 -6
- package/fesm2022/taiga-ui-legacy-components-pdf-viewer.mjs +9 -9
- package/package.json +9 -9
- package/styles/basic/keyframes.less +19 -0
- package/styles/basic/main.less +72 -0
- package/styles/markup/tui-container.less +61 -0
- package/styles/markup/tui-form.less +146 -0
- package/styles/markup/tui-island.less +200 -0
- package/styles/markup/tui-list.less +136 -0
- package/styles/markup/tui-mobile-only.less +5 -0
- package/styles/markup/tui-required.less +13 -0
- package/styles/markup/tui-row.less +137 -0
- package/styles/markup/tui-skeleton.less +43 -0
- package/styles/markup/tui-space.less +52 -0
- package/styles/markup/tui-table.less +184 -0
- package/styles/markup/tui-text.less +57 -0
- package/styles/taiga-ui-global.less +14 -0
|
@@ -36,10 +36,10 @@ class TuiCarouselDirective extends Observable {
|
|
|
36
36
|
restart() {
|
|
37
37
|
this.trigger$.next();
|
|
38
38
|
}
|
|
39
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
40
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
39
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiCarouselDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
40
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: TuiCarouselDirective, isStandalone: true, inputs: { duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
41
41
|
}
|
|
42
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
42
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiCarouselDirective, decorators: [{
|
|
43
43
|
type: Directive
|
|
44
44
|
}], ctorParameters: () => [] });
|
|
45
45
|
|
|
@@ -47,10 +47,10 @@ class TuiCarouselAutoscroll {
|
|
|
47
47
|
constructor() {
|
|
48
48
|
this.tuiCarouselAutoscroll = outputFromObservable(inject(TuiCarouselDirective));
|
|
49
49
|
}
|
|
50
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
51
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
50
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiCarouselAutoscroll, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
51
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: TuiCarouselAutoscroll, isStandalone: true, selector: "[tuiCarouselAutoscroll]", outputs: { tuiCarouselAutoscroll: "tuiCarouselAutoscroll" }, ngImport: i0 }); }
|
|
52
52
|
}
|
|
53
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
53
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiCarouselAutoscroll, decorators: [{
|
|
54
54
|
type: Directive,
|
|
55
55
|
args: [{ selector: '[tuiCarouselAutoscroll]' }]
|
|
56
56
|
}] });
|
|
@@ -63,10 +63,10 @@ class TuiCarouselScroll {
|
|
|
63
63
|
this.el.scrollLeft = 10;
|
|
64
64
|
})));
|
|
65
65
|
}
|
|
66
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
67
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
66
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiCarouselScroll, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
67
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: TuiCarouselScroll, isStandalone: true, selector: "[tuiCarouselScroll]", outputs: { tuiCarouselScroll: "tuiCarouselScroll" }, ngImport: i0 }); }
|
|
68
68
|
}
|
|
69
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
69
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiCarouselScroll, decorators: [{
|
|
70
70
|
type: Directive,
|
|
71
71
|
args: [{ selector: '[tuiCarouselScroll]' }]
|
|
72
72
|
}] });
|
|
@@ -145,10 +145,10 @@ class TuiCarouselComponent {
|
|
|
145
145
|
updateIndex(index) {
|
|
146
146
|
this.index.set(tuiClamp(index, 0, this.items().length - 1));
|
|
147
147
|
}
|
|
148
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
149
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
148
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
149
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TuiCarouselComponent, isStandalone: true, selector: "tui-carousel", inputs: { draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, itemsCount: { classPropertyName: "itemsCount", publicName: "itemsCount", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange", shift: "shift" }, host: { listeners: { "touchstart": "onTransitioned(false)", "touchend": "onTransitioned(true)", "mousedown": "onTransitioned(false)", "document:mouseup.zoneless": "onTransitioned(true)" }, properties: { "class._transitioned": "transitioned()", "class._draggable": "draggable()" } }, providers: [{ provide: TUI_SWIPE_OPTIONS, useValue: { timeout: 200, threshold: 30 } }], queries: [{ propertyName: "items", predicate: TuiItem, read: TemplateRef, isSignal: true }], hostDirectives: [{ directive: TuiCarouselDirective, inputs: ["duration", "duration"] }], ngImport: i0, template: "<div\n class=\"t-scroller\"\n (tuiCarouselScroll)=\"onScroll($event)\"\n>\n <div\n waIntersectionObserver\n waIntersectionThreshold=\"0.5\"\n class=\"t-wrapper\"\n >\n <div\n class=\"t-items\"\n [style.transform]=\"transform()\"\n (tuiCarouselAutoscroll)=\"onAutoscroll()\"\n (tuiPan)=\"onPan($event[0])\"\n (tuiSwipe)=\"onSwipe($event.direction)\"\n >\n @for (item of items(); track $index) {\n <fieldset\n class=\"t-item\"\n [disabled]=\"isDisabled($index)\"\n [style.flex-basis.%]=\"100 / itemsCount()\"\n [style.max-width.%]=\"100 / itemsCount()\"\n [style.min-width.%]=\"100 / itemsCount()\"\n (waIntersectionObservee)=\"$event[0] && onIntersection($event[0].intersectionRatio, $index)\"\n >\n <ng-container [ngTemplateOutlet]=\"item\" />\n </fieldset>\n }\n </div>\n </div>\n</div>\n\n<ng-content />\n", styles: [":host{position:relative;display:block;overflow:hidden}:host._draggable{-webkit-user-select:none;user-select:none}:host._draggable:hover{cursor:grab}:host._draggable:active{cursor:grabbing}.t-items{display:flex}:host._transitioned .t-items{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}::ng-deep [tuiCarouselButtons] [tuiIconButton]{border-radius:100%}.t-item{display:flex;flex-direction:column;justify-content:center;padding:var(--tui-carousel-padding, 0 1.25rem);flex:1;min-inline-size:100%;max-inline-size:100%;box-sizing:border-box;border:none;margin:0}.t-wrapper{position:sticky;inset-inline-start:0;inset-inline-end:0;min-inline-size:100%;overflow:hidden}.t-scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;overflow:auto;overscroll-behavior-x:none;touch-action:pan-y}.t-scroller::-webkit-scrollbar,.t-scroller::-webkit-scrollbar-thumb{display:none}.t-scroller:before,.t-scroller:after{content:\"\";display:block;min-inline-size:1rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiCarouselAutoscroll, selector: "[tuiCarouselAutoscroll]", outputs: ["tuiCarouselAutoscroll"] }, { kind: "directive", type: TuiCarouselScroll, selector: "[tuiCarouselScroll]", outputs: ["tuiCarouselScroll"] }, { kind: "directive", type: TuiPan, selector: "[tuiPan]", outputs: ["tuiPan"] }, { kind: "directive", type: TuiSwipe, selector: "[tuiSwipe]", outputs: ["tuiSwipe"] }, { kind: "directive", type: i2.WaIntersectionObserverDirective, selector: "[waIntersectionObserver]", inputs: ["waIntersectionRootMargin", "waIntersectionThreshold"], exportAs: ["IntersectionObserver"] }, { kind: "directive", type: i2.WaIntersectionObservee, selector: "[waIntersectionObservee]", outputs: ["waIntersectionObservee"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
150
150
|
}
|
|
151
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
151
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiCarouselComponent, decorators: [{
|
|
152
152
|
type: Component,
|
|
153
153
|
args: [{ selector: 'tui-carousel', imports: [
|
|
154
154
|
NgTemplateOutlet,
|
|
@@ -173,15 +173,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
173
173
|
}] });
|
|
174
174
|
|
|
175
175
|
class TuiCarouselButtons {
|
|
176
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
177
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
176
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiCarouselButtons, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
177
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: TuiCarouselButtons, isStandalone: true, selector: "[tuiCarouselButtons]", providers: [
|
|
178
178
|
tuiButtonOptionsProvider({
|
|
179
179
|
appearance: 'secondary',
|
|
180
180
|
size: 'm',
|
|
181
181
|
}),
|
|
182
182
|
], ngImport: i0 }); }
|
|
183
183
|
}
|
|
184
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
184
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiCarouselButtons, decorators: [{
|
|
185
185
|
type: Directive,
|
|
186
186
|
args: [{
|
|
187
187
|
selector: '[tuiCarouselButtons]',
|
|
@@ -50,10 +50,10 @@ class TuiDialogComponent {
|
|
|
50
50
|
this.context.$implicit.complete();
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
54
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
53
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
54
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TuiDialogComponent, isStandalone: true, selector: "tui-dialog-legacy", host: { properties: { "attr.data-appearance": "context.appearance", "attr.data-size": "size", "class._centered": "header", "style.--tui-from": "from()" } }, providers: [TuiDialogCloseService], hostDirectives: [{ directive: i1.TuiAnimated }], ngImport: i0, template: "@if (header) {\n <header class=\"t-header\">\n <ng-container *polymorpheusOutlet=\"header as text; context: context\">\n {{ text }}\n </ng-container>\n </header>\n}\n<div class=\"t-content\">\n <h2\n class=\"t-heading\"\n [class.t-heading_closable]=\"context.closable && !header\"\n [id]=\"context.id\"\n [textContent]=\"context.label\"\n ></h2>\n <section>\n <ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n <div [innerHTML]=\"text\"></div>\n @if (context.closable || context.dismissible) {\n <div class=\"t-buttons\">\n <button\n size=\"m\"\n tuiAutoFocus\n tuiButton\n type=\"button\"\n (click)=\"context.$implicit.complete()\"\n >\n {{ context.data?.button || 'OK' }}\n </button>\n </div>\n }\n </ng-container>\n </section>\n</div>\n<div class=\"t-filler\"></div>\n\n<!-- Close button is insensitive to `context.closable === Observable<false>` by design -->\n@if (context.closable) {\n <button\n automation-id=\"tui-dialog__close\"\n tuiIconButton\n type=\"button\"\n class=\"t-close\"\n [appearance]=\"isMobile() ? 'icon' : 'neutral'\"\n [iconStart]=\"icons.close\"\n [size]=\"isMobile() ? 'xs' : 's'\"\n [style.border-radius.%]=\"100\"\n (click)=\"close$.next()\"\n (mousedown.prevent.zoneless)=\"(0)\"\n >\n {{ closeWord() }}\n </button>\n}\n", styles: [":host{position:relative;display:flex;font:var(--tui-typography-body-m);flex-direction:column;box-sizing:border-box;margin:2.5rem;border-radius:1.5rem}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}:host:after{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;content:\"\";border-radius:inherit;pointer-events:none;box-shadow:var(--tui-shadow-popup)}:host[data-size=auto]{inline-size:auto}:host[data-size=s]{inline-size:25rem}:host[data-size=s] .t-content{padding:1.5rem}:host[data-size=s] .t-heading{font:var(--tui-typography-heading-h5)}:host[data-size=m]{inline-size:37.5rem}:host[data-size=l]{inline-size:50rem}:host[data-size=fullscreen],:host[data-size=page]{min-inline-size:100vw;min-block-size:100%;margin:0;border-radius:0;border:none;background:var(--tui-background-elevation-1);box-shadow:0 4rem var(--tui-background-elevation-1)}:host[data-size=fullscreen] .t-content,:host[data-size=page] .t-content{padding:3rem calc(50vw - 22.5rem)}:host[data-size=fullscreen] .t-heading,:host[data-size=page] .t-heading{font:var(--tui-typography-heading-h3)}:host._centered{text-align:center}:host :host-context(tui-root._mobile)[data-size]{min-inline-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0;border:none;margin:auto 0 0;background:var(--tui-background-elevation-1);padding-block-end:env(safe-area-inset-bottom)}:host :host-context(tui-root._mobile)[data-size] .t-content{padding:1rem}:host :host-context(tui-root._mobile)[data-size] .t-heading{font:var(--tui-typography-heading-h5)}:host :host-context(tui-root._mobile)[data-size=fullscreen],:host :host-context(tui-root._mobile)[data-size=page]{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}:host :host-context(tui-root._mobile)[data-size=fullscreen] .t-close,:host :host-context(tui-root._mobile)[data-size=page] .t-close{inset-block-start:max(1rem,env(safe-area-inset-top))}:host[data-size=page] .t-content,:host-context(tui-root._mobile) :host[data-size=page] .t-content{padding:0}.t-heading{margin:0 0 .5rem;overflow-wrap:break-word;font:var(--tui-typography-heading-h4)}.t-heading_closable{padding-inline-end:2rem}.t-heading:empty{display:none}.t-header{display:flex;border-top-left-radius:inherit;border-top-right-radius:inherit;overflow:hidden}:host[data-size=fullscreen] :host-context(tui-root._mobile) .t-header{flex:1}.t-content{border-radius:inherit;padding:1.75rem;background:var(--tui-background-elevation-1)}.t-content:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.t-content>section{border-radius:inherit}.t-filler{flex-grow:1}.t-close{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;inset-block-start:1rem;inset-inline-end:1rem}.t-buttons{margin-block-start:1.25rem;text-align:end}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
55
55
|
}
|
|
56
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
56
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiDialogComponent, decorators: [{
|
|
57
57
|
type: Component,
|
|
58
58
|
args: [{ selector: 'tui-dialog-legacy', imports: [PolymorpheusOutlet, TuiAutoFocus, TuiButton], changeDetection: ChangeDetectionStrategy.Default, providers: [TuiDialogCloseService], hostDirectives: [TuiAnimated], host: {
|
|
59
59
|
'[attr.data-appearance]': 'context.appearance',
|
|
@@ -84,10 +84,10 @@ class TuiDialogService extends TuiModalService {
|
|
|
84
84
|
this.options = inject(TUI_DIALOG_OPTIONS);
|
|
85
85
|
this.content = TuiDialogComponent;
|
|
86
86
|
}
|
|
87
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
88
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
87
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiDialogService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
88
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiDialogService, providedIn: 'root' }); }
|
|
89
89
|
}
|
|
90
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
90
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiDialogService, decorators: [{
|
|
91
91
|
type: Injectable,
|
|
92
92
|
args: [{ providedIn: 'root' }]
|
|
93
93
|
}] });
|
|
@@ -96,10 +96,10 @@ class TuiDialog {
|
|
|
96
96
|
constructor() {
|
|
97
97
|
this.tuiDialogOptions = input({});
|
|
98
98
|
}
|
|
99
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
100
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
99
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiDialog, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
100
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: TuiDialog, isStandalone: true, selector: "ng-template[tuiDialog]", inputs: { tuiDialogOptions: { classPropertyName: "tuiDialogOptions", publicName: "tuiDialogOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiAsPortal(TuiDialogService)], hostDirectives: [{ directive: i1$1.TuiPortalDirective, inputs: ["options", "tuiDialogOptions", "open", "tuiDialog"], outputs: ["openChange", "tuiDialogChange"] }], ngImport: i0 }); }
|
|
101
101
|
}
|
|
102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiDialog, decorators: [{
|
|
103
103
|
type: Directive,
|
|
104
104
|
args: [{
|
|
105
105
|
selector: 'ng-template[tuiDialog]',
|
|
@@ -15,10 +15,10 @@ class TuiMobileDialog {
|
|
|
15
15
|
onAction(index) {
|
|
16
16
|
this.context.completeWith(index);
|
|
17
17
|
}
|
|
18
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
19
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
18
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiMobileDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TuiMobileDialog, isStandalone: true, selector: "tui-mobile-dialog", host: { properties: { "class._ios": "isIOS" } }, ngImport: i0, template: "@if (!!context.label) {\n <h2\n automation-id=\"tui-mobile-dialog__label\"\n class=\"t-heading\"\n [id]=\"context.id\"\n >\n {{ context.label }}\n </h2>\n}\n<div class=\"t-content\">\n <ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n {{ text }}\n </ng-container>\n</div>\n@for (action of context.actions; track action) {\n <button\n appearance=\"flat\"\n size=\"s\"\n tuiButton\n tuiRipple\n type=\"button\"\n class=\"t-button\"\n [class.t-button_column]=\"$count > 2\"\n (click)=\"onAction($index)\"\n >\n {{ action }}\n </button>\n}\n", styles: [":host{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:block;background:var(--tui-background-base);word-break:break-word;overflow:hidden;padding:1.25rem .75rem 0 1.5rem}:host:not(._ios){max-inline-size:17.5rem;border-radius:.125rem;text-align:start;box-shadow:0 1.5rem 1.5rem #00000052}:host._ios{max-inline-size:16.875rem;padding:1.5rem 0 0;border-radius:.75rem;text-align:center}.t-heading{font-size:1rem}:host._ios .t-heading{font-weight:700;font-size:1.125rem}.t-content{margin-block-start:.75rem;font-size:.875rem;line-height:1.25rem;padding-inline-end:.75rem}:host._ios .t-content{margin-block-start:.25rem;padding-inline-start:1.5rem;padding-inline-end:1.5rem}.t-button{border-radius:0}:host._ios .t-button{border-block-start:#b8b8b8 1px solid;block-size:2.625rem;inline-size:100%}:host._ios .t-button:first-of-type{margin-block-start:1.125rem}:host:not(._ios) .t-button{margin:.5rem 0 .5rem .5rem;float:right}@supports (float: inline-end){:host:not(._ios) .t-button{float:inline-end}}:host:not(._ios) .t-button_column{display:block;float:none;margin-inline-start:auto}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiRipple, selector: "[tuiRipple]", inputs: ["tuiRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
20
20
|
}
|
|
21
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
21
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiMobileDialog, decorators: [{
|
|
22
22
|
type: Component,
|
|
23
23
|
args: [{ selector: 'tui-mobile-dialog', imports: [PolymorpheusOutlet, TuiButton, TuiRipple], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class._ios]': 'isIOS' }, template: "@if (!!context.label) {\n <h2\n automation-id=\"tui-mobile-dialog__label\"\n class=\"t-heading\"\n [id]=\"context.id\"\n >\n {{ context.label }}\n </h2>\n}\n<div class=\"t-content\">\n <ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n {{ text }}\n </ng-container>\n</div>\n@for (action of context.actions; track action) {\n <button\n appearance=\"flat\"\n size=\"s\"\n tuiButton\n tuiRipple\n type=\"button\"\n class=\"t-button\"\n [class.t-button_column]=\"$count > 2\"\n (click)=\"onAction($index)\"\n >\n {{ action }}\n </button>\n}\n", styles: [":host{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:block;background:var(--tui-background-base);word-break:break-word;overflow:hidden;padding:1.25rem .75rem 0 1.5rem}:host:not(._ios){max-inline-size:17.5rem;border-radius:.125rem;text-align:start;box-shadow:0 1.5rem 1.5rem #00000052}:host._ios{max-inline-size:16.875rem;padding:1.5rem 0 0;border-radius:.75rem;text-align:center}.t-heading{font-size:1rem}:host._ios .t-heading{font-weight:700;font-size:1.125rem}.t-content{margin-block-start:.75rem;font-size:.875rem;line-height:1.25rem;padding-inline-end:.75rem}:host._ios .t-content{margin-block-start:.25rem;padding-inline-start:1.5rem;padding-inline-end:1.5rem}.t-button{border-radius:0}:host._ios .t-button{border-block-start:#b8b8b8 1px solid;block-size:2.625rem;inline-size:100%}:host._ios .t-button:first-of-type{margin-block-start:1.125rem}:host:not(._ios) .t-button{margin:.5rem 0 .5rem .5rem;float:right}@supports (float: inline-end){:host:not(._ios) .t-button{float:inline-end}}:host:not(._ios) .t-button_column{display:block;float:none;margin-inline-start:auto}\n"] }]
|
|
24
24
|
}] });
|
|
@@ -42,10 +42,10 @@ class TuiMobileDialogService extends TuiModalService {
|
|
|
42
42
|
open(content, options = {}) {
|
|
43
43
|
return super.open(content, options);
|
|
44
44
|
}
|
|
45
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
46
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
45
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiMobileDialogService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
46
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiMobileDialogService, providedIn: 'root' }); }
|
|
47
47
|
}
|
|
48
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiMobileDialogService, decorators: [{
|
|
49
49
|
type: Injectable,
|
|
50
50
|
args: [{ providedIn: 'root' }]
|
|
51
51
|
}] });
|
|
@@ -19,10 +19,10 @@ class TuiPdfViewerComponent {
|
|
|
19
19
|
onKeyDownEsc() {
|
|
20
20
|
this.context.$implicit.complete();
|
|
21
21
|
}
|
|
22
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
23
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
22
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiPdfViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TuiPdfViewerComponent, isStandalone: true, selector: "tui-pdf-viewer", host: { listeners: { "document:keydown.esc": "onKeyDownEsc()" } }, hostDirectives: [{ directive: i1.TuiAnimated }], ngImport: i0, template: "<header class=\"t-header\">\n <h2\n automation-id=\"tui-pdf-viewer__label\"\n class=\"t-title\"\n >\n {{ context.label }}\n </h2>\n <div class=\"t-actions\">\n <ng-container *polymorpheusOutlet=\"context.actions as text; context: context\">\n {{ text }}\n </ng-container>\n </div>\n <button\n appearance=\"\"\n size=\"s\"\n tuiIconButton\n type=\"button\"\n class=\"t-close\"\n [iconStart]=\"icons.close\"\n [style.border-radius.%]=\"100\"\n (click)=\"context.$implicit.complete()\"\n >\n {{ closeWord() }}\n </button>\n</header>\n<section class=\"t-content\">\n <iframe\n *polymorpheusOutlet=\"context.content as content; context: context\"\n title=\"pdf\"\n class=\"t-iframe\"\n [src]=\"content\"\n ></iframe>\n</section>\n", styles: [":host{display:block;inline-size:100%;block-size:100%;box-sizing:border-box;color:#fff;background:#333639;padding-block-start:env(safe-area-inset-top);padding-block-end:env(safe-area-inset-bottom)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}.t-header{display:flex;align-items:center;block-size:4rem;padding:0 1rem 0 1.5625rem;box-shadow:inset 0 -1px #535659}.t-title{margin:0;font:var(--tui-typography-body-m);white-space:nowrap;text-overflow:ellipsis;padding-inline-end:.3125rem;overflow:hidden}.t-actions{display:flex;margin-inline-start:auto}.t-close{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;margin-inline-start:.75rem;color:#fff;background:#ffffff52}.t-close:hover{background:#fff6}.t-content{block-size:calc(100% - 4rem);overflow:hidden}.t-iframe{inline-size:100%;block-size:100%}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24
24
|
}
|
|
25
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiPdfViewerComponent, decorators: [{
|
|
26
26
|
type: Component,
|
|
27
27
|
args: [{ selector: 'tui-pdf-viewer', imports: [PolymorpheusOutlet, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [TuiAnimated], host: { '(document:keydown.esc)': 'onKeyDownEsc()' }, template: "<header class=\"t-header\">\n <h2\n automation-id=\"tui-pdf-viewer__label\"\n class=\"t-title\"\n >\n {{ context.label }}\n </h2>\n <div class=\"t-actions\">\n <ng-container *polymorpheusOutlet=\"context.actions as text; context: context\">\n {{ text }}\n </ng-container>\n </div>\n <button\n appearance=\"\"\n size=\"s\"\n tuiIconButton\n type=\"button\"\n class=\"t-close\"\n [iconStart]=\"icons.close\"\n [style.border-radius.%]=\"100\"\n (click)=\"context.$implicit.complete()\"\n >\n {{ closeWord() }}\n </button>\n</header>\n<section class=\"t-content\">\n <iframe\n *polymorpheusOutlet=\"context.content as content; context: context\"\n title=\"pdf\"\n class=\"t-iframe\"\n [src]=\"content\"\n ></iframe>\n</section>\n", styles: [":host{display:block;inline-size:100%;block-size:100%;box-sizing:border-box;color:#fff;background:#333639;padding-block-start:env(safe-area-inset-top);padding-block-end:env(safe-area-inset-bottom)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}.t-header{display:flex;align-items:center;block-size:4rem;padding:0 1rem 0 1.5625rem;box-shadow:inset 0 -1px #535659}.t-title{margin:0;font:var(--tui-typography-body-m);white-space:nowrap;text-overflow:ellipsis;padding-inline-end:.3125rem;overflow:hidden}.t-actions{display:flex;margin-inline-start:auto}.t-close{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;margin-inline-start:.75rem;color:#fff;background:#ffffff52}.t-close:hover{background:#fff6}.t-content{block-size:calc(100% - 4rem);overflow:hidden}.t-iframe{inline-size:100%;block-size:100%}\n"] }]
|
|
28
28
|
}] });
|
|
@@ -46,10 +46,10 @@ class TuiPdfViewerService extends TuiModalService {
|
|
|
46
46
|
open(content, options = {}) {
|
|
47
47
|
return super.open(content, options);
|
|
48
48
|
}
|
|
49
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
50
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
49
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiPdfViewerService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
50
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiPdfViewerService, providedIn: 'root' }); }
|
|
51
51
|
}
|
|
52
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
52
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiPdfViewerService, decorators: [{
|
|
53
53
|
type: Injectable,
|
|
54
54
|
args: [{ providedIn: 'root' }]
|
|
55
55
|
}] });
|
|
@@ -58,10 +58,10 @@ class TuiPdfViewerDirective {
|
|
|
58
58
|
constructor() {
|
|
59
59
|
this.tuiPdfViewerOptions = input({});
|
|
60
60
|
}
|
|
61
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
62
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
61
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiPdfViewerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
62
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: TuiPdfViewerDirective, isStandalone: true, selector: "ng-template[tuiPdfViewer]", inputs: { tuiPdfViewerOptions: { classPropertyName: "tuiPdfViewerOptions", publicName: "tuiPdfViewerOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiAsPortal(TuiPdfViewerService)], hostDirectives: [{ directive: i1$1.TuiPortalDirective, inputs: ["options", "tuiPdfViewerOptions", "open", "tuiPdfViewer"], outputs: ["openChange", "tuiPdfViewerChange"] }], ngImport: i0 }); }
|
|
63
63
|
}
|
|
64
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
64
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiPdfViewerDirective, decorators: [{
|
|
65
65
|
type: Directive,
|
|
66
66
|
args: [{
|
|
67
67
|
selector: 'ng-template[tuiPdfViewer]',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@taiga-ui/legacy",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.1.0-canary.71f34cd",
|
|
4
4
|
"description": "Legacy Taiga UI entities from the previous major release to simplify migration",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"legacy",
|
|
@@ -15,16 +15,16 @@
|
|
|
15
15
|
"license": "Apache-2.0",
|
|
16
16
|
"contributors": [
|
|
17
17
|
{
|
|
18
|
-
"
|
|
19
|
-
"
|
|
18
|
+
"email": "alexander@inkin.ru",
|
|
19
|
+
"name": "Alex Inkin"
|
|
20
20
|
},
|
|
21
21
|
{
|
|
22
|
-
"
|
|
23
|
-
"
|
|
22
|
+
"email": "vladimir.potekh@gmail.com",
|
|
23
|
+
"name": "Vladimir Potekhin"
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
|
-
"
|
|
27
|
-
"
|
|
26
|
+
"email": "nikita.s.barsukov@gmail.com",
|
|
27
|
+
"name": "Nikita Barsukov"
|
|
28
28
|
}
|
|
29
29
|
],
|
|
30
30
|
"exports": {
|
|
@@ -59,8 +59,8 @@
|
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
61
61
|
"@angular/core": ">=19.0.0",
|
|
62
|
-
"@taiga-ui/cdk": "5.
|
|
63
|
-
"@taiga-ui/core": "5.
|
|
62
|
+
"@taiga-ui/cdk": "5.1.0",
|
|
63
|
+
"@taiga-ui/core": "5.1.0",
|
|
64
64
|
"@taiga-ui/polymorpheus": "^5.0.0"
|
|
65
65
|
},
|
|
66
66
|
"module": "fesm2022/taiga-ui-legacy.mjs",
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
html {
|
|
2
|
+
block-size: 100%;
|
|
3
|
+
font-size: 16px;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
body {
|
|
7
|
+
block-size: 100%;
|
|
8
|
+
min-block-size: 100%;
|
|
9
|
+
text-rendering: optimizeLegibility;
|
|
10
|
+
-webkit-font-smoothing: antialiased;
|
|
11
|
+
-moz-osx-font-smoothing: grayscale;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
html,
|
|
15
|
+
body {
|
|
16
|
+
-webkit-overflow-scrolling: touch;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
ul,
|
|
20
|
+
ol {
|
|
21
|
+
list-style: none;
|
|
22
|
+
padding: 0;
|
|
23
|
+
margin: 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
table {
|
|
27
|
+
border-collapse: collapse;
|
|
28
|
+
border-spacing: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
input,
|
|
32
|
+
button,
|
|
33
|
+
select,
|
|
34
|
+
textarea {
|
|
35
|
+
font-family: inherit;
|
|
36
|
+
color: inherit;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
iframe {
|
|
40
|
+
border: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
// Resolve bug with use elements in IE11
|
|
44
|
+
// https://stackoverflow.com/questions/30653533/ie-11-crashes-when-using-dynamic-svg-elements
|
|
45
|
+
svg use {
|
|
46
|
+
pointer-events: none;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
::selection {
|
|
50
|
+
background-color: var(--tui-service-selection-background);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
::-ms-clear {
|
|
54
|
+
display: none;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
::-ms-reveal {
|
|
58
|
+
display: none;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// @note: only safari 16+
|
|
62
|
+
@supports (-webkit-hyphens: none) and (text-align-last: right) {
|
|
63
|
+
/**
|
|
64
|
+
* @descriptions:
|
|
65
|
+
* Safari 16 has bug when for some reason,
|
|
66
|
+
* the ::after blocks aren't removed
|
|
67
|
+
* after the destruction of the parent class
|
|
68
|
+
*/
|
|
69
|
+
::after {
|
|
70
|
+
content: none;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
.tui-container {
|
|
2
|
+
margin-inline-end: auto;
|
|
3
|
+
margin-inline-start: auto;
|
|
4
|
+
|
|
5
|
+
&.tui-container_adaptive {
|
|
6
|
+
@media @tui-desktop-lg-min {
|
|
7
|
+
inline-size: 69rem;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@media @tui-desktop {
|
|
11
|
+
inline-size: 51.5rem;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@media @tui-mobile {
|
|
15
|
+
inline-size: 100%;
|
|
16
|
+
padding: 0 1rem;
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@media @tui-desktop-lg-min {
|
|
22
|
+
inline-size: 69rem;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@media @tui-desktop {
|
|
26
|
+
inline-size: 51.5rem;
|
|
27
|
+
padding: 0 3rem;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&_menu {
|
|
31
|
+
@media @tui-desktop-lg-min {
|
|
32
|
+
inline-size: 69rem;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@media @tui-desktop-interval {
|
|
36
|
+
inline-size: 51.5rem;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@media @tui-mobile {
|
|
40
|
+
inline-size: auto;
|
|
41
|
+
padding: 0 1rem;
|
|
42
|
+
box-sizing: border-box;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&_fullwidth {
|
|
47
|
+
inline-size: auto;
|
|
48
|
+
padding: 0 1.5rem;
|
|
49
|
+
|
|
50
|
+
@media @tui-mobile {
|
|
51
|
+
padding: 0 1rem;
|
|
52
|
+
box-sizing: border-box;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&_fixed {
|
|
57
|
+
@media @tui-desktop {
|
|
58
|
+
inline-size: 69rem;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
@fields-space: 1.25rem;
|
|
2
|
+
@fields-space-mobile: 1rem;
|
|
3
|
+
@fields-space-large: 2rem;
|
|
4
|
+
@fields-space-large-mobile: 1.5rem;
|
|
5
|
+
|
|
6
|
+
.tui-form {
|
|
7
|
+
&__header {
|
|
8
|
+
font: var(--tui-typography-heading-h5);
|
|
9
|
+
margin-block-start: @fields-space-large;
|
|
10
|
+
margin-block-end: @fields-space;
|
|
11
|
+
|
|
12
|
+
@media @tui-mobile {
|
|
13
|
+
font: var(--tui-typography-body-l);
|
|
14
|
+
font-weight: bold;
|
|
15
|
+
margin-block-end: @fields-space-mobile;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// TODO: drop in v5
|
|
19
|
+
&_margin-top_none,
|
|
20
|
+
&_margin-block-start_none {
|
|
21
|
+
margin-block-start: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// TODO: drop in v5
|
|
25
|
+
&_margin-bottom_none,
|
|
26
|
+
&_margin-block-end_none {
|
|
27
|
+
margin-block-end: 0;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// TODO: drop in v5
|
|
31
|
+
&_margin-bottom_small,
|
|
32
|
+
&_margin-block-end_small {
|
|
33
|
+
margin-block-end: @fields-space - 0.25rem;
|
|
34
|
+
|
|
35
|
+
@media @tui-mobile {
|
|
36
|
+
margin-block-end: @fields-space-mobile - 0.25rem;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&__row {
|
|
42
|
+
margin-block-start: @fields-space;
|
|
43
|
+
|
|
44
|
+
&:first-child {
|
|
45
|
+
margin-block-start: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&_multi-fields {
|
|
49
|
+
display: flex;
|
|
50
|
+
|
|
51
|
+
@media @tui-mobile {
|
|
52
|
+
flex-wrap: wrap;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&_half-width {
|
|
57
|
+
inline-size: ~'calc(50% - (@{fields-space} / 2))';
|
|
58
|
+
|
|
59
|
+
@media @tui-mobile {
|
|
60
|
+
inline-size: 100%;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&_checkboxes {
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-wrap: wrap;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@media @tui-mobile {
|
|
70
|
+
margin-block-start: @fields-space-mobile;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&__multi-field {
|
|
75
|
+
flex: 1 1 0;
|
|
76
|
+
min-inline-size: 0;
|
|
77
|
+
margin-inline-start: @fields-space;
|
|
78
|
+
|
|
79
|
+
&:first-child {
|
|
80
|
+
margin-inline-start: 0;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@media @tui-mobile {
|
|
84
|
+
flex-basis: 100%;
|
|
85
|
+
margin-block-start: @fields-space-mobile;
|
|
86
|
+
margin-inline-start: 0;
|
|
87
|
+
|
|
88
|
+
&:first-child {
|
|
89
|
+
margin-block-start: 0;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&__field-note {
|
|
95
|
+
font: var(--tui-typography-body-s);
|
|
96
|
+
margin-block-start: 0.25rem;
|
|
97
|
+
color: var(--tui-text-secondary);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&__field-checkbox {
|
|
101
|
+
margin-block-start: 0.5rem;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&__checkbox {
|
|
105
|
+
flex: ~'1 1 calc(50% - 0.625rem)';
|
|
106
|
+
|
|
107
|
+
&:nth-child(even) {
|
|
108
|
+
margin-inline-start: 1.25rem;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
&:nth-child(n + 3) {
|
|
112
|
+
margin-block-start: 1rem;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
&__buttons {
|
|
117
|
+
display: flex;
|
|
118
|
+
margin-block-start: @fields-space-large;
|
|
119
|
+
|
|
120
|
+
&_align_end {
|
|
121
|
+
justify-content: flex-end;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&_align_center {
|
|
125
|
+
justify-content: center;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
@media @tui-mobile {
|
|
129
|
+
flex-direction: column;
|
|
130
|
+
margin-block-start: @fields-space-large-mobile;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
&__button {
|
|
135
|
+
margin-inline-start: 0.75rem;
|
|
136
|
+
|
|
137
|
+
&:first-child {
|
|
138
|
+
margin-inline-start: 0;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@media @tui-mobile {
|
|
142
|
+
margin-block-start: 0.5rem;
|
|
143
|
+
margin-inline-start: 0;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|