wj-elements 0.1.160 → 0.1.162

package/dist/wje-tab.js

@@ -2,7 +2,113 @@ 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 Tab ]\n*/\n\n:host {\n    display: block;\n    position: relative;\n    .native-tab {\n        display: flex;\n        align-items: center;\n        white-space: nowrap;\n        font-family: var(--wje-tab-font-family);\n        font-size: var(--wje-tab-font-size);\n        letter-spacing: var(--wje-tab-letter-spacing);\n        text-transform: var(--wje-tab-text-transfrom);\n        font-weight: var(--wje-tab-font-weight);\n        text-decoration: none;\n        padding-inline: var(--wje-tab-padding-inline);\n        padding-top: var(--wje-tab-padding-top);\n        padding-bottom: var(--wje-tab-padding-bottom);\n        border-radius: var(--wje-tab-border-radius);\n        color: var(--wje-color);\n        line-height: var(--wje-tab-line-height);\n        & > svg {\n            inline-size: 1.5em;\n            pointer-events: none;\n        }\n\n        &:hover {\n            background: var(--wje-tab-color-hover);\n            &:after {\n                display: block;\n            }\n        }\n\n        &:after {\n            content: ' ';\n            display: none;\n            block-size: 0.15rem;\n            writing-mode: var(--wje-tab-writing-mode);\n            background: var(--wje-tab-color-active);\n            position: absolute;\n            bottom: var(--wje-tab-bottom);\n            left: var(--wje-tab-start);\n            right: var(--wje-tab-end);\n            top: var(--wje-tab-top);\n        }\n    }\n}\n\n:host([disabled]) a {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background: inherit;\n    &:after {\n        display: none;\n    }\n}\n\n:host([active]) a:after {\n    display: block;\n}\n";
+import { b as bindRouterLinks } from "./router-links-CJnOdbas.js";
+const styles = `/*
+[ WJ Tab ]
+*/
+
+:host(:not([slot="more"])) {
+    display: block;
+    position: relative;
+    .native-tab {
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+        font-family: var(--wje-tab-font-family);
+        font-size: var(--wje-tab-font-size);
+        letter-spacing: var(--wje-tab-letter-spacing);
+        text-transform: var(--wje-tab-text-transfrom);
+        font-weight: var(--wje-tab-font-weight);
+        text-decoration: none;
+        padding-inline: var(--wje-tab-padding-inline);
+        padding-top: var(--wje-tab-padding-top);
+        padding-bottom: var(--wje-tab-padding-bottom);
+        border-radius: var(--wje-tab-border-radius);
+        color: var(--wje-color);
+        line-height: var(--wje-tab-line-height);
+        & > svg {
+            inline-size: 1.5em;
+            pointer-events: none;
+        }
+
+        &:hover {
+            background: var(--wje-tab-color-hover);
+            &:after {
+                display: block;
+            }
+        }
+
+        &:after {
+            content: ' ';
+            display: none;
+            block-size: 0.15rem;
+            writing-mode: var(--wje-tab-writing-mode);
+            background: var(--wje-tab-color-active);
+            position: absolute;
+            bottom: var(--wje-tab-bottom);
+            left: var(--wje-tab-start);
+            right: var(--wje-tab-end);
+            top: var(--wje-tab-top);
+        }
+    }
+}
+
+:host([slot="more"]) {
+    --wje-menu-item-safe-triangle-cursor-x: 0;
+    --wje-menu-item-safe-triangle-cursor-y: 0;
+    --wje-menu-item-safe-triangle-submenu-start-x: 0;
+    --wje-menu-item-safe-triangle-submenu-start-y: 0;
+    --wje-menu-item-safe-triangle-submenu-end-x: 0;
+    --wje-menu-item-safe-triangle-submenu-end-y: 0;
+
+    display: block;
+    .native-tab {
+        background: var(--wje-menu-item-background);
+        position: relative;
+        display: block;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: center;
+        color: var(--wje-menu-item-color);
+        padding-top: var(--wje-menu-item-padding-top);
+        padding-bottom: var(--wje-menu-item-padding-bottom);
+        padding-inline: var(--wje-spacing-large);
+        transition: var(--wje-transition-fast) fill;
+        user-select: none;
+        white-space: nowrap;
+        cursor: pointer;
+        text-decoration: none;
+
+        &:hover {
+            color: var(--wje-menu-item-color-hover);
+            background: var(--wje-menu-item-background-hover);
+        }
+
+        &:focus {
+            color: var(--wje-menu-item-color-focus);
+            background: var(--wje-menu-item-background-focus);
+        }
+
+        &:active {
+            color: var(--wje-menu-item-color-active);
+            background: var(--wje-menu-item-background-active);
+        }
+    }
+}
+
+:host([disabled]) a {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background: inherit;
+    &:after {
+        display: none;
+    }
+}
+
+:host(:not([slot="more"]).active) a:after {
+    display: block;
+}
+`;
 class Tab extends WJElement {
   /**
    * Creates an instance of Tab.
@@ -14,6 +120,36 @@ class Tab extends WJElement {
      */
     __publicField(this, "className", "Tab");
     this.last = false;
+    this._hasPanel = false;
+  }
+  /**
+   * Sets the panel attribute to the specified value.
+   * @param {string} value The value to set for the panel attribute.
+   */
+  set panel(value) {
+    this.setAttribute("panel", value);
+  }
+  /**
+   * Retrieves the value of the 'panel' attribute of the element.
+   * @returns {string|null} Returns the 'panel' attribute value if it exists; otherwise, returns null.
+   */
+  get panel() {
+    return this.getAttribute("panel") || null;
+  }
+  /**
+   * Sets the value of the 'route' attribute for the current object.
+   * @param {string} value The new value to set for the 'route' attribute.
+   */
+  set route(value) {
+    this.setAttribute("route", value);
+  }
+  /**
+   * Retrieves the value of the 'route' attribute.
+   * If the 'route' attribute is not set, it returns null.
+   * @returns {string|null} The value of the 'route' attribute or null if not set.
+   */
+  get route() {
+    return this.getAttribute("route") || null;
   }
   /**
    * Returns the CSS styles for the component.
@@ -28,6 +164,7 @@ class Tab extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.setAttribute("active-class", "active");
   }
   /**
    * Draws the component for the tab.
@@ -49,8 +186,16 @@ class Tab extends WJElement {
    * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.
    */
   afterDraw() {
+    this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });
     event.addListener(this, "click", "wje-tab:change");
   }
+  /**
+   * Cleans up before the component is disconnected.
+   */
+  beforeDisconnect() {
+    var _a;
+    (_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
+  }
 }
 Tab.define("wje-tab", Tab);
 export {

package/dist/wje-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-tab.js","sources":["../packages/wje-tab/tab.element.js","../packages/wje-tab/tab.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tab` is a custom web component that represents a tab.\n * @summary This element represents a tab.\n * @documentation https://elements.webjet.sk/components/tab\n * @status stable\n * @augments {WJElement}\n * @cssproperty [--wje-tab-text-transform=uppercase] - The text transformation for the tab (e.g., uppercase, lowercase).\n * @cssproperty [--wje-tab-font-weight=500] - The font weight of the tab text.\n * @cssproperty [--wje-tab-letter-spacing=0.06em] - The letter spacing of the tab text.\n * @cssproperty [--wje-tab-padding-inline=1rem] - The horizontal padding of the tab.\n * @cssproperty [--wje-tab-padding-top=.75rem] - The top padding of the tab text.\n * @cssproperty [--wje-tab-padding-bottom=.75rem] - The bottom padding of the tab text.\n * @cssproperty [--wje-tab-color-active=var(--wje-color-primary-11)] - The text color of the active tab.\n * @cssproperty [--wje-tab-color-hover=var(--wje-color-primary-1)] - The text color of the tab when hovered.\n * //@fires wje-tab:change - Dispatched when the tab is changed.\n * @tag wje-tab\n */\nexport default class Tab extends WJElement {\n    /**\n     * Creates an instance of Tab.\n     */\n    constructor() {\n        super();\n\n        /**\n         * Indicates whether this is the last tab.\n         * @type {boolean}\n         */\n        this.last = false;\n    }\n\n    /**\n     * The class name for the component.\n     */\n    className = 'Tab';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the tab.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        let a = document.createElement('a');\n        a.setAttribute('href', '#' + this.panel);\n        a.setAttribute('part', 'native');\n        a.classList.add('native-tab');\n        a.appendChild(slot);\n\n        fragment.appendChild(a);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up event listeners after the component is rendered.\n     * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.\n     */\n    afterDraw() {\n        event.addListener(this, 'click', 'wje-tab:change');\n    }\n}\n","import Tab from './tab.element.js';\n\nexport default Tab;\n\nTab.define('wje-tab', Tab);\n"],"names":[],"mappings":";;;;;AAoBe,MAAM,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA,EAIvC,cAAc;AACV,UAAO;AAYX;AAAA;AAAA;AAAA,qCAAY;AANR,SAAK,OAAO;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,IAAI,SAAS,cAAc,GAAG;AAClC,MAAE,aAAa,QAAQ,MAAM,KAAK,KAAK;AACvC,MAAE,aAAa,QAAQ,QAAQ;AAC/B,MAAE,UAAU,IAAI,YAAY;AAC5B,MAAE,YAAY,IAAI;AAElB,aAAS,YAAY,CAAC;AAEtB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,YAAY;AACR,UAAM,YAAY,MAAM,SAAS,gBAAgB;AAAA,EACzD;AACA;AC9EA,IAAI,OAAO,WAAW,GAAG;"}
+{"version":3,"file":"wje-tab.js","sources":["../packages/wje-tab/tab.element.js","../packages/wje-tab/tab.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tab` is a custom web component that represents a tab.\n * @summary This element represents a tab.\n * @documentation https://elements.webjet.sk/components/tab\n * @status stable\n * @augments {WJElement}\n * @cssproperty [--wje-tab-text-transform=uppercase] - The text transformation for the tab (e.g., uppercase, lowercase).\n * @cssproperty [--wje-tab-font-weight=500] - The font weight of the tab text.\n * @cssproperty [--wje-tab-letter-spacing=0.06em] - The letter spacing of the tab text.\n * @cssproperty [--wje-tab-padding-inline=1rem] - The horizontal padding of the tab.\n * @cssproperty [--wje-tab-padding-top=.75rem] - The top padding of the tab text.\n * @cssproperty [--wje-tab-padding-bottom=.75rem] - The bottom padding of the tab text.\n * @cssproperty [--wje-tab-color-active=var(--wje-color-primary-11)] - The text color of the active tab.\n * @cssproperty [--wje-tab-color-hover=var(--wje-color-primary-1)] - The text color of the tab when hovered.\n * //@fires wje-tab:change - Dispatched when the tab is changed.\n * @tag wje-tab\n */\nexport default class Tab extends WJElement {\n    /**\n     * Creates an instance of Tab.\n     */\n    constructor() {\n        super();\n\n        /**\n         * Indicates whether this is the last tab.\n         * @type {boolean}\n         */\n        this.last = false;\n        this._hasPanel = false;\n    }\n\n    /**\n     * Sets the panel attribute to the specified value.\n     * @param {string} value The value to set for the panel attribute.\n     */\n    set panel(value) {\n        this.setAttribute('panel', value);\n    }\n\n    /**\n     * Retrieves the value of the 'panel' attribute of the element.\n     * @returns {string|null} Returns the 'panel' attribute value if it exists; otherwise, returns null.\n     */\n    get panel() {\n        return this.getAttribute('panel') || null;\n    }\n\n    /**\n     * Sets the value of the 'route' attribute for the current object.\n     * @param {string} value The new value to set for the 'route' attribute.\n     */\n    set route(value) {\n        this.setAttribute('route', value);\n    }\n\n    /**\n     * Retrieves the value of the 'route' attribute.\n     * If the 'route' attribute is not set, it returns null.\n     * @returns {string|null} The value of the 'route' attribute or null if not set.\n     */\n    get route() {\n        return this.getAttribute('route') || null;\n    }\n\n    /**\n     * The class name for the component.\n     */\n    className = 'Tab';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAttribute('active-class', 'active');\n    }\n\n    /**\n     * Draws the component for the tab.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        let a = document.createElement('a');\n        a.setAttribute('href', '#' + this.panel);\n        a.setAttribute('part', 'native');\n        a.classList.add('native-tab');\n        a.appendChild(slot);\n\n        fragment.appendChild(a);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up event listeners after the component is rendered.\n     * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.\n     */\n    afterDraw() {\n        this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n        event.addListener(this, 'click', 'wje-tab:change');\n    }\n\n    /**\n     * Cleans up before the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.unbindRouterLinks?.();\n    }\n}\n","import Tab from './tab.element.js';\n\nexport default Tab;\n\nTab.define('wje-tab', Tab);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBe,MAAM,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA,EAIvC,cAAc;AACV,UAAO;AA8CX;AAAA;AAAA;AAAA,qCAAY;AAxCR,SAAK,OAAO;AACZ,SAAK,YAAY;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,gBAAgB,QAAQ;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,IAAI,SAAS,cAAc,GAAG;AAClC,MAAE,aAAa,QAAQ,MAAM,KAAK,KAAK;AACvC,MAAE,aAAa,QAAQ,QAAQ;AAC/B,MAAE,UAAU,IAAI,YAAY;AAC5B,MAAE,YAAY,IAAI;AAElB,aAAS,YAAY,CAAC;AAEtB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,YAAY;AACR,SAAK,oBAAoB,gBAAgB,KAAK,eAAe,EAAE,UAAU,OAAO;AAChF,UAAM,YAAY,MAAM,SAAS,gBAAgB;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;;AACf,eAAK,sBAAL;AAAA,EACR;AACA;AC1HA,IAAI,OAAO,WAAW,GAAG;"}

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.160",
+  "version": "0.1.162",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",