wj-elements 0.1.61 → 0.1.63

package/dist/{popup.element-Bq7TFk6r.js → popup.element-Dna4OwCH.js}

@@ -1307,11 +1307,6 @@ class Popup extends WJElement {
       }
     });
     this._manual = false;
-    this._stageList = {
-      IDLE: "IDLE",
-      PROCESSING: "PROCESSING"
-    };
-    this._stage = this._stageList.IDLE;
   }
   /**
    * Sets the manual property of the popup.
@@ -1340,12 +1335,37 @@ class Popup extends WJElement {
   static get cssStyleSheet() {
     return styles;
   }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return ["active"];
+  }
   /**
    * Sets up the attributes for the component.
    */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
+  /**
+   * Called when an attribute changes.
+   *
+   * @param {string} name - The name of the attribute.
+   * @param {string} old - The old value of the attribute.
+   * @param {string} newName - The new value of the attribute.
+   */
+  attributeChangedCallback(name, old, newName) {
+    if (name === "active") {
+      if (this.hasAttribute(name)) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+  }
   afterDisconnect() {
     var _a;
     event.removeElement(this.anchorEl);
@@ -1354,7 +1374,6 @@ class Popup extends WJElement {
   }
   beforeDraw(context, store, params) {
     var _a;
-    this._stage = this._stageList.PROCESSING;
     document.removeEventListener("click", this.clickHandler, { capture: true });
     (_a = this.cleanup) == null ? void 0 : _a.call(this);
   }
@@ -1387,7 +1406,10 @@ class Popup extends WJElement {
   }
   afterDraw(context, store, params) {
     this.setAnchor();
-    this._stage = this._stageList.IDLE;
+    if (this.hasAttribute("active"))
+      this.show(false);
+    if (!this.hasAttribute("active"))
+      this.hide(false);
   }
   /**
    * Sets the anchor for the popup.
@@ -1492,9 +1514,9 @@ class Popup extends WJElement {
    * Adds the popup-active class to the native element.
    * Sets up auto update for repositioning.
    */
-  show() {
+  show(dispatchEvent = true) {
     var _a;
-    event.dispatchCustomEvent(this, "wje-popup:show");
+    dispatchEvent && event.dispatchCustomEvent(this, "wje-popup:show");
     this.native.classList.add("popup-active");
     (_a = this.cleanup) == null ? void 0 : _a.call(this);
     this.cleanup = autoUpdate(this.anchorEl, this.native, () => {
@@ -1508,9 +1530,9 @@ class Popup extends WJElement {
    * Removes the popup-active class from the native element.
    * Cleans up the auto update for repositioning.
    */
-  hide() {
+  hide(dispatchEvent = true) {
     var _a;
-    event.dispatchCustomEvent(this, "wje-popup:hide");
+    dispatchEvent && event.dispatchCustomEvent(this, "wje-popup:hide");
     this.native.classList.remove("popup-active");
     (_a = this.cleanup) == null ? void 0 : _a.call(this);
     this.cleanup = void 0;

package/dist/wje-dropdown.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { event } from "./wje-element.js";
-import { P as Popup } from "./popup.element-Bq7TFk6r.js";
+import { P as Popup } from "./popup.element-Dna4OwCH.js";
 class Dropdown extends WJElement {
   /**
    * Creates an instance of Dropdown.
@@ -72,7 +72,6 @@ class Dropdown extends WJElement {
      * @param e
      */
     __publicField(this, "onClose", async (e) => {
-      e.stopPropagation();
       this.classList.remove("active");
       this.popup.hide();
       event.dispatchCustomEvent(this, "wje-dropdown:close", {

package/dist/wje-icon-picker.js

@@ -9,7 +9,7 @@ import InfiniteScroll from "./wje-infinite-scroll.js";
 import Input from "./wje-input.js";
 import Tooltip from "./wje-tooltip.js";
 import "./wje-popup.js";
-import { P as Popup } from "./popup.element-Bq7TFk6r.js";
+import { P as Popup } from "./popup.element-Dna4OwCH.js";
 const styles = "/*\r\n[ Wj Icon Picker ]\r\n*/\r\n\r\n:host {\r\n  --wje-icon-picker-radius: var(--wje-border-radius-small);\r\n  --wje-icon-picker-icon-size: 1.5rem;\r\n  --wje-icon-picker-border-width: 1px;\r\n  --wje-icon-picker-border-style: solid;\r\n  --wje-icon-picker-border-color: var(--wje-border-color);\r\n  --wje-icon-picker-padding: .25rem;\r\n  padding: 0 1rem;\r\n}\r\n\r\n.anchor {\r\n  width: var(--wje-icon-picker-icon-size);\r\n  height: var(--wje-icon-picker-icon-size);\r\n  padding: var(--wje-icon-picker-padding);\r\n  border-width: var(--wje-icon-picker-border-width);\r\n  border-style: var(--wje-icon-picker-border-style);\r\n  border-color: var(--wje-icon-picker-border-color);\r\n  box-sizing: border-box;\r\n  border-radius: var(--wje-icon-picker-radius);\r\n}\r\n\r\n.picker {\r\n  width: 320px;\r\n  height: 271px;\r\n  box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);\r\n  border-radius: var(--wje-icon-picker-radius);\r\n  border-width: var(--wje-icon-picker-border-width);\r\n  border-style: var(--wje-icon-picker-border-style);\r\n  border-color: var(--wje-icon-picker-border-color);\r\n  overflow: auto;\r\n  padding: 1rem;\r\n  background: var(--wje-background);\r\n}\r\n\r\n.icon-items {\r\n  --icon-min-width: 2rem;\r\n  display: grid;\r\n  grid-gap: .5rem;\r\n  grid-template-columns: repeat(auto-fit,minmax(var(--icon-min-width),1fr));\r\n}\r\n\r\n.icon-item {\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-align: center;\r\n  color: inherit;\r\n  padding: .25rem;\r\n  min-height: var(--wje-icon-picker-icon-size);\r\n  min-width: var(--wje-icon-picker-icon-size);\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    border-radius: .25rem;\r\n    background: var(--wje-border-color);\r\n  }\r\n}\r\n\r\n.wje-size {\r\n  --wje-icon-size: 24px !important;\r\n}\r\n\r\nicon-item svg {\r\n  width: var(--wje-icon-picker-icon-size);\r\n  height: var(--wje-icon-picker-icon-size);\r\n}\r\n\r\nwje-input {\r\n  --wje-input-border-radius: 4px;\r\n  --wje-input-margin-bottom: 0;\r\n}\r\n\r\nwje-infinite-scroll {\r\n  margin-top: 1rem;\r\n}\r\n\r\nwje-select {\r\n  --wje-select-border-width: 0 0 1px 0 !important;\r\n  --wje-select-border-radius: 0 !important;\r\n  margin-bottom: 1rem;\r\n}\r\n\r\n.anchor wje-icon {\r\n  --wje-icon-size: 100% !important;\r\n}";
 class IconPicker extends WJElement {
   /**

package/dist/wje-master.js

@@ -95,7 +95,7 @@ import { default as default82 } from "./wje-toolbar-action.js";
 import { default as default83 } from "./wje-tooltip.js";
 import { default as default84 } from "./wje-visually-hidden.js";
 import { default as default85 } from "./wje-sliding-container.js";
-import { P } from "./popup.element-Bq7TFk6r.js";
+import { P } from "./popup.element-Dna4OwCH.js";
 const sk = {
   code: "sk",
   name: "Slovak",

package/dist/wje-popup.js

@@ -1,4 +1,4 @@
-import { P as Popup } from "./popup.element-Bq7TFk6r.js";
+import { P as Popup } from "./popup.element-Dna4OwCH.js";
 Popup.define("wje-popup", Popup);
 export {
   Popup as default

package/dist/wje-select.js

@@ -13,7 +13,7 @@ import Chip from "./wje-chip.js";
 import Input from "./wje-input.js";
 import Option from "./wje-option.js";
 import Options from "./wje-options.js";
-import { P as Popup } from "./popup.element-Bq7TFk6r.js";
+import { P as Popup } from "./popup.element-Dna4OwCH.js";
 const styles = "/*\r\n[ WJ Select ]\r\n*/\r\n\r\n:host {\r\n  --wje-select-border-width: 1px;\r\n  --wje-select-border-style: solid;\r\n  --wje-select-border-color: var(--wje-border-color);\r\n\r\n  --wje-select-options-border-width: 1px;\r\n  --wje-select-options-border-style: var(--wje-border-style);\r\n  --wje-select-options-border-color: var(--wje-border-color);\r\n\r\n  --wje-select-background: var(--wje-background);\r\n  --wje-select-line-height: 20px;\r\n  --wje-select-color: var(--wje-color);\r\n  --wje-select-border-radius: var(--wje-border-radius-medium);\r\n\r\n  width: 100%;\r\n  display: block;\r\n  [slot=arrow] {\r\n    transform: rotate(0deg);\r\n    transition: all .2s ease-in;\r\n  }\r\n}\r\n\r\n.native-select {\r\n  &.default{\r\n    .wrapper {\r\n      display: block;\r\n      border-width: var(--wje-select-border-width);\r\n      border-style: var(--wje-select-border-style);\r\n      border-color: var(--wje-select-border-color);\r\n      border-radius: var(--wje-select-border-radius);\r\n      padding-inline: .5rem;\r\n      padding-top: 0.125rem;\r\n      padding-bottom: 0.125rem;\r\n    }\r\n    .input-wrapper {\r\n      padding: 0;\r\n      min-height: 28px;\r\n      margin-top: -4px;\r\n    }\r\n    &.focused {\r\n      wje-label {\r\n        opacity: 0.67;\r\n        font-size: 12px;\r\n        letter-spacing: normal;\r\n      }\r\n    }\r\n    wje-label {\r\n      margin: 0;\r\n      display: block;\r\n      opacity: 1;\r\n      cursor: text;\r\n      transition: opacity 0.2s ease 0s;\r\n      line-height: var(--wje-select-line-height);\r\n      &.fade {\r\n        opacity: 0.5;\r\n        font-size: 12px;\r\n        letter-spacing: normal;\r\n      }\r\n    }\r\n  }\r\n  &.standard {\r\n    .wrapper {\r\n      border-width: var(--wje-select-border-width);\r\n      border-style: var(--wje-select-border-style);\r\n      border-color: var(--wje-select-border-color);\r\n      border-radius: var(--wje-select-border-radius);\r\n    }\r\n    .input-wrapper {\r\n      background: transparent;\r\n      width: 100%;\r\n    }\r\n  }\r\n}\r\n\r\n.wrapper {\r\n  display: flex;\r\n  width: 100%;\r\n}\r\n\r\n.input-wrapper {\r\n  display: grid;\r\n  grid-template-columns: 1fr auto auto;\r\n  align-items: center;\r\n  background-color: var(--wje-select-background);\r\n  min-height: 28px;\r\n  color: var(--wje-select-color);\r\n  line-height: var(--wje-select-line-height);\r\n  appearance: none;\r\n  padding: 2px .5rem;\r\n  font-size: 14px !important;\r\n  font-weight: normal;\r\n  vertical-align: middle;\r\n}\r\n\r\ninput {\r\n  color: var(--wje-select-color);\r\n  line-height: var(--wje-select-line-height);\r\n  font-size: 14px !important;\r\n  font-weight: 400;\r\n  letter-spacing: .01em;\r\n  border: medium;\r\n  height: 25px;\r\n  min-height: 25px;\r\n  padding: 0;\r\n  background: none;\r\n  box-shadow: none;\r\n  width: 100%;\r\n  outline: 0;\r\n  font-size: 14px !important;\r\n}\r\n\r\n::placeholder {\r\n  opacity: 1;\r\n}\r\n\r\n:host [active] {\r\n  .wrapper {\r\n    border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\r\n  }\r\n  [slot=arrow] {\r\n    transform: rotate(180deg);\r\n    transition: all .2s ease-in;\r\n  }\r\n}\r\n\r\n.options-wrapper {\r\n  border-width: var(--wje-select-options-border-width);\r\n  border-style: var(--wje-select-options-border-style);\r\n  border-color: var(--wje-select-options-border-color);\r\n  border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\r\n  margin-top: -1px;\r\n  background: var(--wje-select-background);\r\n}\r\n\r\n.find {\r\n  --wje-input-border-radius: 0;\r\n  --wje-input-border-width: 0 0 1px 0;\r\n}\r\n\r\n.list {\r\n  overflow: auto;\r\n  height: 100%;\r\n}\r\n\r\n.options-wrapper:has(.find) .list {\r\n  height: calc(100% - 32px - .5rem);\r\n}\r\n\r\n:host([multiple]) input {\r\n  position: absolute;\r\n  z-index: -1;\r\n  top: 0;\r\n  left: 0;\r\n  width: 0;\r\n  height: 0;\r\n  opacity: 0;\r\n}\r\n\r\n:host([multiple]) .chips {\r\n  display: flex;\r\n  flex: 1;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n:host([disabled]) .input-wrapper{\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.counter {\r\n  padding-inline: .5rem;\r\n}\r\n\r\nwje-chip {\r\n  --wje-chip-margin: 0 .25rem 0 0;\r\n}\r\n\r\nwje-button {\r\n  --wje-padding-top: .25rem;\r\n  --wje-padding-start: .25rem;\r\n  --wje-padding-end: .25rem;\r\n  --wje-padding-bottom: .25rem;\r\n  --wje-button-margin-inline: 0 .25rem;\r\n}\r\n";
 class Select extends WJElement {
   /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.61",
+  "version": "0.1.63",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",