@cas-smartdesign/list-item 7.2.2

package/dist/list-item.mjs

@@ -0,0 +1,157 @@
+import { LitElement as m, css as v, unsafeCSS as g, 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 { 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;
+}, s;
+const n = (s = class extends m {
+  constructor() {
+    super(...arguments), this.contentMode = "text", this.role = "option";
+  }
+  static get styles() {
+    return [
+      v`
+                ${g(w)}
+            `
+    ];
+  }
+  render() {
+    return a`
+            <div class="container">
+                ${this.getLevelIndicators().map(
+      (t, e) => a` <div class="level-indicator level-${e}"></div> `
+    )}
+                <div class="side-content">
+                    <slot name="left-content"></slot>
+                    ${this.renderIcon()}
+                </div>
+                <div class="labels">
+                    ${this.renderLabel("caption", this.caption, this.captionAttrTitle)}
+                    ${this.renderLabel("description", this.description, this.descriptionAttrTitle)}
+                </div>
+                <div class="side-content">
+                    <slot name="right-content"></slot>
+                </div>
+            </div>
+        `;
+  }
+  renderIcon() {
+    if (this.icon || this.iconPlaceholder) {
+      const t = this.iconBackgroundColor != null ? `background-color:${this.iconBackgroundColor}` : void 0;
+      return a`
+                <div
+                    class="icon-wrapper"
+                    @pointerdown="${this.handleIconClick}"
+                    style="${d(t)}"
+                    role="img"
+                    aria-label="${d(this.iconAttrAriaLabel)}"
+                    title="${d(this.iconAttrTitle)}"
+                >
+                    <div class="icon"></div>
+                </div>
+            `;
+    }
+    return f;
+  }
+  renderLabel(t, e, o) {
+    return e ? a`
+                  <div class="${t}" title="${d(o)}">
+                      ${this.contentMode === "html" ? b(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));
+  }
+  /**
+   * Returns the width in pixel which is missing to show the caption and description without ellipsis.
+   */
+  get missingWidthForTexts() {
+    const t = 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;
+  }
+  handleIconClick(t) {
+    !this.disabled && !this.dispatchEvent(new PointerEvent("list-item-icon-click", t)) && t.preventDefault();
+  }
+  getLevelIndicators() {
+    return this.level ? Array(Number(this.level)).fill(null) : [];
+  }
+}, s.ID = "sd-list-item", s.ensureDefined = () => {
+  customElements.get(s.ID) || customElements.define(s.ID, s);
+}, s);
+l([
+  r({ type: String })
+], n.prototype, "caption", 2);
+l([
+  r({ type: String })
+], n.prototype, "description", 2);
+l([
+  r({ type: Boolean })
+], n.prototype, "selected", 2);
+l([
+  r({ type: String })
+], n.prototype, "icon", 2);
+l([
+  r({ type: String })
+], n.prototype, "iconBackgroundColor", 2);
+l([
+  r({ type: String })
+], n.prototype, "iconPlaceholder", 2);
+l([
+  r({ type: Number })
+], n.prototype, "level", 2);
+l([
+  r()
+], n.prototype, "contentMode", 2);
+l([
+  r({ type: Boolean, reflect: !0, attribute: "enable-line-clamp" })
+], n.prototype, "enableLineClamp", 2);
+l([
+  r({ type: Boolean, reflect: !0, attribute: "aria-disabled" })
+], n.prototype, "disabled", 2);
+l([
+  r({ type: String, attribute: "icon-attr-aria-label" })
+], n.prototype, "iconAttrAriaLabel", 2);
+l([
+  r({ type: String, reflect: !0 })
+], n.prototype, "role", 2);
+l([
+  r({ type: String, attribute: "caption-attr-title" })
+], n.prototype, "captionAttrTitle", 2);
+l([
+  r({ type: String, attribute: "description-attr-title" })
+], n.prototype, "descriptionAttrTitle", 2);
+l([
+  r({ type: String, attribute: "icon-attr-title" })
+], n.prototype, "iconAttrTitle", 2);
+let u = n;
+const $ = (i, t) => {
+  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);
+      o && (o.slot = "left-content", e.appendChild(o));
+    }
+    if (i.rightContentGenerator) {
+      const o = i.rightContentGenerator(i, e);
+      o && (o.slot = "right-content", e.appendChild(o));
+    }
+  }
+  return e;
+};
+u.ensureDefined();
+export {
+  u as default,
+  $ as generator
+};
+//# sourceMappingURL=list-item.mjs.map

package/dist/list-item.mjs.map

@@ -0,0 +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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"}

package/npm-third-party-licenses.json

@@ -0,0 +1,192 @@
+{
+    "@cypress/vite-dev-server@5.0.7": {
+        "licenses": "MIT",
+        "repository": "https://github.com/cypress-io/cypress",
+        "licenseUrl": "https://github.com/cypress-io/cypress/tree/develop/npm/vite-dev-server#readme"
+    },
+    "@rollup/plugin-node-resolve@15.2.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/rollup/plugins",
+        "licenseUrl": "https://github.com/rollup/plugins/raw/HEAD/LICENSE"
+    },
+    "@types/node@20.10.6": {
+        "licenses": "MIT",
+        "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
+        "licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
+    },
+    "@types/postcss-prefix-selector@1.16.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
+        "licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
+    },
+    "@typescript-eslint/eslint-plugin@6.17.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/typescript-eslint/typescript-eslint",
+        "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
+    },
+    "@typescript-eslint/parser@6.17.0": {
+        "licenses": "BSD-2-Clause",
+        "repository": "https://github.com/typescript-eslint/typescript-eslint",
+        "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
+    },
+    "@vitest/coverage-v8@1.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitest-dev/vitest",
+        "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
+    },
+    "@vitest/ui@1.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitest-dev/vitest",
+        "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
+    },
+    "axe-core@4.8.3": {
+        "licenses": "MPL-2.0",
+        "repository": "https://github.com/dequelabs/axe-core",
+        "licenseUrl": "https://github.com/dequelabs/axe-core/raw/HEAD/LICENSE"
+    },
+    "cypress-axe@1.5.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/component-driven/cypress-axe",
+        "licenseUrl": "https://github.com/component-driven/cypress-axe/raw/HEAD/License.md"
+    },
+    "cypress-real-events@1.13.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/dmtrKovalenko/cypress-real-events",
+        "licenseUrl": "https://github.com/dmtrKovalenko/cypress-real-events"
+    },
+    "cypress@13.6.2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/cypress-io/cypress",
+        "licenseUrl": "https://cypress.io"
+    },
+    "esbuild@0.19.11": {
+        "licenses": "MIT",
+        "repository": "https://github.com/evanw/esbuild",
+        "licenseUrl": "https://github.com/evanw/esbuild/raw/HEAD/LICENSE.md"
+    },
+    "eslint-config-google@0.14.0": {
+        "licenses": "Apache-2.0",
+        "repository": "https://github.com/google/eslint-config-google",
+        "licenseUrl": "https://github.com/google/eslint-config-google/raw/HEAD/LICENSE"
+    },
+    "eslint-config-prettier@9.1.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/prettier/eslint-config-prettier",
+        "licenseUrl": "https://github.com/prettier/eslint-config-prettier/raw/HEAD/LICENSE"
+    },
+    "eslint@8.56.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/eslint/eslint",
+        "licenseUrl": "https://github.com/eslint/eslint/raw/HEAD/LICENSE"
+    },
+    "github-markdown-css@5.5.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/sindresorhus/github-markdown-css",
+        "licenseUrl": "https://github.com/sindresorhus/github-markdown-css/raw/HEAD/license"
+    },
+    "highlight.js@11.9.0": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/highlightjs/highlight.js",
+        "licenseUrl": "https://github.com/highlightjs/highlight.js/raw/HEAD/LICENSE"
+    },
+    "junit-report-builder@3.1.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/davidparsson/junit-report-builder",
+        "licenseUrl": "https://github.com/davidparsson/junit-report-builder/raw/HEAD/LICENSE"
+    },
+    "lint-staged@15.2.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/okonet/lint-staged",
+        "licenseUrl": "https://github.com/okonet/lint-staged/raw/HEAD/LICENSE"
+    },
+    "lit@2.8.0": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/lit/lit",
+        "licenseUrl": "https://github.com/lit/lit/raw/HEAD/LICENSE"
+    },
+    "marked@11.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/markedjs/marked",
+        "licenseUrl": "https://github.com/markedjs/marked/raw/HEAD/LICENSE.md"
+    },
+    "postcss-prefix-selector@1.16.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/RadValentin/postcss-prefix-selector",
+        "licenseUrl": "https://github.com/RadValentin/postcss-prefix-selector/raw/HEAD/LICENSE"
+    },
+    "postcss@8.4.32": {
+        "licenses": "MIT",
+        "repository": "https://github.com/postcss/postcss",
+        "licenseUrl": "https://github.com/postcss/postcss/raw/HEAD/LICENSE"
+    },
+    "prettier@3.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/prettier/prettier",
+        "licenseUrl": "https://github.com/prettier/prettier/raw/HEAD/LICENSE"
+    },
+    "resolve-pkg@2.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/sindresorhus/resolve-pkg",
+        "licenseUrl": "https://github.com/sindresorhus/resolve-pkg/raw/HEAD/license"
+    },
+    "sass@1.69.6": {
+        "licenses": "MIT",
+        "repository": "https://github.com/sass/dart-sass",
+        "licenseUrl": "https://github.com/sass/dart-sass/raw/HEAD/LICENSE"
+    },
+    "stylelint-config-recommended-scss@14.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint-scss/stylelint-config-recommended-scss",
+        "licenseUrl": "https://github.com/stylelint-scss/stylelint-config-recommended-scss/raw/HEAD/LICENSE"
+    },
+    "stylelint-config-standard@36.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint/stylelint-config-standard",
+        "licenseUrl": "https://github.com/stylelint/stylelint-config-standard/raw/HEAD/LICENSE"
+    },
+    "stylelint-scss@6.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint-scss/stylelint-scss",
+        "licenseUrl": "https://github.com/stylelint-scss/stylelint-scss/raw/HEAD/LICENSE"
+    },
+    "stylelint@16.1.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint/stylelint",
+        "licenseUrl": "https://github.com/stylelint/stylelint/raw/HEAD/LICENSE"
+    },
+    "tsup@8.0.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/egoist/tsup",
+        "licenseUrl": "https://github.com/egoist/tsup/raw/HEAD/LICENSE"
+    },
+    "turbo@1.11.2": {
+        "licenses": "MPL-2.0",
+        "repository": "https://github.com/vercel/turbo",
+        "licenseUrl": "https://github.com/vercel/turbo/raw/HEAD/LICENSE"
+    },
+    "typescript@5.3.3": {
+        "licenses": "Apache-2.0",
+        "repository": "https://github.com/Microsoft/TypeScript",
+        "licenseUrl": "https://github.com/Microsoft/TypeScript/raw/HEAD/LICENSE.txt"
+    },
+    "vite-tsconfig-paths@4.2.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/aleclarson/vite-tsconfig-paths",
+        "licenseUrl": "https://github.com/aleclarson/vite-tsconfig-paths/raw/HEAD/LICENSE"
+    },
+    "vite@5.0.10": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitejs/vite",
+        "licenseUrl": "https://github.com/vitejs/vite/raw/HEAD/LICENSE.md"
+    },
+    "vitest@1.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitest-dev/vitest",
+        "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE.md"
+    },
+    "yargs@17.7.2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/yargs/yargs",
+        "licenseUrl": "https://github.com/yargs/yargs/raw/HEAD/LICENSE"
+    }
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@cas-smartdesign/list-item",
+  "version": "7.2.2",
+  "description": "A list item element based on LitElement",
+  "main": "dist/list-item-with-externals.js",
+  "module": "dist/list-item.mjs",
+  "license": "SEE LICENSE IN LICENSE",
+  "types": "dist/list-item.d.ts",
+  "dependencies": {
+    "lit": "^2.8.0",
+    "@cas-smartdesign/image-tools": "^3.0.1"
+  },
+  "devDependencies": {
+    "@cas-smartdesign/element-preview": "^0.2.1",
+    "@cas-smartdesign/license-generator": "^1.6.1"
+  },
+  "files": [
+    "dist",
+    "npm-third-party-licenses.json"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "version": "pnpm version",
+    "generate-declaration": "tsc -p tsconfig.types.json",
+    "build:no-license": "vite build && pnpm generate-declaration && vite build --mode documentation",
+    "build": "pnpm generate-license && pnpm build:no-license",
+    "watch": "vite build --watch",
+    "dev": "vite",
+    "generate-license": "sd-license-generator --r ../../"
+  }
+}

package/readme.md

@@ -0,0 +1,73 @@
+# @cas-smartdesign/list-item
+
+A list item element based on [lit-element](https://github.com/Polymer/lit-element) with SmartDesign look & feel.
+
+## Requirements
+
+The main entry point requires ES6 & support for Custom Elements v1
+
+## Properties
+
+- `caption`: string
+  - Defines the text of the caption component of the item
+- `description`: string
+  - Defines the text of the description component of the item
+- `selected`: boolean
+  - Defines whether if the item is in selected state
+- `icon`: string
+  - Defines the icon of the item
+- `iconPlaceholder`: string
+  - Defines the placeholder icon of the item
+- `iconBackgroundColor`: string
+  - Defines the background color to be used behind the icon of the item
+- `contentMode`: ContentMode
+  - Defines the mode in which it should handle its content
+  - Possible values:
+    - text - renders the content as text
+    - html - renders the content as HTML
+- `enableLineClamp`: boolean
+  - If set and the list item has only one label defined (caption or description) then long texts are wrapped to two lines and line-clamp property is applied to them.
+  - The corresponding attribute is `enable-line-clamp`
+- aria attributes (the corresponding attribute is in camel-case)
+  - `role`: string (default is "listitem")
+  - `iconAttrAriaLabel`: string
+- title attributes (the corresponding attribute is in camel-case)
+  - `captionAttrTitle`: string
+  - `descriptionAttrTitle`: string
+  - `iconAttrTitle`: string
+- `disabled` (reflects `aria-disabled` attribute)
+  - A disabled item MAY indicate that changing the selected state is not allowed.
+
+All of these properties can be defined with a corresponding (by default with lowercase) attribute as well.
+
+## CSS Custom Properties
+
+- `--sd-list-item-font-family`
+  - Defines the font family of the labels (default is "Segoe UI", "Lucida Sans", Arial, sans-serif)
+- `--sd-list-item-label-content-padding`
+  - Defines the padding of the labels (default is 0 8px)
+- `--sd-list-item-caption-font-size`
+  - Defines the font size of the caption (default is 16px)
+- `--sd-list-item-caption-text-color`
+  - Defines the text color of the caption (default is #111)
+- `--sd-list-item-caption-font-weight`
+  - Defines the font weight of the caption (default is 400)
+- `--sd-list-item-description-font-size`
+  - Defines the font size of the description (default is 13px)
+- `--sd-list-item-description-text-color`
+  - Defines the text color of the description (default is #999)
+- `--sd-list-item-description-font-weight`
+  - Defines the font weight of the description (default is 400)
+- `--sd-list-item-text-decoration`
+  - Defines the text-decoration applied on the caption and description (default is inherit)
+- `--sd-list-item-icon-size`
+  - Defines the size of the icon (default is 24px)
+- `--sd-list-item-icon-wrapper-width`
+  - Defines the width of the icon wrapper element (default is 45px)
+
+## Custom events
+
+- `list-item-icon-click`
+  - This event is dispatched when non-disabled list item icon is clicked
+
+## Examples