@cas-smartdesign/list-item 7.3.0 → 7.4.0

package/dist/list-item.mjs

@@ -1,22 +1,22 @@
-import { LitElement as m, unsafeCSS as v, css as g, html as a, nothing as f } from "lit";
-import { property as n } from "lit/decorators/property.js";
-import { unsafeHTML as b } from "lit/directives/unsafe-html.js";
+import { LitElement as m, unsafeCSS as v, css as b, html as a, nothing as f } 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 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;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}';
-var x = Object.defineProperty, r = (t, i, e, l) => {
+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}';
+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(i, e, c) || c);
-  return c && x(i, e, c), c;
+    (h = t[p]) && (c = h(r, e, c) || c);
+  return c && w(r, e, c), c;
 }, s;
-const o = (s = class extends m {
+const i = (s = class extends m {
   constructor() {
     super(...arguments), this.contentMode = "text", this.role = "option";
   }
   static get styles() {
     return [
-      g`
-                ${v(w)}
+      b`
+                ${v(x)}
             `
     ];
   }
@@ -24,7 +24,7 @@ const o = (s = class extends m {
     return a`
             <div class="container">
                 ${this.getLevelIndicators().map(
-      (i, e) => a` <div class="level-indicator level-${e}"></div> `
+      (r, e) => a` <div class="level-indicator level-${e}"></div> `
     )}
                 <div class="side-content">
                     <slot name="left-content"></slot>
@@ -41,47 +41,41 @@ const o = (s = class extends m {
         `;
   }
   renderIcon() {
-    if (this.icon || this.iconPlaceholder) {
-      const i = this.iconBackgroundColor != null ? `background-color:${this.iconBackgroundColor}` : void 0;
-      return a`
-                <div
-                    class="icon-wrapper"
-                    @pointerdown="${this.handleIconClick}"
-                    style="${d(i)}"
-                    role="img"
-                    aria-label="${d(this.iconAttrAriaLabel)}"
-                    title="${d(this.iconAttrTitle)}"
-                >
-                    <div class="icon"></div>
-                </div>
-            `;
-    }
-    return f;
+    return this.icon || this.iconPlaceholder ? a`<div
+                class="icon-wrapper"
+                @pointerdown="${this.handleIconClick}"
+                style="background-color:${d(this.iconBackgroundColor)};"
+                role="img"
+                aria-label="${d(this.iconAttrAriaLabel)}"
+                title="${d(this.iconAttrTitle)}"
+            >
+                <div class="icon" style="background-image:${y(this.icon, this.iconPlaceholder)}"></div>
+            </div> ` : f;
   }
-  renderLabel(i, e, l) {
+  renderLabel(r, e, l) {
     return e ? a`
-                  <div class="${i}" title="${d(l)}">
-                      ${this.contentMode === "html" ? b(e) : e}
+                  <div class="${r}" title="${d(l)}">
+                      ${this.contentMode === "html" ? g(e) : e}
                   </div>
               ` : f;
   }
-  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));
+  updated(r) {
+    super.updated(r), r.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 i = this.enableLineClamp;
+    const r = this.enableLineClamp;
     this.removeAttribute("enable-line-clamp");
     let e = 0;
     const l = this.shadowRoot.querySelector(".caption");
     l && (e += l.scrollWidth - l.clientWidth);
     const c = this.shadowRoot.querySelector(".description");
-    return c && (e = Math.max(e, c.scrollWidth - c.clientWidth)), e > 0 && e++, i && this.setAttribute("enable-line-clamp", ""), e;
+    return c && (e = Math.max(e, c.scrollWidth - c.clientWidth)), e > 0 && e++, r && this.setAttribute("enable-line-clamp", ""), e;
   }
-  handleIconClick(i) {
-    !this.disabled && !this.dispatchEvent(new PointerEvent("list-item-icon-click", i)) && i.preventDefault();
+  handleIconClick(r) {
+    !this.disabled && !this.dispatchEvent(new PointerEvent("list-item-icon-click", r)) && r.preventDefault();
   }
   getLevelIndicators() {
     return this.level ? Array(Number(this.level)).fill(null) : [];
@@ -89,35 +83,35 @@ const o = (s = class extends m {
 }, s.ID = "sd-list-item", s.ensureDefined = () => {
   customElements.get(s.ID) || customElements.define(s.ID, s);
 }, s);
-r([
-  n({ type: String })
-], o.prototype, "caption");
-r([
-  n({ type: String })
-], o.prototype, "description");
-r([
-  n({ type: Boolean })
-], o.prototype, "selected");
-r([
-  n({ type: String })
-], o.prototype, "icon");
-r([
-  n({ type: String })
-], o.prototype, "iconBackgroundColor");
-r([
-  n({ type: String })
-], o.prototype, "iconPlaceholder");
-r([
-  n({ type: Number })
-], o.prototype, "level");
-r([
-  n()
-], o.prototype, "contentMode");
-r([
-  n({ type: Boolean, reflect: !0, attribute: "enable-line-clamp" })
-], o.prototype, "enableLineClamp");
-r([
-  n({
+n([
+  o({ type: String })
+], i.prototype, "caption");
+n([
+  o({ type: String })
+], i.prototype, "description");
+n([
+  o({ type: Boolean })
+], i.prototype, "selected");
+n([
+  o({ type: String })
+], i.prototype, "icon");
+n([
+  o({ type: String })
+], i.prototype, "iconBackgroundColor");
+n([
+  o({ type: String })
+], i.prototype, "iconPlaceholder");
+n([
+  o({ type: Number })
+], i.prototype, "level");
+n([
+  o()
+], i.prototype, "contentMode");
+n([
+  o({ type: Boolean, reflect: !0, attribute: "enable-line-clamp" })
+], i.prototype, "enableLineClamp");
+n([
+  o({
     converter: {
       fromAttribute: (t) => t == "true",
       toAttribute: (t) => t
@@ -125,24 +119,24 @@ r([
     reflect: !0,
     attribute: "aria-disabled"
   })
-], o.prototype, "disabled");
-r([
-  n({ type: String, attribute: "icon-attr-aria-label" })
-], o.prototype, "iconAttrAriaLabel");
-r([
-  n({ type: String, reflect: !0 })
-], o.prototype, "role");
-r([
-  n({ type: String, attribute: "caption-attr-title" })
-], o.prototype, "captionAttrTitle");
-r([
-  n({ type: String, attribute: "description-attr-title" })
-], o.prototype, "descriptionAttrTitle");
-r([
-  n({ type: String, attribute: "icon-attr-title" })
-], o.prototype, "iconAttrTitle");
-let u = o;
-const L = (t, i) => {
+], i.prototype, "disabled");
+n([
+  o({ type: String, attribute: "icon-attr-aria-label" })
+], i.prototype, "iconAttrAriaLabel");
+n([
+  o({ type: String, reflect: !0 })
+], i.prototype, "role");
+n([
+  o({ type: String, attribute: "caption-attr-title" })
+], i.prototype, "captionAttrTitle");
+n([
+  o({ type: String, attribute: "description-attr-title" })
+], i.prototype, "descriptionAttrTitle");
+n([
+  o({ type: String, attribute: "icon-attr-title" })
+], i.prototype, "iconAttrTitle");
+let u = i;
+const $ = (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) {
@@ -159,6 +153,6 @@ const L = (t, i) => {
 u.ensureDefined();
 export {
   u as default,
-  L as generator
+  $ 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 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\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 { 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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cas-smartdesign/list-item",
-  "version": "7.3.0",
+  "version": "7.4.0",
   "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": "^3.3.1",
-    "@cas-smartdesign/image-tools": "^3.1.0"
+    "@cas-smartdesign/image-tools": "^3.2.0"
   },
   "devDependencies": {
-    "@cas-smartdesign/license-generator": "^1.7.0",
-    "@cas-smartdesign/element-preview": "^0.3.0"
+    "@cas-smartdesign/element-preview": "^0.3.0",
+    "@cas-smartdesign/license-generator": "^1.7.0"
   },
   "files": [
     "dist",