npm - wj-elements - Versions diffs - 0.1.154 → 0.1.156 - Mend

wj-elements 0.1.154 → 0.1.156

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (92) hide show

package/dist/wje-button.js CHANGED Viewed

@@ -179,6 +179,20 @@ class Button extends WJElement {
   get stopPropagation() {
     return bool(this.getAttribute("stop-propagation"));
   }
+  set customEvent(value) {
+    this.setAttribute("custom-event", value);
+  }
+  get customEvent() {
+    return this.getAttribute("custom-event");
+  }
+  get customEventParameters() {
+    const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith("custom-event-"));
+    return attributes.reduce((acc, attr) => {
+      const key = attr.name.replace("custom-event-", "");
+      acc[key] = attr.value;
+      return acc;
+    }, {});
+  }
   /**
    * Get CSS stylesheet for the Button element.
    * @static
@@ -295,6 +309,13 @@ class Button extends WJElement {
     }
     return fragment;
   }
+  populateCustomEvent() {
+    let customEvent = this.customEvent;
+    let customEventParameters = this.customEventParameters;
+    this.dispatchEvent(
+      new CustomEvent(customEvent, { detail: customEventParameters, composed: true, bubbles: true })
+    );
+  }
   /**
    * After draw method for the Button element.
    */
@@ -311,6 +332,9 @@ class Button extends WJElement {
         this.setAttribute("value", "on");
       }
     }
+    if (this.hasAttribute("custom-event")) {
+      event.addListener(this, "click", null, this.populateCustomEvent);
+    }
     if (this.hasAttribute("dialog")) {
       event.addListener(this, "click", null, this.eventDialogOpen);
     } else {
@@ -337,6 +361,12 @@ class Button extends WJElement {
    */
   beforeDisconnect() {
     var _a;
+    event.removeListener(this, "click", null, this.eventDialogOpen);
+    event.removeListener(this, "click", "wje-button:click", null);
+    event.removeListener(this, "click", "wje-button:toggle", this.toggleStates);
+    event.removeListener(this, "click", null, this.populateCustomEvent);
+    event.removeListener(this, "click", "wje-button:submit", null);
+    event.removeListener(this, "click", "wje-button:reset", null);
     this.removeEventListener("click", this.eventDialogOpen);
     (_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
   }

package/dist/wje-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-button.js","sources":["../packages/utils/utils.js","../packages/wje-button/button.element.js","../packages/wje-button/button.js"],"sourcesContent":["export const bool = (v) => {\n return v === 'false' \|\| v === 'null' \|\| v === 'NaN' \|\| v === 'undefined' \|\| v === '0' ? false : !!v;\n};\n","import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { bool } from '../utils/utils.js';\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary This class represents Button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/button\n * @status stable\n * @augments WJElement\n * @dependency wje-icon\n * @slot - The button main content.\n * @slot icon - The button icon.\n * @slot caret - The button caret.\n * @slot start - The button start slot.\n * @slot end - The button end slot.\n * @slot toggle - The button toggle slot.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-button-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-button-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;\n /\n\nexport default class Button extends WJElement {\n /\n Button constructor method.\n * @class\n /\n constructor() {\n super();\n\n this.internals_ = this.attachInternals();\n }\n\n /\n Dependencies of the Button element.\n * @type {object}\n /\n dependencies = {\n 'wje-icon': Icon,\n };\n\n /\n Properties of the element Button.\n * @param value\n /\n set color(value) {\n this.setAttribute('color', value \|\| 'default');\n }\n\n /\n Get color of the Button element.\n * @returns {string\|string}\n /\n get color() {\n return this.getAttribute('color') \|\| 'default';\n }\n\n /\n Set variant of the Button element.\n * @param value\n /\n set caret(value) {\n this.setAttribute('caret', value);\n }\n\n /\n Get variant of the Button element.\n * @returns {boolean}\n /\n get caret() {\n return this.hasAttribute('caret');\n }\n\n /\n Set variant of the Button element.\n * @param value\n /\n set tooltip(value) {\n this.setAttribute('tooltip', value);\n }\n\n /\n Get variant of the Button element.\n * @returns {boolean}\n /\n get tooltip() {\n return this.hasAttribute('tooltip');\n }\n\n /\n Set variant of the Button element.\n * @param value\n /\n set dialog(value) {\n this.setAttribute('dialog', value);\n }\n\n /\n Get variant of the Button element.\n * @returns {string\|object}\n /\n get dialog() {\n return this.getAttribute('dialog');\n }\n\n /\n Set active state of the Button element.\n * @param {boolean} value The value to set\n /\n set active(value) {\n this.setAttribute('active', '');\n }\n\n /\n Get active state of the Button element.\n * @returns {boolean} active - The active state\n /\n get active() {\n return this.hasAttribute('active');\n }\n\n /\n Set disabled state of the Button element.\n * @param {boolean} value The value to set\n /\n set disabled(value) {\n this.removeAttribute('disabled');\n\n if (value) {\n this.setAttribute('disabled', '');\n }\n }\n\n /\n Get disabled state of the Button element.\n * @returns {boolean} disabled - The disabled state\n /\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /\n Set fill of the Button element.\n * @param {string} value The value to set\n /\n set fill(value) {\n this.setAttribute('fill', value);\n }\n\n /\n Get fill of the Button element.\n * @returns {string} fill - The fill value\n /\n get fill() {\n return this.getAttribute('fill') \|\| 'solid';\n }\n\n /\n Set outline state of the Button element.\n * @param {boolean} value The value to set\n /\n set outline(value) {\n this.setAttribute('outline', '');\n }\n\n /\n Get outline state of the Button element.\n * @returns {boolean} outline - The outline state\n /\n get outline() {\n return this.hasAttribute('outline');\n }\n\n /\n Set stop propagation state of the Button element.\n * @param {boolean} value The value to set\n /\n set stopPropagation(value) {\n this.setAttribute('stop-propagation', bool(value));\n }\n\n /\n Get stop propagation state of the Button element.\n * @returns {boolean} stopPropagation - The stop propagation state\n /\n get stopPropagation() {\n return bool(this.getAttribute('stop-propagation'));\n }\n\n /\n Class name for the Button element\n * @type {string}\n /\n className = 'Button';\n\n /\n Get CSS stylesheet for the Button element.\n * @static\n * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Get observed attributes for the Button element.\n * @static\n * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.\n /\n static get observedAttributes() {\n return ['disabled'];\n }\n\n /\n @summary A static property that indicates whether the custom element is form-associated or not.\n * Form-associated custom elements are elements that can participate in form submission.\n * @type {boolean}\n /\n static formAssociated = true;\n\n /\n @summary Callback function that is called when the custom element is associated with a form.\n * This function sets the internal `_form` property to the associated form.\n * @param {HTMLFormElement} form The form the custom element is associated with.\n /\n formAssociatedCallback(form) {\n this._form = form;\n }\n\n /\n @summary Callback function that is called when the form-associated state of the custom element changes.\n * This function updates the 'disabled' attribute of the element based on the new state.\n * @param {boolean} disabled The new form-associated state.\n /\n formDisabledCallback(disabled) {\n if (disabled) {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n /\n Setup attributes for the Button element.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Draw method for the Button element.\n * @returns {object} fragment - The document fragment containing the drawn element.\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement(this.hasAttribute('href') ? 'a' : 'button');\n if (this.hasAttribute('href')) {\n native.setAttribute('href', this.getAttribute('href'));\n } else {\n if (this.type === 'submit') {\n native.setAttribute('type', 'submit');\n }\n }\n\n native.classList.add('native-button');\n native.setAttribute('part', 'native');\n\n this.classList.remove('wje-button-disabled');\n\n if (this.disabled) native.classList.add('wje-button-disabled');\n\n if (this.variant) native.classList.add('wje-button-' + this.variant);\n\n if (this.hasAttribute('round')) native.classList.add('wje-button-round');\n\n if (this.hasAttribute('circle')) native.classList.add('wje-button-circle');\n\n if (this.outline) native.classList.add('wje-outline');\n\n if (this.fill) native.classList.add('wje-button-' + this.fill);\n\n if (this.size) native.classList.add('wje-button-' + this.size);\n\n if (\n (this.querySelectorAll('[slot=caret]').length < 1 && this.hasAttribute('caret')) \|\|\n this.hasAttribute('only-caret')\n ) {\n let i = document.createElement('wje-icon');\n i.style.setProperty('--wje-icon-size', '14px');\n i.setAttribute('slot', 'caret');\n i.setAttribute('name', 'chevron-down');\n i.setAttribute('part', 'caret');\n\n this.appendChild(i);\n }\n\n if (this.active) {\n this.classList.add('wje-active');\n let i = document.createElement('wje-icon');\n i.setAttribute('name', 'check');\n\n this.appendChild(i);\n }\n\n native.classList.add('wje-color-' + this.color, 'wje-color');\n\n let span = document.createElement('span');\n span.setAttribute('part', 'inner');\n span.classList.add('button-inner');\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'icon-only');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'start');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'end');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'caret');\n span.appendChild(slot);\n\n this.hasToggle = WjElementUtils.hasSlot(this, 'toggle');\n\n if (this.hasToggle) {\n this.slotToggle = document.createElement('slot');\n this.slotToggle.setAttribute('name', 'toggle');\n\n span.appendChild(this.slotToggle);\n }\n\n native.appendChild(span);\n\n if (this.tooltip) {\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('content', this.getAttribute('tooltip'));\n tooltip.setAttribute('placement', this.getAttribute('tooltip-placement') \|\| 'top');\n tooltip.appendChild(native);\n\n fragment.appendChild(tooltip);\n } else {\n fragment.appendChild(native);\n }\n\n return fragment;\n }\n\n /\n After draw method for the Button element.\n /\n afterDraw() {\n if (this.hasAttribute('route')) {\n this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n }\n\n // nastavenie toggle podla atributu, ak nie je nastaveny, tak sa zobrazi vzdy prvy element\n if (this.hasToggle) {\n if (this.toggle === 'off') {\n this.slotToggle.assignedNodes()[1].classList.add('show');\n this.setAttribute('value', 'off');\n } else {\n this.slotToggle.assignedNodes()[0].classList.add('show');\n this.setAttribute('value', 'on');\n }\n }\n\n if (this.hasAttribute('dialog')) {\n event.addListener(this, 'click', null, this.eventDialogOpen);\n } else {\n event.addListener(this, 'click', 'wje-button:click', null); // { stopPropagation: this.stopPropagation } - zrusene kvoli dropdown kde som nevedel odchytit event click\n }\n\n if (this.hasToggle)\n event.addListener(this, 'click', 'wje-button:toggle', this.toggleStates, {\n stopPropagation: this.stopPropagation,\n });\n\n if (this.type === 'submit') {\n event.addListener(this, 'click', 'wje-button:submit', () => {\n console.log('submit', this.internals_.form);\n event.dispatchCustomEvent(this.internals_.form, 'submit', {});\n });\n }\n\n if (this.type === 'reset') {\n event.addListener(this, 'click', 'wje-button:reset', () => {\n this.internals_.form.reset();\n });\n }\n }\n\n /\n Before disconnect method for the Button element.\n /\n beforeDisconnect() {\n this.removeEventListener('click', this.eventDialogOpen);\n this.unbindRouterLinks?.();\n }\n\n /\n Event dialog open method for the Button element.\n * @param {Event} e The event object\n /\n eventDialogOpen = (e) => {\n event.dispatchCustomEvent(this, this.dialog);\n };\n\n /\n Toggle states method for the Button element.\n */\n toggleStates = () => {\n const nodes = this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);\n\n nodes.forEach((node, index) => {\n if (node.classList.contains('show')) {\n node.classList.remove('show');\n } else {\n node.classList.add('show');\n this.setAttribute('value', index === 0 ? 'on' : 'off');\n }\n });\n };\n}\n","import Button from './button.element.js';\n\nexport default Button;\n\nButton.define('wje-button', Button);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-button.js","sources":["../packages/utils/utils.js","../packages/wje-button/button.element.js","../packages/wje-button/button.js"],"sourcesContent":["export const bool = (v) => {\n return v === 'false' \|\| v === 'null' \|\| v === 'NaN' \|\| v === 'undefined' \|\| v === '0' ? false : !!v;\n};\n","import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { bool } from '../utils/utils.js';\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary This class represents Button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/button\n * @status stable\n * @augments WJElement\n * @dependency wje-icon\n * @slot - The button main content.\n * @slot icon - The button icon.\n * @slot caret - The button caret.\n * @slot start - The button start slot.\n * @slot end - The button end slot.\n * @slot toggle - The button toggle slot.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-button-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-button-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;\n /\n\nexport default class Button extends WJElement {\n /\n Button constructor method.\n * @class\n /\n constructor() {\n super();\n\n this.internals_ = this.attachInternals();\n }\n\n /\n Dependencies of the Button element.\n * @type {object}\n /\n dependencies = {\n 'wje-icon': Icon,\n };\n\n /\n Properties of the element Button.\n * @param value\n /\n set color(value) {\n this.setAttribute('color', value \|\| 'default');\n }\n\n /\n Get color of the Button element.\n * @returns {string\|string}\n /\n get color() {\n return this.getAttribute('color') \|\| 'default';\n }\n\n /\n Set variant of the Button element.\n * @param value\n /\n set caret(value) {\n this.setAttribute('caret', value);\n }\n\n /\n Get variant of the Button element.\n * @returns {boolean}\n /\n get caret() {\n return this.hasAttribute('caret');\n }\n\n /\n Set variant of the Button element.\n * @param value\n /\n set tooltip(value) {\n this.setAttribute('tooltip', value);\n }\n\n /\n Get variant of the Button element.\n * @returns {boolean}\n /\n get tooltip() {\n return this.hasAttribute('tooltip');\n }\n\n /\n Set variant of the Button element.\n * @param value\n /\n set dialog(value) {\n this.setAttribute('dialog', value);\n }\n\n /\n Get variant of the Button element.\n * @returns {string\|object}\n /\n get dialog() {\n return this.getAttribute('dialog');\n }\n\n /\n Set active state of the Button element.\n * @param {boolean} value The value to set\n /\n set active(value) {\n this.setAttribute('active', '');\n }\n\n /\n Get active state of the Button element.\n * @returns {boolean} active - The active state\n /\n get active() {\n return this.hasAttribute('active');\n }\n\n /\n Set disabled state of the Button element.\n * @param {boolean} value The value to set\n /\n set disabled(value) {\n this.removeAttribute('disabled');\n\n if (value) {\n this.setAttribute('disabled', '');\n }\n }\n\n /\n Get disabled state of the Button element.\n * @returns {boolean} disabled - The disabled state\n /\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /\n Set fill of the Button element.\n * @param {string} value The value to set\n /\n set fill(value) {\n this.setAttribute('fill', value);\n }\n\n /\n Get fill of the Button element.\n * @returns {string} fill - The fill value\n /\n get fill() {\n return this.getAttribute('fill') \|\| 'solid';\n }\n\n /\n Set outline state of the Button element.\n * @param {boolean} value The value to set\n /\n set outline(value) {\n this.setAttribute('outline', '');\n }\n\n /\n Get outline state of the Button element.\n * @returns {boolean} outline - The outline state\n /\n get outline() {\n return this.hasAttribute('outline');\n }\n\n /\n Set stop propagation state of the Button element.\n * @param {boolean} value The value to set\n /\n set stopPropagation(value) {\n this.setAttribute('stop-propagation', bool(value));\n }\n\n /\n Get stop propagation state of the Button element.\n * @returns {boolean} stopPropagation - The stop propagation state\n /\n get stopPropagation() {\n return bool(this.getAttribute('stop-propagation'));\n }\n\n set customEvent(value) {\n this.setAttribute('custom-event', value);\n }\n\n get customEvent() {\n return this.getAttribute('custom-event');\n }\n\n get customEventParameters() {\n const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith('custom-event-'));\n\n return attributes.reduce((acc, attr) => {\n const key = attr.name.replace('custom-event-', '');\n acc[key] = attr.value;\n\n return acc;\n }, {});\n }\n\n /\n Class name for the Button element\n * @type {string}\n /\n className = 'Button';\n\n /\n Get CSS stylesheet for the Button element.\n * @static\n * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Get observed attributes for the Button element.\n * @static\n * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.\n /\n static get observedAttributes() {\n return ['disabled'];\n }\n\n /\n @summary A static property that indicates whether the custom element is form-associated or not.\n * Form-associated custom elements are elements that can participate in form submission.\n * @type {boolean}\n /\n static formAssociated = true;\n\n /\n @summary Callback function that is called when the custom element is associated with a form.\n * This function sets the internal `_form` property to the associated form.\n * @param {HTMLFormElement} form The form the custom element is associated with.\n /\n formAssociatedCallback(form) {\n this._form = form;\n }\n\n /\n @summary Callback function that is called when the form-associated state of the custom element changes.\n * This function updates the 'disabled' attribute of the element based on the new state.\n * @param {boolean} disabled The new form-associated state.\n /\n formDisabledCallback(disabled) {\n if (disabled) {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n /\n Setup attributes for the Button element.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Draw method for the Button element.\n * @returns {object} fragment - The document fragment containing the drawn element.\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement(this.hasAttribute('href') ? 'a' : 'button');\n if (this.hasAttribute('href')) {\n native.setAttribute('href', this.getAttribute('href'));\n } else {\n if (this.type === 'submit') {\n native.setAttribute('type', 'submit');\n }\n }\n\n native.classList.add('native-button');\n native.setAttribute('part', 'native');\n\n this.classList.remove('wje-button-disabled');\n\n if (this.disabled) native.classList.add('wje-button-disabled');\n\n if (this.variant) native.classList.add('wje-button-' + this.variant);\n\n if (this.hasAttribute('round')) native.classList.add('wje-button-round');\n\n if (this.hasAttribute('circle')) native.classList.add('wje-button-circle');\n\n if (this.outline) native.classList.add('wje-outline');\n\n if (this.fill) native.classList.add('wje-button-' + this.fill);\n\n if (this.size) native.classList.add('wje-button-' + this.size);\n\n if (\n (this.querySelectorAll('[slot=caret]').length < 1 && this.hasAttribute('caret')) \|\|\n this.hasAttribute('only-caret')\n ) {\n let i = document.createElement('wje-icon');\n i.style.setProperty('--wje-icon-size', '14px');\n i.setAttribute('slot', 'caret');\n i.setAttribute('name', 'chevron-down');\n i.setAttribute('part', 'caret');\n\n this.appendChild(i);\n }\n\n if (this.active) {\n this.classList.add('wje-active');\n let i = document.createElement('wje-icon');\n i.setAttribute('name', 'check');\n\n this.appendChild(i);\n }\n\n native.classList.add('wje-color-' + this.color, 'wje-color');\n\n let span = document.createElement('span');\n span.setAttribute('part', 'inner');\n span.classList.add('button-inner');\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'icon-only');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'start');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'end');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'caret');\n span.appendChild(slot);\n\n this.hasToggle = WjElementUtils.hasSlot(this, 'toggle');\n\n if (this.hasToggle) {\n this.slotToggle = document.createElement('slot');\n this.slotToggle.setAttribute('name', 'toggle');\n\n span.appendChild(this.slotToggle);\n }\n\n native.appendChild(span);\n\n if (this.tooltip) {\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('content', this.getAttribute('tooltip'));\n tooltip.setAttribute('placement', this.getAttribute('tooltip-placement') \|\| 'top');\n tooltip.appendChild(native);\n\n fragment.appendChild(tooltip);\n } else {\n fragment.appendChild(native);\n }\n\n return fragment;\n }\n\n populateCustomEvent() {\n let customEvent = this.customEvent;\n let customEventParameters = this.customEventParameters;\n\n this.dispatchEvent(\n new CustomEvent(customEvent, { detail: customEventParameters, composed: true, bubbles: true })\n );\n }\n\n /\n After draw method for the Button element.\n /\n afterDraw() {\n if (this.hasAttribute('route')) {\n this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n }\n\n // nastavenie toggle podla atributu, ak nie je nastaveny, tak sa zobrazi vzdy prvy element\n if (this.hasToggle) {\n if (this.toggle === 'off') {\n this.slotToggle.assignedNodes()[1].classList.add('show');\n this.setAttribute('value', 'off');\n } else {\n this.slotToggle.assignedNodes()[0].classList.add('show');\n this.setAttribute('value', 'on');\n }\n }\n\n if (this.hasAttribute('custom-event')) {\n event.addListener(this, 'click', null, this.populateCustomEvent);\n }\n\n if (this.hasAttribute('dialog')) {\n event.addListener(this, 'click', null, this.eventDialogOpen);\n } else {\n event.addListener(this, 'click', 'wje-button:click', null); // { stopPropagation: this.stopPropagation } - zrusene kvoli dropdown kde som nevedel odchytit event click\n }\n\n if (this.hasToggle)\n event.addListener(this, 'click', 'wje-button:toggle', this.toggleStates, {\n stopPropagation: this.stopPropagation,\n });\n\n if (this.type === 'submit') {\n event.addListener(this, 'click', 'wje-button:submit', () => {\n console.log('submit', this.internals_.form);\n event.dispatchCustomEvent(this.internals_.form, 'submit', {});\n });\n }\n\n if (this.type === 'reset') {\n event.addListener(this, 'click', 'wje-button:reset', () => {\n this.internals_.form.reset();\n });\n }\n }\n\n /\n Before disconnect method for the Button element.\n /\n beforeDisconnect() {\n // remove all events from the button\n event.removeListener(this, 'click', null, this.eventDialogOpen);\n event.removeListener(this, 'click', 'wje-button:click', null);\n event.removeListener(this, 'click', 'wje-button:toggle', this.toggleStates);\n event.removeListener(this, 'click', null, this.populateCustomEvent);\n event.removeListener(this, 'click', 'wje-button:submit', null);\n event.removeListener(this, 'click', 'wje-button:reset', null);\n\n this.removeEventListener('click', this.eventDialogOpen);\n this.unbindRouterLinks?.();\n }\n\n /\n Event dialog open method for the Button element.\n * @param {Event} e The event object\n /\n eventDialogOpen = (e) => {\n event.dispatchCustomEvent(this, this.dialog);\n };\n\n /\n Toggle states method for the Button element.\n */\n toggleStates = () => {\n const nodes = this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);\n\n nodes.forEach((node, index) => {\n if (node.classList.contains('show')) {\n node.classList.remove('show');\n } else {\n node.classList.add('show');\n this.setAttribute('value', index === 0 ? 'on' : 'off');\n }\n });\n };\n}\n","import Button from './button.element.js';\n\nexport default Button;\n\nButton.define('wje-button', Button);\n"],"names":[],"mappings":"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"}

package/dist/wje-color-picker.js CHANGED Viewed

@@ -965,7 +965,7 @@ function validateWCAG2Parms(parms) {
     size
   };
 }
-const styles = "/*\n[ Wj Color Picker ]\n*/\n\n.anchor {\n    width: var(--wje-color-picker-size);\n    height: var(--wje-color-picker-size);\n    background: var(--wje-color-picker-value);\n}\n\n.picker {\n    width: 200px;\n    min-height: 90px;\n    box-shadow:\n        0 0 5px rgba(0, 0, 0, 0.05),\n        0 5px 20px rgba(0, 0, 0, 0.1);\n    border-radius: var(--wje-border-radius-small);\n    border-width: 1px;\n    border-style: var(--wje-border-style);\n    border-color: var(--wje-border-color);\n    background: var(--wje-background);\n}\n\n.color-area {\n    display: block;\n    position: relative;\n    height: 100px;\n    color: var(--wje-color-picker-area);\n    background-image: linear-gradient(rgba(0, 0, 0, 0), #000), linear-gradient(90deg, #fff, currentColor);\n    cursor: crosshair;\n    border-radius: var(--wje-color-picker-radius) var(--wje-color-picker-radius) 0 0;\n    border-bottom: 1px solid var(--wje-border-color);\n}\n\n.wrapper {\n    display: inline-table;\n    width: calc(100% - 2rem);\n    margin: 1rem;\n}\n\n.hue {\n    border-radius: 0.25rem;\n    background-image: linear-gradient(\n        to right,\n        rgb(255, 0, 0) 0%,\n        rgb(255, 255, 0) 17%,\n        rgb(0, 255, 0) 33%,\n        rgb(0, 255, 255) 50%,\n        rgb(0, 0, 255) 67%,\n        rgb(255, 0, 255) 83%,\n        rgb(255, 0, 0) 100%\n    );\n    width: 100%;\n    height: 8px;\n    margin: 0.75rem 0 1rem;\n}\n\n.hue::part(slider) {\n    --wje-slider-color: transparent;\n    --wje-slider-thumb-color: white;\n    --wje-slider-thumb-shadow: 0 0 0 1px var(--wje-border-color);\n    --wje-slider-thumb-shadow-active: var(--wje-slider-thumb-shadow);\n    --wje-slider-track-color: transparent;\n}\n\n.alpha-wrapper {\n    border-radius: 0.25rem;\n    width: 100%;\n    height: 8px;\n    margin: 0.75rem 0 1rem;\n    background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa),\n        repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);\n    background-position:\n        0 0,\n        4px 4px;\n    background-size: 8px 8px;\n}\n\n.alpha {\n    color: var(--wje-color-picker-value);\n    display: block;\n    height: 100%;\n    width: 100%;\n    border-radius: inherit;\n    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), currentColor);\n}\n\n.alpha::part(slider) {\n    --wje-slider-color: transparent;\n    --wje-slider-thumb-color: white;\n    --wje-slider-thumb-shadow: 0 0 0 1px var(--wje-border-color);\n    --wje-slider-thumb-shadow-active: var(--wje-slider-thumb-shadow);\n    --wje-slider-track-color: transparent;\n    --wje-slider-track-height: 8px;\n}\n\n.input-wrapper {\n    display: grid;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n}\n\n.color-preview {\n    width: 30px !important;\n    height: 30px !important;\n    border-radius: 50%;\n    position: relative;\n    margin-right: 1rem;\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        left: 0;\n        top: 0;\n        border: 1px solid #fff;\n        border-radius: 50%;\n    }\n    &:before {\n        background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa),\n            repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);\n        background-position:\n            0 0,\n            4px 4px;\n        background-size: 8px 8px;\n    }\n    &:after {\n        background: var(--wje-color-picker-value, transparent);\n    }\n}\n\nwje-input {\n    --wje-input-border-radius: 1rem;\n    --wje-input-margin-bottom: 0;\n}\n\nwje-input::part(input) {\n    text-align: center;\n}\n\n.swatches {\n    margin-top: 1rem;\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n}\n\n.swatch {\n    background: var(--wje-color-picker-swatch, transparent);\n    position: relative;\n    width: 20px;\n    height: 20px;\n    margin: 0 4px 6px 4px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    color: inherit;\n    white-space: nowrap;\n    overflow: hidden;\n    cursor: pointer;\n}\n\n.marker {\n    position: absolute;\n    width: 12px;\n    height: 12px;\n    margin: -6px 0 0 -6px;\n    border: 1px solid #fff;\n    border-radius: 50%;\n    background-color: var(--wje-color-picker-value, transparent);\n    cursor: pointer;\n}\n";
+const styles = "/*\n[ Wj Color Picker ]\n*/\n\n.anchor {\n    width: var(--wje-color-picker-size);\n    height: var(--wje-color-picker-size);\n    background: var(--wje-color-picker-value);\n}\n\n.picker {\n    width: 200px;\n    min-height: 90px;\n    box-shadow:\n        0 0 5px rgba(0, 0, 0, 0.05),\n        0 5px 20px rgba(0, 0, 0, 0.1);\n    border-radius: var(--wje-border-radius-small);\n    border-width: 1px;\n    border-style: var(--wje-border-style);\n    border-color: var(--wje-border-color);\n    background: var(--wje-background);\n}\n\n.color-area {\n    display: block;\n    position: relative;\n    height: 100px;\n    color: var(--wje-color-picker-area);\n    background-image: linear-gradient(rgba(0, 0, 0, 0), #000), linear-gradient(90deg, #fff, currentColor);\n    cursor: crosshair;\n    border-radius: var(--wje-color-picker-radius) var(--wje-color-picker-radius) 0 0;\n    border-bottom: 1px solid var(--wje-border-color);\n}\n\n.wrapper {\n    display: inline-table;\n    width: calc(100% - 2rem);\n    margin: 1rem;\n}\n\n.hue {\n    border-radius: 0.25rem;\n    background-image: linear-gradient(\n        to right,\n        rgb(255, 0, 0) 0%,\n        rgb(255, 255, 0) 17%,\n        rgb(0, 255, 0) 33%,\n        rgb(0, 255, 255) 50%,\n        rgb(0, 0, 255) 67%,\n        rgb(255, 0, 255) 83%,\n        rgb(255, 0, 0) 100%\n    );\n    width: 100%;\n    height: 8px;\n    margin: 0.75rem 0 1rem;\n}\n\n.hue::part(slider) {\n    --wje-slider-color: transparent;\n    --wje-slider-thumb-color: white;\n    --wje-slider-thumb-shadow: 0 0 0 1px var(--wje-border-color);\n    --wje-slider-thumb-shadow-active: var(--wje-slider-thumb-shadow);\n    --wje-slider-track-color: transparent;\n}\n\n.alpha-wrapper {\n    border-radius: 0.25rem;\n    width: 100%;\n    height: 8px;\n    margin: 0.75rem 0 1rem;\n    background-image:\n        repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa),\n        repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);\n    background-position:\n        0 0,\n        4px 4px;\n    background-size: 8px 8px;\n}\n\n.alpha {\n    color: var(--wje-color-picker-value);\n    display: block;\n    height: 100%;\n    width: 100%;\n    border-radius: inherit;\n    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), currentColor);\n}\n\n.alpha::part(slider) {\n    --wje-slider-color: transparent;\n    --wje-slider-thumb-color: white;\n    --wje-slider-thumb-shadow: 0 0 0 1px var(--wje-border-color);\n    --wje-slider-thumb-shadow-active: var(--wje-slider-thumb-shadow);\n    --wje-slider-track-color: transparent;\n    --wje-slider-track-height: 8px;\n}\n\n.input-wrapper {\n    display: grid;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n}\n\n.color-preview {\n    width: 30px !important;\n    height: 30px !important;\n    border-radius: 50%;\n    position: relative;\n    margin-right: 1rem;\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        left: 0;\n        top: 0;\n        border: 1px solid #fff;\n        border-radius: 50%;\n    }\n    &:before {\n        background-image:\n            repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa),\n            repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);\n        background-position:\n            0 0,\n            4px 4px;\n        background-size: 8px 8px;\n    }\n    &:after {\n        background: var(--wje-color-picker-value, transparent);\n    }\n}\n\nwje-input {\n    --wje-input-border-radius: 1rem;\n    --wje-input-margin-bottom: 0;\n}\n\nwje-input::part(input) {\n    text-align: center;\n}\n\n.swatches {\n    margin-top: 1rem;\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n}\n\n.swatch {\n    background: var(--wje-color-picker-swatch, transparent);\n    position: relative;\n    width: 20px;\n    height: 20px;\n    margin: 0 4px 6px 4px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    color: inherit;\n    white-space: nowrap;\n    overflow: hidden;\n    cursor: pointer;\n}\n\n.marker {\n    position: absolute;\n    width: 12px;\n    height: 12px;\n    margin: -6px 0 0 -6px;\n    border: 1px solid #fff;\n    border-radius: 50%;\n    background-color: var(--wje-color-picker-value, transparent);\n    cursor: pointer;\n}\n";
 class ColorPicker extends WJElement {
   /**
    * ColorPicker constructor method.
@@ -1172,6 +1172,13 @@ class ColorPicker extends WJElement {
     let colorArea = document.createElement("div");
     colorArea.classList.add("color-area");
     colorArea.addEventListener("click", this.moveMarker);
+    colorArea.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      colorArea.addEventListener("mousemove", this.moveMarker);
+    });
+    colorArea.addEventListener("mouseup", () => {
+      colorArea.removeEventListener("mousemove", this.moveMarker);
+    });
     let wrapper = document.createElement("div");
     wrapper.classList.add("wrapper");
     let hueSlider = document.createElement("wje-slider");