@triptease/tt-navbar 0.0.62 → 0.0.64

package/dist/web/TtNavbar.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.62
+* @triptease/tt-navbar v0.0.64
 */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -1033,56 +1033,39 @@ var styles = i`
     overflow-y: auto;
 
 
-    li {
-      display: flex;
-      padding: 0.5rem;
-      box-sizing: border-box;
-      text-align: left;
-      text-overflow: ellipsis;
-      text-wrap: nowrap;
-      align-items: center;
-      gap: 0.25rem;
-      max-width: 100%;
-      width: 100%;
-      overflow-y: visible;
-      flex: 1;
-
-
-      input[type="checkbox"] {
-        width: var(--checkbox-size, var(--space-scale-2));
-        aspect-ratio: 1;
-        flex: 0 0 auto;
-      }
+    .no-results {
+      display: none;
+    }
 
-      span {
-        overflow: hidden;
+    &:not(:has(tt-option:not([hidden], .select-all))) {
+      .no-results {
+        display: flex;
+        padding: 0.5rem;
+        box-sizing: border-box;
+        text-align: left;
         text-overflow: ellipsis;
-        white-space: nowrap;
+        text-wrap: nowrap;
+        align-items: center;
+        gap: 0.25rem;
+        max-width: 100%;
+        width: 100%;
+        overflow-y: visible;
         flex: 1;
-        line-height: 1.1;
-      }
-
-      &.no-results {
-        display: none;
-      }
 
-      &[aria-hidden="true"] {
-        visibility: hidden;
-        display: none;
-      }
-    }
 
-    &:not(:has([role="option"]:not([data-value="select-all"]))) {
-      .no-results {
-        display: flex;
+        span {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex: 1;
+          line-height: 1.1;
+        }
       }
 
       .select-all {
         display: none;
       }
     }
-
-
   }
 
   [role="combobox"][aria-expanded="true"] ~ [role="listbox"][data-open-upward] {
@@ -1096,50 +1079,10 @@ var styles = i`
     aspect-ratio: 1;
   }
 
-  [role="option"].select-all {
+  tt-option.select-all::part(option) {
     border-bottom: 1px solid var(--color-border-300);
   }
 
-  [aria-multiselectable="false"] [role="option"][aria-selected="true"] {
-    color: var(--tt-combobox-option-selected-color, var(--color-primary-400));
-    font-weight: var(--font-weight-medium);
-  }
-
-  [role="option"]:is(:hover, [data-active="true"]) {
-    background-color: var(--tt-combobox-option-background-color-hover, inherit);
-    color: var(--tt-combobox-option-color-hover, inherit);
-
-    &:first-child {
-      border-top-left-radius: var(--border-radius);
-      border-top-right-radius: var(--border-radius);
-    }
-
-    &:last-child {
-      border-bottom-left-radius: var(--border-radius);
-      border-bottom-right-radius: var(--border-radius);
-    }
-  }
-
-  [role="option"]:hover {
-    cursor: pointer;
-  }
-
-  [role="option"][aria-disabled="true"] {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  [role="listbox"][aria-multiselectable="true"] [role="option"] input[type="checkbox"] {
-    accent-color: var(--color-primary-400);
-    width: var(--checkbox-size, var(--space-scale-2));
-    aspect-ratio: 1;
-    pointer-events: none;
-  }
-
-  [role="listbox"][aria-multiselectable="true"] [role="option"][aria-disabled="true"] input[type="checkbox"] {
-    pointer-events: none;
-  }
-
   label {
     font-size: var(--tt-combobox-label-font-size, inherit);
     color: var(--tt-combobox-label-color, inherit);
@@ -1148,7 +1091,6 @@ var styles = i`
     &[data-hidden] {
       display: none;
     }
-
   }
 `;
 
@@ -1158,7 +1100,13 @@ var TtCombobox = class extends i4 {
     return this.internals.form;
   }
   get _isAllSelected() {
-    return Array.from(this._selectableVisibleOptions).every((option) => Array.from(this._selectedVisibleOptions).includes(option));
+    return Boolean(this._visibleOptionsNotSelectAll.length) && Array.from(this._visibleOptionsNotSelectAll).every((option) => this.value.includes(option.value));
+  }
+  get _selectedVisibleOptions() {
+    return Array.from(this._visibleOptions).filter((option) => this.value.includes(option.value));
+  }
+  get _selectedOptions() {
+    return Array.from(this._visibleOptionsNotSelectAll).filter((option) => this.value.includes(option.value));
   }
   constructor() {
     super();
@@ -1184,7 +1132,7 @@ var TtCombobox = class extends i4 {
     });
     this._valueChanged = () => {
       this._selectableOptions.forEach((option) => {
-        if (this.value.includes(option.dataset.value)) {
+        if (this.value.includes(option.value)) {
           this._checkOption(option);
         } else {
           this._uncheckOption(option);
@@ -1201,14 +1149,14 @@ var TtCombobox = class extends i4 {
       event.preventDefault();
       event.stopPropagation();
       if (this._filter !== "" && this._isAllSelected) {
-        const selectedVisibleValues = Array.from(this._selectedVisibleOptions).map((option) => option.dataset.value);
+        const selectedVisibleValues = this._selectedVisibleOptions.map((option) => option.value);
         this.value = this.value.filter((value) => !selectedVisibleValues.includes(value));
       } else if (this._filter !== "") {
-        this.value = Array.from(/* @__PURE__ */ new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map((option) => option.dataset.value)]));
+        this.value = Array.from(/* @__PURE__ */ new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map((option) => option.value)]));
       } else if (this.value.length === this._selectableOptions.length) {
         this.value = [];
       } else {
-        this.value = Array.from(this._selectableOptions).map((option) => option.dataset.value);
+        this.value = Array.from(this._selectableOptions).map((option) => option.value);
       }
     };
     this._renderSelectAll = () => {
@@ -1219,20 +1167,18 @@ var TtCombobox = class extends i4 {
       const active = this._getActiveOptionId() === id;
       const selected = this._isAllSelected;
       return x`
-      <li
+      <tt-option
+        id="${id}"
         class="select-all"
-        role="option"
-        id="${this.id}-option-select-all"
-        aria-selected="${selected}"
-        data-active=${active}
+        ?selected=${selected}
+        ?active=${active}
+        include-checkbox
         @click="${this._selectAll}"
-        @mousedown="${(evt) => evt.preventDefault()}"
-        data-value="select-all"
+        exportparts="option, checkbox"
         part="option"
-      >
-        <input type="checkbox" ?checked=${selected} role="presentation" tabindex="-1" part="checkbox">
-        Select all
-      </li>`;
+        value="select-all"
+      >Select all</tt-option>
+    `;
     };
     this._renderChevron = () => x`
     <button type="button" aria-label="Expand" @click="${this._onChevronClick}" aria-expanded="${this._expanded}"
@@ -1277,7 +1223,8 @@ var TtCombobox = class extends i4 {
     }
     if (changedProperties.has("options")) {
       this.updateComplete.then(() => {
-        this.value = Array.from(/* @__PURE__ */ new Set([...this.value, ...Array.from(this._selectedOptions).map((option) => option.dataset.value)]));
+        const selectedAssignedOptions = Array.from(this.options).filter((option) => option.selected);
+        this.value = Array.from(/* @__PURE__ */ new Set([...this.value, ...selectedAssignedOptions.map((option) => option.value)]));
         this._listenForOptionChange();
       });
     }
@@ -1285,7 +1232,7 @@ var TtCombobox = class extends i4 {
   }
   _reportValidity() {
     if (this.required && !this.value.length) {
-      const errorMessage = this.multiselect ? "Please select at least one option" : "Please select an option";
+      const errorMessage = this.multiselect ? "Please select at least one tt-option" : "Please select an tt-option";
       this.internals.setValidity({
         valueMissing: true
       }, errorMessage, this._comboboxInput);
@@ -1382,7 +1329,9 @@ var TtCombobox = class extends i4 {
     event.preventDefault();
     event.stopPropagation();
     const option = event.currentTarget;
-    const selectedValue = option.dataset.value;
+    if (option.disabled)
+      return;
+    const selectedValue = option.value;
     if (this.multiselect) {
       if (this.value.includes(selectedValue)) {
         this.value = this.value.filter((value) => value !== selectedValue);
@@ -1420,11 +1369,11 @@ var TtCombobox = class extends i4 {
       if (this.disabled) {
         return "Disabled";
       }
-      if (!this._selectedVisibleOptions.length) {
+      if (!this.value.length) {
         return "No options selected";
       }
-      if (this._selectedVisibleOptions.length === 1) {
-        return this._selectedVisibleOptions[0].textContent?.trim();
+      if (this.value.length === 1) {
+        return Array.from(this._selectableVisibleOptions).find((option) => option.value === this.value[0])?.textContent?.trim();
       }
       if (this._isAllSelected) {
         return this.selectAllPlaceholder || "All options selected";
@@ -1462,25 +1411,21 @@ var TtCombobox = class extends i4 {
     const hidden = Boolean(this._filter !== "" && !option.value.toLowerCase().includes(this._filter.toLowerCase()) && !option.innerText.toLowerCase().includes(this._filter.toLowerCase()) || option.hidden);
     const id = `${this.id}-option-${option.value}`;
     const active = this._getActiveOptionId() === id;
-    const selected = Boolean(this.multiselect && option.selected);
+    const selected = this.value.includes(option.value);
     return x`
-      <li
-        role="option"
-        id="${this.id}-option-${option.value}"
-        aria-selected=${this.multiselect && option.selected}
-        data-active=${active}
+      <tt-option
+        id="${id}"
+        value="${option.value}"
+        ?selected=${selected}
+        ?disabled=${option.disabled}
+        ?active=${active}
+        ?include-checkbox=${this.multiselect}
+        ?hidden=${hidden}
         @click="${this._onClickOption}"
-        @mousedown="${(event) => event.preventDefault()}"
-        data-value="${option.value}"
-        aria-disabled=${option.disabled}
-        aria-hidden=${hidden || E}
-        data-deselectable=${!option.selected}
-        part="option"
       >
-        ${this.multiselect ? x`<input type="checkbox" ?checked=${selected}
-                                         role="presentation" tabindex="-1" part="checkbox">` : E}
-        <span>${o7(option.innerHTML)}</span>
-      </li>`;
+        ${o7(option.innerHTML)}
+      </tt-option>
+    `;
   }
   _hasErrorContent() {
     return this.errorElements?.length > 0;
@@ -1568,26 +1513,23 @@ __decorate([
   o6({ slot: "option", selector: "option" })
 ], TtCombobox.prototype, "options", void 0);
 __decorate([
-  o6({ slot: "option", selector: "option:not([disabled])" })
+  o6({ slot: "option", selector: "tt-option:not([disabled])" })
 ], TtCombobox.prototype, "activeOptions", void 0);
 __decorate([
   o6({ slot: "error" })
 ], TtCombobox.prototype, "errorElements", void 0);
 __decorate([
-  r6('li[role="option"]:not([aria-disabled="true"], [aria-hidden="true"])')
+  r6("tt-option:not([hidden], [disabled])")
 ], TtCombobox.prototype, "_visibleOptions", void 0);
 __decorate([
-  r6('li[role="option"]:not([aria-disabled="true"], [data-value="select-all"])')
+  r6("tt-option:not([hidden], .select-all")
+], TtCombobox.prototype, "_visibleOptionsNotSelectAll", void 0);
+__decorate([
+  r6("tt-option:not([disabled], .select-all)")
 ], TtCombobox.prototype, "_selectableOptions", void 0);
 __decorate([
-  r6('li[role="option"]:not([aria-disabled="true"], [data-value="select-all"], [aria-hidden="true"])')
+  r6("tt-option:not([disabled], [hidden], .select-all)")
 ], TtCombobox.prototype, "_selectableVisibleOptions", void 0);
-__decorate([
-  r6('li[role="option"]:not([data-value="select-all"])[aria-selected="true"]')
-], TtCombobox.prototype, "_selectedOptions", void 0);
-__decorate([
-  r6('li[role="option"]:not([data-value="select-all"], [aria-hidden="true"])[aria-selected="true"]')
-], TtCombobox.prototype, "_selectedVisibleOptions", void 0);
 __decorate([
   e5('input[role="combobox"]')
 ], TtCombobox.prototype, "_comboboxInput", void 0);
@@ -1598,6 +1540,152 @@ __decorate([
   n4({ type: Array, attribute: "value" })
 ], TtCombobox.prototype, "value", void 0);
 
+// node_modules/@triptease/tt-combobox/dist/src/tt-option/styles.js
+var styles2 = i`
+li {
+  cursor: pointer;
+  display: flex;
+  padding: 0.5rem;
+  box-sizing: border-box;
+  text-align: left;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+  align-items: center;
+  gap: 0.25rem;
+  max-width: 100%;
+  width: 100%;
+  overflow-y: visible;
+  flex: 1;
+
+  input[type="checkbox"] {
+    width: var(--checkbox-size, var(--space-scale-2));
+    aspect-ratio: 1;
+    flex: 0 0 auto;
+    accent-color: var(--color-primary-400);
+    pointer-events: none;
+  }
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    line-height: 1.1;
+  }
+
+  &[aria-hidden="true"] {
+    visibility: hidden;
+    display: none;
+  }
+
+  &[aria-disabled="true"] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &[aria-selected="true"]:not(:has(input[type="checkbox"])) {
+    color: var(--tt-combobox-option-selected-color, var(--color-primary-400));
+    font-weight: var(--font-weight-medium);
+  }
+}
+
+:host([active]), :host(:hover) {
+  li {
+    background-color: var(--tt-combobox-option-background-color-hover, var(--color-surface-300));
+    color: var(--tt-combobox-option-color-hover, inherit);
+  }
+
+  &:first-child li {
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+  }
+
+  &:last-child li {
+    border-bottom-left-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+  }
+}
+
+:host([disabled]) {
+  pointer-events: none;
+}
+`;
+
+// node_modules/@triptease/tt-combobox/dist/src/tt-option/TtOption.js
+var TtOption = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.selected = false;
+    this.active = false;
+    this.value = "";
+    this.includeCheckbox = false;
+    this._onClick = (event) => {
+      if (this.disabled) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this._onClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this._onClick);
+  }
+  render() {
+    return x`
+      <li
+        role="option"
+        aria-selected="${this.selected}"
+        aria-disabled="${this.disabled}"
+        ?aria-hidden="${this.hidden}"
+        data-active="${this.active}"
+        data-value="${this.value}"
+        @click="${this._onClick}"
+        @mousedown="${(event) => event.preventDefault()}"
+        part="option"
+      >
+        ${this.includeCheckbox ? x`<input type="checkbox" ?checked=${this.selected}
+                        role="presentation" tabindex="-1" part="checkbox">` : E}
+        <span>
+          <slot></slot>
+        </span>
+      </li>
+    `;
+  }
+};
+TtOption.styles = styles2;
+TtOption.shadowRootOptions = {
+  ...i4.shadowRootOptions,
+  delegatesFocus: true
+};
+__decorate([
+  n4({ type: Boolean })
+], TtOption.prototype, "disabled", void 0);
+__decorate([
+  n4({ type: Boolean })
+], TtOption.prototype, "selected", void 0);
+__decorate([
+  n4({ type: Boolean })
+], TtOption.prototype, "active", void 0);
+__decorate([
+  n4({ type: String })
+], TtOption.prototype, "value", void 0);
+__decorate([
+  n4({ type: Boolean, attribute: "include-checkbox" })
+], TtOption.prototype, "includeCheckbox", void 0);
+
+// node_modules/@triptease/tt-combobox/dist/src/tt-option/tt-option.js
+if (typeof window !== "undefined") {
+  if (!window.customElements.get("tt-option")) {
+    window.customElements.define("tt-option", TtOption);
+  }
+}
+
 // node_modules/@triptease/tt-combobox/dist/src/tt-combobox.js
 if (typeof window !== "undefined") {
   if (!window.customElements.get("tt-combobox")) {
@@ -1618,7 +1706,7 @@ var visuallyHiddenCss = i`
   clip-path: inset(50%);
   white-space: nowrap;
 `;
-var styles2 = i`
+var styles3 = i`
   :host {
     --nav-bar-width: 260px;
 
@@ -2332,7 +2420,7 @@ var TtNavbar = class extends i4 {
     `;
   }
 };
-TtNavbar.styles = styles2;
+TtNavbar.styles = styles3;
 __decorateClass([
   n4({ type: Function })
 ], TtNavbar.prototype, "navigate", 2);