@taiga-ui/addon-doc 4.23.0 → 4.24.0-canary.2c11b56

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.
@@ -376,7 +376,7 @@ class TuiDocDemo {
376
376
  return this.urlSerializer.parse(this.locationRef.path());
377
377
  }
378
378
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocDemo, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
379
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocDemo, isStandalone: true, selector: "tui-doc-demo", inputs: { control: "control", sticky: "sticky" }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.silent": "onMouseUp()" }, properties: { "class._sticky": "sticky" } }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "resizable", first: true, predicate: TuiResizable, descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"t-settings\">\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"dark()\"\n (ngModelChange)=\"onModeChange($event)\"\n />\n {{ texts[0] }}\n </label>\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"opaque\"\n (ngModelChange)=\"changeOpaque($event)\"\n />\n {{ texts[1] }}\n </label>\n</div>\n<div\n tuiResizable\n class=\"t-wrapper\"\n [attr.tuiTheme]=\"theme()\"\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 <form\n *ngIf=\"testForm\"\n class=\"t-form\"\n [formGroup]=\"testForm\"\n >\n <div class=\"t-input-wrapper\">\n <ng-container [ngTemplateOutlet]=\"template\" />\n </div>\n <button\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-expand\n class=\"t-expand\"\n [expanded]=\"expanded\"\n >\n <ng-template tuiExpandContent>\n <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n <div\n tuiGroup\n class=\"t-form-controls\"\n >\n <tui-select\n automation-id=\"tui-demo-select__expand-update-on\"\n tuiTextfieldSize=\"s\"\n class=\"t-select\"\n [ngModel]=\"updateOn\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"updateOnChange($event)\"\n >\n updateOn\n <tui-data-list-wrapper\n *tuiDataList\n [items]=\"updateOnVariants\"\n />\n </tui-select>\n <button\n automation-id=\"tui-demo-button__reset-state\"\n size=\"s\"\n tuiButton\n type=\"reset\"\n [style.flex]=\"'0 0 auto'\"\n >\n Reset\n </button>\n <button\n automation-id=\"tui-demo-button__submit-state\"\n size=\"s\"\n tuiButton\n type=\"submit\"\n [style.flex]=\"'0 0 auto'\"\n >\n Submit\n </button>\n </div>\n </ng-template>\n </tui-expand>\n </form>\n <ng-content />\n </div>\n </div>\n <div\n #resizer\n class=\"t-resizer\"\n [tuiResizer]=\"[1, 0]\"\n (tuiSizeChange)=\"updateWidth($event[0])\"\n ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:1.5rem 0;pointer-events:none}.t-settings{position:absolute;bottom:calc(100% + .75rem);display:flex;gap:1rem;align-items:center;justify-content:flex-end;pointer-events:none;inline-size:100%}.t-settings>*{pointer-events:auto}.t-label{display:flex;align-items:center;gap:.5rem}.t-wrapper{display:flex;box-shadow:var(--tui-shadow-medium);border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);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);overflow:hidden;pointer-events:auto}.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: 47.9625em){.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: 47.9625em){.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{inline-size:100%;margin-bottom:.5rem}.t-expand{inline-size:100%}.t-value{flex:1;background:var(--tui-background-neutral-1);padding:.75rem;border-radius:.25rem}.t-mode{inline-size:12.5rem}.t-select{max-inline-size:15rem}.t-resizer{position:relative;display:flex;box-shadow:var(--tui-shadow-medium);inline-size:3.5rem;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;border-left:1px solid var(--tui-border-normal);outline:none;background:var(--tui-background-base);color:var(--tui-text-primary)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);inline-size:1px;background:var(--tui-border-normal);box-shadow:-.25rem 0 var(--tui-border-normal);transform:translateZ(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}@media screen and (max-width: 47.9625em){.t-resizer{display:none}}.t-resizer-text{position:relative;z-index:1;font:var(--tui-font-text-s);padding:.75rem;background:var(--tui-background-base)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{display:flex;align-items:center;margin-left:.75rem}.t-button,.t-form-controls{margin-top:.75rem}@supports (position: sticky){@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.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: "pipe", type: JsonPipe, name: "json" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i4.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }, { kind: "directive", type: i4.TuiExpandContent, selector: "[tuiExpandContent]" }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiResizable, selector: "[tuiResizable]" }, { kind: "directive", type: TuiResizer, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5.TuiSelectDirective, selector: "tui-select" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i7.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
379
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocDemo, isStandalone: true, selector: "tui-doc-demo", inputs: { control: "control", sticky: "sticky" }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.zoneless": "onMouseUp()" }, properties: { "class._sticky": "sticky" } }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "resizable", first: true, predicate: TuiResizable, descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"t-settings\">\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"dark()\"\n (ngModelChange)=\"onModeChange($event)\"\n />\n {{ texts[0] }}\n </label>\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"opaque\"\n (ngModelChange)=\"changeOpaque($event)\"\n />\n {{ texts[1] }}\n </label>\n</div>\n<div\n tuiResizable\n class=\"t-wrapper\"\n [attr.tuiTheme]=\"theme()\"\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 <form\n *ngIf=\"testForm\"\n class=\"t-form\"\n [formGroup]=\"testForm\"\n >\n <div class=\"t-input-wrapper\">\n <ng-container [ngTemplateOutlet]=\"template\" />\n </div>\n <button\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-expand\n class=\"t-expand\"\n [expanded]=\"expanded\"\n >\n <ng-template tuiExpandContent>\n <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n <div\n tuiGroup\n class=\"t-form-controls\"\n >\n <tui-select\n automation-id=\"tui-demo-select__expand-update-on\"\n tuiTextfieldSize=\"s\"\n class=\"t-select\"\n [ngModel]=\"updateOn\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"updateOnChange($event)\"\n >\n updateOn\n <tui-data-list-wrapper\n *tuiDataList\n [items]=\"updateOnVariants\"\n />\n </tui-select>\n <button\n automation-id=\"tui-demo-button__reset-state\"\n size=\"s\"\n tuiButton\n type=\"reset\"\n [style.flex]=\"'0 0 auto'\"\n >\n Reset\n </button>\n <button\n automation-id=\"tui-demo-button__submit-state\"\n size=\"s\"\n tuiButton\n type=\"submit\"\n [style.flex]=\"'0 0 auto'\"\n >\n Submit\n </button>\n </div>\n </ng-template>\n </tui-expand>\n </form>\n <ng-content />\n </div>\n </div>\n <div\n #resizer\n class=\"t-resizer\"\n [tuiResizer]=\"[1, 0]\"\n (tuiSizeChange)=\"updateWidth($event[0])\"\n ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:1.5rem 0;pointer-events:none}.t-settings{position:absolute;bottom:calc(100% + .75rem);display:flex;gap:1rem;align-items:center;justify-content:flex-end;pointer-events:none;inline-size:100%}.t-settings>*{pointer-events:auto}.t-label{display:flex;align-items:center;gap:.5rem}.t-wrapper{display:flex;box-shadow:var(--tui-shadow-medium);border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);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);overflow:hidden;pointer-events:auto}.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: 47.9625em){.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: 47.9625em){.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{inline-size:100%;margin-bottom:.5rem}.t-expand{inline-size:100%}.t-value{flex:1;background:var(--tui-background-neutral-1);padding:.75rem;border-radius:.25rem}.t-mode{inline-size:12.5rem}.t-select{max-inline-size:15rem}.t-resizer{position:relative;display:flex;box-shadow:var(--tui-shadow-medium);inline-size:3.5rem;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;border-left:1px solid var(--tui-border-normal);outline:none;background:var(--tui-background-base);color:var(--tui-text-primary)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);inline-size:1px;background:var(--tui-border-normal);box-shadow:-.25rem 0 var(--tui-border-normal);transform:translateZ(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}@media screen and (max-width: 47.9625em){.t-resizer{display:none}}.t-resizer-text{position:relative;z-index:1;font:var(--tui-font-text-s);padding:.75rem;background:var(--tui-background-base)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{display:flex;align-items:center;margin-left:.75rem}.t-button,.t-form-controls{margin-top:.75rem}@supports (position: sticky){@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.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: "pipe", type: JsonPipe, name: "json" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i4.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }, { kind: "directive", type: i4.TuiExpandContent, selector: "[tuiExpandContent]" }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiResizable, selector: "[tuiResizable]" }, { kind: "directive", type: TuiResizer, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5.TuiSelectDirective, selector: "tui-select" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i7.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
380
380
  }
381
381
  __decorate([
382
382
  tuiPure
@@ -402,7 +402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
402
402
  ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
403
403
  '[class._sticky]': 'sticky',
404
404
  '(window:resize)': 'onResize()',
405
- '(document:mouseup.silent)': 'onMouseUp()',
405
+ '(document:mouseup.zoneless)': 'onMouseUp()',
406
406
  }, template: "<div class=\"t-settings\">\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"dark()\"\n (ngModelChange)=\"onModeChange($event)\"\n />\n {{ texts[0] }}\n </label>\n <label class=\"t-label\">\n <input\n size=\"s\"\n tuiSwitch\n type=\"checkbox\"\n [ngModel]=\"opaque\"\n (ngModelChange)=\"changeOpaque($event)\"\n />\n {{ texts[1] }}\n </label>\n</div>\n<div\n tuiResizable\n class=\"t-wrapper\"\n [attr.tuiTheme]=\"theme()\"\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 <form\n *ngIf=\"testForm\"\n class=\"t-form\"\n [formGroup]=\"testForm\"\n >\n <div class=\"t-input-wrapper\">\n <ng-container [ngTemplateOutlet]=\"template\" />\n </div>\n <button\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-expand\n class=\"t-expand\"\n [expanded]=\"expanded\"\n >\n <ng-template tuiExpandContent>\n <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n <div\n tuiGroup\n class=\"t-form-controls\"\n >\n <tui-select\n automation-id=\"tui-demo-select__expand-update-on\"\n tuiTextfieldSize=\"s\"\n class=\"t-select\"\n [ngModel]=\"updateOn\"\n [ngModelOptions]=\"{standalone: true}\"\n (ngModelChange)=\"updateOnChange($event)\"\n >\n updateOn\n <tui-data-list-wrapper\n *tuiDataList\n [items]=\"updateOnVariants\"\n />\n </tui-select>\n <button\n automation-id=\"tui-demo-button__reset-state\"\n size=\"s\"\n tuiButton\n type=\"reset\"\n [style.flex]=\"'0 0 auto'\"\n >\n Reset\n </button>\n <button\n automation-id=\"tui-demo-button__submit-state\"\n size=\"s\"\n tuiButton\n type=\"submit\"\n [style.flex]=\"'0 0 auto'\"\n >\n Submit\n </button>\n </div>\n </ng-template>\n </tui-expand>\n </form>\n <ng-content />\n </div>\n </div>\n <div\n #resizer\n class=\"t-resizer\"\n [tuiResizer]=\"[1, 0]\"\n (tuiSizeChange)=\"updateWidth($event[0])\"\n ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:1.5rem 0;pointer-events:none}.t-settings{position:absolute;bottom:calc(100% + .75rem);display:flex;gap:1rem;align-items:center;justify-content:flex-end;pointer-events:none;inline-size:100%}.t-settings>*{pointer-events:auto}.t-label{display:flex;align-items:center;gap:.5rem}.t-wrapper{display:flex;box-shadow:var(--tui-shadow-medium);border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);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);overflow:hidden;pointer-events:auto}.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: 47.9625em){.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: 47.9625em){.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{inline-size:100%;margin-bottom:.5rem}.t-expand{inline-size:100%}.t-value{flex:1;background:var(--tui-background-neutral-1);padding:.75rem;border-radius:.25rem}.t-mode{inline-size:12.5rem}.t-select{max-inline-size:15rem}.t-resizer{position:relative;display:flex;box-shadow:var(--tui-shadow-medium);inline-size:3.5rem;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;border-left:1px solid var(--tui-border-normal);outline:none;background:var(--tui-background-base);color:var(--tui-text-primary)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);inline-size:1px;background:var(--tui-border-normal);box-shadow:-.25rem 0 var(--tui-border-normal);transform:translateZ(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}@media screen and (max-width: 47.9625em){.t-resizer{display:none}}.t-resizer-text{position:relative;z-index:1;font:var(--tui-font-text-s);padding:.75rem;background:var(--tui-background-base)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{display:flex;align-items:center;margin-left:.75rem}.t-button,.t-form-controls{margin-top:.75rem}@supports (position: sticky){@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}}\n"] }]
407
407
  }], propDecorators: { resizable: [{
408
408
  type: ViewChild,
@@ -1076,7 +1076,7 @@ class TuiDocNavigation {
1076
1076
  target.remove();
1077
1077
  }
1078
1078
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1079
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: TuiTextfieldDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<tui-textfield\n *ngIf=\"searchEnabled()\"\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 <code\n *ngIf=\"!search.value\"\n class=\"t-slash\"\n >\n /\n </code>\n <input\n tuiTextfield\n class=\"t-prevent-ios-scroll\"\n [formControl]=\"search\"\n [placeholder]=\"searchText\"\n [tuiAutoFocus]=\"!!sidebar\"\n />\n <ng-container *ngIf=\"canOpen\">\n <tui-data-list *tuiTextfieldDropdown>\n <tui-opt-group\n *ngFor=\"let group of filtered(); let index = index\"\n [label]=\"labels[index] || ''\"\n >\n <ng-container *ngFor=\"let item of group\">\n <a\n *ngIf=\"item.route.includes('://'); else internal\"\n tuiOption\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [fragment]=\"item.fragment\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n (click)=\"onClick()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n </tui-opt-group>\n </tui-data-list>\n </ng-container>\n</tui-textfield>\n\n<nav class=\"t-navigation\">\n <tui-scrollbar class=\"t-scrollbar\">\n <tui-accordion\n [class.t-accordion-standalone]=\"!searchEnabled()\"\n [closeOthers]=\"false\"\n [rounded]=\"false\"\n >\n <tui-accordion-item\n *ngFor=\"let label of labels; index as index\"\n size=\"s\"\n [borders]=\"null\"\n [open]=\"!!openPagesArr[index]\"\n (openChange)=\"openPagesArr[index] = $event\"\n >\n <span class=\"t-label\">\n <strong>{{ label }}</strong>\n </span>\n <ng-template tuiAccordionItemContent>\n <div class=\"t-section\">\n <ng-container\n *ngFor=\"let item of items[index]; index as subIndex\"\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: index * 100 + subIndex}\"\n />\n </div>\n </ng-template>\n </tui-accordion-item>\n </tui-accordion>\n <div class=\"t-items-container\">\n <ng-container\n *ngFor=\"let item of itemsWithoutSections; let index = index\"\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: items.length - 1 + index}\"\n />\n </div>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n <ng-container *ngIf=\"!item.subPages; else subPagesTemplate\">\n <a\n *ngIf=\"item.route.includes('://'); else internal\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n\n <ng-template #subPagesTemplate>\n <div\n routerLinkActive\n class=\"t-subsection\"\n [routerLinkActiveOptions]=\"{exact: false}\"\n >\n <button\n *ngIf=\"item.subPages\"\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 <tui-expand\n class=\"t-expand\"\n [expanded]=\"!!openPagesGroupsArr[index]\"\n >\n <div class=\"t-section t-section_bordered\">\n <ng-container *ngFor=\"let subPage of $pages(item.subPages)\">\n <a\n *ngIf=\"subPage.route.includes('://'); else internal\"\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [href]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\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 [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n </div>\n </tui-expand>\n </div>\n </ng-template>\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;background:var(--tui-background-base)}.t-input{margin:1.25rem}.t-input ::ng-deep tui-icon{border-width:.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}.t-accordion-standalone{margin-top:1rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-left:.5rem}.t-expand{margin-left:.25rem}.t-section{display:flex;flex-direction:column;align-items:flex-start;margin:-.5rem 0 -1rem}.t-section_bordered{margin:.5rem 0;border-inline-start:1px solid var(--tui-border-normal)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-left:.5rem}.t-sublink{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;text-decoration:none;font:var(--tui-font-text-m);margin-left:.5rem;padding:.5rem 0}.t-sublink_small{margin-left:1rem;line-height:1.5rem;padding-top:.5rem}.t-sublink_subsection{margin-left:0;line-height:1.6rem}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary)}.t-icon{margin-left:.5rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:1rem;block-size:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$2.TuiAccordionItem, selector: "tui-accordion-item", inputs: ["noPadding", "showArrow", "borders", "size", "disabled", "disableHover", "open", "async"], outputs: ["openChange"] }, { kind: "directive", type: i2$2.TuiAccordionDirective, selector: "tui-accordion", inputs: ["closeOthers"] }, { kind: "directive", type: i2$2.TuiAccordionItemContent, selector: "ng-template[tuiAccordionItemContent]" }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$1.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "directive", type: TuiDocScrollIntoViewLink, selector: "[tuiDocScrollIntoViewLink]", inputs: ["tuiDocScrollIntoViewLink"] }, { kind: "component", type: i4.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "ngmodule", type: TuiInputModule }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield", inputs: ["stringify", "content", "filler"] }, { kind: "directive", type: i3.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i3.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i7.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1079
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: TuiTextfieldDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<tui-textfield\n *ngIf=\"searchEnabled()\"\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 <code\n *ngIf=\"!search.value\"\n class=\"t-slash\"\n >\n /\n </code>\n <input\n tuiTextfield\n class=\"t-prevent-ios-scroll\"\n [formControl]=\"search\"\n [placeholder]=\"searchText\"\n [tuiAutoFocus]=\"!!sidebar\"\n />\n <ng-container *ngIf=\"canOpen\">\n <tui-data-list *tuiTextfieldDropdown>\n <tui-opt-group\n *ngFor=\"let group of filtered(); let index = index\"\n [label]=\"labels[index] || ''\"\n >\n <ng-container *ngFor=\"let item of group\">\n <a\n *ngIf=\"item.route.includes('://'); else internal\"\n tuiOption\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [fragment]=\"item.fragment\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n (click)=\"onClick()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n </tui-opt-group>\n </tui-data-list>\n </ng-container>\n</tui-textfield>\n\n<nav class=\"t-navigation\">\n <tui-scrollbar class=\"t-scrollbar\">\n <tui-accordion\n [class.t-accordion-standalone]=\"!searchEnabled()\"\n [closeOthers]=\"false\"\n [rounded]=\"false\"\n >\n <tui-accordion-item\n *ngFor=\"let label of labels; index as index\"\n size=\"s\"\n [borders]=\"null\"\n [open]=\"!!openPagesArr[index]\"\n (openChange)=\"openPagesArr[index] = $event\"\n >\n <span class=\"t-label\">\n <strong>{{ label }}</strong>\n </span>\n <ng-template tuiAccordionItemContent>\n <div class=\"t-section\">\n <ng-container\n *ngFor=\"let item of items[index]; index as subIndex\"\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: index * 100 + subIndex}\"\n />\n </div>\n </ng-template>\n </tui-accordion-item>\n </tui-accordion>\n <div class=\"t-items-container\">\n <ng-container\n *ngFor=\"let item of itemsWithoutSections; let index = index\"\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: items.length - 1 + index}\"\n />\n </div>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n <ng-container *ngIf=\"!item.subPages; else subPagesTemplate\">\n <a\n *ngIf=\"item.route.includes('://'); else internal\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n\n <ng-template #subPagesTemplate>\n <div\n routerLinkActive\n class=\"t-subsection\"\n [routerLinkActiveOptions]=\"{exact: false}\"\n >\n <button\n *ngIf=\"item.subPages\"\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 <tui-expand\n class=\"t-expand\"\n [expanded]=\"!!openPagesGroupsArr[index]\"\n >\n <div class=\"t-section t-section_bordered\">\n <ng-container *ngFor=\"let subPage of $pages(item.subPages)\">\n <a\n *ngIf=\"subPage.route.includes('://'); else internal\"\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [href]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\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 [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n </div>\n </tui-expand>\n </div>\n </ng-template>\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;background:var(--tui-background-base)}.t-input{margin:1.25rem}.t-input ::ng-deep tui-icon{border-width:.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}.t-accordion-standalone{margin-top:1rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-left:.5rem}.t-expand{margin-left:.25rem}.t-section{display:flex;flex-direction:column;align-items:flex-start;margin:-.5rem 0 -1rem}.t-section_bordered{margin:.5rem 0;border-inline-start:1px solid var(--tui-border-normal)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-left:.5rem}.t-sublink{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;font:var(--tui-font-text-m);margin-left:.5rem;padding:.5rem 0}.t-sublink_small{margin-left:1rem;line-height:1.5rem;padding-top:.5rem}.t-sublink_subsection{margin-left:0;line-height:1.6rem}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary)}.t-icon{margin-left:.5rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:1rem;block-size:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$2.TuiAccordionItem, selector: "tui-accordion-item", inputs: ["noPadding", "showArrow", "borders", "size", "disabled", "disableHover", "open", "async"], outputs: ["openChange"] }, { kind: "directive", type: i2$2.TuiAccordionDirective, selector: "tui-accordion", inputs: ["closeOthers"] }, { kind: "directive", type: i2$2.TuiAccordionItemContent, selector: "ng-template[tuiAccordionItemContent]" }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$1.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "directive", type: TuiDocScrollIntoViewLink, selector: "[tuiDocScrollIntoViewLink]", inputs: ["tuiDocScrollIntoViewLink"] }, { kind: "component", type: i4.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "ngmodule", type: TuiInputModule }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield", inputs: ["stringify", "content", "filler"] }, { kind: "directive", type: i3.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i3.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i7.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1080
1080
  }
1081
1081
  __decorate([
1082
1082
  tuiPure
@@ -1109,7 +1109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
1109
1109
  ], changeDetection: ChangeDetectionStrategy.OnPush, providers: NAVIGATION_PROVIDERS, host: {
1110
1110
  '[class._open]': 'menuOpen',
1111
1111
  '(window:keydown)': 'onFocusSearch($event)',
1112
- }, template: "<tui-textfield\n *ngIf=\"searchEnabled()\"\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 <code\n *ngIf=\"!search.value\"\n class=\"t-slash\"\n >\n /\n </code>\n <input\n tuiTextfield\n class=\"t-prevent-ios-scroll\"\n [formControl]=\"search\"\n [placeholder]=\"searchText\"\n [tuiAutoFocus]=\"!!sidebar\"\n />\n <ng-container *ngIf=\"canOpen\">\n <tui-data-list *tuiTextfieldDropdown>\n <tui-opt-group\n *ngFor=\"let group of filtered(); let index = index\"\n [label]=\"labels[index] || ''\"\n >\n <ng-container *ngFor=\"let item of group\">\n <a\n *ngIf=\"item.route.includes('://'); else internal\"\n tuiOption\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [fragment]=\"item.fragment\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n (click)=\"onClick()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n </tui-opt-group>\n </tui-data-list>\n </ng-container>\n</tui-textfield>\n\n<nav class=\"t-navigation\">\n <tui-scrollbar class=\"t-scrollbar\">\n <tui-accordion\n [class.t-accordion-standalone]=\"!searchEnabled()\"\n [closeOthers]=\"false\"\n [rounded]=\"false\"\n >\n <tui-accordion-item\n *ngFor=\"let label of labels; index as index\"\n size=\"s\"\n [borders]=\"null\"\n [open]=\"!!openPagesArr[index]\"\n (openChange)=\"openPagesArr[index] = $event\"\n >\n <span class=\"t-label\">\n <strong>{{ label }}</strong>\n </span>\n <ng-template tuiAccordionItemContent>\n <div class=\"t-section\">\n <ng-container\n *ngFor=\"let item of items[index]; index as subIndex\"\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: index * 100 + subIndex}\"\n />\n </div>\n </ng-template>\n </tui-accordion-item>\n </tui-accordion>\n <div class=\"t-items-container\">\n <ng-container\n *ngFor=\"let item of itemsWithoutSections; let index = index\"\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: items.length - 1 + index}\"\n />\n </div>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n <ng-container *ngIf=\"!item.subPages; else subPagesTemplate\">\n <a\n *ngIf=\"item.route.includes('://'); else internal\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n\n <ng-template #subPagesTemplate>\n <div\n routerLinkActive\n class=\"t-subsection\"\n [routerLinkActiveOptions]=\"{exact: false}\"\n >\n <button\n *ngIf=\"item.subPages\"\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 <tui-expand\n class=\"t-expand\"\n [expanded]=\"!!openPagesGroupsArr[index]\"\n >\n <div class=\"t-section t-section_bordered\">\n <ng-container *ngFor=\"let subPage of $pages(item.subPages)\">\n <a\n *ngIf=\"subPage.route.includes('://'); else internal\"\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [href]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\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 [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n </div>\n </tui-expand>\n </div>\n </ng-template>\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;background:var(--tui-background-base)}.t-input{margin:1.25rem}.t-input ::ng-deep tui-icon{border-width:.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}.t-accordion-standalone{margin-top:1rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-left:.5rem}.t-expand{margin-left:.25rem}.t-section{display:flex;flex-direction:column;align-items:flex-start;margin:-.5rem 0 -1rem}.t-section_bordered{margin:.5rem 0;border-inline-start:1px solid var(--tui-border-normal)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-left:.5rem}.t-sublink{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;text-decoration:none;font:var(--tui-font-text-m);margin-left:.5rem;padding:.5rem 0}.t-sublink_small{margin-left:1rem;line-height:1.5rem;padding-top:.5rem}.t-sublink_subsection{margin-left:0;line-height:1.6rem}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary)}.t-icon{margin-left:.5rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:1rem;block-size:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\n"] }]
1112
+ }, template: "<tui-textfield\n *ngIf=\"searchEnabled()\"\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 <code\n *ngIf=\"!search.value\"\n class=\"t-slash\"\n >\n /\n </code>\n <input\n tuiTextfield\n class=\"t-prevent-ios-scroll\"\n [formControl]=\"search\"\n [placeholder]=\"searchText\"\n [tuiAutoFocus]=\"!!sidebar\"\n />\n <ng-container *ngIf=\"canOpen\">\n <tui-data-list *tuiTextfieldDropdown>\n <tui-opt-group\n *ngFor=\"let group of filtered(); let index = index\"\n [label]=\"labels[index] || ''\"\n >\n <ng-container *ngFor=\"let item of group\">\n <a\n *ngIf=\"item.route.includes('://'); else internal\"\n tuiOption\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\n <a\n tuiOption\n [attr.rel]=\"item.rel\"\n [fragment]=\"item.fragment\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n (click)=\"onClick()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n </tui-opt-group>\n </tui-data-list>\n </ng-container>\n</tui-textfield>\n\n<nav class=\"t-navigation\">\n <tui-scrollbar class=\"t-scrollbar\">\n <tui-accordion\n [class.t-accordion-standalone]=\"!searchEnabled()\"\n [closeOthers]=\"false\"\n [rounded]=\"false\"\n >\n <tui-accordion-item\n *ngFor=\"let label of labels; index as index\"\n size=\"s\"\n [borders]=\"null\"\n [open]=\"!!openPagesArr[index]\"\n (openChange)=\"openPagesArr[index] = $event\"\n >\n <span class=\"t-label\">\n <strong>{{ label }}</strong>\n </span>\n <ng-template tuiAccordionItemContent>\n <div class=\"t-section\">\n <ng-container\n *ngFor=\"let item of items[index]; index as subIndex\"\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: index * 100 + subIndex}\"\n />\n </div>\n </ng-template>\n </tui-accordion-item>\n </tui-accordion>\n <div class=\"t-items-container\">\n <ng-container\n *ngFor=\"let item of itemsWithoutSections; let index = index\"\n [ngTemplateOutlet]=\"pages\"\n [ngTemplateOutletContext]=\"{item: item, index: items.length - 1 + index}\"\n />\n </div>\n\n <ng-template\n #pages\n let-index=\"index\"\n let-item=\"item\"\n >\n <ng-container *ngIf=\"!item.subPages; else subPagesTemplate\">\n <a\n *ngIf=\"item.route.includes('://'); else internal\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [href]=\"item.route\"\n [target]=\"item.target || '_self'\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\n <a\n routerLinkActive=\"t-sublink_active\"\n tuiLink\n class=\"t-sublink\"\n [attr.rel]=\"item.rel\"\n [routerLink]=\"item.route\"\n [target]=\"item.target || '_self'\"\n [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n (click)=\"closeMenu()\"\n >\n {{ item.title }}\n <tui-icon\n *polymorpheusOutlet=\"item.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n\n <ng-template #subPagesTemplate>\n <div\n routerLinkActive\n class=\"t-subsection\"\n [routerLinkActiveOptions]=\"{exact: false}\"\n >\n <button\n *ngIf=\"item.subPages\"\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 <tui-expand\n class=\"t-expand\"\n [expanded]=\"!!openPagesGroupsArr[index]\"\n >\n <div class=\"t-section t-section_bordered\">\n <ng-container *ngFor=\"let subPage of $pages(item.subPages)\">\n <a\n *ngIf=\"subPage.route.includes('://'); else internal\"\n tuiLink\n class=\"t-sublink t-sublink_small\"\n [attr.rel]=\"subPage.rel\"\n [href]=\"subPage.route\"\n [target]=\"subPage.target || '_self'\"\n >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n\n <ng-template #internal>\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 [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n (click)=\"closeMenu()\"\n >\n {{ subPage.title }}\n <tui-icon\n *polymorpheusOutlet=\"subPage.icon as icon\"\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </a>\n </ng-template>\n </ng-container>\n </div>\n </tui-expand>\n </div>\n </ng-template>\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;background:var(--tui-background-base)}.t-input{margin:1.25rem}.t-input ::ng-deep tui-icon{border-width:.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}.t-accordion-standalone{margin-top:1rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-left:.5rem}.t-expand{margin-left:.25rem}.t-section{display:flex;flex-direction:column;align-items:flex-start;margin:-.5rem 0 -1rem}.t-section_bordered{margin:.5rem 0;border-inline-start:1px solid var(--tui-border-normal)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-left:.5rem}.t-sublink{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;font:var(--tui-font-text-m);margin-left:.5rem;padding:.5rem 0}.t-sublink_small{margin-left:1rem;line-height:1.5rem;padding-top:.5rem}.t-sublink_subsection{margin-left:0;line-height:1.6rem}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary)}.t-icon{margin-left:.5rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:1rem;block-size:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\n"] }]
1113
1113
  }], ctorParameters: function () { return []; }, propDecorators: { searchInput: [{
1114
1114
  type: ViewChild,
1115
1115
  args: [TuiTextfieldDirective, { read: ElementRef }]