@koobiq/components 20.3.1 → 20.4.0

package/fesm2022/koobiq-components-markdown.mjs

@@ -41,6 +41,8 @@ const CLASS_PREFIX = 'kbq-markdown';
 
 /**
  * Service for converting Markdown into HTML.
+ *
+ * @docs-private
  */
 class KbqMarkdownService {
     /**
@@ -145,7 +147,7 @@ class KbqMarkdown {
         this.links.length = 0;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqMarkdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqMarkdown, isStandalone: true, selector: "kbq-markdown", inputs: { markdownText: "markdownText" }, host: { classAttribute: "kbq-markdown" }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, isSignal: true }, { propertyName: "outputWrapper", first: true, predicate: ["outputWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqMarkdown, isStandalone: true, selector: "kbq-markdown", inputs: { markdownText: "markdownText" }, host: { classAttribute: "kbq-markdown kbq-scrollbar" }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, isSignal: true }, { propertyName: "outputWrapper", first: true, predicate: ["outputWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: `
         <pre #contentWrapper class="kbq-markdown__input" ngPreserveWhitespaces><ng-content /></pre>
         <div #outputWrapper class="kbq-markdown__output" [innerHtml]="resultHtml()"></div>
     `, isInline: true, styles: ["@charset \"UTF-8\";.kbq-markdown{display:block}.kbq-markdown .kbq-markdown__input{display:none}.kbq-markdown .kbq-markdown__output{flex:1}.kbq-markdown .kbq-markdown__output>:first-child{margin-top:0}.kbq-markdown .kbq-markdown__output>:last-child{margin-bottom:0}.kbq-markdown .kbq-markdown__h1{margin-top:var(--kbq-markdown-h1-size-margin-top);margin-bottom:var(--kbq-markdown-h1-size-margin-bottom)}.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);margin-bottom:var(--kbq-markdown-h2-size-margin-bottom)}.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);margin-bottom:var(--kbq-markdown-h3-size-margin-bottom)}.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);margin-bottom:var(--kbq-markdown-h4-size-margin-bottom)}.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);margin-bottom:var(--kbq-markdown-h5-size-margin-bottom)}.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);margin-bottom:var(--kbq-markdown-h6-size-margin-bottom)}.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__p{margin-top:var(--kbq-markdown-p-size-margin-top);margin-bottom:var(--kbq-markdown-p-size-margin-bottom)}.kbq-markdown .kbq-markdown__ul,.kbq-markdown .kbq-markdown__ol{margin-top:var(--kbq-markdown-list-size-margin-top);margin-bottom:var(--kbq-markdown-list-size-margin-bottom)}.kbq-markdown .kbq-markdown__ul>li,.kbq-markdown .kbq-markdown__ol>li{margin-bottom:var(--kbq-markdown-list-size-item-margin-bottom)}.kbq-markdown .kbq-markdown__ul{position:relative;list-style:none;padding:var(--kbq-markdown-list-size-ul-padding)}.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)}.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)}.kbq-markdown .kbq-markdown__blockquote{margin-top:var(--kbq-markdown-blockquote-size-margin-top);margin-left:0;margin-bottom:var(--kbq-markdown-blockquote-size-margin-bottom);margin-right:0;border-left-width:var(--kbq-markdown-blockquote-size-line-width);border-left-style:solid;padding:var(--kbq-markdown-blockquote-size-padding)}.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);margin-bottom:var(--kbq-markdown-code-size-multiline-margin-bottom);padding:var(--kbq-markdown-code-size-multiline-padding)}.kbq-markdown .kbq-markdown__pre,.kbq-markdown .kbq-markdown__code{border-radius:var(--kbq-markdown-code-size-border-radius)}.kbq-markdown .kbq-markdown__code:not(.kbq-markdown__pre>.kbq-markdown__code){white-space:nowrap;padding:var(--kbq-markdown-code-size-inline-padding)}.kbq-markdown .kbq-markdown__img{max-width:100%;margin-top:var(--kbq-markdown-image-size-margin-top);margin-bottom:var(--kbq-markdown-image-size-margin-bottom)}.kbq-markdown .kbq-markdown__img+em{display:block;margin-top:var(--kbq-markdown-image-size-caption-margin-top);margin-bottom:var(--kbq-markdown-image-size-caption-margin-bottom)}.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);margin:var(--kbq-markdown-hr-size-margin-vertical) 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)}.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);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);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}\n", ".kbq-markdown{--kbq-markdown-bg: transparent;--kbq-markdown-h1-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-h1-size-margin-top: 0;--kbq-markdown-h1-size-margin-bottom: var(--kbq-size-l);--kbq-markdown-h2-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-h2-size-margin-top: var(--kbq-size-xxl);--kbq-markdown-h2-size-margin-bottom: var(--kbq-size-m);--kbq-markdown-h3-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-h3-size-margin-top: var(--kbq-size-xxl);--kbq-markdown-h3-size-margin-bottom: var(--kbq-size-m);--kbq-markdown-h4-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-h4-size-margin-top: var(--kbq-size-xxl);--kbq-markdown-h4-size-margin-bottom: var(--kbq-size-m);--kbq-markdown-h5-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-h5-size-margin-top: var(--kbq-size-xxl);--kbq-markdown-h5-size-margin-bottom: var(--kbq-size-s);--kbq-markdown-h6-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-h6-size-margin-top: var(--kbq-size-xxl);--kbq-markdown-h6-size-margin-bottom: var(--kbq-size-s);--kbq-markdown-p-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-p-size-margin-top: var(--kbq-size-m);--kbq-markdown-p-size-margin-bottom: var(--kbq-size-m);--kbq-markdown-list-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-list-size-margin-top: var(--kbq-size-m);--kbq-markdown-list-size-margin-bottom: var(--kbq-size-m);--kbq-markdown-list-size-margin-top-after-paragraph: calc(-1 * var(--kbq-size-s));--kbq-markdown-list-size-ol-number-padding-right: var(--kbq-size-xxs);--kbq-markdown-list-size-ul-padding: 0 0 0 var(--kbq-size-xxl);--kbq-markdown-list-size-item-margin-bottom: var(--kbq-size-xxs);--kbq-markdown-blockquote-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-blockquote-size-margin-top: var(--kbq-size-m);--kbq-markdown-blockquote-size-margin-bottom: var(--kbq-size-m);--kbq-markdown-blockquote-size-padding: var(--kbq-size-3xs) var(--kbq-size-m);--kbq-markdown-blockquote-size-line-width: var(--kbq-size-xxs);--kbq-markdown-blockquote-size-border-radius: 0;--kbq-markdown-blockquote-size-border-width: 0;--kbq-markdown-code-size-multiline-margin-top: var(--kbq-size-m);--kbq-markdown-code-size-multiline-margin-bottom: var(--kbq-size-xxl);--kbq-markdown-code-size-inline-padding: var(--kbq-size-3xs) var(--kbq-size-xs);--kbq-markdown-code-size-multiline-padding: var(--kbq-size-m) var(--kbq-size-l);--kbq-markdown-code-size-border-radius: var(--kbq-size-border-radius);--kbq-markdown-code-size-border-width: var(--kbq-size-border-width);--kbq-markdown-image-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-image-size-margin-top: var(--kbq-size-m);--kbq-markdown-image-size-margin-bottom: var(--kbq-size-m);--kbq-markdown-image-size-caption-margin-top: calc(-1 * var(--kbq-size-s));--kbq-markdown-image-size-caption-margin-bottom: var(--kbq-size-xxl);--kbq-markdown-hr-size-width: 1px;--kbq-markdown-hr-size-margin-vertical: var(--kbq-size-xxl);--kbq-markdown-table-size-border-width: var(--kbq-size-border-width);--kbq-markdown-table-size-padding: var(--kbq-size-s);--kbq-markdown-table-size-margin-bottom: var(--kbq-size-m);--kbq-markdown-size-max-width: 650px;--kbq-markdown-h1-color: var(--kbq-foreground-contrast);--kbq-markdown-h2-color: var(--kbq-foreground-contrast);--kbq-markdown-h3-color: var(--kbq-foreground-contrast);--kbq-markdown-h4-color: var(--kbq-foreground-contrast);--kbq-markdown-h5-color: var(--kbq-foreground-contrast);--kbq-markdown-h6-color: var(--kbq-foreground-contrast);--kbq-markdown-p-color: var(--kbq-foreground-contrast);--kbq-markdown-list-color: var(--kbq-foreground-contrast);--kbq-markdown-blockquote-text: var(--kbq-foreground-contrast);--kbq-markdown-blockquote-line: var(--kbq-line-contrast-less);--kbq-markdown-blockquote-background: var(--kbq-background-contrast-fade);--kbq-markdown-blockquote-border: transparent;--kbq-markdown-code-text: var(--kbq-foreground-contrast);--kbq-markdown-code-background: var(--kbq-background-contrast-fade);--kbq-markdown-code-border: var(--kbq-line-contrast-less);--kbq-markdown-image-caption-text: var(--kbq-foreground-contrast-secondary);--kbq-markdown-hr-color: var(--kbq-line-contrast-less);--kbq-markdown-table-header: var(--kbq-foreground-contrast-secondary);--kbq-markdown-table-body: var(--kbq-foreground-contrast);--kbq-markdown-table-border: var(--kbq-line-contrast-less)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -156,7 +158,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         <pre #contentWrapper class="kbq-markdown__input" ngPreserveWhitespaces><ng-content /></pre>
         <div #outputWrapper class="kbq-markdown__output" [innerHtml]="resultHtml()"></div>
     `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'kbq-markdown'
+                        // The rendered content comes from `[innerHtml]`, so its scrollbars can only be customized from the host:
+                        // `kbq-scrollbar` styles the element's own and its descendants' scrollbars.
+                        class: 'kbq-markdown kbq-scrollbar'
                     }, styles: ["@charset \"UTF-8\";.kbq-markdown{display:block}.kbq-markdown .kbq-markdown__input{display:none}.kbq-markdown .kbq-markdown__output{flex:1}.kbq-markdown .kbq-markdown__output>:first-child{margin-top:0}.kbq-markdown .kbq-markdown__output>:last-child{margin-bottom:0}.kbq-markdown .kbq-markdown__h1{margin-top:var(--kbq-markdown-h1-size-margin-top);margin-bottom:var(--kbq-markdown-h1-size-margin-bottom)}.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);margin-bottom:var(--kbq-markdown-h2-size-margin-bottom)}.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);margin-bottom:var(--kbq-markdown-h3-size-margin-bottom)}.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);margin-bottom:var(--kbq-markdown-h4-size-margin-bottom)}.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);margin-bottom:var(--kbq-markdown-h5-size-margin-bottom)}.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);margin-bottom:var(--kbq-markdown-h6-size-margin-bottom)}.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__p{margin-top:var(--kbq-markdown-p-size-margin-top);margin-bottom:var(--kbq-markdown-p-size-margin-bottom)}.kbq-markdown .kbq-markdown__ul,.kbq-markdown .kbq-markdown__ol{margin-top:var(--kbq-markdown-list-size-margin-top);margin-bottom:var(--kbq-markdown-list-size-margin-bottom)}.kbq-markdown .kbq-markdown__ul>li,.kbq-markdown .kbq-markdown__ol>li{margin-bottom:var(--kbq-markdown-list-size-item-margin-bottom)}.kbq-markdown .kbq-markdown__ul{position:relative;list-style:none;padding:var(--kbq-markdown-list-size-ul-padding)}.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)}.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)}.kbq-markdown .kbq-markdown__blockquote{margin-top:var(--kbq-markdown-blockquote-size-margin-top);margin-left:0;margin-bottom:var(--kbq-markdown-blockquote-size-margin-bottom);margin-right:0;border-left-width:var(--kbq-markdown-blockquote-size-line-width);border-left-style:solid;padding:var(--kbq-markdown-blockquote-size-padding)}.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);margin-bottom:var(--kbq-markdown-code-size-multiline-margin-bottom);padding:var(--kbq-markdown-code-size-multiline-padding)}.kbq-markdown .kbq-markdown__pre,.kbq-markdown .kbq-markdown__code{border-radius:var(--kbq-markdown-code-size-border-radius)}.kbq-markdown .kbq-markdown__code:not(.kbq-markdown__pre>.kbq-markdown__code){white-space:nowrap;padding:var(--kbq-markdown-code-size-inline-padding)}.kbq-markdown .kbq-markdown__img{max-width:100%;margin-top:var(--kbq-markdown-image-size-margin-top);margin-bottom:var(--kbq-markdown-image-size-margin-bottom)}.kbq-markdown .kbq-markdown__img+em{display:block;margin-top:var(--kbq-markdown-image-size-caption-margin-top);margin-bottom:var(--kbq-markdown-image-size-caption-margin-bottom)}.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);margin:var(--kbq-markdown-hr-size-margin-vertical) 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)}.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);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);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}\n", ".kbq-markdown{--kbq-markdown-bg: transparent;--kbq-markdown-h1-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-h1-size-margin-top: 0;--kbq-markdown-h1-size-margin-bottom: var(--kbq-size-l);--kbq-markdown-h2-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-h2-size-margin-top: var(--kbq-size-xxl);--kbq-markdown-h2-size-margin-bottom: var(--kbq-size-m);--kbq-markdown-h3-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-h3-size-margin-top: var(--kbq-size-xxl);--kbq-markdown-h3-size-margin-bottom: var(--kbq-size-m);--kbq-markdown-h4-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-h4-size-margin-top: var(--kbq-size-xxl);--kbq-markdown-h4-size-margin-bottom: var(--kbq-size-m);--kbq-markdown-h5-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-h5-size-margin-top: var(--kbq-size-xxl);--kbq-markdown-h5-size-margin-bottom: var(--kbq-size-s);--kbq-markdown-h6-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-h6-size-margin-top: var(--kbq-size-xxl);--kbq-markdown-h6-size-margin-bottom: var(--kbq-size-s);--kbq-markdown-p-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-p-size-margin-top: var(--kbq-size-m);--kbq-markdown-p-size-margin-bottom: var(--kbq-size-m);--kbq-markdown-list-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-list-size-margin-top: var(--kbq-size-m);--kbq-markdown-list-size-margin-bottom: var(--kbq-size-m);--kbq-markdown-list-size-margin-top-after-paragraph: calc(-1 * var(--kbq-size-s));--kbq-markdown-list-size-ol-number-padding-right: var(--kbq-size-xxs);--kbq-markdown-list-size-ul-padding: 0 0 0 var(--kbq-size-xxl);--kbq-markdown-list-size-item-margin-bottom: var(--kbq-size-xxs);--kbq-markdown-blockquote-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-blockquote-size-margin-top: var(--kbq-size-m);--kbq-markdown-blockquote-size-margin-bottom: var(--kbq-size-m);--kbq-markdown-blockquote-size-padding: var(--kbq-size-3xs) var(--kbq-size-m);--kbq-markdown-blockquote-size-line-width: var(--kbq-size-xxs);--kbq-markdown-blockquote-size-border-radius: 0;--kbq-markdown-blockquote-size-border-width: 0;--kbq-markdown-code-size-multiline-margin-top: var(--kbq-size-m);--kbq-markdown-code-size-multiline-margin-bottom: var(--kbq-size-xxl);--kbq-markdown-code-size-inline-padding: var(--kbq-size-3xs) var(--kbq-size-xs);--kbq-markdown-code-size-multiline-padding: var(--kbq-size-m) var(--kbq-size-l);--kbq-markdown-code-size-border-radius: var(--kbq-size-border-radius);--kbq-markdown-code-size-border-width: var(--kbq-size-border-width);--kbq-markdown-image-size-max-width: var(--kbq-markdown-size-max-width);--kbq-markdown-image-size-margin-top: var(--kbq-size-m);--kbq-markdown-image-size-margin-bottom: var(--kbq-size-m);--kbq-markdown-image-size-caption-margin-top: calc(-1 * var(--kbq-size-s));--kbq-markdown-image-size-caption-margin-bottom: var(--kbq-size-xxl);--kbq-markdown-hr-size-width: 1px;--kbq-markdown-hr-size-margin-vertical: var(--kbq-size-xxl);--kbq-markdown-table-size-border-width: var(--kbq-size-border-width);--kbq-markdown-table-size-padding: var(--kbq-size-s);--kbq-markdown-table-size-margin-bottom: var(--kbq-size-m);--kbq-markdown-size-max-width: 650px;--kbq-markdown-h1-color: var(--kbq-foreground-contrast);--kbq-markdown-h2-color: var(--kbq-foreground-contrast);--kbq-markdown-h3-color: var(--kbq-foreground-contrast);--kbq-markdown-h4-color: var(--kbq-foreground-contrast);--kbq-markdown-h5-color: var(--kbq-foreground-contrast);--kbq-markdown-h6-color: var(--kbq-foreground-contrast);--kbq-markdown-p-color: var(--kbq-foreground-contrast);--kbq-markdown-list-color: var(--kbq-foreground-contrast);--kbq-markdown-blockquote-text: var(--kbq-foreground-contrast);--kbq-markdown-blockquote-line: var(--kbq-line-contrast-less);--kbq-markdown-blockquote-background: var(--kbq-background-contrast-fade);--kbq-markdown-blockquote-border: transparent;--kbq-markdown-code-text: var(--kbq-foreground-contrast);--kbq-markdown-code-background: var(--kbq-background-contrast-fade);--kbq-markdown-code-border: var(--kbq-line-contrast-less);--kbq-markdown-image-caption-text: var(--kbq-foreground-contrast-secondary);--kbq-markdown-hr-color: var(--kbq-line-contrast-less);--kbq-markdown-table-header: var(--kbq-foreground-contrast-secondary);--kbq-markdown-table-body: var(--kbq-foreground-contrast);--kbq-markdown-table-border: var(--kbq-line-contrast-less)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { contentWrapper: [{ type: i0.ViewChild, args: ['contentWrapper', { isSignal: true }] }], outputWrapper: [{ type: i0.ViewChild, args: ['outputWrapper', { isSignal: true }] }], markdownText: [{
                 type: Input

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":["/** @docs-private */\nexport 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/**\n * separating `th` and `p` to prevent it's conflict with `thead` and `pre`\n *\n * @docs-private\n */\nexport const MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS = [\n    'th',\n    'p'\n];\n\n/** @docs-private */\nexport const CLASS_PREFIX: string = 'kbq-markdown';\n","import { Injectable } from '@angular/core';\nimport { marked, MarkedOptions } from 'marked';\nimport { CLASS_PREFIX, MARKDOWN_TAGS_TO_CLASS_ALIAS, MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS } from './markdown.values';\n\n/**\n * Service for converting Markdown into HTML.\n */\n@Injectable()\nexport class KbqMarkdownService {\n    /**\n     * Converts a given Markdown string into HTML.\n     * NOTE! Method does not sanitize the output HTML string.\n     *\n     * @param markdown - The Markdown string to be converted.\n     * @param options - Optional MarkedOptions to customize the parsing behavior.\n     * @returns The transformed HTML string.\n     */\n    parseToHtml(markdown: string, options?: MarkedOptions): string {\n        return this.transform(<string>marked.parse(markdown, options));\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(new RegExp(`<${tag}`, 'g'), (_match: string) => {\n                if (tag === 'a') {\n                    return `<${tag} class=\"${CLASS_PREFIX}__${tag} kbq-link kbq-text-only kbq-link_use-visited\"`;\n                }\n\n                return `<${tag} class=\"${CLASS_PREFIX}__${tag}\"`;\n            });\n        });\n\n        MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS.forEach((tag) => {\n            transformed = transformed.replace(\n                // `\\\\s`, because a template literal eats the backslash first: `\\s` would reach the\n                // constructor as a bare `s` and match `<pss>` rather than `<p >`.\n                new RegExp(`<${tag}\\\\s*>`, 'g'),\n                (_match: string) => `<${tag} class=\"${CLASS_PREFIX}__${tag}\">`\n            );\n        });\n\n        return transformed;\n    }\n}\n","import { FocusMonitor } from '@angular/cdk/a11y';\nimport {\n    afterNextRender,\n    ChangeDetectionStrategy,\n    Component,\n    effect,\n    ElementRef,\n    inject,\n    InjectionToken,\n    Input,\n    OnDestroy,\n    Provider,\n    signal,\n    viewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { MarkedOptions } from 'marked';\nimport { KbqMarkdownService } from './markdown.service';\n\n/** List of options for `marked` library. */\nexport const KBQ_MARKDOWN_MARKED_OPTIONS = new InjectionToken<MarkedOptions>('KBQ_MARKDOWN_MARKED_OPTIONS');\n\n/** Utility provider for `KBQ_MARKDOWN_MARKED_OPTIONS`. */\nexport const kbqMarkdownMarkedOptionsProvider = (options: MarkedOptions): Provider => ({\n    provide: KBQ_MARKDOWN_MARKED_OPTIONS,\n    useValue: options\n});\n\n/** Component which allows to convert `Markdown` into `HTML` */\n@Component({\n    selector: 'kbq-markdown',\n    // no need format line with ng-content it's broke textContent for markdownService.parseToHtml()\n    template: `\n        <pre #contentWrapper class=\"kbq-markdown__input\" ngPreserveWhitespaces><ng-content /></pre>\n        <div #outputWrapper class=\"kbq-markdown__output\" [innerHtml]=\"resultHtml()\"></div>\n    `,\n    styleUrls: ['./markdown.scss', 'markdown-tokens.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'kbq-markdown'\n    }\n})\nexport class KbqMarkdown implements OnDestroy {\n    private readonly markdownService = inject(KbqMarkdownService);\n    private sanitizer = inject(DomSanitizer);\n    private readonly markedOptions =\n        inject<MarkedOptions | undefined>(KBQ_MARKDOWN_MARKED_OPTIONS, { optional: true }) ?? undefined;\n\n    private readonly contentWrapper = viewChild.required<ElementRef<HTMLPreElement>>('contentWrapper');\n    private readonly outputWrapper = viewChild.required<ElementRef<HTMLDivElement>>('outputWrapper');\n\n    protected resultHtml = signal<SafeHtml | null>(null);\n\n    /** `Markdown` text. */\n    // TODO: Skipped for migration because:\n    //  Accessor inputs cannot be migrated as they are too complex.\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.set(this.getResultHTML(value));\n        }\n\n        this._markdownText = value;\n    }\n\n    private _markdownText: string | null = null;\n    private readonly focusMonitor = inject(FocusMonitor);\n    private readonly links: HTMLAnchorElement[] = [];\n\n    constructor() {\n        afterNextRender(() => {\n            const contentWrapper = this.contentWrapper();\n\n            if (!this.markdownText && contentWrapper?.nativeElement.textContent) {\n                this.resultHtml.set(this.getResultHTML(contentWrapper?.nativeElement.textContent));\n            }\n        });\n\n        effect(() => {\n            if (this.resultHtml()) {\n                Promise.resolve().then(() => this.startMonitoringLinks());\n            } else {\n                this.stopMonitoringLinks();\n            }\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.stopMonitoringLinks();\n    }\n\n    private getResultHTML(markdown: string): SafeHtml {\n        return this.sanitizer.bypassSecurityTrustHtml(this.markdownService.parseToHtml(markdown, this.markedOptions));\n    }\n\n    private startMonitoringLinks(): void {\n        this.stopMonitoringLinks();\n        this.outputWrapper()\n            .nativeElement.querySelectorAll<HTMLAnchorElement>('.kbq-markdown__a')\n            .forEach((link) => {\n                this.links.push(link);\n                this.focusMonitor.monitor(link, true);\n            });\n    }\n\n    private stopMonitoringLinks(): void {\n        this.links.forEach((link) => this.focusMonitor.stopMonitoring(link));\n        this.links.length = 0;\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { KbqMarkdown } from './markdown.component';\nimport { KbqMarkdownService } from './markdown.service';\n\nconst COMPONENTS = [\n    KbqMarkdown\n];\n\n@NgModule({\n    imports: COMPONENTS,\n    providers: [KbqMarkdownService],\n    exports: COMPONENTS\n})\nexport class KbqMarkdownModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"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":["/** @docs-private */\nexport 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/**\n * separating `th` and `p` to prevent it's conflict with `thead` and `pre`\n *\n * @docs-private\n */\nexport const MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS = [\n    'th',\n    'p'\n];\n\n/** @docs-private */\nexport const CLASS_PREFIX: string = 'kbq-markdown';\n","import { Injectable } from '@angular/core';\nimport { marked, MarkedOptions } from 'marked';\nimport { CLASS_PREFIX, MARKDOWN_TAGS_TO_CLASS_ALIAS, MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS } from './markdown.values';\n\n/**\n * Service for converting Markdown into HTML.\n *\n * @docs-private\n */\n@Injectable()\nexport class KbqMarkdownService {\n    /**\n     * Converts a given Markdown string into HTML.\n     * NOTE! Method does not sanitize the output HTML string.\n     *\n     * @param markdown - The Markdown string to be converted.\n     * @param options - Optional MarkedOptions to customize the parsing behavior.\n     * @returns The transformed HTML string.\n     */\n    parseToHtml(markdown: string, options?: MarkedOptions): string {\n        return this.transform(<string>marked.parse(markdown, options));\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(new RegExp(`<${tag}`, 'g'), (_match: string) => {\n                if (tag === 'a') {\n                    return `<${tag} class=\"${CLASS_PREFIX}__${tag} kbq-link kbq-text-only kbq-link_use-visited\"`;\n                }\n\n                return `<${tag} class=\"${CLASS_PREFIX}__${tag}\"`;\n            });\n        });\n\n        MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS.forEach((tag) => {\n            transformed = transformed.replace(\n                // `\\\\s`, because a template literal eats the backslash first: `\\s` would reach the\n                // constructor as a bare `s` and match `<pss>` rather than `<p >`.\n                new RegExp(`<${tag}\\\\s*>`, 'g'),\n                (_match: string) => `<${tag} class=\"${CLASS_PREFIX}__${tag}\">`\n            );\n        });\n\n        return transformed;\n    }\n}\n","import { FocusMonitor } from '@angular/cdk/a11y';\nimport {\n    afterNextRender,\n    ChangeDetectionStrategy,\n    Component,\n    effect,\n    ElementRef,\n    inject,\n    InjectionToken,\n    Input,\n    OnDestroy,\n    Provider,\n    signal,\n    viewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { MarkedOptions } from 'marked';\nimport { KbqMarkdownService } from './markdown.service';\n\n/** List of options for `marked` library. */\nexport const KBQ_MARKDOWN_MARKED_OPTIONS = new InjectionToken<MarkedOptions>('KBQ_MARKDOWN_MARKED_OPTIONS');\n\n/** Utility provider for `KBQ_MARKDOWN_MARKED_OPTIONS`. */\nexport const kbqMarkdownMarkedOptionsProvider = (options: MarkedOptions): Provider => ({\n    provide: KBQ_MARKDOWN_MARKED_OPTIONS,\n    useValue: options\n});\n\n/** Component which allows to convert `Markdown` into `HTML` */\n@Component({\n    selector: 'kbq-markdown',\n    // no need format line with ng-content it's broke textContent for markdownService.parseToHtml()\n    template: `\n        <pre #contentWrapper class=\"kbq-markdown__input\" ngPreserveWhitespaces><ng-content /></pre>\n        <div #outputWrapper class=\"kbq-markdown__output\" [innerHtml]=\"resultHtml()\"></div>\n    `,\n    styleUrls: ['./markdown.scss', 'markdown-tokens.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        // The rendered content comes from `[innerHtml]`, so its scrollbars can only be customized from the host:\n        // `kbq-scrollbar` styles the element's own and its descendants' scrollbars.\n        class: 'kbq-markdown kbq-scrollbar'\n    }\n})\nexport class KbqMarkdown implements OnDestroy {\n    private readonly markdownService = inject(KbqMarkdownService);\n    private sanitizer = inject(DomSanitizer);\n    private readonly markedOptions =\n        inject<MarkedOptions | undefined>(KBQ_MARKDOWN_MARKED_OPTIONS, { optional: true }) ?? undefined;\n\n    private readonly contentWrapper = viewChild.required<ElementRef<HTMLPreElement>>('contentWrapper');\n    private readonly outputWrapper = viewChild.required<ElementRef<HTMLDivElement>>('outputWrapper');\n\n    protected resultHtml = signal<SafeHtml | null>(null);\n\n    /** `Markdown` text. */\n    // TODO: Skipped for migration because:\n    //  Accessor inputs cannot be migrated as they are too complex.\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.set(this.getResultHTML(value));\n        }\n\n        this._markdownText = value;\n    }\n\n    private _markdownText: string | null = null;\n    private readonly focusMonitor = inject(FocusMonitor);\n    private readonly links: HTMLAnchorElement[] = [];\n\n    constructor() {\n        afterNextRender(() => {\n            const contentWrapper = this.contentWrapper();\n\n            if (!this.markdownText && contentWrapper?.nativeElement.textContent) {\n                this.resultHtml.set(this.getResultHTML(contentWrapper?.nativeElement.textContent));\n            }\n        });\n\n        effect(() => {\n            if (this.resultHtml()) {\n                Promise.resolve().then(() => this.startMonitoringLinks());\n            } else {\n                this.stopMonitoringLinks();\n            }\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.stopMonitoringLinks();\n    }\n\n    private getResultHTML(markdown: string): SafeHtml {\n        return this.sanitizer.bypassSecurityTrustHtml(this.markdownService.parseToHtml(markdown, this.markedOptions));\n    }\n\n    private startMonitoringLinks(): void {\n        this.stopMonitoringLinks();\n        this.outputWrapper()\n            .nativeElement.querySelectorAll<HTMLAnchorElement>('.kbq-markdown__a')\n            .forEach((link) => {\n                this.links.push(link);\n                this.focusMonitor.monitor(link, true);\n            });\n    }\n\n    private stopMonitoringLinks(): void {\n        this.links.forEach((link) => this.focusMonitor.stopMonitoring(link));\n        this.links.length = 0;\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { KbqMarkdown } from './markdown.component';\nimport { KbqMarkdownService } from './markdown.service';\n\nconst COMPONENTS = [\n    KbqMarkdown\n];\n\n@NgModule({\n    imports: COMPONENTS,\n    providers: [KbqMarkdownService],\n    exports: COMPONENTS\n})\nexport class KbqMarkdownModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/koobiq-components-modal.mjs

@@ -6,7 +6,7 @@ import * as i0 from '@angular/core';
 import { Pipe, inject, Injectable, Renderer2, EnvironmentInjector, ElementRef, ViewContainerRef, ChangeDetectorRef, output, EventEmitter, viewChild, viewChildren, signal, TemplateRef, Type, Injector, createComponent, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, effect, Directive, InjectionToken, isDevMode, NgModule } from '@angular/core';
 import * as i1 from '@koobiq/components/button';
 import { KbqButtonModule } from '@koobiq/components/button';
-import * as i3$1 from '@koobiq/components/core';
+import * as i4 from '@koobiq/components/core';
 import { KbqComponentColors, ESCAPE, ENTER, KbqOverflowShadowContainer, KbqOverflowShadowTop, KbqOverflowShadowBottom } from '@koobiq/components/core';
 import * as i2 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
@@ -411,6 +411,10 @@ class KbqModalComponent extends KbqModalRef {
         return this.getElement().getElementsByClassName('kbq-modal-footer').item(0);
     }
     onClickMask($event) {
+        // Only the primary button closes the modal: the sidepanel's backdrop is driven by `click`, which
+        // never fires for the right or middle button, and `mousedown` here would otherwise diverge from it.
+        if ($event.button !== 0)
+            return;
         if (this.kbqMask &&
             this.kbqMaskClosable &&
             $event.target.classList.contains('kbq-modal-wrap') &&
@@ -753,8 +757,12 @@ class KbqModalTitle {
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqModalTitle, isStandalone: true, selector: "[kbq-modal-title], kbq-modal-title, [kbqModalTitle]", host: { properties: { "class.kbq-modal-header_closable": "modal.kbqClosable", "style.box-shadow": "modal.bodyOverflow().top ? \"var(--kbq-shadow-overflow-normal-bottom)\" : null" }, classAttribute: "kbq-modal-header" }, ngImport: i0, template: `
-        <div class="kbq-modal-title" kbq-title>
-            <ng-content />
+        <div class="kbq-modal-header-content">
+            <div class="kbq-modal-title" kbq-title>
+                <ng-content />
+            </div>
+
+            <ng-content select="kbq-modal-caption, [kbq-modal-caption], [kbqModalCaption]" />
         </div>
 
         @if (modal.kbqClosable) {
@@ -780,8 +788,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         KbqTitleDirective
                     ],
                     template: `
-        <div class="kbq-modal-title" kbq-title>
-            <ng-content />
+        <div class="kbq-modal-header-content">
+            <div class="kbq-modal-title" kbq-title>
+                <ng-content />
+            </div>
+
+            <ng-content select="kbq-modal-caption, [kbq-modal-caption], [kbqModalCaption]" />
         </div>
 
         @if (modal.kbqClosable) {
@@ -803,6 +815,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     }
                 }]
         }] });
+/**
+ * Caption of a manually composed modal (`kbqComponent`). Projected into the header rendered by
+ * `KbqModalTitle`, below the title, and clamped to two lines. The resulting markup matches the
+ * header of a modal created via `KbqModalService.create`.
+ */
+class KbqModalCaption {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalCaption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: KbqModalCaption, isStandalone: true, selector: "[kbq-modal-caption], kbq-modal-caption, [kbqModalCaption]", host: { classAttribute: "kbq-modal-caption" }, hostDirectives: [{ directive: i3.KbqTitleDirective }], ngImport: i0, template: `
+        <ng-content />
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalCaption, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `[kbq-modal-caption], kbq-modal-caption, [kbqModalCaption]`,
+                    template: `
+        <ng-content />
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'kbq-modal-caption'
+                    },
+                    hostDirectives: [KbqTitleDirective]
+                }]
+        }] });
 /**
  * Scrollable body of a manually composed modal (`kbqComponent`). Publishes its scroll-shadow
  * state onto the modal instance so a sibling `KbqModalTitle`/`KbqModalFooter` can render the
@@ -815,7 +852,7 @@ class KbqModalBody {
         effect(() => this.modal.bodyOverflow.set(this.overflowContainer.overflow()));
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqModalBody, isStandalone: true, selector: "[kbq-modal-body], kbq-modal-body, [kbqModalBody]", host: { classAttribute: "kbq-modal-body kbq-scrollbar" }, hostDirectives: [{ directive: i3$1.KbqOverflowShadowContainer }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqModalBody, isStandalone: true, selector: "[kbq-modal-body], kbq-modal-body, [kbqModalBody]", host: { classAttribute: "kbq-modal-body kbq-scrollbar" }, hostDirectives: [{ directive: i4.KbqOverflowShadowContainer }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalBody, decorators: [{
             type: Directive,
@@ -989,11 +1026,13 @@ class KbqModalModule {
             NgTemplateOutlet,
             KbqModalComponent,
             KbqModalTitle,
+            KbqModalCaption,
             KbqModalBody,
             KbqModalFooter,
             CssUnitPipe,
             KbqModalMainAction], exports: [KbqModalComponent,
             KbqModalTitle,
+            KbqModalCaption,
             KbqModalBody,
             KbqModalFooter,
             KbqModalMainAction] }); }
@@ -1021,6 +1060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         NgTemplateOutlet,
                         KbqModalComponent,
                         KbqModalTitle,
+                        KbqModalCaption,
                         KbqModalBody,
                         KbqModalFooter,
                         CssUnitPipe,
@@ -1034,6 +1074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     exports: [
                         KbqModalComponent,
                         KbqModalTitle,
+                        KbqModalCaption,
                         KbqModalBody,
                         KbqModalFooter,
                         KbqModalMainAction
@@ -1045,5 +1086,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_MODAL_DATA, KbqModalBody, KbqModalComponent, KbqModalFooter, KbqModalMainAction, KbqModalModule, KbqModalRef, KbqModalService, KbqModalTitle, MODAL_ANIMATE_DURATION, ModalBuilderForService, ModalSize };
+export { KBQ_MODAL_DATA, KbqModalBody, KbqModalCaption, KbqModalComponent, KbqModalFooter, KbqModalMainAction, KbqModalModule, KbqModalRef, KbqModalService, KbqModalTitle, MODAL_ANIMATE_DURATION, ModalBuilderForService, ModalSize };
 //# sourceMappingURL=koobiq-components-modal.mjs.map