@francofantomius/material-components 0.1.0 → 1.0.0

package/dist/chunks/list-D8olR7oZ.js

@@ -0,0 +1,204 @@
+import { n as r, t as s } from "./decorate-DXuynaiA.js";
+import "./ripple-squbKHhj.js";
+import "./focus-ring-CuiJuM-y.js";
+import { css as l, html as i, nothing as t } from "lit";
+import { customElement as p, property as n } from "lit/decorators.js";
+var h = l`
+  :host {
+    display: flex;
+    flex-direction: column;
+    padding: 8px 0;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+  }
+`, m = l`
+  :host {
+    display: flex;
+    outline: none;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  .item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 56px;
+    padding: 8px 16px;
+    box-sizing: border-box;
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    text-decoration: none;
+    gap: 16px;
+    user-select: none;
+    overflow: hidden;
+  }
+
+  :host([interactive]) .item {
+    cursor: pointer;
+  }
+
+  .start {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    flex-shrink: 0;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    justify-content: center;
+  }
+
+  .headline {
+    font-size: var(--md-sys-typescale-body-large-size, 16px);
+    line-height: 24px;
+    font-weight: 400;
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .supporting-text {
+    font-size: var(--md-sys-typescale-body-medium-size, 14px);
+    line-height: 20px;
+    font-weight: 400;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .headline:empty,
+  .supporting-text:empty,
+  .trailing-supporting-text:empty {
+    display: none;
+  }
+
+  .end {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    font-size: var(--md-sys-typescale-label-small-size, 11px);
+    flex-shrink: 0;
+  }
+
+  @media (max-width: 600px) {
+    .trailing-supporting-text {
+      display: none;
+    }
+  }
+`, e = class extends r {
+  constructor(...c) {
+    super(...c), this.headline = "", this.supportingText = "", this.trailingSupportingText = "", this.interactive = !1, this.disabled = !1, this.href = "", this.target = "", this.handleClick = (a) => {
+      if (this.disabled) {
+        a.preventDefault(), a.stopImmediatePropagation();
+        return;
+      }
+      this.interactive && this.emitEvent("item-click");
+    };
+  }
+  static {
+    this.styles = [r.styles, m];
+  }
+  render() {
+    return this.href ? i`
+        <a
+          class="item"
+          href=${this.disabled ? t : this.href}
+          target=${this.target || t}
+          aria-disabled=${this.disabled ? "true" : t}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this.handleClick}
+        >
+          ${this.interactive ? i`<md-ripple ?disabled=${this.disabled}></md-ripple><md-focus-ring></md-focus-ring>` : t}
+          <div class="start">
+            <slot name="start"></slot>
+          </div>
+          <div class="content">
+            ${this.headline ? i`<span class="headline">${this.headline}</span>` : t}
+            ${this.supportingText ? i`<span class="supporting-text">${this.supportingText}</span>` : t}
+            <slot></slot>
+          </div>
+          <div class="end">
+            ${this.trailingSupportingText ? i`<span class="trailing-supporting-text">${this.trailingSupportingText}</span>` : t}
+            <slot name="end"></slot>
+          </div>
+        </a>
+      ` : i`
+      <div
+        class="item"
+        tabindex=${this.interactive && !this.disabled ? "0" : t}
+        @click=${this.handleClick}
+      >
+        ${this.interactive ? i`<md-ripple ?disabled=${this.disabled}></md-ripple><md-focus-ring></md-focus-ring>` : t}
+        <div class="start">
+          <slot name="start"></slot>
+        </div>
+        <div class="content">
+          ${this.headline ? i`<span class="headline">${this.headline}</span>` : t}
+          ${this.supportingText ? i`<span class="supporting-text">${this.supportingText}</span>` : t}
+          <slot></slot>
+        </div>
+        <div class="end">
+          ${this.trailingSupportingText ? i`<span class="trailing-supporting-text">${this.trailingSupportingText}</span>` : t}
+          <slot name="end"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+s([n({ type: String })], e.prototype, "headline", void 0);
+s([n({
+  type: String,
+  attribute: "supporting-text"
+})], e.prototype, "supportingText", void 0);
+s([n({
+  type: String,
+  attribute: "trailing-supporting-text"
+})], e.prototype, "trailingSupportingText", void 0);
+s([n({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "interactive", void 0);
+s([n({
+  type: Boolean,
+  reflect: !0
+})], e.prototype, "disabled", void 0);
+s([n({ type: String })], e.prototype, "href", void 0);
+s([n({ type: String })], e.prototype, "target", void 0);
+e = s([p("md-list-item")], e);
+var o = class extends r {
+  static {
+    this.styles = [r.styles, h];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "list");
+  }
+  render() {
+    return i`<slot></slot>`;
+  }
+};
+o = s([p("md-list")], o);
+export {
+  e as n,
+  o as t
+};
+
+//# sourceMappingURL=list-D8olR7oZ.js.map

package/dist/chunks/list-D8olR7oZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-D8olR7oZ.js","names":[],"sources":["../../src/components/list/list.css.ts","../../src/components/list/list.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const listStyles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    padding: 8px 0;\n    box-sizing: border-box;\n    width: 100%;\n    max-width: 100%;\n  }\n`;\n\nexport const listItemStyles = css`\n  :host {\n    display: flex;\n    outline: none;\n    box-sizing: border-box;\n    -webkit-tap-highlight-color: transparent;\n    width: 100%;\n    max-width: 100%;\n    min-width: 0;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    min-height: 56px;\n    padding: 8px 16px;\n    box-sizing: border-box;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    text-decoration: none;\n    gap: 16px;\n    user-select: none;\n    overflow: hidden;\n  }\n\n  :host([interactive]) .item {\n    cursor: pointer;\n  }\n\n  .start {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    flex-shrink: 0;\n  }\n\n  .content {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-width: 0;\n    justify-content: center;\n  }\n\n  .headline {\n    font-size: var(--md-sys-typescale-body-large-size, 16px);\n    line-height: 24px;\n    font-weight: 400;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .supporting-text {\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    line-height: 20px;\n    font-weight: 400;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .headline:empty,\n  .supporting-text:empty,\n  .trailing-supporting-text:empty {\n    display: none;\n  }\n\n  .end {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    font-size: var(--md-sys-typescale-label-small-size, 11px);\n    flex-shrink: 0;\n  }\n\n  @media (max-width: 600px) {\n    .trailing-supporting-text {\n      display: none;\n    }\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport { listStyles, listItemStyles } from './list.css.js';\n\n@customElement('md-list-item')\nexport class MdListItem extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, listItemStyles];\n\n  @property({ type: String })\n  headline = '';\n\n  @property({ type: String, attribute: 'supporting-text' })\n  supportingText = '';\n\n  @property({ type: String, attribute: 'trailing-supporting-text' })\n  trailingSupportingText = '';\n\n  @property({ type: Boolean, reflect: true })\n  interactive = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n    if (this.interactive) {\n      this.emitEvent('item-click');\n    }\n  };\n\n  override render() {\n    if (this.href) {\n      return html`\n        <a\n          class=\"item\"\n          href=${this.disabled ? nothing : this.href}\n          target=${this.target || nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @click=${this.handleClick}\n        >\n          ${this.interactive ? html`<md-ripple ?disabled=${this.disabled}></md-ripple><md-focus-ring></md-focus-ring>` : nothing}\n          <div class=\"start\">\n            <slot name=\"start\"></slot>\n          </div>\n          <div class=\"content\">\n            ${this.headline ? html`<span class=\"headline\">${this.headline}</span>` : nothing}\n            ${this.supportingText ? html`<span class=\"supporting-text\">${this.supportingText}</span>` : nothing}\n            <slot></slot>\n          </div>\n          <div class=\"end\">\n            ${this.trailingSupportingText ? html`<span class=\"trailing-supporting-text\">${this.trailingSupportingText}</span>` : nothing}\n            <slot name=\"end\"></slot>\n          </div>\n        </a>\n      `;\n    }\n\n    return html`\n      <div\n        class=\"item\"\n        tabindex=${this.interactive && !this.disabled ? '0' : nothing}\n        @click=${this.handleClick}\n      >\n        ${this.interactive ? html`<md-ripple ?disabled=${this.disabled}></md-ripple><md-focus-ring></md-focus-ring>` : nothing}\n        <div class=\"start\">\n          <slot name=\"start\"></slot>\n        </div>\n        <div class=\"content\">\n          ${this.headline ? html`<span class=\"headline\">${this.headline}</span>` : nothing}\n          ${this.supportingText ? html`<span class=\"supporting-text\">${this.supportingText}</span>` : nothing}\n          <slot></slot>\n        </div>\n        <div class=\"end\">\n          ${this.trailingSupportingText ? html`<span class=\"trailing-supporting-text\">${this.trailingSupportingText}</span>` : nothing}\n          <slot name=\"end\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\n@customElement('md-list')\nexport class MdList extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, listStyles];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'list');\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list': MdList;\n    'md-list-item': MdListItem;\n  }\n}\n\n"],"mappings":"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"}