@cas-smartdesign/list-item 7.2.2 → 7.2.4

package/dist/list-item.mjs

@@ -1,13 +1,13 @@
-import { LitElement as m, css as v, unsafeCSS as g, html as a, nothing as f } from "lit";
+import { LitElement as m, css as v, unsafeCSS as b, html as a, nothing as f } from "lit";
 import { property as r } from "lit/decorators/property.js";
-import { unsafeHTML as b } from "lit/directives/unsafe-html.js";
+import { unsafeHTML as g } from "lit/directives/unsafe-html.js";
 import { ifDefined as d } from "lit/directives/if-defined.js";
 import y from "@cas-smartdesign/image-tools";
 const w = ':host{display:block;contain:strict;height:50px}:host([selected]){background-color:#d3e6fa}:host(:not([selected]):hover),:host(:not([selected])[focused]){background-color:#e7f1fa}@media (forced-colors: active){:host([selected]){outline:4px solid}:host(:not([selected]):hover){outline:4px dotted}:host(:not([selected])[focused]){outline:4px dashed}}:host([enable-line-clamp]) .labels>:only-child{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;word-wrap:break-word}.container{display:flex;height:100%;box-sizing:border-box}.container .level-indicator{width:7px;height:100%}.container .level-indicator.level-0{background-color:#a0c3ef}.container .level-indicator.level-1{background-color:#e7c374}.container .level-indicator.level-2{background-color:#bfd596}.container .level-indicator.level-3{background-color:#fd998d}.container .level-indicator.level-4{background-color:#c6e8f5}.container .level-indicator.level-5{background-color:#fde3a4}.container .level-indicator.level-6{background-color:#dcbfe0}.side-content{display:flex;align-items:center;flex-grow:0}.labels{display:flex;flex-direction:column;justify-content:center;flex:1 1 0px;height:100%;line-height:normal;overflow:hidden;padding:var(--sd-list-item-label-content-padding, 0 8px)}.caption,.description{width:100%;font-family:var(--sd-list-item-font-family, "Segoe UI", "Lucida Sans", Arial, sans-serif);font-style:normal;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none;text-decoration:var(--sd-list-item-text-decoration, inherit)}.caption em,.description em{font-weight:bolder}.caption{font-size:var(--sd-list-item-caption-font-size, 16px);color:var(--sd-list-item-caption-text-color, #111);font-weight:var(--sd-list-item-caption-font-weight, normal)}.description{font-size:var(--sd-list-item-description-font-size, 13px);color:var(--sd-list-item-description-text-color, #767676);font-weight:var(--sd-list-item-description-font-weight, normal)}.icon-wrapper{width:var(--sd-list-item-icon-wrapper-width, 45px);height:100%;display:flex;align-items:center;justify-content:center}.icon-wrapper .icon{min-height:var(--sd-list-item-icon-size, 24px);min-width:var(--sd-list-item-icon-size, 24px);background-repeat:no-repeat;background-position:center;background-size:cover}';
-var x = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (i, t, e, o) => {
-  for (var c = o > 1 ? void 0 : o ? k(t, e) : t, p = i.length - 1, h; p >= 0; p--)
-    (h = i[p]) && (c = (o ? h(t, e, c) : h(c)) || c);
-  return o && c && x(t, e, c), c;
+var x = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (t, i, e, o) => {
+  for (var c = o > 1 ? void 0 : o ? k(i, e) : i, p = t.length - 1, h; p >= 0; p--)
+    (h = t[p]) && (c = (o ? h(i, e, c) : h(c)) || c);
+  return o && c && x(i, e, c), c;
 }, s;
 const n = (s = class extends m {
   constructor() {
@@ -16,7 +16,7 @@ const n = (s = class extends m {
   static get styles() {
     return [
       v`
-                ${g(w)}
+                ${b(w)}
             `
     ];
   }
@@ -24,7 +24,7 @@ const n = (s = class extends m {
     return a`
             <div class="container">
                 ${this.getLevelIndicators().map(
-      (t, e) => a` <div class="level-indicator level-${e}"></div> `
+      (i, e) => a` <div class="level-indicator level-${e}"></div> `
     )}
                 <div class="side-content">
                     <slot name="left-content"></slot>
@@ -42,12 +42,12 @@ const n = (s = class extends m {
   }
   renderIcon() {
     if (this.icon || this.iconPlaceholder) {
-      const t = this.iconBackgroundColor != null ? `background-color:${this.iconBackgroundColor}` : void 0;
+      const i = this.iconBackgroundColor != null ? `background-color:${this.iconBackgroundColor}` : void 0;
       return a`
                 <div
                     class="icon-wrapper"
                     @pointerdown="${this.handleIconClick}"
-                    style="${d(t)}"
+                    style="${d(i)}"
                     role="img"
                     aria-label="${d(this.iconAttrAriaLabel)}"
                     title="${d(this.iconAttrTitle)}"
@@ -58,30 +58,30 @@ const n = (s = class extends m {
     }
     return f;
   }
-  renderLabel(t, e, o) {
+  renderLabel(i, e, o) {
     return e ? a`
-                  <div class="${t}" title="${d(o)}">
-                      ${this.contentMode === "html" ? b(e) : e}
+                  <div class="${i}" title="${d(o)}">
+                      ${this.contentMode === "html" ? g(e) : e}
                   </div>
               ` : f;
   }
-  updated(t) {
-    super.updated(t), (t.has("icon") || t.has("iconPlaceholder")) && (this.icon || this.iconPlaceholder) && y.showImage(this.shadowRoot.querySelector(".icon"), this.icon, this.iconPlaceholder), t.has("selected") && this.setAttribute("aria-selected", String(this.selected));
+  updated(i) {
+    super.updated(i), (i.has("icon") || i.has("iconPlaceholder")) && (this.icon || this.iconPlaceholder) && y.showImage(this.shadowRoot.querySelector(".icon"), this.icon, this.iconPlaceholder), i.has("selected") && this.setAttribute("aria-selected", String(this.selected));
   }
   /**
    * Returns the width in pixel which is missing to show the caption and description without ellipsis.
    */
   get missingWidthForTexts() {
-    const t = this.enableLineClamp;
+    const i = this.enableLineClamp;
     this.removeAttribute("enable-line-clamp");
     let e = 0;
     const o = this.shadowRoot.querySelector(".caption");
     o && (e += o.scrollWidth - o.clientWidth);
     const c = this.shadowRoot.querySelector(".description");
-    return c && (e = Math.max(e, c.scrollWidth - c.clientWidth)), e > 0 && e++, t && this.setAttribute("enable-line-clamp", ""), e;
+    return c && (e = Math.max(e, c.scrollWidth - c.clientWidth)), e > 0 && e++, i && this.setAttribute("enable-line-clamp", ""), e;
   }
-  handleIconClick(t) {
-    !this.disabled && !this.dispatchEvent(new PointerEvent("list-item-icon-click", t)) && t.preventDefault();
+  handleIconClick(i) {
+    !this.disabled && !this.dispatchEvent(new PointerEvent("list-item-icon-click", i)) && i.preventDefault();
   }
   getLevelIndicators() {
     return this.level ? Array(Number(this.level)).fill(null) : [];
@@ -117,7 +117,14 @@ l([
   r({ type: Boolean, reflect: !0, attribute: "enable-line-clamp" })
 ], n.prototype, "enableLineClamp", 2);
 l([
-  r({ type: Boolean, reflect: !0, attribute: "aria-disabled" })
+  r({
+    converter: {
+      fromAttribute: (t) => t == "true",
+      toAttribute: (t) => t
+    },
+    reflect: !0,
+    attribute: "aria-disabled"
+  })
 ], n.prototype, "disabled", 2);
 l([
   r({ type: String, attribute: "icon-attr-aria-label" })
@@ -135,15 +142,15 @@ l([
   r({ type: String, attribute: "icon-attr-title" })
 ], n.prototype, "iconAttrTitle", 2);
 let u = n;
-const $ = (i, t) => {
+const $ = (t, i) => {
   const e = document.createElement(u.ID);
-  if (i) {
-    if (e.caption = i.caption, e.description = i.description, e.icon = i.icon, e.iconBackgroundColor = i.iconBackgroundColor, e.iconPlaceholder = i.iconPlaceholder, e.level = i.level, e.disabled = i.disabled, i.contentMode && (e.contentMode = i.contentMode), i.leftContentGenerator) {
-      const o = i.leftContentGenerator(i, e);
+  if (t) {
+    if (e.caption = t.caption, e.description = t.description, e.icon = t.icon, e.iconBackgroundColor = t.iconBackgroundColor, e.iconPlaceholder = t.iconPlaceholder, e.level = t.level, e.disabled = t.disabled, t.contentMode && (e.contentMode = t.contentMode), t.leftContentGenerator) {
+      const o = t.leftContentGenerator(t, e);
       o && (o.slot = "left-content", e.appendChild(o));
     }
-    if (i.rightContentGenerator) {
-      const o = i.rightContentGenerator(i, e);
+    if (t.rightContentGenerator) {
+      const o = t.rightContentGenerator(t, e);
       o && (o.slot = "right-content", e.appendChild(o));
     }
   }

package/dist/list-item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.mjs","sources":["../list-item.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS, PropertyValues, css, nothing, TemplateResult } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport ImageTools from \"@cas-smartdesign/image-tools\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [ListItem.ID]: ListItem;\n    }\n}\n\nimport styles from \"./styles.scss?inline\";\n\nexport interface ItemData {\n    caption?: string;\n    description?: string;\n    leftContentGenerator?: (data: ItemData, element: ListItem) => HTMLElement;\n    rightContentGenerator?: (data: ItemData, element: ListItem) => HTMLElement;\n    icon?: string;\n    iconBackgroundColor?: string;\n    iconPlaceholder?: string;\n    level?: number;\n    contentMode?: ContentMode;\n    disabled?: boolean;\n}\n\nexport type ContentMode = \"text\" | \"html\";\n\nexport default class ListItem extends LitElement {\n    public static readonly ID = \"sd-list-item\";\n    public static ensureDefined = (): void => {\n        if (!customElements.get(ListItem.ID)) {\n            customElements.define(ListItem.ID, ListItem);\n        }\n    };\n\n    @property({ type: String })\n    public caption: string;\n    @property({ type: String })\n    public description: string;\n    @property({ type: Boolean })\n    public selected: boolean;\n    @property({ type: String })\n    public icon: string;\n    @property({ type: String })\n    public iconBackgroundColor: string;\n    @property({ type: String })\n    public iconPlaceholder: string;\n    @property({ type: Number })\n    public level: number;\n    @property()\n    public contentMode: ContentMode = \"text\";\n    @property({ type: Boolean, reflect: true, attribute: \"enable-line-clamp\" })\n    public enableLineClamp: boolean;\n    @property({ type: Boolean, reflect: true, attribute: \"aria-disabled\" })\n    public disabled: boolean;\n\n    // aria attributes\n    @property({ type: String, attribute: \"icon-attr-aria-label\" })\n    public iconAttrAriaLabel: string;\n    @property({ type: String, reflect: true })\n    public role = \"option\";\n\n    // title attributes\n    @property({ type: String, attribute: \"caption-attr-title\" })\n    public captionAttrTitle: string;\n    @property({ type: String, attribute: \"description-attr-title\" })\n    public descriptionAttrTitle: string;\n    @property({ type: String, attribute: \"icon-attr-title\" })\n    public iconAttrTitle: string;\n\n    static get styles() {\n        return [\n            css`\n                ${unsafeCSS(styles)}\n            `,\n        ];\n    }\n\n    public render(): TemplateResult {\n        return html`\n            <div class=\"container\">\n                ${this.getLevelIndicators().map(\n                    (_, level) => html` <div class=\"level-indicator level-${level}\"></div> `,\n                )}\n                <div class=\"side-content\">\n                    <slot name=\"left-content\"></slot>\n                    ${this.renderIcon()}\n                </div>\n                <div class=\"labels\">\n                    ${this.renderLabel(\"caption\", this.caption, this.captionAttrTitle)}\n                    ${this.renderLabel(\"description\", this.description, this.descriptionAttrTitle)}\n                </div>\n                <div class=\"side-content\">\n                    <slot name=\"right-content\"></slot>\n                </div>\n            </div>\n        `;\n    }\n\n    private renderIcon() {\n        if (this.icon || this.iconPlaceholder) {\n            const iconBackgroundStyle =\n                this.iconBackgroundColor != null ? `background-color:${this.iconBackgroundColor}` : undefined;\n            return html`\n                <div\n                    class=\"icon-wrapper\"\n                    @pointerdown=\"${this.handleIconClick}\"\n                    style=\"${ifDefined(iconBackgroundStyle)}\"\n                    role=\"img\"\n                    aria-label=\"${ifDefined(this.iconAttrAriaLabel)}\"\n                    title=\"${ifDefined(this.iconAttrTitle)}\"\n                >\n                    <div class=\"icon\"></div>\n                </div>\n            `;\n        }\n        return nothing;\n    }\n\n    private renderLabel(className: string, value: string, title: string) {\n        return value\n            ? html`\n                  <div class=\"${className}\" title=\"${ifDefined(title)}\">\n                      ${this.contentMode === \"html\" ? unsafeHTML(value) : value}\n                  </div>\n              `\n            : nothing;\n    }\n\n    public updated(changedProperties: PropertyValues): void {\n        super.updated(changedProperties);\n        if (\n            (changedProperties.has(\"icon\") || changedProperties.has(\"iconPlaceholder\")) &&\n            (this.icon || this.iconPlaceholder)\n        ) {\n            ImageTools.showImage(this.shadowRoot.querySelector(\".icon\"), this.icon, this.iconPlaceholder);\n        }\n        if (changedProperties.has(\"selected\")) {\n            this.setAttribute(\"aria-selected\", String(this.selected));\n        }\n    }\n\n    /**\n     * Returns the width in pixel which is missing to show the caption and description without ellipsis.\n     */\n    public get missingWidthForTexts(): number {\n        const originalLineClamp = this.enableLineClamp;\n        this.removeAttribute(\"enable-line-clamp\"); // Need to remove immediately, otherwise the calculation may fail.\n\n        let requiredWidth = 0;\n\n        const captionElement = this.shadowRoot.querySelector(\".caption\");\n        if (captionElement) {\n            requiredWidth += captionElement.scrollWidth - captionElement.clientWidth;\n        }\n\n        const descriptionElement = this.shadowRoot.querySelector(\".description\");\n        if (descriptionElement) {\n            requiredWidth = Math.max(requiredWidth, descriptionElement.scrollWidth - descriptionElement.clientWidth);\n        }\n        if (requiredWidth > 0) {\n            requiredWidth++; // Additional one pixel to ensure ellipsis is not needed anymore.\n        }\n        if (originalLineClamp) {\n            this.setAttribute(\"enable-line-clamp\", \"\");\n        }\n        return requiredWidth;\n    }\n\n    private handleIconClick(event: PointerEvent): void {\n        if (!this.disabled && !this.dispatchEvent(new PointerEvent(\"list-item-icon-click\", event))) {\n            event.preventDefault();\n        }\n    }\n\n    private getLevelIndicators(): number[] {\n        if (!this.level) {\n            return [];\n        }\n        // fill is needed because the ArrayConstructor\n        // result an array with \"empty\" values in it\n        // which are skipped when iterating\n        return Array(Number(this.level)).fill(null);\n    }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const generator = (data: ItemData, _index: number): ListItem => {\n    const listItem = document.createElement(ListItem.ID) as ListItem;\n    if (data) {\n        listItem.caption = data.caption;\n        listItem.description = data.description;\n        listItem.icon = data.icon;\n        listItem.iconBackgroundColor = data.iconBackgroundColor;\n        listItem.iconPlaceholder = data.iconPlaceholder;\n        listItem.level = data.level;\n        listItem.disabled = data.disabled;\n        if (data.contentMode) {\n            listItem.contentMode = data.contentMode;\n        }\n        if (data.leftContentGenerator) {\n            const leftContent = data.leftContentGenerator(data, listItem);\n            if (leftContent) {\n                leftContent.slot = \"left-content\";\n                listItem.appendChild(leftContent);\n            }\n        }\n        if (data.rightContentGenerator) {\n            const rightContent = data.rightContentGenerator(data, listItem);\n            if (rightContent) {\n                rightContent.slot = \"right-content\";\n                listItem.appendChild(rightContent);\n            }\n        }\n    }\n    return listItem;\n};\n\nListItem.ensureDefined();\n"],"names":["_ListItem","_a","LitElement","css","unsafeCSS","styles","html","_","level","iconBackgroundStyle","ifDefined","nothing","className","value","title","unsafeHTML","changedProperties","ImageTools","originalLineClamp","requiredWidth","captionElement","descriptionElement","event","__decorateClass","property","ListItem","generator","data","_index","listItem","leftContent","rightContent"],"mappings":"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"}
+{"version":3,"file":"list-item.mjs","sources":["../list-item.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS, PropertyValues, css, nothing, TemplateResult } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport ImageTools from \"@cas-smartdesign/image-tools\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [ListItem.ID]: ListItem;\n    }\n}\n\nimport styles from \"./styles.scss?inline\";\n\nexport interface ItemData {\n    caption?: string;\n    description?: string;\n    leftContentGenerator?: (data: ItemData, element: ListItem) => HTMLElement;\n    rightContentGenerator?: (data: ItemData, element: ListItem) => HTMLElement;\n    icon?: string;\n    iconBackgroundColor?: string;\n    iconPlaceholder?: string;\n    level?: number;\n    contentMode?: ContentMode;\n    disabled?: boolean;\n}\n\nexport type ContentMode = \"text\" | \"html\";\n\nexport default class ListItem extends LitElement {\n    public static readonly ID = \"sd-list-item\";\n    public static ensureDefined = (): void => {\n        if (!customElements.get(ListItem.ID)) {\n            customElements.define(ListItem.ID, ListItem);\n        }\n    };\n\n    @property({ type: String })\n    public caption: string;\n    @property({ type: String })\n    public description: string;\n    @property({ type: Boolean })\n    public selected: boolean;\n    @property({ type: String })\n    public icon: string;\n    @property({ type: String })\n    public iconBackgroundColor: string;\n    @property({ type: String })\n    public iconPlaceholder: string;\n    @property({ type: Number })\n    public level: number;\n    @property()\n    public contentMode: ContentMode = \"text\";\n    @property({ type: Boolean, reflect: true, attribute: \"enable-line-clamp\" })\n    public enableLineClamp: boolean;\n    @property({\n        converter: {\n            fromAttribute: (value) => value == \"true\",\n            toAttribute: (value) => value,\n        },\n        reflect: true,\n        attribute: \"aria-disabled\",\n    })\n    public disabled: boolean;\n\n    // aria attributes\n    @property({ type: String, attribute: \"icon-attr-aria-label\" })\n    public iconAttrAriaLabel: string;\n    @property({ type: String, reflect: true })\n    public role = \"option\";\n\n    // title attributes\n    @property({ type: String, attribute: \"caption-attr-title\" })\n    public captionAttrTitle: string;\n    @property({ type: String, attribute: \"description-attr-title\" })\n    public descriptionAttrTitle: string;\n    @property({ type: String, attribute: \"icon-attr-title\" })\n    public iconAttrTitle: string;\n\n    static get styles() {\n        return [\n            css`\n                ${unsafeCSS(styles)}\n            `,\n        ];\n    }\n\n    public render(): TemplateResult {\n        return html`\n            <div class=\"container\">\n                ${this.getLevelIndicators().map(\n                    (_, level) => html` <div class=\"level-indicator level-${level}\"></div> `,\n                )}\n                <div class=\"side-content\">\n                    <slot name=\"left-content\"></slot>\n                    ${this.renderIcon()}\n                </div>\n                <div class=\"labels\">\n                    ${this.renderLabel(\"caption\", this.caption, this.captionAttrTitle)}\n                    ${this.renderLabel(\"description\", this.description, this.descriptionAttrTitle)}\n                </div>\n                <div class=\"side-content\">\n                    <slot name=\"right-content\"></slot>\n                </div>\n            </div>\n        `;\n    }\n\n    private renderIcon() {\n        if (this.icon || this.iconPlaceholder) {\n            const iconBackgroundStyle =\n                this.iconBackgroundColor != null ? `background-color:${this.iconBackgroundColor}` : undefined;\n            return html`\n                <div\n                    class=\"icon-wrapper\"\n                    @pointerdown=\"${this.handleIconClick}\"\n                    style=\"${ifDefined(iconBackgroundStyle)}\"\n                    role=\"img\"\n                    aria-label=\"${ifDefined(this.iconAttrAriaLabel)}\"\n                    title=\"${ifDefined(this.iconAttrTitle)}\"\n                >\n                    <div class=\"icon\"></div>\n                </div>\n            `;\n        }\n        return nothing;\n    }\n\n    private renderLabel(className: string, value: string, title: string) {\n        return value\n            ? html`\n                  <div class=\"${className}\" title=\"${ifDefined(title)}\">\n                      ${this.contentMode === \"html\" ? unsafeHTML(value) : value}\n                  </div>\n              `\n            : nothing;\n    }\n\n    public updated(changedProperties: PropertyValues): void {\n        super.updated(changedProperties);\n        if (\n            (changedProperties.has(\"icon\") || changedProperties.has(\"iconPlaceholder\")) &&\n            (this.icon || this.iconPlaceholder)\n        ) {\n            ImageTools.showImage(this.shadowRoot.querySelector(\".icon\"), this.icon, this.iconPlaceholder);\n        }\n        if (changedProperties.has(\"selected\")) {\n            this.setAttribute(\"aria-selected\", String(this.selected));\n        }\n    }\n\n    /**\n     * Returns the width in pixel which is missing to show the caption and description without ellipsis.\n     */\n    public get missingWidthForTexts(): number {\n        const originalLineClamp = this.enableLineClamp;\n        this.removeAttribute(\"enable-line-clamp\"); // Need to remove immediately, otherwise the calculation may fail.\n\n        let requiredWidth = 0;\n\n        const captionElement = this.shadowRoot.querySelector(\".caption\");\n        if (captionElement) {\n            requiredWidth += captionElement.scrollWidth - captionElement.clientWidth;\n        }\n\n        const descriptionElement = this.shadowRoot.querySelector(\".description\");\n        if (descriptionElement) {\n            requiredWidth = Math.max(requiredWidth, descriptionElement.scrollWidth - descriptionElement.clientWidth);\n        }\n        if (requiredWidth > 0) {\n            requiredWidth++; // Additional one pixel to ensure ellipsis is not needed anymore.\n        }\n        if (originalLineClamp) {\n            this.setAttribute(\"enable-line-clamp\", \"\");\n        }\n        return requiredWidth;\n    }\n\n    private handleIconClick(event: PointerEvent): void {\n        if (!this.disabled && !this.dispatchEvent(new PointerEvent(\"list-item-icon-click\", event))) {\n            event.preventDefault();\n        }\n    }\n\n    private getLevelIndicators(): number[] {\n        if (!this.level) {\n            return [];\n        }\n        // fill is needed because the ArrayConstructor\n        // result an array with \"empty\" values in it\n        // which are skipped when iterating\n        return Array(Number(this.level)).fill(null);\n    }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const generator = (data: ItemData, _index: number): ListItem => {\n    const listItem = document.createElement(ListItem.ID) as ListItem;\n    if (data) {\n        listItem.caption = data.caption;\n        listItem.description = data.description;\n        listItem.icon = data.icon;\n        listItem.iconBackgroundColor = data.iconBackgroundColor;\n        listItem.iconPlaceholder = data.iconPlaceholder;\n        listItem.level = data.level;\n        listItem.disabled = data.disabled;\n        if (data.contentMode) {\n            listItem.contentMode = data.contentMode;\n        }\n        if (data.leftContentGenerator) {\n            const leftContent = data.leftContentGenerator(data, listItem);\n            if (leftContent) {\n                leftContent.slot = \"left-content\";\n                listItem.appendChild(leftContent);\n            }\n        }\n        if (data.rightContentGenerator) {\n            const rightContent = data.rightContentGenerator(data, listItem);\n            if (rightContent) {\n                rightContent.slot = \"right-content\";\n                listItem.appendChild(rightContent);\n            }\n        }\n    }\n    return listItem;\n};\n\nListItem.ensureDefined();\n"],"names":["_ListItem","_a","LitElement","css","unsafeCSS","styles","html","_","level","iconBackgroundStyle","ifDefined","nothing","className","value","title","unsafeHTML","changedProperties","ImageTools","originalLineClamp","requiredWidth","captionElement","descriptionElement","event","__decorateClass","property","ListItem","generator","data","_index","listItem","leftContent","rightContent"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cas-smartdesign/list-item",
-  "version": "7.2.2",
+  "version": "7.2.4",
   "description": "A list item element based on LitElement",
   "main": "dist/list-item-with-externals.js",
   "module": "dist/list-item.mjs",
@@ -8,11 +8,11 @@
   "types": "dist/list-item.d.ts",
   "dependencies": {
     "lit": "^2.8.0",
-    "@cas-smartdesign/image-tools": "^3.0.1"
+    "@cas-smartdesign/image-tools": "^3.0.2"
   },
   "devDependencies": {
-    "@cas-smartdesign/element-preview": "^0.2.1",
-    "@cas-smartdesign/license-generator": "^1.6.1"
+    "@cas-smartdesign/element-preview": "^0.2.2",
+    "@cas-smartdesign/license-generator": "^1.6.3"
   },
   "files": [
     "dist",

package/readme.md

@@ -69,5 +69,3 @@ All of these properties can be defined with a corresponding (by default with low
 
 - `list-item-icon-click`
   - This event is dispatched when non-disabled list item icon is clicked
-
-## Examples