@api-client/ui 0.5.57 → 0.6.0

package/build/src/modeling/dialogs/HtmlTaxonomy.js

@@ -0,0 +1,331 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { DEFAULT_HTML_CONFIG } from '@api-client/core/modeling/definitions/HTML.js';
+import { bound } from '../../decorators/bound.js';
+import { html } from 'lit';
+import { SemanticType } from '@api-client/core/modeling/Semantics.js';
+import { renderHelp } from '../../help/render.js';
+import { TaxonomyDialog } from './TaxonomyDialog.js';
+import '../../md/chip/ui-chip-set.js';
+import '../../md/chip/ui-chip.js';
+/**
+ * A class that generates a dialog that allows the user to configure the taxonomy of a HTML field.
+ */
+let HtmlTaxonomy = (() => {
+    let _classSuper = TaxonomyDialog;
+    let _instanceExtraInitializers = [];
+    let _handleAllowedTagsChange_decorators;
+    let _handleRemoveTag_decorators;
+    let _render_decorators;
+    return class HtmlTaxonomy extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _handleAllowedTagsChange_decorators = [bound];
+            _handleRemoveTag_decorators = [bound];
+            _render_decorators = [bound];
+            __esDecorate(this, null, _handleAllowedTagsChange_decorators, { kind: "method", name: "handleAllowedTagsChange", static: false, private: false, access: { has: obj => "handleAllowedTagsChange" in obj, get: obj => obj.handleAllowedTagsChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleRemoveTag_decorators, { kind: "method", name: "handleRemoveTag", static: false, private: false, access: { has: obj => "handleRemoveTag" in obj, get: obj => obj.handleRemoveTag }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        domainElement = __runInitializers(this, _instanceExtraInitializers);
+        static title = `Configure HTML Taxonomy`;
+        constructor(domainElement) {
+            let config;
+            const semantic = domainElement.semantics.find((s) => s.id === SemanticType.HTML);
+            if (semantic && semantic.config) {
+                config = structuredClone(semantic.config);
+            }
+            else {
+                config = {};
+            }
+            super(config);
+            this.domainElement = domainElement;
+        }
+        formCallback(event) {
+            const semantic = this.domainElement.semantics.find((s) => s.id === SemanticType.HTML);
+            if (semantic) {
+                semantic.config = this.config;
+            }
+            else {
+                this.domainElement.semantics.push({
+                    id: SemanticType.HTML,
+                    config: this.config,
+                });
+            }
+            this.domainElement.domain.notifyChange();
+            return super.formCallback(event);
+        }
+        handleAllowedTagsChange(event) {
+            const input = event.target;
+            const value = input.value.trim();
+            if (value) {
+                const tags = this.config?.allowedTags ?? DEFAULT_HTML_CONFIG.allowedTags ?? [];
+                if (!tags.includes(value)) {
+                    tags.push(value);
+                    this.config = { ...this.config, allowedTags: tags };
+                    this.requestUpdate();
+                }
+                input.value = '';
+            }
+        }
+        handleRemoveTag(event) {
+            const chip = event.currentTarget;
+            const index = parseInt(chip.dataset.index || '-1', 10);
+            if (index >= 0 && this.config?.allowedTags) {
+                this.config.allowedTags.splice(index, 1);
+                this.requestUpdate();
+            }
+        }
+        render() {
+            return html `
+      <div class="checkbox-group">
+        ${this.renderAllowImages()} ${this.renderAllowLinks()} ${this.renderAllowTables()} ${this.renderAllowForms()}
+        ${this.renderAllowScripts()} ${this.renderAllowIframes()} ${this.renderAllowEmbedded()}
+        ${this.renderAllowStyles()} ${this.renderAllowDataAttributes()}
+      </div>
+      <div class="input-group">
+        ${this.renderRenderModeSelect()} ${this.renderSanitizeLevelSelect()} ${this.renderAllowedTagsInput()}
+      </div>
+    `;
+        }
+        renderAllowImages() {
+            const enabled = this.config?.allowImages ?? DEFAULT_HTML_CONFIG.allowImages;
+            return html `
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-images"
+            .checked="${enabled}"
+            name="allowImages"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-images" class="body-medium">Allow Images</label>
+            <span class="body-small meta">Users are allowed to add images in their HTML content.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'html:allowImages')}
+      </div>
+    `;
+        }
+        renderAllowLinks() {
+            const enabled = this.config?.allowLinks ?? DEFAULT_HTML_CONFIG.allowLinks;
+            return html `
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-links"
+            .checked="${enabled}"
+            name="allowLinks"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-links" class="body-medium">Allow Links</label>
+            <span class="body-small meta">Users are allowed to add links in their HTML content.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'html:allowLinks')}
+      </div>
+    `;
+        }
+        renderAllowTables() {
+            const enabled = this.config?.allowTables ?? DEFAULT_HTML_CONFIG.allowTables;
+            return html `
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-tables"
+            .checked="${enabled}"
+            name="allowTables"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-tables" class="body-medium">Allow Tables</label>
+            <span class="body-small meta">Users are allowed to add tables in their HTML content.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'html:allowTables')}
+      </div>
+    `;
+        }
+        renderAllowForms() {
+            const enabled = this.config?.allowForms ?? DEFAULT_HTML_CONFIG.allowForms;
+            return html `
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-forms"
+            .checked="${enabled}"
+            name="allowForms"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-forms" class="body-medium">Allow Forms</label>
+            <span class="body-small meta">Users are allowed to add forms in their HTML content.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'html:allowForms')}
+      </div>
+    `;
+        }
+        renderAllowScripts() {
+            const enabled = this.config?.allowScripts ?? DEFAULT_HTML_CONFIG.allowScripts;
+            return html `
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-scripts"
+            .checked="${enabled}"
+            name="allowScripts"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-scripts" class="body-medium">Allow Scripts</label>
+            <span class="body-small meta">Users are allowed to add scripts in their HTML content.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'html:allowScripts')}
+      </div>
+    `;
+        }
+        renderAllowIframes() {
+            const enabled = this.config?.allowIframes ?? DEFAULT_HTML_CONFIG.allowIframes;
+            return html `
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-iframes"
+            .checked="${enabled}"
+            name="allowIframes"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-iframes" class="body-medium">Allow Iframes</label>
+            <span class="body-small meta">Users are allowed to add iframes in their HTML content.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'html:allowIframes')}
+      </div>
+    `;
+        }
+        renderAllowEmbedded() {
+            const enabled = this.config?.allowEmbedded ?? DEFAULT_HTML_CONFIG.allowEmbedded;
+            return html `
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-embedded"
+            .checked="${enabled}"
+            name="allowEmbedded"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-embedded" class="body-medium">Allow Embedded Content</label>
+            <span class="body-small meta">Users are allowed to add embedded content in their HTML content.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'html:allowEmbedded')}
+      </div>
+    `;
+        }
+        renderAllowStyles() {
+            const enabled = this.config?.allowStyles ?? DEFAULT_HTML_CONFIG.allowStyles;
+            return html `
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-styles"
+            .checked="${enabled}"
+            name="allowStyles"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-styles" class="body-medium">Allow Styles</label>
+            <span class="body-small meta">Users are allowed to add styles in their HTML content.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'html:allowStyles')}
+      </div>
+    `;
+        }
+        renderAllowDataAttributes() {
+            const enabled = this.config?.allowDataAttributes ?? DEFAULT_HTML_CONFIG.allowDataAttributes;
+            return html `
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="allow-data-attributes"
+            .checked="${enabled}"
+            name="allowDataAttributes"
+            @change="${this.handleBooleanChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="allow-data-attributes" class="body-medium">Allow Data Attributes</label>
+            <span class="body-small meta">Users are allowed to add data attributes in their HTML content.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'html:allowDataAttributes')}
+      </div>
+    `;
+        }
+        renderRenderModeSelect() {
+            const value = this.config?.renderMode ?? DEFAULT_HTML_CONFIG.renderMode;
+            return html `
+      <div class="row input-row">
+        <ui-select
+          label="Render mode"
+          class="input"
+          name="renderMode"
+          .value="${value}"
+          @change="${this.handleSelectChange}"
+        >
+          <ui-option value="html">HTML</ui-option>
+          <ui-option value="text">Text</ui-option>
+          <ui-option value="both">Both</ui-option>
+        </ui-select>
+        ${renderHelp('taxonomy', 'html:renderMode')}
+      </div>
+    `;
+        }
+        renderSanitizeLevelSelect() {
+            const value = this.config?.sanitizeLevel ?? DEFAULT_HTML_CONFIG.sanitizeLevel;
+            return html `
+      <div class="row input-row">
+        <ui-select
+          label="Sanitize level"
+          class="input"
+          name="sanitizeLevel"
+          .value="${value}"
+          @change="${this.handleSelectChange}"
+        >
+          <ui-option value="strict">Strict</ui-option>
+          <ui-option value="moderate">Moderate</ui-option>
+          <ui-option value="none">None</ui-option>
+        </ui-select>
+        ${renderHelp('taxonomy', 'html:sanitizeLevel')}
+      </div>
+    `;
+        }
+        renderAllowedTagsInput() {
+            const value = this.config?.allowedTags ?? DEFAULT_HTML_CONFIG.allowedTags;
+            const chips = (value || []).map((tag, index) => html `<ui-chip type="input" removable data-index="${index}" @remove="${this.handleRemoveTag}">${tag}</ui-chip>`);
+            return html `
+      <div class="row input-row">
+        <div class="input chips-input">
+          <ui-outlined-text-field
+            class="input"
+            name="allowedTags"
+            label="Allowed Tags"
+            @change="${this.handleAllowedTagsChange}"
+            supportingText="Add a tag and press Enter to add it to the list."
+          ></ui-outlined-text-field>
+          <ui-chip-set>${chips}</ui-chip-set>
+        </div>
+        ${renderHelp('taxonomy', 'html:allowedTags')}
+      </div>
+    `;
+        }
+    };
+})();
+export { HtmlTaxonomy };
+//# sourceMappingURL=HtmlTaxonomy.js.map

package/build/src/modeling/dialogs/HtmlTaxonomy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlTaxonomy.js","sourceRoot":"","sources":["../../../../src/modeling/dialogs/HtmlTaxonomy.ts"],"names":[],"mappings":"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","sourcesContent":["import type { DomainProperty } from '@api-client/core/modeling/DomainProperty.js'\nimport { type HTMLConfig, DEFAULT_HTML_CONFIG } from '@api-client/core/modeling/definitions/HTML.js'\nimport { bound } from '../../decorators/bound.js'\nimport { html, TemplateResult } from 'lit'\nimport { SemanticType } from '@api-client/core/modeling/Semantics.js'\nimport { renderHelp } from '../../help/render.js'\nimport { TaxonomyDialog } from './TaxonomyDialog.js'\n\nimport '../../md/chip/ui-chip-set.js'\nimport '../../md/chip/ui-chip.js'\n\n/**\n * A class that generates a dialog that allows the user to configure the taxonomy of a HTML field.\n */\nexport class HtmlTaxonomy extends TaxonomyDialog<HTMLConfig> {\n  static override title = `Configure HTML Taxonomy`\n\n  constructor(public domainElement: DomainProperty) {\n    let config: HTMLConfig\n    const semantic = domainElement.semantics.find((s) => s.id === SemanticType.HTML)\n    if (semantic && semantic.config) {\n      config = structuredClone(semantic.config)\n    } else {\n      config = {}\n    }\n    super(config)\n  }\n\n  protected override formCallback(event: Event): Promise<void> {\n    const semantic = this.domainElement.semantics.find((s) => s.id === SemanticType.HTML)\n    if (semantic) {\n      semantic.config = this.config\n    } else {\n      this.domainElement.semantics.push({\n        id: SemanticType.HTML,\n        config: this.config,\n      })\n    }\n    this.domainElement.domain.notifyChange()\n    return super.formCallback(event)\n  }\n\n  @bound\n  protected handleAllowedTagsChange(event: Event): void {\n    const input = event.target as HTMLInputElement\n    const value = input.value.trim()\n    if (value) {\n      const tags = this.config?.allowedTags ?? DEFAULT_HTML_CONFIG.allowedTags ?? []\n      if (!tags.includes(value)) {\n        tags.push(value)\n        this.config = { ...this.config, allowedTags: tags }\n        this.requestUpdate()\n      }\n      input.value = ''\n    }\n  }\n\n  @bound\n  protected handleRemoveTag(event: Event): void {\n    const chip = event.currentTarget as HTMLElement\n    const index = parseInt(chip.dataset.index || '-1', 10)\n    if (index >= 0 && this.config?.allowedTags) {\n      this.config.allowedTags.splice(index, 1)\n      this.requestUpdate()\n    }\n  }\n\n  @bound\n  render(): TemplateResult {\n    return html`\n      <div class=\"checkbox-group\">\n        ${this.renderAllowImages()} ${this.renderAllowLinks()} ${this.renderAllowTables()} ${this.renderAllowForms()}\n        ${this.renderAllowScripts()} ${this.renderAllowIframes()} ${this.renderAllowEmbedded()}\n        ${this.renderAllowStyles()} ${this.renderAllowDataAttributes()}\n      </div>\n      <div class=\"input-group\">\n        ${this.renderRenderModeSelect()} ${this.renderSanitizeLevelSelect()} ${this.renderAllowedTagsInput()}\n      </div>\n    `\n  }\n\n  protected renderAllowImages(): TemplateResult {\n    const enabled = this.config?.allowImages ?? DEFAULT_HTML_CONFIG.allowImages\n    return html`\n      <div class=\"row\">\n        <div class=\"input checkbox metadata\">\n          <ui-checkbox\n            id=\"allow-images\"\n            .checked=\"${enabled}\"\n            name=\"allowImages\"\n            @change=\"${this.handleBooleanChange}\"\n          ></ui-checkbox>\n          <div class=\"label\">\n            <label for=\"allow-images\" class=\"body-medium\">Allow Images</label>\n            <span class=\"body-small meta\">Users are allowed to add images in their HTML content.</span>\n          </div>\n        </div>\n        ${renderHelp('taxonomy', 'html:allowImages')}\n      </div>\n    `\n  }\n\n  protected renderAllowLinks(): TemplateResult {\n    const enabled = this.config?.allowLinks ?? DEFAULT_HTML_CONFIG.allowLinks\n    return html`\n      <div class=\"row\">\n        <div class=\"input checkbox metadata\">\n          <ui-checkbox\n            id=\"allow-links\"\n            .checked=\"${enabled}\"\n            name=\"allowLinks\"\n            @change=\"${this.handleBooleanChange}\"\n          ></ui-checkbox>\n          <div class=\"label\">\n            <label for=\"allow-links\" class=\"body-medium\">Allow Links</label>\n            <span class=\"body-small meta\">Users are allowed to add links in their HTML content.</span>\n          </div>\n        </div>\n        ${renderHelp('taxonomy', 'html:allowLinks')}\n      </div>\n    `\n  }\n\n  protected renderAllowTables(): TemplateResult {\n    const enabled = this.config?.allowTables ?? DEFAULT_HTML_CONFIG.allowTables\n    return html`\n      <div class=\"row\">\n        <div class=\"input checkbox metadata\">\n          <ui-checkbox\n            id=\"allow-tables\"\n            .checked=\"${enabled}\"\n            name=\"allowTables\"\n            @change=\"${this.handleBooleanChange}\"\n          ></ui-checkbox>\n          <div class=\"label\">\n            <label for=\"allow-tables\" class=\"body-medium\">Allow Tables</label>\n            <span class=\"body-small meta\">Users are allowed to add tables in their HTML content.</span>\n          </div>\n        </div>\n        ${renderHelp('taxonomy', 'html:allowTables')}\n      </div>\n    `\n  }\n\n  protected renderAllowForms(): TemplateResult {\n    const enabled = this.config?.allowForms ?? DEFAULT_HTML_CONFIG.allowForms\n    return html`\n      <div class=\"row\">\n        <div class=\"input checkbox metadata\">\n          <ui-checkbox\n            id=\"allow-forms\"\n            .checked=\"${enabled}\"\n            name=\"allowForms\"\n            @change=\"${this.handleBooleanChange}\"\n          ></ui-checkbox>\n          <div class=\"label\">\n            <label for=\"allow-forms\" class=\"body-medium\">Allow Forms</label>\n            <span class=\"body-small meta\">Users are allowed to add forms in their HTML content.</span>\n          </div>\n        </div>\n        ${renderHelp('taxonomy', 'html:allowForms')}\n      </div>\n    `\n  }\n\n  protected renderAllowScripts(): TemplateResult {\n    const enabled = this.config?.allowScripts ?? DEFAULT_HTML_CONFIG.allowScripts\n    return html`\n      <div class=\"row\">\n        <div class=\"input checkbox metadata\">\n          <ui-checkbox\n            id=\"allow-scripts\"\n            .checked=\"${enabled}\"\n            name=\"allowScripts\"\n            @change=\"${this.handleBooleanChange}\"\n          ></ui-checkbox>\n          <div class=\"label\">\n            <label for=\"allow-scripts\" class=\"body-medium\">Allow Scripts</label>\n            <span class=\"body-small meta\">Users are allowed to add scripts in their HTML content.</span>\n          </div>\n        </div>\n        ${renderHelp('taxonomy', 'html:allowScripts')}\n      </div>\n    `\n  }\n\n  protected renderAllowIframes(): TemplateResult {\n    const enabled = this.config?.allowIframes ?? DEFAULT_HTML_CONFIG.allowIframes\n    return html`\n      <div class=\"row\">\n        <div class=\"input checkbox metadata\">\n          <ui-checkbox\n            id=\"allow-iframes\"\n            .checked=\"${enabled}\"\n            name=\"allowIframes\"\n            @change=\"${this.handleBooleanChange}\"\n          ></ui-checkbox>\n          <div class=\"label\">\n            <label for=\"allow-iframes\" class=\"body-medium\">Allow Iframes</label>\n            <span class=\"body-small meta\">Users are allowed to add iframes in their HTML content.</span>\n          </div>\n        </div>\n        ${renderHelp('taxonomy', 'html:allowIframes')}\n      </div>\n    `\n  }\n\n  protected renderAllowEmbedded(): TemplateResult {\n    const enabled = this.config?.allowEmbedded ?? DEFAULT_HTML_CONFIG.allowEmbedded\n    return html`\n      <div class=\"row\">\n        <div class=\"input checkbox metadata\">\n          <ui-checkbox\n            id=\"allow-embedded\"\n            .checked=\"${enabled}\"\n            name=\"allowEmbedded\"\n            @change=\"${this.handleBooleanChange}\"\n          ></ui-checkbox>\n          <div class=\"label\">\n            <label for=\"allow-embedded\" class=\"body-medium\">Allow Embedded Content</label>\n            <span class=\"body-small meta\">Users are allowed to add embedded content in their HTML content.</span>\n          </div>\n        </div>\n        ${renderHelp('taxonomy', 'html:allowEmbedded')}\n      </div>\n    `\n  }\n\n  protected renderAllowStyles(): TemplateResult {\n    const enabled = this.config?.allowStyles ?? DEFAULT_HTML_CONFIG.allowStyles\n    return html`\n      <div class=\"row\">\n        <div class=\"input checkbox metadata\">\n          <ui-checkbox\n            id=\"allow-styles\"\n            .checked=\"${enabled}\"\n            name=\"allowStyles\"\n            @change=\"${this.handleBooleanChange}\"\n          ></ui-checkbox>\n          <div class=\"label\">\n            <label for=\"allow-styles\" class=\"body-medium\">Allow Styles</label>\n            <span class=\"body-small meta\">Users are allowed to add styles in their HTML content.</span>\n          </div>\n        </div>\n        ${renderHelp('taxonomy', 'html:allowStyles')}\n      </div>\n    `\n  }\n\n  protected renderAllowDataAttributes(): TemplateResult {\n    const enabled = this.config?.allowDataAttributes ?? DEFAULT_HTML_CONFIG.allowDataAttributes\n    return html`\n      <div class=\"row\">\n        <div class=\"input checkbox metadata\">\n          <ui-checkbox\n            id=\"allow-data-attributes\"\n            .checked=\"${enabled}\"\n            name=\"allowDataAttributes\"\n            @change=\"${this.handleBooleanChange}\"\n          ></ui-checkbox>\n          <div class=\"label\">\n            <label for=\"allow-data-attributes\" class=\"body-medium\">Allow Data Attributes</label>\n            <span class=\"body-small meta\">Users are allowed to add data attributes in their HTML content.</span>\n          </div>\n        </div>\n        ${renderHelp('taxonomy', 'html:allowDataAttributes')}\n      </div>\n    `\n  }\n\n  protected renderRenderModeSelect(): TemplateResult {\n    const value = this.config?.renderMode ?? DEFAULT_HTML_CONFIG.renderMode\n    return html`\n      <div class=\"row input-row\">\n        <ui-select\n          label=\"Render mode\"\n          class=\"input\"\n          name=\"renderMode\"\n          .value=\"${value as string}\"\n          @change=\"${this.handleSelectChange}\"\n        >\n          <ui-option value=\"html\">HTML</ui-option>\n          <ui-option value=\"text\">Text</ui-option>\n          <ui-option value=\"both\">Both</ui-option>\n        </ui-select>\n        ${renderHelp('taxonomy', 'html:renderMode')}\n      </div>\n    `\n  }\n\n  protected renderSanitizeLevelSelect(): TemplateResult {\n    const value = this.config?.sanitizeLevel ?? DEFAULT_HTML_CONFIG.sanitizeLevel\n    return html`\n      <div class=\"row input-row\">\n        <ui-select\n          label=\"Sanitize level\"\n          class=\"input\"\n          name=\"sanitizeLevel\"\n          .value=\"${value as string}\"\n          @change=\"${this.handleSelectChange}\"\n        >\n          <ui-option value=\"strict\">Strict</ui-option>\n          <ui-option value=\"moderate\">Moderate</ui-option>\n          <ui-option value=\"none\">None</ui-option>\n        </ui-select>\n        ${renderHelp('taxonomy', 'html:sanitizeLevel')}\n      </div>\n    `\n  }\n\n  protected renderAllowedTagsInput(): TemplateResult {\n    const value = this.config?.allowedTags ?? DEFAULT_HTML_CONFIG.allowedTags\n    const chips = (value || []).map(\n      (tag, index) =>\n        html`<ui-chip type=\"input\" removable data-index=\"${index}\" @remove=\"${this.handleRemoveTag}\">${tag}</ui-chip>`\n    )\n    return html`\n      <div class=\"row input-row\">\n        <div class=\"input chips-input\">\n          <ui-outlined-text-field\n            class=\"input\"\n            name=\"allowedTags\"\n            label=\"Allowed Tags\"\n            @change=\"${this.handleAllowedTagsChange}\"\n            supportingText=\"Add a tag and press Enter to add it to the list.\"\n          ></ui-outlined-text-field>\n          <ui-chip-set>${chips}</ui-chip-set>\n        </div>\n        ${renderHelp('taxonomy', 'html:allowedTags')}\n      </div>\n    `\n  }\n}\n"]}

package/build/src/modeling/dialogs/MarkdownTaxonomy.d.ts

@@ -0,0 +1,29 @@
+import type { DomainProperty } from '@api-client/core/modeling/DomainProperty.js';
+import { type MarkdownConfig } from '@api-client/core/modeling/definitions/Markdown.js';
+import { TemplateResult } from 'lit';
+import { TaxonomyDialog } from './TaxonomyDialog.js';
+import '../../md/chip/ui-chip-set.js';
+import '../../md/chip/ui-chip.js';
+/**
+ * A class that generates a dialog that allows the user to configure the taxonomy of a markdown field.
+ */
+export declare class MarkdownTaxonomy extends TaxonomyDialog<MarkdownConfig> {
+    domainElement: DomainProperty;
+    static title: string;
+    constructor(domainElement: DomainProperty);
+    protected formCallback(event: Event): Promise<void>;
+    protected handleAllowedTagsChange(event: Event): void;
+    protected handleRemoveTag(event: Event): void;
+    render(): TemplateResult;
+    protected renderAllowImages(): TemplateResult;
+    protected renderAllowLinks(): TemplateResult;
+    protected renderAllowTables(): TemplateResult;
+    protected renderAllowHtml(): TemplateResult;
+    protected renderAllowFootnotes(): TemplateResult;
+    protected renderAllowTaskLists(): TemplateResult;
+    protected renderAllowStrikethrough(): TemplateResult;
+    protected renderRenderModeSelect(): TemplateResult;
+    protected renderSanitizeLevelSelect(): TemplateResult;
+    protected renderAllowedTagsInput(): TemplateResult;
+}
+//# sourceMappingURL=MarkdownTaxonomy.d.ts.map

package/build/src/modeling/dialogs/MarkdownTaxonomy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownTaxonomy.d.ts","sourceRoot":"","sources":["../../../../src/modeling/dialogs/MarkdownTaxonomy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAA;AACjF,OAAO,EAA2B,KAAK,cAAc,EAAE,MAAM,mDAAmD,CAAA;AAEhH,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAA;AAG1C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,OAAO,8BAA8B,CAAA;AACrC,OAAO,0BAA0B,CAAA;AAEjC;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAG/C,aAAa,EAAE,cAAc;IAFhD,OAAgB,KAAK,SAAgC;gBAElC,aAAa,EAAE,cAAc;cAW7B,YAAY,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;IAe5D,SAAS,CAAC,uBAAuB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAerD,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAU7C,MAAM,IAAI,cAAc;IAYxB,SAAS,CAAC,iBAAiB,IAAI,cAAc;IAqB7C,SAAS,CAAC,gBAAgB,IAAI,cAAc;IAqB5C,SAAS,CAAC,iBAAiB,IAAI,cAAc;IAqB7C,SAAS,CAAC,eAAe,IAAI,cAAc;IAqB3C,SAAS,CAAC,oBAAoB,IAAI,cAAc;IAqBhD,SAAS,CAAC,oBAAoB,IAAI,cAAc;IAqBhD,SAAS,CAAC,wBAAwB,IAAI,cAAc;IAqBpD,SAAS,CAAC,sBAAsB,IAAI,cAAc;IAoBlD,SAAS,CAAC,yBAAyB,IAAI,cAAc;IAoBrD,SAAS,CAAC,sBAAsB,IAAI,cAAc;CAsBnD"}