@taiga-ui/addon-doc 5.0.0-canary.7f0a2ac → 5.0.0-canary.8b0b9ac
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.
|
@@ -400,7 +400,7 @@ class TuiDocDemo {
|
|
|
400
400
|
return this.urlSerializer.parse(this.locationRef.path());
|
|
401
401
|
}
|
|
402
402
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocDemo, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
403
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocDemo, isStandalone: true, selector: "tui-doc-demo", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.zoneless": "onMouseUp()" }, properties: { "class._sticky": "sticky()", "attr.tuiTheme": "theme()" } }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "resizable", first: true, predicate: TuiResizable, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"t-settings\">\n <label tuiLabel>\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"dark()\"\n (ngModelChange)=\"onModeChange($event)\"\n />\n <small>{{ texts[0] }}</small>\n </label>\n <label tuiLabel>\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"opaque\"\n (ngModelChange)=\"changeOpaque($event)\"\n />\n <small>{{ texts[1] }}</small>\n </label>\n</div>\n<div\n tuiResizable\n class=\"t-wrapper\"\n [class.t-wrapper_transparent]=\"!opaque\"\n [style.visibility]=\"rendered() ? 'visible' : 'hidden'\"\n>\n <div class=\"t-content\">\n <div\n #content\n id=\"demo-content\"\n >\n @if (form) {\n <form\n id=\"tui-demo-form\"\n [formGroup]=\"form\"\n >\n <ng-container [ngTemplateOutlet]=\"template() || null\" />\n </form>\n }\n <ng-content />\n </div>\n </div>\n <div\n class=\"t-resizer\"\n [tuiResizer]=\"[1, 0]\"\n (tuiSizeChange)=\"updateWidth($event[0])\"\n >\n <tui-icon icon=\"@tui.grip-vertical\" />\n </div>\n</div>\n@if (form) {\n <tui-expand [expanded]=\"expanded\">\n <ng-template tuiItem>\n <pre class=\"t-value\">Form data: {{ form.value | json }}</pre>\n </ng-template>\n </tui-expand>\n <div class=\"t-footer\">\n <button\n appearance=\"flat-grayscale\"\n automation-id=\"tui-demo-button__toggle-details\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-button\"\n [tuiChevron]=\"expanded\"\n (click)=\"toggleDetails()\"\n >\n {{ texts[2] }}\n </button>\n <tui-textfield\n tuiChevron\n tuiTextfieldAppearance=\"secondary-grayscale\"\n tuiTextfieldSize=\"s\"\n class=\"t-select\"\n [tuiTextfieldCleaner]=\"false\"\n >\n <input\n automation-id=\"tui-demo-select__expand-update-on\"\n tuiSelect\n [ngModel]=\"updateOn\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"updateOnChange($event)\"\n />\n <tui-data-list-wrapper\n *tuiDropdown\n [items]=\"updateOnVariants\"\n />\n </tui-textfield>\n <button\n appearance=\"secondary-grayscale\"\n automation-id=\"tui-demo-button__reset-state\"\n form=\"tui-demo-form\"\n size=\"s\"\n tuiButton\n type=\"reset\"\n >\n Reset\n </button>\n <button\n appearance=\"secondary-grayscale\"\n automation-id=\"tui-demo-button__submit-state\"\n form=\"tui-demo-form\"\n size=\"s\"\n tuiButton\n type=\"submit\"\n >\n Submit\n </button>\n </div>\n}\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:0 0 1.5rem;font:var(--tui-font-body-s);color:var(--tui-text-primary);background:var(--tui-background-base-alt);box-shadow:0 0 1rem .5rem var(--tui-background-base);border-radius:var(--tui-radius-m);overflow:hidden;box-sizing:border-box}:host :host-context([tuiTheme=\"dark\"]){background:var(--tui-background-elevation-2)}.t-settings{display:flex;gap:1rem;align-items:center;justify-content:flex-end;padding:.5rem .75rem .25rem}.t-wrapper{display:flex;max-inline-size:100%;min-block-size:6rem;inline-size:100%;min-inline-size:10rem;color:var(--tui-text-primary);background-color:var(--tui-background-base);padding:.25rem;border-radius:var(--tui-radius-m);box-sizing:border-box;box-shadow:inset 0 0 0 .25rem var(--tui-background-base-alt);overflow:hidden;pointer-events:auto}:host-context([tuiTheme=\"dark\"]) .t-wrapper{box-shadow:inset 0 0 0 .25rem var(--tui-background-elevation-2)}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-background-base-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-background-base-alt) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}@media screen and (max-width: 767.4px){.t-wrapper{min-block-size:auto}}.t-content{flex:1 1 0;min-inline-size:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width: 767.4px){.t-content{padding:1rem}}.t-footer{display:flex;gap:.25rem;padding:0 .25rem .25rem}.t-select{inline-size:6rem;margin-inline-start:auto}.t-value{flex:1;background:var(--tui-background-base);border-radius:var(--tui-radius-m);box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-base-alt);padding:.5rem .75rem 1rem;margin:0 0 -.25rem}:host-context([tuiTheme=\"dark\"]) .t-value{box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-elevation-2)}.t-resizer{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;display:flex;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;color:var(--tui-text-tertiary)}.t-resizer:hover,.t-resizer:active{color:var(--tui-text-secondary)}@media screen and (max-width: 767.4px){.t-resizer{display:none}}@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiItem, selector: "[tuiItem]" }, { kind: "pipe", type: TuiJsonPipe, name: "json" }, { kind: "directive", type: TuiResizable, selector: "[tuiResizable]" }, { kind: "directive", type: TuiResizer, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }, { kind: "directive", type: i3$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i4.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i5.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i5.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
403
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocDemo, isStandalone: true, selector: "tui-doc-demo", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.zoneless": "onMouseUp()" }, properties: { "class._sticky": "sticky()", "attr.tuiTheme": "theme()" } }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "resizable", first: true, predicate: TuiResizable, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"t-settings\">\n <label tuiLabel>\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"dark()\"\n (ngModelChange)=\"onModeChange($event)\"\n />\n <small>{{ texts[0] }}</small>\n </label>\n <label tuiLabel>\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"opaque\"\n (ngModelChange)=\"changeOpaque($event)\"\n />\n <small>{{ texts[1] }}</small>\n </label>\n</div>\n<div\n tuiResizable\n class=\"t-wrapper\"\n [class.t-wrapper_transparent]=\"!opaque\"\n [style.visibility]=\"rendered() ? 'visible' : 'hidden'\"\n>\n <div class=\"t-content\">\n <div\n #content\n id=\"demo-content\"\n >\n @if (form) {\n <form\n id=\"tui-demo-form\"\n [formGroup]=\"form\"\n >\n <ng-container [ngTemplateOutlet]=\"template() || null\" />\n </form>\n }\n <ng-content />\n </div>\n </div>\n <div\n class=\"t-resizer\"\n [tuiResizer]=\"[1, 0]\"\n (tuiSizeChange)=\"updateWidth($event[0])\"\n >\n <tui-icon icon=\"@tui.grip-vertical\" />\n </div>\n</div>\n@if (form) {\n <tui-expand [expanded]=\"expanded\">\n <ng-template tuiItem>\n <pre class=\"t-value\">Form data: {{ form.value | json }}</pre>\n </ng-template>\n </tui-expand>\n <div class=\"t-footer\">\n <button\n appearance=\"flat-grayscale\"\n automation-id=\"tui-demo-button__toggle-details\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-button\"\n [tuiChevron]=\"expanded\"\n (click)=\"toggleDetails()\"\n >\n {{ texts[2] }}\n </button>\n <tui-textfield\n tuiChevron\n tuiTextfieldAppearance=\"secondary-grayscale\"\n tuiTextfieldSize=\"s\"\n class=\"t-select\"\n [tuiTextfieldCleaner]=\"false\"\n >\n <input\n automation-id=\"tui-demo-select__expand-update-on\"\n tuiSelect\n [ngModel]=\"updateOn\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"updateOnChange($event)\"\n />\n <tui-data-list-wrapper\n *tuiDropdown\n [items]=\"updateOnVariants\"\n />\n </tui-textfield>\n <button\n appearance=\"secondary-grayscale\"\n automation-id=\"tui-demo-button__reset-state\"\n form=\"tui-demo-form\"\n size=\"s\"\n tuiButton\n type=\"reset\"\n >\n Reset\n </button>\n <button\n appearance=\"secondary-grayscale\"\n automation-id=\"tui-demo-button__submit-state\"\n form=\"tui-demo-form\"\n size=\"s\"\n tuiButton\n type=\"submit\"\n >\n Submit\n </button>\n </div>\n}\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:0 0 1.5rem;font:var(--tui-font-body-s);color:var(--tui-text-primary);background:var(--tui-background-base-alt);box-shadow:0 0 1rem .5rem var(--tui-background-base);border-radius:var(--tui-radius-m);overflow:hidden;box-sizing:border-box}:host[tuiTheme=dark]{box-shadow:none}:host :host-context([tuiTheme=\"dark\"]){background:var(--tui-background-elevation-2);box-shadow:0 0 1rem .5rem var(--tui-background-base)}:host :host-context([tuiTheme=\"dark\"])[tuiTheme=light]{box-shadow:none}.t-settings{display:flex;gap:1rem;align-items:center;justify-content:flex-end;padding:.5rem .75rem .25rem}.t-wrapper{display:flex;max-inline-size:100%;min-block-size:6rem;inline-size:100%;min-inline-size:10rem;color:var(--tui-text-primary);background-color:var(--tui-background-base);padding:.25rem;border-radius:var(--tui-radius-m);box-sizing:border-box;box-shadow:inset 0 0 0 .25rem var(--tui-background-base-alt);overflow:hidden;pointer-events:auto}:host-context([tuiTheme=\"dark\"]) .t-wrapper{box-shadow:inset 0 0 0 .25rem var(--tui-background-elevation-2)}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-background-base-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-background-base-alt) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}@media screen and (max-width: 767.4px){.t-wrapper{min-block-size:auto}}.t-content{flex:1 1 0;min-inline-size:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width: 767.4px){.t-content{padding:1rem}}.t-footer{display:flex;gap:.25rem;padding:0 .25rem .25rem}.t-select{inline-size:6rem;margin-inline-start:auto}.t-value{flex:1;background:var(--tui-background-base);border-radius:var(--tui-radius-m);box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-base-alt);padding:.5rem .75rem 1rem;margin:0 0 -.25rem}:host-context([tuiTheme=\"dark\"]) .t-value{box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-elevation-2)}.t-resizer{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;display:flex;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;color:var(--tui-text-tertiary)}.t-resizer:hover,.t-resizer:active{color:var(--tui-text-secondary)}@media screen and (max-width: 767.4px){.t-resizer{display:none}}@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiItem, selector: "[tuiItem]" }, { kind: "pipe", type: TuiJsonPipe, name: "json" }, { kind: "directive", type: TuiResizable, selector: "[tuiResizable]" }, { kind: "directive", type: TuiResizer, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }, { kind: "directive", type: i3$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i4.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i5.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i5.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
404
404
|
}
|
|
405
405
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocDemo, decorators: [{
|
|
406
406
|
type: Component,
|
|
@@ -425,7 +425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
425
425
|
'[attr.tuiTheme]': 'theme()',
|
|
426
426
|
'(window:resize)': 'onResize()',
|
|
427
427
|
'(document:mouseup.zoneless)': 'onMouseUp()',
|
|
428
|
-
}, template: "<div class=\"t-settings\">\n <label tuiLabel>\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"dark()\"\n (ngModelChange)=\"onModeChange($event)\"\n />\n <small>{{ texts[0] }}</small>\n </label>\n <label tuiLabel>\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"opaque\"\n (ngModelChange)=\"changeOpaque($event)\"\n />\n <small>{{ texts[1] }}</small>\n </label>\n</div>\n<div\n tuiResizable\n class=\"t-wrapper\"\n [class.t-wrapper_transparent]=\"!opaque\"\n [style.visibility]=\"rendered() ? 'visible' : 'hidden'\"\n>\n <div class=\"t-content\">\n <div\n #content\n id=\"demo-content\"\n >\n @if (form) {\n <form\n id=\"tui-demo-form\"\n [formGroup]=\"form\"\n >\n <ng-container [ngTemplateOutlet]=\"template() || null\" />\n </form>\n }\n <ng-content />\n </div>\n </div>\n <div\n class=\"t-resizer\"\n [tuiResizer]=\"[1, 0]\"\n (tuiSizeChange)=\"updateWidth($event[0])\"\n >\n <tui-icon icon=\"@tui.grip-vertical\" />\n </div>\n</div>\n@if (form) {\n <tui-expand [expanded]=\"expanded\">\n <ng-template tuiItem>\n <pre class=\"t-value\">Form data: {{ form.value | json }}</pre>\n </ng-template>\n </tui-expand>\n <div class=\"t-footer\">\n <button\n appearance=\"flat-grayscale\"\n automation-id=\"tui-demo-button__toggle-details\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-button\"\n [tuiChevron]=\"expanded\"\n (click)=\"toggleDetails()\"\n >\n {{ texts[2] }}\n </button>\n <tui-textfield\n tuiChevron\n tuiTextfieldAppearance=\"secondary-grayscale\"\n tuiTextfieldSize=\"s\"\n class=\"t-select\"\n [tuiTextfieldCleaner]=\"false\"\n >\n <input\n automation-id=\"tui-demo-select__expand-update-on\"\n tuiSelect\n [ngModel]=\"updateOn\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"updateOnChange($event)\"\n />\n <tui-data-list-wrapper\n *tuiDropdown\n [items]=\"updateOnVariants\"\n />\n </tui-textfield>\n <button\n appearance=\"secondary-grayscale\"\n automation-id=\"tui-demo-button__reset-state\"\n form=\"tui-demo-form\"\n size=\"s\"\n tuiButton\n type=\"reset\"\n >\n Reset\n </button>\n <button\n appearance=\"secondary-grayscale\"\n automation-id=\"tui-demo-button__submit-state\"\n form=\"tui-demo-form\"\n size=\"s\"\n tuiButton\n type=\"submit\"\n >\n Submit\n </button>\n </div>\n}\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:0 0 1.5rem;font:var(--tui-font-body-s);color:var(--tui-text-primary);background:var(--tui-background-base-alt);box-shadow:0 0 1rem .5rem var(--tui-background-base);border-radius:var(--tui-radius-m);overflow:hidden;box-sizing:border-box}:host :host-context([tuiTheme=\"dark\"]){background:var(--tui-background-elevation-2)}.t-settings{display:flex;gap:1rem;align-items:center;justify-content:flex-end;padding:.5rem .75rem .25rem}.t-wrapper{display:flex;max-inline-size:100%;min-block-size:6rem;inline-size:100%;min-inline-size:10rem;color:var(--tui-text-primary);background-color:var(--tui-background-base);padding:.25rem;border-radius:var(--tui-radius-m);box-sizing:border-box;box-shadow:inset 0 0 0 .25rem var(--tui-background-base-alt);overflow:hidden;pointer-events:auto}:host-context([tuiTheme=\"dark\"]) .t-wrapper{box-shadow:inset 0 0 0 .25rem var(--tui-background-elevation-2)}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-background-base-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-background-base-alt) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}@media screen and (max-width: 767.4px){.t-wrapper{min-block-size:auto}}.t-content{flex:1 1 0;min-inline-size:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width: 767.4px){.t-content{padding:1rem}}.t-footer{display:flex;gap:.25rem;padding:0 .25rem .25rem}.t-select{inline-size:6rem;margin-inline-start:auto}.t-value{flex:1;background:var(--tui-background-base);border-radius:var(--tui-radius-m);box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-base-alt);padding:.5rem .75rem 1rem;margin:0 0 -.25rem}:host-context([tuiTheme=\"dark\"]) .t-value{box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-elevation-2)}.t-resizer{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;display:flex;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;color:var(--tui-text-tertiary)}.t-resizer:hover,.t-resizer:active{color:var(--tui-text-secondary)}@media screen and (max-width: 767.4px){.t-resizer{display:none}}@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}\n"] }]
|
|
428
|
+
}, template: "<div class=\"t-settings\">\n <label tuiLabel>\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"dark()\"\n (ngModelChange)=\"onModeChange($event)\"\n />\n <small>{{ texts[0] }}</small>\n </label>\n <label tuiLabel>\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"opaque\"\n (ngModelChange)=\"changeOpaque($event)\"\n />\n <small>{{ texts[1] }}</small>\n </label>\n</div>\n<div\n tuiResizable\n class=\"t-wrapper\"\n [class.t-wrapper_transparent]=\"!opaque\"\n [style.visibility]=\"rendered() ? 'visible' : 'hidden'\"\n>\n <div class=\"t-content\">\n <div\n #content\n id=\"demo-content\"\n >\n @if (form) {\n <form\n id=\"tui-demo-form\"\n [formGroup]=\"form\"\n >\n <ng-container [ngTemplateOutlet]=\"template() || null\" />\n </form>\n }\n <ng-content />\n </div>\n </div>\n <div\n class=\"t-resizer\"\n [tuiResizer]=\"[1, 0]\"\n (tuiSizeChange)=\"updateWidth($event[0])\"\n >\n <tui-icon icon=\"@tui.grip-vertical\" />\n </div>\n</div>\n@if (form) {\n <tui-expand [expanded]=\"expanded\">\n <ng-template tuiItem>\n <pre class=\"t-value\">Form data: {{ form.value | json }}</pre>\n </ng-template>\n </tui-expand>\n <div class=\"t-footer\">\n <button\n appearance=\"flat-grayscale\"\n automation-id=\"tui-demo-button__toggle-details\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"t-button\"\n [tuiChevron]=\"expanded\"\n (click)=\"toggleDetails()\"\n >\n {{ texts[2] }}\n </button>\n <tui-textfield\n tuiChevron\n tuiTextfieldAppearance=\"secondary-grayscale\"\n tuiTextfieldSize=\"s\"\n class=\"t-select\"\n [tuiTextfieldCleaner]=\"false\"\n >\n <input\n automation-id=\"tui-demo-select__expand-update-on\"\n tuiSelect\n [ngModel]=\"updateOn\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"updateOnChange($event)\"\n />\n <tui-data-list-wrapper\n *tuiDropdown\n [items]=\"updateOnVariants\"\n />\n </tui-textfield>\n <button\n appearance=\"secondary-grayscale\"\n automation-id=\"tui-demo-button__reset-state\"\n form=\"tui-demo-form\"\n size=\"s\"\n tuiButton\n type=\"reset\"\n >\n Reset\n </button>\n <button\n appearance=\"secondary-grayscale\"\n automation-id=\"tui-demo-button__submit-state\"\n form=\"tui-demo-form\"\n size=\"s\"\n tuiButton\n type=\"submit\"\n >\n Submit\n </button>\n </div>\n}\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:0 0 1.5rem;font:var(--tui-font-body-s);color:var(--tui-text-primary);background:var(--tui-background-base-alt);box-shadow:0 0 1rem .5rem var(--tui-background-base);border-radius:var(--tui-radius-m);overflow:hidden;box-sizing:border-box}:host[tuiTheme=dark]{box-shadow:none}:host :host-context([tuiTheme=\"dark\"]){background:var(--tui-background-elevation-2);box-shadow:0 0 1rem .5rem var(--tui-background-base)}:host :host-context([tuiTheme=\"dark\"])[tuiTheme=light]{box-shadow:none}.t-settings{display:flex;gap:1rem;align-items:center;justify-content:flex-end;padding:.5rem .75rem .25rem}.t-wrapper{display:flex;max-inline-size:100%;min-block-size:6rem;inline-size:100%;min-inline-size:10rem;color:var(--tui-text-primary);background-color:var(--tui-background-base);padding:.25rem;border-radius:var(--tui-radius-m);box-sizing:border-box;box-shadow:inset 0 0 0 .25rem var(--tui-background-base-alt);overflow:hidden;pointer-events:auto}:host-context([tuiTheme=\"dark\"]) .t-wrapper{box-shadow:inset 0 0 0 .25rem var(--tui-background-elevation-2)}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-background-base-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-background-base-alt) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}@media screen and (max-width: 767.4px){.t-wrapper{min-block-size:auto}}.t-content{flex:1 1 0;min-inline-size:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width: 767.4px){.t-content{padding:1rem}}.t-footer{display:flex;gap:.25rem;padding:0 .25rem .25rem}.t-select{inline-size:6rem;margin-inline-start:auto}.t-value{flex:1;background:var(--tui-background-base);border-radius:var(--tui-radius-m);box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-base-alt);padding:.5rem .75rem 1rem;margin:0 0 -.25rem}:host-context([tuiTheme=\"dark\"]) .t-value{box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-elevation-2)}.t-resizer{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;display:flex;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;color:var(--tui-text-tertiary)}.t-resizer:hover,.t-resizer:active{color:var(--tui-text-secondary)}@media screen and (max-width: 767.4px){.t-resizer{display:none}}@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}\n"] }]
|
|
429
429
|
}] });
|
|
430
430
|
|
|
431
431
|
class TuiDocTab {
|
|
@@ -754,7 +754,7 @@ class TuiDocNavigation {
|
|
|
754
754
|
target.remove();
|
|
755
755
|
}
|
|
756
756
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
757
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocNavigation, isStandalone: true, selector: "tui-doc-navigation", host: { listeners: { "window:keydown": "onFocusSearch($event)" }, properties: { "class._open": "menuOpen" } }, providers: NAVIGATION_PROVIDERS, viewQueries: [{ propertyName: "searchInput", first: true, predicate: TuiInputDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (searchEnabled()) {\n <tui-textfield\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [iconStart]=\"docIcons.search\"\n [open]=\"open() && canOpen\"\n (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n (openChange)=\"open.set($event)\"\n >\n @if (!search.value) {\n <code class=\"t-slash\">/</code>\n }\n\n <input\n tuiInput\n class=\"t-prevent-ios-scroll\"\n [formControl]=\"search\"\n [placeholder]=\"searchText\"\n [tuiAutoFocus]=\"!!drawer\"\n />\n\n @if (canOpen) {\n <tui-data-list *tuiDropdown>\n @for (group of filtered(); track group) {\n <tui-opt-group [label]=\"labels[$index] || ''\">\n @for (item of group; track item) {\n @if (item.route.includes('://')) {\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n ></a>\n } @else {\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [fragment]=\"item.fragment\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n (click)=\"onClick()\"\n ></a>\n }\n }\n </tui-opt-group>\n }\n </tui-data-list>\n }\n </tui-textfield>\n}\n\n<nav class=\"t-navigation\">\n <tui-scrollbar class=\"t-scrollbar\">\n <tui-accordion\n size=\"s\"\n class=\"t-accordion\"\n [closeOthers]=\"false\"\n >\n @for (item of itemsWithoutSections; track item) {\n <ng-container\n [ngTemplateOutlet]=\"page\"\n [ngTemplateOutletContext]=\"{$implicit: item}\"\n />\n }\n @for (label of labels; track $index; let index = $index) {\n <button\n appearance=\"\"\n iconEnd=\"\"\n class=\"t-accordion-item\"\n [iconStart]=\"pagesIcons[label]\"\n [tuiAccordion]=\"!!openPagesArr[$index]\"\n (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n >\n <span class=\"t-label\">{{ label }}</span>\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesArr[$index]\"\n [icon]=\"icons.more\"\n [style.margin]=\"0\"\n />\n </button>\n <tui-expand [style.padding-block]=\"0\">\n <div\n *tuiItem\n class=\"t-section\"\n >\n @for (item of items[$index]; track $index) {\n <ng-container\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: index * 100 + $index}\"\n />\n }\n </div>\n </tui-expand>\n }\n </tui-accordion>\n\n <ng-template\n #page\n let-item\n >\n @if (item.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n ></a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n ></a>\n }\n </ng-template>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n @if (!item.subPages) {\n <ng-container\n [ngTemplateOutlet]=\"page\"\n [ngTemplateOutletContext]=\"{$implicit: item}\"\n />\n } @else {\n <div\n routerLinkActive\n class=\"t-subsection\"\n [routerLinkActiveOptions]=\"{exact: false}\"\n >\n @if (item.subPages) {\n <button\n tuiLink\n type=\"button\"\n class=\"t-sublink t-sublink_subsection\"\n (click)=\"onGroupClick(index)\"\n >\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n [icon]=\"icons.more\"\n />\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </button>\n }\n\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"!!openPagesGroupsArr[index]\"\n >\n <div class=\"t-section t-section_nested\">\n @for (subPage of $pages(item.subPages); track subPage) {\n @if (subPage.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [href]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [textContent]=\"subPage.title\"\n ></a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [fragment]=\"subPage.fragment\"\n [routerLink]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [textContent]=\"subPage.title\"\n [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n ></a>\n }\n }\n </div>\n </tui-expand>\n </div>\n }\n </ng-template>\n </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;padding:0 .25rem;background:var(--tui-background-base);--tui-stroke-width: .09375rem}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;flex-wrap:wrap;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}:host-context(tui-drawer){margin:-1.25rem -1.5rem}:host-context(tui-drawer) .t-scrollbar{display:contents}.t-accordion{inline-size:auto;margin:.5rem .375rem 1.5rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-label{margin-inline-start:1.1875rem;font-weight:700}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_nested{margin:0 .75rem;clip-path:inset(.5rem 0)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.625rem}.t-sublink{font:var(--tui-font-body-s);padding-block:.375rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{font:var(--tui-font-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:.625rem 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:.875rem}.t-accordion>.t-sublink:after{opacity:0}.t-sublink_small{margin-inline-start:1rem;padding-inline:0}.t-sublink_subsection{margin-inline-start:0!important}.t-sublink_subsection:before{opacity:0}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary);font-weight:700}.t-sublink.t-sublink.t-sublink_active:after{position:absolute;display:block;inset-block:.5rem;inset-inline-start:-1rem;block-size:auto;inline-size:.1875rem;padding:0;margin-inline-start:-1px;border-radius:1rem;background:var(--tui-text-primary)}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;top:0;bottom:0;display:block;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal)}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin-inline:-.625rem .6875rem;vertical-align:sub}.t-chevron_active{transform:rotate(90deg)}.t-accordion-item{block-size:2.5rem}.t-accordion-item:before{position:relative;inset-inline-start:.5625rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$1.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "size"] }, { kind: "directive", type: i2$1.TuiAccordionDirective, selector: "button[tuiAccordion]", inputs: ["tuiAccordion"], outputs: ["tuiAccordionChange"] }, { kind: "component", type: i3$2.TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: i4$1.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: i2$2.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i2$2.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i2$2.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "directive", type: TuiDocScrollIntoViewLink, selector: "[tuiDocScrollIntoViewLink]", inputs: ["tuiDocScrollIntoViewLink"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: i5.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i5.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i6$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
757
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocNavigation, isStandalone: true, selector: "tui-doc-navigation", host: { listeners: { "window:keydown": "onFocusSearch($event)" }, properties: { "class._open": "menuOpen" } }, providers: NAVIGATION_PROVIDERS, viewQueries: [{ propertyName: "searchInput", first: true, predicate: TuiInputDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (searchEnabled()) {\n <tui-textfield\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [iconStart]=\"docIcons.search\"\n [open]=\"open() && canOpen\"\n (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n (openChange)=\"open.set($event)\"\n >\n @if (!search.value) {\n <code class=\"t-slash\">/</code>\n }\n\n <input\n tuiInput\n class=\"t-prevent-ios-scroll\"\n [formControl]=\"search\"\n [placeholder]=\"searchText\"\n [tuiAutoFocus]=\"!!drawer\"\n />\n\n @if (canOpen) {\n <tui-data-list *tuiDropdown>\n @for (group of filtered(); track group) {\n <tui-opt-group [label]=\"labels[$index] || ''\">\n @for (item of group; track item) {\n @if (item.route.includes('://')) {\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n ></a>\n } @else {\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [fragment]=\"item.fragment\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n (click)=\"onClick()\"\n ></a>\n }\n }\n </tui-opt-group>\n }\n </tui-data-list>\n }\n </tui-textfield>\n}\n\n<nav class=\"t-navigation\">\n <tui-scrollbar class=\"t-scrollbar\">\n <tui-accordion\n size=\"s\"\n class=\"t-accordion\"\n [closeOthers]=\"false\"\n >\n @for (item of itemsWithoutSections; track item) {\n <ng-container\n [ngTemplateOutlet]=\"page\"\n [ngTemplateOutletContext]=\"{$implicit: item}\"\n />\n }\n @for (label of labels; track $index; let index = $index) {\n <button\n appearance=\"\"\n iconEnd=\"\"\n class=\"t-accordion-item\"\n [iconStart]=\"pagesIcons[label]\"\n [tuiAccordion]=\"!!openPagesArr[$index]\"\n (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n >\n <span class=\"t-label\">{{ label }}</span>\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesArr[$index]\"\n [icon]=\"icons.more\"\n [style.margin]=\"0\"\n />\n </button>\n <tui-expand [style.padding-block]=\"0\">\n <div\n *tuiItem\n class=\"t-section\"\n >\n @for (item of items[$index]; track $index) {\n <ng-container\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: index * 100 + $index}\"\n />\n }\n </div>\n </tui-expand>\n }\n </tui-accordion>\n\n <ng-template\n #page\n let-item\n >\n @if (item.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n ></a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n ></a>\n }\n </ng-template>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n @if (!item.subPages) {\n <ng-container\n [ngTemplateOutlet]=\"page\"\n [ngTemplateOutletContext]=\"{$implicit: item}\"\n />\n } @else {\n <div\n routerLinkActive\n class=\"t-subsection\"\n [routerLinkActiveOptions]=\"{exact: false}\"\n >\n @if (item.subPages) {\n <button\n tuiLink\n type=\"button\"\n class=\"t-sublink t-sublink_subsection\"\n (click)=\"onGroupClick(index)\"\n >\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n [icon]=\"icons.more\"\n />\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </button>\n }\n\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"!!openPagesGroupsArr[index]\"\n >\n <div class=\"t-section t-section_nested\">\n @for (subPage of $pages(item.subPages); track subPage) {\n @if (subPage.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [href]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [textContent]=\"subPage.title\"\n ></a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [fragment]=\"subPage.fragment\"\n [routerLink]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [textContent]=\"subPage.title\"\n [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n ></a>\n }\n }\n </div>\n </tui-expand>\n </div>\n }\n </ng-template>\n </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;padding:0 .25rem;background:var(--tui-background-base);--tui-stroke-width: .09375rem}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;flex-wrap:wrap;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}:host-context(tui-drawer){margin:-1.25rem -1.5rem}:host-context(tui-drawer) .t-scrollbar{display:contents}.t-accordion{inline-size:auto;margin:.5rem .375rem 1.5rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-label{margin-inline-start:1.1875rem;font-weight:700}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_nested{margin:0 .75rem;clip-path:inset(.5rem 0)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.625rem}.t-sublink{font:var(--tui-font-body-s);padding-block:.5rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{font:var(--tui-font-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:.625rem 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:.875rem}.t-accordion>.t-sublink:after{opacity:0}.t-sublink_small{margin-inline-start:1rem;padding-inline:0}.t-sublink_subsection{margin-inline-start:0!important}.t-sublink_subsection:before{opacity:0}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary);font-weight:700}.t-sublink.t-sublink.t-sublink_active:after{position:absolute;display:block;inset-block:.5rem;inset-inline-start:-1rem;block-size:auto;inline-size:.1875rem;padding:0;margin-inline-start:-1px;border-radius:1rem;background:var(--tui-text-primary)}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;top:0;bottom:0;display:block;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal)}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin-inline:-.625rem .6875rem;vertical-align:sub}.t-chevron_active{transform:rotate(90deg)}.t-accordion-item{block-size:2.5rem}.t-accordion-item:before{position:relative;inset-inline-start:.5625rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$1.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "size"] }, { kind: "directive", type: i2$1.TuiAccordionDirective, selector: "button[tuiAccordion]", inputs: ["tuiAccordion"], outputs: ["tuiAccordionChange"] }, { kind: "component", type: i3$2.TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: i4$1.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: i2$2.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i2$2.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i2$2.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "directive", type: TuiDocScrollIntoViewLink, selector: "[tuiDocScrollIntoViewLink]", inputs: ["tuiDocScrollIntoViewLink"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: i5.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i5.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i6$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
758
758
|
}
|
|
759
759
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocNavigation, decorators: [{
|
|
760
760
|
type: Component,
|
|
@@ -776,7 +776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
776
776
|
], changeDetection: ChangeDetectionStrategy.OnPush, providers: NAVIGATION_PROVIDERS, host: {
|
|
777
777
|
'[class._open]': 'menuOpen',
|
|
778
778
|
'(window:keydown)': 'onFocusSearch($event)',
|
|
779
|
-
}, template: "@if (searchEnabled()) {\n <tui-textfield\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [iconStart]=\"docIcons.search\"\n [open]=\"open() && canOpen\"\n (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n (openChange)=\"open.set($event)\"\n >\n @if (!search.value) {\n <code class=\"t-slash\">/</code>\n }\n\n <input\n tuiInput\n class=\"t-prevent-ios-scroll\"\n [formControl]=\"search\"\n [placeholder]=\"searchText\"\n [tuiAutoFocus]=\"!!drawer\"\n />\n\n @if (canOpen) {\n <tui-data-list *tuiDropdown>\n @for (group of filtered(); track group) {\n <tui-opt-group [label]=\"labels[$index] || ''\">\n @for (item of group; track item) {\n @if (item.route.includes('://')) {\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n ></a>\n } @else {\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [fragment]=\"item.fragment\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n (click)=\"onClick()\"\n ></a>\n }\n }\n </tui-opt-group>\n }\n </tui-data-list>\n }\n </tui-textfield>\n}\n\n<nav class=\"t-navigation\">\n <tui-scrollbar class=\"t-scrollbar\">\n <tui-accordion\n size=\"s\"\n class=\"t-accordion\"\n [closeOthers]=\"false\"\n >\n @for (item of itemsWithoutSections; track item) {\n <ng-container\n [ngTemplateOutlet]=\"page\"\n [ngTemplateOutletContext]=\"{$implicit: item}\"\n />\n }\n @for (label of labels; track $index; let index = $index) {\n <button\n appearance=\"\"\n iconEnd=\"\"\n class=\"t-accordion-item\"\n [iconStart]=\"pagesIcons[label]\"\n [tuiAccordion]=\"!!openPagesArr[$index]\"\n (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n >\n <span class=\"t-label\">{{ label }}</span>\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesArr[$index]\"\n [icon]=\"icons.more\"\n [style.margin]=\"0\"\n />\n </button>\n <tui-expand [style.padding-block]=\"0\">\n <div\n *tuiItem\n class=\"t-section\"\n >\n @for (item of items[$index]; track $index) {\n <ng-container\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: index * 100 + $index}\"\n />\n }\n </div>\n </tui-expand>\n }\n </tui-accordion>\n\n <ng-template\n #page\n let-item\n >\n @if (item.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n ></a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n ></a>\n }\n </ng-template>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n @if (!item.subPages) {\n <ng-container\n [ngTemplateOutlet]=\"page\"\n [ngTemplateOutletContext]=\"{$implicit: item}\"\n />\n } @else {\n <div\n routerLinkActive\n class=\"t-subsection\"\n [routerLinkActiveOptions]=\"{exact: false}\"\n >\n @if (item.subPages) {\n <button\n tuiLink\n type=\"button\"\n class=\"t-sublink t-sublink_subsection\"\n (click)=\"onGroupClick(index)\"\n >\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n [icon]=\"icons.more\"\n />\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </button>\n }\n\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"!!openPagesGroupsArr[index]\"\n >\n <div class=\"t-section t-section_nested\">\n @for (subPage of $pages(item.subPages); track subPage) {\n @if (subPage.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [href]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [textContent]=\"subPage.title\"\n ></a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [fragment]=\"subPage.fragment\"\n [routerLink]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [textContent]=\"subPage.title\"\n [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n ></a>\n }\n }\n </div>\n </tui-expand>\n </div>\n }\n </ng-template>\n </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;padding:0 .25rem;background:var(--tui-background-base);--tui-stroke-width: .09375rem}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;flex-wrap:wrap;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}:host-context(tui-drawer){margin:-1.25rem -1.5rem}:host-context(tui-drawer) .t-scrollbar{display:contents}.t-accordion{inline-size:auto;margin:.5rem .375rem 1.5rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-label{margin-inline-start:1.1875rem;font-weight:700}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_nested{margin:0 .75rem;clip-path:inset(.5rem 0)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.625rem}.t-sublink{font:var(--tui-font-body-s);padding-block:.375rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{font:var(--tui-font-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:.625rem 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:.875rem}.t-accordion>.t-sublink:after{opacity:0}.t-sublink_small{margin-inline-start:1rem;padding-inline:0}.t-sublink_subsection{margin-inline-start:0!important}.t-sublink_subsection:before{opacity:0}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary);font-weight:700}.t-sublink.t-sublink.t-sublink_active:after{position:absolute;display:block;inset-block:.5rem;inset-inline-start:-1rem;block-size:auto;inline-size:.1875rem;padding:0;margin-inline-start:-1px;border-radius:1rem;background:var(--tui-text-primary)}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;top:0;bottom:0;display:block;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal)}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin-inline:-.625rem .6875rem;vertical-align:sub}.t-chevron_active{transform:rotate(90deg)}.t-accordion-item{block-size:2.5rem}.t-accordion-item:before{position:relative;inset-inline-start:.5625rem;font-size:1rem}\n"] }]
|
|
779
|
+
}, template: "@if (searchEnabled()) {\n <tui-textfield\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [iconStart]=\"docIcons.search\"\n [open]=\"open() && canOpen\"\n (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n (openChange)=\"open.set($event)\"\n >\n @if (!search.value) {\n <code class=\"t-slash\">/</code>\n }\n\n <input\n tuiInput\n class=\"t-prevent-ios-scroll\"\n [formControl]=\"search\"\n [placeholder]=\"searchText\"\n [tuiAutoFocus]=\"!!drawer\"\n />\n\n @if (canOpen) {\n <tui-data-list *tuiDropdown>\n @for (group of filtered(); track group) {\n <tui-opt-group [label]=\"labels[$index] || ''\">\n @for (item of group; track item) {\n @if (item.route.includes('://')) {\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n ></a>\n } @else {\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [fragment]=\"item.fragment\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n (click)=\"onClick()\"\n ></a>\n }\n }\n </tui-opt-group>\n }\n </tui-data-list>\n }\n </tui-textfield>\n}\n\n<nav class=\"t-navigation\">\n <tui-scrollbar class=\"t-scrollbar\">\n <tui-accordion\n size=\"s\"\n class=\"t-accordion\"\n [closeOthers]=\"false\"\n >\n @for (item of itemsWithoutSections; track item) {\n <ng-container\n [ngTemplateOutlet]=\"page\"\n [ngTemplateOutletContext]=\"{$implicit: item}\"\n />\n }\n @for (label of labels; track $index; let index = $index) {\n <button\n appearance=\"\"\n iconEnd=\"\"\n class=\"t-accordion-item\"\n [iconStart]=\"pagesIcons[label]\"\n [tuiAccordion]=\"!!openPagesArr[$index]\"\n (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n >\n <span class=\"t-label\">{{ label }}</span>\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesArr[$index]\"\n [icon]=\"icons.more\"\n [style.margin]=\"0\"\n />\n </button>\n <tui-expand [style.padding-block]=\"0\">\n <div\n *tuiItem\n class=\"t-section\"\n >\n @for (item of items[$index]; track $index) {\n <ng-container\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: index * 100 + $index}\"\n />\n }\n </div>\n </tui-expand>\n }\n </tui-accordion>\n\n <ng-template\n #page\n let-item\n >\n @if (item.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n ></a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [textContent]=\"item.title\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n ></a>\n }\n </ng-template>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n @if (!item.subPages) {\n <ng-container\n [ngTemplateOutlet]=\"page\"\n [ngTemplateOutletContext]=\"{$implicit: item}\"\n />\n } @else {\n <div\n routerLinkActive\n class=\"t-subsection\"\n [routerLinkActiveOptions]=\"{exact: false}\"\n >\n @if (item.subPages) {\n <button\n tuiLink\n type=\"button\"\n class=\"t-sublink t-sublink_subsection\"\n (click)=\"onGroupClick(index)\"\n >\n <tui-icon\n class=\"t-chevron\"\n [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n [icon]=\"icons.more\"\n />\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </button>\n }\n\n <tui-expand\n class=\"t-expand\"\n [expanded]=\"!!openPagesGroupsArr[index]\"\n >\n <div class=\"t-section t-section_nested\">\n @for (subPage of $pages(item.subPages); track subPage) {\n @if (subPage.route.includes('://')) {\n <a\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [href]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [textContent]=\"subPage.title\"\n ></a>\n } @else {\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [fragment]=\"subPage.fragment\"\n [routerLink]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n [textContent]=\"subPage.title\"\n [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n ></a>\n }\n }\n </div>\n </tui-expand>\n </div>\n }\n </ng-template>\n </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;padding:0 .25rem;background:var(--tui-background-base);--tui-stroke-width: .09375rem}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;flex-wrap:wrap;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}:host-context(tui-drawer){margin:-1.25rem -1.5rem}:host-context(tui-drawer) .t-scrollbar{display:contents}.t-accordion{inline-size:auto;margin:.5rem .375rem 1.5rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-label{margin-inline-start:1.1875rem;font-weight:700}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_nested{margin:0 .75rem;clip-path:inset(.5rem 0)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.625rem}.t-sublink{font:var(--tui-font-body-s);padding-block:.5rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{font:var(--tui-font-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:.625rem 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:.875rem}.t-accordion>.t-sublink:after{opacity:0}.t-sublink_small{margin-inline-start:1rem;padding-inline:0}.t-sublink_subsection{margin-inline-start:0!important}.t-sublink_subsection:before{opacity:0}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary);font-weight:700}.t-sublink.t-sublink.t-sublink_active:after{position:absolute;display:block;inset-block:.5rem;inset-inline-start:-1rem;block-size:auto;inline-size:.1875rem;padding:0;margin-inline-start:-1px;border-radius:1rem;background:var(--tui-text-primary)}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;top:0;bottom:0;display:block;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal)}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin-inline:-.625rem .6875rem;vertical-align:sub}.t-chevron_active{transform:rotate(90deg)}.t-accordion-item{block-size:2.5rem}.t-accordion-item:before{position:relative;inset-inline-start:.5625rem;font-size:1rem}\n"] }]
|
|
780
780
|
}], ctorParameters: () => [] });
|
|
781
781
|
|
|
782
782
|
class TuiDocHeader {
|
|
@@ -937,11 +937,11 @@ class TuiDocToc {
|
|
|
937
937
|
'';
|
|
938
938
|
}
|
|
939
939
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocToc, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
940
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocToc, isStandalone: true, selector: "tui-doc-toc", host: { listeners: { "document:tui-example": "onExample($event.detail)" } }, ngImport: i0, template: "@if (toc().length > 1) {\n <h2 tuiTitle=\"s\">\n <b>{{ text.toc }}</b>\n </h2>\n <nav>\n @for (item of toc(); track $index) {\n <a\n appearance=\"action-grayscale\"\n routerLink=\".\"\n tuiLink\n type=\"button\"\n [class._active]=\"isActive(item)\"\n [fragment]=\"item | tuiKebab\"\n [relativeTo]=\"route.firstChild ?? route\"\n >\n {{ item }}\n </a>\n }\n </nav>\n @if (seeAlso.length) {\n <h2 tuiTitle=\"s\">\n <b>{{ text.seeAlso }}</b>\n </h2>\n @for (item of seeAlso; track $index) {\n <a\n tuiLink\n [innerText]=\"item\"\n [routerLink]=\"getRouterLink(item)\"\n ></a>\n @if (!$last) {\n <span>{{ ', ' }}</span>\n }\n }\n }\n}\n", styles: [":host{position:sticky;top:6rem;display:block;float:
|
|
940
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocToc, isStandalone: true, selector: "tui-doc-toc", host: { listeners: { "document:tui-example": "onExample($event.detail)" } }, ngImport: i0, template: "@if (toc().length > 1) {\n <h2 tuiTitle=\"s\">\n <b>{{ text.toc }}</b>\n </h2>\n <nav>\n @for (item of toc(); track $index) {\n <a\n appearance=\"action-grayscale\"\n routerLink=\".\"\n tuiLink\n type=\"button\"\n [class._active]=\"isActive(item)\"\n [fragment]=\"item | tuiKebab\"\n [relativeTo]=\"route.firstChild ?? route\"\n >\n {{ item }}\n </a>\n }\n </nav>\n @if (seeAlso.length) {\n <h2 tuiTitle=\"s\">\n <b>{{ text.seeAlso }}</b>\n </h2>\n @for (item of seeAlso; track $index) {\n <a\n tuiLink\n [innerText]=\"item\"\n [routerLink]=\"getRouterLink(item)\"\n ></a>\n @if (!$last) {\n <span>{{ ', ' }}</span>\n }\n }\n }\n}\n", styles: [":host{position:sticky;top:6rem;display:block;float:right;inline-size:14rem;margin-inline-start:5rem;font:var(--tui-font-body-s)}@supports (float: inline-end){:host{float:inline-end}}:host:empty{display:none}@media screen and (max-width: 1279.4px){:host{display:none}}nav{display:flex;flex-direction:column;box-shadow:inset 1px 0 var(--tui-border-normal);margin:1rem 0 2rem;clip-path:inset(.5rem -1rem)}nav [tuiLink]{position:relative;padding:.375rem 1rem}nav [tuiLink]._active{font-weight:700;color:var(--tui-text-primary)}nav [tuiLink]._active:before{position:absolute;display:block;inset-inline-start:-1px;inset-block:.5rem;inline-size:.1875rem;block-size:1rem;background:var(--tui-text-primary);border-radius:1rem;padding:0}[tuiTitle]{margin:.5rem 0}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: TuiDocKebabPipe, name: "tuiKebab" }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
941
941
|
}
|
|
942
942
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocToc, decorators: [{
|
|
943
943
|
type: Component,
|
|
944
|
-
args: [{ selector: 'tui-doc-toc', imports: [RouterLink, TuiDocKebabPipe, TuiLink, TuiTitle], changeDetection: ChangeDetectionStrategy.OnPush, host: { '(document:tui-example)': 'onExample($event.detail)' }, template: "@if (toc().length > 1) {\n <h2 tuiTitle=\"s\">\n <b>{{ text.toc }}</b>\n </h2>\n <nav>\n @for (item of toc(); track $index) {\n <a\n appearance=\"action-grayscale\"\n routerLink=\".\"\n tuiLink\n type=\"button\"\n [class._active]=\"isActive(item)\"\n [fragment]=\"item | tuiKebab\"\n [relativeTo]=\"route.firstChild ?? route\"\n >\n {{ item }}\n </a>\n }\n </nav>\n @if (seeAlso.length) {\n <h2 tuiTitle=\"s\">\n <b>{{ text.seeAlso }}</b>\n </h2>\n @for (item of seeAlso; track $index) {\n <a\n tuiLink\n [innerText]=\"item\"\n [routerLink]=\"getRouterLink(item)\"\n ></a>\n @if (!$last) {\n <span>{{ ', ' }}</span>\n }\n }\n }\n}\n", styles: [":host{position:sticky;top:6rem;display:block;float:
|
|
944
|
+
args: [{ selector: 'tui-doc-toc', imports: [RouterLink, TuiDocKebabPipe, TuiLink, TuiTitle], changeDetection: ChangeDetectionStrategy.OnPush, host: { '(document:tui-example)': 'onExample($event.detail)' }, template: "@if (toc().length > 1) {\n <h2 tuiTitle=\"s\">\n <b>{{ text.toc }}</b>\n </h2>\n <nav>\n @for (item of toc(); track $index) {\n <a\n appearance=\"action-grayscale\"\n routerLink=\".\"\n tuiLink\n type=\"button\"\n [class._active]=\"isActive(item)\"\n [fragment]=\"item | tuiKebab\"\n [relativeTo]=\"route.firstChild ?? route\"\n >\n {{ item }}\n </a>\n }\n </nav>\n @if (seeAlso.length) {\n <h2 tuiTitle=\"s\">\n <b>{{ text.seeAlso }}</b>\n </h2>\n @for (item of seeAlso; track $index) {\n <a\n tuiLink\n [innerText]=\"item\"\n [routerLink]=\"getRouterLink(item)\"\n ></a>\n @if (!$last) {\n <span>{{ ', ' }}</span>\n }\n }\n }\n}\n", styles: [":host{position:sticky;top:6rem;display:block;float:right;inline-size:14rem;margin-inline-start:5rem;font:var(--tui-font-body-s)}@supports (float: inline-end){:host{float:inline-end}}:host:empty{display:none}@media screen and (max-width: 1279.4px){:host{display:none}}nav{display:flex;flex-direction:column;box-shadow:inset 1px 0 var(--tui-border-normal);margin:1rem 0 2rem;clip-path:inset(.5rem -1rem)}nav [tuiLink]{position:relative;padding:.375rem 1rem}nav [tuiLink]._active{font-weight:700;color:var(--tui-text-primary)}nav [tuiLink]._active:before{position:absolute;display:block;inset-inline-start:-1px;inset-block:.5rem;inline-size:.1875rem;block-size:1rem;background:var(--tui-text-primary);border-radius:1rem;padding:0}[tuiTitle]{margin:.5rem 0}\n"] }]
|
|
945
945
|
}] });
|
|
946
946
|
function getSeeAlso() {
|
|
947
947
|
const current = inject(TuiDocPage).header() || '';
|
|
@@ -983,7 +983,7 @@ class TuiDocPage {
|
|
|
983
983
|
this.activeItemIndex = model(0);
|
|
984
984
|
}
|
|
985
985
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
986
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocPage, isStandalone: true, selector: "tui-doc-page", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, package: { classPropertyName: "package", publicName: "package", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, activeItemIndex: { classPropertyName: "activeItemIndex", publicName: "activeItemIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemIndex: "activeItemIndexChange" }, queries: [{ propertyName: "tabConnectors", predicate: TuiDocPageTabConnector, isSignal: true }], ngImport: i0, template: "<header\n tuiHeader\n class=\"t-header\"\n>\n @if (header()) {\n <hgroup tuiTitle>\n <h1>\n {{ header() }}\n @if (package()) {\n <span\n appearance=\"custom\"\n size=\"m\"\n tuiBadge\n class=\"t-badge\"\n [style.background]=\"package() | tuiAutoColor\"\n >\n {{ package() }}\n </span>\n }\n @for (tag of tags(); track $index) {\n <span\n appearance=\"custom\"\n size=\"m\"\n tuiBadge\n class=\"t-badge\"\n [style.background]=\"tag | tuiAutoColor\"\n >\n {{ tag }}\n </span>\n }\n </h1>\n <p class=\"t-navigation\">\n @if (tabConnectors().length > 1) {\n <tui-segmented [(activeItemIndex)]=\"activeItemIndex\">\n @for (tab of tabConnectors(); track tab) {\n @if (tab.pageTab() || defaultTabs[$index]; as tabName) {\n <a\n routerLinkActive\n [routerLink]=\"$first ? './' : tabName.replace(from, to)\"\n [routerLinkActiveOptions]=\"{exact: $first}\"\n >\n {{ tabName }}\n </a>\n }\n }\n @for (tab of tabs | keyvalue; track tab) {\n <a\n routerLinkActive\n [routerLink]=\"tab.key\"\n >\n {{ tab.key }}\n </a>\n }\n </tui-segmented>\n }\n\n @if (package() || path() || type()) {\n @if (supportLanguage.has(header())) {\n <tui-doc-language-switcher />\n }\n <tui-doc-source-code\n class=\"t-source-code\"\n [header]=\"header()\"\n [package]=\"package()\"\n [path]=\"path()\"\n [type]=\"type()\"\n />\n }\n </p>\n </hgroup>\n }\n</header>\n<ng-content />\n@for (tab of tabConnectors(); track tab) {\n @if ($index === activeItemIndex()) {\n <tui-doc-toc />\n <ng-container [ngTemplateOutlet]=\"tab.template\" />\n }\n}\n@for (tab of tabs | keyvalue; track tab) {\n @if ($index + tabConnectors().length === activeItemIndex()) {\n <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n }\n}\n", styles: [":host{display:block;max-inline-size:70rem;font:var(--tui-font-body-m);padding:3rem;margin:0 auto}@media screen and (max-width: 767.4px){:host{padding:1rem 1.5rem}}.t-header{margin-block-end:2rem}.t-navigation{display:flex;gap:.625rem;margin-block-start:1rem}@media screen and (max-width: 767.4px){.t-navigation{margin:.5rem 0 1rem}}.t-badge{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem;color:#000}.t-content{padding:1rem 2rem}@media screen and (max-width: 767.4px){.t-content{padding:1rem 1.5rem}}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TuiAutoColorPipe, name: "tuiAutoColor" }, { kind: "directive", type: TuiBadge, selector: "[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "component", type: TuiDocLanguageSwitcher, selector: "tui-doc-language-switcher" }, { kind: "component", type: TuiDocSourceCode, selector: "tui-doc-source-code", inputs: ["header", "package", "type", "path"] }, { kind: "component", type: TuiDocToc, selector: "tui-doc-toc" }, { kind: "directive", type: TuiHeader, selector: "[tuiHeader]", inputs: ["tuiHeader"] }, { kind: "component", type: TuiSegmented, selector: "tui-segmented", inputs: ["size", "activeItemIndex"], outputs: ["activeItemIndexChange"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
986
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocPage, isStandalone: true, selector: "tui-doc-page", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, package: { classPropertyName: "package", publicName: "package", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, activeItemIndex: { classPropertyName: "activeItemIndex", publicName: "activeItemIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemIndex: "activeItemIndexChange" }, queries: [{ propertyName: "tabConnectors", predicate: TuiDocPageTabConnector, isSignal: true }], ngImport: i0, template: "<header\n tuiHeader\n class=\"t-header\"\n>\n @if (header()) {\n <hgroup tuiTitle>\n <h1>\n {{ header() }}\n @if (package()) {\n <span\n appearance=\"custom\"\n size=\"m\"\n tuiBadge\n class=\"t-badge\"\n [style.background]=\"package() | tuiAutoColor\"\n >\n {{ package() }}\n </span>\n }\n @for (tag of tags(); track $index) {\n <span\n appearance=\"custom\"\n size=\"m\"\n tuiBadge\n class=\"t-badge\"\n [style.background]=\"tag | tuiAutoColor\"\n >\n {{ tag }}\n </span>\n }\n </h1>\n <p class=\"t-navigation\">\n @if (tabConnectors().length > 1) {\n <tui-segmented [(activeItemIndex)]=\"activeItemIndex\">\n @for (tab of tabConnectors(); track tab) {\n @if (tab.pageTab() || defaultTabs[$index]; as tabName) {\n <a\n routerLinkActive\n [routerLink]=\"$first ? './' : tabName.replace(from, to)\"\n [routerLinkActiveOptions]=\"{exact: $first}\"\n >\n {{ tabName }}\n </a>\n }\n }\n @for (tab of tabs | keyvalue; track tab) {\n <a\n routerLinkActive\n [routerLink]=\"tab.key\"\n >\n {{ tab.key }}\n </a>\n }\n </tui-segmented>\n }\n\n @if (package() || path() || type()) {\n @if (supportLanguage.has(header())) {\n <tui-doc-language-switcher />\n }\n <tui-doc-source-code\n class=\"t-source-code\"\n [header]=\"header()\"\n [package]=\"package()\"\n [path]=\"path()\"\n [type]=\"type()\"\n />\n }\n </p>\n </hgroup>\n }\n</header>\n<ng-content />\n@for (tab of tabConnectors(); track tab) {\n @if ($index === activeItemIndex()) {\n <tui-doc-toc />\n <ng-container [ngTemplateOutlet]=\"tab.template\" />\n }\n}\n@for (tab of tabs | keyvalue; track tab) {\n @if ($index + tabConnectors().length === activeItemIndex()) {\n <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n }\n}\n", styles: [":host{display:block;max-inline-size:70rem;font:var(--tui-font-body-m);padding:3rem;margin:0 auto}@media screen and (max-width: 767.4px){:host{padding:1rem 1.5rem}}.t-header{margin-block-end:2rem}.t-navigation{display:flex;gap:.625rem;margin-block-start:1rem}@media screen and (max-width: 767.4px){.t-navigation{margin:.5rem 0 1rem}}.t-badge{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem;color:#000}.t-content{padding:1rem 2rem}@media screen and (max-width: 767.4px){.t-content{padding:1rem 1.5rem}}.t-source-code{display:flex}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TuiAutoColorPipe, name: "tuiAutoColor" }, { kind: "directive", type: TuiBadge, selector: "[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "component", type: TuiDocLanguageSwitcher, selector: "tui-doc-language-switcher" }, { kind: "component", type: TuiDocSourceCode, selector: "tui-doc-source-code", inputs: ["header", "package", "type", "path"] }, { kind: "component", type: TuiDocToc, selector: "tui-doc-toc" }, { kind: "directive", type: TuiHeader, selector: "[tuiHeader]", inputs: ["tuiHeader"] }, { kind: "component", type: TuiSegmented, selector: "tui-segmented", inputs: ["size", "activeItemIndex"], outputs: ["activeItemIndexChange"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
987
987
|
}
|
|
988
988
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocPage, decorators: [{
|
|
989
989
|
type: Component,
|
|
@@ -1001,7 +1001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
1001
1001
|
TuiHeader,
|
|
1002
1002
|
TuiSegmented,
|
|
1003
1003
|
TuiTitle,
|
|
1004
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n tuiHeader\n class=\"t-header\"\n>\n @if (header()) {\n <hgroup tuiTitle>\n <h1>\n {{ header() }}\n @if (package()) {\n <span\n appearance=\"custom\"\n size=\"m\"\n tuiBadge\n class=\"t-badge\"\n [style.background]=\"package() | tuiAutoColor\"\n >\n {{ package() }}\n </span>\n }\n @for (tag of tags(); track $index) {\n <span\n appearance=\"custom\"\n size=\"m\"\n tuiBadge\n class=\"t-badge\"\n [style.background]=\"tag | tuiAutoColor\"\n >\n {{ tag }}\n </span>\n }\n </h1>\n <p class=\"t-navigation\">\n @if (tabConnectors().length > 1) {\n <tui-segmented [(activeItemIndex)]=\"activeItemIndex\">\n @for (tab of tabConnectors(); track tab) {\n @if (tab.pageTab() || defaultTabs[$index]; as tabName) {\n <a\n routerLinkActive\n [routerLink]=\"$first ? './' : tabName.replace(from, to)\"\n [routerLinkActiveOptions]=\"{exact: $first}\"\n >\n {{ tabName }}\n </a>\n }\n }\n @for (tab of tabs | keyvalue; track tab) {\n <a\n routerLinkActive\n [routerLink]=\"tab.key\"\n >\n {{ tab.key }}\n </a>\n }\n </tui-segmented>\n }\n\n @if (package() || path() || type()) {\n @if (supportLanguage.has(header())) {\n <tui-doc-language-switcher />\n }\n <tui-doc-source-code\n class=\"t-source-code\"\n [header]=\"header()\"\n [package]=\"package()\"\n [path]=\"path()\"\n [type]=\"type()\"\n />\n }\n </p>\n </hgroup>\n }\n</header>\n<ng-content />\n@for (tab of tabConnectors(); track tab) {\n @if ($index === activeItemIndex()) {\n <tui-doc-toc />\n <ng-container [ngTemplateOutlet]=\"tab.template\" />\n }\n}\n@for (tab of tabs | keyvalue; track tab) {\n @if ($index + tabConnectors().length === activeItemIndex()) {\n <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n }\n}\n", styles: [":host{display:block;max-inline-size:70rem;font:var(--tui-font-body-m);padding:3rem;margin:0 auto}@media screen and (max-width: 767.4px){:host{padding:1rem 1.5rem}}.t-header{margin-block-end:2rem}.t-navigation{display:flex;gap:.625rem;margin-block-start:1rem}@media screen and (max-width: 767.4px){.t-navigation{margin:.5rem 0 1rem}}.t-badge{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem;color:#000}.t-content{padding:1rem 2rem}@media screen and (max-width: 767.4px){.t-content{padding:1rem 1.5rem}}\n"] }]
|
|
1004
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n tuiHeader\n class=\"t-header\"\n>\n @if (header()) {\n <hgroup tuiTitle>\n <h1>\n {{ header() }}\n @if (package()) {\n <span\n appearance=\"custom\"\n size=\"m\"\n tuiBadge\n class=\"t-badge\"\n [style.background]=\"package() | tuiAutoColor\"\n >\n {{ package() }}\n </span>\n }\n @for (tag of tags(); track $index) {\n <span\n appearance=\"custom\"\n size=\"m\"\n tuiBadge\n class=\"t-badge\"\n [style.background]=\"tag | tuiAutoColor\"\n >\n {{ tag }}\n </span>\n }\n </h1>\n <p class=\"t-navigation\">\n @if (tabConnectors().length > 1) {\n <tui-segmented [(activeItemIndex)]=\"activeItemIndex\">\n @for (tab of tabConnectors(); track tab) {\n @if (tab.pageTab() || defaultTabs[$index]; as tabName) {\n <a\n routerLinkActive\n [routerLink]=\"$first ? './' : tabName.replace(from, to)\"\n [routerLinkActiveOptions]=\"{exact: $first}\"\n >\n {{ tabName }}\n </a>\n }\n }\n @for (tab of tabs | keyvalue; track tab) {\n <a\n routerLinkActive\n [routerLink]=\"tab.key\"\n >\n {{ tab.key }}\n </a>\n }\n </tui-segmented>\n }\n\n @if (package() || path() || type()) {\n @if (supportLanguage.has(header())) {\n <tui-doc-language-switcher />\n }\n <tui-doc-source-code\n class=\"t-source-code\"\n [header]=\"header()\"\n [package]=\"package()\"\n [path]=\"path()\"\n [type]=\"type()\"\n />\n }\n </p>\n </hgroup>\n }\n</header>\n<ng-content />\n@for (tab of tabConnectors(); track tab) {\n @if ($index === activeItemIndex()) {\n <tui-doc-toc />\n <ng-container [ngTemplateOutlet]=\"tab.template\" />\n }\n}\n@for (tab of tabs | keyvalue; track tab) {\n @if ($index + tabConnectors().length === activeItemIndex()) {\n <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n }\n}\n", styles: [":host{display:block;max-inline-size:70rem;font:var(--tui-font-body-m);padding:3rem;margin:0 auto}@media screen and (max-width: 767.4px){:host{padding:1rem 1.5rem}}.t-header{margin-block-end:2rem}.t-navigation{display:flex;gap:.625rem;margin-block-start:1rem}@media screen and (max-width: 767.4px){.t-navigation{margin:.5rem 0 1rem}}.t-badge{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem;color:#000}.t-content{padding:1rem 2rem}@media screen and (max-width: 767.4px){.t-content{padding:1rem 1.5rem}}.t-source-code{display:flex}\n"] }]
|
|
1005
1005
|
}] });
|
|
1006
1006
|
|
|
1007
1007
|
const TUI_THEME_KEY = new InjectionToken(ngDevMode ? 'TUI_THEME_KEY' : '', {
|