@logosphere-ui/core 0.0.0-alpha.43 → 0.0.0-alpha.45

package/dist/tree-menu-CkOPxr-W.js

@@ -1,154 +0,0 @@
-import { unsafeCSS as p, css as _, LitElement as u, html as a, nothing as c } from "lit";
-import { property as d, state as v, customElement as g } from "lit/decorators.js";
-import { unsafeHTML as b } from "lit/directives/unsafe-html.js";
-import "./ui-icon-BMJNdIOq.js";
-const f = ".tree{width:100%;font-family:var(--font-family-base)}.tree__list,.tree__children{list-style:none;margin:0;padding:0}.tree__item{margin:0;padding:0}.tree__row{display:flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-2) var(--spacing-3);padding-left:calc(var(--spacing-3) + (var(--tree-level, 0) * 14px));border-radius:var(--radius-sm);color:var(--color-body-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.tree--icons .tree__row{justify-content:center;padding:0;width:44px;height:44px;min-height:44px;margin:0 auto}.tree__row:hover{background-color:var(--color-light)}.tree__row:focus-visible{outline:2px solid var(--color-secondary);outline-offset:1px}.tree__row--disabled{opacity:.5;cursor:not-allowed}.tree__row--active .tree__label,.tree__row--active .tree__icon{color:var(--color-primary)}.tree:not(.tree--icons) .tree__row--active{background-color:var(--color-light)}.tree__icon{width:20px;min-width:20px;display:inline-flex;align-items:center;justify-content:center;color:inherit}.tree--icons .tree__icon{width:20px;min-width:20px;height:20px}.tree--icons .tree__row--active{background-color:var(--color-primary)}.tree--icons .tree__row--active .tree__icon{color:#fff}.tree--icons .tree__row--active:hover{background-color:var(--color-primary-hover)}.tree__chevron-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;padding:0;flex-shrink:0}.tree__chevron-btn--right{margin-left:auto}.tree__chevron{transform:rotate(-90deg);transition:transform var(--transition-speed-fast) var(--transition-timing)}.tree__chevron--open{transform:rotate(0)}.tree__chevron-spacer{width:20px;height:20px;flex-shrink:0}.tree__label{display:inline-flex;align-items:center;font-size:var(--font-size-sm);color:inherit}";
-var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (e, t, r, n) => {
-  for (var o = n > 1 ? void 0 : n ? x(t, r) : t, s = e.length - 1, h; s >= 0; s--)
-    (h = e[s]) && (o = (n ? h(t, r, o) : h(o)) || o);
-  return n && o && w(t, r, o), o;
-};
-let i = class extends u {
-  constructor() {
-    super(...arguments), this.items = [], this.expandedIds = [], this.expandOnLabelClick = !0, this.chevronPosition = "left", this.showLabels = !0, this.iconSize = 16, this._expandedSet = /* @__PURE__ */ new Set();
-  }
-  willUpdate(e) {
-    e.has("expandedIds") && (this._expandedSet = new Set(this.expandedIds ?? []));
-  }
-  _isExpanded(e) {
-    return this._expandedSet.has(e);
-  }
-  _emitToggle(e, t) {
-    this.dispatchEvent(
-      new CustomEvent("toggle", {
-        detail: { item: e, expanded: t },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  _emitItemClick(e) {
-    this.dispatchEvent(
-      new CustomEvent("item-click", {
-        detail: { item: e },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  _emitNodeClick(e, t) {
-    this.dispatchEvent(
-      new CustomEvent("node-click", {
-        detail: { item: e, hasChildren: t },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  _setExpanded(e, t) {
-    t ? this._expandedSet.add(e.id) : this._expandedSet.delete(e.id), this.expandedIds = Array.from(this._expandedSet), this._emitToggle(e, t);
-  }
-  _toggle(e, t) {
-    t.stopPropagation(), !(e.disabled || !e.children?.length) && this._setExpanded(e, !this._isExpanded(e.id));
-  }
-  _handleItemClick(e, t) {
-    if (t.stopPropagation(), e.disabled) return;
-    const r = !!e.children?.length;
-    if (this._emitNodeClick(e, r), r && this.expandOnLabelClick) {
-      this._setExpanded(e, !this._isExpanded(e.id));
-      return;
-    }
-    r || (e.onClick?.(e), this._emitItemClick(e));
-  }
-  _handleRowKeydown(e, t) {
-    t.key !== "Enter" && t.key !== " " || (t.preventDefault(), this._handleItemClick(e, t));
-  }
-  _renderIcon(e) {
-    return e.iconName ? a`
-        <span class="tree__icon">
-          <ui-icon name=${e.iconName} .size=${this.iconSize}></ui-icon>
-        </span>
-      ` : e.iconHtml ? a`<span class="tree__icon">${b(e.iconHtml)}</span>` : c;
-  }
-  _renderChevron(e, t) {
-    const r = !!e.children?.length;
-    return this.showLabels ? r ? a`
-      <button
-        type="button"
-        class="tree__chevron-btn ${this.chevronPosition === "right" ? "tree__chevron-btn--right" : ""}"
-        aria-label=${t ? "Collapse" : "Expand"}
-        @click=${(n) => this._toggle(e, n)}
-      >
-        <ui-icon
-          class="tree__chevron ${t ? "tree__chevron--open" : ""}"
-          name="uil-angle-down"
-          size="20"
-        ></ui-icon>
-      </button>
-    ` : a`<span class="tree__chevron-spacer"></span>` : c;
-  }
-  _renderNode(e, t) {
-    const r = !!e.children?.length, n = r ? this._isExpanded(e.id) : !1, o = this.showLabels ? `--tree-level:${t};` : "--tree-level:0;";
-    return a`
-      <li class="tree__item">
-        <div
-          class="tree__row ${e.disabled ? "tree__row--disabled" : ""} ${e.active ? "tree__row--active" : ""}"
-          style=${o}
-          role="button"
-          tabindex=${e.disabled ? -1 : 0}
-          @click=${(s) => this._handleItemClick(e, s)}
-          @keydown=${(s) => this._handleRowKeydown(e, s)}
-          title=${this.showLabels ? "" : e.label}
-        >
-          ${this.chevronPosition === "left" ? this._renderChevron(e, n) : c}
-          ${this._renderIcon(e)}
-          ${this.showLabels ? a`<span class="tree__label">${e.label}</span>` : c}
-          ${this.chevronPosition === "right" ? this._renderChevron(e, n) : c}
-        </div>
-
-        ${this.showLabels && r && n ? a`
-              <ul class="tree__children">
-                ${e.children.map((s) => this._renderNode(s, t + 1))}
-              </ul>
-            ` : c}
-      </li>
-    `;
-  }
-  render() {
-    return a`
-      <nav class="tree ${this.showLabels ? "" : "tree--icons"}" aria-label="Tree Menu">
-        <ul class="tree__list">
-          ${this.items.map((e) => this._renderNode(e, 0))}
-        </ul>
-      </nav>
-    `;
-  }
-};
-i.styles = [_`${p(f)}`];
-l([
-  d({ attribute: !1 })
-], i.prototype, "items", 2);
-l([
-  d({ type: Array })
-], i.prototype, "expandedIds", 2);
-l([
-  d({ type: Boolean })
-], i.prototype, "expandOnLabelClick", 2);
-l([
-  d({ type: String })
-], i.prototype, "chevronPosition", 2);
-l([
-  d({ type: Boolean })
-], i.prototype, "showLabels", 2);
-l([
-  d({ type: Number })
-], i.prototype, "iconSize", 2);
-l([
-  v()
-], i.prototype, "_expandedSet", 2);
-i = l([
-  g("logosphere-tree-menu")
-], i);
-export {
-  i as T
-};

package/dist/tree-menu-WNwZMreD.cjs

@@ -1,47 +0,0 @@
-"use strict";const r=require("lit"),s=require("lit/decorators.js"),d=require("lit/directives/unsafe-html.js");require("./ui-icon-DIucAQC_.cjs");const h=".tree{width:100%;font-family:var(--font-family-base)}.tree__list,.tree__children{list-style:none;margin:0;padding:0}.tree__item{margin:0;padding:0}.tree__row{display:flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-2) var(--spacing-3);padding-left:calc(var(--spacing-3) + (var(--tree-level, 0) * 14px));border-radius:var(--radius-sm);color:var(--color-body-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.tree--icons .tree__row{justify-content:center;padding:0;width:44px;height:44px;min-height:44px;margin:0 auto}.tree__row:hover{background-color:var(--color-light)}.tree__row:focus-visible{outline:2px solid var(--color-secondary);outline-offset:1px}.tree__row--disabled{opacity:.5;cursor:not-allowed}.tree__row--active .tree__label,.tree__row--active .tree__icon{color:var(--color-primary)}.tree:not(.tree--icons) .tree__row--active{background-color:var(--color-light)}.tree__icon{width:20px;min-width:20px;display:inline-flex;align-items:center;justify-content:center;color:inherit}.tree--icons .tree__icon{width:20px;min-width:20px;height:20px}.tree--icons .tree__row--active{background-color:var(--color-primary)}.tree--icons .tree__row--active .tree__icon{color:#fff}.tree--icons .tree__row--active:hover{background-color:var(--color-primary-hover)}.tree__chevron-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;padding:0;flex-shrink:0}.tree__chevron-btn--right{margin-left:auto}.tree__chevron{transform:rotate(-90deg);transition:transform var(--transition-speed-fast) var(--transition-timing)}.tree__chevron--open{transform:rotate(0)}.tree__chevron-spacer{width:20px;height:20px;flex-shrink:0}.tree__label{display:inline-flex;align-items:center;font-size:var(--font-size-sm);color:inherit}";var p=Object.defineProperty,_=Object.getOwnPropertyDescriptor,a=(c,e,t,n)=>{for(var i=n>1?void 0:n?_(e,t):e,l=c.length-1,o;l>=0;l--)(o=c[l])&&(i=(n?o(e,t,i):o(i))||i);return n&&i&&p(e,t,i),i};exports.TreeMenu=class extends r.LitElement{constructor(){super(...arguments),this.items=[],this.expandedIds=[],this.expandOnLabelClick=!0,this.chevronPosition="left",this.showLabels=!0,this.iconSize=16,this._expandedSet=new Set}willUpdate(e){e.has("expandedIds")&&(this._expandedSet=new Set(this.expandedIds??[]))}_isExpanded(e){return this._expandedSet.has(e)}_emitToggle(e,t){this.dispatchEvent(new CustomEvent("toggle",{detail:{item:e,expanded:t},bubbles:!0,composed:!0}))}_emitItemClick(e){this.dispatchEvent(new CustomEvent("item-click",{detail:{item:e},bubbles:!0,composed:!0}))}_emitNodeClick(e,t){this.dispatchEvent(new CustomEvent("node-click",{detail:{item:e,hasChildren:t},bubbles:!0,composed:!0}))}_setExpanded(e,t){t?this._expandedSet.add(e.id):this._expandedSet.delete(e.id),this.expandedIds=Array.from(this._expandedSet),this._emitToggle(e,t)}_toggle(e,t){t.stopPropagation(),!(e.disabled||!e.children?.length)&&this._setExpanded(e,!this._isExpanded(e.id))}_handleItemClick(e,t){if(t.stopPropagation(),e.disabled)return;const n=!!e.children?.length;if(this._emitNodeClick(e,n),n&&this.expandOnLabelClick){this._setExpanded(e,!this._isExpanded(e.id));return}n||(e.onClick?.(e),this._emitItemClick(e))}_handleRowKeydown(e,t){t.key!=="Enter"&&t.key!==" "||(t.preventDefault(),this._handleItemClick(e,t))}_renderIcon(e){return e.iconName?r.html`
-        <span class="tree__icon">
-          <ui-icon name=${e.iconName} .size=${this.iconSize}></ui-icon>
-        </span>
-      `:e.iconHtml?r.html`<span class="tree__icon">${d.unsafeHTML(e.iconHtml)}</span>`:r.nothing}_renderChevron(e,t){const n=!!e.children?.length;return this.showLabels?n?r.html`
-      <button
-        type="button"
-        class="tree__chevron-btn ${this.chevronPosition==="right"?"tree__chevron-btn--right":""}"
-        aria-label=${t?"Collapse":"Expand"}
-        @click=${i=>this._toggle(e,i)}
-      >
-        <ui-icon
-          class="tree__chevron ${t?"tree__chevron--open":""}"
-          name="uil-angle-down"
-          size="20"
-        ></ui-icon>
-      </button>
-    `:r.html`<span class="tree__chevron-spacer"></span>`:r.nothing}_renderNode(e,t){const n=!!e.children?.length,i=n?this._isExpanded(e.id):!1,l=this.showLabels?`--tree-level:${t};`:"--tree-level:0;";return r.html`
-      <li class="tree__item">
-        <div
-          class="tree__row ${e.disabled?"tree__row--disabled":""} ${e.active?"tree__row--active":""}"
-          style=${l}
-          role="button"
-          tabindex=${e.disabled?-1:0}
-          @click=${o=>this._handleItemClick(e,o)}
-          @keydown=${o=>this._handleRowKeydown(e,o)}
-          title=${this.showLabels?"":e.label}
-        >
-          ${this.chevronPosition==="left"?this._renderChevron(e,i):r.nothing}
-          ${this._renderIcon(e)}
-          ${this.showLabels?r.html`<span class="tree__label">${e.label}</span>`:r.nothing}
-          ${this.chevronPosition==="right"?this._renderChevron(e,i):r.nothing}
-        </div>
-
-        ${this.showLabels&&n&&i?r.html`
-              <ul class="tree__children">
-                ${e.children.map(o=>this._renderNode(o,t+1))}
-              </ul>
-            `:r.nothing}
-      </li>
-    `}render(){return r.html`
-      <nav class="tree ${this.showLabels?"":"tree--icons"}" aria-label="Tree Menu">
-        <ul class="tree__list">
-          ${this.items.map(e=>this._renderNode(e,0))}
-        </ul>
-      </nav>
-    `}};exports.TreeMenu.styles=[r.css`${r.unsafeCSS(h)}`];a([s.property({attribute:!1})],exports.TreeMenu.prototype,"items",2);a([s.property({type:Array})],exports.TreeMenu.prototype,"expandedIds",2);a([s.property({type:Boolean})],exports.TreeMenu.prototype,"expandOnLabelClick",2);a([s.property({type:String})],exports.TreeMenu.prototype,"chevronPosition",2);a([s.property({type:Boolean})],exports.TreeMenu.prototype,"showLabels",2);a([s.property({type:Number})],exports.TreeMenu.prototype,"iconSize",2);a([s.state()],exports.TreeMenu.prototype,"_expandedSet",2);exports.TreeMenu=a([s.customElement("logosphere-tree-menu")],exports.TreeMenu);