@taiga-ui/addon-doc 4.17.0 → 4.18.0
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.
|
@@ -44,11 +44,12 @@ import { trigger, transition, style, animate } from '@angular/animations';
|
|
|
44
44
|
import { tuiQueryListChanges, tuiWatch, tuiZonefreeScheduler, tuiControlValue } from '@taiga-ui/cdk/observables';
|
|
45
45
|
import { TuiFilterPipe } from '@taiga-ui/cdk/pipes/filter';
|
|
46
46
|
import { TuiToArrayPipe } from '@taiga-ui/cdk/pipes/to-array';
|
|
47
|
-
import { tuiRgbToHex, tuiHexToRgb } from '@taiga-ui/cdk/utils/color';
|
|
48
47
|
import { TuiNotification } from '@taiga-ui/core/components/notification';
|
|
48
|
+
import { tuiScrollbarOptionsProvider, TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
|
|
49
49
|
import * as i4$2 from '@taiga-ui/core/directives/dropdown';
|
|
50
50
|
import { TuiDropdown } from '@taiga-ui/core/directives/dropdown';
|
|
51
51
|
import { TuiBadge } from '@taiga-ui/kit/components/badge';
|
|
52
|
+
import { tuiRgbToHex } from '@taiga-ui/cdk/utils/color';
|
|
52
53
|
import { WA_LOCATION, WA_LOCAL_STORAGE } from '@ng-web-apis/common';
|
|
53
54
|
import { TuiLet } from '@taiga-ui/cdk/directives/let';
|
|
54
55
|
import { TuiMapperPipe } from '@taiga-ui/cdk/pipes/mapper';
|
|
@@ -64,7 +65,6 @@ import { TuiSidebarDirective, TuiSidebar } from '@taiga-ui/addon-mobile/directiv
|
|
|
64
65
|
import { TuiActiveZone } from '@taiga-ui/cdk/directives/active-zone';
|
|
65
66
|
import { Title } from '@angular/platform-browser';
|
|
66
67
|
import { tuiAutoFocusOptionsProvider, TuiAutoFocus } from '@taiga-ui/cdk/directives/auto-focus';
|
|
67
|
-
import { tuiScrollbarOptionsProvider, TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
|
|
68
68
|
import * as i2$2 from '@taiga-ui/kit/components/accordion';
|
|
69
69
|
import { TuiAccordion } from '@taiga-ui/kit/components/accordion';
|
|
70
70
|
import { TuiInputModule } from '@taiga-ui/legacy/components/input';
|
|
@@ -577,68 +577,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
577
577
|
}]
|
|
578
578
|
}] });
|
|
579
579
|
|
|
580
|
-
class TuiGetColorPipe {
|
|
581
|
-
transform(color) {
|
|
582
|
-
if (color.length === 4) {
|
|
583
|
-
return color
|
|
584
|
-
.split('')
|
|
585
|
-
.reduce((result, current) => [...result, current, current], [])
|
|
586
|
-
.join('')
|
|
587
|
-
.replace('#', '');
|
|
588
|
-
}
|
|
589
|
-
if (color.startsWith('#')) {
|
|
590
|
-
return color;
|
|
591
|
-
}
|
|
592
|
-
if (color === 'transparent') {
|
|
593
|
-
return '#000000';
|
|
594
|
-
}
|
|
595
|
-
const parsed = color
|
|
596
|
-
.replace('rgb(', '')
|
|
597
|
-
.replace('rgba(', '')
|
|
598
|
-
.replace(')', '')
|
|
599
|
-
.replace(' ', '')
|
|
600
|
-
.split(',')
|
|
601
|
-
.map((v) => Number.parseInt(v, 10));
|
|
602
|
-
return tuiRgbToHex(...parsed);
|
|
603
|
-
}
|
|
604
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiGetColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
605
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiGetColorPipe, isStandalone: true, name: "tuiGetColorPipe" }); }
|
|
606
|
-
}
|
|
607
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiGetColorPipe, decorators: [{
|
|
608
|
-
type: Pipe,
|
|
609
|
-
args: [{
|
|
610
|
-
standalone: true,
|
|
611
|
-
name: 'tuiGetColorPipe',
|
|
612
|
-
}]
|
|
613
|
-
}] });
|
|
614
|
-
|
|
615
|
-
class TuiGetOpacityPipe {
|
|
616
|
-
transform(color) {
|
|
617
|
-
if (color.startsWith('#') || color.startsWith('rgb(')) {
|
|
618
|
-
return 100;
|
|
619
|
-
}
|
|
620
|
-
if (color === 'transparent') {
|
|
621
|
-
return 0;
|
|
622
|
-
}
|
|
623
|
-
const lastComma = color.lastIndexOf(',');
|
|
624
|
-
const parsed = color
|
|
625
|
-
.slice(lastComma)
|
|
626
|
-
.replace(')', '')
|
|
627
|
-
.replace(' ', '')
|
|
628
|
-
.replace(',', '');
|
|
629
|
-
return Math.round(Number.parseFloat(parsed) * 100);
|
|
630
|
-
}
|
|
631
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiGetOpacityPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
632
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiGetOpacityPipe, isStandalone: true, name: "tuiGetOpacity" }); }
|
|
633
|
-
}
|
|
634
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiGetOpacityPipe, decorators: [{
|
|
635
|
-
type: Pipe,
|
|
636
|
-
args: [{
|
|
637
|
-
standalone: true,
|
|
638
|
-
name: 'tuiGetOpacity',
|
|
639
|
-
}]
|
|
640
|
-
}] });
|
|
641
|
-
|
|
642
580
|
class TuiIsOptionalPipe {
|
|
643
581
|
transform(name) {
|
|
644
582
|
return name.includes('?');
|
|
@@ -654,21 +592,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
654
592
|
}]
|
|
655
593
|
}] });
|
|
656
594
|
|
|
657
|
-
class TuiIsPrimitivePolymorpheusContentPipe {
|
|
658
|
-
transform(value) {
|
|
659
|
-
return tuiIsString(value) || tuiIsNumber(value);
|
|
660
|
-
}
|
|
661
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
662
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, isStandalone: true, name: "tuiIsPrimitivePolymorpheusContentPipe" }); }
|
|
663
|
-
}
|
|
664
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, decorators: [{
|
|
665
|
-
type: Pipe,
|
|
666
|
-
args: [{
|
|
667
|
-
standalone: true,
|
|
668
|
-
name: 'tuiIsPrimitivePolymorpheusContentPipe',
|
|
669
|
-
}]
|
|
670
|
-
}] });
|
|
671
|
-
|
|
672
595
|
class TuiStripOptionalPipe {
|
|
673
596
|
transform(name) {
|
|
674
597
|
return name.replace('?', '');
|
|
@@ -690,8 +613,6 @@ class TuiDocDocumentation {
|
|
|
690
613
|
constructor() {
|
|
691
614
|
this.cdr = inject(ChangeDetectorRef);
|
|
692
615
|
this.destroyRef = inject(DestroyRef);
|
|
693
|
-
this.getColor = inject(TuiGetColorPipe);
|
|
694
|
-
this.getOpacity = inject(TuiGetOpacityPipe);
|
|
695
616
|
this.propertiesConnectors = EMPTY_QUERY;
|
|
696
617
|
this.texts = inject(TUI_DOC_DOCUMENTATION_TEXTS);
|
|
697
618
|
this.excludedProperties = inject(TUI_DOC_EXCLUDED_PROPERTIES);
|
|
@@ -709,24 +630,8 @@ class TuiDocDocumentation {
|
|
|
709
630
|
get type() {
|
|
710
631
|
return this.isAPI ? this.texts[0] : this.texts[1];
|
|
711
632
|
}
|
|
712
|
-
onColorChange(connector, color) {
|
|
713
|
-
const opacity = this.getOpacity.transform(connector.documentationPropertyValue || '');
|
|
714
|
-
if (opacity === 100) {
|
|
715
|
-
connector.onValueChange(color);
|
|
716
|
-
return;
|
|
717
|
-
}
|
|
718
|
-
const rgb = tuiHexToRgb(color).join(', ');
|
|
719
|
-
const result = `rgba(${rgb}, ${opacity / 100})`;
|
|
720
|
-
connector.onValueChange(result);
|
|
721
|
-
}
|
|
722
|
-
onOpacityChange(connector, opacity) {
|
|
723
|
-
const hex = this.getColor.transform(connector.documentationPropertyValue || '');
|
|
724
|
-
const rgb = tuiHexToRgb(hex);
|
|
725
|
-
const result = `rgba(${rgb}, ${(opacity || 0) / 100})`;
|
|
726
|
-
connector.onValueChange(result);
|
|
727
|
-
}
|
|
728
633
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocDocumentation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
729
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocDocumentation, isStandalone: true, selector: "tui-doc-documentation", inputs: { heading: "heading", showValues: "showValues", isAPI: "isAPI" }, providers: [TuiGetColorPipe, TuiGetOpacityPipe], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnector }], ngImport: i0, template: "<h1\n *ngIf=\"heading\"\n class=\"t-heading\"\n>\n {{ heading }}\n</h1>\n<ng-content />\n<ng-container *ngIf=\"propertiesConnectors | tuiToArray | tuiFilter: matcher : excludedProperties as properties\">\n <table\n *ngIf=\"properties.length\"\n class=\"t-table\"\n >\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 properties\"\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 t-additional-info\"\n >\n <code\n *ngIf=\"propertyConnector.attrName\"\n class=\"t-property-code\"\n [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n >\n {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n </code>\n <tui-badge\n *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\n appearance=\"neutral\"\n size=\"s\"\n >\n Optional\n </tui-badge>\n <tui-badge\n *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n appearance=\"negative\"\n size=\"s\"\n >\n Deprecated\n </tui-badge>\n </div>\n <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n </td>\n <td class=\"t-cell\">\n <span class=\"type\">\n <code class=\"t-code-type\">\n <ng-container\n *ngFor=\"\n let item of propertyConnector.documentationPropertyType | tuiDocTypeReference;\n let last = last\n \"\n >\n <a\n *ngIf=\"item.reference; else default\"\n target=\"_blank\"\n class=\"t-code-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n </a>\n <ng-template #default>\n {{ item.type }}\n </ng-template>\n <span *ngIf=\"!last\"> | </span>\n </ng-container>\n </code>\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 tuiDropdownLimitWidth=\"min\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [tuiTextfieldCleaner]=\"propertyConnector.documentationPropertyType | tuiShowCleanerPipe\"\n [tuiTextfieldLabelOutside]=\"true\"\n [valueContent]=\"selectContent\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n >\n <code class=\"t-exception\">null</code>\n <tui-data-list-wrapper\n *tuiDataList\n [itemContent]=\"selectContent\"\n [items]=\"propertyConnector.documentationPropertyValues\"\n />\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 <input\n *ngSwitchCase=\"'boolean'\"\n tuiSwitch\n type=\"checkbox\"\n class=\"t-switch\"\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [showIcons]=\"true\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n\n <tui-textfield\n *ngSwitchCase=\"'string'\"\n tuiTextfieldSize=\"m\"\n >\n <input\n tuiTextfield\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue || ''\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n </tui-textfield>\n\n <tui-input-number\n *ngSwitchCase=\"'number'\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [step]=\"1\"\n [tuiTextfieldLabelOutside]=\"true\"\n (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n />\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()\"\n >\n Emit!\n </tui-notification>\n </ng-template>\n </td>\n </tr>\n </table>\n</ng-container>\n", styles: [":host{display:block;min-inline-size:100%}.t-table{inline-size:100%;table-layout:fixed}.t-row:not(:last-child){border-block-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){.t-row{display:flex;flex-wrap:wrap}.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{inline-size:40%}.t-cell_value{text-align:end}@media screen and (max-width: 47.9625em){.t-cell{inline-size:100%;block-size:auto;padding:.5rem 0;text-align:start}}.t-th{padding:.5rem 1rem;color:var(--tui-text-secondary);font-weight:400;text-align:start}.t-th_value{max-inline-size:20rem;text-align:end}@media screen and (max-width: 47.9625em){.t-th_value{inline-size:9.375rem}}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}@media screen and (max-width: 47.9625em){.t-property{padding:.5rem 0}}.t-type{font-family:monospace}.t-deprecated .t-property-code{text-decoration:line-through}.t-deprecated-label{margin-right:.125rem;color:var(--tui-text-negative);font-size:.75rem}.t-additional-info{display:flex;gap:.3125rem;align-items:center}.t-exception{display:block;inline-size:-webkit-max-content;inline-size:max-content}.t-output{text-align:start;opacity:0}.t-heading{font:var(--tui-font-heading-4)}.t-code-type{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start}.t-code-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:3px}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;-webkit-mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%;mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%}.t-switch{display:block}@media not screen and (max-width: 47.9625em){.t-switch{margin-left:auto}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiBadge, selector: "tui-badge,[tuiBadge]", inputs: ["size"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "directive", type: i4$2.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "pipe", type: TuiFilterPipe, name: "tuiFilter" }, { kind: "ngmodule", type: TuiInputNumberModule }, { kind: "component", type: i3.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "step"] }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "pipe", type: TuiIsOptionalPipe, name: "tuiIsOptionalPipe" }, { kind: "directive", type: TuiNotification, selector: "tui-notification,a[tuiNotification],button[tuiNotification]", inputs: ["appearance", "icon", "size"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5$1.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5$1.TuiSelectDirective, selector: "tui-select" }, { kind: "pipe", type: TuiShowCleanerPipe, name: "tuiShowCleanerPipe" }, { kind: "pipe", type: TuiStripOptionalPipe, name: "tuiStripOptionalPipe" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield", inputs: ["stringify", "content", "filler"] }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i5.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i5.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i5.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "pipe", type: TuiToArrayPipe, name: "tuiToArray" }], animations: [
|
|
634
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocDocumentation, isStandalone: true, selector: "tui-doc-documentation", inputs: { heading: "heading", showValues: "showValues", isAPI: "isAPI" }, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnector }], ngImport: i0, template: "<h1\n *ngIf=\"heading\"\n class=\"t-heading\"\n>\n {{ heading }}\n</h1>\n<ng-content />\n<ng-container *ngIf=\"propertiesConnectors | tuiToArray | tuiFilter: matcher : excludedProperties as properties\">\n <table\n *ngIf=\"properties.length\"\n class=\"t-table\"\n >\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 properties\"\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 t-additional-info\"\n >\n <code\n *ngIf=\"propertyConnector.attrName\"\n class=\"t-property-code\"\n [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n >\n {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n </code>\n <tui-badge\n *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\n appearance=\"neutral\"\n size=\"s\"\n >\n Optional\n </tui-badge>\n <tui-badge\n *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n appearance=\"negative\"\n size=\"s\"\n >\n Deprecated\n </tui-badge>\n </div>\n <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n </td>\n <td class=\"t-cell\">\n <span class=\"type\">\n <code class=\"t-code-type\">\n <ng-container\n *ngFor=\"\n let item of propertyConnector.documentationPropertyType | tuiDocTypeReference;\n let last = last\n \"\n >\n <a\n *ngIf=\"item.reference; else default\"\n target=\"_blank\"\n class=\"t-code-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n </a>\n <ng-template #default>\n {{ item.type }}\n </ng-template>\n <span *ngIf=\"!last\"> | </span>\n </ng-container>\n </code>\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 tuiDropdownLimitWidth=\"min\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [tuiTextfieldCleaner]=\"propertyConnector.documentationPropertyType | tuiShowCleanerPipe\"\n [tuiTextfieldLabelOutside]=\"true\"\n [valueContent]=\"selectContent\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n >\n <code class=\"t-exception\">null</code>\n <tui-data-list-wrapper\n *tuiDataList\n class=\"t-data-list\"\n [itemContent]=\"selectContent\"\n [items]=\"propertyConnector.documentationPropertyValues\"\n />\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 <input\n *ngSwitchCase=\"'boolean'\"\n tuiSwitch\n type=\"checkbox\"\n class=\"t-switch\"\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [showIcons]=\"true\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n\n <tui-textfield\n *ngSwitchCase=\"'string'\"\n tuiTextfieldSize=\"m\"\n >\n <input\n tuiTextfield\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue || ''\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n </tui-textfield>\n\n <tui-input-number\n *ngSwitchCase=\"'number'\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [step]=\"1\"\n [tuiTextfieldLabelOutside]=\"true\"\n (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n />\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()\"\n >\n Emit!\n </tui-notification>\n </ng-template>\n </td>\n </tr>\n </table>\n</ng-container>\n", styles: [":host{display:block;min-inline-size:100%}.t-table{inline-size:100%;table-layout:fixed}.t-row:not(:last-child){border-block-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){.t-row{display:flex;flex-wrap:wrap}.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{inline-size:40%}.t-cell_value{text-align:end}@media screen and (max-width: 47.9625em){.t-cell{inline-size:100%;block-size:auto;padding:.5rem 0;text-align:start}}.t-th{padding:.5rem 1rem;color:var(--tui-text-secondary);font-weight:400;text-align:start}.t-th_value{max-inline-size:20rem;text-align:end}@media screen and (max-width: 47.9625em){.t-th_value{inline-size:9.375rem}}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}@media screen and (max-width: 47.9625em){.t-property{padding:.5rem 0}}.t-type{font-family:monospace}.t-deprecated .t-property-code{text-decoration:line-through}.t-deprecated-label{margin-right:.125rem;color:var(--tui-text-negative);font-size:.75rem}.t-additional-info{display:flex;gap:.3125rem;align-items:center}.t-exception{display:block;inline-size:-webkit-max-content;inline-size:max-content}.t-output{text-align:start;opacity:0}.t-heading{font:var(--tui-font-heading-4)}.t-code-type{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start}.t-code-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:3px}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;-webkit-mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%;mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%}.t-switch{display:block}@media not screen and (max-width: 47.9625em){.t-switch{margin-left:auto}}.t-data-list{overflow-wrap:anywhere}@media not screen and (max-width: 47.9625em){.t-data-list{max-inline-size:22.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiBadge, selector: "tui-badge,[tuiBadge]", inputs: ["size"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "directive", type: i4$2.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "pipe", type: TuiFilterPipe, name: "tuiFilter" }, { kind: "ngmodule", type: TuiInputNumberModule }, { kind: "component", type: i3.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "step"] }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "pipe", type: TuiIsOptionalPipe, name: "tuiIsOptionalPipe" }, { kind: "directive", type: TuiNotification, selector: "tui-notification,a[tuiNotification],button[tuiNotification]", inputs: ["appearance", "icon", "size"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5$1.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5$1.TuiSelectDirective, selector: "tui-select" }, { kind: "pipe", type: TuiShowCleanerPipe, name: "tuiShowCleanerPipe" }, { kind: "pipe", type: TuiStripOptionalPipe, name: "tuiStripOptionalPipe" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield", inputs: ["stringify", "content", "filler"] }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i5.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i5.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i5.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "pipe", type: TuiToArrayPipe, name: "tuiToArray" }], animations: [
|
|
730
635
|
trigger('emitEvent', [
|
|
731
636
|
transition(':increment', [style({ opacity: 1 }), animate('500ms ease-in')]),
|
|
732
637
|
]),
|
|
@@ -746,13 +651,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
746
651
|
TuiDocTypeReferencePipe,
|
|
747
652
|
TuiDropdown,
|
|
748
653
|
TuiFilterPipe,
|
|
749
|
-
TuiGetColorPipe,
|
|
750
|
-
TuiGetOpacityPipe,
|
|
751
|
-
TuiGroup,
|
|
752
654
|
TuiInputNumberModule,
|
|
753
655
|
TuiInspectPipe,
|
|
754
656
|
TuiIsOptionalPipe,
|
|
755
|
-
TuiIsPrimitivePolymorpheusContentPipe,
|
|
756
657
|
TuiNotification,
|
|
757
658
|
TuiSelectModule,
|
|
758
659
|
TuiShowCleanerPipe,
|
|
@@ -761,11 +662,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
761
662
|
TuiTextfield,
|
|
762
663
|
TuiTextfieldControllerModule,
|
|
763
664
|
TuiToArrayPipe,
|
|
764
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
665
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], animations: [
|
|
765
666
|
trigger('emitEvent', [
|
|
766
667
|
transition(':increment', [style({ opacity: 1 }), animate('500ms ease-in')]),
|
|
767
668
|
]),
|
|
768
|
-
], template: "<h1\n *ngIf=\"heading\"\n class=\"t-heading\"\n>\n {{ heading }}\n</h1>\n<ng-content />\n<ng-container *ngIf=\"propertiesConnectors | tuiToArray | tuiFilter: matcher : excludedProperties as properties\">\n <table\n *ngIf=\"properties.length\"\n class=\"t-table\"\n >\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 properties\"\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 t-additional-info\"\n >\n <code\n *ngIf=\"propertyConnector.attrName\"\n class=\"t-property-code\"\n [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n >\n {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n </code>\n <tui-badge\n *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\n appearance=\"neutral\"\n size=\"s\"\n >\n Optional\n </tui-badge>\n <tui-badge\n *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n appearance=\"negative\"\n size=\"s\"\n >\n Deprecated\n </tui-badge>\n </div>\n <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n </td>\n <td class=\"t-cell\">\n <span class=\"type\">\n <code class=\"t-code-type\">\n <ng-container\n *ngFor=\"\n let item of propertyConnector.documentationPropertyType | tuiDocTypeReference;\n let last = last\n \"\n >\n <a\n *ngIf=\"item.reference; else default\"\n target=\"_blank\"\n class=\"t-code-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n </a>\n <ng-template #default>\n {{ item.type }}\n </ng-template>\n <span *ngIf=\"!last\"> | </span>\n </ng-container>\n </code>\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 tuiDropdownLimitWidth=\"min\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [tuiTextfieldCleaner]=\"propertyConnector.documentationPropertyType | tuiShowCleanerPipe\"\n [tuiTextfieldLabelOutside]=\"true\"\n [valueContent]=\"selectContent\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n >\n <code class=\"t-exception\">null</code>\n <tui-data-list-wrapper\n *tuiDataList\n [itemContent]=\"selectContent\"\n [items]=\"propertyConnector.documentationPropertyValues\"\n />\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 <input\n *ngSwitchCase=\"'boolean'\"\n tuiSwitch\n type=\"checkbox\"\n class=\"t-switch\"\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [showIcons]=\"true\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n\n <tui-textfield\n *ngSwitchCase=\"'string'\"\n tuiTextfieldSize=\"m\"\n >\n <input\n tuiTextfield\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue || ''\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n </tui-textfield>\n\n <tui-input-number\n *ngSwitchCase=\"'number'\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [step]=\"1\"\n [tuiTextfieldLabelOutside]=\"true\"\n (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n />\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()\"\n >\n Emit!\n </tui-notification>\n </ng-template>\n </td>\n </tr>\n </table>\n</ng-container>\n", styles: [":host{display:block;min-inline-size:100%}.t-table{inline-size:100%;table-layout:fixed}.t-row:not(:last-child){border-block-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){.t-row{display:flex;flex-wrap:wrap}.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{inline-size:40%}.t-cell_value{text-align:end}@media screen and (max-width: 47.9625em){.t-cell{inline-size:100%;block-size:auto;padding:.5rem 0;text-align:start}}.t-th{padding:.5rem 1rem;color:var(--tui-text-secondary);font-weight:400;text-align:start}.t-th_value{max-inline-size:20rem;text-align:end}@media screen and (max-width: 47.9625em){.t-th_value{inline-size:9.375rem}}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}@media screen and (max-width: 47.9625em){.t-property{padding:.5rem 0}}.t-type{font-family:monospace}.t-deprecated .t-property-code{text-decoration:line-through}.t-deprecated-label{margin-right:.125rem;color:var(--tui-text-negative);font-size:.75rem}.t-additional-info{display:flex;gap:.3125rem;align-items:center}.t-exception{display:block;inline-size:-webkit-max-content;inline-size:max-content}.t-output{text-align:start;opacity:0}.t-heading{font:var(--tui-font-heading-4)}.t-code-type{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start}.t-code-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:3px}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;-webkit-mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%;mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%}.t-switch{display:block}@media not screen and (max-width: 47.9625em){.t-switch{margin-left:auto}}\n"] }]
|
|
669
|
+
], template: "<h1\n *ngIf=\"heading\"\n class=\"t-heading\"\n>\n {{ heading }}\n</h1>\n<ng-content />\n<ng-container *ngIf=\"propertiesConnectors | tuiToArray | tuiFilter: matcher : excludedProperties as properties\">\n <table\n *ngIf=\"properties.length\"\n class=\"t-table\"\n >\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 properties\"\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 t-additional-info\"\n >\n <code\n *ngIf=\"propertyConnector.attrName\"\n class=\"t-property-code\"\n [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n >\n {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n </code>\n <tui-badge\n *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\n appearance=\"neutral\"\n size=\"s\"\n >\n Optional\n </tui-badge>\n <tui-badge\n *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n appearance=\"negative\"\n size=\"s\"\n >\n Deprecated\n </tui-badge>\n </div>\n <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n </td>\n <td class=\"t-cell\">\n <span class=\"type\">\n <code class=\"t-code-type\">\n <ng-container\n *ngFor=\"\n let item of propertyConnector.documentationPropertyType | tuiDocTypeReference;\n let last = last\n \"\n >\n <a\n *ngIf=\"item.reference; else default\"\n target=\"_blank\"\n class=\"t-code-reference\"\n [attr.href]=\"item.reference\"\n >\n {{ item.type }}\n </a>\n <ng-template #default>\n {{ item.type }}\n </ng-template>\n <span *ngIf=\"!last\"> | </span>\n </ng-container>\n </code>\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 tuiDropdownLimitWidth=\"min\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [tuiTextfieldCleaner]=\"propertyConnector.documentationPropertyType | tuiShowCleanerPipe\"\n [tuiTextfieldLabelOutside]=\"true\"\n [valueContent]=\"selectContent\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n >\n <code class=\"t-exception\">null</code>\n <tui-data-list-wrapper\n *tuiDataList\n class=\"t-data-list\"\n [itemContent]=\"selectContent\"\n [items]=\"propertyConnector.documentationPropertyValues\"\n />\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 <input\n *ngSwitchCase=\"'boolean'\"\n tuiSwitch\n type=\"checkbox\"\n class=\"t-switch\"\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [showIcons]=\"true\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n\n <tui-textfield\n *ngSwitchCase=\"'string'\"\n tuiTextfieldSize=\"m\"\n >\n <input\n tuiTextfield\n [id]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue || ''\"\n (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n />\n </tui-textfield>\n\n <tui-input-number\n *ngSwitchCase=\"'number'\"\n tuiTextfieldSize=\"m\"\n [nativeId]=\"propertyConnector.attrName\"\n [ngModel]=\"propertyConnector.documentationPropertyValue\"\n [step]=\"1\"\n [tuiTextfieldLabelOutside]=\"true\"\n (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n />\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()\"\n >\n Emit!\n </tui-notification>\n </ng-template>\n </td>\n </tr>\n </table>\n</ng-container>\n", styles: [":host{display:block;min-inline-size:100%}.t-table{inline-size:100%;table-layout:fixed}.t-row:not(:last-child){border-block-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){.t-row{display:flex;flex-wrap:wrap}.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{inline-size:40%}.t-cell_value{text-align:end}@media screen and (max-width: 47.9625em){.t-cell{inline-size:100%;block-size:auto;padding:.5rem 0;text-align:start}}.t-th{padding:.5rem 1rem;color:var(--tui-text-secondary);font-weight:400;text-align:start}.t-th_value{max-inline-size:20rem;text-align:end}@media screen and (max-width: 47.9625em){.t-th_value{inline-size:9.375rem}}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}@media screen and (max-width: 47.9625em){.t-property{padding:.5rem 0}}.t-type{font-family:monospace}.t-deprecated .t-property-code{text-decoration:line-through}.t-deprecated-label{margin-right:.125rem;color:var(--tui-text-negative);font-size:.75rem}.t-additional-info{display:flex;gap:.3125rem;align-items:center}.t-exception{display:block;inline-size:-webkit-max-content;inline-size:max-content}.t-output{text-align:start;opacity:0}.t-heading{font:var(--tui-font-heading-4)}.t-code-type{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start}.t-code-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:3px}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;-webkit-mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%;mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%}.t-switch{display:block}@media not screen and (max-width: 47.9625em){.t-switch{margin-left:auto}}.t-data-list{overflow-wrap:anywhere}@media not screen and (max-width: 47.9625em){.t-data-list{max-inline-size:22.5rem}}\n"] }]
|
|
769
670
|
}], propDecorators: { propertiesConnectors: [{
|
|
770
671
|
type: ContentChildren,
|
|
771
672
|
args: [TuiDocDocumentationPropertyConnector]
|
|
@@ -777,6 +678,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
777
678
|
type: Input
|
|
778
679
|
}] } });
|
|
779
680
|
|
|
681
|
+
class TuiGetColorPipe {
|
|
682
|
+
transform(color) {
|
|
683
|
+
if (color.length === 4) {
|
|
684
|
+
return color
|
|
685
|
+
.split('')
|
|
686
|
+
.reduce((result, current) => [...result, current, current], [])
|
|
687
|
+
.join('')
|
|
688
|
+
.replace('#', '');
|
|
689
|
+
}
|
|
690
|
+
if (color.startsWith('#')) {
|
|
691
|
+
return color;
|
|
692
|
+
}
|
|
693
|
+
if (color === 'transparent') {
|
|
694
|
+
return '#000000';
|
|
695
|
+
}
|
|
696
|
+
const parsed = color
|
|
697
|
+
.replace('rgb(', '')
|
|
698
|
+
.replace('rgba(', '')
|
|
699
|
+
.replace(')', '')
|
|
700
|
+
.replace(' ', '')
|
|
701
|
+
.split(',')
|
|
702
|
+
.map((v) => Number.parseInt(v, 10));
|
|
703
|
+
return tuiRgbToHex(...parsed);
|
|
704
|
+
}
|
|
705
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiGetColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
706
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiGetColorPipe, isStandalone: true, name: "tuiGetColorPipe" }); }
|
|
707
|
+
}
|
|
708
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiGetColorPipe, decorators: [{
|
|
709
|
+
type: Pipe,
|
|
710
|
+
args: [{
|
|
711
|
+
standalone: true,
|
|
712
|
+
name: 'tuiGetColorPipe',
|
|
713
|
+
}]
|
|
714
|
+
}] });
|
|
715
|
+
|
|
716
|
+
class TuiGetOpacityPipe {
|
|
717
|
+
transform(color) {
|
|
718
|
+
if (color.startsWith('#') || color.startsWith('rgb(')) {
|
|
719
|
+
return 100;
|
|
720
|
+
}
|
|
721
|
+
if (color === 'transparent') {
|
|
722
|
+
return 0;
|
|
723
|
+
}
|
|
724
|
+
const lastComma = color.lastIndexOf(',');
|
|
725
|
+
const parsed = color
|
|
726
|
+
.slice(lastComma)
|
|
727
|
+
.replace(')', '')
|
|
728
|
+
.replace(' ', '')
|
|
729
|
+
.replace(',', '');
|
|
730
|
+
return Math.round(Number.parseFloat(parsed) * 100);
|
|
731
|
+
}
|
|
732
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiGetOpacityPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
733
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiGetOpacityPipe, isStandalone: true, name: "tuiGetOpacity" }); }
|
|
734
|
+
}
|
|
735
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiGetOpacityPipe, decorators: [{
|
|
736
|
+
type: Pipe,
|
|
737
|
+
args: [{
|
|
738
|
+
standalone: true,
|
|
739
|
+
name: 'tuiGetOpacity',
|
|
740
|
+
}]
|
|
741
|
+
}] });
|
|
742
|
+
|
|
743
|
+
class TuiIsPrimitivePolymorpheusContentPipe {
|
|
744
|
+
transform(value) {
|
|
745
|
+
return tuiIsString(value) || tuiIsNumber(value);
|
|
746
|
+
}
|
|
747
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
748
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, isStandalone: true, name: "tuiIsPrimitivePolymorpheusContentPipe" }); }
|
|
749
|
+
}
|
|
750
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, decorators: [{
|
|
751
|
+
type: Pipe,
|
|
752
|
+
args: [{
|
|
753
|
+
standalone: true,
|
|
754
|
+
name: 'tuiIsPrimitivePolymorpheusContentPipe',
|
|
755
|
+
}]
|
|
756
|
+
}] });
|
|
757
|
+
|
|
780
758
|
const TUI_DOC_EXAMPLE_DEFAULT_OPTIONS = {
|
|
781
759
|
codeEditorVisibilityHandler: (files) => Boolean(files[TUI_EXAMPLE_PRIMARY_FILE_NAME.TS] &&
|
|
782
760
|
files[TUI_EXAMPLE_PRIMARY_FILE_NAME.HTML]),
|