@cas-smartdesign/list-item 7.4.1 → 7.4.3

package/dist/list-item.d.ts

@@ -7,6 +7,7 @@ declare global {
 export interface ItemData {
     caption?: string;
     description?: string;
+    descriptionIcon?: string;
     leftContentGenerator?: (data: ItemData, element: ListItem) => HTMLElement;
     rightContentGenerator?: (data: ItemData, element: ListItem) => HTMLElement;
     icon?: string;
@@ -22,6 +23,7 @@ export default class ListItem extends LitElement {
     static ensureDefined: () => void;
     caption: string;
     description: string;
+    descriptionIcon: string;
     selected: boolean;
     icon: string;
     iconBackgroundColor: string;

package/dist/list-item.mjs

@@ -1,12 +1,12 @@
-import { LitElement as m, unsafeCSS as v, css as b, html as a, nothing as f } from "lit";
+import { LitElement as m, unsafeCSS as v, css as g, html as d, nothing as h } from "lit";
 import { property as o } from "lit/decorators/property.js";
-import { unsafeHTML as g } from "lit/directives/unsafe-html.js";
-import { ifDefined as d } from "lit/directives/if-defined.js";
+import { unsafeHTML as b } from "lit/directives/unsafe-html.js";
+import { ifDefined as a } from "lit/directives/if-defined.js";
 import { placeholderDirective as y } from "@cas-smartdesign/image-tools";
-const x = ':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;overflow-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}';
+const x = ':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;overflow-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)}.description.with-icon{display:flex;align-items:center;gap:4px}.description.with-icon .description-icon{width:var(--sd-list-item-description-font-size, 13px);height:var(--sd-list-item-description-font-size, 13px);background-repeat:no-repeat;background-position:bottom;background-size:90%}.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 w = Object.defineProperty, n = (t, r, e, l) => {
-  for (var c = void 0, p = t.length - 1, h; p >= 0; p--)
-    (h = t[p]) && (c = h(r, e, c) || c);
+  for (var c = void 0, p = t.length - 1, f; p >= 0; p--)
+    (f = t[p]) && (c = f(r, e, c) || c);
   return c && w(r, e, c), c;
 }, s;
 const i = (s = class extends m {
@@ -15,16 +15,16 @@ const i = (s = class extends m {
   }
   static get styles() {
     return [
-      b`
+      g`
                 ${v(x)}
             `
     ];
   }
   render() {
-    return a`
+    return d`
             <div class="container">
                 ${this.getLevelIndicators().map(
-      (r, e) => a` <div class="level-indicator level-${e}"></div> `
+      (r, e) => d` <div class="level-indicator level-${e}"></div> `
     )}
                 <div class="side-content">
                     <slot name="left-content"></slot>
@@ -32,7 +32,12 @@ const i = (s = class extends m {
                 </div>
                 <div class="labels">
                     ${this.renderLabel("caption", this.caption, this.captionAttrTitle)}
-                    ${this.renderLabel("description", this.description, this.descriptionAttrTitle)}
+                    ${this.renderLabel(
+      "description",
+      this.description,
+      this.descriptionAttrTitle,
+      this.descriptionIcon
+    )}
                 </div>
                 <div class="side-content">
                     <slot name="right-content"></slot>
@@ -41,23 +46,24 @@ const i = (s = class extends m {
         `;
   }
   renderIcon() {
-    return this.icon || this.iconPlaceholder ? a`<div
+    return this.icon || this.iconPlaceholder ? d`<div
                 class="icon-wrapper"
                 @pointerdown="${this.handleIconClick}"
-                style="background-color:${d(this.iconBackgroundColor)};"
+                style="background-color:${a(this.iconBackgroundColor)};"
                 role="img"
-                aria-label="${d(this.iconAttrAriaLabel)}"
-                title="${d(this.iconAttrTitle)}"
+                aria-label="${a(this.iconAttrAriaLabel)}"
+                title="${a(this.iconAttrTitle)}"
             >
                 <div class="icon" style="background-image:${y(this.icon, this.iconPlaceholder)}"></div>
-            </div> ` : f;
+            </div> ` : h;
   }
-  renderLabel(r, e, l) {
-    return e ? a`
-                  <div class="${r}" title="${d(l)}">
-                      ${this.contentMode === "html" ? g(e) : e}
+  renderLabel(r, e, l, c) {
+    return e ? d`
+                  <div class="${r} ${c ? "with-icon" : ""}" title="${a(l)}">
+                      ${c ? d` <div class="${r}-icon" style="background-image:url('${c}')" aria-hidden="true"></div> ` : h}
+                      ${this.contentMode === "html" ? b(e) : e}
                   </div>
-              ` : f;
+              ` : h;
   }
   updated(r) {
     super.updated(r), r.has("selected") && this.setAttribute("aria-selected", String(this.selected));
@@ -89,6 +95,9 @@ n([
 n([
   o({ type: String })
 ], i.prototype, "description");
+n([
+  o({ type: String })
+], i.prototype, "descriptionIcon");
 n([
   o({ type: Boolean })
 ], i.prototype, "selected");
@@ -136,10 +145,10 @@ n([
   o({ type: String, attribute: "icon-attr-title" })
 ], i.prototype, "iconAttrTitle");
 let u = i;
-const $ = (t, r) => {
+const I = (t, r) => {
   const e = document.createElement(u.ID);
   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) {
+    if (e.caption = t.caption, e.description = t.description, e.descriptionIcon = t.descriptionIcon, 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 l = t.leftContentGenerator(t, e);
       l && (l.slot = "left-content", e.appendChild(l));
     }
@@ -153,6 +162,6 @@ const $ = (t, r) => {
 u.ensureDefined();
 export {
   u as default,
-  $ as generator
+  I as generator
 };
 //# sourceMappingURL=list-item.mjs.map

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 { placeholderDirective as placeholder } 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            return html`<div\n                class=\"icon-wrapper\"\n                @pointerdown=\"${this.handleIconClick}\"\n                style=\"background-color:${ifDefined(this.iconBackgroundColor)};\"\n                role=\"img\"\n                aria-label=\"${ifDefined(this.iconAttrAriaLabel)}\"\n                title=\"${ifDefined(this.iconAttrTitle)}\"\n            >\n                <div class=\"icon\" style=\"background-image:${placeholder(this.icon, this.iconPlaceholder)}\"></div>\n            </div> `;\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 (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\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","ifDefined","placeholder","nothing","className","value","title","unsafeHTML","changedProperties","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 { placeholderDirective as placeholder } 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    descriptionIcon?: 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: String })\n    descriptionIcon: 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(\n                        \"description\",\n                        this.description,\n                        this.descriptionAttrTitle,\n                        this.descriptionIcon,\n                    )}\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            return html`<div\n                class=\"icon-wrapper\"\n                @pointerdown=\"${this.handleIconClick}\"\n                style=\"background-color:${ifDefined(this.iconBackgroundColor)};\"\n                role=\"img\"\n                aria-label=\"${ifDefined(this.iconAttrAriaLabel)}\"\n                title=\"${ifDefined(this.iconAttrTitle)}\"\n            >\n                <div class=\"icon\" style=\"background-image:${placeholder(this.icon, this.iconPlaceholder)}\"></div>\n            </div> `;\n        }\n        return nothing;\n    }\n\n    private renderLabel(className: string, value: string, title: string, iconUrl?: string) {\n        return value\n            ? html`\n                  <div class=\"${className} ${iconUrl ? \"with-icon\" : \"\"}\" title=\"${ifDefined(title)}\">\n                      ${iconUrl\n                          ? html` <div class=\"${className}-icon\" style=\"background-image:url('${iconUrl}')\" aria-hidden=\"true\"></div> `\n                          : nothing}\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 (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\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.descriptionIcon = data.descriptionIcon;\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","ifDefined","placeholder","nothing","className","value","title","iconUrl","unsafeHTML","changedProperties","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.4.1",
+  "version": "7.4.3",
   "description": "A list item element based on LitElement",
   "main": "dist/list-item-with-externals.js",
   "module": "dist/list-item.mjs",

package/readme.md

@@ -12,6 +12,8 @@ The main entry point requires ES6 & support for Custom Elements v1
   - Defines the text of the caption component of the item
 - `description`: string
   - Defines the text of the description component of the item
+- `descriptionIcon`: string
+  - Defines the icon of the description component of the item
 - `selected`: boolean
   - Defines whether if the item is in selected state
 - `icon`: string