@triptease/tt-navbar 0.0.61 → 0.0.64

package/dist/web/getInitialNavbarState.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.61
+* @triptease/tt-navbar v0.0.64
 */
 
 // src/Config.ts

package/dist/web/global.d.js

@@ -1,4 +1,4 @@
 /**
-* @triptease/tt-navbar v0.0.61
+* @triptease/tt-navbar v0.0.64
 */
 //# sourceMappingURL=global.d.js.map

package/dist/web/index.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.61
+* @triptease/tt-navbar v0.0.64
 */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -686,6 +686,11 @@ var t4 = class extends e8 {
 t4.directiveName = "unsafeSVG", t4.resultType = 2;
 var o8 = e7(t4);
 
+// node_modules/@triptease/icons/dist/src/icons/alert.js
+var alert = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM9.25 5.75C9.25 5.33579 9.58579 5 10 5C10.4142 5 10.75 5.33579 10.75 5.75V11.25C10.75 11.6642 10.4142 12 10 12C9.58579 12 9.25 11.6642 9.25 11.25V5.75ZM10.75 13.75C10.75 14.1642 10.4142 14.5 10 14.5C9.58579 14.5 9.25 14.1642 9.25 13.75C9.25 13.3358 9.58579 13 10 13C10.4142 13 10.75 13.3358 10.75 13.75Z" fill="#3B353B"/>
+</svg>`;
+
 // node_modules/@triptease/icons/dist/src/icons/campaigns.js
 var campaigns = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M13.75 11C13.75 9.47056 14.1646 8.11984 14.7956 7.17338C15.1658 6.61803 15.5905 6.22612 16.0341 5.99602L17.0795 5.75165C17.8298 5.78274 18.5916 6.25415 19.2044 7.17338C19.8354 8.11984 20.25 9.47056 20.25 11C20.25 12.5294 19.8354 13.8802 19.2044 14.8266C18.5916 15.7458 17.8298 16.2173 17.0794 16.2484L16.0341 16.004C15.5905 15.7739 15.1659 15.382 14.7956 14.8266C14.1646 13.8802 13.75 12.5294 13.75 11ZM12.25 11C12.25 9.3468 12.6627 7.80949 13.373 6.61808L5.48783 8.46138C4.46994 8.69932 3.75 9.60698 3.75 10.6523V11.3477C3.75 12.393 4.46994 13.3007 5.48783 13.5386L13.373 15.3819C12.6627 14.1905 12.25 12.6532 12.25 11ZM5.14639 7.00075L15.5263 4.57427C15.9817 4.36663 16.4756 4.25 17 4.25C18.4334 4.25 19.6392 5.12146 20.4525 6.34133C21.2692 7.56645 21.75 9.21573 21.75 11C21.75 12.7843 21.2692 14.4335 20.4525 15.6587C19.6392 16.8785 18.4334 17.75 17 17.75C16.4756 17.75 15.9817 17.6334 15.5263 17.4257L11.75 16.5429V17.5C11.75 19.2949 10.2949 20.75 8.5 20.75C6.70507 20.75 5.25 19.2949 5.25 17.5V15.0235L5.14639 14.9992C3.4499 14.6027 2.25 13.0899 2.25 11.3477V10.6523C2.25 8.91009 3.4499 7.39734 5.14639 7.00075ZM6.75 15.3741V17.5C6.75 18.4665 7.5335 19.25 8.5 19.25C9.4665 19.25 10.25 18.4665 10.25 17.5V16.1923L6.75 15.3741Z" />
@@ -865,20 +870,6 @@ var i6 = e7(class extends i5 {
   }
 });
 
-// node_modules/@triptease/tt-combobox/node_modules/@triptease/icons/dist/src/icons/chevron-down.js
-var chevronDown2 = `
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-chevron-down chevron-down"
-       viewBox="0 0 16 16" role="presentation">
-    <path fill-rule="evenodd"
-          d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
-          stroke="currentColor"/>
-  </svg>`;
-
-// node_modules/@triptease/tt-combobox/node_modules/@triptease/icons/dist/src/icons/alert.js
-var alert2 = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM9.25 5.75C9.25 5.33579 9.58579 5 10 5C10.4142 5 10.75 5.33579 10.75 5.75V11.25C10.75 11.6642 10.4142 12 10 12C9.58579 12 9.25 11.6642 9.25 11.25V5.75ZM10.75 13.75C10.75 14.1642 10.4142 14.5 10 14.5C9.58579 14.5 9.25 14.1642 9.25 13.75C9.25 13.3358 9.58579 13 10 13C10.4142 13 10.75 13.3358 10.75 13.75Z" fill="#3B353B"/>
-</svg>`;
-
 // node_modules/@triptease/tt-combobox/dist/src/styles.js
 var styles = i`
   :host {
@@ -1042,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] {
@@ -1105,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);
@@ -1157,7 +1091,6 @@ var styles = i`
     &[data-hidden] {
       display: none;
     }
-
   }
 `;
 
@@ -1167,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();
@@ -1193,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);
@@ -1210,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 = () => {
@@ -1228,25 +1167,23 @@ 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}"
             aria-controls="${this.id}-list" tabindex="-1" ?disabled=${this.disabled} part="arrow">
-      ${o8(chevronDown2)}
+      ${o8(chevronDown)}
     </button>
   `;
     this.internals = this.attachInternals();
@@ -1286,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();
       });
     }
@@ -1294,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);
@@ -1391,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);
@@ -1405,7 +1345,7 @@ var TtCombobox = class extends i4 {
   }
   _onInput(event) {
     const input = event.target;
-    const filter2 = input.value.toLowerCase();
+    const filter2 = input.value;
     if (filter2 !== "" && !this._expanded) {
       this._expanded = true;
     }
@@ -1429,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";
@@ -1468,28 +1408,24 @@ var TtCombobox = class extends i4 {
       />`;
   }
   _renderOption(option) {
-    const hidden = Boolean(this._filter !== "" && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter) || option.hidden);
+    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;
@@ -1519,7 +1455,7 @@ var TtCombobox = class extends i4 {
       <slot name="option" @slotchange=${() => this.requestUpdate("options")}></slot>
       <div class="errormessage" id="error-msg-${this.id}" role="alert" aria-atomic="true"
            ?data-hidden="${!this._hasErrorContent()}" part="error">
-        ${o8(alert2)}
+        ${o8(alert)}
         <slot name="error"></slot>
       </div>
     `;
@@ -1577,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);
@@ -1607,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")) {
@@ -1627,7 +1706,7 @@ var visuallyHiddenCss = i`
   clip-path: inset(50%);
   white-space: nowrap;
 `;
-var styles2 = i`
+var styles3 = i`
   :host {
     --nav-bar-width: 260px;
 
@@ -2341,7 +2420,7 @@ var TtNavbar = class extends i4 {
     `;
   }
 };
-TtNavbar.styles = styles2;
+TtNavbar.styles = styles3;
 __decorateClass([
   n4({ type: Function })
 ], TtNavbar.prototype, "navigate", 2);