@taiga-ui/addon-doc 4.47.0 → 4.48.0-canary.d5bef06
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/api/api-item.component.d.ts +1 -0
- package/components/main/main.component.d.ts +1 -1
- package/esm2022/components/api/api-item.component.mjs +5 -4
- package/esm2022/components/main/main.component.mjs +3 -3
- package/esm2022/components/page/page.component.mjs +3 -3
- package/esm2022/tokens/doc-icons.mjs +6 -1
- package/fesm2022/taiga-ui-addon-doc-components.mjs +7 -6
- package/fesm2022/taiga-ui-addon-doc-components.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-doc-tokens.mjs +5 -0
- package/fesm2022/taiga-ui-addon-doc-tokens.mjs.map +1 -1
- package/package.json +6 -6
- package/tokens/doc-icons.d.ts +11 -0
|
@@ -172,6 +172,7 @@ class TuiDocAPIItem {
|
|
|
172
172
|
this.urlSerializer = inject(UrlSerializer);
|
|
173
173
|
this.urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER);
|
|
174
174
|
this.alerts = inject(TuiAlertService);
|
|
175
|
+
this.icons = inject(TUI_DOC_ICONS);
|
|
175
176
|
this.numberItem = inject(TuiDocAPINumberItem, {
|
|
176
177
|
self: true,
|
|
177
178
|
optional: true,
|
|
@@ -227,7 +228,7 @@ class TuiDocAPIItem {
|
|
|
227
228
|
this.locationRef.go(this.urlStateHandler(tree));
|
|
228
229
|
}
|
|
229
230
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocAPIItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
230
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocAPIItem, isStandalone: true, selector: "tr[tuiDocAPIItem]", inputs: { name: "name", type: "type", value: "value", items: "items" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<td class=\"t-td\">\n <code\n class=\"t-name\"\n [class.t-name_banana]=\"name.startsWith('[(')\"\n [class.t-name_input]=\"name.startsWith('[')\"\n [class.t-name_output]=\"name.startsWith('(')\"\n >\n {{ name }}\n </code>\n <ng-content />\n</td>\n<td class=\"t-td\">\n <code class=\"t-type\">\n <ng-container *ngFor=\"let item of type | tuiDocTypeReference; let last = last\">\n <a\n *ngIf=\"item.reference; else default\"\n target=\"_blank\"\n class=\"t-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n <tui-icon\n icon=\"
|
|
231
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocAPIItem, isStandalone: true, selector: "tr[tuiDocAPIItem]", inputs: { name: "name", type: "type", value: "value", items: "items" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<td class=\"t-td\">\n <code\n class=\"t-name\"\n [class.t-name_banana]=\"name.startsWith('[(')\"\n [class.t-name_input]=\"name.startsWith('[')\"\n [class.t-name_output]=\"name.startsWith('(')\"\n >\n {{ name }}\n </code>\n <ng-content />\n</td>\n<td class=\"t-td\">\n <code class=\"t-type\">\n <ng-container *ngFor=\"let item of type | tuiDocTypeReference; let last = last\">\n <a\n *ngIf=\"item.reference; else default\"\n target=\"_blank\"\n class=\"t-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n <tui-icon\n *ngIf=\"icons.externalLink\"\n [icon]=\"icons.externalLink\"\n [style.font-size.rem]=\"1\"\n />\n </a>\n <ng-template #default>\n {{ item.type }}\n </ng-template>\n <span *ngIf=\"!last\"> | </span>\n </ng-container>\n </code>\n</td>\n<td class=\"t-td\">\n <tui-textfield\n *ngIf=\"items.length; else noItems\"\n tuiChevron\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [content]=\"content\"\n [tuiTextfieldCleaner]=\"type.includes('null') || type.includes('PolymorpheusContent')\"\n >\n <select\n placeholder=\"null\"\n tuiTextfield\n [ngModel]=\"value ?? null\"\n (ngModelChange)=\"onValueChange($event)\"\n ></select>\n <tui-data-list-wrapper\n *tuiTextfieldDropdown\n [itemContent]=\"content\"\n [items]=\"items\"\n />\n </tui-textfield>\n <ng-template\n #content\n let-data\n >\n <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\n </ng-template>\n <ng-template #noItems>\n <ng-container\n *ngIf=\"value !== undefined\"\n [ngSwitch]=\"type\"\n >\n <input\n *ngSwitchCase=\"'boolean'\"\n tuiSwitch\n type=\"checkbox\"\n [id]=\"name\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n\n <tui-textfield\n *ngSwitchCase=\"'string'\"\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n >\n <input\n tuiTextfield\n [id]=\"name\"\n [ngModel]=\"value || ''\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n </tui-textfield>\n\n <tui-textfield\n *ngSwitchCase=\"'number'\"\n tuiTextfieldSize=\"m\"\n >\n <input\n tuiInputNumber\n [id]=\"name\"\n [max]=\"numberItem?.max ?? null\"\n [min]=\"numberItem?.min ?? null\"\n [ngModel]=\"value\"\n [step]=\"1\"\n (ngModelChange)=\"onValueChange($event || 0)\"\n />\n </tui-textfield>\n </ng-container>\n </ng-template>\n</td>\n", styles: [":host{box-shadow:inset 0 -1px var(--tui-border-normal)}.t-td{padding:1.5rem 2rem 1.5rem 0;vertical-align:top}.t-td:last-child{padding-inline-end:0;text-align:end;min-inline-size:10rem}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;margin:0 0 .5rem!important;-webkit-text-fill-color:var(--tui-background-accent-2-pressed)}.t-name_input{-webkit-text-fill-color:var(--tui-text-negative)}.t-name_banana{-webkit-text-fill-color:var(--tui-text-action)}.t-name_output{-webkit-text-fill-color:var(--tui-status-info)}.t-type{flex-wrap:wrap;align-items:center;justify-content:flex-start;min-block-size:1.5rem;margin:0!important}.t-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:3px}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}@media screen and (max-width: 47.9625em){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["min", "max", "prefix", "postfix"] }, { kind: "component", type: i3.TuiInputNumberStep, selector: "input[tuiInputNumber][step]", inputs: ["step"] }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "component", type: i4.TuiSelect, selector: "select[tuiTextfield]", inputs: ["placeholder"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
231
232
|
}
|
|
232
233
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocAPIItem, decorators: [{
|
|
233
234
|
type: Component,
|
|
@@ -245,7 +246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
245
246
|
TuiInspectPipe,
|
|
246
247
|
TuiSwitch,
|
|
247
248
|
TuiTextfield,
|
|
248
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<td class=\"t-td\">\n <code\n class=\"t-name\"\n [class.t-name_banana]=\"name.startsWith('[(')\"\n [class.t-name_input]=\"name.startsWith('[')\"\n [class.t-name_output]=\"name.startsWith('(')\"\n >\n {{ name }}\n </code>\n <ng-content />\n</td>\n<td class=\"t-td\">\n <code class=\"t-type\">\n <ng-container *ngFor=\"let item of type | tuiDocTypeReference; let last = last\">\n <a\n *ngIf=\"item.reference; else default\"\n target=\"_blank\"\n class=\"t-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n <tui-icon\n icon=\"
|
|
249
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<td class=\"t-td\">\n <code\n class=\"t-name\"\n [class.t-name_banana]=\"name.startsWith('[(')\"\n [class.t-name_input]=\"name.startsWith('[')\"\n [class.t-name_output]=\"name.startsWith('(')\"\n >\n {{ name }}\n </code>\n <ng-content />\n</td>\n<td class=\"t-td\">\n <code class=\"t-type\">\n <ng-container *ngFor=\"let item of type | tuiDocTypeReference; let last = last\">\n <a\n *ngIf=\"item.reference; else default\"\n target=\"_blank\"\n class=\"t-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n <tui-icon\n *ngIf=\"icons.externalLink\"\n [icon]=\"icons.externalLink\"\n [style.font-size.rem]=\"1\"\n />\n </a>\n <ng-template #default>\n {{ item.type }}\n </ng-template>\n <span *ngIf=\"!last\"> | </span>\n </ng-container>\n </code>\n</td>\n<td class=\"t-td\">\n <tui-textfield\n *ngIf=\"items.length; else noItems\"\n tuiChevron\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n [content]=\"content\"\n [tuiTextfieldCleaner]=\"type.includes('null') || type.includes('PolymorpheusContent')\"\n >\n <select\n placeholder=\"null\"\n tuiTextfield\n [ngModel]=\"value ?? null\"\n (ngModelChange)=\"onValueChange($event)\"\n ></select>\n <tui-data-list-wrapper\n *tuiTextfieldDropdown\n [itemContent]=\"content\"\n [items]=\"items\"\n />\n </tui-textfield>\n <ng-template\n #content\n let-data\n >\n <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\n </ng-template>\n <ng-template #noItems>\n <ng-container\n *ngIf=\"value !== undefined\"\n [ngSwitch]=\"type\"\n >\n <input\n *ngSwitchCase=\"'boolean'\"\n tuiSwitch\n type=\"checkbox\"\n [id]=\"name\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n\n <tui-textfield\n *ngSwitchCase=\"'string'\"\n tuiTextfieldSize=\"m\"\n class=\"t-input\"\n >\n <input\n tuiTextfield\n [id]=\"name\"\n [ngModel]=\"value || ''\"\n (ngModelChange)=\"onValueChange($event)\"\n />\n </tui-textfield>\n\n <tui-textfield\n *ngSwitchCase=\"'number'\"\n tuiTextfieldSize=\"m\"\n >\n <input\n tuiInputNumber\n [id]=\"name\"\n [max]=\"numberItem?.max ?? null\"\n [min]=\"numberItem?.min ?? null\"\n [ngModel]=\"value\"\n [step]=\"1\"\n (ngModelChange)=\"onValueChange($event || 0)\"\n />\n </tui-textfield>\n </ng-container>\n </ng-template>\n</td>\n", styles: [":host{box-shadow:inset 0 -1px var(--tui-border-normal)}.t-td{padding:1.5rem 2rem 1.5rem 0;vertical-align:top}.t-td:last-child{padding-inline-end:0;text-align:end;min-inline-size:10rem}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;margin:0 0 .5rem!important;-webkit-text-fill-color:var(--tui-background-accent-2-pressed)}.t-name_input{-webkit-text-fill-color:var(--tui-text-negative)}.t-name_banana{-webkit-text-fill-color:var(--tui-text-action)}.t-name_output{-webkit-text-fill-color:var(--tui-status-info)}.t-type{flex-wrap:wrap;align-items:center;justify-content:flex-start;min-block-size:1.5rem;margin:0!important}.t-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:3px}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}@media screen and (max-width: 47.9625em){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"] }]
|
|
249
250
|
}], propDecorators: { name: [{
|
|
250
251
|
type: Input
|
|
251
252
|
}], type: [{
|
|
@@ -1320,7 +1321,7 @@ class TuiDocMain {
|
|
|
1320
1321
|
this.doc.documentElement.setAttribute('dir', dir === 'ltr' ? 'rtl' : 'ltr');
|
|
1321
1322
|
}
|
|
1322
1323
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocMain, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1323
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocMain, isStandalone: true, selector: "tui-doc-main", ngImport: i0, template: "<tui-root [attr.tuiTheme]=\"theme()\">\n <div class=\"tui-doc-page\">\n <tui-doc-navigation class=\"tui-doc-navigation\">\n <ng-content select=\"tuiDocNavigation\" />\n </tui-doc-navigation>\n <div class=\"tui-doc-content\">\n <router-outlet class=\"tui-doc-outlet\" />\n </div>\n </div>\n <header tuiDocHeader>\n <ng-content select=\"tuiDocHeader\" />\n\n <button\n *ngIf=\"dir\"\n appearance=\"outline\"\n aria-label=\"Switch directionality of the element's text\"\n
|
|
1324
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocMain, isStandalone: true, selector: "tui-doc-main", ngImport: i0, template: "<tui-root [attr.tuiTheme]=\"theme()\">\n <div class=\"tui-doc-page\">\n <tui-doc-navigation class=\"tui-doc-navigation\">\n <ng-content select=\"tuiDocNavigation\" />\n </tui-doc-navigation>\n <div class=\"tui-doc-content\">\n <router-outlet class=\"tui-doc-outlet\" />\n </div>\n </div>\n <header tuiDocHeader>\n <ng-content select=\"tuiDocHeader\" />\n\n <button\n *ngIf=\"dir && icons.ltr\"\n appearance=\"outline\"\n aria-label=\"Switch directionality of the element's text\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"tui-doc-switch-direction\"\n [iconEnd]=\"icons.ltr.preview\"\n (click)=\"changeTextDirection()\"\n >\n <tui-icon [icon]=\"icons.ltr.direction\" />\n </button>\n\n <button\n appearance=\"secondary\"\n aria-label=\"Switch between dark and light mode\"\n size=\"s\"\n tuiIconButton\n type=\"button\"\n class=\"tui-doc-dark-mode-switch\"\n [iconStart]=\"icon()\"\n [style.border-radius.%]=\"100\"\n (click)=\"darkMode.set(!darkMode())\"\n ></button>\n </header>\n <ng-container ngProjectAs=\"tuiOverContent\">\n <ng-content select=\"tuiOverContent\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverDialogs\">\n <ng-content select=\"tuiOverDialogs\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverAlerts\">\n <ng-content select=\"tuiOverAlerts\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverDropdowns\">\n <ng-content select=\"tuiOverDropdowns\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverHints\">\n <ng-content select=\"tuiOverHints\" />\n </ng-container>\n</tui-root>\n", styles: ["@keyframes tuiShaking{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}html,body{scroll-padding-top:4rem;background:var(--tui-background-base)}tui-root>tui-scroll-controls>.t-bar_vertical{top:4rem!important}tui-doc-main{display:block}code:not(pre code):not(.hljs):not([class*=language-]){transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:inline-flex;background:var(--tui-background-neutral-1);color:var(--tui-text-secondary);vertical-align:middle;align-items:center;border-radius:.25rem;font-weight:500;outline:1px solid var(--tui-border-hover);font-size:.75rem;padding:0 .3125rem;margin:.125rem .1875rem;text-wrap:wrap}a code:not(pre code):not(.hljs):not([class*=language-]){color:var(--tui-text-action)}button:focus code,a:focus code{background:var(--tui-background-base)}.tui-doc-page{isolation:isolate;padding-block-start:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;inline-size:16.25rem;border-inline-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-inline-start:16.25rem}@media screen and (max-width: 47.9625em){.tui-doc-content{margin-inline-start:0}}.tui-doc-outlet+*{display:block}.tui-doc-switch-direction,.tui-doc-dark-mode-switch{margin-inline-start:1rem}tui-doc-code .hljs-tag{background:none}tui-doc-code .hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-primary);background-color:var(--tui-background-neutral-1)}tui-doc-code .hljs.hljs-line-numbers{background:transparent}tui-doc-code .hljs-subst,tui-doc-code .hljs-title{font-weight:400;color:var(--tui-text-primary)}tui-doc-code .hljs-property{color:#bd65a4}tui-doc-code .hljs-comment,tui-doc-code .hljs-quote{color:var(--tui-text-secondary);font-style:italic}tui-doc-code .hljs-meta{color:#e38162}tui-doc-code .hljs-section,tui-doc-code .hljs-name,tui-doc-code .hljs-literal,tui-doc-code .hljs-keyword,tui-doc-code .hljs-selector-tag,tui-doc-code .hljs-type,tui-doc-code .hljs-selector-id,tui-doc-code .hljs-selector-class{font-weight:700;color:var(--tui-text-action)}tui-doc-code .hljs-attr{color:var(--tui-text-action)}tui-doc-code .hljs-attribute,tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link,tui-doc-code .hljs-built_in{font-weight:700;color:#b8474e}tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link{font-weight:400}tui-doc-code .hljs-string{color:var(--tui-status-positive);font-weight:700}tui-doc-code .hljs-symbol,tui-doc-code .hljs-bullet,tui-doc-code .hljs-formula{color:var(--tui-text-primary);background:var(--tui-background-base-alt);font-style:italic}tui-doc-code .hljs-doctag{text-decoration:underline}tui-doc-code .hljs-variable,tui-doc-code .hljs-template-variable{color:var(--tui-text-action-hover)}tui-doc-code .hljs-addition{background:var(--tui-status-positive-pale)}tui-doc-code .hljs-deletion{background:var(--tui-status-negative-pale)}tui-doc-code .hljs-emphasis{font-style:italic}tui-doc-code .hljs-strong{font-weight:700}tui-doc-code .hljs .hljs-line-numbers{padding:0}tui-doc-code .hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:end;padding-inline-end:1em!important}[tuiTheme=dark] tui-doc-code .hljs-variable,tui-doc-code[tuiTheme=dark] .hljs-variable,[tuiTheme=dark] tui-doc-code .hljs-template-variable,tui-doc-code[tuiTheme=dark] .hljs-template-variable{color:var(--tui-status-warning)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocHeader, selector: "header[tuiDocHeader]" }, { kind: "component", type: TuiDocNavigation, selector: "tui-doc-navigation" }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "component", type: TuiRoot, selector: "tui-root" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1324
1325
|
}
|
|
1325
1326
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocMain, decorators: [{
|
|
1326
1327
|
type: Component,
|
|
@@ -1332,7 +1333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1332
1333
|
TuiDocNavigation,
|
|
1333
1334
|
TuiIcon,
|
|
1334
1335
|
TuiRoot,
|
|
1335
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: "<tui-root [attr.tuiTheme]=\"theme()\">\n <div class=\"tui-doc-page\">\n <tui-doc-navigation class=\"tui-doc-navigation\">\n <ng-content select=\"tuiDocNavigation\" />\n </tui-doc-navigation>\n <div class=\"tui-doc-content\">\n <router-outlet class=\"tui-doc-outlet\" />\n </div>\n </div>\n <header tuiDocHeader>\n <ng-content select=\"tuiDocHeader\" />\n\n <button\n *ngIf=\"dir\"\n appearance=\"outline\"\n aria-label=\"Switch directionality of the element's text\"\n
|
|
1336
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: "<tui-root [attr.tuiTheme]=\"theme()\">\n <div class=\"tui-doc-page\">\n <tui-doc-navigation class=\"tui-doc-navigation\">\n <ng-content select=\"tuiDocNavigation\" />\n </tui-doc-navigation>\n <div class=\"tui-doc-content\">\n <router-outlet class=\"tui-doc-outlet\" />\n </div>\n </div>\n <header tuiDocHeader>\n <ng-content select=\"tuiDocHeader\" />\n\n <button\n *ngIf=\"dir && icons.ltr\"\n appearance=\"outline\"\n aria-label=\"Switch directionality of the element's text\"\n size=\"s\"\n tuiButton\n type=\"button\"\n class=\"tui-doc-switch-direction\"\n [iconEnd]=\"icons.ltr.preview\"\n (click)=\"changeTextDirection()\"\n >\n <tui-icon [icon]=\"icons.ltr.direction\" />\n </button>\n\n <button\n appearance=\"secondary\"\n aria-label=\"Switch between dark and light mode\"\n size=\"s\"\n tuiIconButton\n type=\"button\"\n class=\"tui-doc-dark-mode-switch\"\n [iconStart]=\"icon()\"\n [style.border-radius.%]=\"100\"\n (click)=\"darkMode.set(!darkMode())\"\n ></button>\n </header>\n <ng-container ngProjectAs=\"tuiOverContent\">\n <ng-content select=\"tuiOverContent\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverDialogs\">\n <ng-content select=\"tuiOverDialogs\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverAlerts\">\n <ng-content select=\"tuiOverAlerts\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverDropdowns\">\n <ng-content select=\"tuiOverDropdowns\" />\n </ng-container>\n <ng-container ngProjectAs=\"tuiOverHints\">\n <ng-content select=\"tuiOverHints\" />\n </ng-container>\n</tui-root>\n", styles: ["@keyframes tuiShaking{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}html,body{scroll-padding-top:4rem;background:var(--tui-background-base)}tui-root>tui-scroll-controls>.t-bar_vertical{top:4rem!important}tui-doc-main{display:block}code:not(pre code):not(.hljs):not([class*=language-]){transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:inline-flex;background:var(--tui-background-neutral-1);color:var(--tui-text-secondary);vertical-align:middle;align-items:center;border-radius:.25rem;font-weight:500;outline:1px solid var(--tui-border-hover);font-size:.75rem;padding:0 .3125rem;margin:.125rem .1875rem;text-wrap:wrap}a code:not(pre code):not(.hljs):not([class*=language-]){color:var(--tui-text-action)}button:focus code,a:focus code{background:var(--tui-background-base)}.tui-doc-page{isolation:isolate;padding-block-start:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;inline-size:16.25rem;border-inline-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-inline-start:16.25rem}@media screen and (max-width: 47.9625em){.tui-doc-content{margin-inline-start:0}}.tui-doc-outlet+*{display:block}.tui-doc-switch-direction,.tui-doc-dark-mode-switch{margin-inline-start:1rem}tui-doc-code .hljs-tag{background:none}tui-doc-code .hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-primary);background-color:var(--tui-background-neutral-1)}tui-doc-code .hljs.hljs-line-numbers{background:transparent}tui-doc-code .hljs-subst,tui-doc-code .hljs-title{font-weight:400;color:var(--tui-text-primary)}tui-doc-code .hljs-property{color:#bd65a4}tui-doc-code .hljs-comment,tui-doc-code .hljs-quote{color:var(--tui-text-secondary);font-style:italic}tui-doc-code .hljs-meta{color:#e38162}tui-doc-code .hljs-section,tui-doc-code .hljs-name,tui-doc-code .hljs-literal,tui-doc-code .hljs-keyword,tui-doc-code .hljs-selector-tag,tui-doc-code .hljs-type,tui-doc-code .hljs-selector-id,tui-doc-code .hljs-selector-class{font-weight:700;color:var(--tui-text-action)}tui-doc-code .hljs-attr{color:var(--tui-text-action)}tui-doc-code .hljs-attribute,tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link,tui-doc-code .hljs-built_in{font-weight:700;color:#b8474e}tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link{font-weight:400}tui-doc-code .hljs-string{color:var(--tui-status-positive);font-weight:700}tui-doc-code .hljs-symbol,tui-doc-code .hljs-bullet,tui-doc-code .hljs-formula{color:var(--tui-text-primary);background:var(--tui-background-base-alt);font-style:italic}tui-doc-code .hljs-doctag{text-decoration:underline}tui-doc-code .hljs-variable,tui-doc-code .hljs-template-variable{color:var(--tui-text-action-hover)}tui-doc-code .hljs-addition{background:var(--tui-status-positive-pale)}tui-doc-code .hljs-deletion{background:var(--tui-status-negative-pale)}tui-doc-code .hljs-emphasis{font-style:italic}tui-doc-code .hljs-strong{font-weight:700}tui-doc-code .hljs .hljs-line-numbers{padding:0}tui-doc-code .hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:end;padding-inline-end:1em!important}[tuiTheme=dark] tui-doc-code .hljs-variable,tui-doc-code[tuiTheme=dark] .hljs-variable,[tuiTheme=dark] tui-doc-code .hljs-template-variable,tui-doc-code[tuiTheme=dark] .hljs-template-variable{color:var(--tui-status-warning)}\n"] }]
|
|
1336
1337
|
}] });
|
|
1337
1338
|
|
|
1338
1339
|
const TUI_DOC_TABS = new InjectionToken(ngDevMode ? 'TUI_DOC_TABS' : '', {
|
|
@@ -1396,7 +1397,7 @@ class TuiDocPage {
|
|
|
1396
1397
|
return !!this.seeAlso.length && this.activeItemIndex === 0;
|
|
1397
1398
|
}
|
|
1398
1399
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1399
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocPage, isStandalone: true, selector: "tui-doc-page", inputs: { header: "header", package: "package", type: "type", tags: "tags", path: "path", deprecated: "deprecated" }, providers: PAGE_PROVIDERS, queries: [{ propertyName: "tabConnectors", predicate: TuiDocPageTabConnector }], ngImport: i0, template: "<header class=\"t-header\">\n <h1
|
|
1400
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocPage, isStandalone: true, selector: "tui-doc-page", inputs: { header: "header", package: "package", type: "type", tags: "tags", path: "path", deprecated: "deprecated" }, providers: PAGE_PROVIDERS, queries: [{ propertyName: "tabConnectors", predicate: TuiDocPageTabConnector }], ngImport: i0, template: "<header class=\"t-header\">\n <h1\n *ngIf=\"header\"\n class=\"t-title\"\n >\n {{ header }}\n <tui-chip\n *ngIf=\"!!deprecated || deprecated === ''\"\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_deprecated\"\n >\n deprecated\n </tui-chip>\n <tui-chip\n *ngIf=\"package\"\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"package | tuiAutoColor\"\n >\n {{ package }}\n </tui-chip>\n <tui-chip\n *ngFor=\"let tag of tags\"\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"tag | tuiAutoColor\"\n >\n {{ tag }}\n </tui-chip>\n </h1>\n <tui-tabs-with-more\n *ngIf=\"tabConnectors.length\"\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n <ng-container *ngFor=\"let tab of tabConnectors; first as first; index as index\">\n <ng-container *ngIf=\"tab.pageTab || defaultTabs[index] as tabName\">\n <a\n *tuiItem\n routerLinkActive\n tuiTab\n [routerLink]=\"first ? './' : (tabName | tuiReplace: from : to)\"\n [routerLinkActiveOptions]=\"{exact: first}\"\n >\n {{ tabName }}\n </a>\n </ng-container>\n </ng-container>\n <ng-container *ngFor=\"let tab of tabs | keyvalue\">\n <a\n *tuiItem\n routerLinkActive\n tuiTab\n [routerLink]=\"tab.key\"\n >\n {{ tab.key }}\n </a>\n </ng-container>\n </tui-tabs-with-more>\n\n <div\n *ngIf=\"package || path || type\"\n class=\"t-right-side\"\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 <tui-doc-language-switcher *ngIf=\"supportLanguage.has(header)\" />\n </div>\n</header>\n<div class=\"t-content\">\n <ng-content />\n <tui-doc-see-also\n *ngIf=\"showSeeAlso\"\n class=\"t-see-also\"\n [seeAlso]=\"seeAlso\"\n />\n <ng-container *ngFor=\"let tab of tabConnectors; index as index\">\n <ng-container\n *ngIf=\"index === activeItemIndex\"\n [ngTemplateOutlet]=\"tab.template\"\n />\n </ng-container>\n <ng-container *ngFor=\"let tab of tabs | keyvalue; index as index\">\n <ng-container *ngIf=\"index + tabConnectors.length === activeItemIndex\">\n <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n </ng-container>\n </ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1;font:var(--tui-font-text-m)}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-header{font:var(--tui-font-heading-4);min-block-size:4.5rem;padding:0 1.25rem;margin:0}}.t-title{min-inline-size:100%;padding:3.75rem 0 0;font-size:inherit;margin:0}@media screen and (max-width: 47.9625em){.t-title{padding:1.25rem 0 0}}.t-tag{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem}.t-tag_deprecated{background-color:var(--tui-status-negative);color:#fff}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0;box-shadow:none}@media screen and (max-width: 47.9625em){.t-tabs{margin-block-start:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-inline-size:18.75rem;inline-size:30%;float:inline-end;margin:0 0 1rem;margin-inline-start:1.5rem}@media screen and (max-width: 47.9625em){.t-see-also{float:none;inline-size:100%;margin:0 0 1.5rem}}.t-right-side{display:flex;gap:1rem;align-items:center;align-self:center;margin-inline-start:auto}.t-source-code{block-size:3.125rem}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { 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: "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: "pipe", type: TuiAutoColorPipe, name: "tuiAutoColor" }, { kind: "directive", type: TuiChip, selector: "tui-chip,[tuiChip]", inputs: ["size"] }, { kind: "component", type: TuiDocLanguageSwitcher, selector: "tui-doc-language-switcher" }, { kind: "component", type: TuiDocSeeAlso, selector: "tui-doc-see-also", inputs: ["seeAlso"] }, { kind: "component", type: TuiDocSourceCode, selector: "tui-doc-source-code", inputs: ["header", "package", "type", "path"] }, { kind: "pipe", type: TuiReplacePipe, name: "tuiReplace" }, { kind: "directive", type: i1$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: i2$1.TuiTab, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { kind: "component", type: i2$1.TuiTabsWithMore, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["size", "moreContent", "dropdownContent", "underline", "itemsLimit", "activeItemIndex"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1400
1401
|
}
|
|
1401
1402
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocPage, decorators: [{
|
|
1402
1403
|
type: Component,
|
|
@@ -1415,7 +1416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1415
1416
|
TuiDocSourceCode,
|
|
1416
1417
|
TuiReplacePipe,
|
|
1417
1418
|
TuiTabs,
|
|
1418
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, providers: PAGE_PROVIDERS, template: "<header class=\"t-header\">\n <h1
|
|
1419
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, providers: PAGE_PROVIDERS, template: "<header class=\"t-header\">\n <h1\n *ngIf=\"header\"\n class=\"t-title\"\n >\n {{ header }}\n <tui-chip\n *ngIf=\"!!deprecated || deprecated === ''\"\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_deprecated\"\n >\n deprecated\n </tui-chip>\n <tui-chip\n *ngIf=\"package\"\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"package | tuiAutoColor\"\n >\n {{ package }}\n </tui-chip>\n <tui-chip\n *ngFor=\"let tag of tags\"\n appearance=\"custom\"\n size=\"xs\"\n class=\"t-tag t-tag_package\"\n [style.background]=\"tag | tuiAutoColor\"\n >\n {{ tag }}\n </tui-chip>\n </h1>\n <tui-tabs-with-more\n *ngIf=\"tabConnectors.length\"\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n <ng-container *ngFor=\"let tab of tabConnectors; first as first; index as index\">\n <ng-container *ngIf=\"tab.pageTab || defaultTabs[index] as tabName\">\n <a\n *tuiItem\n routerLinkActive\n tuiTab\n [routerLink]=\"first ? './' : (tabName | tuiReplace: from : to)\"\n [routerLinkActiveOptions]=\"{exact: first}\"\n >\n {{ tabName }}\n </a>\n </ng-container>\n </ng-container>\n <ng-container *ngFor=\"let tab of tabs | keyvalue\">\n <a\n *tuiItem\n routerLinkActive\n tuiTab\n [routerLink]=\"tab.key\"\n >\n {{ tab.key }}\n </a>\n </ng-container>\n </tui-tabs-with-more>\n\n <div\n *ngIf=\"package || path || type\"\n class=\"t-right-side\"\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 <tui-doc-language-switcher *ngIf=\"supportLanguage.has(header)\" />\n </div>\n</header>\n<div class=\"t-content\">\n <ng-content />\n <tui-doc-see-also\n *ngIf=\"showSeeAlso\"\n class=\"t-see-also\"\n [seeAlso]=\"seeAlso\"\n />\n <ng-container *ngFor=\"let tab of tabConnectors; index as index\">\n <ng-container\n *ngIf=\"index === activeItemIndex\"\n [ngTemplateOutlet]=\"tab.template\"\n />\n </ng-container>\n <ng-container *ngFor=\"let tab of tabs | keyvalue; index as index\">\n <ng-container *ngIf=\"index + tabConnectors.length === activeItemIndex\">\n <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n </ng-container>\n </ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1;font:var(--tui-font-text-m)}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-header{font:var(--tui-font-heading-4);min-block-size:4.5rem;padding:0 1.25rem;margin:0}}.t-title{min-inline-size:100%;padding:3.75rem 0 0;font-size:inherit;margin:0}@media screen and (max-width: 47.9625em){.t-title{padding:1.25rem 0 0}}.t-tag{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem}.t-tag_deprecated{background-color:var(--tui-status-negative);color:#fff}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0;box-shadow:none}@media screen and (max-width: 47.9625em){.t-tabs{margin-block-start:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-inline-size:18.75rem;inline-size:30%;float:inline-end;margin:0 0 1rem;margin-inline-start:1.5rem}@media screen and (max-width: 47.9625em){.t-see-also{float:none;inline-size:100%;margin:0 0 1.5rem}}.t-right-side{display:flex;gap:1rem;align-items:center;align-self:center;margin-inline-start:auto}.t-source-code{block-size:3.125rem}\n"] }]
|
|
1419
1420
|
}], propDecorators: { header: [{
|
|
1420
1421
|
type: Input
|
|
1421
1422
|
}], package: [{
|