@taiga-ui/addon-doc 3.25.0-dev.main-7547cea → 3.25.0-dev.main-abb7c2c
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-components.umd.js +38 -29
- package/bundles/taiga-ui-addon-doc-components.umd.js.map +1 -1
- package/components/demo/demo.component.d.ts +2 -1
- package/components/documentation/documentation.component.d.ts +1 -1
- package/components/documentation/documentation.module.d.ts +1 -1
- package/components/index.d.ts +1 -1
- package/esm2015/components/demo/demo.component.js +14 -5
- package/esm2015/components/documentation/documentation.component.js +3 -3
- package/esm2015/components/documentation/documentation.module.js +2 -2
- package/esm2015/components/documentation/pipes/color.pipe.js +35 -0
- package/esm2015/components/index.js +2 -2
- package/fesm2015/taiga-ui-addon-doc-components.js +36 -27
- package/fesm2015/taiga-ui-addon-doc-components.js.map +1 -1
- package/package.json +1 -1
- package/esm2015/components/documentation/pipes//321/201olor.pipe.js +0 -35
- /package/components/documentation/pipes/{/321/201olor.pipe.d.ts" → color.pipe.d.ts} +0 -0
|
@@ -489,6 +489,7 @@
|
|
|
489
489
|
this.texts = texts;
|
|
490
490
|
this.urlStateHandler = urlStateHandler;
|
|
491
491
|
this.control = null;
|
|
492
|
+
this.sticky = true;
|
|
492
493
|
this.template = null;
|
|
493
494
|
this.updateOnVariants = ['change', 'blur', 'submit'];
|
|
494
495
|
this.updateOn = this.params.updateOn || this.updateOnVariants[0];
|
|
@@ -578,13 +579,16 @@
|
|
|
578
579
|
return TuiDocDemoComponent;
|
|
579
580
|
}());
|
|
580
581
|
TuiDocDemoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDemoComponent, deps: [{ token: i6.TUI_IS_MOBILE }, { token: i0.ElementRef }, { token: i4.Location }, { token: i6$1.UrlSerializer }, { token: tokens.TUI_DOC_DEMO_TEXTS }, { token: tokens.TUI_DOC_URL_STATE_HANDLER }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
581
|
-
TuiDocDemoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocDemoComponent, selector: "tui-doc-demo", inputs: { control: "control" }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.silent": "onMouseUp()" } }, providers: [
|
|
582
|
+
TuiDocDemoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocDemoComponent, selector: "tui-doc-demo", inputs: { control: "control", sticky: "sticky" }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.silent": "onMouseUp()" }, properties: { "class._sticky": "this.sticky" } }, providers: [
|
|
582
583
|
i6.TuiDestroyService,
|
|
583
584
|
{
|
|
584
585
|
provide: i2$1.TuiModeDirective,
|
|
585
586
|
useExisting: i0.forwardRef(function () { return TuiDocDemoComponent; }),
|
|
586
587
|
},
|
|
587
|
-
], 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 (ngModelChange)=\"changeOpaque($event)\"\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 #00000008,0 .75rem .75rem #0000000a,0 .25rem .375rem #0000000d;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 #00000008,0 .75rem .75rem #0000000a,0 .25rem .375rem #0000000d;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: i4__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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__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": i4__namespace.JsonPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
588
|
+
], 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 (ngModelChange)=\"changeOpaque($event)\"\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 #00000008,0 .75rem .75rem #0000000a,0 .25rem .375rem #0000000d;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 #00000008,0 .75rem .75rem #0000000a,0 .25rem .375rem #0000000d;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._sticky{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: i4__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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__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": i4__namespace.JsonPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
589
|
+
__decorate([
|
|
590
|
+
i6.tuiDefaultProp()
|
|
591
|
+
], TuiDocDemoComponent.prototype, "sticky", void 0);
|
|
588
592
|
__decorate([
|
|
589
593
|
i6.tuiPure
|
|
590
594
|
], TuiDocDemoComponent.prototype, "updateUrl", null);
|
|
@@ -634,6 +638,11 @@
|
|
|
634
638
|
args: ['resizer', { static: true }]
|
|
635
639
|
}], control: [{
|
|
636
640
|
type: i0.Input
|
|
641
|
+
}], sticky: [{
|
|
642
|
+
type: i0.Input
|
|
643
|
+
}, {
|
|
644
|
+
type: i0.HostBinding,
|
|
645
|
+
args: ['class._sticky']
|
|
637
646
|
}], template: [{
|
|
638
647
|
type: i0.ContentChild,
|
|
639
648
|
args: [i0.TemplateRef]
|
|
@@ -853,33 +862,6 @@
|
|
|
853
862
|
type: i0.Output
|
|
854
863
|
}] } });
|
|
855
864
|
|
|
856
|
-
var TuiGetOpacityPipe = /** @class */ (function () {
|
|
857
|
-
function TuiGetOpacityPipe() {
|
|
858
|
-
}
|
|
859
|
-
TuiGetOpacityPipe.prototype.transform = function (color) {
|
|
860
|
-
if (color.startsWith("#") || color.startsWith("rgb(")) {
|
|
861
|
-
return 100;
|
|
862
|
-
}
|
|
863
|
-
if (color === "transparent") {
|
|
864
|
-
return 0;
|
|
865
|
-
}
|
|
866
|
-
var lastComma = color.lastIndexOf(",");
|
|
867
|
-
var parsed = color
|
|
868
|
-
.slice(lastComma)
|
|
869
|
-
.replace(")", "")
|
|
870
|
-
.replace(" ", "")
|
|
871
|
-
.replace(",", "");
|
|
872
|
-
return Math.round(Number.parseFloat(parsed) * 100);
|
|
873
|
-
};
|
|
874
|
-
return TuiGetOpacityPipe;
|
|
875
|
-
}());
|
|
876
|
-
TuiGetOpacityPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiGetOpacityPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
|
|
877
|
-
TuiGetOpacityPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiGetOpacityPipe, name: "tuiGetOpacity" });
|
|
878
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiGetOpacityPipe, decorators: [{
|
|
879
|
-
type: i0.Pipe,
|
|
880
|
-
args: [{ name: "tuiGetOpacity" }]
|
|
881
|
-
}] });
|
|
882
|
-
|
|
883
865
|
var TuiGetColorPipe = /** @class */ (function () {
|
|
884
866
|
function TuiGetColorPipe() {
|
|
885
867
|
}
|
|
@@ -915,6 +897,33 @@
|
|
|
915
897
|
args: [{ name: "tuiGetColorPipe" }]
|
|
916
898
|
}] });
|
|
917
899
|
|
|
900
|
+
var TuiGetOpacityPipe = /** @class */ (function () {
|
|
901
|
+
function TuiGetOpacityPipe() {
|
|
902
|
+
}
|
|
903
|
+
TuiGetOpacityPipe.prototype.transform = function (color) {
|
|
904
|
+
if (color.startsWith("#") || color.startsWith("rgb(")) {
|
|
905
|
+
return 100;
|
|
906
|
+
}
|
|
907
|
+
if (color === "transparent") {
|
|
908
|
+
return 0;
|
|
909
|
+
}
|
|
910
|
+
var lastComma = color.lastIndexOf(",");
|
|
911
|
+
var parsed = color
|
|
912
|
+
.slice(lastComma)
|
|
913
|
+
.replace(")", "")
|
|
914
|
+
.replace(" ", "")
|
|
915
|
+
.replace(",", "");
|
|
916
|
+
return Math.round(Number.parseFloat(parsed) * 100);
|
|
917
|
+
};
|
|
918
|
+
return TuiGetOpacityPipe;
|
|
919
|
+
}());
|
|
920
|
+
TuiGetOpacityPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiGetOpacityPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
|
|
921
|
+
TuiGetOpacityPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiGetOpacityPipe, name: "tuiGetOpacity" });
|
|
922
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiGetOpacityPipe, decorators: [{
|
|
923
|
+
type: i0.Pipe,
|
|
924
|
+
args: [{ name: "tuiGetOpacity" }]
|
|
925
|
+
}] });
|
|
926
|
+
|
|
918
927
|
var TuiInputOpacityDirective = /** @class */ (function () {
|
|
919
928
|
function TuiInputOpacityDirective(renderer, focusable) {
|
|
920
929
|
this.renderer = renderer;
|