wj-elements 0.0.0

package/dist/wj-master.js

@@ -0,0 +1,613 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement, { WjElementUtils, event } from "./wj-element.js";
+import { defaultStoreActions, store } from "./wj-store.js";
+import { b, w } from "./router-links-26e4a166.js";
+import { Aside } from "./wj-aside.js";
+import { Avatar } from "./wj-avatar.js";
+import { Badge } from "./wj-badge.js";
+import { Breadcrumb } from "./wj-breadcrumb.js";
+import { Breadcrumbs } from "./wj-breadcrumbs.js";
+import { Button } from "./wj-button.js";
+import { ButtonGroup } from "./wj-button-group.js";
+import { Card } from "./wj-card.js";
+import { CardContent } from "./wj-card-content.js";
+import { CardControls } from "./wj-card-controls.js";
+import { CardHeader } from "./wj-card-header.js";
+import { CardSubtitle } from "./wj-card-subtitle.js";
+import { CardTitle } from "./wj-card-title.js";
+import { Checkbox } from "./wj-checkbox.js";
+import { Chip } from "./wj-chip.js";
+import { Col } from "./wj-col.js";
+import { ColorPicker } from "./wj-color-picker.js";
+import { Container } from "./wj-container.js";
+import { CopyButton } from "./wj-copy-button.js";
+import { Dialog } from "./wj-dialog.js";
+import { Divider } from "./wj-divider.js";
+import { Dropdown } from "./wj-dropdown.js";
+import { Footer } from "./wj-footer.js";
+import { Grid } from "./wj-grid.js";
+import { Header } from "./wj-header.js";
+import { Icon } from "./wj-icon.js";
+import { IconPicker } from "./wj-icon-picker.js";
+import { Img } from "./wj-img.js";
+import { ImgComparer } from "./wj-img-comparer.js";
+import { InfiniteScroll } from "./wj-infinite-scroll.js";
+import { Input } from "./wj-input.js";
+import { Item } from "./wj-item.js";
+import { Label } from "./wj-label.js";
+import { List } from "./wj-list.js";
+import { Main } from "./wj-main.js";
+import { Menu } from "./wj-menu.js";
+import { MenuButton } from "./wj-menu-button.js";
+import { MenuItem } from "./wj-menu-item.js";
+import { MenuLabel } from "./wj-menu-label.js";
+import { Popup } from "./wj-popup.js";
+import { ProgressBar } from "./wj-progress-bar.js";
+import { Radio } from "./wj-radio.js";
+import { RadioGroup } from "./wj-radio-group.js";
+import { Route } from "./wj-route.js";
+import { Routerx } from "./wj-routerx.js";
+import { RouterLink } from "./wj-router-link.js";
+import "./wj-router-outlet.js";
+import { Row } from "./wj-row.js";
+import { Slider } from "./wj-slider.js";
+import { SplitView } from "./wj-split-view.js";
+import { Textarea } from "./wj-textarea.js";
+import { Thumbnail } from "./wj-thumbnail.js";
+import { Toast } from "./wj-toast.js";
+import { Toggle } from "./wj-toggle.js";
+import { Toolbar } from "./wj-toolbar.js";
+import { ToolbarAction } from "./wj-toolbar-action.js";
+import { Tooltip } from "./wj-tooltip.js";
+import { VisuallyHidden } from "./wj-visually-hidden.js";
+const global = "";
+const styles$7 = ":host {\n  color: red;\n}";
+class ExampleElement extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "ExampleElement");
+  }
+  static get cssStyleSheet() {
+    return styles$7;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+    WjElementUtils.setAttributesToElement(this, {
+      "test": "test"
+    });
+  }
+  beforeDraw(context, store2, params) {
+  }
+  draw(context, store2, params) {
+    console.log(context, store2, params);
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("div");
+    element.innerHTML = params.text;
+    fragment.appendChild(element);
+    return fragment;
+  }
+  afterDraw(context, store2, params) {
+    console.log("afterDraw", this.params);
+  }
+}
+customElements.get("wj-example-element") || window.customElements.define("wj-example-element", ExampleElement);
+const styles$6 = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Button Group ]\n*/\n:host {\n  display: inline-block;\n}\n:host .native-button-group {\n  display: flex;\n  flex-wrap: nowrap;\n  line-height: 1;\n}\n:host slot {\n  display: contents;\n}\n::slotted(wj-button) {\n  margin: 0;\n}";
+class NavMenu extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "ButtonGroup");
+  }
+  static get cssStyleSheet() {
+    return styles$6;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(context, store2, params) {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("div");
+    element.classList.add("native-button-group");
+    element.setAttribute("part", "native");
+    this.slotElement = document.createElement("slot");
+    element.appendChild(this.slotElement);
+    fragment.appendChild(element);
+    return fragment;
+  }
+}
+customElements.get("wj-button-group") || window.customElements.define("wj-button-group", NavMenu);
+const styles$5 = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Option ]\n*/\n:host {\n  --wj-option-padding-top: .5rem;\n  --wj-option-padding-bottom: .5rem;\n  --wj-option-highlighted: #f4f4f4;\n  display: block;\n}\n:host wj-icon {\n  visibility: hidden;\n  margin-inline: 0.5rem;\n}\n:host([selected]) wj-icon {\n  visibility: visible;\n}\n.native-option {\n  display: flex;\n  align-items: center;\n  padding-top: var(--wj-option-padding-top);\n  padding-bottom: var(--wj-option-padding-bottom);\n}\n.native-option:hover {\n  background-color: var(--wj-option-highlighted);\n}\n::slotted([slot=start]) {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  margin-inline-end: 0.5rem;\n}\n::slotted([slot=end]) {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  margin-inline: auto 0.5rem;\n}";
+class Option extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "Option");
+  }
+  set selected(value) {
+    return value ? this.setAttribute("selected", "") : this.removeAttribute("selected");
+  }
+  static get cssStyleSheet() {
+    return styles$5;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(context, store2, params) {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("div");
+    element.classList.add("native-option");
+    element.setAttribute("part", "native");
+    let icon = document.createElement("wj-icon");
+    icon.setAttribute("name", "check");
+    let start = document.createElement("slot");
+    start.setAttribute("name", "start");
+    let slot = document.createElement("slot");
+    let end = document.createElement("slot");
+    end.setAttribute("name", "end");
+    element.appendChild(icon);
+    element.appendChild(start);
+    element.appendChild(slot);
+    element.appendChild(end);
+    fragment.appendChild(element);
+    return fragment;
+  }
+  afterDraw() {
+    event.addListener(this, "click", "wj:option-change");
+  }
+}
+customElements.get("wj-option") || window.customElements.define("wj-option", Option);
+const styles$4 = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Options ]\n*/";
+class Options extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "Options");
+  }
+  static get cssStyleSheet() {
+    return styles$4;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  async beforeDraw() {
+    this.response = await this.getPages();
+    let fragment = document.createDocumentFragment();
+    this.response.forEach((item, index) => {
+      let option = document.createElement("wj-option");
+      option.setAttribute("value", item[this.itemValue] || item.value);
+      option.innerText = item[this.itemText] || item.text;
+      fragment.appendChild(option);
+    });
+    this.parentElement.appendChild(fragment);
+    event.dispatchCustomEvent(this, "wj:options-load", {});
+  }
+  async getPages(page) {
+    const response = await fetch(this.url);
+    if (!response.ok) {
+      throw new Error(`An error occurred: ${response.status}`);
+    }
+    return await response.json();
+  }
+}
+customElements.get("wj-options") || window.customElements.define("wj-options", Options);
+const styles$3 = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Option ]\n*/\n:host {\n  --wj-select-border-width: 1px;\n  --wj-select-border-style: solid;\n  --wj-select-border-color: var(--wj-border-color);\n  --wj-select-options-border-width: 1px;\n  --wj-select-options-border-style: solid;\n  --wj-select-options-border-color: var(--wj-border-color);\n  --wj-select-background-color: #fff;\n  --wj-select-line-height: 20px;\n  --wj-select-color: #212121;\n  --wj-select-border-radius: 4px;\n  width: 100%;\n  display: block;\n}\n:host [slot=arrow] {\n  transform: rotate(0deg);\n  transition: all 0.2s ease-in;\n}\n.native-select.default .wrapper {\n  display: block;\n  border-width: var(--wj-select-border-width);\n  border-style: var(--wj-select-border-style);\n  border-color: var(--wj-select-border-color);\n  border-radius: var(--wj-select-border-radius);\n  padding-inline: 0.5rem;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.native-select.default .input-wrapper {\n  padding: 0;\n  min-height: 25px;\n  margin-top: -4px;\n}\n.native-select.default.focused wj-label {\n  opacity: 0.67;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n.native-select.default wj-label {\n  margin: 0;\n  display: block;\n  opacity: 1;\n  cursor: text;\n  transition: opacity 0.2s ease 0s;\n  line-height: var(--wj-select-line-height);\n}\n.native-select.default wj-label.fade {\n  opacity: 0.5;\n  font-size: 12px;\n  letter-spacing: normal;\n}\n.native-select.standard .input-wrapper {\n  border-width: var(--wj-select-border-width);\n  border-style: var(--wj-select-border-style);\n  border-color: var(--wj-select-border-color);\n  border-radius: var(--wj-select-border-radius);\n  width: 100%;\n}\n.wrapper {\n  display: flex;\n  width: 100%;\n}\n.input-wrapper {\n  display: grid;\n  grid-template-columns: 1fr auto auto;\n  align-items: center;\n  background-color: var(--wj-select-background-color);\n  min-height: 28px;\n  color: var(--wj-select-color);\n  line-height: var(--wj-select-line-height);\n  appearance: none;\n  padding: 2px 0.5rem;\n  font-size: 14px;\n  font-weight: normal;\n  vertical-align: middle;\n}\ninput {\n  border: medium;\n  height: 25px;\n  min-height: 25px;\n  padding: 0;\n  background: none;\n  box-shadow: none;\n  width: 100%;\n  outline: 0;\n}\n::placeholder {\n  opacity: 1;\n}\n:host [active] .input-wrapper {\n  border-radius: var(--wj-select-border-radius) var(--wj-select-border-radius) 0 0;\n}\n:host [active] [slot=arrow] {\n  transform: rotate(180deg);\n  transition: all 0.2s ease-in;\n}\n.option-wrapper {\n  border-width: var(--wj-select-options-border-width);\n  border-style: var(--wj-select-options-border-style);\n  border-color: var(--wj-select-options-border-color);\n  border-radius: 0 0 var(--wj-select-border-radius) var(--wj-select-border-radius);\n  margin-top: -1px;\n  background: var(--wj-select-background-color);\n  overflow: auto;\n}\n:host([multiple]) input {\n  position: absolute;\n  z-index: -1;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  opacity: 0;\n}\n:host([multiple]) .chips {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  flex-wrap: wrap;\n}\n:host([disabled]) .input-wrapper {\n  opacity: 0.5;\n  pointer-events: none;\n  cursor: not-allowed;\n}\n.counter {\n  padding-inline: 0.5rem;\n}\nwj-chip {\n  --wj-chip-margin: 0 .25rem 0 0;\n}\nwj-button {\n  --wj-padding-top: .25rem;\n  --wj-padding-start: .25rem;\n  --wj-padding-end: .25rem;\n  --wj-padding-bottom: .25rem;\n  --wj-button-margin-inline: 0 .25rem;\n}";
+class Select extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "Select");
+    __publicField(this, "optionChange", (e) => {
+      let allOptions = this.getAllOptions();
+      if (!this.hasAttribute("multiple")) {
+        allOptions.forEach((option) => {
+          option.selected = false;
+          option.removeAttribute("selected");
+        });
+        this.popup.removeAttribute("active");
+      }
+      e.target.selected = !e.target.hasAttribute("selected");
+      this.selections(e.target);
+    });
+    __publicField(this, "removeChip", (e) => {
+      let option = e.target.option;
+      option.selected = false;
+      option.removeAttribute("selected");
+      e.target.parentNode.removeChild(e.target);
+      this.selections(null, 0);
+    });
+    this._selected = [];
+    this.counterEl = null;
+  }
+  set selected(value) {
+    this._selected = value;
+  }
+  get selected() {
+    return this.getSelected();
+  }
+  set trigger(value) {
+    this.setAttribute("trigger", value);
+  }
+  get trigger() {
+    return this.getAttribute("trigger") || "click";
+  }
+  static get cssStyleSheet() {
+    return styles$3;
+  }
+  static get observedAttributes() {
+    return ["active", "value"];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(context, store2, params) {
+    let fragment = document.createDocumentFragment();
+    this.classList.add("wj-placement", "wj-" + this.placement || "wj-start");
+    let native = document.createElement("div");
+    native.setAttribute("part", "native");
+    native.classList.add("native-select", this.variant || "default");
+    let wrapper = document.createElement("div");
+    wrapper.classList.add("wrapper");
+    wrapper.setAttribute("slot", "anchor");
+    let label = document.createElement("wj-label");
+    label.innerText = this.label || "";
+    let inputWrapper = document.createElement("div");
+    inputWrapper.classList.add("input-wrapper");
+    let input = document.createElement("input");
+    input.setAttribute("type", "text");
+    input.setAttribute("part", "input");
+    input.setAttribute("autocomplete", "off");
+    input.setAttribute("readonly", "");
+    input.setAttribute("placeholder", this.placeholder || "");
+    let arrow = document.createElement("wj-icon");
+    arrow.setAttribute("name", "chevron-down");
+    arrow.setAttribute("slot", "arrow");
+    let chips = document.createElement("div");
+    chips.classList.add("chips");
+    chips.innerText = this.placeholder || "";
+    let optionsWrapper = document.createElement("div");
+    optionsWrapper.classList.add("option-wrapper");
+    optionsWrapper.style.setProperty("height", this.maxHeight || "auto");
+    let slot = document.createElement("slot");
+    let clear = document.createElement("wj-button");
+    clear.setAttribute("variant", "link");
+    clear.setAttribute("part", "clear");
+    let clearIcon = document.createElement("wj-icon");
+    clearIcon.setAttribute("name", "x");
+    clear.appendChild(clearIcon);
+    let popup = document.createElement("wj-popup");
+    popup.setAttribute("placement", "bottom-start");
+    popup.setAttribute("manual", "");
+    popup.setAttribute("size", "");
+    if (this.hasAttribute("disabled"))
+      popup.setAttribute("disabled", "");
+    if (this.variant === "standard") {
+      if (this.hasAttribute("label"))
+        native.appendChild(label);
+    } else {
+      wrapper.appendChild(label);
+    }
+    inputWrapper.appendChild(input);
+    if (this.hasAttribute("multiple"))
+      inputWrapper.appendChild(chips);
+    if (this.hasAttribute("clearable"))
+      inputWrapper.appendChild(clear);
+    inputWrapper.appendChild(arrow);
+    optionsWrapper.appendChild(slot);
+    wrapper.appendChild(inputWrapper);
+    popup.appendChild(wrapper);
+    popup.appendChild(optionsWrapper);
+    if (this.trigger === "click")
+      popup.setAttribute("manual", "");
+    native.appendChild(popup);
+    this.native = native;
+    this.popup = popup;
+    this.labelElement = label;
+    this.input = input;
+    this.optionsWrapper = optionsWrapper;
+    this.chips = chips;
+    this.clear = clear;
+    fragment.appendChild(native);
+    return fragment;
+  }
+  afterDraw(context, store2, params) {
+    this.input.addEventListener("focus", (e) => {
+      this.labelElement.classList.add("fade");
+      this.native.classList.add("focused");
+    });
+    this.input.addEventListener("blur", (e) => {
+      this.native.classList.remove("focused");
+      if (!e.target.value)
+        this.labelElement.classList.remove("fade");
+    });
+    this.addEventListener("wj:option-change", this.optionChange);
+    this.clear.addEventListener("wj:button-click", (e) => {
+      this.getAllOptions().forEach((option) => {
+        option.selected = false;
+        option.removeAttribute("selected");
+      });
+      this.selections();
+      e.stopPropagation();
+    });
+    this.selections();
+    this.optionsWrapper.addEventListener("wj:options-load", (e) => {
+      this.optionsWrapper.scrollTo(0, 0);
+    });
+  }
+  getAllOptions() {
+    return this.querySelectorAll("wj-option");
+  }
+  getSelectedOptions() {
+    return this.querySelectorAll("wj-option[selected]");
+  }
+  getSelected(option) {
+    let selectedOptions = this.getSelectedOptions();
+    selectedOptions = Array.isArray(selectedOptions) ? selectedOptions : Array.from(selectedOptions);
+    selectedOptions = selectedOptions.map((option2) => {
+      return {
+        value: option2.value,
+        text: option2.textContent.trim()
+      };
+    });
+    return selectedOptions;
+  }
+  selectionChanged(option = null, length = 0) {
+    if (this.hasAttribute("multiple")) {
+      this.value = this.selectedOptions.map((el) => el).reverse();
+      if (this.placeholder && length === 0) {
+        this.chips.innerHTML = this.placeholder;
+        this.input.value = "";
+      } else {
+        if (this.counterEl instanceof HTMLElement || length > +this.maxOptions) {
+          this.counter();
+        } else {
+          if (option != null)
+            this.chips.appendChild(this.getChip(option));
+        }
+      }
+    } else {
+      let value = (option == null ? void 0 : option.textContent.trim()) || "";
+      this.value = value;
+      this.input.value = value;
+    }
+  }
+  selections(option) {
+    let options = this.getSelectedOptions();
+    this.selectedOptions = Array.isArray(options) ? options : Array.from(options);
+    if (this.selectedOptions.length >= +this.maxOptions) {
+      this.counterEl = null;
+    }
+    this.chips.innerHTML = "";
+    if (this.selectedOptions.length > 0) {
+      this.selectedOptions.forEach((option2, index) => {
+        this.selectionChanged(option2, ++index);
+      });
+    } else {
+      this.selectionChanged();
+    }
+  }
+  counter() {
+    if (this.counterEl && this.value.length === +this.maxOptions) {
+      this.counterEl.remove();
+      this.counterEl = null;
+      return;
+    }
+    if (!this.counterEl) {
+      this.counterEl = document.createElement("span");
+      this.counterEl.classList.add("counter");
+      this.chips.appendChild(this.counterEl);
+    }
+    this.counterEl.innerText = `+${this.value.length - +this.maxOptions}`;
+  }
+  getChip(option) {
+    let chip = document.createElement("wj-chip");
+    chip.setAttribute("removable", "");
+    chip.setAttribute("color", "menu");
+    chip.addEventListener("wj:chip-remove", this.removeChip);
+    chip.option = option;
+    let label = document.createElement("wj-label");
+    label.innerText = option.textContent.trim();
+    chip.appendChild(label);
+    return chip;
+  }
+}
+customElements.get("wj-select") || window.customElements.define("wj-select", Select);
+const styles$2 = '/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Tab ]\n*/\n:host {\n  --wj-font-size: 10px;\n  --wj-tab-text-transfrom: uppercase;\n  --wj-tab-font-weight: 500;\n  --wj-tab-letter-spacing: 0.06em;\n  --wj-tab-padding-inline: 1rem;\n  --wj-tab-padding-top: .75rem;\n  --wj-tab-padding-bottom: .75rem;\n  --wj-tab-color-active: rgba(114, 82, 211, 1);\n  --wj-tab-color-hover: rgba(114, 82, 211, 0.05);\n  display: block;\n  position: relative;\n}\n:host a {\n  display: block;\n  align-items: center;\n  white-space: nowrap;\n  font-family: var(--wj-font-family-secondary);\n  font-size: var(--wj-font-size);\n  letter-spacing: var(--wj-tab-letter-spacing);\n  text-transform: var(--wj-tab-text-transfrom);\n  font-weight: var(--wj-tab-font-weight);\n  text-decoration: none;\n  padding-inline: var(--wj-tab-padding-inline);\n  padding-top: var(--wj-tab-padding-top);\n  padding-bottom: var(--wj-tab-padding-bottom);\n  color: var(--wj-color);\n}\n:host a > svg {\n  inline-size: 1.5em;\n  pointer-events: none;\n}\n:host a:hover {\n  background: var(--wj-tab-color-hover);\n}\n:host a:hover:after {\n  display: block;\n}\n:host a:after {\n  content: " ";\n  display: none;\n  block-size: 0.15rem;\n  writing-mode: var(--wj-tab-writing-mode);\n  background: var(--wj-tab-color-active);\n  position: absolute;\n  bottom: var(--wj-tab-bottom);\n  left: var(--wj-tab-start);\n  right: var(--wj-tab-end);\n  top: var(--wj-tab-top);\n}\n:host([disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n  background: inherit;\n}\n:host([disabled]) a:after {\n  display: none;\n}\n:host([active]) a:after {\n  display: block;\n}';
+class Tab extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "Tab");
+    this.last = false;
+  }
+  static get cssStyleSheet() {
+    return styles$2;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(context, store2, params) {
+    let fragment = document.createDocumentFragment();
+    let a = document.createElement("a");
+    a.setAttribute("href", "#" + this.panel);
+    a.innerHTML = this.innerHTML;
+    fragment.appendChild(a);
+    return fragment;
+  }
+  afterDraw() {
+    event.addListener(this, "click", "wj:tab-change");
+  }
+}
+customElements.get("wj-tab") || window.customElements.define("wj-tab", Tab);
+const styles$1 = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Tab Group ]\n*/\n:host {\n  --wj-tab-top: 0;\n  --wj-tab-start: 0;\n  --wj-tab-end: 0;\n  --wj-tab-bottom: 0;\n}\n.native-tab-group {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n}\n.native-tab-group > header {\n  display: flex;\n  flex-direction: column;\n}\n.native-tab-group > header > nav {\n  display: flex;\n}\n.native-tab-group > section {\n  width: 100%;\n}\n.native-tab-group > section > article {\n  scroll-snap-align: start;\n  overflow-y: auto;\n  overscroll-behavior-y: contain;\n  padding: var(--space-2) var(--space-3);\n}\n:host([variant=top]) {\n  --wj-tab-top: auto !important;\n  --wj-tab-writing-mode: horizontal-tb;\n}\n:host([variant=top]) .native-tab-group {\n  flex-direction: column;\n}\n:host([variant=top]) nav {\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n}\n:host([variant=start]) {\n  --wj-tab-start: auto !important;\n  --wj-tab-writing-mode: vertical-rl;\n}\n:host([variant=start]) .native-tab-group {\n  flex-direction: row;\n}\n:host([variant=start]) nav {\n  flex-direction: column;\n  border-right: 1px solid rgba(0, 0, 0, 0.1);\n}\n:host([variant=end]) {\n  --wj-tab-writing-mode: vertical-rl;\n}\n:host([variant=end]) .native-tab-group {\n  flex-direction: row-reverse;\n}\n:host([variant=end]) nav {\n  flex-direction: column;\n  border-left: 1px solid rgba(0, 0, 0, 0.1);\n}\n:host([variant=bottom]) {\n  --wj-tab-bottom: auto !important;\n  --wj-tab-writing-mode: horizontal-tb;\n}\n:host([variant=bottom]) .native-tab-group {\n  flex-direction: column-reverse;\n}\n:host([variant=bottom]) nav {\n  border-top: 1px solid rgba(0, 0, 0, 0.1);\n}";
+class TabGroup extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "TabGroup");
+  }
+  static get cssStyleSheet() {
+    return styles$1;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(context, store2, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native-tab-group");
+    let header = document.createElement("header");
+    header.classList.add("scroll-snap-x");
+    let nav = document.createElement("nav");
+    let section = document.createElement("section");
+    let slot = document.createElement("slot");
+    let slotNav = document.createElement("slot");
+    slotNav.setAttribute("name", "nav");
+    header.appendChild(nav);
+    nav.appendChild(slotNav);
+    section.appendChild(slot);
+    native.appendChild(header);
+    native.appendChild(section);
+    fragment.appendChild(native);
+    return fragment;
+  }
+  afterDraw() {
+    console.log(this.context.querySelectorAll("[active]"));
+    let activeTab = this.getActiveTab();
+    let activeTabName = activeTab ? activeTab[0].name : this.getTabAll()[0].panel;
+    console.log("NAME:", activeTab, activeTabName, this.getTabAll());
+    this.setActiveTab(activeTabName);
+    this.addEventListener("wj:tab-change", (e) => {
+      console.log("TAB CHANGE", e.detail.context.hasAttribute("disabled"));
+      if (e.detail.context.hasAttribute("disabled"))
+        return false;
+      this.setActiveTab(e.detail.context.panel);
+    });
+  }
+  removeActiveTab() {
+    this.getPanelAll().forEach((el) => {
+      el.removeAttribute("active");
+    });
+    this.getTabAll().forEach((el) => {
+      el.removeAttribute("active");
+    });
+  }
+  setActiveTab(tab) {
+    this.removeActiveTab();
+    this.querySelector(`[panel="${tab}"]`).setAttribute("active", "");
+    this.querySelector(`[name="${tab}"]`).setAttribute("active", "");
+  }
+  getActiveTab() {
+    let activeTabs = Array.from(this.context.querySelectorAll("[active]"));
+    return activeTabs.length > 0 ? activeTabs[0] : null;
+  }
+  getTabAll() {
+    return this.context.querySelector('[name="nav"]').assignedElements();
+  }
+  getPanelAll() {
+    return Array.from(this.querySelectorAll("wj-tab-panel"));
+  }
+}
+customElements.get("wj-tab-group") || window.customElements.define("wj-tab-group", TabGroup);
+const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Breadcrumbs ]\n*/\n:host {\n  display: none;\n  flex-wrap: wrap;\n  align-items: center;\n  padding: 1rem;\n}\n:host([active]) {\n  display: block;\n}";
+class TabPanel extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "TabPanel");
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(context, store2, params) {
+    let fragment = document.createDocumentFragment();
+    let element = document.createElement("slot");
+    fragment.appendChild(element);
+    return fragment;
+  }
+}
+customElements.get("wj-tab-panel") || window.customElements.define("wj-tab-panel", TabPanel);
+export {
+  Aside,
+  Avatar,
+  Badge,
+  Breadcrumb,
+  Breadcrumbs,
+  Button,
+  ButtonGroup,
+  Card,
+  CardContent,
+  CardControls,
+  CardHeader,
+  CardSubtitle,
+  CardTitle,
+  Checkbox,
+  Chip,
+  Col,
+  ColorPicker,
+  Container,
+  CopyButton,
+  Dialog,
+  Divider,
+  Dropdown,
+  ExampleElement,
+  Footer,
+  Grid,
+  Header,
+  Icon,
+  IconPicker,
+  Img,
+  ImgComparer,
+  InfiniteScroll,
+  Input,
+  Item,
+  Label,
+  List,
+  Main,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuLabel,
+  NavMenu,
+  Option,
+  Options,
+  Popup,
+  ProgressBar,
+  Radio,
+  RadioGroup,
+  Route,
+  RouterLink,
+  Routerx,
+  Row,
+  Select,
+  Slider,
+  SplitView,
+  Tab,
+  TabGroup,
+  TabPanel,
+  Textarea,
+  Thumbnail,
+  Toast,
+  Toggle,
+  Toolbar,
+  ToolbarAction,
+  Tooltip,
+  VisuallyHidden,
+  WJElement,
+  b as bindRouterLinks,
+  defaultStoreActions,
+  store,
+  w as withRouterLinks
+};

package/dist/wj-menu-button.js

@@ -0,0 +1,40 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement, { event } from "./wj-element.js";
+import "./wj-store.js";
+const styles = "/*!\n* direction.scss\n*/\n/* Skeleton Variables */\n/*\n[ Menu Label ]\n*/\n:host {\n  display: inline-flex;\n}\n@media (min-width: 768px) {\n  :host {\n    display: none;\n  }\n}";
+class MenuButton extends WJElement {
+  constructor() {
+    super();
+    __publicField(this, "className", "MenuButton");
+  }
+  static get cssStyleSheet() {
+    return styles;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let slot = document.createElement("slot");
+    fragment.appendChild(slot);
+    return fragment;
+  }
+  afterDraw() {
+    event.addListener(this, "click", null, (e) => {
+      console.log("click menu button", this.contentId);
+      document.querySelector(`#${this.contentId}`).classList.toggle("open");
+    });
+  }
+}
+customElements.get("wj-menu-button") || window.customElements.define("wj-menu-button", MenuButton);
+export {
+  MenuButton
+};