@taiga-ui/addon-doc 2.30.0 → 2.34.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.
Files changed (39) hide show
  1. package/bundles/taiga-ui-addon-doc.umd.js +61 -29
  2. package/bundles/taiga-ui-addon-doc.umd.js.map +1 -1
  3. package/bundles/taiga-ui-addon-doc.umd.min.js +1 -1
  4. package/bundles/taiga-ui-addon-doc.umd.min.js.map +1 -1
  5. package/components/code/parse-code-block.d.ts +1 -1
  6. package/components/documentation/documentation-property-connector.directive.d.ts +2 -2
  7. package/components/example/example.component.d.ts +4 -2
  8. package/esm2015/components/code/code.component.js +1 -1
  9. package/esm2015/components/code/parse-code-block.js +5 -3
  10. package/esm2015/components/demo/demo.component.js +3 -3
  11. package/esm2015/components/documentation/documentation-property-connector.directive.js +9 -11
  12. package/esm2015/components/documentation/documentation.component.js +1 -1
  13. package/esm2015/components/example/example.component.js +13 -8
  14. package/esm2015/components/main/main.component.js +6 -3
  15. package/esm2015/components/page/page.component.js +1 -1
  16. package/esm2015/public-api.js +3 -1
  17. package/esm2015/tokens/example-content-processor.js +2 -2
  18. package/esm2015/utils/coerce-value.js +23 -0
  19. package/esm2015/utils/inspect.js +2 -2
  20. package/esm5/components/code/code.component.js +1 -1
  21. package/esm5/components/code/parse-code-block.js +8 -5
  22. package/esm5/components/demo/demo.component.js +3 -3
  23. package/esm5/components/documentation/documentation-property-connector.directive.js +9 -11
  24. package/esm5/components/documentation/documentation.component.js +1 -1
  25. package/esm5/components/example/example.component.js +13 -8
  26. package/esm5/components/main/main.component.js +6 -3
  27. package/esm5/components/page/page.component.js +1 -1
  28. package/esm5/public-api.js +3 -1
  29. package/esm5/tokens/example-content-processor.js +2 -2
  30. package/esm5/utils/coerce-value.js +23 -0
  31. package/esm5/utils/inspect.js +2 -2
  32. package/fesm2015/taiga-ui-addon-doc.js +58 -29
  33. package/fesm2015/taiga-ui-addon-doc.js.map +1 -1
  34. package/fesm5/taiga-ui-addon-doc.js +61 -31
  35. package/fesm5/taiga-ui-addon-doc.js.map +1 -1
  36. package/package.json +16 -15
  37. package/public-api.d.ts +2 -0
  38. package/taiga-ui-addon-doc.metadata.json +1 -1
  39. package/utils/coerce-value.d.ts +1 -0
@@ -246,11 +246,14 @@
246
246
  }
247
247
 
248
248
  function tryParseMarkdownCodeBlock(text) {
249
+ if (text === void 0) { text = ''; }
249
250
  var tokens = new MarkdownIt().parse(text, {});
250
- var result = tokens.filter(function (_a) {
251
- var tag = _a.tag;
252
- return tag === 'code';
253
- }).map(function (_a) {
251
+ var result = tokens
252
+ .filter(function (_a) {
253
+ var tag = _a.tag, type = _a.type;
254
+ return tag === 'code' && type === 'fence';
255
+ })
256
+ .map(function (_a) {
254
257
  var content = _a.content;
255
258
  return content;
256
259
  });
@@ -290,7 +293,7 @@
290
293
  core.Component({
291
294
  selector: 'tui-doc-code',
292
295
  template: "<p *ngIf=\"filename\" class=\"t-header\">{{filename}}</p>\n<pre\n *ngFor=\"let content of processor$ | async\"\n class=\"t-code\"\n><code [lineNumbers]=\"true\" [highlight]=\"content\"></code></pre>\n",
293
- styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.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-disabled);word-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.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:6px 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}@media screen and (max-width:47.9375em){.hljs:not(:empty){padding:1rem}}"]
296
+ styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.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-disabled);word-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.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:6px 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}"]
294
297
  })
295
298
  ], TuiDocCodeComponent);
296
299
  return TuiDocCodeComponent;
@@ -432,7 +435,7 @@
432
435
  this.change$ = new rxjs.Subject();
433
436
  this.items = ['onLight', 'onDark'];
434
437
  this.isBrowser = common.isPlatformBrowser(platformId);
435
- var parsedMode = locationRef.path().match(/tui-mode=(onDark|onLight)/);
438
+ var parsedMode = locationRef.path().match(/tuiMode=(onDark|onLight)/);
436
439
  if (parsedMode !== null && parsedMode.length > 0) {
437
440
  this.modeControl.setValue(parsedMode[1]);
438
441
  }
@@ -539,7 +542,7 @@
539
542
  useExisting: core.forwardRef(function () { return TuiDocDemoComponent_1; }),
540
543
  },
541
544
  ],
542
- 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 .5rem 1rem rgba(0,0,0,.16);display:flex;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);max-width:100%;min-height:6rem;width:100%;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%)}.t-content{flex:1 1 0;min-width:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width:47.9375em){.t-wrapper{min-height:auto}.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,300ms);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{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:0 0;font-size:inherit;line-height:inherit;box-shadow:0 .5rem 1rem rgba(0,0,0,.16);position:relative;width:3.5rem;min-height:inherit;flex-shrink:0;border-left:1px solid var(--tui-base-03);cursor:col-resize;outline:0;background:var(--tui-base-01);color:var(--tui-text-01)}.t-resizer:after,.t-resizer:before{content:'';position:absolute;top:.75rem;left:50%;bottom:.75rem;width:1px;background:var(--tui-base-05)}.t-resizer:before{transform:translateX(.125rem)}.t-resizer:after{transform:translateX(-.1875rem)}@media screen and (max-width:47.9375em){.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}@supports (position:sticky){@media screen and (min-height:37.5rem){:host{position:sticky;top:4.625rem;z-index:2}}}"]
545
+ 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 .5rem 1rem rgba(0,0,0,.16);display:flex;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);max-width:100%;min-height:6rem;width:100%;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,300ms);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{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:0 0;font-size:inherit;line-height:inherit;box-shadow:0 .5rem 1rem rgba(0,0,0,.16);position:relative;width:3.5rem;min-height:inherit;flex-shrink:0;border-left:1px solid var(--tui-base-03);cursor:col-resize;outline:0;background:var(--tui-base-01);color:var(--tui-text-01)}.t-resizer:after,.t-resizer:before{content:'';position:absolute;top:.75rem;left:50%;bottom:.75rem;width:1px;background:var(--tui-base-05)}.t-resizer:before{transform:translateX(.125rem)}.t-resizer:after{transform:translateX(-.1875rem)}: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}@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}}}"]
543
546
  }),
544
547
  __param(0, core.Inject(cdk.TUI_IS_MOBILE)),
545
548
  __param(1, core.Inject(cdk.TuiDestroyService)),
@@ -664,7 +667,7 @@
664
667
  return String(data);
665
668
  }
666
669
  if (data instanceof RegExp) {
667
- return data.toString();
670
+ return String(data);
668
671
  }
669
672
  if (Array.isArray(data)) {
670
673
  return inspectArray(data, depth);
@@ -672,6 +675,29 @@
672
675
  return inspectObject(data, depth);
673
676
  }
674
677
 
678
+ function coerceValue(value) {
679
+ var prepared = String(value).trim();
680
+ if (isEmptyParamValue(prepared)) {
681
+ return null;
682
+ }
683
+ else if (isBooleanParamValue(prepared)) {
684
+ return String(prepared) === 'true';
685
+ }
686
+ else if (isNumberParamValue(prepared)) {
687
+ return Number(prepared);
688
+ }
689
+ return decodeURIComponent(prepared);
690
+ }
691
+ function isEmptyParamValue(value) {
692
+ return ['undefined', 'null', 'NaN', 'Infinity'].includes(value);
693
+ }
694
+ function isBooleanParamValue(value) {
695
+ return value === 'true' || value === 'false';
696
+ }
697
+ function isNumberParamValue(value) {
698
+ return /^-?[\d.]+(?:e-?\d+)?$/.test(value);
699
+ }
700
+
675
701
  var SERIALIZED_SUFFIX = '$';
676
702
  // @bad TODO: refactor output and value sync
677
703
  var TuiDocDocumentationPropertyConnectorDirective = /** @class */ (function () {
@@ -737,18 +763,15 @@
737
763
  this.emits$.next(this.emits$.value + 1);
738
764
  };
739
765
  TuiDocDocumentationPropertyConnectorDirective.prototype.parseParams = function (params) {
740
- if (!params[this.documentationPropertyName] &&
741
- !params[this.documentationPropertyName + SERIALIZED_SUFFIX]) {
766
+ var propertyValue = params[this.documentationPropertyName];
767
+ var propertyValueWithSuffix = params["" + this.documentationPropertyName + SERIALIZED_SUFFIX];
768
+ if (!propertyValue && !propertyValueWithSuffix) {
742
769
  return;
743
770
  }
744
- var isValueAvailableByKey = !!params[this.documentationPropertyName + SERIALIZED_SUFFIX];
745
- if (isValueAvailableByKey && this.documentationPropertyValues) {
746
- this.onValueChange(this.documentationPropertyValues[params[this.documentationPropertyName + SERIALIZED_SUFFIX]]);
747
- return;
748
- }
749
- this.onValueChange(!isNaN(Number(params[this.documentationPropertyName]))
750
- ? Number(params[this.documentationPropertyName])
751
- : params[this.documentationPropertyName]);
771
+ var value = !!propertyValueWithSuffix && this.documentationPropertyValues
772
+ ? this.documentationPropertyValues[propertyValueWithSuffix]
773
+ : coerceValue(propertyValue);
774
+ this.onValueChange(value);
752
775
  };
753
776
  TuiDocDocumentationPropertyConnectorDirective.prototype.setQueryParam = function (value) {
754
777
  var _a;
@@ -925,7 +948,7 @@
925
948
  animations.transition(':increment', [animations.style({ opacity: 1 }), animations.animate('500ms ease-in')]),
926
949
  ]),
927
950
  ],
928
- styles: [":host{display:block;min-width:100%}.t-cell_prop{width:40%}.t-cell_value{max-width:20rem}@media screen and (max-width:47.9375em){.t-row{display:flex;flex-wrap:wrap}.t-row_header{display:none}.t-cell_value{width:9.375rem}.t-cell{width:100%;height:auto;padding:.5rem 0;text-align:left}}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}.t-type{font-family:monospace}.t-deprecated{background-color: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}"]
951
+ styles: [":host{display:block;min-width:100%}:host-context(tui-root._mobile) .t-row{display:flex;flex-wrap:wrap}:host-context(tui-root._mobile) .t-row_header{display:none}.t-cell_prop{width:40%}.t-cell_value{max-width:20rem}:host-context(tui-root._mobile) .t-cell_value{width:9.375rem}:host-context(tui-root._mobile) .t-cell{width:100%;height:auto;padding:.5rem 0;text-align:left}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}.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}"]
929
952
  }),
930
953
  __param(0, core.Inject(core.ChangeDetectorRef)),
931
954
  __param(1, core.Inject(TUI_DOC_DOCUMENTATION_TEXTS))
@@ -1018,7 +1041,7 @@
1018
1041
 
1019
1042
  var TUI_DOC_CODE_EDITOR = new core.InjectionToken('Contains service for opening online IDE e.g. Stackblitz');
1020
1043
 
1021
- var TUI_DOC_EXAMPLE_CONTENT_PROCESSOR = new core.InjectionToken('Processes content in example', { factory: function () { return cdk.identity; } });
1044
+ var TUI_DOC_EXAMPLE_CONTENT_PROCESSOR = new core.InjectionToken('Processes content in example', { factory: function () { return rxjs.identity; } });
1022
1045
 
1023
1046
  function rawLoadRecord(example) {
1024
1047
  return __awaiter(this, void 0, void 0, function () {
@@ -1065,7 +1088,7 @@
1065
1088
  // Ambient type cannot be used without dynamic https://github.com/angular/angular/issues/23395
1066
1089
  // @dynamic
1067
1090
  var TuiDocExampleComponent = /** @class */ (function () {
1068
- function TuiDocExampleComponent(id, clipboard, notifications, location, copyTexts$, texts, codeEditor, processContent) {
1091
+ function TuiDocExampleComponent(id, clipboard, notifications, location, copyTexts$, texts, codeEditor, processContent, isCypress) {
1069
1092
  this.id = id;
1070
1093
  this.clipboard = clipboard;
1071
1094
  this.notifications = notifications;
@@ -1074,12 +1097,14 @@
1074
1097
  this.texts = texts;
1075
1098
  this.codeEditor = codeEditor;
1076
1099
  this.processContent = processContent;
1100
+ this.isCypress = isCypress;
1077
1101
  this.rawLoader$$ = new rxjs.BehaviorSubject({});
1078
1102
  this.heading = '';
1079
1103
  this.description = '';
1080
1104
  this.componentName = this.location.pathname.slice(1);
1081
- this.activeItemIndex = 0;
1082
- this.defaultTab = this.texts[0];
1105
+ this.defaultTabIndex = 0;
1106
+ this.defaultTab = this.texts[this.defaultTabIndex];
1107
+ this.activeItemIndex = this.defaultTabIndex;
1083
1108
  this.copy$ = this.copyTexts$.pipe(operators.map(function (_a) {
1084
1109
  var _b = __read(_a, 1), copy = _b[0];
1085
1110
  return copy;
@@ -1115,7 +1140,8 @@
1115
1140
  { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [kit.TUI_COPY_TEXTS,] }] },
1116
1141
  { type: Array, decorators: [{ type: core.Inject, args: [TUI_DOC_EXAMPLE_TEXTS,] }] },
1117
1142
  { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [TUI_DOC_CODE_EDITOR,] }] },
1118
- { type: undefined, decorators: [{ type: core.Inject, args: [TUI_DOC_EXAMPLE_CONTENT_PROCESSOR,] }] }
1143
+ { type: undefined, decorators: [{ type: core.Inject, args: [TUI_DOC_EXAMPLE_CONTENT_PROCESSOR,] }] },
1144
+ { type: Boolean, decorators: [{ type: core.Inject, args: [cdk.TUI_IS_CYPRESS,] }] }
1119
1145
  ]; };
1120
1146
  __decorate([
1121
1147
  core.Input()
@@ -1132,9 +1158,9 @@
1132
1158
  TuiDocExampleComponent = __decorate([
1133
1159
  core.Component({
1134
1160
  selector: 'tui-doc-example',
1135
- template: "<h3 *ngIf=\"heading\" class=\"t-title\">\n <span polymorpheus-outlet [content]=\"heading\"></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 polymorpheus-outlet\n class=\"t-description\"\n [content]=\"description\"\n></h4>\n\n<div *ngIf=\"processor$ | async as content\" class=\"t-example\">\n <ng-container *ngIf=\"content | 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 *tuiTab tuiTab>{{tab}}</button>\n </ng-container>\n </tui-tabs-with-more>\n\n <button\n *ngIf=\"codeEditor\"\n tuiButton\n appearance=\"flat\"\n size=\"s\"\n (click)=\"codeEditor.open(componentName, id || '', content)\"\n >\n Edit on {{codeEditor.name}}\n </button>\n </div>\n\n <ng-container\n *ngIf=\"{\n activeTab: tabs[activeItemIndex],\n code: content[tabs[activeItemIndex]] || ''\n } as state\"\n >\n <div\n *ngIf=\"state.activeTab == defaultTab; else codeSection\"\n automation-id=\"tui-doc-example\"\n class=\"t-demo\"\n >\n <ng-content></ng-content>\n </div>\n\n <ng-template #codeSection>\n <tui-doc-copy\n class=\"t-copy-code\"\n [cdkCopyToClipboard]=\"state.code\"\n ></tui-doc-copy>\n <tui-doc-code [code]=\"state.code\"></tui-doc-code>\n </ng-template>\n </ng-container>\n </ng-container>\n</div>\n",
1161
+ template: "<h3 *ngIf=\"heading\" class=\"t-title\">\n <span polymorpheus-outlet [content]=\"heading\"></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 polymorpheus-outlet\n class=\"t-description\"\n [content]=\"description\"\n></h4>\n\n<div *ngIf=\"processor$ | async as content\" class=\"t-example\">\n <ng-container *ngIf=\"content | 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 *tuiTab tuiTab>{{tab}}</button>\n </ng-container>\n </tui-tabs-with-more>\n\n <button\n *ngIf=\"codeEditor\"\n tuiButton\n appearance=\"flat\"\n size=\"s\"\n (click)=\"codeEditor.open(componentName, id || '', content)\"\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 *ngIf=\"index === defaultTabIndex; else anotherTab\">\n <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n </ng-container>\n <ng-template #anotherTab>\n <ng-container\n *ngTemplateOutlet=\"codeSection; context: { $implicit: content[tabs[activeItemIndex]] || '' }\"\n ></ng-container>\n </ng-template>\n </div>\n </ng-container>\n</div>\n\n<ng-template #preview>\n <div automation-id=\"tui-doc-example\" class=\"t-demo\">\n <ng-content></ng-content>\n </div>\n</ng-template>\n\n<ng-template #codeSection let-code>\n <tui-doc-copy\n class=\"t-copy-code\"\n [cdkCopyToClipboard]=\"code\"\n ></tui-doc-copy>\n <tui-doc-code [code]=\"code\"></tui-doc-code>\n</ng-template>\n",
1136
1162
  changeDetection: core.ChangeDetectionStrategy.OnPush,
1137
- styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:right}.t-title{font:var(--tui-font-heading-5);margin:0 0 .5rem}@media screen and (max-width:47.9375em){:host{padding-top:2rem}.t-title{font:var(--tui-font-heading-6)}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-description:first-letter,.t-title:first-letter{text-transform:capitalize}.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)}.t-tabs-wrapper{display:flex;padding:0 2rem;box-shadow:inset 0 -1px var(--tui-base-03);justify-content:space-between;align-items:center}@media screen and (max-width:47.9375em){.t-example{margin-top:.75rem}.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:0.001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:6px 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)}}@media screen and (max-width:47.9375em){.t-demo{padding:1rem}}.t-copy-code{position:absolute;top:4.375rem;right:1rem}.t-link-icon{margin-left:.3rem;vertical-align:baseline}"]
1163
+ 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:400;margin:0}.t-description:first-letter,.t-title:first-letter{text-transform:capitalize}.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:0.001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:6px 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-copy-code{position:absolute;top:4.375rem;right:1rem}.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}"]
1138
1164
  }),
1139
1165
  __param(0, core.Attribute('id')),
1140
1166
  __param(1, core.Inject(clipboard.Clipboard)),
@@ -1144,7 +1170,8 @@
1144
1170
  __param(5, core.Inject(TUI_DOC_EXAMPLE_TEXTS)),
1145
1171
  __param(6, core.Optional()),
1146
1172
  __param(6, core.Inject(TUI_DOC_CODE_EDITOR)),
1147
- __param(7, core.Inject(TUI_DOC_EXAMPLE_CONTENT_PROCESSOR))
1173
+ __param(7, core.Inject(TUI_DOC_EXAMPLE_CONTENT_PROCESSOR)),
1174
+ __param(8, core.Inject(cdk.TUI_IS_CYPRESS))
1148
1175
  ], TuiDocExampleComponent);
1149
1176
  return TuiDocExampleComponent;
1150
1177
  }());
@@ -1210,6 +1237,9 @@
1210
1237
  { type: Storage, decorators: [{ type: core.Inject, args: [common$1.LOCAL_STORAGE,] }] },
1211
1238
  { type: Window, decorators: [{ type: core.Inject, args: [common$1.WINDOW,] }] }
1212
1239
  ]; };
1240
+ __decorate([
1241
+ core.HostBinding('attr.data-mode')
1242
+ ], TuiDocMainComponent.prototype, "mode", null);
1213
1243
  TuiDocMainComponent = TuiDocMainComponent_1 = __decorate([
1214
1244
  core.Component({
1215
1245
  selector: 'tui-doc-main',
@@ -1222,7 +1252,7 @@
1222
1252
  },
1223
1253
  cdk.TuiSwipeService,
1224
1254
  ],
1225
- styles: ["html{scroll-padding-top:4rem;height:auto}tui-root>tui-scroll-controls>.bar_vertical{top:4rem!important}@-webkit-keyframes tuiShaking{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}@keyframes tuiShaking{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}body{background:var(--tui-base-01);height:auto}tui-doc-main{display:block}code:not(.hljs):not([class*=language-]):not(.exception){transition-property:background;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;background:var(--tui-base-02);color:var(--tui-text-02);vertical-align:middle;box-shadow:inset 0 -2px var(--tui-secondary);padding:.375rem .5rem;font-size:.875rem;border-radius:.5rem}:focus code:not(.exception):not([class*=language-]){background:var(--tui-base-01)}.tui-doc-page{position:relative;z-index:0;padding-top:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;width:16.25rem;border-right:1px solid var(--tui-base-03)}.tui-doc-content{margin-left:16.25rem}@media screen and (max-width:47.9375em){tui-doc-navigation.tui-doc-navigation{display:none}.tui-doc-content{margin-left:0}}.tui-doc-outlet+*{display:block}.tui-doc-animated-example{-webkit-animation:1s .3s tuiShaking;animation:1s .3s tuiShaking}label.night-mode{cursor:pointer}.hljs-tag{background:0 0}.hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-01);background-color:var(--tui-clear-disabled)}.hljs-subst,.hljs-title{font-weight:400;color:var(--tui-text-01)}.hljs-comment,.hljs-quote{color:var(--tui-text-03);font-style:italic}.hljs-meta{color:#e38162}.hljs-keyword,.hljs-literal,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-type{font-weight:700;color:var(--tui-link)}.hljs-attribute,.hljs-link,.hljs-number,.hljs-regexp{font-weight:700;color:var(--tui-support-06)}.hljs-link,.hljs-number,.hljs-regexp{font-weight:400}.hljs-string{color:var(--tui-positive);font-weight:700}.hljs-bullet,.hljs-formula,.hljs-symbol{color:var(--tui-text-01);background:var(--tui-base-02);font-style:italic}.hljs-doctag{text-decoration:underline}.hljs-template-variable,.hljs-variable{color:var(--tui-warning-fill)}.hljs-addition{background:var(--tui-success-bg)}.hljs-deletion{background:var(--tui-error-bg)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs .hljs-line-numbers{padding:0}.hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:right;padding-right:1em!important}"]
1255
+ styles: ["html{scroll-padding-top:4rem;height:auto}tui-root>tui-scroll-controls>.bar_vertical{top:4rem!important}@-webkit-keyframes tuiShaking{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}@keyframes tuiShaking{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}body{background:var(--tui-base-01);height:auto}tui-doc-main{display:block}code:not(.hljs):not([class*=language-]):not(.exception){transition-property:background;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;background:var(--tui-base-02);color:var(--tui-text-02);vertical-align:middle;box-shadow:inset 0 -2px var(--tui-secondary);padding:.375rem .5rem;font-size:.875rem;border-radius:.5rem}a:focus code,button:focus code{background:var(--tui-base-01)}.tui-doc-page{position:relative;z-index:0;padding-top:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;width:16.25rem;border-right:1px solid var(--tui-base-03)}.tui-doc-content{margin-left:16.25rem}@media screen and (max-width:47.9375em){tui-doc-navigation.tui-doc-navigation{display:none}.tui-doc-content{margin-left:0}}.tui-doc-outlet+*{display:block}.tui-doc-animated-example{-webkit-animation:1s .3s tuiShaking;animation:1s .3s tuiShaking}label.night-mode{cursor:pointer}.hljs-tag{background:0 0}.hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-01);background-color:var(--tui-clear-disabled)}.hljs.hljs-line-numbers{background:0 0}.hljs-subst,.hljs-title{font-weight:400;color:var(--tui-text-01)}.hljs-comment,.hljs-quote{color:var(--tui-text-03);font-style:italic}.hljs-meta{color:#e38162}.hljs-keyword,.hljs-literal,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-type{font-weight:700;color:var(--tui-link)}.hljs-attribute,.hljs-link,.hljs-number,.hljs-regexp{font-weight:700;color:var(--tui-support-06)}.hljs-link,.hljs-number,.hljs-regexp{font-weight:400}.hljs-string{color:var(--tui-positive);font-weight:700}.hljs-bullet,.hljs-formula,.hljs-symbol{color:var(--tui-text-01);background:var(--tui-base-02);font-style:italic}.hljs-doctag{text-decoration:underline}.hljs-template-variable,.hljs-variable{color:var(--tui-link-hover)}[data-mode=onDark] .hljs-template-variable,[data-mode=onDark] .hljs-variable{color:var(--tui-warning-fill)}.hljs-addition{background:var(--tui-success-bg)}.hljs-deletion{background:var(--tui-error-bg)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs .hljs-line-numbers{padding:0}.hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:right;padding-right:1em!important}"]
1226
1256
  }),
1227
1257
  __param(0, core.Inject(common$1.LOCAL_STORAGE)),
1228
1258
  __param(1, core.Inject(common$1.WINDOW))
@@ -1776,7 +1806,7 @@
1776
1806
  template: "<header class=\"t-header\">\n <h1 class=\"t-title\">\n {{ header }}\n <tui-tag\n *ngIf=\"deprecated !== null\"\n value=\"deprecated\"\n status=\"custom\"\n class=\"t-tag t-tag_deprecated\"\n ></tui-tag>\n <tui-tag\n *ngIf=\"package\"\n status=\"custom\"\n class=\"t-tag t-tag_package\"\n [value]=\"package\"\n [autoColor]=\"true\"\n ></tui-tag>\n </h1>\n <tui-tabs-with-more\n *ngIf=\"tabConnectors.length\"\n class=\"t-tabs\"\n [(activeItemIndex)]=\"activeItemIndex\"\n >\n <ng-container\n *ngFor=\"let tab of tabConnectors; first as first; index as index\"\n >\n <ng-container *ngIf=\"first; else dynamicTab\">\n <a\n *tuiTab\n tuiTab\n routerLink=\"./\"\n routerLinkActive\n [routerLinkActiveOptions]=\"{exact: true}\"\n >\n {{ tab.pageTab || defaultTabs[index] }}\n </a>\n </ng-container>\n <ng-template #dynamicTab>\n <a\n *tuiTab\n tuiTab\n routerLinkActive\n [routerLink]=\"getRouterLink(tab.pageTab || defaultTabs[index])\"\n >\n {{ tab.pageTab || defaultTabs[index] }}\n </a>\n </ng-template>\n </ng-container>\n </tui-tabs-with-more>\n <tui-doc-source-code\n class=\"t-source-code\"\n [header]=\"header\"\n [package]=\"package\"\n [type]=\"type\"\n [path]=\"path\"\n ></tui-doc-source-code>\n</header>\n<div class=\"t-content\">\n <ng-content></ng-content>\n <tui-doc-see-also\n *ngIf=\"showSeeAlso\"\n class=\"t-see-also\"\n [seeAlso]=\"seeAlso\"\n ></tui-doc-see-also>\n <ng-container *ngFor=\"let tab of tabConnectors; index as index\">\n <ng-container *ngIf=\"index === activeItemIndex\">\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n </ng-container>\n </ng-container>\n</div>\n",
1777
1807
  changeDetection: core.ChangeDetectionStrategy.OnPush,
1778
1808
  providers: PAGE_PROVIDERS,
1779
- styles: [":host{display:flex;flex-direction:column;min-height:0;flex-basis:0;flex-grow:1}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;min-height:7.25rem;color:var(--tui-text-01);box-shadow:inset 0 -1px 0 0 var(--tui-base-03);padding:3.75rem 0 0;box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}@media screen and (max-width:47.9375em){.t-header{font:var(--tui-font-heading-4);min-height:4.5rem;padding:1.25rem 1.25rem 0;margin:0}}.t-title{min-width:100%;font-size:inherit;margin:0}.t-tag{vertical-align:middle;text-transform:uppercase;margin-right:.5rem}.t-tag_deprecated{background-color:var(--tui-error-fill)}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0}@media screen and (max-width:47.9375em){.t-tabs{margin-top:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width:47.9375em){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-width:18.75rem;width:30%;float:right;margin-left:1.5rem}@media screen and (max-width:47.9375em){.t-see-also{float:none;width:100%;margin:0 0 1.5rem}}.t-source-code{align-self:flex-end;line-height:2.75rem}"]
1809
+ styles: [":host{display:flex;flex-direction:column;min-height:0;flex-basis:0;flex-grow:1}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;min-height:7.25rem;color:var(--tui-text-01);box-shadow:inset 0 -1px 0 0 var(--tui-base-03);padding:3.75rem 0 0;box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}:host-context(tui-root._mobile) .t-header{font:var(--tui-font-heading-4);min-height:4.5rem;padding:1.25rem 1.25rem 0;margin:0}.t-title{min-width:100%;font-size:inherit;margin:0}.t-tag{vertical-align:middle;text-transform:uppercase;margin-right:.5rem}.t-tag_deprecated{background-color:var(--tui-error-fill)}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0}:host-context(tui-root._mobile) .t-tabs{margin-top:.25rem}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}:host-context(tui-root._mobile) .t-content{padding:2rem 1.25rem;margin:0}.t-see-also{min-width:18.75rem;width:30%;float:right;margin-left:1.5rem}:host-context(tui-root._mobile) .t-see-also{float:none;width:100%;margin:0 0 1.5rem}.t-source-code{align-self:flex-end;line-height:2.75rem}"]
1780
1810
  }),
1781
1811
  __param(0, core.Attribute('deprecated')),
1782
1812
  __param(1, core.Inject(TUI_DOC_DEFAULT_TABS)),
@@ -2045,7 +2075,9 @@
2045
2075
  exports.TuiDocPageComponent = TuiDocPageComponent;
2046
2076
  exports.TuiDocPageModule = TuiDocPageModule;
2047
2077
  exports.TuiDocPageTabConnectorDirective = TuiDocPageTabConnectorDirective;
2078
+ exports.coerceValue = coerceValue;
2048
2079
  exports.generateRoutes = generateRoutes;
2080
+ exports.tryParseMarkdownCodeBlock = tryParseMarkdownCodeBlock;
2049
2081
  exports.ɵa = TuiInputOpacityModule;
2050
2082
  exports.ɵb = TuiInputOpacityDirective;
2051
2083
  exports.ɵc = TuiDocExampleGetTabsPipe;