wj-elements 0.1.134 → 0.1.136

package/dist/wje-accordion-item.js

@@ -1,112 +0,0 @@
-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);
-import WJElement, { event } from "./wje-element.js";
-const styles = "/*\n[ WJ Accordion Item ]\n*/\n\n:host {\n    --wje-accordion-background: var(--wje-color-contrast-0);\n    --wje-accordion-border: var(--wje-color-contrast-0);\n    --wje-accordion-border-radius: var(--wje-border-radius-large);\n    --wje-accordion-background-hover: var(--wje-color-contrast-1);\n    --wje-accordion-border-hover: var(--wje-color-contrast-2);\n    --wje-accordion-background-expanded: var(--wje-color-contrast-0);\n    --wje-accordion-border-expanded: var(--wje-color-contrast-0);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='primary']) {\n    --wje-accordion-background: var(--wje-color-primary-1);\n    --wje-accordion-border: var(--wje-color-primary-1);\n    --wje-accordion-background-hover: var(--wje-color-primary-2);\n    --wje-accordion-border-hover: var(--wje-color-primary-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-primary-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='complete']) {\n    --wje-accordion-background: var(--wje-color-complete-1);\n    --wje-accordion-border: var(--wje-color-complete-1);\n    --wje-accordion-background-hover: var(--wje-color-complete-2);\n    --wje-accordion-border-hover: var(--wje-color-complete-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-complete-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='success']) {\n    --wje-accordion-background: var(--wje-color-success-1);\n    --wje-accordion-border: var(--wje-color-success-1);\n    --wje-accordion-background-hover: var(--wje-color-success-2);\n    --wje-accordion-border-hover: var(--wje-color-success-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-success-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='danger']) {\n    --wje-accordion-background: var(--wje-color-danger-1);\n    --wje-accordion-border: var(--wje-color-danger-1);\n    --wje-accordion-background-hover: var(--wje-color-danger-2);\n    --wje-accordion-border-hover: var(--wje-color-danger-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-danger-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='warning']) {\n    --wje-accordion-background: var(--wje-color-warning-1);\n    --wje-accordion-border: var(--wje-color-warning-1);\n    --wje-accordion-background-hover: var(--wje-color-warning-2);\n    --wje-accordion-border-hover: var(--wje-color-warning-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-warning-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='info']) {\n    --wje-accordion-background: var(--wje-color-info-1);\n    --wje-accordion-border: var(--wje-color-info-1);\n    --wje-accordion-background-hover: var(--wje-color-info-2);\n    --wje-accordion-border-hover: var(--wje-color-info-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-info-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host {\n    display: block;\n    margin-bottom: 0.5rem;\n}\n\n/*:host(.expanding) #content {*/\n/*    display: none;*/\n/*}*/\n\n/*:host(.collapsing) #content {*/\n/*    max-height: 0;*/\n/*}*/\n\n.native-accordion-item {\n    display: block;\n    background-color: var(--wje-accordion-background);\n    border-radius: var(--wje-accordion-border-radius);\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--wje-accordion-border);\n    transition: background-color 200ms ease-in-out;\n    &:hover {\n        background-color: var(--wje-accordion-background-hover);\n        border-color: var(--wje-accordion-border-hover);\n    }\n}\n\n:host(.expanded) .native-accordion-item {\n    background-color: var(--wje-accordion-background-expanded);\n    border-color: var(--wje-accordion-border-expanded);\n}\n\n.headline {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    font-size: var(--wje-font-size) !important;\n    color: var(--wje-accordion-headline-color);\n    line-height: normal !important;\n    margin: 0 !important;\n    padding: 0.75rem;\n}\n\n[name='description'] {\n    font-size: var(--wje-font-size-small);\n    color: var(--wje-color-contrast-6);\n}\n\nwje-icon {\n    margin-left: auto;\n    transform: rotate(var(--wje-accordion-marker-rotate, 0deg));\n}\n\n#content {\n    /*background: var(--wje-accordion-background);*/\n    display: block;\n    color: var(--wje-accordion-content-color);\n    overflow: hidden;\n    max-height: 0;\n    transition: max-height 250ms ease-in-out;\n}\n\n#content slot {\n    display: block;\n    margin: 0 0.75rem 0.75rem 0.75rem;\n}\n\n:host(.expanded) #content {\n    /*display: block;*/\n    /*padding: 0 .75rem .75rem .75rem;*/\n    max-height: 100vh;\n}\n";
-class AccordionItem extends WJElement {
-  /**
-   * Constructor for the AccordionItem class.
-   */
-  constructor() {
-    super();
-    /**
-     * The class name for the Accordion Item element.
-     * @type {string}
-     */
-    __publicField(this, "className", "AccordionItem");
-    /**
-     * Method to handle the attribute changes.
-     */
-    __publicField(this, "collapse", () => {
-      this.classList.remove("expanded");
-      this.classList.add("collapsed");
-    });
-    /**
-     * Method to handle the attribute changes.
-     */
-    __publicField(this, "expand", () => {
-      this.classList.remove("collapsed");
-      this.classList.add("expanded");
-    });
-  }
-  /**
-   * Getter for the CSS stylesheet.
-   * @returns {object} The styles for the Accordion Item element.
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Getter for the observed attributes.
-   * @returns {Array} An array containing the name of the observed attribute.
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * Method to setup attributes for the Accordion Item element.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.
-   * @returns {object} The document fragment containing the drawn element.
-   */
-  draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-accordion-item");
-    let headline = document.createElement("div");
-    headline.setAttribute("part", "headline");
-    headline.classList.add("headline");
-    let headlineDescription = document.createElement("slot");
-    headlineDescription.setAttribute("part", "description");
-    headlineDescription.setAttribute("name", "description");
-    let slotHeadline = document.createElement("slot");
-    slotHeadline.setAttribute("name", "headline");
-    let toggle = document.createElement("slot");
-    toggle.setAttribute("part", "toggle");
-    toggle.setAttribute("name", "toggle");
-    let mark = document.createElement("wje-icon");
-    mark.setAttribute("name", "chevron-down");
-    let content = document.createElement("div");
-    content.setAttribute("part", "content");
-    content.setAttribute("id", "content");
-    let slot = document.createElement("slot");
-    slot.setAttribute("name", "content");
-    toggle.appendChild(mark);
-    headline.appendChild(slotHeadline);
-    headline.appendChild(toggle);
-    headline.appendChild(headlineDescription);
-    content.appendChild(slot);
-    native.appendChild(headline);
-    native.appendChild(content);
-    fragment.appendChild(native);
-    this.headline = headline;
-    this.toggle = toggle;
-    return fragment;
-  }
-  /**
-   * Method to execute after the Accordion Item element is drawn.
-   */
-  afterDraw() {
-    if (!this.classList.contains("expanded")) this.classList.add("collapsed");
-    this.headline.addEventListener("click", () => {
-      if (this.classList.contains("collapsed")) {
-        event.dispatchCustomEvent(this, "wje-accordion-item:open");
-        this.toggle.style.setProperty("--wje-accordion-marker-rotate", "180deg");
-        this.expand();
-      } else {
-        event.dispatchCustomEvent(this, "wje-accordion-item:close");
-        this.toggle.style.setProperty("--wje-accordion-marker-rotate", "0deg");
-        this.collapse();
-      }
-    });
-  }
-}
-AccordionItem.define("wje-accordion-item", AccordionItem);
-export {
-  AccordionItem as default
-};

package/dist/wje-accordion.js

@@ -1,121 +0,0 @@
-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);
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Accordion ]\n*/\n\n:host {\n    display: block;\n    width: 100%;\n}\n";
-class Accordion extends WJElement {
-  /**
-   * Constructor for the Accordion class.
-   */
-  constructor() {
-    super();
-    /**
-     * The class name for the Accordion element.
-     * @type {string}
-     */
-    __publicField(this, "className", "Accordion");
-  }
-  /**
-   * Sets the `multiple` attribute on the element.
-   * If `true`, the `multiple` attribute is added.
-   * If `false`, the `multiple` attribute is removed.
-   * @param {boolean} value A boolean value indicating whether the element should support multiple selections.
-   */
-  set multiple(value) {
-    if (value) {
-      this.setAttribute("multiple", "");
-    } else {
-      this.removeAttribute("multiple");
-    }
-  }
-  /**
-   * Determines whether the element has the `multiple` attribute.
-   * @returns {boolean} `true` if the `multiple` attribute is present, otherwise `false`.
-   */
-  get multiple() {
-    return this.hasAttribute("multiple");
-  }
-  /**
-   * Sets the value of the `index` attribute.
-   * @param {number|string} value The value to set for the `index` attribute.
-   */
-  set index(value) {
-    this.setAttribute("index", value);
-  }
-  /**
-   * Retrieves the value of the `index` attribute as a number.
-   * @returns {number} The numerical value of the `index` attribute, or `0` if the attribute is not set.
-   */
-  get index() {
-    return +this.getAttribute("index") || 0;
-  }
-  /**
-   * Getter for the CSS stylesheet.
-   * @returns {object} The styles for the Accordion element.
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Getter for the observed attributes.
-   * @returns {Array} An array containing the name of the observed attribute.
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * Method to setup attributes for the Accordion element.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Method to run before the element is drawn.
-   */
-  beforeDraw() {
-    this.getAccordions().forEach((accordion, index) => {
-      if (this.index && +this.index === index) {
-        accordion.classList.add("expanded");
-      }
-    });
-  }
-  /**
-   * Method to draw the Accordion element.
-   * @returns {object} The document fragment containing the drawn element.
-   */
-  draw() {
-    let fragment = document.createDocumentFragment();
-    let slot = document.createElement("slot");
-    fragment.appendChild(slot);
-    this.slotEl = slot;
-    return fragment;
-  }
-  /**
-   * Method to run after the element is drawn.
-   */
-  afterDraw() {
-    this.addEventListener("wje-accordion-item:open", (e) => {
-      if (!this.multiple) this.collapseAll(e.detail.context);
-    });
-  }
-  /**
-   * Method to run after the element is drawn.
-   * @param exception
-   */
-  collapseAll(exception) {
-    this.getAccordions().forEach((accordion) => {
-      if (accordion !== exception) accordion.collapse();
-    });
-  }
-  /**
-   * Method to get the accordions.
-   * @returns {Array} An array containing the accordions.
-   */
-  getAccordions() {
-    return Array.from(this.querySelectorAll(":scope > wje-accordion-item"));
-  }
-}
-Accordion.define("wje-accordion", Accordion);
-export {
-  Accordion as default
-};