@taiga-ui/addon-doc 3.15.0 → 3.16.0-dev.main-f183fac
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/bundles/taiga-ui-addon-doc.umd.js +21 -12
- package/bundles/taiga-ui-addon-doc.umd.js.map +1 -1
- package/esm2015/components/code/code.component.js +2 -2
- package/esm2015/components/copy/copy.component.js +4 -4
- package/esm2015/components/demo/demo.component.js +2 -2
- package/esm2015/components/documentation/documentation-property-connector.directive.js +6 -2
- package/esm2015/components/documentation/documentation.component.js +4 -4
- package/esm2015/components/example/example.component.js +2 -2
- package/esm2015/components/navigation/navigation.component.js +7 -2
- package/esm2015/directives/scroll-into-view/scroll-into-view.directive.js +3 -3
- package/esm2015/internal/header/header.component.js +5 -5
- package/esm2015/internal/see-also/see-also.component.js +2 -2
- package/esm2015/tokens/page-loaded.js +3 -3
- package/fesm2015/taiga-ui-addon-doc.js +23 -15
- package/fesm2015/taiga-ui-addon-doc.js.map +1 -1
- package/package.json +7 -8
|
@@ -425,7 +425,7 @@
|
|
|
425
425
|
return TuiDocCodeComponent;
|
|
426
426
|
}());
|
|
427
427
|
TuiDocCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocCodeComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
428
|
-
TuiDocCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: { filename: "filename", code: "code" }, host: { properties: { "class._has-filename": "this.hasFilename" } }, ngImport: i0__namespace, template: "<p\n *ngIf=\"filename\"\n class=\"t-header\"\n>\n {{ filename }}\n</p>\n<pre\n *ngFor=\"let content of processor$ | async\"\n class=\"t-code\"\n><code [lineNumbers]=\"true\" [highlight]=\"content\"></code></pre>\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:bold}.t-code{margin:0}.t-code+.t-code{margin-top:1rem}.hljs:not(:empty){font:var(--tui-font-text-m);padding:1.5rem 2rem;font-family:monospace;background:var(--tui-clear);word-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:2.667rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}:host._has-filename .hljs:not(:empty){border-radius:.75rem}:host-context(tui-root._mobile) .hljs:not(:empty){padding:1rem}\n"], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }], pipes: { "async": i5__namespace.AsyncPipe } });
|
|
428
|
+
TuiDocCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: { filename: "filename", code: "code" }, host: { properties: { "class._has-filename": "this.hasFilename" } }, ngImport: i0__namespace, template: "<!-- eslint-disable @html-eslint/element-newline -->\n<p\n *ngIf=\"filename\"\n class=\"t-header\"\n>\n {{ filename }}\n</p>\n<pre\n *ngFor=\"let content of processor$ | async\"\n class=\"t-code\"\n><code [lineNumbers]=\"true\" [highlight]=\"content\"></code></pre>\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:bold}.t-code{margin:0}.t-code+.t-code{margin-top:1rem}.hljs:not(:empty){font:var(--tui-font-text-m);padding:1.5rem 2rem;font-family:monospace;background:var(--tui-clear);word-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:2.667rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}:host._has-filename .hljs:not(:empty){border-radius:.75rem}:host-context(tui-root._mobile) .hljs:not(:empty){padding:1rem}\n"], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }], pipes: { "async": i5__namespace.AsyncPipe } });
|
|
429
429
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocCodeComponent, decorators: [{
|
|
430
430
|
type: i0.Component,
|
|
431
431
|
args: [{
|
|
@@ -467,7 +467,7 @@
|
|
|
467
467
|
}
|
|
468
468
|
Object.defineProperty(TuiDocCopyComponent.prototype, "copied$", {
|
|
469
469
|
get: function () {
|
|
470
|
-
return this.copy$.pipe(operators.
|
|
470
|
+
return this.copy$.pipe(operators.switchMap(function () { return i9.timer(COPIED_TIMEOUT).pipe(operators.map(i6.ALWAYS_FALSE_HANDLER), operators.startWith(true)); }));
|
|
471
471
|
},
|
|
472
472
|
enumerable: false,
|
|
473
473
|
configurable: true
|
|
@@ -661,7 +661,7 @@
|
|
|
661
661
|
provide: i2$1.TuiModeDirective,
|
|
662
662
|
useExisting: i0.forwardRef(function () { return TuiDocDemoComponent; }),
|
|
663
663
|
},
|
|
664
|
-
], queries: [{ propertyName: "template", first: true, predicate: i0.TemplateRef, descendants: true }], viewQueries: [{ propertyName: "resizeable", first: true, predicate: i6.TuiResizeableDirective, 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__namespace, template: "<div\n class=\"t-bg-toggle\"\n [tuiMode]=\"null\"\n>\n <ng-template #tooltip>\n {{ texts[0] }}\n <a\n tuiLink\n tuiMode=\"onDark\"\n routerLink=\"/directives/mode\"\n >\n <code>tuiMode</code>\n </a>\n </ng-template>\n <ng-container *ngIf=\"isMobile; else desktop\">\n <tui-select\n tuiTextfieldSize=\"s\"\n class=\"t-mode\"\n [tuiTextfieldCleaner]=\"true\"\n [tuiHintContent]=\"tooltip\"\n [ngModel]=\"mode\"\n (ngModelChange)=\"onModeChange($event)\"\n >\n tuiMode\n <tui-data-list-wrapper\n *tuiDataList\n [items]=\"items\"\n ></tui-data-list-wrapper>\n </tui-select>\n </ng-container>\n <ng-template #desktop>\n tuiMode:\n <tui-tooltip\n describeId=\"form\"\n [content]=\"tooltip\"\n ></tui-tooltip>\n <div\n tuiGroup\n class=\"t-group\"\n [collapsed]=\"true\"\n >\n <tui-radio-block\n size=\"s\"\n nativeId=\"form\"\n class=\"tui-group__auto-width-item\"\n [item]=\"null\"\n [hideRadio]=\"true\"\n [ngModel]=\"mode\"\n (ngModelChange)=\"onModeChange($event)\"\n >\n null\n </tui-radio-block>\n <tui-radio-block\n item=\"onDark\"\n size=\"s\"\n nativeId=\"form\"\n class=\"tui-group__auto-width-item\"\n [hideRadio]=\"true\"\n [ngModel]=\"mode\"\n (ngModelChange)=\"onModeChange($event)\"\n >\n onDark\n </tui-radio-block>\n <tui-radio-block\n item=\"onLight\"\n size=\"s\"\n nativeId=\"form\"\n class=\"tui-group__auto-width-item\"\n [hideRadio]=\"true\"\n [ngModel]=\"mode\"\n (ngModelChange)=\"onModeChange($event)\"\n >\n onLight\n </tui-radio-block>\n </div>\n </ng-template>\n <tui-checkbox-labeled\n size=\"m\"\n class=\"t-checkbox\"\n [(ngModel)]=\"opaque\"\n >\n {{ texts[1] }}\n </tui-checkbox-labeled>\n</div>\n<div\n tuiResizeable\n class=\"t-wrapper\"\n [class.t-wrapper_dark]=\"mode === 'onDark'\"\n [class.t-wrapper_gray]=\"mode === 'onLight'\"\n [class.t-wrapper_transparent]=\"!opaque\"\n>\n <div\n id=\"demo-content\"\n class=\"t-content\"\n >\n <div #content>\n <form\n *ngIf=\"testForm\"\n class=\"t-form\"\n [formGroup]=\"testForm\"\n >\n <div class=\"t-input-wrapper\">\n <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n </div>\n <button\n tuiButton\n type=\"button\"\n size=\"s\"\n class=\"t-button\"\n [iconRight]=\"icon\"\n (click)=\"toggleDetails()\"\n >\n {{ texts[2] }}\n </button>\n <ng-template #icon>\n <tui-svg\n src=\"tuiIconChevronDown\"\n class=\"t-icon\"\n [class.t-icon_rotated]=\"expanded\"\n ></tui-svg>\n </ng-template>\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 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 ></tui-data-list-wrapper>\n </tui-select>\n <button\n tuiButton\n type=\"reset\"\n size=\"s\"\n class=\"tui-group__auto-width-item\"\n >\n Reset\n </button>\n <button\n tuiButton\n type=\"submit\"\n size=\"s\"\n class=\"tui-group__auto-width-item\"\n >\n Submit\n </button>\n </div>\n </ng-template>\n </tui-expand>\n </form>\n <ng-content></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-width:100%;margin:1.5rem 0}.t-bg-toggle{position:absolute;bottom:calc(100% + .75rem);display:flex;align-items:center;justify-content:flex-end;pointer-events:none;width:100%}.t-bg-toggle>*{pointer-events:auto}.t-wrapper{box-shadow:0 1.5rem 1rem rgba(0,0,0,.03),0 .75rem .75rem rgba(0,0,0,.04),0 .25rem .375rem rgba(0,0,0,.05);display:flex;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);max-width:100%;min-height:6rem;width:100%;min-width:10rem;background-color:var(--tui-base-01);overflow:hidden}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-02) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-02) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}.t-wrapper.t-wrapper_dark{background-color:#454e58;color:var(--tui-base-01)}.t-wrapper.t-wrapper_gray{background-color:#e5e7ea}.t-wrapper.t-wrapper_dark.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-focus) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-focus) 75%)}.t-wrapper.t-wrapper_gray.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-05) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-05) 75%)}:host-context(tui-root._mobile) .t-wrapper{min-height:auto}.t-content{flex:1 1 0;min-width:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}:host-context(tui-root._mobile) .t-content{padding:1rem}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{width:100%;margin-bottom:.5rem}.t-expand{width:100%}.t-icon{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}.t-icon_rotated{transform:rotate(180deg)}.t-value{flex:1;background:var(--tui-clear-inverse);padding:.75rem;border-radius:.25rem}.t-mode{width:12.5rem}.t-select{max-width:15rem}.t-resizer{box-shadow:0 1.5rem 1rem rgba(0,0,0,.03),0 .75rem .75rem rgba(0,0,0,.04),0 .25rem .375rem rgba(0,0,0,.05);position:relative;width:3.5rem;min-height:inherit;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-left:1px solid var(--tui-base-03);outline:none;background:var(--tui-base-01);color:var(--tui-text-01)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);width:1px;background:var(--tui-base-04);box-shadow:-.25rem 0 var(--tui-base-04);transform:translate(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}:host-context(tui-root._mobile) .t-resizer{display:none}.t-resizer-text{font:var(--tui-font-text-s);position:relative;z-index:1;padding:.75rem;background:var(--tui-base-01)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{margin-left:.75rem}.t-button,.t-form-controls{margin-top:.75rem}@supports ((position: -webkit-sticky) or (position: sticky)){@media screen and (min-height: 37.5rem){:host{position:-webkit-sticky;position:sticky;top:4.625rem;z-index:2}}}\n"], components: [{ type: i2__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1__namespace.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i1__namespace.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i2__namespace$1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }, { type: i1__namespace.TuiRadioBlockComponent, selector: "tui-radio-block", inputs: ["item", "identityMatcher", "contentAlign", "size", "hideRadio", "pseudoDisabled"] }, { type: i1__namespace.TuiCheckboxLabeledComponent, selector: "tui-checkbox-labeled", inputs: ["size"] }, { type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i2__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], directives: [{ type: i2__namespace$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i6__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.TuiSelectDirective, selector: "tui-select" }, { type: i2__namespace$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2__namespace$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace$1.TuiHintOptionsDirective, selector: "[tuiHintContent]", inputs: ["tuiHintContent", "tuiHintDirection", "tuiHintAppearance", "tuiHintShowDelay", "tuiHintHideDelay"] }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i2__namespace$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: i6__namespace$1.TuiResizeableDirective, selector: "[tuiResizeable]" }, { type: i5__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace$1.TuiExpandContentDirective, selector: "[tuiExpandContent]" }, { type: i6__namespace$1.TuiResizerDirective, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }], pipes: { "json": i5__namespace.JsonPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
664
|
+
], queries: [{ propertyName: "template", first: true, predicate: i0.TemplateRef, descendants: true }], viewQueries: [{ propertyName: "resizeable", first: true, predicate: i6.TuiResizeableDirective, 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__namespace, template: "<div\n class=\"t-bg-toggle\"\n [tuiMode]=\"null\"\n>\n <ng-template #tooltip>\n {{ texts[0] }}\n <a\n tuiLink\n tuiMode=\"onDark\"\n routerLink=\"/directives/mode\"\n >\n <code>tuiMode</code>\n </a>\n </ng-template>\n <ng-container *ngIf=\"isMobile; else desktop\">\n <tui-select\n tuiTextfieldSize=\"s\"\n class=\"t-mode\"\n [tuiTextfieldCleaner]=\"true\"\n [tuiHintContent]=\"tooltip\"\n [ngModel]=\"mode\"\n (ngModelChange)=\"onModeChange($event)\"\n >\n tuiMode\n <tui-data-list-wrapper\n *tuiDataList\n [items]=\"items\"\n ></tui-data-list-wrapper>\n </tui-select>\n </ng-container>\n <ng-template #desktop>\n tuiMode:\n <tui-tooltip\n describeId=\"form\"\n [content]=\"tooltip\"\n ></tui-tooltip>\n <div\n tuiGroup\n class=\"t-group\"\n [collapsed]=\"true\"\n >\n <tui-radio-block\n size=\"s\"\n nativeId=\"form\"\n class=\"tui-group__auto-width-item\"\n [item]=\"null\"\n [hideRadio]=\"true\"\n [ngModel]=\"mode\"\n (ngModelChange)=\"onModeChange($event)\"\n >\n null\n </tui-radio-block>\n <tui-radio-block\n item=\"onDark\"\n size=\"s\"\n nativeId=\"form\"\n class=\"tui-group__auto-width-item\"\n [hideRadio]=\"true\"\n [ngModel]=\"mode\"\n (ngModelChange)=\"onModeChange($event)\"\n >\n onDark\n </tui-radio-block>\n <tui-radio-block\n item=\"onLight\"\n size=\"s\"\n nativeId=\"form\"\n class=\"tui-group__auto-width-item\"\n [hideRadio]=\"true\"\n [ngModel]=\"mode\"\n (ngModelChange)=\"onModeChange($event)\"\n >\n onLight\n </tui-radio-block>\n </div>\n </ng-template>\n <tui-checkbox-labeled\n size=\"m\"\n class=\"t-checkbox\"\n [(ngModel)]=\"opaque\"\n >\n {{ texts[1] }}\n </tui-checkbox-labeled>\n</div>\n<div\n tuiResizeable\n class=\"t-wrapper\"\n [class.t-wrapper_dark]=\"mode === 'onDark'\"\n [class.t-wrapper_gray]=\"mode === 'onLight'\"\n [class.t-wrapper_transparent]=\"!opaque\"\n>\n <div\n id=\"demo-content\"\n class=\"t-content\"\n >\n <div #content>\n <form\n *ngIf=\"testForm\"\n class=\"t-form\"\n [formGroup]=\"testForm\"\n >\n <div class=\"t-input-wrapper\">\n <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n </div>\n <button\n tuiButton\n type=\"button\"\n size=\"s\"\n automation-id=\"tui-demo-button__toggle-details\"\n class=\"t-button\"\n [iconRight]=\"icon\"\n (click)=\"toggleDetails()\"\n >\n {{ texts[2] }}\n </button>\n <ng-template #icon>\n <tui-svg\n src=\"tuiIconChevronDown\"\n class=\"t-icon\"\n [class.t-icon_rotated]=\"expanded\"\n ></tui-svg>\n </ng-template>\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 tuiTextfieldSize=\"s\"\n automation-id=\"tui-demo-select__expand-update-on\"\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 ></tui-data-list-wrapper>\n </tui-select>\n <button\n tuiButton\n type=\"reset\"\n size=\"s\"\n automation-id=\"tui-demo-button__reset-state\"\n class=\"tui-group__auto-width-item\"\n >\n Reset\n </button>\n <button\n tuiButton\n type=\"submit\"\n size=\"s\"\n automation-id=\"tui-demo-button__submit-state\"\n class=\"tui-group__auto-width-item\"\n >\n Submit\n </button>\n </div>\n </ng-template>\n </tui-expand>\n </form>\n <ng-content></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-width:100%;margin:1.5rem 0}.t-bg-toggle{position:absolute;bottom:calc(100% + .75rem);display:flex;align-items:center;justify-content:flex-end;pointer-events:none;width:100%}.t-bg-toggle>*{pointer-events:auto}.t-wrapper{box-shadow:0 1.5rem 1rem rgba(0,0,0,.03),0 .75rem .75rem rgba(0,0,0,.04),0 .25rem .375rem rgba(0,0,0,.05);display:flex;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);max-width:100%;min-height:6rem;width:100%;min-width:10rem;background-color:var(--tui-base-01);overflow:hidden}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-02) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-02) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}.t-wrapper.t-wrapper_dark{background-color:#454e58;color:var(--tui-base-01)}.t-wrapper.t-wrapper_gray{background-color:#e5e7ea}.t-wrapper.t-wrapper_dark.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-focus) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-focus) 75%)}.t-wrapper.t-wrapper_gray.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-05) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-05) 75%)}:host-context(tui-root._mobile) .t-wrapper{min-height:auto}.t-content{flex:1 1 0;min-width:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}:host-context(tui-root._mobile) .t-content{padding:1rem}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{width:100%;margin-bottom:.5rem}.t-expand{width:100%}.t-icon{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}.t-icon_rotated{transform:rotate(180deg)}.t-value{flex:1;background:var(--tui-clear-inverse);padding:.75rem;border-radius:.25rem}.t-mode{width:12.5rem}.t-select{max-width:15rem}.t-resizer{box-shadow:0 1.5rem 1rem rgba(0,0,0,.03),0 .75rem .75rem rgba(0,0,0,.04),0 .25rem .375rem rgba(0,0,0,.05);position:relative;width:3.5rem;min-height:inherit;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-left:1px solid var(--tui-base-03);outline:none;background:var(--tui-base-01);color:var(--tui-text-01)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);width:1px;background:var(--tui-base-04);box-shadow:-.25rem 0 var(--tui-base-04);transform:translate(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}:host-context(tui-root._mobile) .t-resizer{display:none}.t-resizer-text{font:var(--tui-font-text-s);position:relative;z-index:1;padding:.75rem;background:var(--tui-base-01)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{margin-left:.75rem}.t-button,.t-form-controls{margin-top:.75rem}@supports ((position: -webkit-sticky) or (position: sticky)){@media screen and (min-height: 37.5rem){:host{position:-webkit-sticky;position:sticky;top:4.625rem;z-index:2}}}\n"], components: [{ type: i2__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1__namespace.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i1__namespace.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i2__namespace$1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }, { type: i1__namespace.TuiRadioBlockComponent, selector: "tui-radio-block", inputs: ["item", "identityMatcher", "contentAlign", "size", "hideRadio", "pseudoDisabled"] }, { type: i1__namespace.TuiCheckboxLabeledComponent, selector: "tui-checkbox-labeled", inputs: ["size"] }, { type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i2__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], directives: [{ type: i2__namespace$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i6__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.TuiSelectDirective, selector: "tui-select" }, { type: i2__namespace$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2__namespace$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace$1.TuiHintOptionsDirective, selector: "[tuiHintContent]", inputs: ["tuiHintContent", "tuiHintDirection", "tuiHintAppearance", "tuiHintShowDelay", "tuiHintHideDelay"] }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i2__namespace$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: i6__namespace$1.TuiResizeableDirective, selector: "[tuiResizeable]" }, { type: i5__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace$1.TuiExpandContentDirective, selector: "[tuiExpandContent]" }, { type: i6__namespace$1.TuiResizerDirective, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }], pipes: { "json": i5__namespace.JsonPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
665
665
|
__decorate([
|
|
666
666
|
i6.tuiPure
|
|
667
667
|
], TuiDocDemoComponent.prototype, "updateUrl", null);
|
|
@@ -910,6 +910,9 @@
|
|
|
910
910
|
var value = !!propertyValueWithSuffix && this.documentationPropertyValues
|
|
911
911
|
? this.documentationPropertyValues[propertyValueWithSuffix]
|
|
912
912
|
: tuiCoerceValue(propertyValue);
|
|
913
|
+
if (this.documentationPropertyType === 'string' && i6.tuiIsNumber(value)) {
|
|
914
|
+
value = value.toString();
|
|
915
|
+
}
|
|
913
916
|
this.onValueChange(value);
|
|
914
917
|
};
|
|
915
918
|
TuiDocDocumentationPropertyConnectorDirective.prototype.setQueryParam = function (value) {
|
|
@@ -1252,7 +1255,7 @@
|
|
|
1252
1255
|
this.matcher = function (item, exclusions) { return !exclusions.has(item.documentationPropertyName); };
|
|
1253
1256
|
}
|
|
1254
1257
|
TuiDocDocumentationComponent.prototype.ngAfterContentInit = function () {
|
|
1255
|
-
i6.
|
|
1258
|
+
i6.tuiQueryListChanges(this.propertiesConnectors)
|
|
1256
1259
|
.pipe(operators.switchMap(function (items) { return i9.merge.apply(void 0, __spreadArray([], __read(items.map(function (_a) {
|
|
1257
1260
|
var changed$ = _a.changed$;
|
|
1258
1261
|
return changed$;
|
|
@@ -1285,7 +1288,7 @@
|
|
|
1285
1288
|
return TuiDocDocumentationComponent;
|
|
1286
1289
|
}());
|
|
1287
1290
|
TuiDocDocumentationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDocumentationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TUI_DOC_DOCUMENTATION_TEXTS }, { token: TUI_DOC_EXCLUDED_PROPERTIES }, { token: i6.TuiDestroyService, self: true }, { token: TuiGetColorPipe }, { token: TuiGetOpacityPipe }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1288
|
-
TuiDocDocumentationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocDocumentationComponent, selector: "tui-doc-documentation", inputs: { heading: "heading", showValues: "showValues", isAPI: "isAPI" }, providers: [TuiGetColorPipe, TuiGetOpacityPipe, i6.TuiDestroyService], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnectorDirective }], ngImport: i0__namespace, template: "<h1\n *ngIf=\"heading\"\n class=\"t-heading\"\n>\n {{ heading }}\n</h1>\n<ng-content></ng-content>\n<table class=\"t-table\">\n <tr class=\"t-row t-row_header\">\n <th class=\"t-th t-cell t-cell_prop\">{{ texts[2] }}</th>\n <th class=\"t-th\">{{ type }}</th>\n <th\n *ngIf=\"showValues && !isAPI\"\n class=\"t-th t-cell t-th_value\"\n >\n {{ texts[3] }}\n </th>\n </tr>\n <tr\n *ngFor=\"let propertyConnector of $any(propertiesConnectors) | tuiFilter : matcher : excludedProperties\"\n class=\"t-row\"\n [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n >\n <td class=\"t-cell\">\n <div\n automation-id=\"tui-documentation__property-name\"\n class=\"t-property\"\n >\n {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n <tui-badge\n *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\n size=\"s\"\n value=\"Optional\"\n ></tui-badge>\n </div>\n <span\n *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n class=\"t-deprecated-label\"\n >\n deprecated\n </span>\n <ng-container [ngTemplateOutlet]=\"propertyConnector.template\"></ng-container>\n </td>\n <td class=\"t-cell\">\n <span class=\"type\">\n {{ propertyConnector.documentationPropertyType }}\n <tui-tooltip\n *ngIf=\"propertyConnector.documentationPropertyType | tuiShowContentTooltip\"\n [describeId]=\"propertyConnector.attrName\"\n [content]=\"content\"\n >\n <ng-template #content>\n {{ texts[4] }}\n <a\n tuiLink\n tuiMode=\"onDark\"\n target=\"_blank\"\n href=\"https://github.com/tinkoff/ng-polymorpheus\"\n >\n <code>ng-polymorpheus</code>\n </a>\n </ng-template>\n </tui-tooltip>\n </span>\n </td>\n <td\n *ngIf=\"showValues\"\n class=\"t-cell t-cell_value\"\n >\n <ng-container *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\">\n <tui-select\n *ngIf=\"propertyConnector.hasItems; else noItems\"\n tuiTextfieldSize=\"m\"\n tuiDropdownLimitWidth=\"min\"\n [tuiTextfieldCleaner]=\"propertyConnector.documentationPropertyType | tuiShowCleanerPipe\"\n [tuiTextfieldLabelOutside]=\"true\"\n [nativeId]=\"propertyConnector.attrName\"\n [valueContent]=\"selectContent\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n >\n <code class=\"t-exception\">null</code>\n <tui-data-list-wrapper\n *tuiDataList\n [items]=\"propertyConnector.documentationPropertyValues\"\n [itemContent]=\"selectContent\"\n ></tui-data-list-wrapper>\n </tui-select>\n <ng-template\n #selectContent\n let-data\n >\n <code>{{ data | tuiInspectAny }}</code>\n </ng-template>\n\n <ng-template #noItems>\n <ng-container [ngSwitch]=\"propertyConnector.documentationPropertyType\">\n <tui-toggle\n *ngSwitchCase=\"'boolean'\"\n size=\"l\"\n [nativeId]=\"propertyConnector.attrName\"\n [showIcons]=\"true\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n ></tui-toggle>\n\n <tui-primitive-textfield\n *ngSwitchCase=\"'string'\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [tuiTextfieldLabelOutside]=\"true\"\n [tuiTextfieldCleaner]=\"true\"\n [value]=\"propertyConnector.documentationPropertyValue || ''\"\n (valueChange)=\"propertyConnector.onValueChange($event)\"\n ></tui-primitive-textfield>\n\n <div\n *ngSwitchCase=\"'color'\"\n tuiGroup\n >\n <tui-primitive-textfield\n tuiTextfieldSize=\"m\"\n [attr.id]=\"propertyConnector.attrName\"\n [tuiTextfieldLabelOutside]=\"true\"\n [tuiInputOpacity]=\"propertyConnector.documentationPropertyValue | tuiGetOpacity\"\n [value]=\"propertyConnector.documentationPropertyValue | tuiGetColorPipe\"\n (valueChange)=\"onColorChange(propertyConnector, $event)\"\n >\n <input\n tuiTextfield\n type=\"text\"\n />\n </tui-primitive-textfield>\n <tui-input-count\n tuiTextfieldSize=\"m\"\n [max]=\"100\"\n [ngModel]=\"propertyConnector.documentationPropertyValue | tuiGetOpacity\"\n (ngModelChange)=\"onOpacityChange(propertyConnector, $event)\"\n >\n Opacity\n </tui-input-count>\n </div>\n\n <tui-input-count\n *ngSwitchCase=\"'number'\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [tuiTextfieldLabelOutside]=\"true\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n ></tui-input-count>\n\n <ng-container *ngSwitchCase=\"'PolymorpheusContent'\">\n <tui-primitive-textfield\n *ngIf=\"\n propertyConnector.documentationPropertyValue | tuiIsPrimitivePolymorpheusContentPipe\n \"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [tuiTextfieldLabelOutside]=\"true\"\n [tuiTextfieldCleaner]=\"true\"\n [value]=\"propertyConnector.documentationPropertyValue.toString()\"\n (valueChange)=\"propertyConnector.onValueChange($event)\"\n >\n Default content\n </tui-primitive-textfield>\n </ng-container>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-template #elseEmitter>\n <tui-notification\n class=\"t-output\"\n [@emitEvent]=\"propertyConnector.emits$ | async\"\n >\n Emit!\n </tui-notification>\n </ng-template>\n </td>\n </tr>\n</table>\n", styles: [":host{display:block;min-width:100%}.t-table{width:100%;table-layout:fixed}.t-row:not(:last-child){border-bottom:1px solid var(--tui-base-03)}:host-context(tui-root._mobile) .t-row{display:flex;flex-wrap:wrap}:host-context(tui-root._mobile) .t-row_header{display:none}.t-cell{padding:1rem 1rem .875rem}.t-cell:first-child{padding-left:0}.t-cell:last-child{padding-right:0}.t-cell_prop{width:40%}.t-cell_value{text-align:right}:host-context(tui-root._mobile) .t-cell{width:100%;height:auto;padding:.5rem 0;text-align:left}.t-th{padding:.5rem 1rem;color:var(--tui-text-02);font-weight:normal;text-align:left}.t-th_value{max-width:20rem;text-align:right}:host-context(tui-root._mobile) .t-th_value{width:9.375rem}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}:host-context(tui-root._mobile) .t-property{padding:.5rem 0}.t-type{font-family:monospace}.t-deprecated{background-color:var(--tui-error-bg);box-shadow:-1rem 0 var(--tui-error-bg),1rem 0 var(--tui-error-bg)}.t-deprecated-label{margin-right:.125rem;color:var(--tui-error-fill)}.t-exception{display:block;width:-webkit-max-content;width:-moz-max-content;width:max-content}.t-output{text-align:left;opacity:0}.t-heading{font:var(--tui-font-heading-4)}\n"], components: [{ type: i1__namespace.TuiBadgeComponent, selector: "tui-badge", inputs: ["value", "size", "status", "hoverable"] }, { type: i2__namespace$1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }, { type: i2__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1__namespace.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i1__namespace.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i1__namespace.TuiToggleComponent, selector: "tui-toggle", inputs: ["singleColor", "showIcons", "showLoader", "size"] }, { type: i2__namespace$1.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }, { type: i2__namespace$1.TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]" }, { type: i1__namespace.TuiInputCountComponent, selector: "tui-input-count", inputs: ["step", "min", "max", "hideButtons", "prefix", "postfix"] }, { type: i2__namespace$1.TuiNotificationComponent, selector: "tui-notification", inputs: ["hasIcon", "status"], outputs: ["close"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i1__namespace.TuiSelectDirective, selector: "tui-select" }, { type: i2__namespace$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2__namespace$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { type: i2__namespace$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i5__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace$1.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i2__namespace$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: TuiInputOpacityDirective, selector: "[tuiInputOpacity]", inputs: ["tuiInputOpacity"] }, { type: i1__namespace.TuiInputCountDirective, selector: "tui-input-count" }], pipes: { "tuiFilter": i6__namespace$1.TuiFilterPipe, "tuiStripOptionalPipe": TuiStripOptionalPipe, "tuiIsOptionalPipe": TuiIsOptionalPipe, "tuiShowContentTooltip": TuiShowContentTooltip, "tuiShowCleanerPipe": TuiShowCleanerPipe, "tuiInspectAny": TuiInspectPipe, "tuiGetOpacity": TuiGetOpacityPipe, "tuiGetColorPipe": TuiGetColorPipe, "tuiIsPrimitivePolymorpheusContentPipe": TuiIsPrimitivePolymorpheusContentPipe, "async": i5__namespace.AsyncPipe }, animations: [
|
|
1291
|
+
TuiDocDocumentationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocDocumentationComponent, selector: "tui-doc-documentation", inputs: { heading: "heading", showValues: "showValues", isAPI: "isAPI" }, providers: [TuiGetColorPipe, TuiGetOpacityPipe, i6.TuiDestroyService], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnectorDirective }], ngImport: i0__namespace, template: "<h1\n *ngIf=\"heading\"\n class=\"t-heading\"\n>\n {{ heading }}\n</h1>\n<ng-content></ng-content>\n<table class=\"t-table\">\n <tr class=\"t-row t-row_header\">\n <th class=\"t-th t-cell t-cell_prop\">{{ texts[2] }}</th>\n <th class=\"t-th\">{{ type }}</th>\n <th\n *ngIf=\"showValues && !isAPI\"\n class=\"t-th t-cell t-th_value\"\n >\n {{ texts[3] }}\n </th>\n </tr>\n <tr\n *ngFor=\"let propertyConnector of $any(propertiesConnectors) | tuiFilter : matcher : excludedProperties\"\n class=\"t-row\"\n [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n >\n <td class=\"t-cell\">\n <div\n automation-id=\"tui-documentation__property-name\"\n class=\"t-property\"\n >\n {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n <tui-badge\n *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\n size=\"s\"\n value=\"Optional\"\n ></tui-badge>\n </div>\n <span\n *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n class=\"t-deprecated-label\"\n >\n deprecated\n </span>\n <ng-container [ngTemplateOutlet]=\"propertyConnector.template\"></ng-container>\n </td>\n <td class=\"t-cell\">\n <span class=\"type\">\n {{ propertyConnector.documentationPropertyType }}\n <tui-tooltip\n *ngIf=\"propertyConnector.documentationPropertyType | tuiShowContentTooltip\"\n [describeId]=\"propertyConnector.attrName\"\n [content]=\"content\"\n >\n <ng-template #content>\n {{ texts[4] }}\n <a\n tuiLink\n tuiMode=\"onDark\"\n target=\"_blank\"\n rel=\"noreferrer\"\n href=\"https://github.com/tinkoff/ng-polymorpheus\"\n >\n <code>ng-polymorpheus</code>\n </a>\n </ng-template>\n </tui-tooltip>\n </span>\n </td>\n <td\n *ngIf=\"showValues\"\n class=\"t-cell t-cell_value\"\n >\n <ng-container *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\">\n <tui-select\n *ngIf=\"propertyConnector.hasItems; else noItems\"\n tuiTextfieldSize=\"m\"\n tuiDropdownLimitWidth=\"min\"\n [tuiTextfieldCleaner]=\"propertyConnector.documentationPropertyType | tuiShowCleanerPipe\"\n [tuiTextfieldLabelOutside]=\"true\"\n [nativeId]=\"propertyConnector.attrName\"\n [valueContent]=\"selectContent\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n >\n <code class=\"t-exception\">null</code>\n <tui-data-list-wrapper\n *tuiDataList\n [items]=\"propertyConnector.documentationPropertyValues\"\n [itemContent]=\"selectContent\"\n ></tui-data-list-wrapper>\n </tui-select>\n <ng-template\n #selectContent\n let-data\n >\n <code>{{ data | tuiInspectAny }}</code>\n </ng-template>\n\n <ng-template #noItems>\n <ng-container [ngSwitch]=\"propertyConnector.documentationPropertyType\">\n <tui-toggle\n *ngSwitchCase=\"'boolean'\"\n size=\"l\"\n [nativeId]=\"propertyConnector.attrName\"\n [showIcons]=\"true\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n ></tui-toggle>\n\n <tui-primitive-textfield\n *ngSwitchCase=\"'string'\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [tuiTextfieldLabelOutside]=\"true\"\n [tuiTextfieldCleaner]=\"true\"\n [value]=\"propertyConnector.documentationPropertyValue || ''\"\n (valueChange)=\"propertyConnector.onValueChange($event)\"\n ></tui-primitive-textfield>\n\n <div\n *ngSwitchCase=\"'color'\"\n tuiGroup\n >\n <tui-primitive-textfield\n tuiTextfieldSize=\"m\"\n [attr.id]=\"propertyConnector.attrName\"\n [tuiTextfieldLabelOutside]=\"true\"\n [tuiInputOpacity]=\"propertyConnector.documentationPropertyValue | tuiGetOpacity\"\n [value]=\"propertyConnector.documentationPropertyValue | tuiGetColorPipe\"\n (valueChange)=\"onColorChange(propertyConnector, $event)\"\n >\n <input\n tuiTextfield\n type=\"text\"\n />\n </tui-primitive-textfield>\n <tui-input-count\n tuiTextfieldSize=\"m\"\n [max]=\"100\"\n [ngModel]=\"propertyConnector.documentationPropertyValue | tuiGetOpacity\"\n (ngModelChange)=\"onOpacityChange(propertyConnector, $event)\"\n >\n Opacity\n </tui-input-count>\n </div>\n\n <tui-input-count\n *ngSwitchCase=\"'number'\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [tuiTextfieldLabelOutside]=\"true\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n ></tui-input-count>\n\n <ng-container *ngSwitchCase=\"'PolymorpheusContent'\">\n <tui-primitive-textfield\n *ngIf=\"\n propertyConnector.documentationPropertyValue | tuiIsPrimitivePolymorpheusContentPipe\n \"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [tuiTextfieldLabelOutside]=\"true\"\n [tuiTextfieldCleaner]=\"true\"\n [value]=\"propertyConnector.documentationPropertyValue.toString()\"\n (valueChange)=\"propertyConnector.onValueChange($event)\"\n >\n Default content\n </tui-primitive-textfield>\n </ng-container>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-template #elseEmitter>\n <tui-notification\n class=\"t-output\"\n [@emitEvent]=\"propertyConnector.emits$ | async\"\n >\n Emit!\n </tui-notification>\n </ng-template>\n </td>\n </tr>\n</table>\n", styles: [":host{display:block;min-width:100%}.t-table{width:100%;table-layout:fixed}.t-row:not(:last-child){border-bottom:1px solid var(--tui-base-03)}:host-context(tui-root._mobile) .t-row{display:flex;flex-wrap:wrap}:host-context(tui-root._mobile) .t-row_header{display:none}.t-cell{padding:1rem 1rem .875rem}.t-cell:first-child{padding-left:0}.t-cell:last-child{padding-right:0}.t-cell_prop{width:40%}.t-cell_value{text-align:right}:host-context(tui-root._mobile) .t-cell{width:100%;height:auto;padding:.5rem 0;text-align:left}.t-th{padding:.5rem 1rem;color:var(--tui-text-02);font-weight:normal;text-align:left}.t-th_value{max-width:20rem;text-align:right}:host-context(tui-root._mobile) .t-th_value{width:9.375rem}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}:host-context(tui-root._mobile) .t-property{padding:.5rem 0}.t-type{font-family:monospace}.t-deprecated{background-color:var(--tui-error-bg);box-shadow:-1rem 0 var(--tui-error-bg),1rem 0 var(--tui-error-bg)}.t-deprecated-label{margin-right:.125rem;color:var(--tui-error-fill)}.t-exception{display:block;width:-webkit-max-content;width:-moz-max-content;width:max-content}.t-output{text-align:left;opacity:0}.t-heading{font:var(--tui-font-heading-4)}\n"], components: [{ type: i1__namespace.TuiBadgeComponent, selector: "tui-badge", inputs: ["value", "size", "status", "hoverable"] }, { type: i2__namespace$1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }, { type: i2__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1__namespace.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i1__namespace.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i1__namespace.TuiToggleComponent, selector: "tui-toggle", inputs: ["singleColor", "showIcons", "showLoader", "size"] }, { type: i2__namespace$1.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }, { type: i2__namespace$1.TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]" }, { type: i1__namespace.TuiInputCountComponent, selector: "tui-input-count", inputs: ["step", "min", "max", "hideButtons", "prefix", "postfix"] }, { type: i2__namespace$1.TuiNotificationComponent, selector: "tui-notification", inputs: ["hasIcon", "status"], outputs: ["close"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i1__namespace.TuiSelectDirective, selector: "tui-select" }, { type: i2__namespace$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2__namespace$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { type: i2__namespace$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i5__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace$1.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i2__namespace$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: TuiInputOpacityDirective, selector: "[tuiInputOpacity]", inputs: ["tuiInputOpacity"] }, { type: i1__namespace.TuiInputCountDirective, selector: "tui-input-count" }], pipes: { "tuiFilter": i6__namespace$1.TuiFilterPipe, "tuiStripOptionalPipe": TuiStripOptionalPipe, "tuiIsOptionalPipe": TuiIsOptionalPipe, "tuiShowContentTooltip": TuiShowContentTooltip, "tuiShowCleanerPipe": TuiShowCleanerPipe, "tuiInspectAny": TuiInspectPipe, "tuiGetOpacity": TuiGetOpacityPipe, "tuiGetColorPipe": TuiGetColorPipe, "tuiIsPrimitivePolymorpheusContentPipe": TuiIsPrimitivePolymorpheusContentPipe, "async": i5__namespace.AsyncPipe }, animations: [
|
|
1289
1292
|
animations.trigger('emitEvent', [
|
|
1290
1293
|
animations.transition(':increment', [animations.style({ opacity: 1 }), animations.animate('500ms ease-in')]),
|
|
1291
1294
|
]),
|
|
@@ -1609,7 +1612,7 @@
|
|
|
1609
1612
|
return TuiDocExampleComponent;
|
|
1610
1613
|
}());
|
|
1611
1614
|
TuiDocExampleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocExampleComponent, deps: [{ token: 'id', attribute: true }, { token: i8.Clipboard }, { token: i2$1.TuiAlertService }, { token: common.LOCATION }, { token: i1.TUI_COPY_TEXTS }, { token: TUI_DOC_EXAMPLE_TEXTS }, { token: TUI_DOC_CODE_EDITOR, optional: true }, { token: TUI_DOC_EXAMPLE_CONTENT_PROCESSOR }, { token: i6.TUI_IS_CYPRESS }, { token: TUI_DOC_CODE_ACTIONS }, { token: i6$1.Router }, { token: i6$1.ActivatedRoute }, { token: i5.Location }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1612
|
-
TuiDocExampleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocExampleComponent, selector: "tui-doc-example", inputs: { heading: "heading", description: "description", content: "content", componentName: "componentName" }, ngImport: i0__namespace, template: "<h3\n *ngIf=\"heading\"\n class=\"t-title\"\n>\n <span\n *polymorpheusOutlet=\"heading | tuiDocExampleCapitalize as text\"\n [textContent]=\"text\"\n ></span>\n <button\n *ngIf=\"id\"\n tuiIconButton\n type=\"button\"\n size=\"xs\"\n icon=\"tuiIconLinkLarge\"\n appearance=\"icon\"\n class=\"t-link-icon\"\n [title]=\"copy$ | async\"\n (click)=\"copyExampleLink()\"\n ></button>\n</h3>\n<h4\n *ngIf=\"description\"\n class=\"t-description\"\n>\n <ng-container *polymorpheusOutlet=\"description | tuiDocExampleCapitalize as text\">\n {{ text }}\n </ng-container>\n</h4>\n\n<div\n *ngIf=\"processor$ | async as files\"\n class=\"t-example\"\n>\n <ng-container *ngIf=\"files | tuiDocExampleGetTabs : defaultTab as tabs\">\n <div class=\"t-tabs-wrapper\">\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n <ng-container *ngFor=\"let tab of tabs\">\n <button\n *tuiItem\n tuiTab\n >\n {{ tab }}\n </button>\n </ng-container>\n </tui-tabs-with-more>\n\n <button\n *ngIf=\"files | tuiMapper : visible\"\n tuiButton\n appearance=\"flat\"\n size=\"s\"\n [showLoader]=\"!!(loading$ | async)\"\n (click)=\"edit(files)\"\n >\n Edit on {{ codeEditor!.name }}\n </button>\n </div>\n\n <div\n *ngFor=\"let tab of tabs; let index = index\"\n class=\"t-content\"\n [class.t-content_animated]=\"!isCypress\"\n [class.t-content_visible]=\"activeItemIndex === index\"\n >\n <ng-container\n *ngIf=\"index === defaultTabIndex; else anotherTab\"\n [ngTemplateOutlet]=\"preview\"\n ></ng-container>\n <ng-template #anotherTab>\n <ng-container\n [ngTemplateOutlet]=\"codeSection\"\n [ngTemplateOutletContext]=\"{$implicit: files[tabs[activeItemIndex]] || ''}\"\n ></ng-container>\n </ng-template>\n </div>\n </ng-container>\n</div>\n\n<ng-template #preview>\n <div\n automation-id=\"tui-doc-example\"\n class=\"t-demo\"\n >\n <ng-content></ng-content>\n </div>\n</ng-template>\n\n<ng-template\n #codeSection\n let-code\n>\n <section class=\"t-code-actions\">\n <ng-container *ngFor=\"let action of codeActions\">\n <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n {{ text }}\n </ng-container>\n </ng-container>\n <tui-doc-copy [cdkCopyToClipboard]=\"code\"></tui-doc-copy>\n </section>\n <tui-doc-code [code]=\"code\"></tui-doc-code>\n</ng-template>\n", styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:right}:host :host-context(tui-root._mobile){padding-top:2rem}.t-title{font:var(--tui-font-heading-5);margin:0 0 .5rem}:host-context(tui-root._mobile) .t-title{font:var(--tui-font-heading-6)}.t-description{font:var(--tui-font-text-m);font-weight:normal;margin:0}.t-example{position:relative;margin-top:1.5rem;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem rgba(0,0,0,.1)}:host-context(tui-root._mobile) .t-example{margin-top:.75rem}.t-tabs-wrapper{display:flex;padding:0 2rem;box-shadow:inset 0 -1px var(--tui-base-03);justify-content:space-between;align-items:center}:host-context(tui-root._mobile) .t-tabs-wrapper{padding:0 1rem}.t-tabs{flex-grow:1}.t-demo{padding:2rem;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:2.667rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}:host-context(tui-root._mobile) .t-demo{padding:1rem}.t-code-actions{position:absolute;top:4.375rem;right:1rem;display:flex;justify-content:flex-end;align-items:center}.t-code-actions>*{margin-left:.5rem}.t-link-icon{margin-left:.3rem;vertical-align:baseline}.t-content{will-change:opacity;height:0;visibility:hidden;opacity:0}.t-content_animated{transition:opacity .3s ease-in-out}.t-content_visible{height:auto;visibility:visible;opacity:1}\n"], components: [{ type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i1__namespace.TuiTabsWithMoreComponent, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["moreContent", "dropdownContent", "underline", "activeItemIndex", "itemsLimit"], outputs: ["activeItemIndexChange"] }, { type: i1__namespace.TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { type: TuiDocCopyComponent, selector: "tui-doc-copy" }, { type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: ["filename", "code"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$1.TuiItemDirective, selector: "[tuiItem]" }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8__namespace.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }], pipes: { "tuiDocExampleCapitalize": TuiDocExampleCapitalizePipe, "async": i5__namespace.AsyncPipe, "tuiDocExampleGetTabs": TuiDocExampleGetTabsPipe, "tuiMapper": i6__namespace$1.TuiMapperPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
1615
|
+
TuiDocExampleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocExampleComponent, selector: "tui-doc-example", inputs: { heading: "heading", description: "description", content: "content", componentName: "componentName" }, ngImport: i0__namespace, template: "<h3\n *ngIf=\"heading\"\n class=\"t-title\"\n>\n <span\n *polymorpheusOutlet=\"heading | tuiDocExampleCapitalize as text\"\n [textContent]=\"text\"\n ></span>\n <button\n *ngIf=\"id\"\n tuiIconButton\n type=\"button\"\n size=\"xs\"\n icon=\"tuiIconLinkLarge\"\n appearance=\"icon\"\n class=\"t-link-icon\"\n [title]=\"copy$ | async\"\n (click)=\"copyExampleLink()\"\n ></button>\n</h3>\n<h4\n *ngIf=\"description\"\n class=\"t-description\"\n>\n <ng-container *polymorpheusOutlet=\"description | tuiDocExampleCapitalize as text\">\n {{ text }}\n </ng-container>\n</h4>\n\n<div\n *ngIf=\"processor$ | async as files\"\n class=\"t-example\"\n>\n <ng-container *ngIf=\"files | tuiDocExampleGetTabs : defaultTab as tabs\">\n <div class=\"t-tabs-wrapper\">\n <tui-tabs-with-more\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n <ng-container *ngFor=\"let tab of tabs\">\n <button\n *tuiItem\n tuiTab\n >\n {{ tab }}\n </button>\n </ng-container>\n </tui-tabs-with-more>\n\n <button\n *ngIf=\"files | tuiMapper : visible\"\n tuiButton\n appearance=\"flat\"\n size=\"s\"\n type=\"button\"\n [showLoader]=\"!!(loading$ | async)\"\n (click)=\"edit(files)\"\n >\n Edit on {{ codeEditor!.name }}\n </button>\n </div>\n\n <div\n *ngFor=\"let tab of tabs; let index = index\"\n class=\"t-content\"\n [class.t-content_animated]=\"!isCypress\"\n [class.t-content_visible]=\"activeItemIndex === index\"\n >\n <ng-container\n *ngIf=\"index === defaultTabIndex; else anotherTab\"\n [ngTemplateOutlet]=\"preview\"\n ></ng-container>\n <ng-template #anotherTab>\n <ng-container\n [ngTemplateOutlet]=\"codeSection\"\n [ngTemplateOutletContext]=\"{$implicit: files[tabs[activeItemIndex]] || ''}\"\n ></ng-container>\n </ng-template>\n </div>\n </ng-container>\n</div>\n\n<ng-template #preview>\n <div\n automation-id=\"tui-doc-example\"\n class=\"t-demo\"\n >\n <ng-content></ng-content>\n </div>\n</ng-template>\n\n<ng-template\n #codeSection\n let-code\n>\n <section class=\"t-code-actions\">\n <ng-container *ngFor=\"let action of codeActions\">\n <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n {{ text }}\n </ng-container>\n </ng-container>\n <tui-doc-copy [cdkCopyToClipboard]=\"code\"></tui-doc-copy>\n </section>\n <tui-doc-code [code]=\"code\"></tui-doc-code>\n</ng-template>\n", styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:right}:host :host-context(tui-root._mobile){padding-top:2rem}.t-title{font:var(--tui-font-heading-5);margin:0 0 .5rem}:host-context(tui-root._mobile) .t-title{font:var(--tui-font-heading-6)}.t-description{font:var(--tui-font-text-m);font-weight:normal;margin:0}.t-example{position:relative;margin-top:1.5rem;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem rgba(0,0,0,.1)}:host-context(tui-root._mobile) .t-example{margin-top:.75rem}.t-tabs-wrapper{display:flex;padding:0 2rem;box-shadow:inset 0 -1px var(--tui-base-03);justify-content:space-between;align-items:center}:host-context(tui-root._mobile) .t-tabs-wrapper{padding:0 1rem}.t-tabs{flex-grow:1}.t-demo{padding:2rem;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:2.667rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}:host-context(tui-root._mobile) .t-demo{padding:1rem}.t-code-actions{position:absolute;top:4.375rem;right:1rem;display:flex;justify-content:flex-end;align-items:center}.t-code-actions>*{margin-left:.5rem}.t-link-icon{margin-left:.3rem;vertical-align:baseline}.t-content{will-change:opacity;height:0;visibility:hidden;opacity:0}.t-content_animated{transition:opacity .3s ease-in-out}.t-content_visible{height:auto;visibility:visible;opacity:1}\n"], components: [{ type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i1__namespace.TuiTabsWithMoreComponent, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["moreContent", "dropdownContent", "underline", "activeItemIndex", "itemsLimit"], outputs: ["activeItemIndexChange"] }, { type: i1__namespace.TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { type: TuiDocCopyComponent, selector: "tui-doc-copy" }, { type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: ["filename", "code"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$1.TuiItemDirective, selector: "[tuiItem]" }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8__namespace.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }], pipes: { "tuiDocExampleCapitalize": TuiDocExampleCapitalizePipe, "async": i5__namespace.AsyncPipe, "tuiDocExampleGetTabs": TuiDocExampleGetTabsPipe, "tuiMapper": i6__namespace$1.TuiMapperPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
1613
1616
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocExampleComponent, decorators: [{
|
|
1614
1617
|
type: i0.Component,
|
|
1615
1618
|
args: [{
|
|
@@ -1790,7 +1793,7 @@
|
|
|
1790
1793
|
}]
|
|
1791
1794
|
}] });
|
|
1792
1795
|
|
|
1793
|
-
var TUI_DOC_PAGE_LOADED = new i0.InjectionToken("[TUI_DOC_PAGE_LOADED] Stream that emits if loading of page is over (for example, to begin scrollIntoView)", { factory: function () { return i9.defer(function () { return i9.timer(200).pipe(operators.
|
|
1796
|
+
var TUI_DOC_PAGE_LOADED = new i0.InjectionToken("[TUI_DOC_PAGE_LOADED] Stream that emits if loading of page is over (for example, to begin scrollIntoView)", { factory: function () { return i9.defer(function () { return i9.timer(200).pipe(operators.switchMap(function () { return i9.of(true); })); }); } });
|
|
1794
1797
|
|
|
1795
1798
|
var TUI_DOC_SCROLL_BEHAVIOR = new i0.InjectionToken("[TUI_DOC_SCROLL_BEHAVIOR] Defines the transition animation for scroll", { factory: function () { return "smooth"; } });
|
|
1796
1799
|
|
|
@@ -1898,11 +1901,12 @@
|
|
|
1898
1901
|
|
|
1899
1902
|
var TuiScrollIntoViewLinkDirective = /** @class */ (function () {
|
|
1900
1903
|
function TuiScrollIntoViewLinkDirective(destroy$, _a, readyToScroll$) {
|
|
1904
|
+
var _this = this;
|
|
1901
1905
|
var nativeElement = _a.nativeElement;
|
|
1902
1906
|
this.readyToScroll$ = readyToScroll$;
|
|
1903
1907
|
this.scroll$ = new i9.ReplaySubject(1);
|
|
1904
1908
|
this.readyToScroll$
|
|
1905
|
-
.pipe(operators.filter(Boolean), operators.
|
|
1909
|
+
.pipe(operators.filter(Boolean), operators.switchMap(function () { return _this.scroll$; }), operators.debounceTime(750), operators.filter(function (shallWe) { return shallWe && !!i6.tuiGetElementObscures(nativeElement); }), operators.takeUntil(destroy$))
|
|
1906
1910
|
.subscribe(function () {
|
|
1907
1911
|
nativeElement.scrollIntoView();
|
|
1908
1912
|
});
|
|
@@ -2021,7 +2025,12 @@
|
|
|
2021
2025
|
]); }, []);
|
|
2022
2026
|
};
|
|
2023
2027
|
TuiDocNavigationComponent.prototype.isActiveRoute = function (route) {
|
|
2024
|
-
return this.router.isActive(route,
|
|
2028
|
+
return this.router.isActive(route, {
|
|
2029
|
+
paths: 'subset',
|
|
2030
|
+
queryParams: 'subset',
|
|
2031
|
+
fragment: 'ignored',
|
|
2032
|
+
matrixParams: 'ignored',
|
|
2033
|
+
});
|
|
2025
2034
|
};
|
|
2026
2035
|
TuiDocNavigationComponent.prototype.handleAnchorLink = function (hash) {
|
|
2027
2036
|
var _this = this;
|
|
@@ -2145,7 +2154,7 @@
|
|
|
2145
2154
|
this.router = router;
|
|
2146
2155
|
this.swipes$ = swipes$;
|
|
2147
2156
|
this.stream$ = new i9.Subject();
|
|
2148
|
-
this.open$ = i9.merge(this.router.events.pipe(operators.
|
|
2157
|
+
this.open$ = i9.merge(this.router.events.pipe(operators.map(i6.ALWAYS_FALSE_HANDLER)), this.stream$, this.swipes$.pipe(operators.filter(function (swipe) { return swipe.direction === 'left' || swipe.direction === 'right'; }), operators.map(function (swipe) { return swipe.direction === 'right'; }))).pipe(operators.startWith(false), operators.distinctUntilChanged());
|
|
2149
2158
|
}
|
|
2150
2159
|
TuiDocHeaderComponent.prototype.onClick = function () {
|
|
2151
2160
|
this.stream$.next(true);
|
|
@@ -2158,7 +2167,7 @@
|
|
|
2158
2167
|
return TuiDocHeaderComponent;
|
|
2159
2168
|
}());
|
|
2160
2169
|
TuiDocHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocHeaderComponent, deps: [{ token: TUI_DOC_LOGO }, { token: TUI_DOC_MENU_TEXT }, { token: i6$1.Router }, { token: i6.TuiSwipeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2161
|
-
TuiDocHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocHeaderComponent, selector: "header[tuiDocHeader]", ngImport: i0__namespace, template: "<button\n tuiIconButton\n icon=\"tuiIconMenuLarge\"\n appearance=\"icon\"\n class=\"t-menu\"\n [title]=\"menu\"\n (click)=\"onClick()\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n <tui-doc-navigation\n *tuiSidebar=\"!!(open$ | async)\"\n class=\"t-navigation\"\n ></tui-doc-navigation>\n</button>\n<div class=\"t-logo\">\n <img\n *polymorpheusOutlet=\"logo as src\"\n alt=\"Logo\"\n class=\"t-img\"\n [src]=\"src\"\n />\n</div>\n<ng-content></ng-content>\n", styles: [":host{box-shadow:0 .125rem 1rem rgba(0,0,0,.08);position:fixed;top:0;left:0;right:0;z-index:1;display:flex;height:3.9375rem;align-items:center;padding:0 1.25rem;background:var(--tui-base-01);border-bottom:1px solid var(--tui-base-03)}.t-logo{margin-right:auto;font:var(--tui-font-heading-5)}.t-img{display:block}.t-menu{margin-left:-1.25rem}@media screen and (min-width: 48em){.t-menu{display:none}}.t-navigation{min-height:100%}\n"], components: [{ type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: TuiDocNavigationComponent, selector: "tui-doc-navigation" }], directives: [{ type: i6__namespace$1.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i4__namespace.TuiSidebarDirective, selector: "[tuiSidebar]", inputs: ["tuiSidebarDirection", "tuiSidebarAutoWidth", "tuiSidebar"] }, { type: i6__namespace$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
2170
|
+
TuiDocHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocHeaderComponent, selector: "header[tuiDocHeader]", ngImport: i0__namespace, template: "<button\n tuiIconButton\n icon=\"tuiIconMenuLarge\"\n appearance=\"icon\"\n type=\"button\"\n class=\"t-menu\"\n [title]=\"menu\"\n (click)=\"onClick()\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n <tui-doc-navigation\n *tuiSidebar=\"!!(open$ | async)\"\n class=\"t-navigation\"\n ></tui-doc-navigation>\n</button>\n<div class=\"t-logo\">\n <img\n *polymorpheusOutlet=\"logo as src\"\n alt=\"Logo\"\n class=\"t-img\"\n [src]=\"src\"\n />\n</div>\n<ng-content></ng-content>\n", styles: [":host{box-shadow:0 .125rem 1rem rgba(0,0,0,.08);position:fixed;top:0;left:0;right:0;z-index:1;display:flex;height:3.9375rem;align-items:center;padding:0 1.25rem;background:var(--tui-base-01);border-bottom:1px solid var(--tui-base-03)}.t-logo{margin-right:auto;font:var(--tui-font-heading-5)}.t-img{display:block}.t-menu{margin-left:-1.25rem}@media screen and (min-width: 48em){.t-menu{display:none}}.t-navigation{min-height:100%}\n"], components: [{ type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: TuiDocNavigationComponent, selector: "tui-doc-navigation" }], directives: [{ type: i6__namespace$1.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i4__namespace.TuiSidebarDirective, selector: "[tuiSidebar]", inputs: ["tuiSidebarDirection", "tuiSidebarAutoWidth", "tuiSidebar"] }, { type: i6__namespace$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
2162
2171
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocHeaderComponent, decorators: [{
|
|
2163
2172
|
type: i0.Component,
|
|
2164
2173
|
args: [{
|
|
@@ -2552,7 +2561,7 @@
|
|
|
2552
2561
|
return TuiDocSeeAlsoComponent;
|
|
2553
2562
|
}());
|
|
2554
2563
|
TuiDocSeeAlsoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocSeeAlsoComponent, deps: [{ token: TUI_DOC_SEE_ALSO_TEXT }, { token: TUI_DOC_PAGES }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2555
|
-
TuiDocSeeAlsoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocSeeAlsoComponent, selector: "tui-doc-see-also", inputs: { seeAlso: "seeAlso" }, ngImport: i0__namespace, template: "<h5 class=\"t-header\">{{ text }}</h5>\n<ng-container *ngFor=\"let item of seeAlso; last as last\">\n <a\n tuiLink\n [routerLink]=\"getRouterLink(item)\"\n
|
|
2564
|
+
TuiDocSeeAlsoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocSeeAlsoComponent, selector: "tui-doc-see-also", inputs: { seeAlso: "seeAlso" }, ngImport: i0__namespace, template: "<h5 class=\"t-header\">{{ text }}</h5>\n<ng-container *ngFor=\"let item of seeAlso; last as last\">\n <a\n tuiLink\n [routerLink]=\"getRouterLink(item)\"\n [innerText]=\"item\"\n ></a>\n <ng-container *ngIf=\"!last\">{{ ', ' }}</ng-container>\n</ng-container>\n", styles: [":host{display:block}.t-header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-02);margin:0 0 .5rem;white-space:nowrap}\n"], components: [{ type: i2__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }], directives: [{ type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
2556
2565
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocSeeAlsoComponent, decorators: [{
|
|
2557
2566
|
type: i0.Component,
|
|
2558
2567
|
args: [{
|