@koobiq/components 17.4.0 → 17.6.0

package/fesm2022/koobiq-components-markdown.mjs

@@ -94,7 +94,7 @@ class KbqMarkdown {
             class="markdown-output"
             [innerHtml]="resultHtml"
         ></div>
-    `, isInline: true, styles: ["@charset \"UTF-8\";.kbq-markdown{display:block}.kbq-markdown .markdown-input{display:none}.kbq-markdown .markdown-output{flex:1}.kbq-markdown .kbq-markdown__h1{margin-top:var(--kbq-markdown-h1-size-margin-top, 0);margin-bottom:var(--kbq-markdown-h1-size-margin-bottom, 16px)}.kbq-markdown .kbq-markdown__h2{margin-top:var(--kbq-markdown-h2-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h2-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__h3{margin-top:var(--kbq-markdown-h3-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h3-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__h4{margin-top:var(--kbq-markdown-h4-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h4-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__h5{margin-top:var(--kbq-markdown-h5-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h5-size-margin-bottom, 8px)}.kbq-markdown .kbq-markdown__h6{margin-top:var(--kbq-markdown-h6-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h6-size-margin-bottom, 8px)}.kbq-markdown .kbq-markdown__a{display:inline-block;text-decoration:none;cursor:pointer;border-bottom-style:solid;border-bottom-width:1px;transition:color ease-out .3s}.kbq-markdown .kbq-markdown__p{margin-top:var(--kbq-markdown-p-size-margin-top, 12px);margin-bottom:var(--kbq-markdown-p-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__ul,.kbq-markdown .kbq-markdown__ol{margin-top:var(--kbq-markdown-list-size-margin-top, 12px);margin-bottom:var(--kbq-markdown-list-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__ul>li,.kbq-markdown .kbq-markdown__ol>li{margin-bottom:var(--kbq-markdown-list-size-item-margin-bottom, 4px)}.kbq-markdown .kbq-markdown__ul{position:relative;list-style:none;padding:var(--kbq-markdown-list-size-ul-padding, 0 0 0 24px)}.kbq-markdown .kbq-markdown__ul>li:before{content:\"\\2014\";display:block;position:absolute;width:24px;text-align:left;left:0}.kbq-markdown .kbq-markdown__ol{list-style:none;padding:0;counter-reset:li}.kbq-markdown .kbq-markdown__ol>li:before{content:counter(li) \".\";counter-increment:li;padding-right:var(--kbq-markdown-list-size-ol-number-padding-right, 4px)}.kbq-markdown .kbq-markdown__ol>li>*{display:inline-block}.kbq-markdown .kbq-markdown__p+.kbq-markdown__ul,.kbq-markdown .kbq-markdown__p+.kbq-markdown__ol{margin-top:var(--kbq-markdown-list-size-margin-top-after-paragraph, -8px)}.kbq-markdown .kbq-markdown__blockquote{margin-top:var(--kbq-markdown-blockquote-size-margin-top, 12px);margin-left:0;margin-bottom:var(--kbq-markdown-blockquote-size-margin-bottom, 12px);margin-right:0;border-left-width:var(--kbq-markdown-blockquote-size-line-width, 4px);border-left-style:solid;padding:var(--kbq-markdown-blockquote-size-padding, 2px 12px)}.kbq-markdown .kbq-markdown__blockquote>.kbq-markdown__p{margin-top:0;margin-bottom:0}.kbq-markdown .kbq-markdown__pre{position:relative;overflow-x:auto;margin-top:var(--kbq-markdown-code-size-multiline-margin-top, 12px);margin-bottom:var(--kbq-markdown-code-size-multiline-margin-bottom, 24px);padding:var(--kbq-markdown-code-size-multiline-padding, 12px 16px)}.kbq-markdown .kbq-markdown__pre,.kbq-markdown .kbq-markdown__p>.kbq-markdown__code{border-radius:var(--kbq-markdown-code-size-border-radius, 8px);border-width:var(--kbq-markdown-code-size-border-width, 1px);border-style:solid}.kbq-markdown .kbq-markdown__p>.kbq-markdown__code{padding:var(--kbq-markdown-code-size-inline-padding, 0 4px)}.kbq-markdown .kbq-markdown__img{max-width:100%;margin-top:var(--kbq-markdown-image-size-margin-top, 12px);margin-bottom:var(--kbq-markdown-image-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__img+em{display:block;margin-top:var(--kbq-markdown-image-size-caption-margin-top, -8px);margin-bottom:var(--kbq-markdown-image-size-caption-margin-bottom, 24px)}.kbq-markdown .kbq-markdown__hr{border-top:none;border-left:none;border-right:none;border-bottom-style:solid;border-bottom-width:var(--kbq-markdown-hr-size-width, 1px);margin:var(--kbq-markdown-hr-size-margin-vertical, 24px) 0}.kbq-markdown .kbq-markdown__table{max-width:100%;overflow-x:auto;display:table;border-collapse:collapse;margin-bottom:var(--kbq-markdown-table-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__table td{vertical-align:top}.kbq-markdown .kbq-markdown__table th,.kbq-markdown .kbq-markdown__table td{padding:var(--kbq-markdown-table-size-padding, 8px);font-weight:400}.kbq-markdown .kbq-markdown__table>.kbq-markdown__thead{border-bottom-style:solid;border-bottom-width:var(--kbq-markdown-table-size-border-width, 1px);text-align:left}.kbq-markdown .kbq-markdown__table>.kbq-markdown__thead th:first-child{padding-left:0}.kbq-markdown .kbq-markdown__table>.kbq-markdown__thead th:last-child{padding-right:0}.kbq-markdown .kbq-markdown__table>.kbq-markdown__tbody td:first-child{padding-left:0}.kbq-markdown .kbq-markdown__table>.kbq-markdown__tbody td:last-child{padding-right:0}.docs-live-example.kbq-markdown{margin-bottom:128px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["@charset \"UTF-8\";.kbq-markdown{display:block}.kbq-markdown .markdown-input{display:none}.kbq-markdown .markdown-output{flex:1}.kbq-markdown .kbq-markdown__h1{margin-top:var(--kbq-markdown-h1-size-margin-top, 0);margin-bottom:var(--kbq-markdown-h1-size-margin-bottom, 16px)}.kbq-markdown .kbq-markdown__h1+.kbq-markdown__h1{margin-top:0}.kbq-markdown .kbq-markdown__h1+.kbq-markdown__h2{margin-top:0}.kbq-markdown .kbq-markdown__h1+.kbq-markdown__h3{margin-top:0}.kbq-markdown .kbq-markdown__h1+.kbq-markdown__h4{margin-top:0}.kbq-markdown .kbq-markdown__h1+.kbq-markdown__h5{margin-top:0}.kbq-markdown .kbq-markdown__h1+.kbq-markdown__h6{margin-top:0}.kbq-markdown .kbq-markdown__h2{margin-top:var(--kbq-markdown-h2-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h2-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__h2+.kbq-markdown__h1{margin-top:0}.kbq-markdown .kbq-markdown__h2+.kbq-markdown__h2{margin-top:0}.kbq-markdown .kbq-markdown__h2+.kbq-markdown__h3{margin-top:0}.kbq-markdown .kbq-markdown__h2+.kbq-markdown__h4{margin-top:0}.kbq-markdown .kbq-markdown__h2+.kbq-markdown__h5{margin-top:0}.kbq-markdown .kbq-markdown__h2+.kbq-markdown__h6{margin-top:0}.kbq-markdown .kbq-markdown__h3{margin-top:var(--kbq-markdown-h3-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h3-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__h3+.kbq-markdown__h1{margin-top:0}.kbq-markdown .kbq-markdown__h3+.kbq-markdown__h2{margin-top:0}.kbq-markdown .kbq-markdown__h3+.kbq-markdown__h3{margin-top:0}.kbq-markdown .kbq-markdown__h3+.kbq-markdown__h4{margin-top:0}.kbq-markdown .kbq-markdown__h3+.kbq-markdown__h5{margin-top:0}.kbq-markdown .kbq-markdown__h3+.kbq-markdown__h6{margin-top:0}.kbq-markdown .kbq-markdown__h4{margin-top:var(--kbq-markdown-h4-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h4-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__h4+.kbq-markdown__h1{margin-top:0}.kbq-markdown .kbq-markdown__h4+.kbq-markdown__h2{margin-top:0}.kbq-markdown .kbq-markdown__h4+.kbq-markdown__h3{margin-top:0}.kbq-markdown .kbq-markdown__h4+.kbq-markdown__h4{margin-top:0}.kbq-markdown .kbq-markdown__h4+.kbq-markdown__h5{margin-top:0}.kbq-markdown .kbq-markdown__h4+.kbq-markdown__h6{margin-top:0}.kbq-markdown .kbq-markdown__h5{margin-top:var(--kbq-markdown-h5-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h5-size-margin-bottom, 8px)}.kbq-markdown .kbq-markdown__h5+.kbq-markdown__h1{margin-top:0}.kbq-markdown .kbq-markdown__h5+.kbq-markdown__h2{margin-top:0}.kbq-markdown .kbq-markdown__h5+.kbq-markdown__h3{margin-top:0}.kbq-markdown .kbq-markdown__h5+.kbq-markdown__h4{margin-top:0}.kbq-markdown .kbq-markdown__h5+.kbq-markdown__h5{margin-top:0}.kbq-markdown .kbq-markdown__h5+.kbq-markdown__h6{margin-top:0}.kbq-markdown .kbq-markdown__h6{margin-top:var(--kbq-markdown-h6-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h6-size-margin-bottom, 8px)}.kbq-markdown .kbq-markdown__h6+.kbq-markdown__h1{margin-top:0}.kbq-markdown .kbq-markdown__h6+.kbq-markdown__h2{margin-top:0}.kbq-markdown .kbq-markdown__h6+.kbq-markdown__h3{margin-top:0}.kbq-markdown .kbq-markdown__h6+.kbq-markdown__h4{margin-top:0}.kbq-markdown .kbq-markdown__h6+.kbq-markdown__h5{margin-top:0}.kbq-markdown .kbq-markdown__h6+.kbq-markdown__h6{margin-top:0}.kbq-markdown .kbq-markdown__a{display:inline-block;text-decoration:none;cursor:pointer;border-bottom-style:solid;border-bottom-width:1px;transition:color ease-out .3s}.kbq-markdown .kbq-markdown__p{margin-top:var(--kbq-markdown-p-size-margin-top, 12px);margin-bottom:var(--kbq-markdown-p-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__ul,.kbq-markdown .kbq-markdown__ol{margin-top:var(--kbq-markdown-list-size-margin-top, 12px);margin-bottom:var(--kbq-markdown-list-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__ul>li,.kbq-markdown .kbq-markdown__ol>li{margin-bottom:var(--kbq-markdown-list-size-item-margin-bottom, 4px)}.kbq-markdown .kbq-markdown__ul{position:relative;list-style:none;padding:var(--kbq-markdown-list-size-ul-padding, 0 0 0 24px)}.kbq-markdown .kbq-markdown__ul>li:before{content:\"\\2014\";display:block;position:absolute;width:24px;text-align:left;left:0}.kbq-markdown .kbq-markdown__ol{list-style:none;padding:0;counter-reset:li}.kbq-markdown .kbq-markdown__ol>li:before{content:counter(li) \".\";counter-increment:li;padding-right:var(--kbq-markdown-list-size-ol-number-padding-right, 4px)}.kbq-markdown .kbq-markdown__ol>li>*{display:inline-block}.kbq-markdown .kbq-markdown__p+.kbq-markdown__ul,.kbq-markdown .kbq-markdown__p+.kbq-markdown__ol{margin-top:var(--kbq-markdown-list-size-margin-top-after-paragraph, -8px)}.kbq-markdown .kbq-markdown__blockquote{margin-top:var(--kbq-markdown-blockquote-size-margin-top, 12px);margin-left:0;margin-bottom:var(--kbq-markdown-blockquote-size-margin-bottom, 12px);margin-right:0;border-left-width:var(--kbq-markdown-blockquote-size-line-width, 4px);border-left-style:solid;padding:var(--kbq-markdown-blockquote-size-padding, 2px 12px)}.kbq-markdown .kbq-markdown__blockquote>.kbq-markdown__p{margin-top:0;margin-bottom:0}.kbq-markdown .kbq-markdown__pre{position:relative;overflow-x:auto;margin-top:var(--kbq-markdown-code-size-multiline-margin-top, 12px);margin-bottom:var(--kbq-markdown-code-size-multiline-margin-bottom, 24px);padding:var(--kbq-markdown-code-size-multiline-padding, 12px 16px)}.kbq-markdown .kbq-markdown__pre,.kbq-markdown .kbq-markdown__p>.kbq-markdown__code{border-radius:var(--kbq-markdown-code-size-border-radius, 8px);border-width:var(--kbq-markdown-code-size-border-width, 1px);border-style:solid}.kbq-markdown .kbq-markdown__p>.kbq-markdown__code{padding:var(--kbq-markdown-code-size-inline-padding, 0 4px)}.kbq-markdown .kbq-markdown__img{max-width:100%;margin-top:var(--kbq-markdown-image-size-margin-top, 12px);margin-bottom:var(--kbq-markdown-image-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__img+em{display:block;margin-top:var(--kbq-markdown-image-size-caption-margin-top, -8px);margin-bottom:var(--kbq-markdown-image-size-caption-margin-bottom, 24px)}.kbq-markdown .kbq-markdown__hr{border-top:none;border-left:none;border-right:none;border-bottom-style:solid;border-bottom-width:var(--kbq-markdown-hr-size-width, 1px);margin:var(--kbq-markdown-hr-size-margin-vertical, 24px) 0}.kbq-markdown .kbq-markdown__table{max-width:100%;overflow-x:auto;display:table;border-collapse:collapse;margin-bottom:var(--kbq-markdown-table-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__table td{vertical-align:top}.kbq-markdown .kbq-markdown__table th,.kbq-markdown .kbq-markdown__table td{padding:var(--kbq-markdown-table-size-padding, 8px);font-weight:400}.kbq-markdown .kbq-markdown__table>.kbq-markdown__thead{border-bottom-style:solid;border-bottom-width:var(--kbq-markdown-table-size-border-width, 1px);text-align:left}.kbq-markdown .kbq-markdown__table>.kbq-markdown__thead th:first-child{padding-left:0}.kbq-markdown .kbq-markdown__table>.kbq-markdown__thead th:last-child{padding-right:0}.kbq-markdown .kbq-markdown__table>.kbq-markdown__tbody td:first-child{padding-left:0}.kbq-markdown .kbq-markdown__table>.kbq-markdown__tbody td:last-child{padding-right:0}.docs-live-example.kbq-markdown{margin-bottom:128px}\n", ".kbq-markdown{--kbq-markdown-h1-size-max-width: 650px;--kbq-markdown-h1-size-margin-top: 0;--kbq-markdown-h1-size-margin-bottom: 16px;--kbq-markdown-h1-font-default-font-size: 36px;--kbq-markdown-h1-font-default-line-height: 44px;--kbq-markdown-h1-font-default-letter-spacing: normal;--kbq-markdown-h1-font-default-font-weight: 400;--kbq-markdown-h1-font-default-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-h1-font-default-text-transform: null;--kbq-markdown-h1-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-markdown-h2-size-max-width: 650px;--kbq-markdown-h2-size-margin-top: 24px;--kbq-markdown-h2-size-margin-bottom: 12px;--kbq-markdown-h2-font-default-font-size: 24px;--kbq-markdown-h2-font-default-line-height: 32px;--kbq-markdown-h2-font-default-letter-spacing: normal;--kbq-markdown-h2-font-default-font-weight: 700;--kbq-markdown-h2-font-default-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-h2-font-default-text-transform: null;--kbq-markdown-h2-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-markdown-h3-size-max-width: 650px;--kbq-markdown-h3-size-margin-top: 24px;--kbq-markdown-h3-size-margin-bottom: 12px;--kbq-markdown-h3-font-default-font-size: 20px;--kbq-markdown-h3-font-default-line-height: 28px;--kbq-markdown-h3-font-default-letter-spacing: normal;--kbq-markdown-h3-font-default-font-weight: 700;--kbq-markdown-h3-font-default-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-h3-font-default-text-transform: null;--kbq-markdown-h3-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-markdown-h4-size-max-width: 650px;--kbq-markdown-h4-size-margin-top: 24px;--kbq-markdown-h4-size-margin-bottom: 12px;--kbq-markdown-h4-font-default-font-size: 18px;--kbq-markdown-h4-font-default-line-height: 26px;--kbq-markdown-h4-font-default-letter-spacing: normal;--kbq-markdown-h4-font-default-font-weight: 700;--kbq-markdown-h4-font-default-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-h4-font-default-text-transform: null;--kbq-markdown-h4-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-markdown-h5-size-max-width: 650px;--kbq-markdown-h5-size-margin-top: 24px;--kbq-markdown-h5-size-margin-bottom: 8px;--kbq-markdown-h5-font-default-font-size: 16px;--kbq-markdown-h5-font-default-line-height: 24px;--kbq-markdown-h5-font-default-letter-spacing: -.011em;--kbq-markdown-h5-font-default-font-weight: 700;--kbq-markdown-h5-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-h5-font-default-text-transform: null;--kbq-markdown-h5-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-markdown-h6-size-max-width: 650px;--kbq-markdown-h6-size-margin-top: 24px;--kbq-markdown-h6-size-margin-bottom: 8px;--kbq-markdown-h6-font-default-font-size: 14px;--kbq-markdown-h6-font-default-line-height: 20px;--kbq-markdown-h6-font-default-letter-spacing: .08em;--kbq-markdown-h6-font-default-font-weight: 500;--kbq-markdown-h6-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-h6-font-default-text-transform: uppercase;--kbq-markdown-h6-font-default-font-feature-settings: \"calt\", \"case\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-markdown-p-size-max-width: 650px;--kbq-markdown-p-size-margin-top: 12px;--kbq-markdown-p-size-margin-bottom: 12px;--kbq-markdown-p-font-default-font-size: 16px;--kbq-markdown-p-font-default-line-height: 24px;--kbq-markdown-p-font-default-letter-spacing: -.011em;--kbq-markdown-p-font-default-font-weight: normal;--kbq-markdown-p-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-p-font-default-text-transform: null;--kbq-markdown-p-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-markdown-list-size-max-width: 650px;--kbq-markdown-list-size-margin-top: 12px;--kbq-markdown-list-size-margin-bottom: 12px;--kbq-markdown-list-size-margin-top-after-paragraph: -8px;--kbq-markdown-list-size-ol-number-padding-right: 4px;--kbq-markdown-list-size-ul-padding: 0 0 0 24px;--kbq-markdown-list-size-item-margin-bottom: 4px;--kbq-markdown-list-font-default-font-size: 16px;--kbq-markdown-list-font-default-line-height: 24px;--kbq-markdown-list-font-default-letter-spacing: -.011em;--kbq-markdown-list-font-default-font-weight: normal;--kbq-markdown-list-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-list-font-default-text-transform: null;--kbq-markdown-list-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-markdown-blockquote-size-max-width: 650px;--kbq-markdown-blockquote-size-margin-top: 12px;--kbq-markdown-blockquote-size-margin-bottom: 12px;--kbq-markdown-blockquote-size-padding: 2px 12px;--kbq-markdown-blockquote-size-line-width: 4px;--kbq-markdown-blockquote-size-border-radius: 0;--kbq-markdown-blockquote-size-border-width: 0;--kbq-markdown-blockquote-font-default-font-size: 16px;--kbq-markdown-blockquote-font-default-line-height: 24px;--kbq-markdown-blockquote-font-default-letter-spacing: -.011em;--kbq-markdown-blockquote-font-default-font-weight: normal;--kbq-markdown-blockquote-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-blockquote-font-default-text-transform: null;--kbq-markdown-blockquote-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-markdown-code-size-max-width: 650px;--kbq-markdown-code-size-multiline-margin-top: 12px;--kbq-markdown-code-size-multiline-margin-bottom: 24px;--kbq-markdown-code-size-inline-padding: 0 4px;--kbq-markdown-code-size-multiline-padding: 12px 16px;--kbq-markdown-code-size-border-radius: 8px;--kbq-markdown-code-size-border-width: 1px;--kbq-markdown-code-font-default-font-size: 16px;--kbq-markdown-code-font-default-line-height: 24px;--kbq-markdown-code-font-default-letter-spacing: normal;--kbq-markdown-code-font-default-font-weight: normal;--kbq-markdown-code-font-default-font-family: \"JetBrains Mono\", \"Roboto Mono\", \"Consolas\", \"Menlo\", \"Monaco\", monospace;--kbq-markdown-code-font-default-text-transform: null;--kbq-markdown-code-font-default-font-feature-settings: initial;--kbq-markdown-link-size-icon-margin: 2px;--kbq-markdown-link-size-state-focused-outline-offset: 0px;--kbq-markdown-link-size-state-focused-outline-width: 2px;--kbq-markdown-link-font-default-font-size: 16px;--kbq-markdown-link-font-default-line-height: 24px;--kbq-markdown-link-font-default-letter-spacing: -.011em;--kbq-markdown-link-font-default-font-weight: normal;--kbq-markdown-link-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-link-font-default-text-transform: null;--kbq-markdown-link-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-markdown-image-size-max-width: 650px;--kbq-markdown-image-size-margin-top: 12px;--kbq-markdown-image-size-margin-bottom: 12px;--kbq-markdown-image-size-caption-margin-top: -8px;--kbq-markdown-image-size-caption-margin-bottom: 24px;--kbq-markdown-image-font-caption-font-size: 14px;--kbq-markdown-image-font-caption-line-height: 20px;--kbq-markdown-image-font-caption-letter-spacing: -.006em;--kbq-markdown-image-font-caption-font-weight: normal;--kbq-markdown-image-font-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-image-font-caption-text-transform: null;--kbq-markdown-image-font-caption-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-markdown-hr-size-width: 1px;--kbq-markdown-hr-size-margin-vertical: 24px;--kbq-markdown-table-size-border-width: 1px;--kbq-markdown-table-size-padding: 8px;--kbq-markdown-table-size-margin-bottom: 12px;--kbq-markdown-table-font-header-font-size: 14px;--kbq-markdown-table-font-header-line-height: 20px;--kbq-markdown-table-font-header-letter-spacing: -.006em;--kbq-markdown-table-font-header-font-weight: normal;--kbq-markdown-table-font-header-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-table-font-header-text-transform: null;--kbq-markdown-table-font-header-font-feature-settings: \"calt\", \"ss01\", \"ss04\", \"tnum\";--kbq-markdown-table-font-body-font-size: 16px;--kbq-markdown-table-font-body-line-height: 24px;--kbq-markdown-table-font-body-letter-spacing: normal;--kbq-markdown-table-font-body-font-weight: normal;--kbq-markdown-table-font-body-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-table-font-body-text-transform: null;--kbq-markdown-table-font-body-font-feature-settings: \"calt\", \"ss01\", \"ss04\", \"tnum\";--kbq-markdown-size-max-width: 650px;--kbq-markdown-font-default-font-size: 16px;--kbq-markdown-font-default-line-height: 24px;--kbq-markdown-font-default-letter-spacing: -.011em;--kbq-markdown-font-default-font-weight: normal;--kbq-markdown-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-font-default-text-transform: null;--kbq-markdown-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-background-bg: hsla(0, 0%, 100%, 100%);--kbq-background-bg-secondary: hsla(229, 15%, 95%, 100%);--kbq-background-bg-tertiary: hsla(229, 15%, 97%, 100%);--kbq-foreground-contrast: hsla(229, 15%, 15%, 100%);--kbq-foreground-contrast-secondary: hsla(229, 15%, 50%, 100%);--kbq-foreground-contrast-tertiary: hsla(229, 15%, 60%, 100%);--kbq-markdown-h1-color: hsla(229, 15%, 15%, 100%);--kbq-markdown-h2-color: hsla(229, 15%, 15%, 100%);--kbq-markdown-h3-color: hsla(229, 15%, 15%, 100%);--kbq-markdown-h4-color: hsla(229, 15%, 15%, 100%);--kbq-markdown-h5-color: hsla(229, 15%, 15%, 100%);--kbq-markdown-h6-color: hsla(229, 15%, 15%, 100%);--kbq-markdown-p-color: hsla(229, 15%, 15%, 100%);--kbq-markdown-list-color: hsla(229, 15%, 15%, 100%);--kbq-markdown-blockquote-text: hsla(229, 15%, 15%, 100%);--kbq-markdown-blockquote-line: hsla(229, 15%, 80%, 100%);--kbq-markdown-blockquote-background: transparent;--kbq-markdown-blockquote-border: transparent;--kbq-markdown-code-text: hsla(229, 15%, 15%, 100%);--kbq-markdown-code-background: hsla(229, 15%, 95%, 100%);--kbq-markdown-code-border: hsla(229, 15%, 6%, 12%);--kbq-markdown-link-text: hsla(216, 100%, 50%, 100%);--kbq-markdown-link-border-bottom: hsla(216, 100%, 85%, 100%);--kbq-markdown-link-state-visited-text: hsla(277, 72%, 45%, 100%);--kbq-markdown-link-state-visited-border-bottom: hsla(277, 72%, 80%, 100%);--kbq-markdown-link-state-hover-text: hsla(216, 100%, 45%, 100%);--kbq-markdown-link-state-hover-border-bottom: hsla(216, 100%, 85%, 100%);--kbq-markdown-link-state-active: hsla(216, 100%, 40%, 100%);--kbq-markdown-link-state-focused-outline: hsla(216, 100%, 60%, 100%);--kbq-markdown-image-caption-text: hsla(229, 15%, 50%, 100%);--kbq-markdown-hr-color: hsla(229, 15%, 6%, 12%);--kbq-markdown-table-header: hsla(229, 15%, 50%, 100%);--kbq-markdown-table-body: hsla(229, 15%, 15%, 100%);--kbq-markdown-table-border: hsla(229, 15%, 6%, 12%)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-background-bg: hsla(229, 15%, 12%, 100%);--kbq-background-bg-secondary: hsla(229, 15%, 16%, 100%);--kbq-background-bg-tertiary: hsla(229, 15%, 14%, 100%);--kbq-foreground-contrast: hsla(229, 15%, 80%, 100%);--kbq-foreground-contrast-secondary: hsla(229, 15%, 60%, 100%);--kbq-foreground-contrast-tertiary: hsla(229, 15%, 45%, 100%);--kbq-markdown-h1-color: hsla(229, 15%, 80%, 100%);--kbq-markdown-h2-color: hsla(229, 15%, 80%, 100%);--kbq-markdown-h3-color: hsla(229, 15%, 80%, 100%);--kbq-markdown-h4-color: hsla(229, 15%, 80%, 100%);--kbq-markdown-h5-color: hsla(229, 15%, 80%, 100%);--kbq-markdown-h6-color: hsla(229, 15%, 80%, 100%);--kbq-markdown-p-color: hsla(229, 15%, 80%, 100%);--kbq-markdown-list-color: hsla(229, 15%, 80%, 100%);--kbq-markdown-blockquote-text: hsla(229, 15%, 80%, 100%);--kbq-markdown-blockquote-line: hsla(229, 15%, 30%, 100%);--kbq-markdown-blockquote-background: transparent;--kbq-markdown-blockquote-border: transparent;--kbq-markdown-code-text: hsla(229, 15%, 80%, 100%);--kbq-markdown-code-background: hsla(229, 15%, 95%, 100%);--kbq-markdown-code-border: hsla(229, 15%, 22%, 100%);--kbq-markdown-link-text: hsla(216, 100%, 65%, 100%);--kbq-markdown-link-border-bottom: hsla(216, 100%, 27%, 100%);--kbq-markdown-link-state-visited-text: hsla(277, 72%, 50%, 100%);--kbq-markdown-link-state-visited-border-bottom: hsla(277, 72%, 30%, 100%);--kbq-markdown-link-state-hover-text: hsla(216, 100%, 65%, 100%);--kbq-markdown-link-state-hover-border-bottom: hsla(216, 100%, 27%, 100%);--kbq-markdown-link-state-active: hsla(216, 100%, 70%, 100%);--kbq-markdown-link-state-focused-outline: hsla(216, 100%, 60%, 100%);--kbq-markdown-image-caption-text: hsla(229, 15%, 50%, 100%);--kbq-markdown-hr-color: hsla(229, 15%, 22%, 100%);--kbq-markdown-table-header: hsla(229, 15%, 50%, 100%);--kbq-markdown-table-body: hsla(229, 15%, 80%, 100%);--kbq-markdown-table-border: hsla(229, 15%, 22%, 100%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqMarkdown, decorators: [{
             type: Component,
@@ -110,7 +110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
         ></div>
     `, host: {
                         class: 'kbq-markdown'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["@charset \"UTF-8\";.kbq-markdown{display:block}.kbq-markdown .markdown-input{display:none}.kbq-markdown .markdown-output{flex:1}.kbq-markdown .kbq-markdown__h1{margin-top:var(--kbq-markdown-h1-size-margin-top, 0);margin-bottom:var(--kbq-markdown-h1-size-margin-bottom, 16px)}.kbq-markdown .kbq-markdown__h2{margin-top:var(--kbq-markdown-h2-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h2-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__h3{margin-top:var(--kbq-markdown-h3-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h3-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__h4{margin-top:var(--kbq-markdown-h4-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h4-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__h5{margin-top:var(--kbq-markdown-h5-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h5-size-margin-bottom, 8px)}.kbq-markdown .kbq-markdown__h6{margin-top:var(--kbq-markdown-h6-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h6-size-margin-bottom, 8px)}.kbq-markdown .kbq-markdown__a{display:inline-block;text-decoration:none;cursor:pointer;border-bottom-style:solid;border-bottom-width:1px;transition:color ease-out .3s}.kbq-markdown .kbq-markdown__p{margin-top:var(--kbq-markdown-p-size-margin-top, 12px);margin-bottom:var(--kbq-markdown-p-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__ul,.kbq-markdown .kbq-markdown__ol{margin-top:var(--kbq-markdown-list-size-margin-top, 12px);margin-bottom:var(--kbq-markdown-list-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__ul>li,.kbq-markdown .kbq-markdown__ol>li{margin-bottom:var(--kbq-markdown-list-size-item-margin-bottom, 4px)}.kbq-markdown .kbq-markdown__ul{position:relative;list-style:none;padding:var(--kbq-markdown-list-size-ul-padding, 0 0 0 24px)}.kbq-markdown .kbq-markdown__ul>li:before{content:\"\\2014\";display:block;position:absolute;width:24px;text-align:left;left:0}.kbq-markdown .kbq-markdown__ol{list-style:none;padding:0;counter-reset:li}.kbq-markdown .kbq-markdown__ol>li:before{content:counter(li) \".\";counter-increment:li;padding-right:var(--kbq-markdown-list-size-ol-number-padding-right, 4px)}.kbq-markdown .kbq-markdown__ol>li>*{display:inline-block}.kbq-markdown .kbq-markdown__p+.kbq-markdown__ul,.kbq-markdown .kbq-markdown__p+.kbq-markdown__ol{margin-top:var(--kbq-markdown-list-size-margin-top-after-paragraph, -8px)}.kbq-markdown .kbq-markdown__blockquote{margin-top:var(--kbq-markdown-blockquote-size-margin-top, 12px);margin-left:0;margin-bottom:var(--kbq-markdown-blockquote-size-margin-bottom, 12px);margin-right:0;border-left-width:var(--kbq-markdown-blockquote-size-line-width, 4px);border-left-style:solid;padding:var(--kbq-markdown-blockquote-size-padding, 2px 12px)}.kbq-markdown .kbq-markdown__blockquote>.kbq-markdown__p{margin-top:0;margin-bottom:0}.kbq-markdown .kbq-markdown__pre{position:relative;overflow-x:auto;margin-top:var(--kbq-markdown-code-size-multiline-margin-top, 12px);margin-bottom:var(--kbq-markdown-code-size-multiline-margin-bottom, 24px);padding:var(--kbq-markdown-code-size-multiline-padding, 12px 16px)}.kbq-markdown .kbq-markdown__pre,.kbq-markdown .kbq-markdown__p>.kbq-markdown__code{border-radius:var(--kbq-markdown-code-size-border-radius, 8px);border-width:var(--kbq-markdown-code-size-border-width, 1px);border-style:solid}.kbq-markdown .kbq-markdown__p>.kbq-markdown__code{padding:var(--kbq-markdown-code-size-inline-padding, 0 4px)}.kbq-markdown .kbq-markdown__img{max-width:100%;margin-top:var(--kbq-markdown-image-size-margin-top, 12px);margin-bottom:var(--kbq-markdown-image-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__img+em{display:block;margin-top:var(--kbq-markdown-image-size-caption-margin-top, -8px);margin-bottom:var(--kbq-markdown-image-size-caption-margin-bottom, 24px)}.kbq-markdown .kbq-markdown__hr{border-top:none;border-left:none;border-right:none;border-bottom-style:solid;border-bottom-width:var(--kbq-markdown-hr-size-width, 1px);margin:var(--kbq-markdown-hr-size-margin-vertical, 24px) 0}.kbq-markdown .kbq-markdown__table{max-width:100%;overflow-x:auto;display:table;border-collapse:collapse;margin-bottom:var(--kbq-markdown-table-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__table td{vertical-align:top}.kbq-markdown .kbq-markdown__table th,.kbq-markdown .kbq-markdown__table td{padding:var(--kbq-markdown-table-size-padding, 8px);font-weight:400}.kbq-markdown .kbq-markdown__table>.kbq-markdown__thead{border-bottom-style:solid;border-bottom-width:var(--kbq-markdown-table-size-border-width, 1px);text-align:left}.kbq-markdown .kbq-markdown__table>.kbq-markdown__thead th:first-child{padding-left:0}.kbq-markdown .kbq-markdown__table>.kbq-markdown__thead th:last-child{padding-right:0}.kbq-markdown .kbq-markdown__table>.kbq-markdown__tbody td:first-child{padding-left:0}.kbq-markdown .kbq-markdown__table>.kbq-markdown__tbody td:last-child{padding-right:0}.docs-live-example.kbq-markdown{margin-bottom:128px}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["@charset \"UTF-8\";.kbq-markdown{display:block}.kbq-markdown .markdown-input{display:none}.kbq-markdown .markdown-output{flex:1}.kbq-markdown .kbq-markdown__h1{margin-top:var(--kbq-markdown-h1-size-margin-top, 0);margin-bottom:var(--kbq-markdown-h1-size-margin-bottom, 16px)}.kbq-markdown .kbq-markdown__h1+.kbq-markdown__h1{margin-top:0}.kbq-markdown .kbq-markdown__h1+.kbq-markdown__h2{margin-top:0}.kbq-markdown .kbq-markdown__h1+.kbq-markdown__h3{margin-top:0}.kbq-markdown .kbq-markdown__h1+.kbq-markdown__h4{margin-top:0}.kbq-markdown .kbq-markdown__h1+.kbq-markdown__h5{margin-top:0}.kbq-markdown .kbq-markdown__h1+.kbq-markdown__h6{margin-top:0}.kbq-markdown .kbq-markdown__h2{margin-top:var(--kbq-markdown-h2-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h2-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__h2+.kbq-markdown__h1{margin-top:0}.kbq-markdown .kbq-markdown__h2+.kbq-markdown__h2{margin-top:0}.kbq-markdown .kbq-markdown__h2+.kbq-markdown__h3{margin-top:0}.kbq-markdown .kbq-markdown__h2+.kbq-markdown__h4{margin-top:0}.kbq-markdown .kbq-markdown__h2+.kbq-markdown__h5{margin-top:0}.kbq-markdown .kbq-markdown__h2+.kbq-markdown__h6{margin-top:0}.kbq-markdown .kbq-markdown__h3{margin-top:var(--kbq-markdown-h3-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h3-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__h3+.kbq-markdown__h1{margin-top:0}.kbq-markdown .kbq-markdown__h3+.kbq-markdown__h2{margin-top:0}.kbq-markdown .kbq-markdown__h3+.kbq-markdown__h3{margin-top:0}.kbq-markdown .kbq-markdown__h3+.kbq-markdown__h4{margin-top:0}.kbq-markdown .kbq-markdown__h3+.kbq-markdown__h5{margin-top:0}.kbq-markdown .kbq-markdown__h3+.kbq-markdown__h6{margin-top:0}.kbq-markdown .kbq-markdown__h4{margin-top:var(--kbq-markdown-h4-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h4-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__h4+.kbq-markdown__h1{margin-top:0}.kbq-markdown .kbq-markdown__h4+.kbq-markdown__h2{margin-top:0}.kbq-markdown .kbq-markdown__h4+.kbq-markdown__h3{margin-top:0}.kbq-markdown .kbq-markdown__h4+.kbq-markdown__h4{margin-top:0}.kbq-markdown .kbq-markdown__h4+.kbq-markdown__h5{margin-top:0}.kbq-markdown .kbq-markdown__h4+.kbq-markdown__h6{margin-top:0}.kbq-markdown .kbq-markdown__h5{margin-top:var(--kbq-markdown-h5-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h5-size-margin-bottom, 8px)}.kbq-markdown .kbq-markdown__h5+.kbq-markdown__h1{margin-top:0}.kbq-markdown .kbq-markdown__h5+.kbq-markdown__h2{margin-top:0}.kbq-markdown .kbq-markdown__h5+.kbq-markdown__h3{margin-top:0}.kbq-markdown .kbq-markdown__h5+.kbq-markdown__h4{margin-top:0}.kbq-markdown .kbq-markdown__h5+.kbq-markdown__h5{margin-top:0}.kbq-markdown .kbq-markdown__h5+.kbq-markdown__h6{margin-top:0}.kbq-markdown .kbq-markdown__h6{margin-top:var(--kbq-markdown-h6-size-margin-top, 24px);margin-bottom:var(--kbq-markdown-h6-size-margin-bottom, 8px)}.kbq-markdown .kbq-markdown__h6+.kbq-markdown__h1{margin-top:0}.kbq-markdown .kbq-markdown__h6+.kbq-markdown__h2{margin-top:0}.kbq-markdown .kbq-markdown__h6+.kbq-markdown__h3{margin-top:0}.kbq-markdown .kbq-markdown__h6+.kbq-markdown__h4{margin-top:0}.kbq-markdown .kbq-markdown__h6+.kbq-markdown__h5{margin-top:0}.kbq-markdown .kbq-markdown__h6+.kbq-markdown__h6{margin-top:0}.kbq-markdown .kbq-markdown__a{display:inline-block;text-decoration:none;cursor:pointer;border-bottom-style:solid;border-bottom-width:1px;transition:color ease-out .3s}.kbq-markdown .kbq-markdown__p{margin-top:var(--kbq-markdown-p-size-margin-top, 12px);margin-bottom:var(--kbq-markdown-p-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__ul,.kbq-markdown .kbq-markdown__ol{margin-top:var(--kbq-markdown-list-size-margin-top, 12px);margin-bottom:var(--kbq-markdown-list-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__ul>li,.kbq-markdown .kbq-markdown__ol>li{margin-bottom:var(--kbq-markdown-list-size-item-margin-bottom, 4px)}.kbq-markdown .kbq-markdown__ul{position:relative;list-style:none;padding:var(--kbq-markdown-list-size-ul-padding, 0 0 0 24px)}.kbq-markdown .kbq-markdown__ul>li:before{content:\"\\2014\";display:block;position:absolute;width:24px;text-align:left;left:0}.kbq-markdown .kbq-markdown__ol{list-style:none;padding:0;counter-reset:li}.kbq-markdown .kbq-markdown__ol>li:before{content:counter(li) \".\";counter-increment:li;padding-right:var(--kbq-markdown-list-size-ol-number-padding-right, 4px)}.kbq-markdown .kbq-markdown__ol>li>*{display:inline-block}.kbq-markdown .kbq-markdown__p+.kbq-markdown__ul,.kbq-markdown .kbq-markdown__p+.kbq-markdown__ol{margin-top:var(--kbq-markdown-list-size-margin-top-after-paragraph, -8px)}.kbq-markdown .kbq-markdown__blockquote{margin-top:var(--kbq-markdown-blockquote-size-margin-top, 12px);margin-left:0;margin-bottom:var(--kbq-markdown-blockquote-size-margin-bottom, 12px);margin-right:0;border-left-width:var(--kbq-markdown-blockquote-size-line-width, 4px);border-left-style:solid;padding:var(--kbq-markdown-blockquote-size-padding, 2px 12px)}.kbq-markdown .kbq-markdown__blockquote>.kbq-markdown__p{margin-top:0;margin-bottom:0}.kbq-markdown .kbq-markdown__pre{position:relative;overflow-x:auto;margin-top:var(--kbq-markdown-code-size-multiline-margin-top, 12px);margin-bottom:var(--kbq-markdown-code-size-multiline-margin-bottom, 24px);padding:var(--kbq-markdown-code-size-multiline-padding, 12px 16px)}.kbq-markdown .kbq-markdown__pre,.kbq-markdown .kbq-markdown__p>.kbq-markdown__code{border-radius:var(--kbq-markdown-code-size-border-radius, 8px);border-width:var(--kbq-markdown-code-size-border-width, 1px);border-style:solid}.kbq-markdown .kbq-markdown__p>.kbq-markdown__code{padding:var(--kbq-markdown-code-size-inline-padding, 0 4px)}.kbq-markdown .kbq-markdown__img{max-width:100%;margin-top:var(--kbq-markdown-image-size-margin-top, 12px);margin-bottom:var(--kbq-markdown-image-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__img+em{display:block;margin-top:var(--kbq-markdown-image-size-caption-margin-top, -8px);margin-bottom:var(--kbq-markdown-image-size-caption-margin-bottom, 24px)}.kbq-markdown .kbq-markdown__hr{border-top:none;border-left:none;border-right:none;border-bottom-style:solid;border-bottom-width:var(--kbq-markdown-hr-size-width, 1px);margin:var(--kbq-markdown-hr-size-margin-vertical, 24px) 0}.kbq-markdown .kbq-markdown__table{max-width:100%;overflow-x:auto;display:table;border-collapse:collapse;margin-bottom:var(--kbq-markdown-table-size-margin-bottom, 12px)}.kbq-markdown .kbq-markdown__table td{vertical-align:top}.kbq-markdown .kbq-markdown__table th,.kbq-markdown .kbq-markdown__table td{padding:var(--kbq-markdown-table-size-padding, 8px);font-weight:400}.kbq-markdown .kbq-markdown__table>.kbq-markdown__thead{border-bottom-style:solid;border-bottom-width:var(--kbq-markdown-table-size-border-width, 1px);text-align:left}.kbq-markdown .kbq-markdown__table>.kbq-markdown__thead th:first-child{padding-left:0}.kbq-markdown .kbq-markdown__table>.kbq-markdown__thead th:last-child{padding-right:0}.kbq-markdown .kbq-markdown__table>.kbq-markdown__tbody td:first-child{padding-left:0}.kbq-markdown .kbq-markdown__table>.kbq-markdown__tbody td:last-child{padding-right:0}.docs-live-example.kbq-markdown{margin-bottom:128px}\n", ".kbq-markdown{--kbq-markdown-h1-size-max-width: 650px;--kbq-markdown-h1-size-margin-top: 0;--kbq-markdown-h1-size-margin-bottom: 16px;--kbq-markdown-h1-font-default-font-size: 36px;--kbq-markdown-h1-font-default-line-height: 44px;--kbq-markdown-h1-font-default-letter-spacing: normal;--kbq-markdown-h1-font-default-font-weight: 400;--kbq-markdown-h1-font-default-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-h1-font-default-text-transform: null;--kbq-markdown-h1-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-markdown-h2-size-max-width: 650px;--kbq-markdown-h2-size-margin-top: 24px;--kbq-markdown-h2-size-margin-bottom: 12px;--kbq-markdown-h2-font-default-font-size: 24px;--kbq-markdown-h2-font-default-line-height: 32px;--kbq-markdown-h2-font-default-letter-spacing: normal;--kbq-markdown-h2-font-default-font-weight: 700;--kbq-markdown-h2-font-default-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-h2-font-default-text-transform: null;--kbq-markdown-h2-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-markdown-h3-size-max-width: 650px;--kbq-markdown-h3-size-margin-top: 24px;--kbq-markdown-h3-size-margin-bottom: 12px;--kbq-markdown-h3-font-default-font-size: 20px;--kbq-markdown-h3-font-default-line-height: 28px;--kbq-markdown-h3-font-default-letter-spacing: normal;--kbq-markdown-h3-font-default-font-weight: 700;--kbq-markdown-h3-font-default-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-h3-font-default-text-transform: null;--kbq-markdown-h3-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-markdown-h4-size-max-width: 650px;--kbq-markdown-h4-size-margin-top: 24px;--kbq-markdown-h4-size-margin-bottom: 12px;--kbq-markdown-h4-font-default-font-size: 18px;--kbq-markdown-h4-font-default-line-height: 26px;--kbq-markdown-h4-font-default-letter-spacing: normal;--kbq-markdown-h4-font-default-font-weight: 700;--kbq-markdown-h4-font-default-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-h4-font-default-text-transform: null;--kbq-markdown-h4-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-markdown-h5-size-max-width: 650px;--kbq-markdown-h5-size-margin-top: 24px;--kbq-markdown-h5-size-margin-bottom: 8px;--kbq-markdown-h5-font-default-font-size: 16px;--kbq-markdown-h5-font-default-line-height: 24px;--kbq-markdown-h5-font-default-letter-spacing: -.011em;--kbq-markdown-h5-font-default-font-weight: 700;--kbq-markdown-h5-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-h5-font-default-text-transform: null;--kbq-markdown-h5-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-markdown-h6-size-max-width: 650px;--kbq-markdown-h6-size-margin-top: 24px;--kbq-markdown-h6-size-margin-bottom: 8px;--kbq-markdown-h6-font-default-font-size: 14px;--kbq-markdown-h6-font-default-line-height: 20px;--kbq-markdown-h6-font-default-letter-spacing: .08em;--kbq-markdown-h6-font-default-font-weight: 500;--kbq-markdown-h6-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-h6-font-default-text-transform: uppercase;--kbq-markdown-h6-font-default-font-feature-settings: \"calt\", \"case\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-markdown-p-size-max-width: 650px;--kbq-markdown-p-size-margin-top: 12px;--kbq-markdown-p-size-margin-bottom: 12px;--kbq-markdown-p-font-default-font-size: 16px;--kbq-markdown-p-font-default-line-height: 24px;--kbq-markdown-p-font-default-letter-spacing: -.011em;--kbq-markdown-p-font-default-font-weight: normal;--kbq-markdown-p-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-p-font-default-text-transform: null;--kbq-markdown-p-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-markdown-list-size-max-width: 650px;--kbq-markdown-list-size-margin-top: 12px;--kbq-markdown-list-size-margin-bottom: 12px;--kbq-markdown-list-size-margin-top-after-paragraph: -8px;--kbq-markdown-list-size-ol-number-padding-right: 4px;--kbq-markdown-list-size-ul-padding: 0 0 0 24px;--kbq-markdown-list-size-item-margin-bottom: 4px;--kbq-markdown-list-font-default-font-size: 16px;--kbq-markdown-list-font-default-line-height: 24px;--kbq-markdown-list-font-default-letter-spacing: -.011em;--kbq-markdown-list-font-default-font-weight: normal;--kbq-markdown-list-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-list-font-default-text-transform: null;--kbq-markdown-list-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-markdown-blockquote-size-max-width: 650px;--kbq-markdown-blockquote-size-margin-top: 12px;--kbq-markdown-blockquote-size-margin-bottom: 12px;--kbq-markdown-blockquote-size-padding: 2px 12px;--kbq-markdown-blockquote-size-line-width: 4px;--kbq-markdown-blockquote-size-border-radius: 0;--kbq-markdown-blockquote-size-border-width: 0;--kbq-markdown-blockquote-font-default-font-size: 16px;--kbq-markdown-blockquote-font-default-line-height: 24px;--kbq-markdown-blockquote-font-default-letter-spacing: -.011em;--kbq-markdown-blockquote-font-default-font-weight: normal;--kbq-markdown-blockquote-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-blockquote-font-default-text-transform: null;--kbq-markdown-blockquote-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-markdown-code-size-max-width: 650px;--kbq-markdown-code-size-multiline-margin-top: 12px;--kbq-markdown-code-size-multiline-margin-bottom: 24px;--kbq-markdown-code-size-inline-padding: 0 4px;--kbq-markdown-code-size-multiline-padding: 12px 16px;--kbq-markdown-code-size-border-radius: 8px;--kbq-markdown-code-size-border-width: 1px;--kbq-markdown-code-font-default-font-size: 16px;--kbq-markdown-code-font-default-line-height: 24px;--kbq-markdown-code-font-default-letter-spacing: normal;--kbq-markdown-code-font-default-font-weight: normal;--kbq-markdown-code-font-default-font-family: \"JetBrains Mono\", \"Roboto Mono\", \"Consolas\", \"Menlo\", \"Monaco\", monospace;--kbq-markdown-code-font-default-text-transform: null;--kbq-markdown-code-font-default-font-feature-settings: initial;--kbq-markdown-link-size-icon-margin: 2px;--kbq-markdown-link-size-state-focused-outline-offset: 0px;--kbq-markdown-link-size-state-focused-outline-width: 2px;--kbq-markdown-link-font-default-font-size: 16px;--kbq-markdown-link-font-default-line-height: 24px;--kbq-markdown-link-font-default-letter-spacing: -.011em;--kbq-markdown-link-font-default-font-weight: normal;--kbq-markdown-link-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-link-font-default-text-transform: null;--kbq-markdown-link-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-markdown-image-size-max-width: 650px;--kbq-markdown-image-size-margin-top: 12px;--kbq-markdown-image-size-margin-bottom: 12px;--kbq-markdown-image-size-caption-margin-top: -8px;--kbq-markdown-image-size-caption-margin-bottom: 24px;--kbq-markdown-image-font-caption-font-size: 14px;--kbq-markdown-image-font-caption-line-height: 20px;--kbq-markdown-image-font-caption-letter-spacing: -.006em;--kbq-markdown-image-font-caption-font-weight: normal;--kbq-markdown-image-font-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-image-font-caption-text-transform: null;--kbq-markdown-image-font-caption-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-markdown-hr-size-width: 1px;--kbq-markdown-hr-size-margin-vertical: 24px;--kbq-markdown-table-size-border-width: 1px;--kbq-markdown-table-size-padding: 8px;--kbq-markdown-table-size-margin-bottom: 12px;--kbq-markdown-table-font-header-font-size: 14px;--kbq-markdown-table-font-header-line-height: 20px;--kbq-markdown-table-font-header-letter-spacing: -.006em;--kbq-markdown-table-font-header-font-weight: normal;--kbq-markdown-table-font-header-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-table-font-header-text-transform: null;--kbq-markdown-table-font-header-font-feature-settings: \"calt\", \"ss01\", \"ss04\", \"tnum\";--kbq-markdown-table-font-body-font-size: 16px;--kbq-markdown-table-font-body-line-height: 24px;--kbq-markdown-table-font-body-letter-spacing: normal;--kbq-markdown-table-font-body-font-weight: normal;--kbq-markdown-table-font-body-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-table-font-body-text-transform: null;--kbq-markdown-table-font-body-font-feature-settings: \"calt\", \"ss01\", \"ss04\", \"tnum\";--kbq-markdown-size-max-width: 650px;--kbq-markdown-font-default-font-size: 16px;--kbq-markdown-font-default-line-height: 24px;--kbq-markdown-font-default-letter-spacing: -.011em;--kbq-markdown-font-default-font-weight: normal;--kbq-markdown-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-markdown-font-default-text-transform: null;--kbq-markdown-font-default-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-background-bg: hsla(0, 0%, 100%, 100%);--kbq-background-bg-secondary: hsla(229, 15%, 95%, 100%);--kbq-background-bg-tertiary: hsla(229, 15%, 97%, 100%);--kbq-foreground-contrast: hsla(229, 15%, 15%, 100%);--kbq-foreground-contrast-secondary: hsla(229, 15%, 50%, 100%);--kbq-foreground-contrast-tertiary: hsla(229, 15%, 60%, 100%);--kbq-markdown-h1-color: hsla(229, 15%, 15%, 100%);--kbq-markdown-h2-color: hsla(229, 15%, 15%, 100%);--kbq-markdown-h3-color: hsla(229, 15%, 15%, 100%);--kbq-markdown-h4-color: hsla(229, 15%, 15%, 100%);--kbq-markdown-h5-color: hsla(229, 15%, 15%, 100%);--kbq-markdown-h6-color: hsla(229, 15%, 15%, 100%);--kbq-markdown-p-color: hsla(229, 15%, 15%, 100%);--kbq-markdown-list-color: hsla(229, 15%, 15%, 100%);--kbq-markdown-blockquote-text: hsla(229, 15%, 15%, 100%);--kbq-markdown-blockquote-line: hsla(229, 15%, 80%, 100%);--kbq-markdown-blockquote-background: transparent;--kbq-markdown-blockquote-border: transparent;--kbq-markdown-code-text: hsla(229, 15%, 15%, 100%);--kbq-markdown-code-background: hsla(229, 15%, 95%, 100%);--kbq-markdown-code-border: hsla(229, 15%, 6%, 12%);--kbq-markdown-link-text: hsla(216, 100%, 50%, 100%);--kbq-markdown-link-border-bottom: hsla(216, 100%, 85%, 100%);--kbq-markdown-link-state-visited-text: hsla(277, 72%, 45%, 100%);--kbq-markdown-link-state-visited-border-bottom: hsla(277, 72%, 80%, 100%);--kbq-markdown-link-state-hover-text: hsla(216, 100%, 45%, 100%);--kbq-markdown-link-state-hover-border-bottom: hsla(216, 100%, 85%, 100%);--kbq-markdown-link-state-active: hsla(216, 100%, 40%, 100%);--kbq-markdown-link-state-focused-outline: hsla(216, 100%, 60%, 100%);--kbq-markdown-image-caption-text: hsla(229, 15%, 50%, 100%);--kbq-markdown-hr-color: hsla(229, 15%, 6%, 12%);--kbq-markdown-table-header: hsla(229, 15%, 50%, 100%);--kbq-markdown-table-body: hsla(229, 15%, 15%, 100%);--kbq-markdown-table-border: hsla(229, 15%, 6%, 12%)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-background-bg: hsla(229, 15%, 12%, 100%);--kbq-background-bg-secondary: hsla(229, 15%, 16%, 100%);--kbq-background-bg-tertiary: hsla(229, 15%, 14%, 100%);--kbq-foreground-contrast: hsla(229, 15%, 80%, 100%);--kbq-foreground-contrast-secondary: hsla(229, 15%, 60%, 100%);--kbq-foreground-contrast-tertiary: hsla(229, 15%, 45%, 100%);--kbq-markdown-h1-color: hsla(229, 15%, 80%, 100%);--kbq-markdown-h2-color: hsla(229, 15%, 80%, 100%);--kbq-markdown-h3-color: hsla(229, 15%, 80%, 100%);--kbq-markdown-h4-color: hsla(229, 15%, 80%, 100%);--kbq-markdown-h5-color: hsla(229, 15%, 80%, 100%);--kbq-markdown-h6-color: hsla(229, 15%, 80%, 100%);--kbq-markdown-p-color: hsla(229, 15%, 80%, 100%);--kbq-markdown-list-color: hsla(229, 15%, 80%, 100%);--kbq-markdown-blockquote-text: hsla(229, 15%, 80%, 100%);--kbq-markdown-blockquote-line: hsla(229, 15%, 30%, 100%);--kbq-markdown-blockquote-background: transparent;--kbq-markdown-blockquote-border: transparent;--kbq-markdown-code-text: hsla(229, 15%, 80%, 100%);--kbq-markdown-code-background: hsla(229, 15%, 95%, 100%);--kbq-markdown-code-border: hsla(229, 15%, 22%, 100%);--kbq-markdown-link-text: hsla(216, 100%, 65%, 100%);--kbq-markdown-link-border-bottom: hsla(216, 100%, 27%, 100%);--kbq-markdown-link-state-visited-text: hsla(277, 72%, 50%, 100%);--kbq-markdown-link-state-visited-border-bottom: hsla(277, 72%, 30%, 100%);--kbq-markdown-link-state-hover-text: hsla(216, 100%, 65%, 100%);--kbq-markdown-link-state-hover-border-bottom: hsla(216, 100%, 27%, 100%);--kbq-markdown-link-state-active: hsla(216, 100%, 70%, 100%);--kbq-markdown-link-state-focused-outline: hsla(216, 100%, 60%, 100%);--kbq-markdown-image-caption-text: hsla(229, 15%, 50%, 100%);--kbq-markdown-hr-color: hsla(229, 15%, 22%, 100%);--kbq-markdown-table-header: hsla(229, 15%, 50%, 100%);--kbq-markdown-table-body: hsla(229, 15%, 80%, 100%);--kbq-markdown-table-border: hsla(229, 15%, 22%, 100%)}\n"] }]
         }], ctorParameters: () => [{ type: KbqMarkdownService }, { type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { contentWrapper: [{
                 type: ViewChild,
                 args: ['contentWrapper']

package/fesm2022/koobiq-components-markdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-markdown.mjs","sources":["../../../packages/components/markdown/markdown.values.ts","../../../packages/components/markdown/markdown.service.ts","../../../packages/components/markdown/markdown.component.ts","../../../packages/components/markdown/markdown.module.ts","../../../packages/components/markdown/koobiq-components-markdown.ts"],"sourcesContent":["export const MARKDOWN_TAGS_TO_CLASS_ALIAS = [\n    'a',\n    'blockquote',\n    'h1',\n    'h2',\n    'h3',\n    'h4',\n    'h5',\n    'h6',\n    'hr',\n    'li',\n    'ol',\n    'table',\n    'tbody',\n    'thead',\n    'td',\n    'tr',\n    'ul',\n    'pre',\n    'code',\n    'img'\n];\n\n// separating th and p to prevent it's conflict with thead and pre\nexport const MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS = [\n    'th',\n    'p'\n];\nexport const CLASS_PREFIX: string = 'kbq-markdown';\n","import { Injectable } from '@angular/core';\nimport { marked } from 'marked';\nimport { CLASS_PREFIX, MARKDOWN_TAGS_TO_CLASS_ALIAS, MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS } from './markdown.values';\n\n@Injectable()\nexport class KbqMarkdownService {\n    parseToHtml(markdown: string): string {\n        return this.transform(marked.parse(markdown));\n    }\n\n    private transform(htmlContent: string): string {\n        let transformed = htmlContent;\n\n        MARKDOWN_TAGS_TO_CLASS_ALIAS.forEach((tag) => {\n            transformed = transformed.replace(\n                new RegExp(`<${tag}`, 'g'),\n                (_match: string) => `<${tag} class=\"${CLASS_PREFIX}__${tag}\"`\n            );\n        });\n\n        MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS.forEach((tag) => {\n            transformed = transformed.replace(\n                new RegExp(`<${tag}\\s*>`, 'g'),\n                (_match: string) => `<${tag} class=\"${CLASS_PREFIX}__${tag}\">`\n            );\n        });\n\n        return transformed;\n    }\n}\n","import {\n    AfterContentChecked,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    Input,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { KbqMarkdownService } from './markdown.service';\n\n@Component({\n    selector: 'kbq-markdown',\n    styleUrls: ['./markdown.scss'],\n    // no need format line with ng-content it's broke textContent for markdownService.parseToHtml()\n    template: `\n        <pre\n            class=\"markdown-input\"\n            #contentWrapper\n            ngPreserveWhitespaces\n        ><ng-content /></pre>\n        <div\n            class=\"markdown-output\"\n            [innerHtml]=\"resultHtml\"\n        ></div>\n    `,\n    host: {\n        class: 'kbq-markdown'\n    },\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None\n})\nexport class KbqMarkdown implements AfterContentChecked {\n    @ViewChild('contentWrapper') contentWrapper: ElementRef;\n\n    @Input()\n    get markdownText(): string | null {\n        return this._markdownText;\n    }\n\n    set markdownText(value: string | null) {\n        if (value && this.markdownText !== value) {\n            this.resultHtml = this.getResultHTML(value);\n        }\n\n        this._markdownText = value;\n    }\n\n    private _markdownText: string | null = null;\n\n    resultHtml: SafeHtml = '';\n\n    constructor(\n        private markdownService: KbqMarkdownService,\n        private sanitizer: DomSanitizer,\n        private cdr: ChangeDetectorRef\n    ) {}\n\n    ngAfterContentChecked(): void {\n        if (!this.markdownText && this.contentWrapper?.nativeElement.textContent) {\n            this.resultHtml = this.getResultHTML(this.contentWrapper.nativeElement.textContent);\n            this.cdr.detectChanges();\n        }\n    }\n\n    private getResultHTML(value): SafeHtml {\n        return this.sanitizer.bypassSecurityTrustHtml(this.markdownService.parseToHtml(value));\n    }\n}\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { KbqCommonModule } from '@koobiq/components/core';\nimport { KbqMarkdown } from './markdown.component';\nimport { KbqMarkdownService } from './markdown.service';\n\n@NgModule({\n    imports: [CommonModule, A11yModule, KbqCommonModule, FormsModule],\n    exports: [KbqMarkdown],\n    declarations: [KbqMarkdown],\n    providers: [KbqMarkdownService]\n})\nexport class KbqMarkdownModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.KbqMarkdownService"],"mappings":";;;;;;;;;AAAa,MAAA,4BAA4B,GAAG;IACxC,GAAG;IACH,YAAY;IACZ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,OAAO;IACP,OAAO;IACP,OAAO;IACP,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,KAAK;IACL,MAAM;IACN,KAAK;EACP;AAEF;AACa,MAAA,kCAAkC,GAAG;IAC9C,IAAI;IACJ,GAAG;EACL;AACK,MAAM,YAAY,GAAW;;MCvBvB,kBAAkB,CAAA;AAC3B,IAAA,WAAW,CAAC,QAAgB,EAAA;QACxB,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;KACjD;AAEO,IAAA,SAAS,CAAC,WAAmB,EAAA;QACjC,IAAI,WAAW,GAAG,WAAW,CAAC;AAE9B,QAAA,4BAA4B,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACzC,YAAA,WAAW,GAAG,WAAW,CAAC,OAAO,CAC7B,IAAI,MAAM,CAAC,CAAI,CAAA,EAAA,GAAG,CAAE,CAAA,EAAE,GAAG,CAAC,EAC1B,CAAC,MAAc,KAAK,CAAI,CAAA,EAAA,GAAG,CAAW,QAAA,EAAA,YAAY,CAAK,EAAA,EAAA,GAAG,CAAG,CAAA,CAAA,CAChE,CAAC;AACN,SAAC,CAAC,CAAC;AAEH,QAAA,kCAAkC,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AAC/C,YAAA,WAAW,GAAG,WAAW,CAAC,OAAO,CAC7B,IAAI,MAAM,CAAC,CAAI,CAAA,EAAA,GAAG,CAAM,IAAA,CAAA,EAAE,GAAG,CAAC,EAC9B,CAAC,MAAc,KAAK,CAAI,CAAA,EAAA,GAAG,CAAW,QAAA,EAAA,YAAY,CAAK,EAAA,EAAA,GAAG,CAAI,EAAA,CAAA,CACjE,CAAC;AACN,SAAC,CAAC,CAAC;AAEH,QAAA,OAAO,WAAW,CAAC;KACtB;iIAvBQ,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA;qIAAlB,kBAAkB,EAAA,CAAA,CAAA,EAAA;;2FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAD9B,UAAU;;;MC8BE,WAAW,CAAA;AAGpB,IAAA,IACI,YAAY,GAAA;QACZ,OAAO,IAAI,CAAC,aAAa,CAAC;KAC7B;IAED,IAAI,YAAY,CAAC,KAAoB,EAAA;QACjC,IAAI,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,KAAK,EAAE;YACtC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SAC/C;AAED,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC9B;AAMD,IAAA,WAAA,CACY,eAAmC,EACnC,SAAuB,EACvB,GAAsB,EAAA;QAFtB,IAAe,CAAA,eAAA,GAAf,eAAe,CAAoB;QACnC,IAAS,CAAA,SAAA,GAAT,SAAS,CAAc;QACvB,IAAG,CAAA,GAAA,GAAH,GAAG,CAAmB;QAP1B,IAAa,CAAA,aAAA,GAAkB,IAAI,CAAC;QAE5C,IAAU,CAAA,UAAA,GAAa,EAAE,CAAC;KAMtB;IAEJ,qBAAqB,GAAA;AACjB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,WAAW,EAAE;AACtE,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;AACpF,YAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;SAC5B;KACJ;AAEO,IAAA,aAAa,CAAC,KAAK,EAAA;AACvB,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;KAC1F;iIAnCQ,WAAW,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAA,kBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAX,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,EAjBV,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,cAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;AAUT,IAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,y2JAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FAOQ,WAAW,EAAA,UAAA,EAAA,CAAA;kBArBvB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAGd,QAAA,EAAA,CAAA;;;;;;;;;;KAUT,EACK,IAAA,EAAA;AACF,wBAAA,KAAK,EAAE,cAAc;AACxB,qBAAA,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,MAAA,EAAA,CAAA,y2JAAA,CAAA,EAAA,CAAA;+IAGR,cAAc,EAAA,CAAA;sBAA1C,SAAS;uBAAC,gBAAgB,CAAA;gBAGvB,YAAY,EAAA,CAAA;sBADf,KAAK;;;MCvBG,iBAAiB,CAAA;iIAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;kIAAjB,iBAAiB,EAAA,YAAA,EAAA,CAHX,WAAW,CAAA,EAAA,OAAA,EAAA,CAFhB,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,CAAA,EAAA,OAAA,EAAA,CACtD,WAAW,CAAA,EAAA,CAAA,CAAA,EAAA;kIAIZ,iBAAiB,EAAA,SAAA,EAFf,CAAC,kBAAkB,CAAC,EAAA,OAAA,EAAA,CAHrB,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAKvD,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,CAAC;oBACjE,OAAO,EAAE,CAAC,WAAW,CAAC;oBACtB,YAAY,EAAE,CAAC,WAAW,CAAC;oBAC3B,SAAS,EAAE,CAAC,kBAAkB,CAAC;AAClC,iBAAA,CAAA;;;ACbD;;AAEG;;;;"}
+{"version":3,"file":"koobiq-components-markdown.mjs","sources":["../../../packages/components/markdown/markdown.values.ts","../../../packages/components/markdown/markdown.service.ts","../../../packages/components/markdown/markdown.component.ts","../../../packages/components/markdown/markdown.module.ts","../../../packages/components/markdown/koobiq-components-markdown.ts"],"sourcesContent":["export const MARKDOWN_TAGS_TO_CLASS_ALIAS = [\n    'a',\n    'blockquote',\n    'h1',\n    'h2',\n    'h3',\n    'h4',\n    'h5',\n    'h6',\n    'hr',\n    'li',\n    'ol',\n    'table',\n    'tbody',\n    'thead',\n    'td',\n    'tr',\n    'ul',\n    'pre',\n    'code',\n    'img'\n];\n\n// separating th and p to prevent it's conflict with thead and pre\nexport const MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS = [\n    'th',\n    'p'\n];\nexport const CLASS_PREFIX: string = 'kbq-markdown';\n","import { Injectable } from '@angular/core';\nimport { marked } from 'marked';\nimport { CLASS_PREFIX, MARKDOWN_TAGS_TO_CLASS_ALIAS, MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS } from './markdown.values';\n\n@Injectable()\nexport class KbqMarkdownService {\n    parseToHtml(markdown: string): string {\n        return this.transform(marked.parse(markdown));\n    }\n\n    private transform(htmlContent: string): string {\n        let transformed = htmlContent;\n\n        MARKDOWN_TAGS_TO_CLASS_ALIAS.forEach((tag) => {\n            transformed = transformed.replace(\n                new RegExp(`<${tag}`, 'g'),\n                (_match: string) => `<${tag} class=\"${CLASS_PREFIX}__${tag}\"`\n            );\n        });\n\n        MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS.forEach((tag) => {\n            transformed = transformed.replace(\n                new RegExp(`<${tag}\\s*>`, 'g'),\n                (_match: string) => `<${tag} class=\"${CLASS_PREFIX}__${tag}\">`\n            );\n        });\n\n        return transformed;\n    }\n}\n","import {\n    AfterContentChecked,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    Input,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { KbqMarkdownService } from './markdown.service';\n\n@Component({\n    selector: 'kbq-markdown',\n    styleUrls: ['./markdown.scss', 'markdown-tokens.scss'],\n    // no need format line with ng-content it's broke textContent for markdownService.parseToHtml()\n    template: `\n        <pre\n            class=\"markdown-input\"\n            #contentWrapper\n            ngPreserveWhitespaces\n        ><ng-content /></pre>\n        <div\n            class=\"markdown-output\"\n            [innerHtml]=\"resultHtml\"\n        ></div>\n    `,\n    host: {\n        class: 'kbq-markdown'\n    },\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None\n})\nexport class KbqMarkdown implements AfterContentChecked {\n    @ViewChild('contentWrapper') contentWrapper: ElementRef;\n\n    @Input()\n    get markdownText(): string | null {\n        return this._markdownText;\n    }\n\n    set markdownText(value: string | null) {\n        if (value && this.markdownText !== value) {\n            this.resultHtml = this.getResultHTML(value);\n        }\n\n        this._markdownText = value;\n    }\n\n    private _markdownText: string | null = null;\n\n    resultHtml: SafeHtml = '';\n\n    constructor(\n        private markdownService: KbqMarkdownService,\n        private sanitizer: DomSanitizer,\n        private cdr: ChangeDetectorRef\n    ) {}\n\n    ngAfterContentChecked(): void {\n        if (!this.markdownText && this.contentWrapper?.nativeElement.textContent) {\n            this.resultHtml = this.getResultHTML(this.contentWrapper.nativeElement.textContent);\n            this.cdr.detectChanges();\n        }\n    }\n\n    private getResultHTML(value): SafeHtml {\n        return this.sanitizer.bypassSecurityTrustHtml(this.markdownService.parseToHtml(value));\n    }\n}\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { KbqCommonModule } from '@koobiq/components/core';\nimport { KbqMarkdown } from './markdown.component';\nimport { KbqMarkdownService } from './markdown.service';\n\n@NgModule({\n    imports: [CommonModule, A11yModule, KbqCommonModule, FormsModule],\n    exports: [KbqMarkdown],\n    declarations: [KbqMarkdown],\n    providers: [KbqMarkdownService]\n})\nexport class KbqMarkdownModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.KbqMarkdownService"],"mappings":"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"}

package/fesm2022/koobiq-components-modal.mjs

@@ -5,7 +5,7 @@ import { OverlayRef, OverlayModule } from '@angular/cdk/overlay';
 import * as i4 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Optional, SkipSelf, Pipe, EventEmitter, TemplateRef, Type, Injector, ViewContainerRef, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Input, Output, ViewChild, ViewChildren, Directive, NgModule } from '@angular/core';
+import { Injectable, Optional, SkipSelf, Pipe, EventEmitter, TemplateRef, Type, Injector, ViewContainerRef, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Input, Output, ViewChild, ViewChildren, Directive, InjectionToken, NgModule } from '@angular/core';
 import { ESCAPE, ENTER } from '@koobiq/cdk/keycodes';
 import { KbqComponentColors } from '@koobiq/components/core';
 import { take, filter } from 'rxjs/operators';
@@ -576,13 +576,13 @@ class KbqModalComponent extends KbqModalRef {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqModalComponent, deps: [{ token: i1.Overlay }, { token: i0.Renderer2 }, { token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: KbqModalControlService }, { token: i0.ChangeDetectorRef }, { token: i3.FocusMonitor }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqModalComponent, selector: "kbq-modal", inputs: { kbqModalType: "kbqModalType", kbqComponent: "kbqComponent", kbqContent: "kbqContent", kbqComponentParams: "kbqComponentParams", kbqFooter: "kbqFooter", kbqVisible: "kbqVisible", kbqWidth: "kbqWidth", kbqSize: "kbqSize", kbqWrapClassName: "kbqWrapClassName", kbqClassName: "kbqClassName", kbqStyle: "kbqStyle", kbqTitle: "kbqTitle", kbqCloseByESC: "kbqCloseByESC", kbqClosable: "kbqClosable", kbqMask: "kbqMask", kbqMaskClosable: "kbqMaskClosable", kbqMaskStyle: "kbqMaskStyle", kbqBodyStyle: "kbqBodyStyle", kbqOkText: "kbqOkText", kbqOkType: "kbqOkType", kbqRestoreFocus: "kbqRestoreFocus", kbqOkLoading: "kbqOkLoading", kbqOnOk: "kbqOnOk", kbqCancelText: "kbqCancelText", kbqCancelLoading: "kbqCancelLoading", kbqOnCancel: "kbqOnCancel", kbqGetContainer: "kbqGetContainer" }, outputs: { kbqVisibleChange: "kbqVisibleChange", kbqAfterOpen: "kbqAfterOpen", kbqAfterClose: "kbqAfterClose", kbqOnOk: "kbqOnOk", kbqOnCancel: "kbqOnCancel" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, static: true }, { propertyName: "bodyContainer", first: true, predicate: ["bodyContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "modalBody", first: true, predicate: ["modalBody"], descendants: true }, { propertyName: "autoFocusedButtons", predicate: ["autoFocusedButton"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n    <ng-content />\n</ng-template>\n\n<div>\n    <div\n        *ngIf=\"kbqMask\"\n        class=\"kbq-modal-mask\"\n        [class.kbq-modal-mask-hidden]=\"hidden\"\n        [ngClass]=\"maskAnimationClassMap\"\n        [ngStyle]=\"kbqMaskStyle\"\n    ></div>\n\n    <div\n        tabindex=\"-1\"\n        class=\"kbq-modal-wrap {{ kbqWrapClassName }}\"\n        [style.display]=\"hidden ? 'none' : ''\"\n        (mousedown)=\"onClickMask($event)\"\n    >\n        <div\n            #modalContainer\n            class=\"kbq-modal {{ kbqClassName }} kbq-modal_{{ kbqSize }}\"\n            [class.kbq-modal_no-footer]=\"!kbqFooter\"\n            [ngClass]=\"modalAnimationClassMap\"\n            [ngStyle]=\"kbqStyle\"\n            [style.transform-origin]=\"transformOrigin\"\n            [style.width]=\"kbqWidth | toCssUnit\"\n        >\n            <div\n                cdkTrapFocus\n                class=\"kbq-modal-content\"\n            >\n                <ng-container [ngSwitch]=\"true\">\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('default')\"\n                        [ngTemplateOutlet]=\"tplContentDefault\"\n                    />\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('confirm')\"\n                        [ngTemplateOutlet]=\"tplContentConfirm\"\n                    />\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('custom')\"\n                        [ngTemplateOutlet]=\"tplContentCustom\"\n                    />\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template #tplContentCustom>\n    <ng-container #bodyContainer />\n</ng-template>\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    <div\n        *ngIf=\"kbqTitle\"\n        kbq-title\n        class=\"kbq-modal-header\"\n        [class.kbq-modal-body_top-overflow]=\"isTopOverflow\"\n    >\n        <div class=\"kbq-modal-title\">\n            <ng-container [ngSwitch]=\"true\">\n                <ng-container\n                    *ngSwitchCase=\"isTemplateRef(kbqTitle)\"\n                    [ngTemplateOutlet]=\"$any(kbqTitle)\"\n                />\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqTitle)\">\n                    <div [innerHTML]=\"kbqTitle\"></div>\n                </ng-container>\n            </ng-container>\n        </div>\n\n        <button\n            *ngIf=\"kbqClosable\"\n            kbq-button\n            class=\"kbq-modal-close kbq-button_transparent\"\n            [color]=\"'contrast'\"\n            (click)=\"onClickCloseBtn()\"\n        >\n            <i\n                kbq-icon=\"mc-close-L_16\"\n                [color]=\"componentColors.Contrast\"\n            ></i>\n        </button>\n    </div>\n    <div\n        #modalBody\n        class=\"kbq-modal-body kbq-scrollbar\"\n        [ngStyle]=\"kbqBodyStyle\"\n        (scroll)=\"checkOverflow()\"\n    >\n        <ng-container #bodyContainer>\n            <ng-container\n                *ngIf=\"!isComponent(kbqContent)\"\n                [ngSwitch]=\"true\"\n            >\n                <ng-container\n                    *ngSwitchCase=\"isTemplateRef(kbqContent)\"\n                    [ngTemplateOutlet]=\"$any(kbqContent)\"\n                />\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqContent)\">\n                    <div [innerHTML]=\"kbqContent\"></div>\n                </ng-container>\n                <ng-container\n                    *ngSwitchDefault\n                    [ngTemplateOutlet]=\"tplOriginContent\"\n                />\n            </ng-container>\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"kbqFooter || kbqOkText || kbqCancelText\"\n        class=\"kbq-modal-footer\"\n        [class.kbq-modal-body_bottom-overflow]=\"isBottomOverflow\"\n    >\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container\n                *ngSwitchCase=\"isTemplateRef(kbqFooter)\"\n                [ngTemplateOutlet]=\"$any(kbqFooter)\"\n            />\n            <ng-container *ngSwitchCase=\"isNonEmptyString(kbqFooter)\">\n                <div [innerHTML]=\"kbqFooter\"></div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"isModalButtons(kbqFooter)\">\n                <ng-container *ngFor=\"let button of $any(kbqFooter)\">\n                    <button\n                        *ngIf=\"getButtonCallableProp(button, 'show')\"\n                        kbq-button\n                        [attr.autofocus]=\"button.autoFocus\"\n                        [attr.kbq-modal-main-action]=\"button.kbqModalMainAction\"\n                        [class.kbq-progress]=\"getButtonCallableProp(button, 'loading')\"\n                        [color]=\"button.type\"\n                        [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n                        (click)=\"onButtonClick(button)\"\n                    >\n                        {{ button.label }}\n                    </button>\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <button\n                    *ngIf=\"kbqOkText\"\n                    kbq-button\n                    [attr.autofocus]=\"true\"\n                    [color]=\"componentColors.Contrast\"\n                    (click)=\"onClickOkCancel('ok')\"\n                >\n                    {{ okText }}\n                </button>\n                <button\n                    *ngIf=\"kbqCancelText\"\n                    kbq-button\n                    (click)=\"onClickOkCancel('cancel')\"\n                >\n                    {{ cancelText }}\n                </button>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n    <div\n        class=\"kbq-modal-body\"\n        [ngStyle]=\"kbqBodyStyle\"\n    >\n        <ng-container #bodyContainer>\n            <ng-container\n                *ngIf=\"!isComponent(kbqContent)\"\n                [ngSwitch]=\"true\"\n            >\n                <ng-container\n                    *ngSwitchCase=\"isTemplateRef(kbqContent)\"\n                    [ngTemplateOutlet]=\"$any(kbqContent)\"\n                />\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqContent)\">\n                    <div [innerHTML]=\"kbqContent\"></div>\n                </ng-container>\n                <ng-container\n                    *ngSwitchDefault\n                    [ngTemplateOutlet]=\"tplOriginContent\"\n                />\n            </ng-container>\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"kbqOkText || kbqCancelText\"\n        class=\"kbq-confirm-footer\"\n    >\n        <button\n            *ngIf=\"kbqOkText\"\n            kbq-button\n            [attr.autofocus]=\"true\"\n            [color]=\"kbqOkType\"\n            (click)=\"onClickOkCancel('ok')\"\n        >\n            {{ okText }}\n        </button>\n\n        <button\n            *ngIf=\"kbqCancelText\"\n            kbq-button\n            (click)=\"onClickOkCancel('cancel')\"\n        >\n            {{ cancelText }}\n        </button>\n    </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".kbq-confirm .kbq-modal-close{display:none}.kbq-confirm .kbq-confirm-footer{display:flex;gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal{box-sizing:border-box;position:relative;top:48px;border-radius:var(--kbq-modal-size-border-radius, 8px);width:auto;margin:0 auto;list-style:none}.kbq-modal.zoom-enter,.kbq-modal.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.kbq-modal.kbq-modal_small{width:var(--kbq-modal-size-small-width, 400px)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium-width, 640px)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large-width, 960px)}.kbq-modal .kbq-modal-close{position:absolute;top:16px;right:8px}.kbq-modal-wrap{position:fixed;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.kbq-modal-content{position:relative;border-radius:var(--kbq-modal-size-border-radius, 8px);background-clip:padding-box}.kbq-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-right, 48px) var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-left, 24px)}.kbq-modal-header+.kbq-modal-body{padding-top:var(--kbq-modal-size-content-padding-top, 0)}.kbq-modal-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.kbq-modal-body{display:block;overflow-y:auto;max-height:calc(100vh - 260px);padding:var(--kbq-modal-size-content-padding-top-without-header, 24px) var(--kbq-modal-size-content-padding-horizontal, 24px) var(--kbq-modal-size-content-padding-bottom, 8px) var(--kbq-modal-size-content-padding-horizontal, 24px);word-wrap:break-word}.kbq-modal-body>*{position:relative}.kbq-modal-footer,.kbq-confirm-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-vertical, 20px) var(--kbq-modal-size-footer-padding-horizontal, 24px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal-mask{position:fixed;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i5.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i5.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i6.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "directive", type: i7.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "pipe", type: CssUnitPipe, name: "toCssUnit" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqModalComponent, selector: "kbq-modal", inputs: { kbqModalType: "kbqModalType", kbqComponent: "kbqComponent", kbqContent: "kbqContent", kbqComponentParams: "kbqComponentParams", kbqFooter: "kbqFooter", kbqVisible: "kbqVisible", kbqWidth: "kbqWidth", kbqSize: "kbqSize", kbqWrapClassName: "kbqWrapClassName", kbqClassName: "kbqClassName", kbqStyle: "kbqStyle", kbqTitle: "kbqTitle", kbqCloseByESC: "kbqCloseByESC", kbqClosable: "kbqClosable", kbqMask: "kbqMask", kbqMaskClosable: "kbqMaskClosable", kbqMaskStyle: "kbqMaskStyle", kbqBodyStyle: "kbqBodyStyle", kbqOkText: "kbqOkText", kbqOkType: "kbqOkType", kbqRestoreFocus: "kbqRestoreFocus", kbqOkLoading: "kbqOkLoading", kbqOnOk: "kbqOnOk", kbqCancelText: "kbqCancelText", kbqCancelLoading: "kbqCancelLoading", kbqOnCancel: "kbqOnCancel", kbqGetContainer: "kbqGetContainer" }, outputs: { kbqVisibleChange: "kbqVisibleChange", kbqAfterOpen: "kbqAfterOpen", kbqAfterClose: "kbqAfterClose", kbqOnOk: "kbqOnOk", kbqOnCancel: "kbqOnCancel" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, static: true }, { propertyName: "bodyContainer", first: true, predicate: ["bodyContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "modalBody", first: true, predicate: ["modalBody"], descendants: true }, { propertyName: "autoFocusedButtons", predicate: ["autoFocusedButton"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n    <ng-content />\n</ng-template>\n\n<div>\n    <div\n        *ngIf=\"kbqMask\"\n        class=\"kbq-modal-mask\"\n        [class.kbq-modal-mask-hidden]=\"hidden\"\n        [ngClass]=\"maskAnimationClassMap\"\n        [ngStyle]=\"kbqMaskStyle\"\n    ></div>\n\n    <div\n        tabindex=\"-1\"\n        class=\"kbq-modal-wrap {{ kbqWrapClassName }}\"\n        [style.display]=\"hidden ? 'none' : ''\"\n        (mousedown)=\"onClickMask($event)\"\n    >\n        <div\n            #modalContainer\n            class=\"kbq-modal {{ kbqClassName }} kbq-modal_{{ kbqSize }}\"\n            [class.kbq-modal_no-footer]=\"!kbqFooter\"\n            [ngClass]=\"modalAnimationClassMap\"\n            [ngStyle]=\"kbqStyle\"\n            [style.transform-origin]=\"transformOrigin\"\n            [style.width]=\"kbqWidth | toCssUnit\"\n        >\n            <div\n                cdkTrapFocus\n                class=\"kbq-modal-content\"\n            >\n                <ng-container [ngSwitch]=\"true\">\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('default')\"\n                        [ngTemplateOutlet]=\"tplContentDefault\"\n                    />\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('confirm')\"\n                        [ngTemplateOutlet]=\"tplContentConfirm\"\n                    />\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('custom')\"\n                        [ngTemplateOutlet]=\"tplContentCustom\"\n                    />\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template #tplContentCustom>\n    <ng-container #bodyContainer />\n</ng-template>\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    <div\n        *ngIf=\"kbqTitle\"\n        kbq-title\n        class=\"kbq-modal-header\"\n        [class.kbq-modal-body_top-overflow]=\"isTopOverflow\"\n    >\n        <div class=\"kbq-modal-title\">\n            <ng-container [ngSwitch]=\"true\">\n                <ng-container\n                    *ngSwitchCase=\"isTemplateRef(kbqTitle)\"\n                    [ngTemplateOutlet]=\"$any(kbqTitle)\"\n                />\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqTitle)\">\n                    <div [innerHTML]=\"kbqTitle\"></div>\n                </ng-container>\n            </ng-container>\n        </div>\n\n        <button\n            *ngIf=\"kbqClosable\"\n            kbq-button\n            class=\"kbq-modal-close kbq-button_transparent\"\n            [color]=\"'contrast'\"\n            (click)=\"onClickCloseBtn()\"\n        >\n            <i\n                kbq-icon=\"mc-close-L_16\"\n                [color]=\"componentColors.Contrast\"\n            ></i>\n        </button>\n    </div>\n    <div\n        #modalBody\n        class=\"kbq-modal-body kbq-scrollbar\"\n        [ngStyle]=\"kbqBodyStyle\"\n        (scroll)=\"checkOverflow()\"\n    >\n        <ng-container #bodyContainer>\n            <ng-container\n                *ngIf=\"!isComponent(kbqContent)\"\n                [ngSwitch]=\"true\"\n            >\n                <ng-container\n                    *ngSwitchCase=\"isTemplateRef(kbqContent)\"\n                    [ngTemplateOutlet]=\"$any(kbqContent)\"\n                />\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqContent)\">\n                    <div [innerHTML]=\"kbqContent\"></div>\n                </ng-container>\n                <ng-container\n                    *ngSwitchDefault\n                    [ngTemplateOutlet]=\"tplOriginContent\"\n                />\n            </ng-container>\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"kbqFooter || kbqOkText || kbqCancelText\"\n        class=\"kbq-modal-footer\"\n        [class.kbq-modal-body_bottom-overflow]=\"isBottomOverflow\"\n    >\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container\n                *ngSwitchCase=\"isTemplateRef(kbqFooter)\"\n                [ngTemplateOutlet]=\"$any(kbqFooter)\"\n            />\n            <ng-container *ngSwitchCase=\"isNonEmptyString(kbqFooter)\">\n                <div [innerHTML]=\"kbqFooter\"></div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"isModalButtons(kbqFooter)\">\n                <ng-container *ngFor=\"let button of $any(kbqFooter)\">\n                    <button\n                        *ngIf=\"getButtonCallableProp(button, 'show')\"\n                        kbq-button\n                        [attr.autofocus]=\"button.autoFocus\"\n                        [attr.kbq-modal-main-action]=\"button.kbqModalMainAction\"\n                        [class.kbq-progress]=\"getButtonCallableProp(button, 'loading')\"\n                        [color]=\"button.type\"\n                        [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n                        (click)=\"onButtonClick(button)\"\n                    >\n                        {{ button.label }}\n                    </button>\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <button\n                    *ngIf=\"kbqOkText\"\n                    kbq-button\n                    [attr.autofocus]=\"true\"\n                    [color]=\"componentColors.Contrast\"\n                    (click)=\"onClickOkCancel('ok')\"\n                >\n                    {{ okText }}\n                </button>\n                <button\n                    *ngIf=\"kbqCancelText\"\n                    kbq-button\n                    (click)=\"onClickOkCancel('cancel')\"\n                >\n                    {{ cancelText }}\n                </button>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n    <div\n        class=\"kbq-modal-body\"\n        [ngStyle]=\"kbqBodyStyle\"\n    >\n        <ng-container #bodyContainer>\n            <ng-container\n                *ngIf=\"!isComponent(kbqContent)\"\n                [ngSwitch]=\"true\"\n            >\n                <ng-container\n                    *ngSwitchCase=\"isTemplateRef(kbqContent)\"\n                    [ngTemplateOutlet]=\"$any(kbqContent)\"\n                />\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqContent)\">\n                    <div [innerHTML]=\"kbqContent\"></div>\n                </ng-container>\n                <ng-container\n                    *ngSwitchDefault\n                    [ngTemplateOutlet]=\"tplOriginContent\"\n                />\n            </ng-container>\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"kbqOkText || kbqCancelText\"\n        class=\"kbq-confirm-footer\"\n    >\n        <button\n            *ngIf=\"kbqOkText\"\n            kbq-button\n            [attr.autofocus]=\"true\"\n            [color]=\"kbqOkType\"\n            (click)=\"onClickOkCancel('ok')\"\n        >\n            {{ okText }}\n        </button>\n\n        <button\n            *ngIf=\"kbqCancelText\"\n            kbq-button\n            (click)=\"onClickOkCancel('cancel')\"\n        >\n            {{ cancelText }}\n        </button>\n    </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".kbq-confirm .kbq-modal-close{display:none}.kbq-confirm .kbq-confirm-footer{display:flex;gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal{box-sizing:border-box;position:relative;top:48px;border-radius:var(--kbq-modal-size-border-radius, 8px);width:auto;margin:0 auto;list-style:none}.kbq-modal.zoom-enter,.kbq-modal.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.kbq-modal.kbq-modal_small{width:var(--kbq-modal-size-small-width, 400px)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium-width, 640px)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large-width, 960px)}.kbq-modal .kbq-modal-close{position:absolute;top:16px;right:8px}.kbq-modal-wrap{position:fixed;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.kbq-modal-content{position:relative;border-radius:var(--kbq-modal-size-border-radius, 8px);background-clip:padding-box}.kbq-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-right, 48px) var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-left, 24px)}.kbq-modal-header+.kbq-modal-body{padding-top:var(--kbq-modal-size-content-padding-top, 0)}.kbq-modal-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.kbq-modal-body{display:block;overflow-y:auto;max-height:calc(100vh - 260px);padding:var(--kbq-modal-size-content-padding-top-without-header, 24px) var(--kbq-modal-size-content-padding-horizontal, 24px) var(--kbq-modal-size-content-padding-bottom, 8px) var(--kbq-modal-size-content-padding-horizontal, 24px);word-wrap:break-word}.kbq-modal-body>*{position:relative}.kbq-modal-footer,.kbq-confirm-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-vertical, 20px) var(--kbq-modal-size-footer-padding-horizontal, 24px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal-mask{position:fixed;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}.kbq-modal{background:var(--kbq-modal-container-background, );box-shadow:var(--kbq-modal-container-box-shadow, )}.kbq-modal .kbq-modal-header .kbq-modal-title{color:var(--kbq-modal-header-text-color, )}.kbq-modal .kbq-modal-header .kbq-modal-close{color:var(--kbq-modal-close-button-color, )}.kbq-modal .kbq-modal-content{color:var(--kbq-modal-content-text-color, )}.kbq-modal .kbq-modal-header.kbq-modal-body_top-overflow{box-shadow:var(--kbq-modal-body-top-shadow, )}.kbq-modal .kbq-modal-footer.kbq-modal-body_bottom-overflow{box-shadow:var(--kbq-modal-body-bottom-shadow, )}.kbq-modal-mask{background-color:var(--kbq-modal-overlay-background, )}.kbq-modal-title{font-size:var(--kbq-modal-font-header-font-size, 20px);font-weight:var(--kbq-modal-font-header-font-weight, 700);line-height:var(--kbq-modal-font-header-line-height, 28px);font-family:var(--kbq-modal-font-header-font-family, \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-modal-font-header-text-transform, );font-feature-settings:var(--kbq-modal-font-header-font-feature-settings, \"calt\", \"kern\", \"liga\");letter-spacing:var(--kbq-modal-font-header-letter-spacing, normal)}.kbq-modal-body{font-size:var(--kbq-modal-font-content-font-size, 14px);font-weight:var(--kbq-modal-font-content-font-weight, normal);line-height:var(--kbq-modal-font-content-line-height, 20px);font-family:var(--kbq-modal-font-content-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-modal-font-content-text-transform, );font-feature-settings:var(--kbq-modal-font-content-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-modal-font-content-letter-spacing, -.006em)}\n", ".kbq-modal{--kbq-modal-size-small-width: 400px;--kbq-modal-size-medium-width: 640px;--kbq-modal-size-large-width: 960px;--kbq-modal-size-border-radius: 8px;--kbq-modal-size-header-padding-vertical: 16px;--kbq-modal-size-header-padding-left: 24px;--kbq-modal-size-header-padding-right: 48px;--kbq-modal-size-close-button-margin-left: 8px;--kbq-modal-size-content-padding-horizontal: 24px;--kbq-modal-size-content-padding-top: 0;--kbq-modal-size-content-padding-bottom: 8px;--kbq-modal-size-content-padding-top-without-header: 24px;--kbq-modal-size-content-padding-bottom-without-footer: 40px;--kbq-modal-size-footer-padding-horizontal: 24px;--kbq-modal-size-footer-padding-vertical: 20px;--kbq-modal-size-footer-content-gap-horizontal: 16px;--kbq-modal-font-header-font-size: 20px;--kbq-modal-font-header-line-height: 28px;--kbq-modal-font-header-letter-spacing: normal;--kbq-modal-font-header-font-weight: 700;--kbq-modal-font-header-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-modal-font-header-text-transform: null;--kbq-modal-font-header-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-modal-font-content-font-size: 14px;--kbq-modal-font-content-line-height: 20px;--kbq-modal-font-content-letter-spacing: -.006em;--kbq-modal-font-content-font-weight: normal;--kbq-modal-font-content-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-modal-font-content-text-transform: null;--kbq-modal-font-content-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-modal-overlay-background: hsla(229, 15%, 20%, 32%);--kbq-modal-container-background: hsla(229, 15%, 100%, 100%);--kbq-modal-container-box-shadow: 0 0 0 1px hsla(229, 15%, 6%, 3%), 0 3px 16px hsla(229, 15%, 6%, 6%), 0 4px 32px hsla(229, 15%, 6%, 12%);--kbq-modal-close-button-color: hsla(229, 15%, 15%, 100%);--kbq-modal-header-text-color: hsla(229, 15%, 15%, 100%);--kbq-modal-content-text-color: hsla(229, 15%, 15%, 100%)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-modal-overlay-background: hsla(229, 15%, 6%, 64%);--kbq-modal-container-background: hsla(229, 15%, 15%, 100%);--kbq-modal-container-box-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);--kbq-modal-close-button-color: hsla(229, 15%, 80%, 100%);--kbq-modal-header-text-color: hsla(229, 15%, 80%, 100%);--kbq-modal-content-text-color: hsla(229, 15%, 80%, 100%)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i5.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i5.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i6.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "directive", type: i7.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "pipe", type: CssUnitPipe, name: "toCssUnit" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '(keydown)': 'onKeyDown($event)'
-                    }, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n    <ng-content />\n</ng-template>\n\n<div>\n    <div\n        *ngIf=\"kbqMask\"\n        class=\"kbq-modal-mask\"\n        [class.kbq-modal-mask-hidden]=\"hidden\"\n        [ngClass]=\"maskAnimationClassMap\"\n        [ngStyle]=\"kbqMaskStyle\"\n    ></div>\n\n    <div\n        tabindex=\"-1\"\n        class=\"kbq-modal-wrap {{ kbqWrapClassName }}\"\n        [style.display]=\"hidden ? 'none' : ''\"\n        (mousedown)=\"onClickMask($event)\"\n    >\n        <div\n            #modalContainer\n            class=\"kbq-modal {{ kbqClassName }} kbq-modal_{{ kbqSize }}\"\n            [class.kbq-modal_no-footer]=\"!kbqFooter\"\n            [ngClass]=\"modalAnimationClassMap\"\n            [ngStyle]=\"kbqStyle\"\n            [style.transform-origin]=\"transformOrigin\"\n            [style.width]=\"kbqWidth | toCssUnit\"\n        >\n            <div\n                cdkTrapFocus\n                class=\"kbq-modal-content\"\n            >\n                <ng-container [ngSwitch]=\"true\">\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('default')\"\n                        [ngTemplateOutlet]=\"tplContentDefault\"\n                    />\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('confirm')\"\n                        [ngTemplateOutlet]=\"tplContentConfirm\"\n                    />\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('custom')\"\n                        [ngTemplateOutlet]=\"tplContentCustom\"\n                    />\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template #tplContentCustom>\n    <ng-container #bodyContainer />\n</ng-template>\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    <div\n        *ngIf=\"kbqTitle\"\n        kbq-title\n        class=\"kbq-modal-header\"\n        [class.kbq-modal-body_top-overflow]=\"isTopOverflow\"\n    >\n        <div class=\"kbq-modal-title\">\n            <ng-container [ngSwitch]=\"true\">\n                <ng-container\n                    *ngSwitchCase=\"isTemplateRef(kbqTitle)\"\n                    [ngTemplateOutlet]=\"$any(kbqTitle)\"\n                />\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqTitle)\">\n                    <div [innerHTML]=\"kbqTitle\"></div>\n                </ng-container>\n            </ng-container>\n        </div>\n\n        <button\n            *ngIf=\"kbqClosable\"\n            kbq-button\n            class=\"kbq-modal-close kbq-button_transparent\"\n            [color]=\"'contrast'\"\n            (click)=\"onClickCloseBtn()\"\n        >\n            <i\n                kbq-icon=\"mc-close-L_16\"\n                [color]=\"componentColors.Contrast\"\n            ></i>\n        </button>\n    </div>\n    <div\n        #modalBody\n        class=\"kbq-modal-body kbq-scrollbar\"\n        [ngStyle]=\"kbqBodyStyle\"\n        (scroll)=\"checkOverflow()\"\n    >\n        <ng-container #bodyContainer>\n            <ng-container\n                *ngIf=\"!isComponent(kbqContent)\"\n                [ngSwitch]=\"true\"\n            >\n                <ng-container\n                    *ngSwitchCase=\"isTemplateRef(kbqContent)\"\n                    [ngTemplateOutlet]=\"$any(kbqContent)\"\n                />\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqContent)\">\n                    <div [innerHTML]=\"kbqContent\"></div>\n                </ng-container>\n                <ng-container\n                    *ngSwitchDefault\n                    [ngTemplateOutlet]=\"tplOriginContent\"\n                />\n            </ng-container>\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"kbqFooter || kbqOkText || kbqCancelText\"\n        class=\"kbq-modal-footer\"\n        [class.kbq-modal-body_bottom-overflow]=\"isBottomOverflow\"\n    >\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container\n                *ngSwitchCase=\"isTemplateRef(kbqFooter)\"\n                [ngTemplateOutlet]=\"$any(kbqFooter)\"\n            />\n            <ng-container *ngSwitchCase=\"isNonEmptyString(kbqFooter)\">\n                <div [innerHTML]=\"kbqFooter\"></div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"isModalButtons(kbqFooter)\">\n                <ng-container *ngFor=\"let button of $any(kbqFooter)\">\n                    <button\n                        *ngIf=\"getButtonCallableProp(button, 'show')\"\n                        kbq-button\n                        [attr.autofocus]=\"button.autoFocus\"\n                        [attr.kbq-modal-main-action]=\"button.kbqModalMainAction\"\n                        [class.kbq-progress]=\"getButtonCallableProp(button, 'loading')\"\n                        [color]=\"button.type\"\n                        [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n                        (click)=\"onButtonClick(button)\"\n                    >\n                        {{ button.label }}\n                    </button>\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <button\n                    *ngIf=\"kbqOkText\"\n                    kbq-button\n                    [attr.autofocus]=\"true\"\n                    [color]=\"componentColors.Contrast\"\n                    (click)=\"onClickOkCancel('ok')\"\n                >\n                    {{ okText }}\n                </button>\n                <button\n                    *ngIf=\"kbqCancelText\"\n                    kbq-button\n                    (click)=\"onClickOkCancel('cancel')\"\n                >\n                    {{ cancelText }}\n                </button>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n    <div\n        class=\"kbq-modal-body\"\n        [ngStyle]=\"kbqBodyStyle\"\n    >\n        <ng-container #bodyContainer>\n            <ng-container\n                *ngIf=\"!isComponent(kbqContent)\"\n                [ngSwitch]=\"true\"\n            >\n                <ng-container\n                    *ngSwitchCase=\"isTemplateRef(kbqContent)\"\n                    [ngTemplateOutlet]=\"$any(kbqContent)\"\n                />\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqContent)\">\n                    <div [innerHTML]=\"kbqContent\"></div>\n                </ng-container>\n                <ng-container\n                    *ngSwitchDefault\n                    [ngTemplateOutlet]=\"tplOriginContent\"\n                />\n            </ng-container>\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"kbqOkText || kbqCancelText\"\n        class=\"kbq-confirm-footer\"\n    >\n        <button\n            *ngIf=\"kbqOkText\"\n            kbq-button\n            [attr.autofocus]=\"true\"\n            [color]=\"kbqOkType\"\n            (click)=\"onClickOkCancel('ok')\"\n        >\n            {{ okText }}\n        </button>\n\n        <button\n            *ngIf=\"kbqCancelText\"\n            kbq-button\n            (click)=\"onClickOkCancel('cancel')\"\n        >\n            {{ cancelText }}\n        </button>\n    </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".kbq-confirm .kbq-modal-close{display:none}.kbq-confirm .kbq-confirm-footer{display:flex;gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal{box-sizing:border-box;position:relative;top:48px;border-radius:var(--kbq-modal-size-border-radius, 8px);width:auto;margin:0 auto;list-style:none}.kbq-modal.zoom-enter,.kbq-modal.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.kbq-modal.kbq-modal_small{width:var(--kbq-modal-size-small-width, 400px)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium-width, 640px)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large-width, 960px)}.kbq-modal .kbq-modal-close{position:absolute;top:16px;right:8px}.kbq-modal-wrap{position:fixed;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.kbq-modal-content{position:relative;border-radius:var(--kbq-modal-size-border-radius, 8px);background-clip:padding-box}.kbq-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-right, 48px) var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-left, 24px)}.kbq-modal-header+.kbq-modal-body{padding-top:var(--kbq-modal-size-content-padding-top, 0)}.kbq-modal-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.kbq-modal-body{display:block;overflow-y:auto;max-height:calc(100vh - 260px);padding:var(--kbq-modal-size-content-padding-top-without-header, 24px) var(--kbq-modal-size-content-padding-horizontal, 24px) var(--kbq-modal-size-content-padding-bottom, 8px) var(--kbq-modal-size-content-padding-horizontal, 24px);word-wrap:break-word}.kbq-modal-body>*{position:relative}.kbq-modal-footer,.kbq-confirm-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-vertical, 20px) var(--kbq-modal-size-footer-padding-horizontal, 24px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal-mask{position:fixed;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}\n"] }]
+                    }, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n    <ng-content />\n</ng-template>\n\n<div>\n    <div\n        *ngIf=\"kbqMask\"\n        class=\"kbq-modal-mask\"\n        [class.kbq-modal-mask-hidden]=\"hidden\"\n        [ngClass]=\"maskAnimationClassMap\"\n        [ngStyle]=\"kbqMaskStyle\"\n    ></div>\n\n    <div\n        tabindex=\"-1\"\n        class=\"kbq-modal-wrap {{ kbqWrapClassName }}\"\n        [style.display]=\"hidden ? 'none' : ''\"\n        (mousedown)=\"onClickMask($event)\"\n    >\n        <div\n            #modalContainer\n            class=\"kbq-modal {{ kbqClassName }} kbq-modal_{{ kbqSize }}\"\n            [class.kbq-modal_no-footer]=\"!kbqFooter\"\n            [ngClass]=\"modalAnimationClassMap\"\n            [ngStyle]=\"kbqStyle\"\n            [style.transform-origin]=\"transformOrigin\"\n            [style.width]=\"kbqWidth | toCssUnit\"\n        >\n            <div\n                cdkTrapFocus\n                class=\"kbq-modal-content\"\n            >\n                <ng-container [ngSwitch]=\"true\">\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('default')\"\n                        [ngTemplateOutlet]=\"tplContentDefault\"\n                    />\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('confirm')\"\n                        [ngTemplateOutlet]=\"tplContentConfirm\"\n                    />\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('custom')\"\n                        [ngTemplateOutlet]=\"tplContentCustom\"\n                    />\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template #tplContentCustom>\n    <ng-container #bodyContainer />\n</ng-template>\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    <div\n        *ngIf=\"kbqTitle\"\n        kbq-title\n        class=\"kbq-modal-header\"\n        [class.kbq-modal-body_top-overflow]=\"isTopOverflow\"\n    >\n        <div class=\"kbq-modal-title\">\n            <ng-container [ngSwitch]=\"true\">\n                <ng-container\n                    *ngSwitchCase=\"isTemplateRef(kbqTitle)\"\n                    [ngTemplateOutlet]=\"$any(kbqTitle)\"\n                />\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqTitle)\">\n                    <div [innerHTML]=\"kbqTitle\"></div>\n                </ng-container>\n            </ng-container>\n        </div>\n\n        <button\n            *ngIf=\"kbqClosable\"\n            kbq-button\n            class=\"kbq-modal-close kbq-button_transparent\"\n            [color]=\"'contrast'\"\n            (click)=\"onClickCloseBtn()\"\n        >\n            <i\n                kbq-icon=\"mc-close-L_16\"\n                [color]=\"componentColors.Contrast\"\n            ></i>\n        </button>\n    </div>\n    <div\n        #modalBody\n        class=\"kbq-modal-body kbq-scrollbar\"\n        [ngStyle]=\"kbqBodyStyle\"\n        (scroll)=\"checkOverflow()\"\n    >\n        <ng-container #bodyContainer>\n            <ng-container\n                *ngIf=\"!isComponent(kbqContent)\"\n                [ngSwitch]=\"true\"\n            >\n                <ng-container\n                    *ngSwitchCase=\"isTemplateRef(kbqContent)\"\n                    [ngTemplateOutlet]=\"$any(kbqContent)\"\n                />\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqContent)\">\n                    <div [innerHTML]=\"kbqContent\"></div>\n                </ng-container>\n                <ng-container\n                    *ngSwitchDefault\n                    [ngTemplateOutlet]=\"tplOriginContent\"\n                />\n            </ng-container>\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"kbqFooter || kbqOkText || kbqCancelText\"\n        class=\"kbq-modal-footer\"\n        [class.kbq-modal-body_bottom-overflow]=\"isBottomOverflow\"\n    >\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container\n                *ngSwitchCase=\"isTemplateRef(kbqFooter)\"\n                [ngTemplateOutlet]=\"$any(kbqFooter)\"\n            />\n            <ng-container *ngSwitchCase=\"isNonEmptyString(kbqFooter)\">\n                <div [innerHTML]=\"kbqFooter\"></div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"isModalButtons(kbqFooter)\">\n                <ng-container *ngFor=\"let button of $any(kbqFooter)\">\n                    <button\n                        *ngIf=\"getButtonCallableProp(button, 'show')\"\n                        kbq-button\n                        [attr.autofocus]=\"button.autoFocus\"\n                        [attr.kbq-modal-main-action]=\"button.kbqModalMainAction\"\n                        [class.kbq-progress]=\"getButtonCallableProp(button, 'loading')\"\n                        [color]=\"button.type\"\n                        [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n                        (click)=\"onButtonClick(button)\"\n                    >\n                        {{ button.label }}\n                    </button>\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <button\n                    *ngIf=\"kbqOkText\"\n                    kbq-button\n                    [attr.autofocus]=\"true\"\n                    [color]=\"componentColors.Contrast\"\n                    (click)=\"onClickOkCancel('ok')\"\n                >\n                    {{ okText }}\n                </button>\n                <button\n                    *ngIf=\"kbqCancelText\"\n                    kbq-button\n                    (click)=\"onClickOkCancel('cancel')\"\n                >\n                    {{ cancelText }}\n                </button>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n    <div\n        class=\"kbq-modal-body\"\n        [ngStyle]=\"kbqBodyStyle\"\n    >\n        <ng-container #bodyContainer>\n            <ng-container\n                *ngIf=\"!isComponent(kbqContent)\"\n                [ngSwitch]=\"true\"\n            >\n                <ng-container\n                    *ngSwitchCase=\"isTemplateRef(kbqContent)\"\n                    [ngTemplateOutlet]=\"$any(kbqContent)\"\n                />\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqContent)\">\n                    <div [innerHTML]=\"kbqContent\"></div>\n                </ng-container>\n                <ng-container\n                    *ngSwitchDefault\n                    [ngTemplateOutlet]=\"tplOriginContent\"\n                />\n            </ng-container>\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"kbqOkText || kbqCancelText\"\n        class=\"kbq-confirm-footer\"\n    >\n        <button\n            *ngIf=\"kbqOkText\"\n            kbq-button\n            [attr.autofocus]=\"true\"\n            [color]=\"kbqOkType\"\n            (click)=\"onClickOkCancel('ok')\"\n        >\n            {{ okText }}\n        </button>\n\n        <button\n            *ngIf=\"kbqCancelText\"\n            kbq-button\n            (click)=\"onClickOkCancel('cancel')\"\n        >\n            {{ cancelText }}\n        </button>\n    </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".kbq-confirm .kbq-modal-close{display:none}.kbq-confirm .kbq-confirm-footer{display:flex;gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal{box-sizing:border-box;position:relative;top:48px;border-radius:var(--kbq-modal-size-border-radius, 8px);width:auto;margin:0 auto;list-style:none}.kbq-modal.zoom-enter,.kbq-modal.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.kbq-modal.kbq-modal_small{width:var(--kbq-modal-size-small-width, 400px)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium-width, 640px)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large-width, 960px)}.kbq-modal .kbq-modal-close{position:absolute;top:16px;right:8px}.kbq-modal-wrap{position:fixed;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.kbq-modal-content{position:relative;border-radius:var(--kbq-modal-size-border-radius, 8px);background-clip:padding-box}.kbq-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-right, 48px) var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-left, 24px)}.kbq-modal-header+.kbq-modal-body{padding-top:var(--kbq-modal-size-content-padding-top, 0)}.kbq-modal-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.kbq-modal-body{display:block;overflow-y:auto;max-height:calc(100vh - 260px);padding:var(--kbq-modal-size-content-padding-top-without-header, 24px) var(--kbq-modal-size-content-padding-horizontal, 24px) var(--kbq-modal-size-content-padding-bottom, 8px) var(--kbq-modal-size-content-padding-horizontal, 24px);word-wrap:break-word}.kbq-modal-body>*{position:relative}.kbq-modal-footer,.kbq-confirm-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-vertical, 20px) var(--kbq-modal-size-footer-padding-horizontal, 24px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal-mask{position:fixed;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}.kbq-modal{background:var(--kbq-modal-container-background, );box-shadow:var(--kbq-modal-container-box-shadow, )}.kbq-modal .kbq-modal-header .kbq-modal-title{color:var(--kbq-modal-header-text-color, )}.kbq-modal .kbq-modal-header .kbq-modal-close{color:var(--kbq-modal-close-button-color, )}.kbq-modal .kbq-modal-content{color:var(--kbq-modal-content-text-color, )}.kbq-modal .kbq-modal-header.kbq-modal-body_top-overflow{box-shadow:var(--kbq-modal-body-top-shadow, )}.kbq-modal .kbq-modal-footer.kbq-modal-body_bottom-overflow{box-shadow:var(--kbq-modal-body-bottom-shadow, )}.kbq-modal-mask{background-color:var(--kbq-modal-overlay-background, )}.kbq-modal-title{font-size:var(--kbq-modal-font-header-font-size, 20px);font-weight:var(--kbq-modal-font-header-font-weight, 700);line-height:var(--kbq-modal-font-header-line-height, 28px);font-family:var(--kbq-modal-font-header-font-family, \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-modal-font-header-text-transform, );font-feature-settings:var(--kbq-modal-font-header-font-feature-settings, \"calt\", \"kern\", \"liga\");letter-spacing:var(--kbq-modal-font-header-letter-spacing, normal)}.kbq-modal-body{font-size:var(--kbq-modal-font-content-font-size, 14px);font-weight:var(--kbq-modal-font-content-font-weight, normal);line-height:var(--kbq-modal-font-content-line-height, 20px);font-family:var(--kbq-modal-font-content-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-modal-font-content-text-transform, );font-feature-settings:var(--kbq-modal-font-content-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-modal-font-content-letter-spacing, -.006em)}\n", ".kbq-modal{--kbq-modal-size-small-width: 400px;--kbq-modal-size-medium-width: 640px;--kbq-modal-size-large-width: 960px;--kbq-modal-size-border-radius: 8px;--kbq-modal-size-header-padding-vertical: 16px;--kbq-modal-size-header-padding-left: 24px;--kbq-modal-size-header-padding-right: 48px;--kbq-modal-size-close-button-margin-left: 8px;--kbq-modal-size-content-padding-horizontal: 24px;--kbq-modal-size-content-padding-top: 0;--kbq-modal-size-content-padding-bottom: 8px;--kbq-modal-size-content-padding-top-without-header: 24px;--kbq-modal-size-content-padding-bottom-without-footer: 40px;--kbq-modal-size-footer-padding-horizontal: 24px;--kbq-modal-size-footer-padding-vertical: 20px;--kbq-modal-size-footer-content-gap-horizontal: 16px;--kbq-modal-font-header-font-size: 20px;--kbq-modal-font-header-line-height: 28px;--kbq-modal-font-header-letter-spacing: normal;--kbq-modal-font-header-font-weight: 700;--kbq-modal-font-header-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-modal-font-header-text-transform: null;--kbq-modal-font-header-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-modal-font-content-font-size: 14px;--kbq-modal-font-content-line-height: 20px;--kbq-modal-font-content-letter-spacing: -.006em;--kbq-modal-font-content-font-weight: normal;--kbq-modal-font-content-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-modal-font-content-text-transform: null;--kbq-modal-font-content-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-modal-overlay-background: hsla(229, 15%, 20%, 32%);--kbq-modal-container-background: hsla(229, 15%, 100%, 100%);--kbq-modal-container-box-shadow: 0 0 0 1px hsla(229, 15%, 6%, 3%), 0 3px 16px hsla(229, 15%, 6%, 6%), 0 4px 32px hsla(229, 15%, 6%, 12%);--kbq-modal-close-button-color: hsla(229, 15%, 15%, 100%);--kbq-modal-header-text-color: hsla(229, 15%, 15%, 100%);--kbq-modal-content-text-color: hsla(229, 15%, 15%, 100%)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-modal-overlay-background: hsla(229, 15%, 6%, 64%);--kbq-modal-container-background: hsla(229, 15%, 15%, 100%);--kbq-modal-container-box-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);--kbq-modal-close-button-color: hsla(229, 15%, 80%, 100%);--kbq-modal-header-text-color: hsla(229, 15%, 80%, 100%);--kbq-modal-content-text-color: hsla(229, 15%, 80%, 100%)}\n"] }]
         }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.Renderer2 }, { type: i0.ComponentFactoryResolver }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: KbqModalControlService }, { type: i0.ChangeDetectorRef }, { type: i3.FocusMonitor }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -736,11 +736,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                 }]
         }] });
 
+/** Injection token that can be used to access the data that was passed in to a modal. */
+const KBQ_MODAL_DATA = new InjectionToken('KbqModalData');
 // A builder used for managing service creating modals
 class ModalBuilderForService {
-    constructor(overlay, options = {}) {
+    constructor(overlay, options = {}, injector) {
         this.overlay = overlay;
         this.options = options;
+        this.injector = injector;
         this.createModal();
         if (!('kbqGetContainer' in options)) {
             options.kbqGetContainer = undefined;
@@ -774,7 +777,7 @@ class ModalBuilderForService {
     createModal() {
         this.overlayRef = this.overlay.create();
         this.overlayRef.hostElement.classList.add('kbq-modal-overlay');
-        this.modalRef = this.overlayRef.attach(new ComponentPortal(KbqModalComponent));
+        this.modalRef = this.overlayRef.attach(new ComponentPortal(KbqModalComponent, undefined, this.injector));
     }
 }
 class KbqModalService {
@@ -785,9 +788,10 @@ class KbqModalService {
     get afterAllClose() {
         return this.modalControl.afterAllClose.asObservable();
     }
-    constructor(overlay, modalControl) {
+    constructor(overlay, modalControl, injector) {
         this.overlay = overlay;
         this.modalControl = modalControl;
+        this.injector = injector;
     }
     // Closes all of the currently-open dialogs
     closeAll() {
@@ -813,7 +817,11 @@ class KbqModalService {
         if (!('kbqFooter' in options)) {
             options.kbqFooter = undefined;
         }
-        return new ModalBuilderForService(this.overlay, options).getInstance();
+        const injector = Injector.create({
+            parent: this.injector,
+            providers: [{ provide: KBQ_MODAL_DATA, useValue: options.data }]
+        });
+        return new ModalBuilderForService(this.overlay, options, injector).getInstance();
     }
     confirm(options = {}, confirmType = 'confirm') {
         if ('kbqFooter' in options) {
@@ -838,12 +846,12 @@ class KbqModalService {
     delete(options = {}) {
         return this.confirm(options, 'warn');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqModalService, deps: [{ token: i1.Overlay }, { token: KbqModalControlService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqModalService, deps: [{ token: i1.Overlay }, { token: KbqModalControlService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
     /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqModalService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqModalService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.Overlay }, { type: KbqModalControlService }] });
+        }], ctorParameters: () => [{ type: i1.Overlay }, { type: KbqModalControlService }, { type: i0.Injector }] });
 
 class KbqModalModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }