@zanichelli/albe-web-components 13.6.1 → 14.0.0

package/www/build/p-52fa5f80.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZDragdropAreaStyle0","ZDragdropArea","fileDroppedHandler","files","this","fileDropped","emit","renderOnDragOverMessage","h","class","dragAndDropLabel","render","key","tabIndex","ref","val","dragDropContainer","onDragOver","e","preventDefault","classList","add","onDragLeave","remove","onDrop","dataTransfer","length","supportCustomEvent","window","CustomEvent","event","x","ev","document","createEvent","initCustomEvent","bubbles","cancelable","detail","prototype","Event","safeDispatchEvent","target","check","type","toLowerCase","dispatchEvent","createsStackingContext","el","body","s","getComputedStyle","invalid","k","ok","undefined","opacity","position","webkitOverflowScrolling","parentElement","findNearestDialog","localName","parentNode","host","safeBlur","shadowRoot","activeElement","blur","inNodeList","nodeList","node","i","isFormMethodDialog","hasAttribute","getAttribute","findFocusableElementWithin","hostElement","opts","query","map","push","querySelector","join","Element","elems","querySelectorAll","tagName","isConnected","element","contains","findFormSubmitter","submitter","form","HTMLFormElement","dialogPolyfill","formSubmitter","root","getRootNode","maybeHandleSubmit","defaultPrevented","value","imagemapUseValue","dialog","formmethod","close","dialogPolyfillInfo","dialog_","replacedStyleTop_","openAsModal_","setAttribute","show","bind","showModal","addEventListener","returnValue","mo","MutationObserver","maybeHideModal","observe","attributes","attributeFilter","removed","cb","downgradeModal","timeout","delayModel","cand","substr","clearTimeout","setTimeout","forEach","name","Object","defineProperty","set","setOpen","get","backdrop_","createElement","className","backdropMouseEvent_","style","zIndex","top","removeChild","dm","removeDialog","removeAttribute","fake","insertBefore","firstChild","focus","redirectedEvent","initMouseEvent","screenX","screenY","clientX","clientY","ctrlKey","altKey","shiftKey","metaKey","button","relatedTarget","stopPropagation","focus_","updateZIndex","dialogZ","backdropZ","Error","open","pushDialog","console","warn","needsCentering","reposition","nextSibling","opt_returnValue","closeEvent","scrollTop","documentElement","topValue","innerHeight","offsetHeight","Math","max","isInlinePositionSetByStylesheet","styleSheets","styleSheet","cssRules","j","rule","selectedNodes","selectorText","cssTop","getPropertyValue","cssBottom","computedStyle","bottom","forceRegisterDialog","HTMLDialogElement","registerDialog","DialogManager","pendingDialogStack","checkDOM","checkDOM_","overlay","forwardTab_","handleKey_","handleFocus_","zIndexLow_","zIndexHigh_","mo_","records","rec","c","removedNodes","concat","blockDocument","childList","subtree","unblockDocument","removeEventListener","disconnect","updateStacking","dpi","last","p","appendChild","containedByTopDialog_","candidate","composedPath","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","keyCode","cancelEvent","clone","slice","indexOf","allowed","unshift","index","splice","testForm","method","methodDescriptor","getOwnPropertyDescriptor","realGet","call","realSet","v","path","shift","valid","offsetX","offsetY","nativeFormSubmit","submit","replacementFormSubmit","ZModalStyle0","FOCUSABLE_ELEMENTS_SELECTOR","ZModal","emitModalClose","closable","modalClose","modalid","emitModalHeaderActive","modalHeaderActive","emitBackgroundClick","modalBackgroundClick","componentDidLoad","_a","focusableElements","Array","from","filter","display","handleKeyDown","code","KeyboardCode","TAB","shadowActiveElement","ownerDocument","firstFocusableElement","lastFocusableElement","closeButtonSlot","closeButtonLabel","onClick","handleEscape","scrollInside","role","alertdialog","onClose","onCancel","id","modaltitle","modalsubtitle"],"sources":["src/components/file-upload/z-dragdrop-area/styles.css?tag=z-dragdrop-area&encapsulation=shadow","src/components/file-upload/z-dragdrop-area/index.tsx","node_modules/dialog-polyfill/dist/dialog-polyfill.esm.js","src/components/modal/z-modal/styles.css?tag=z-modal&encapsulation=shadow","src/components/modal/z-modal/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > .dragdrop {\n  position: relative;\n  display: flex;\n  height: 228px;\n  flex-direction: column;\n  padding: calc(var(--space-unit) * 2);\n  border-color: var(--color-surface04);\n  background-color: var(--color-surface02);\n\n  /* Native CSS properties don't support the customization of border-style.\n  Therefore, we use a trick with an SVG image inside background-image property.\n  The SVG features give us the ability to change the distance between dashed lines, set custom pattern, add dash offset or even change a line cap.\n  Generated SVG image is vector and it fills width and height of elements by 100%, so it doesn't matter what size elements have. */\n  background-image: url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='2' ry='2' stroke='%23CACCCEFF' stroke-width='2' stroke-dasharray='15%2c 10%2c 14%2c 11' stroke-dashoffset='3' stroke-linecap='square'/%3e%3c/svg%3e\");\n  border-radius: 2px;\n  color: var(--color-text01);\n}\n\n/* https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element */\n:host > .dragdrop.dragover * {\n  pointer-events: none;\n}\n\n:host > .dragdrop .dragover-container {\n  position: absolute;\n  z-index: 10;\n  top: 0;\n  left: 0;\n  display: none;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-primary03);\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host > .dragdrop .dragover-container .dragover-message {\n  padding: 10px 28px;\n  background-color: var(--color-link-primary);\n  color: var(--color-text04);\n}\n\n:host > .dragdrop.dragover .dragover-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","import {Component, h, Event, EventEmitter, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-dragdrop-area\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZDragdropArea {\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel: string;\n\n  /** Emitted when user drop one or more files */\n  @Event()\n  fileDropped: EventEmitter;\n\n  private fileDroppedHandler(files: FileList): void {\n    this.fileDropped.emit(files);\n  }\n\n  private dragDropContainer: HTMLDivElement;\n\n  private renderOnDragOverMessage(): HTMLDivElement {\n    return (\n      <div class=\"dragover-container\">\n        <div class=\"dragover-message\">\n          <span class=\"body-2-sb\">{this.dragAndDropLabel}</span>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        tabIndex={0}\n        ref={(val) => (this.dragDropContainer = val)}\n        class=\"dragdrop\"\n        onDragOver={(e) => {\n          e.preventDefault();\n          this.dragDropContainer.classList.add(\"dragover\");\n        }}\n        onDragLeave={() => {\n          this.dragDropContainer.classList.remove(\"dragover\");\n        }}\n        onDrop={(e) => {\n          e.preventDefault();\n          if (e.dataTransfer.files.length) {\n            this.dragDropContainer.classList.remove(\"dragover\");\n            this.fileDroppedHandler(e.dataTransfer.files);\n          }\n        }}\n      >\n        {this.renderOnDragOverMessage()}\n        <slot />\n      </div>\n    );\n  }\n}\n","// nb. This is for IE10 and lower _only_.\nvar supportCustomEvent = window.CustomEvent;\nif (!supportCustomEvent || typeof supportCustomEvent === 'object') {\n  supportCustomEvent = function CustomEvent(event, x) {\n    x = x || {};\n    var ev = document.createEvent('CustomEvent');\n    ev.initCustomEvent(event, !!x.bubbles, !!x.cancelable, x.detail || null);\n    return ev;\n  };\n  supportCustomEvent.prototype = window.Event.prototype;\n}\n\n/**\n * Dispatches the passed event to both an \"on<type>\" handler as well as via the\n * normal dispatch operation. Does not bubble.\n *\n * @param {!EventTarget} target\n * @param {!Event} event\n * @return {boolean}\n */\nfunction safeDispatchEvent(target, event) {\n  var check = 'on' + event.type.toLowerCase();\n  if (typeof target[check] === 'function') {\n    target[check](event);\n  }\n  return target.dispatchEvent(event);\n}\n\n/**\n * @param {Element} el to check for stacking context\n * @return {boolean} whether this el or its parents creates a stacking context\n */\nfunction createsStackingContext(el) {\n  while (el && el !== document.body) {\n    var s = window.getComputedStyle(el);\n    var invalid = function(k, ok) {\n      return !(s[k] === undefined || s[k] === ok);\n    };\n\n    if (s.opacity < 1 ||\n        invalid('zIndex', 'auto') ||\n        invalid('transform', 'none') ||\n        invalid('mixBlendMode', 'normal') ||\n        invalid('filter', 'none') ||\n        invalid('perspective', 'none') ||\n        s['isolation'] === 'isolate' ||\n        s.position === 'fixed' ||\n        s.webkitOverflowScrolling === 'touch') {\n      return true;\n    }\n    el = el.parentElement;\n  }\n  return false;\n}\n\n/**\n * Finds the nearest <dialog> from the passed element.\n *\n * @param {Element} el to search from\n * @return {HTMLDialogElement} dialog found\n */\nfunction findNearestDialog(el) {\n  while (el) {\n    if (el.localName === 'dialog') {\n      return /** @type {HTMLDialogElement} */ (el);\n    }\n    if (el.parentElement) {\n      el = el.parentElement;\n    } else if (el.parentNode) {\n      el = el.parentNode.host;\n    } else {\n      el = null;\n    }\n  }\n  return null;\n}\n\n/**\n * Blur the specified element, as long as it's not the HTML body element.\n * This works around an IE9/10 bug - blurring the body causes Windows to\n * blur the whole application.\n *\n * @param {Element} el to blur\n */\nfunction safeBlur(el) {\n  // Find the actual focused element when the active element is inside a shadow root\n  while (el && el.shadowRoot && el.shadowRoot.activeElement) {\n    el = el.shadowRoot.activeElement;\n  }\n\n  if (el && el.blur && el !== document.body) {\n    el.blur();\n  }\n}\n\n/**\n * @param {!NodeList} nodeList to search\n * @param {Node} node to find\n * @return {boolean} whether node is inside nodeList\n */\nfunction inNodeList(nodeList, node) {\n  for (var i = 0; i < nodeList.length; ++i) {\n    if (nodeList[i] === node) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * @param {HTMLFormElement} el to check\n * @return {boolean} whether this form has method=\"dialog\"\n */\nfunction isFormMethodDialog(el) {\n  if (!el || !el.hasAttribute('method')) {\n    return false;\n  }\n  return el.getAttribute('method').toLowerCase() === 'dialog';\n}\n\n/**\n * @param {!DocumentFragment|!Element} hostElement\n * @return {?Element}\n */\nfunction findFocusableElementWithin(hostElement) {\n  // Note that this is 'any focusable area'. This list is probably not exhaustive, but the\n  // alternative involves stepping through and trying to focus everything.\n  var opts = ['button', 'input', 'keygen', 'select', 'textarea'];\n  var query = opts.map(function(el) {\n    return el + ':not([disabled])';\n  });\n  // TODO(samthor): tabindex values that are not numeric are not focusable.\n  query.push('[tabindex]:not([disabled]):not([tabindex=\"\"])');  // tabindex != \"\", not disabled\n  var target = hostElement.querySelector(query.join(', '));\n\n  if (!target && 'attachShadow' in Element.prototype) {\n    // If we haven't found a focusable target, see if the host element contains an element\n    // which has a shadowRoot.\n    // Recursively search for the first focusable item in shadow roots.\n    var elems = hostElement.querySelectorAll('*');\n    for (var i = 0; i < elems.length; i++) {\n      if (elems[i].tagName && elems[i].shadowRoot) {\n        target = findFocusableElementWithin(elems[i].shadowRoot);\n        if (target) {\n          break;\n        }\n      }\n    }\n  }\n  return target;\n}\n\n/**\n * Determines if an element is attached to the DOM.\n * @param {Element} element to check\n * @return {boolean} whether the element is in DOM\n */\nfunction isConnected(element) {\n  return element.isConnected || document.body.contains(element);\n}\n\n/**\n * @param {!Event} event\n * @return {?Element}\n */\nfunction findFormSubmitter(event) {\n  if (event.submitter) {\n    return event.submitter;\n  }\n\n  var form = event.target;\n  if (!(form instanceof HTMLFormElement)) {\n    return null;\n  }\n\n  var submitter = dialogPolyfill.formSubmitter;\n  if (!submitter) {\n    var target = event.target;\n    var root = ('getRootNode' in target && target.getRootNode() || document);\n    submitter = root.activeElement;\n  }\n\n  if (!submitter || submitter.form !== form) {\n    return null;\n  }\n  return submitter;\n}\n\n/**\n * @param {!Event} event\n */\nfunction maybeHandleSubmit(event) {\n  if (event.defaultPrevented) {\n    return;\n  }\n  var form = /** @type {!HTMLFormElement} */ (event.target);\n\n  // We'd have a value if we clicked on an imagemap.\n  var value = dialogPolyfill.imagemapUseValue;\n  var submitter = findFormSubmitter(event);\n  if (value === null && submitter) {\n    value = submitter.value;\n  }\n\n  // There should always be a dialog as this handler is added specifically on them, but check just\n  // in case.\n  var dialog = findNearestDialog(form);\n  if (!dialog) {\n    return;\n  }\n\n  // Prefer formmethod on the button.\n  var formmethod = submitter && submitter.getAttribute('formmethod') || form.getAttribute('method');\n  if (formmethod !== 'dialog') {\n    return;\n  }\n  event.preventDefault();\n\n  if (value != null) {\n    // nb. we explicitly check against null/undefined\n    dialog.close(value);\n  } else {\n    dialog.close();\n  }\n}\n\n/**\n * @param {!HTMLDialogElement} dialog to upgrade\n * @constructor\n */\nfunction dialogPolyfillInfo(dialog) {\n  this.dialog_ = dialog;\n  this.replacedStyleTop_ = false;\n  this.openAsModal_ = false;\n\n  // Set a11y role. Browsers that support dialog implicitly know this already.\n  if (!dialog.hasAttribute('role')) {\n    dialog.setAttribute('role', 'dialog');\n  }\n\n  dialog.show = this.show.bind(this);\n  dialog.showModal = this.showModal.bind(this);\n  dialog.close = this.close.bind(this);\n\n  dialog.addEventListener('submit', maybeHandleSubmit, false);\n\n  if (!('returnValue' in dialog)) {\n    dialog.returnValue = '';\n  }\n\n  if ('MutationObserver' in window) {\n    var mo = new MutationObserver(this.maybeHideModal.bind(this));\n    mo.observe(dialog, {attributes: true, attributeFilter: ['open']});\n  } else {\n    // IE10 and below support. Note that DOMNodeRemoved etc fire _before_ removal. They also\n    // seem to fire even if the element was removed as part of a parent removal. Use the removed\n    // events to force downgrade (useful if removed/immediately added).\n    var removed = false;\n    var cb = function() {\n      removed ? this.downgradeModal() : this.maybeHideModal();\n      removed = false;\n    }.bind(this);\n    var timeout;\n    var delayModel = function(ev) {\n      if (ev.target !== dialog) { return; }  // not for a child element\n      var cand = 'DOMNodeRemoved';\n      removed |= (ev.type.substr(0, cand.length) === cand);\n      window.clearTimeout(timeout);\n      timeout = window.setTimeout(cb, 0);\n    };\n    ['DOMAttrModified', 'DOMNodeRemoved', 'DOMNodeRemovedFromDocument'].forEach(function(name) {\n      dialog.addEventListener(name, delayModel);\n    });\n  }\n  // Note that the DOM is observed inside DialogManager while any dialog\n  // is being displayed as a modal, to catch modal removal from the DOM.\n\n  Object.defineProperty(dialog, 'open', {\n    set: this.setOpen.bind(this),\n    get: dialog.hasAttribute.bind(dialog, 'open')\n  });\n\n  this.backdrop_ = document.createElement('div');\n  this.backdrop_.className = 'backdrop';\n  this.backdrop_.addEventListener('mouseup'  , this.backdropMouseEvent_.bind(this));\n  this.backdrop_.addEventListener('mousedown', this.backdropMouseEvent_.bind(this));\n  this.backdrop_.addEventListener('click'    , this.backdropMouseEvent_.bind(this));\n}\n\ndialogPolyfillInfo.prototype = /** @type {HTMLDialogElement.prototype} */ ({\n\n  get dialog() {\n    return this.dialog_;\n  },\n\n  /**\n   * Maybe remove this dialog from the modal top layer. This is called when\n   * a modal dialog may no longer be tenable, e.g., when the dialog is no\n   * longer open or is no longer part of the DOM.\n   */\n  maybeHideModal: function() {\n    if (this.dialog_.hasAttribute('open') && isConnected(this.dialog_)) { return; }\n    this.downgradeModal();\n  },\n\n  /**\n   * Remove this dialog from the modal top layer, leaving it as a non-modal.\n   */\n  downgradeModal: function() {\n    if (!this.openAsModal_) { return; }\n    this.openAsModal_ = false;\n    this.dialog_.style.zIndex = '';\n\n    // This won't match the native <dialog> exactly because if the user set top on a centered\n    // polyfill dialog, that top gets thrown away when the dialog is closed. Not sure it's\n    // possible to polyfill this perfectly.\n    if (this.replacedStyleTop_) {\n      this.dialog_.style.top = '';\n      this.replacedStyleTop_ = false;\n    }\n\n    // Clear the backdrop and remove from the manager.\n    this.backdrop_.parentNode && this.backdrop_.parentNode.removeChild(this.backdrop_);\n    dialogPolyfill.dm.removeDialog(this);\n  },\n\n  /**\n   * @param {boolean} value whether to open or close this dialog\n   */\n  setOpen: function(value) {\n    if (value) {\n      this.dialog_.hasAttribute('open') || this.dialog_.setAttribute('open', '');\n    } else {\n      this.dialog_.removeAttribute('open');\n      this.maybeHideModal();  // nb. redundant with MutationObserver\n    }\n  },\n\n  /**\n   * Handles mouse events ('mouseup', 'mousedown', 'click') on the fake .backdrop element, redirecting them as if\n   * they were on the dialog itself.\n   *\n   * @param {!Event} e to redirect\n   */\n  backdropMouseEvent_: function(e) {\n    if (!this.dialog_.hasAttribute('tabindex')) {\n      // Clicking on the backdrop should move the implicit cursor, even if dialog cannot be\n      // focused. Create a fake thing to focus on. If the backdrop was _before_ the dialog, this\n      // would not be needed - clicks would move the implicit cursor there.\n      var fake = document.createElement('div');\n      this.dialog_.insertBefore(fake, this.dialog_.firstChild);\n      fake.tabIndex = -1;\n      fake.focus();\n      this.dialog_.removeChild(fake);\n    } else {\n      this.dialog_.focus();\n    }\n\n    var redirectedEvent = document.createEvent('MouseEvents');\n    redirectedEvent.initMouseEvent(e.type, e.bubbles, e.cancelable, window,\n        e.detail, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey,\n        e.altKey, e.shiftKey, e.metaKey, e.button, e.relatedTarget);\n    this.dialog_.dispatchEvent(redirectedEvent);\n    e.stopPropagation();\n  },\n\n  /**\n   * Focuses on the first focusable element within the dialog. This will always blur the current\n   * focus, even if nothing within the dialog is found.\n   */\n  focus_: function() {\n    // Find element with `autofocus` attribute, or fall back to the first form/tabindex control.\n    var target = this.dialog_.querySelector('[autofocus]:not([disabled])');\n    if (!target && this.dialog_.tabIndex >= 0) {\n      target = this.dialog_;\n    }\n    if (!target) {\n      target = findFocusableElementWithin(this.dialog_);\n    }\n    safeBlur(document.activeElement);\n    target && target.focus();\n  },\n\n  /**\n   * Sets the zIndex for the backdrop and dialog.\n   *\n   * @param {number} dialogZ\n   * @param {number} backdropZ\n   */\n  updateZIndex: function(dialogZ, backdropZ) {\n    if (dialogZ < backdropZ) {\n      throw new Error('dialogZ should never be < backdropZ');\n    }\n    this.dialog_.style.zIndex = dialogZ;\n    this.backdrop_.style.zIndex = backdropZ;\n  },\n\n  /**\n   * Shows the dialog. If the dialog is already open, this does nothing.\n   */\n  show: function() {\n    if (!this.dialog_.open) {\n      this.setOpen(true);\n      this.focus_();\n    }\n  },\n\n  /**\n   * Show this dialog modally.\n   */\n  showModal: function() {\n    if (this.dialog_.hasAttribute('open')) {\n      throw new Error('Failed to execute \\'showModal\\' on dialog: The element is already open, and therefore cannot be opened modally.');\n    }\n    if (!isConnected(this.dialog_)) {\n      throw new Error('Failed to execute \\'showModal\\' on dialog: The element is not in a Document.');\n    }\n    if (!dialogPolyfill.dm.pushDialog(this)) {\n      throw new Error('Failed to execute \\'showModal\\' on dialog: There are too many open modal dialogs.');\n    }\n\n    if (createsStackingContext(this.dialog_.parentElement)) {\n      console.warn('A dialog is being shown inside a stacking context. ' +\n          'This may cause it to be unusable. For more information, see this link: ' +\n          'https://github.com/GoogleChrome/dialog-polyfill/#stacking-context');\n    }\n\n    this.setOpen(true);\n    this.openAsModal_ = true;\n\n    // Optionally center vertically, relative to the current viewport.\n    if (dialogPolyfill.needsCentering(this.dialog_)) {\n      dialogPolyfill.reposition(this.dialog_);\n      this.replacedStyleTop_ = true;\n    } else {\n      this.replacedStyleTop_ = false;\n    }\n\n    // Insert backdrop.\n    this.dialog_.parentNode.insertBefore(this.backdrop_, this.dialog_.nextSibling);\n\n    // Focus on whatever inside the dialog.\n    this.focus_();\n  },\n\n  /**\n   * Closes this HTMLDialogElement. This is optional vs clearing the open\n   * attribute, however this fires a 'close' event.\n   *\n   * @param {string=} opt_returnValue to use as the returnValue\n   */\n  close: function(opt_returnValue) {\n    if (!this.dialog_.hasAttribute('open')) {\n      throw new Error('Failed to execute \\'close\\' on dialog: The element does not have an \\'open\\' attribute, and therefore cannot be closed.');\n    }\n    this.setOpen(false);\n\n    // Leave returnValue untouched in case it was set directly on the element\n    if (opt_returnValue !== undefined) {\n      this.dialog_.returnValue = opt_returnValue;\n    }\n\n    // Triggering \"close\" event for any attached listeners on the <dialog>.\n    var closeEvent = new supportCustomEvent('close', {\n      bubbles: false,\n      cancelable: false\n    });\n    safeDispatchEvent(this.dialog_, closeEvent);\n  }\n\n});\n\nvar dialogPolyfill = {};\n\ndialogPolyfill.reposition = function(element) {\n  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;\n  var topValue = scrollTop + (window.innerHeight - element.offsetHeight) / 2;\n  element.style.top = Math.max(scrollTop, topValue) + 'px';\n};\n\ndialogPolyfill.isInlinePositionSetByStylesheet = function(element) {\n  for (var i = 0; i < document.styleSheets.length; ++i) {\n    var styleSheet = document.styleSheets[i];\n    var cssRules = null;\n    // Some browsers throw on cssRules.\n    try {\n      cssRules = styleSheet.cssRules;\n    } catch (e) {}\n    if (!cssRules) { continue; }\n    for (var j = 0; j < cssRules.length; ++j) {\n      var rule = cssRules[j];\n      var selectedNodes = null;\n      // Ignore errors on invalid selector texts.\n      try {\n        selectedNodes = document.querySelectorAll(rule.selectorText);\n      } catch(e) {}\n      if (!selectedNodes || !inNodeList(selectedNodes, element)) {\n        continue;\n      }\n      var cssTop = rule.style.getPropertyValue('top');\n      var cssBottom = rule.style.getPropertyValue('bottom');\n      if ((cssTop && cssTop !== 'auto') || (cssBottom && cssBottom !== 'auto')) {\n        return true;\n      }\n    }\n  }\n  return false;\n};\n\ndialogPolyfill.needsCentering = function(dialog) {\n  var computedStyle = window.getComputedStyle(dialog);\n  if (computedStyle.position !== 'absolute') {\n    return false;\n  }\n\n  // We must determine whether the top/bottom specified value is non-auto.  In\n  // WebKit/Blink, checking computedStyle.top == 'auto' is sufficient, but\n  // Firefox returns the used value. So we do this crazy thing instead: check\n  // the inline style and then go through CSS rules.\n  if ((dialog.style.top !== 'auto' && dialog.style.top !== '') ||\n      (dialog.style.bottom !== 'auto' && dialog.style.bottom !== '')) {\n    return false;\n  }\n  return !dialogPolyfill.isInlinePositionSetByStylesheet(dialog);\n};\n\n/**\n * @param {!Element} element to force upgrade\n */\ndialogPolyfill.forceRegisterDialog = function(element) {\n  if (window.HTMLDialogElement || element.showModal) {\n    console.warn('This browser already supports <dialog>, the polyfill ' +\n        'may not work correctly', element);\n  }\n  if (element.localName !== 'dialog') {\n    throw new Error('Failed to register dialog: The element is not a dialog.');\n  }\n  new dialogPolyfillInfo(/** @type {!HTMLDialogElement} */ (element));\n};\n\n/**\n * @param {!Element} element to upgrade, if necessary\n */\ndialogPolyfill.registerDialog = function(element) {\n  if (!element.showModal) {\n    dialogPolyfill.forceRegisterDialog(element);\n  }\n};\n\n/**\n * @constructor\n */\ndialogPolyfill.DialogManager = function() {\n  /** @type {!Array<!dialogPolyfillInfo>} */\n  this.pendingDialogStack = [];\n\n  var checkDOM = this.checkDOM_.bind(this);\n\n  // The overlay is used to simulate how a modal dialog blocks the document.\n  // The blocking dialog is positioned on top of the overlay, and the rest of\n  // the dialogs on the pending dialog stack are positioned below it. In the\n  // actual implementation, the modal dialog stacking is controlled by the\n  // top layer, where z-index has no effect.\n  this.overlay = document.createElement('div');\n  this.overlay.className = '_dialog_overlay';\n  this.overlay.addEventListener('click', function(e) {\n    this.forwardTab_ = undefined;\n    e.stopPropagation();\n    checkDOM([]);  // sanity-check DOM\n  }.bind(this));\n\n  this.handleKey_ = this.handleKey_.bind(this);\n  this.handleFocus_ = this.handleFocus_.bind(this);\n\n  this.zIndexLow_ = 100000;\n  this.zIndexHigh_ = 100000 + 150;\n\n  this.forwardTab_ = undefined;\n\n  if ('MutationObserver' in window) {\n    this.mo_ = new MutationObserver(function(records) {\n      var removed = [];\n      records.forEach(function(rec) {\n        for (var i = 0, c; c = rec.removedNodes[i]; ++i) {\n          if (!(c instanceof Element)) {\n            continue;\n          } else if (c.localName === 'dialog') {\n            removed.push(c);\n          }\n          removed = removed.concat(c.querySelectorAll('dialog'));\n        }\n      });\n      removed.length && checkDOM(removed);\n    });\n  }\n};\n\n/**\n * Called on the first modal dialog being shown. Adds the overlay and related\n * handlers.\n */\ndialogPolyfill.DialogManager.prototype.blockDocument = function() {\n  document.documentElement.addEventListener('focus', this.handleFocus_, true);\n  document.addEventListener('keydown', this.handleKey_);\n  this.mo_ && this.mo_.observe(document, {childList: true, subtree: true});\n};\n\n/**\n * Called on the first modal dialog being removed, i.e., when no more modal\n * dialogs are visible.\n */\ndialogPolyfill.DialogManager.prototype.unblockDocument = function() {\n  document.documentElement.removeEventListener('focus', this.handleFocus_, true);\n  document.removeEventListener('keydown', this.handleKey_);\n  this.mo_ && this.mo_.disconnect();\n};\n\n/**\n * Updates the stacking of all known dialogs.\n */\ndialogPolyfill.DialogManager.prototype.updateStacking = function() {\n  var zIndex = this.zIndexHigh_;\n\n  for (var i = 0, dpi; dpi = this.pendingDialogStack[i]; ++i) {\n    dpi.updateZIndex(--zIndex, --zIndex);\n    if (i === 0) {\n      this.overlay.style.zIndex = --zIndex;\n    }\n  }\n\n  // Make the overlay a sibling of the dialog itself.\n  var last = this.pendingDialogStack[0];\n  if (last) {\n    var p = last.dialog.parentNode || document.body;\n    p.appendChild(this.overlay);\n  } else if (this.overlay.parentNode) {\n    this.overlay.parentNode.removeChild(this.overlay);\n  }\n};\n\n/**\n * @param {Element} candidate to check if contained or is the top-most modal dialog\n * @return {boolean} whether candidate is contained in top dialog\n */\ndialogPolyfill.DialogManager.prototype.containedByTopDialog_ = function(candidate) {\n  while (candidate = findNearestDialog(candidate)) {\n    for (var i = 0, dpi; dpi = this.pendingDialogStack[i]; ++i) {\n      if (dpi.dialog === candidate) {\n        return i === 0;  // only valid if top-most\n      }\n    }\n    candidate = candidate.parentElement;\n  }\n  return false;\n};\n\ndialogPolyfill.DialogManager.prototype.handleFocus_ = function(event) {\n  var target = event.composedPath ? event.composedPath()[0] : event.target;\n\n  if (this.containedByTopDialog_(target)) { return; }\n\n  if (document.activeElement === document.documentElement) { return; }\n\n  event.preventDefault();\n  event.stopPropagation();\n  safeBlur(/** @type {Element} */ (target));\n\n  if (this.forwardTab_ === undefined) { return; }  // move focus only from a tab key\n\n  var dpi = this.pendingDialogStack[0];\n  var dialog = dpi.dialog;\n  var position = dialog.compareDocumentPosition(target);\n  if (position & Node.DOCUMENT_POSITION_PRECEDING) {\n    if (this.forwardTab_) {\n      // forward\n      dpi.focus_();\n    } else if (target !== document.documentElement) {\n      // backwards if we're not already focused on <html>\n      document.documentElement.focus();\n    }\n  }\n\n  return false;\n};\n\ndialogPolyfill.DialogManager.prototype.handleKey_ = function(event) {\n  this.forwardTab_ = undefined;\n  if (event.keyCode === 27) {\n    event.preventDefault();\n    event.stopPropagation();\n    var cancelEvent = new supportCustomEvent('cancel', {\n      bubbles: false,\n      cancelable: true\n    });\n    var dpi = this.pendingDialogStack[0];\n    if (dpi && safeDispatchEvent(dpi.dialog, cancelEvent)) {\n      dpi.dialog.close();\n    }\n  } else if (event.keyCode === 9) {\n    this.forwardTab_ = !event.shiftKey;\n  }\n};\n\n/**\n * Finds and downgrades any known modal dialogs that are no longer displayed. Dialogs that are\n * removed and immediately readded don't stay modal, they become normal.\n *\n * @param {!Array<!HTMLDialogElement>} removed that have definitely been removed\n */\ndialogPolyfill.DialogManager.prototype.checkDOM_ = function(removed) {\n  // This operates on a clone because it may cause it to change. Each change also calls\n  // updateStacking, which only actually needs to happen once. But who removes many modal dialogs\n  // at a time?!\n  var clone = this.pendingDialogStack.slice();\n  clone.forEach(function(dpi) {\n    if (removed.indexOf(dpi.dialog) !== -1) {\n      dpi.downgradeModal();\n    } else {\n      dpi.maybeHideModal();\n    }\n  });\n};\n\n/**\n * @param {!dialogPolyfillInfo} dpi\n * @return {boolean} whether the dialog was allowed\n */\ndialogPolyfill.DialogManager.prototype.pushDialog = function(dpi) {\n  var allowed = (this.zIndexHigh_ - this.zIndexLow_) / 2 - 1;\n  if (this.pendingDialogStack.length >= allowed) {\n    return false;\n  }\n  if (this.pendingDialogStack.unshift(dpi) === 1) {\n    this.blockDocument();\n  }\n  this.updateStacking();\n  return true;\n};\n\n/**\n * @param {!dialogPolyfillInfo} dpi\n */\ndialogPolyfill.DialogManager.prototype.removeDialog = function(dpi) {\n  var index = this.pendingDialogStack.indexOf(dpi);\n  if (index === -1) { return; }\n\n  this.pendingDialogStack.splice(index, 1);\n  if (this.pendingDialogStack.length === 0) {\n    this.unblockDocument();\n  }\n  this.updateStacking();\n};\n\ndialogPolyfill.dm = new dialogPolyfill.DialogManager();\ndialogPolyfill.formSubmitter = null;\ndialogPolyfill.imagemapUseValue = null;\n\n/**\n * Installs global handlers, such as click listers and native method overrides. These are needed\n * even if a no dialog is registered, as they deal with <form method=\"dialog\">.\n */\nif (window.HTMLDialogElement === undefined) {\n\n  /**\n   * If HTMLFormElement translates method=\"DIALOG\" into 'get', then replace the descriptor with\n   * one that returns the correct value.\n   */\n  var testForm = document.createElement('form');\n  testForm.setAttribute('method', 'dialog');\n  if (testForm.method !== 'dialog') {\n    var methodDescriptor = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, 'method');\n    if (methodDescriptor) {\n      // nb. Some older iOS and older PhantomJS fail to return the descriptor. Don't do anything\n      // and don't bother to update the element.\n      var realGet = methodDescriptor.get;\n      methodDescriptor.get = function() {\n        if (isFormMethodDialog(this)) {\n          return 'dialog';\n        }\n        return realGet.call(this);\n      };\n      var realSet = methodDescriptor.set;\n      /** @this {HTMLElement} */\n      methodDescriptor.set = function(v) {\n        if (typeof v === 'string' && v.toLowerCase() === 'dialog') {\n          return this.setAttribute('method', v);\n        }\n        return realSet.call(this, v);\n      };\n      Object.defineProperty(HTMLFormElement.prototype, 'method', methodDescriptor);\n    }\n  }\n\n  /**\n   * Global 'click' handler, to capture the <input type=\"submit\"> or <button> element which has\n   * submitted a <form method=\"dialog\">. Needed as Safari and others don't report this inside\n   * document.activeElement.\n   */\n  document.addEventListener('click', function(ev) {\n    dialogPolyfill.formSubmitter = null;\n    dialogPolyfill.imagemapUseValue = null;\n    if (ev.defaultPrevented) { return; }  // e.g. a submit which prevents default submission\n\n    var target = /** @type {Element} */ (ev.target);\n    if ('composedPath' in ev) {\n      var path = ev.composedPath();\n      target = path.shift() || target;\n    }\n    if (!target || !isFormMethodDialog(target.form)) { return; }\n\n    var valid = (target.type === 'submit' && ['button', 'input'].indexOf(target.localName) > -1);\n    if (!valid) {\n      if (!(target.localName === 'input' && target.type === 'image')) { return; }\n      // this is a <input type=\"image\">, which can submit forms\n      dialogPolyfill.imagemapUseValue = ev.offsetX + ',' + ev.offsetY;\n    }\n\n    var dialog = findNearestDialog(target);\n    if (!dialog) { return; }\n\n    dialogPolyfill.formSubmitter = target;\n\n  }, false);\n\n  /**\n   * Global 'submit' handler. This handles submits of `method=\"dialog\"` which are invalid, i.e.,\n   * outside a dialog. They get prevented.\n   */\n  document.addEventListener('submit', function(ev) {\n    var form = ev.target;\n    var dialog = findNearestDialog(form);\n    if (dialog) {\n      return;  // ignore, handle there\n    }\n\n    var submitter = findFormSubmitter(ev);\n    var formmethod = submitter && submitter.getAttribute('formmethod') || form.getAttribute('method');\n    if (formmethod === 'dialog') {\n      ev.preventDefault();\n    }\n  });\n\n  /**\n   * Replace the native HTMLFormElement.submit() method, as it won't fire the\n   * submit event and give us a chance to respond.\n   */\n  var nativeFormSubmit = HTMLFormElement.prototype.submit;\n  var replacementFormSubmit = function () {\n    if (!isFormMethodDialog(this)) {\n      return nativeFormSubmit.call(this);\n    }\n    var dialog = findNearestDialog(this);\n    dialog && dialog.close();\n  };\n  HTMLFormElement.prototype.submit = replacementFormSubmit;\n}\n\nexport default dialogPolyfill;\n",":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > dialog {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\n}\n\n/* stylelint-disable selector-pseudo-class-no-unknown */\n:host > dialog:modal {\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n:host > dialog::backdrop {\n  display: none;\n}\n\n/* polyfill style  */\n:host > dialog + .backdrop {\n  display: none;\n}\n\n:host > dialog:not([open]) {\n  display: none;\n}\n\n:host > dialog[open] {\n  display: block;\n}\n\n.modal-container {\n  z-index: 1010;\n  display: flex;\n  overflow: -moz-scrollbars-none;\n  width: 100%;\n  height: 100vh;\n  flex-direction: column;\n}\n\n.modal-container > .modal-content-scroll-outside {\n  overflow: auto;\n  background: var(--color-surface01);\n}\n\n.modal-container > header {\n  padding: calc(var(--space-unit) * 2 - 2px) calc(var(--space-unit) * 2);\n  background: var(--color-surface02);\n}\n\n.modal-container > header button {\n  padding: 0;\n  border: none;\n  margin: 0;\n  margin-left: auto;\n  background: transparent;\n  cursor: pointer;\n}\n\n.modal-container > header z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2.5);\n  --z-icon-height: calc(var(--space-unit) * 2.5);\n\n  display: flex;\n  fill: var(--color-icon01);\n}\n\n.modal-container > header > div {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  margin-right: calc(var(--space-unit) * 2);\n}\n\n.modal-container > header h1,\n.modal-container > header h2 {\n  padding: 0;\n  margin: 0;\n  color: var(--color-text01);\n  font-weight: var(--font-rg);\n}\n\n.modal-container > header h1 {\n  font-size: var(--font-size-5);\n  letter-spacing: 0;\n  line-height: 1.4;\n}\n\n.modal-container > header h2 {\n  font-size: var(--font-size-3);\n  letter-spacing: 0;\n  line-height: 1.5;\n}\n\n.modal-container > header > div > h1 *:empty {\n  display: none;\n}\n\n.modal-container > header h1 + h2 {\n  margin-top: calc(var(--space-unit) * 0.5);\n}\n\n.modal-container-scroll-inside > .modal-content-scroll-inside {\n  overflow: hidden auto;\n  flex: 1 auto;\n  background: var(--color-surface01);\n}\n\n.modal-container-scroll-inside > .modal-content-scroll-inside::-webkit-scrollbar,\n.modal-container-scroll-outside > .modal-content-scroll-outside::-webkit-scrollbar {\n  width: 10px;\n  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n  border-radius: var(--border-radius);\n}\n\n.modal-container-scroll-inside > .modal-content-scroll-inside::-webkit-scrollbar-thumb,\n.modal-container-scroll-outside > .modal-content-scroll-outside::-webkit-scrollbar-thumb {\n  width: 10px;\n  background-color: var(--color-primary01);\n}\n\n.modal-container-scroll-inside > .modal-content-scroll-inside::-webkit-scrollbar-thumb:hover,\n.modal-container-scroll-outside > .modal-content-scroll-outside::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n/* Firefox */\n.modal-container-scroll-inside .modal-content-scroll-inside,\n.modal-container-scroll-outside .modal-content-scroll-outside {\n  scrollbar-color: var(--color-primary01) transparent;\n}\n\n/* Tablet / Desktop */\n@media only screen and (min-width: 768px) {\n  .modal-background {\n    position: fixed;\n    top: 0;\n    left: 0;\n    overflow: hidden;\n    width: 100vw;\n    height: 100vh;\n    background-color: var(--gray900);\n    opacity: 0.7;\n  }\n\n  .modal-background.modal-background-scroll-outside {\n    position: sticky;\n  }\n\n  .modal-container-scroll-inside {\n    position: fixed;\n    top: calc(var(--space-unit) * 6);\n    left: 50%;\n    overflow: hidden;\n    width: auto;\n    min-width: calc(var(--space-unit) * 40);\n    height: auto;\n    min-height: calc(var(--space-unit) * 40);\n    max-height: calc(100vh - calc(var(--space-unit) * 6 * 2));\n    border-radius: var(--border-radius);\n    transform: translateX(-50%);\n  }\n\n  .modal-container-scroll-outside {\n    position: absolute;\n    top: calc(var(--space-unit) * 6);\n    left: 50%;\n    display: block;\n    overflow: initial;\n    width: auto;\n    min-width: calc(var(--space-unit) * 40);\n    height: auto;\n    min-height: calc(var(--space-unit) * 40);\n    max-height: calc(100vh - calc(var(--space-unit) * 6 * 2));\n    transform: translateX(-50%);\n  }\n\n  .modal-container > .modal-content-scroll-outside {\n    overflow: initial;\n  }\n\n  .modal-container-scroll-outside > header,\n  .modal-container-scroll-inside > header {\n    border-top-left-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n  }\n\n  .modal-container-scroll-outside::after {\n    display: block;\n    height: calc(var(--space-unit) * 6);\n    content: \" \";\n  }\n\n  .modal-dialog {\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: auto;\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n\n  .modal-content-scroll-outside {\n    border-bottom-left-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n  }\n\n  .modal-dialog::-webkit-scrollbar {\n    display: none;\n  }\n\n  .modal-container > header z-icon {\n    --z-icon-width: calc(var(--space-unit) * 3);\n    --z-icon-height: calc(var(--space-unit) * 3);\n  }\n}\n\n/* Tablet */\n@media only screen and (min-width: 768px) and (max-width: 1151px) {\n  .modal-container > header {\n    padding: calc(var(--space-unit) * 3 - 2px) calc(var(--space-unit) * 3);\n  }\n}\n\n/* Desktop */\n@media only screen and (min-width: 1152px) {\n  .modal-container > header {\n    padding: calc(var(--space-unit) * 4 - 4px) calc(var(--space-unit) * 4);\n  }\n\n  .modal-container > header h1 {\n    font-size: var(--font-size-6);\n    letter-spacing: 0;\n    line-height: 1.33;\n  }\n\n  .modal-container > header h2 {\n    font-size: var(--font-size-4);\n    letter-spacing: 0;\n    line-height: 1.5;\n  }\n\n  .modal-container > header h1 + h2 {\n    margin-top: 0;\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Method, Element, Listen} from \"@stencil/core\";\nimport dialogPolyfill from \"dialog-polyfill\";\nimport {KeyboardCode} from \"../../../beans\";\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n  ':is(button, input, select, textarea, [contenteditable=\"\"], [contenteditable=\"true\"], a[href], [tabindex], summary):not([disabled], [disabled=\"\"], [tabindex=\"-1\"], [aria-hidden=\"true\"], [hidden])';\n\n/**\n * @slot modalCloseButton - accept custom close button\n * @slot modalContent - set the content of the modal\n */\n@Component({\n  tag: \"z-modal\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZModal {\n  /** unique id */\n  @Prop()\n  modalid: string;\n\n  /** title text (optional) */\n  @Prop()\n  modaltitle?: string;\n\n  /** subtitle (optional) */\n  @Prop()\n  modalsubtitle?: string;\n\n  /** aria-label for close button (optional) */\n  @Prop()\n  closeButtonLabel = \"chiudi modale\";\n\n  /** add role \"alertdialog\" to dialog (optional, default is false) */\n  @Prop()\n  alertdialog?: boolean = false;\n\n  /** if true, the modal is closable (optional, default is true) */\n  @Prop()\n  closable?: boolean = true;\n\n  /** if true, the modal can scroll inside, if false the viewport can scroll */\n  @Prop()\n  scrollInside?: boolean = true;\n\n  private dialog: HTMLDialogElement;\n\n  @Element() host: HTMLZModalElement;\n\n  /** emitted on close button click, returns modalid */\n  @Event()\n  modalClose: EventEmitter;\n\n  private emitModalClose(): void {\n    if (this.closable) {\n      this.modalClose.emit({modalid: this.modalid});\n    }\n  }\n\n  /** emitted on modal header click, returns modalid */\n  @Event()\n  modalHeaderActive: EventEmitter;\n\n  private emitModalHeaderActive(): void {\n    this.modalHeaderActive.emit({modalid: this.modalid});\n  }\n\n  /** emitted on background click, returns modalid */\n  @Event()\n  modalBackgroundClick: EventEmitter;\n\n  private emitBackgroundClick(): void {\n    if (this.closable) {\n      this.modalBackgroundClick.emit({modalid: this.modalid});\n    }\n  }\n\n  componentDidLoad(): void {\n    if (typeof window.HTMLDialogElement !== \"function\") {\n      /* workaround to fix `registerDialog` in test environment:\n      stencil converts html elements to MockHTMLElement but this element is missing the `localName` property,\n      which is used by `registerDialog` to recognize the element as dialog */\n      if (!this.dialog.localName) {\n        Object.defineProperty(this.dialog, \"localName\", {value: \"dialog\"});\n      }\n      dialogPolyfill.registerDialog(this.dialog);\n      this.dialog.setAttribute(\"open\", \"true\");\n    } else {\n      this.open();\n    }\n  }\n\n  /** open modal */\n  @Method()\n  async open(): Promise<void> {\n    this.dialog?.showModal();\n  }\n\n  /** close modal */\n  @Method()\n  async close(): Promise<void> {\n    if (this.closable) {\n      this.dialog?.close();\n    }\n  }\n\n  /**\n   * Get a list of focusable elements in the dialog.\n   * Remove elements with `display: none` from the list, because they're not focusable.\n   *\n   * N.B. The list is built on the assumption that elements inside shadow root are placed ALL before the `modalContent` slot.\n   * Adding focusable elements after the `modalContent` slot would break the order of elements in the list.\n   */\n  private get focusableElements(): HTMLElement[] {\n    return [\n      ...Array.from(this.host.shadowRoot.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n      ...Array.from(this.host.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n    ].filter((element) => getComputedStyle(element).display !== \"none\");\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(e: KeyboardEvent): void {\n    if (e.code !== KeyboardCode.TAB) {\n      return;\n    }\n\n    const focusableElements = this.focusableElements;\n    const shadowActiveElement = this.host.shadowRoot.activeElement;\n    const activeElement = this.host.ownerDocument.activeElement;\n    const firstFocusableElement = focusableElements[0];\n    const lastFocusableElement = focusableElements[focusableElements.length - 1];\n    if (e.shiftKey && (shadowActiveElement == firstFocusableElement || activeElement == firstFocusableElement)) {\n      // shift + tab was pressed and current active element is the first focusable element\n      e.preventDefault();\n      lastFocusableElement.focus();\n    } else if (!e.shiftKey && (shadowActiveElement == lastFocusableElement || activeElement == lastFocusableElement)) {\n      // shift + tab was pressed and current active element is the first focusable element\n      e.preventDefault();\n      firstFocusableElement.focus();\n    }\n  }\n\n  private closeButtonSlot(): HTMLElement | void {\n    if (this.closable) {\n      return (\n        <slot name=\"modalCloseButton\">\n          <button\n            aria-label={this.closeButtonLabel}\n            onClick={() => this.close()}\n          >\n            <z-icon name=\"multiply-circle-filled\"></z-icon>\n          </button>\n        </slot>\n      );\n    }\n  }\n\n  private handleEscape(e: Event): void {\n    if (this.closable) {\n      return;\n    }\n    e.preventDefault();\n  }\n\n  render(): HTMLZModalElement {\n    return (\n      <dialog\n        class={{\n          \"modal-dialog\": !this.scrollInside,\n        }}\n        aria-labelledby=\"modal-title\"\n        aria-describedby=\"modal-content\"\n        role={this.alertdialog ? \"alertdialog\" : undefined}\n        ref={(el) => (this.dialog = el as HTMLDialogElement)}\n        onClose={() => this.emitModalClose()}\n        onCancel={(e) => this.handleEscape(e)}\n      >\n        <div\n          class={{\n            \"modal-container\": true,\n            \"modal-container-scroll-inside\": this.scrollInside,\n            \"modal-container-scroll-outside\": !this.scrollInside,\n          }}\n          id={this.modalid}\n        >\n          <header onClick={this.emitModalHeaderActive.bind(this)}>\n            <div>\n              {this.modaltitle && <h1 id=\"modal-title\">{this.modaltitle}</h1>}\n              {this.closeButtonSlot()}\n            </div>\n            {this.modalsubtitle && <h2 id=\"modal-subtitle\">{this.modalsubtitle}</h2>}\n          </header>\n\n          <div\n            class={{\n              \"modal-content-scroll-inside\": this.scrollInside,\n              \"modal-content-scroll-outside\": !this.scrollInside,\n            }}\n            id=\"modal-content\"\n          >\n            <slot name=\"modalContent\"></slot>\n          </div>\n        </div>\n        <div\n          class={{\n            \"modal-background\": true,\n            \"modal-background-scroll-outside\": !this.scrollInside,\n          }}\n          data-action=\"modalBackground\"\n          data-modal={this.modalid}\n          onClick={() => {\n            this.emitBackgroundClick();\n            this.close();\n          }}\n        ></div>\n      </dialog>\n    );\n  }\n}\n"],"mappings":"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"}

package/www/build/p-589a9033.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZCoverHeroStyle0","ZCoverHero","CoverHeroVariant","OVERLAY","CoverHeroContentPosition","TOP","onImgLoad","target","Image","closest","ratio","naturalWidth","naturalHeight","this","host","style","setProperty","toString","renderContent","h","class","name","render","Host","key","variant","STACKED","contentPosition","BOTTOM"],"sources":["src/components/z-cover-hero/styles.css?tag=z-cover-hero&encapsulation=shadow","src/components/z-cover-hero/index.tsx"],"sourcesContent":[":host {\n  --cover-hero-overlay: linear-gradient(270deg, #0000 0%, #000000e6 100%);\n  --cover-hero-text-color: var(--color-text-inverse);\n  --cover-hero-aspect-ratio: ;\n\n  display: block;\n  overflow: hidden;\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n:host .main-container {\n  position: relative;\n  width: 100%;\n  align-items: baseline;\n}\n\n:host .content-container {\n  color: var(--cover-hero-text-color);\n  fill: var(--cover-hero-text-color);\n}\n\n:host .main-container .cover-container {\n  position: relative;\n  width: 100%;\n  padding-top: calc(100% / (var(--cover-hero-aspect-ratio, var(--image-aspect-ratio, 16/9))));\n  background-color: var(--gray600);\n}\n\n::slotted([slot=\"cover\"]) {\n  position: absolute;\n  display: block;\n  width: 100%;\n  height: 100%;\n  inset: 0;\n  object-fit: cover;\n  object-position: top center;\n}\n\n::slotted(z-info-reveal) {\n  position: absolute;\n  z-index: 1;\n  right: var(--grid-margin);\n  bottom: var(--grid-margin);\n}\n\n/* Variant overlay */\n:host([variant=\"overlay\"]:not([preserve-aspect-ratio=\"\"], [preserve-aspect-ratio=\"true\"])) .main-container {\n  height: 100%;\n}\n\n:host([variant=\"overlay\"]:not([preserve-aspect-ratio=\"\"], [preserve-aspect-ratio=\"true\"]))\n  .main-container\n  .cover-container {\n  position: absolute;\n  z-index: -1;\n  height: 100%;\n  padding: 0;\n}\n\n:host([variant=\"overlay\"]) .main-container .cover-container::after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--cover-hero-overlay);\n  content: \"\";\n}\n\n:host([variant=\"overlay\"]:is([preserve-aspect-ratio=\"\"], [preserve-aspect-ratio=\"true\"]))\n  .main-container\n  .content-container {\n  position: absolute;\n  inset: 0;\n}\n\n:host([variant=\"overlay\"]) .main-container .content-container {\n  height: 100%;\n  padding: var(--grid-margin);\n}\n\n/* Variant stacked */\n:host([variant=\"stacked\"]) {\n  --cover-hero-text-color: var(--color-text01);\n}\n\n:host([variant=\"stacked\"]) .content-container ::slotted(*) {\n  padding: var(--grid-margin) 0;\n}\n","import {Component, Prop, h, Host, Listen, Element} from \"@stencil/core\";\nimport {CoverHeroVariant, CoverHeroContentPosition} from \"../../beans\";\n\n/**\n * Cover hero component.\n * Component to display a hero image with content.\n *\n * @slot cover - slot for the cover image.\n * @slot content - slot for the content.\n * @slot info-reveal - slot for the info reveal.\n * @cssprop --cover-hero-overlay - overlay color of the cover hero (CSS `background` property). **Default**: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.\n * @cssprop --cover-hero-text-color - color of the text.\n * @cssprop --cover-hero-aspect-ratio - aspect ratio to use for the image. You can pass a fraction or a number representing the ratio. **Default**: the intrinsic aspect ratio of the slotted image or `16/9`.\n */\n@Component({\n  tag: \"z-cover-hero\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCoverHero {\n  @Element() host: HTMLZCoverHeroElement;\n\n  /**\n   * Cover hero variant. Can be `OVERLAY` or `STACKED`.\n   */\n  @Prop({reflect: true})\n  variant: CoverHeroVariant = CoverHeroVariant.OVERLAY;\n\n  /**\n   * Vertical content position (for `STACKED` variant).\n   */\n  @Prop({reflect: true})\n  contentPosition: CoverHeroContentPosition = CoverHeroContentPosition.TOP;\n\n  /**\n   * Whether to keep the image aspect ratio.\n   * If set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;\n   * instead, the height of the component follows the content's one.\n   * Note: it may be necessary to set a min and/or max height to the component.\n   */\n  @Prop({reflect: true})\n  preserveAspectRatio = true;\n\n  /**\n   * Store the intrinsic aspect ratio of the slotted image when loaded,\n   * to have a default when `--cover-hero-aspect-ratio` is not set.\n   * @param target The event target\n   */\n  @Listen(\"load\", {capture: true})\n  protected onImgLoad({target}: Event): void {\n    if (target instanceof Image && target.closest(\"[slot=cover]\")) {\n      const ratio = target.naturalWidth / target.naturalHeight;\n      this.host.style.setProperty(\"--image-aspect-ratio\", ratio.toString());\n    }\n  }\n\n  /**\n   * Template for the content.\n   */\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"content-container\">\n        <slot name=\"content\"></slot>\n      </div>\n    );\n  }\n\n  render(): HTMLZCoverHeroElement {\n    return (\n      <Host>\n        {this.variant === CoverHeroVariant.STACKED &&\n          this.contentPosition === CoverHeroContentPosition.TOP &&\n          this.renderContent()}\n        <div class=\"main-container\">\n          <div class=\"cover-container\">\n            <slot name=\"cover\"></slot>\n          </div>\n          <slot name=\"info-reveal\"></slot>\n          {this.variant === CoverHeroVariant.OVERLAY && this.renderContent()}\n        </div>\n        {this.variant === CoverHeroVariant.STACKED &&\n          this.contentPosition === CoverHeroContentPosition.BOTTOM &&\n          this.renderContent()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,unDAClB,MAAAC,EAAeD,E,MCkBFE,EAAU,M,sCAOOC,EAAiBC,Q,qBAMDC,EAAyBC,I,yBAS/C,I,CAQZ,SAAAC,EAAUC,OAACA,IACnB,GAAIA,aAAkBC,OAASD,EAAOE,QAAQ,gBAAiB,CAC7D,MAAMC,EAAQH,EAAOI,aAAeJ,EAAOK,cAC3CC,KAAKC,KAAKC,MAAMC,YAAY,uBAAwBN,EAAMO,W,EAOtD,aAAAC,GACN,OACEC,EAAA,OAAKC,MAAM,qBACTD,EAAA,QAAME,KAAK,Y,CAKjB,MAAAC,GACE,OACEH,EAACI,EAAI,CAAAC,IAAA,4CACFX,KAAKY,UAAYvB,EAAiBwB,SACjCb,KAAKc,kBAAoBvB,EAAyBC,KAClDQ,KAAKK,gBACPC,EAAA,OAAAK,IAAA,2CAAKJ,MAAM,kBACTD,EAAA,OAAAK,IAAA,2CAAKJ,MAAM,mBACTD,EAAA,QAAAK,IAAA,2CAAMH,KAAK,WAEbF,EAAA,QAAAK,IAAA,2CAAMH,KAAK,gBACVR,KAAKY,UAAYvB,EAAiBC,SAAWU,KAAKK,iBAEpDL,KAAKY,UAAYvB,EAAiBwB,SACjCb,KAAKc,kBAAoBvB,EAAyBwB,QAClDf,KAAKK,gB"}

package/www/build/p-5b260d8b.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as r,g as a}from"./p-10bb4f4b.js";const t=":host{--font-size-link:inherit;--font-weight-link:inherit;font-family:var(--font-family-sans);font-size:var(--font-size-link);font-weight:var(--font-weight-link);line-height:inherit;outline:none}:host([big]){--font-size-link:16px;--font-weight-link:var(--font-sb)}a{display:inline-flex;align-items:center;padding:calc(var(--space-unit) / 2) 0;border-top:var(--border-size-medium) solid transparent;border-bottom:var(--border-size-medium) solid transparent;color:var(--color-link-primary);cursor:pointer;fill:var(--color-link-primary);text-decoration:none}a:hover,a:focus,a:active{text-decoration:underline}a.active{color:var(--color-active-link);fill:var(--color-active-link)}a:hover,a:focus{color:var(--color-hover-link);fill:var(--color-hover-link)}a:active{color:var(--color-pressed-link);fill:var(--color-pressed-link)}a:visited{color:var(--color-visited-link);fill:var(--color-visited-link)}a.disabled,a.inverse.disabled{color:var(--color-disabled03);cursor:default;fill:var(--color-disabled03);pointer-events:none}a.underline,a.underline:active,a.underline:hover,a.underline:visited,a.underline.disabled,a.underline.black,a.underline.white{text-decoration:underline}a.disabled,a.disabled:active,a.disabled:visited,a.disabled:hover{text-decoration:none}a.inverse{color:var(--color-inverse-link);fill:var(--color-inverse-link)}a.inverse.active{color:var(--color-inverse-active-link);fill:var(--color-inverse-active-link)}a.inverse:hover,a.inverse:focus{color:var(--color-inverse-hover-link);fill:var(--color-inverse-hover-link)}a.inverse:active{color:var(--color-inverse-pressed-link);fill:var(--color-inverse-pressed-link)}a.inverse:visited{color:var(--color-inverse-visited-link);fill:var(--color-inverse-visited-link)}a.black{color:var(--gray800);fill:var(--gray800);text-decoration:none}a.black:hover,a.black.active{color:var(--color-black);fill:var(--color-black)}a.black:visited{color:var(--gray800);fill:var(--gray800)}a.black:hover,a.black:focus,a.black:active{text-decoration:underline}a.black:active{color:var(--gray700);fill:var(--gray700)}a.white,a.white:active,a.white:hover,a.white.active{color:var(--color-white);fill:var(--color-white);text-decoration:none}a.white:visited{color:var(--color-white);fill:var(--color-white)}a.white:hover,a.white:focus,a.white:active{text-decoration:underline}a.white.disabled,a.black.disabled{color:var(--gray500);fill:var(--gray500)}a>z-icon:first-child{margin-right:var(--space-unit)}a>z-icon:last-child{margin-left:var(--space-unit)}";const l=t;const o=class{constructor(r){i(this,r);this.zLinkClick=e(this,"zLinkClick",7);this.htmlid=undefined;this.href=undefined;this.target="_self";this.htmltabindex=0;this.isdisabled=false;this.isactive=false;this.iswhite=false;this.textcolor="primary";this.icon=undefined;this.big=false;this.iconposition="left";this.underline=false;this.iconSize=18;this.emitZLinkClick=this.emitZLinkClick.bind(this);this.emitZLinkInteraction=this.emitZLinkInteraction.bind(this)}componentWillLoad(){if(this.iswhite){console.warn("z-link iswhite prop is deprecated and will be dropped in a next release, please use textcolor prop instead")}if(this.big){console.warn("z-link big prop is deprecated and will be dropped in a next release, please override --font-size-link and --font-weight-link variables instead")}}emitZLinkClick(i,e){this.emitZLinkInteraction(i,e)}emitZLinkInteraction(i,e){this.zLinkClick.emit({e:i,linkId:e})}componentDidLoad(){if(this.icon){const i=parseFloat(window.getComputedStyle(this.hostElement).getPropertyValue("font-size"));const e=this.big?18:Math.round(i*1.125);if(!Number.isNaN(e)&&this.iconSize!==e){this.iconSize=e}}}render(){return r("a",{key:"ec5051df288fd9731b92f6551bfaa9b999d20462",id:this.htmlid,href:this.href?this.href:null,class:{disabled:this.isdisabled,active:this.isactive,white:this.iswhite,[this.textcolor||""]:true,underline:this.underline},target:this.target,role:this.href?"link":"button",tabindex:this.isdisabled?-1:this.htmltabindex,onClick:i=>this.emitZLinkClick(i,this.htmlid)},this.iconposition==="right"&&r("slot",null),this.icon&&r("z-icon",{style:{"--z-icon-width":`${this.iconSize}px`,"--z-icon-height":`${this.iconSize}px`},name:this.icon}),this.iconposition==="left"&&r("slot",null))}get hostElement(){return a(this)}};o.style=l;export{o as z_link};
-//# sourceMappingURL=p-5b260d8b.entry.js.map

package/www/build/p-5b260d8b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZLinkStyle0","ZLink","constructor","hostRef","this","emitZLinkClick","bind","emitZLinkInteraction","componentWillLoad","iswhite","console","warn","big","e","linkId","zLinkClick","emit","componentDidLoad","icon","height","parseFloat","window","getComputedStyle","hostElement","getPropertyValue","currentSize","Math","round","Number","isNaN","iconSize","render","h","key","id","htmlid","href","class","disabled","isdisabled","active","isactive","white","textcolor","underline","target","role","tabindex","htmltabindex","onClick","iconposition","style","name"],"sources":["src/deprecated/z-link/styles.css?tag=z-link&encapsulation=shadow","src/deprecated/z-link/index.tsx"],"sourcesContent":[":host {\n  --font-size-link: inherit;\n  --font-weight-link: inherit;\n\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-link);\n  font-weight: var(--font-weight-link);\n  line-height: inherit;\n  outline: none;\n}\n\n:host([big]) {\n  --font-size-link: 16px;\n  --font-weight-link: var(--font-sb);\n}\n\na {\n  display: inline-flex;\n  align-items: center;\n  padding: calc(var(--space-unit) / 2) 0;\n  border-top: var(--border-size-medium) solid transparent;\n  border-bottom: var(--border-size-medium) solid transparent;\n  color: var(--color-link-primary);\n  cursor: pointer;\n  fill: var(--color-link-primary);\n  text-decoration: none;\n}\n\na:hover,\na:focus,\na:active {\n  text-decoration: underline;\n}\n\na.active {\n  color: var(--color-active-link);\n  fill: var(--color-active-link);\n}\n\na:hover,\na:focus {\n  color: var(--color-hover-link);\n  fill: var(--color-hover-link);\n}\n\na:active {\n  color: var(--color-pressed-link);\n  fill: var(--color-pressed-link);\n}\n\na:visited {\n  color: var(--color-visited-link);\n  fill: var(--color-visited-link);\n}\n\na.disabled,\na.inverse.disabled {\n  color: var(--color-disabled03);\n  cursor: default;\n  fill: var(--color-disabled03);\n  pointer-events: none;\n}\n\na.underline,\na.underline:active,\na.underline:hover,\na.underline:visited,\na.underline.disabled,\na.underline.black,\na.underline.white {\n  text-decoration: underline;\n}\n\na.disabled,\na.disabled:active,\na.disabled:visited,\na.disabled:hover {\n  text-decoration: none;\n}\n\na.inverse {\n  color: var(--color-inverse-link);\n  fill: var(--color-inverse-link);\n}\n\na.inverse.active {\n  color: var(--color-inverse-active-link);\n  fill: var(--color-inverse-active-link);\n}\n\na.inverse:hover,\na.inverse:focus {\n  color: var(--color-inverse-hover-link);\n  fill: var(--color-inverse-hover-link);\n}\n\na.inverse:active {\n  color: var(--color-inverse-pressed-link);\n  fill: var(--color-inverse-pressed-link);\n}\n\na.inverse:visited {\n  color: var(--color-inverse-visited-link);\n  fill: var(--color-inverse-visited-link);\n}\n\na.black {\n  color: var(--gray800);\n  fill: var(--gray800);\n  text-decoration: none;\n}\n\na.black:hover,\na.black.active {\n  color: var(--color-black);\n  fill: var(--color-black);\n}\n\na.black:visited {\n  color: var(--gray800);\n  fill: var(--gray800);\n}\n\na.black:hover,\na.black:focus,\na.black:active {\n  text-decoration: underline;\n}\n\na.black:active {\n  color: var(--gray700);\n  fill: var(--gray700);\n}\n\na.white,\na.white:active,\na.white:hover,\na.white.active {\n  color: var(--color-white);\n  fill: var(--color-white);\n  text-decoration: none;\n}\n\na.white:visited {\n  color: var(--color-white);\n  fill: var(--color-white);\n}\n\na.white:hover,\na.white:focus,\na.white:active {\n  text-decoration: underline;\n}\n\na.white.disabled,\na.black.disabled {\n  color: var(--gray500);\n  fill: var(--gray500);\n}\n\na > z-icon:first-child {\n  margin-right: var(--space-unit);\n}\n\na > z-icon:last-child {\n  margin-left: var(--space-unit);\n}\n","import {Component, Prop, h, Event, EventEmitter, Element} from \"@stencil/core\";\nimport {State} from \"@stencil/core/internal\";\n\n/**\n * @deprecated - use a native `<a>` with the `z-link` CSS class instead\n * @slot - link content\n */\n@Component({\n  tag: \"z-link\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZLink {\n  /** link id (optional) */\n  @Prop()\n  htmlid?: string;\n\n  /** link url (optional) */\n  @Prop()\n  href?: string;\n\n  /** link target (optional) */\n  @Prop()\n  target?: string = \"_self\";\n\n  /** tabindex link attribute (optional) */\n  @Prop()\n  htmltabindex?: number = 0;\n\n  /** disable link flag (optional) */\n  @Prop()\n  isdisabled?: boolean = false;\n\n  /** active link flag (optional) */\n  @Prop()\n  isactive?: boolean = false;\n\n  /** white variant flag (optional) */\n  @Prop()\n  iswhite?: boolean = false;\n\n  /** link text variant (optional) */\n  @Prop()\n  textcolor?: \"primary\" | \"inverse\" | \"white\" | \"black\" = \"primary\";\n\n  /** link icon name (optional) */\n  @Prop()\n  icon?: string;\n\n  /** big link version */\n  @Prop({reflect: true})\n  big?: boolean = false;\n\n  /** link icon position (optional) */\n  @Prop()\n  iconposition?: \"left\" | \"right\" = \"left\";\n\n  /** draw underline on text (optional) */\n  @Prop()\n  underline?: boolean = false;\n\n  /** emitted on link click, returns linkId */\n  @Event()\n  zLinkClick: EventEmitter;\n\n  @Element() hostElement: HTMLZLinkElement;\n\n  @State()\n  iconSize = 18;\n\n  constructor() {\n    this.emitZLinkClick = this.emitZLinkClick.bind(this);\n    this.emitZLinkInteraction = this.emitZLinkInteraction.bind(this);\n  }\n\n  componentWillLoad(): void {\n    if (this.iswhite) {\n      console.warn(\n        \"z-link iswhite prop is deprecated and will be dropped in a next release, please use textcolor prop instead\"\n      );\n    }\n    if (this.big) {\n      console.warn(\n        \"z-link big prop is deprecated and will be dropped in a next release, please override --font-size-link and --font-weight-link variables instead\"\n      );\n    }\n  }\n\n  private emitZLinkClick(e: MouseEvent, linkId): void {\n    this.emitZLinkInteraction(e, linkId);\n  }\n\n  private emitZLinkInteraction(e: Event, linkId: string): void {\n    this.zLinkClick.emit({e, linkId});\n  }\n\n  componentDidLoad(): void {\n    if (this.icon) {\n      const height: number = parseFloat(window.getComputedStyle(this.hostElement).getPropertyValue(\"font-size\"));\n      const currentSize = this.big ? 18 : Math.round(height * 1.125);\n      if (!Number.isNaN(currentSize) && this.iconSize !== currentSize) {\n        this.iconSize = currentSize;\n      }\n    }\n  }\n\n  render(): HTMLAnchorElement {\n    return (\n      <a\n        id={this.htmlid}\n        href={this.href ? this.href : null}\n        class={{\n          disabled: this.isdisabled,\n          active: this.isactive,\n          white: this.iswhite,\n          [this.textcolor || \"\"]: true,\n          underline: this.underline,\n        }}\n        target={this.target}\n        role={this.href ? \"link\" : \"button\"}\n        tabindex={this.isdisabled ? -1 : this.htmltabindex}\n        onClick={(e: MouseEvent) => this.emitZLinkClick(e, this.htmlid)}\n      >\n        {this.iconposition === \"right\" && <slot />}\n        {this.icon && (\n          <z-icon\n            style={{\n              \"--z-icon-width\": `${this.iconSize}px`,\n              \"--z-icon-height\": `${this.iconSize}px`,\n            }}\n            name={this.icon}\n          />\n        )}\n        {this.iconposition === \"left\" && <slot />}\n      </a>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,27EAClB,MAAAC,EAAeD,E,MCWFE,EAAK,MA0DhB,WAAAC,CAAAC,G,uGA/CkB,Q,kBAIM,E,gBAID,M,cAIF,M,aAID,M,eAIoC,U,6BAQxC,M,kBAIkB,O,eAIZ,M,cASX,GAGTC,KAAKC,eAAiBD,KAAKC,eAAeC,KAAKF,MAC/CA,KAAKG,qBAAuBH,KAAKG,qBAAqBD,KAAKF,K,CAG7D,iBAAAI,GACE,GAAIJ,KAAKK,QAAS,CAChBC,QAAQC,KACN,6G,CAGJ,GAAIP,KAAKQ,IAAK,CACZF,QAAQC,KACN,iJ,EAKE,cAAAN,CAAeQ,EAAeC,GACpCV,KAAKG,qBAAqBM,EAAGC,E,CAGvB,oBAAAP,CAAqBM,EAAUC,GACrCV,KAAKW,WAAWC,KAAK,CAACH,IAAGC,U,CAG3B,gBAAAG,GACE,GAAIb,KAAKc,KAAM,CACb,MAAMC,EAAiBC,WAAWC,OAAOC,iBAAiBlB,KAAKmB,aAAaC,iBAAiB,cAC7F,MAAMC,EAAcrB,KAAKQ,IAAM,GAAKc,KAAKC,MAAMR,EAAS,OACxD,IAAKS,OAAOC,MAAMJ,IAAgBrB,KAAK0B,WAAaL,EAAa,CAC/DrB,KAAK0B,SAAWL,C,GAKtB,MAAAM,GACE,OACEC,EAAA,KAAAC,IAAA,2CACEC,GAAI9B,KAAK+B,OACTC,KAAMhC,KAAKgC,KAAOhC,KAAKgC,KAAO,KAC9BC,MAAO,CACLC,SAAUlC,KAAKmC,WACfC,OAAQpC,KAAKqC,SACbC,MAAOtC,KAAKK,QACZ,CAACL,KAAKuC,WAAa,IAAK,KACxBC,UAAWxC,KAAKwC,WAElBC,OAAQzC,KAAKyC,OACbC,KAAM1C,KAAKgC,KAAO,OAAS,SAC3BW,SAAU3C,KAAKmC,YAAc,EAAInC,KAAK4C,aACtCC,QAAUpC,GAAkBT,KAAKC,eAAeQ,EAAGT,KAAK+B,SAEvD/B,KAAK8C,eAAiB,SAAWlB,EAAA,aACjC5B,KAAKc,MACJc,EAAA,UACEmB,MAAO,CACL,iBAAkB,GAAG/C,KAAK0B,aAC1B,kBAAmB,GAAG1B,KAAK0B,cAE7BsB,KAAMhD,KAAKc,OAGdd,KAAK8C,eAAiB,QAAUlB,EAAA,a"}

package/www/build/p-5bb776c9.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s,a as c}from"./p-10bb4f4b.js";import{r as i}from"./p-955da62e.js";import{k as a}from"./p-025f494e.js";import"./p-2c886e8b.js";const l='.sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-text01);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type="checkbox"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}';const o=l;const r=class{constructor(s){e(this,s);this.toggleClick=t(this,"toggleClick",7);this.disabled=false;this.labelPosition=a.LEFT;this.checked=false;this.htmlid=`toggle-switch-id-${i()}`}emitToggleClick(){this.toggleClick.emit({id:this.htmlid,checked:this.checked})}handleClick(e){if(this.disabled){return}this.checked=e.target.checked;this.emitToggleClick()}render(){return s(c,{key:"1fcac74eda8db17b3d535d2138ee9637ef7779b5"},s("input",{key:"90d27860c20def96928eb87c9df301d9df1226c0",id:this.htmlid,type:"checkbox",checked:this.checked,disabled:this.disabled,onChange:this.handleClick.bind(this)}),s("label",{key:"be5a0eec29f493ac91c2fafbba54afcfa8f50f50",htmlFor:this.htmlid,class:{[this.labelPosition]:true,disabled:this.disabled}},s("span",{key:"b336633b42383d0aef29ec775e3b18aca42bf096"},s("slot",{key:"9f8d563f0bae08144106f32c1018cbd40b6b5bc6"})),s("span",{key:"176481146a6df0f575fc364fabd2dc2ea1b00b54",class:{container:true,disabled:this.disabled,checked:this.checked}},s("span",{key:"8a1227658fb1fdc68523a3947c7b8f55b63baa89",class:"circle"},this.checked&&s("z-icon",{width:12,height:12,name:"checkmark"})))))}};r.style=o;export{r as z_toggle_switch};
-//# sourceMappingURL=p-5bb776c9.entry.js.map

package/www/build/p-5bb776c9.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZToggleSwitchStyle0","ZToggleSwitch","LabelPosition","LEFT","randomId","emitToggleClick","this","toggleClick","emit","id","htmlid","checked","handleClick","ev","disabled","target","render","h","Host","key","type","onChange","bind","htmlFor","class","labelPosition","container","width","height","name"],"sources":["src/components/buttons/z-toggle-switch/styles.css?tag=z-toggle-switch&encapsulation=scoped","src/components/buttons/z-toggle-switch/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: inline-flex;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\nlabel {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n}\n\nlabel.disabled {\n  cursor: default;\n}\n\nlabel.right {\n  flex-direction: row-reverse;\n}\n\nlabel > span:first-child {\n  color: var(--color-text01);\n  letter-spacing: 0;\n}\n\nlabel.left > span:first-child {\n  margin-right: var(--space-unit);\n}\n\nlabel.right > span:first-child {\n  margin-left: var(--space-unit);\n}\n\nlabel > span.container {\n  position: relative;\n  top: 1px;\n  left: 1px;\n  display: flex;\n  width: calc(var(--space-unit) * 4);\n  height: 18px;\n  align-items: center;\n  background-color: var(--gray500);\n  border-radius: var(--space-unit);\n  color: var(--gray500);\n  cursor: pointer;\n}\n\nlabel > span.container.disabled,\nlabel > span.container.checked.disabled {\n  background-color: var(--color-disabled01);\n  cursor: default;\n}\n\nlabel > span.container.checked.disabled > span.circle > z-icon {\n  fill: var(--color-disabled01);\n}\n\nlabel > span.container.checked {\n  background-color: var(--color-primary01);\n  fill: var(--color-primary01);\n}\n\ninput:focus:focus-visible + label > span.container:not(.disabled) {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\ninput:focus:focus-visible + label > span.container.disabled {\n  outline: none;\n}\n\nlabel > span.container:not(.disabled):hover {\n  background-color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\nlabel > span.container > span.circle {\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  display: flex;\n  width: calc(var(--space-unit) * 2);\n  height: calc(var(--space-unit) * 2);\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  background-color: var(--color-white);\n  border-radius: 7px;\n  box-shadow: var(--shadow-1);\n  transition: transform 0.3s ease;\n}\n\nlabel > span.container.checked > span.circle {\n  transform: translateX(calc(100% - 2px));\n}\n\ninput[type=\"checkbox\"] {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n  pointer-events: none;\n}\n","import {Component, Prop, h, Event, EventEmitter, Host} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport {LabelPosition} from \"../../../beans\";\n\n@Component({\n  tag: \"z-toggle-switch\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZToggleSwitch {\n  /** Disabled flag */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** Label position */\n  @Prop({reflect: true})\n  labelPosition? = LabelPosition.LEFT;\n\n  /** Checked state */\n  @Prop({mutable: true})\n  checked?: boolean = false;\n\n  /** HTML id attribute to set to the internal checkbox */\n  @Prop()\n  htmlid = `toggle-switch-id-${randomId()}`;\n\n  /** Toggle click event */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    this.toggleClick.emit({\n      id: this.htmlid,\n      checked: this.checked,\n    });\n  }\n\n  private handleClick(ev): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checked = ev.target.checked;\n    this.emitToggleClick();\n  }\n\n  render(): HTMLZToggleSwitchElement {\n    return (\n      <Host>\n        <input\n          id={this.htmlid}\n          type=\"checkbox\"\n          checked={this.checked}\n          disabled={this.disabled}\n          onChange={this.handleClick.bind(this)}\n        />\n        <label\n          htmlFor={this.htmlid}\n          class={{\n            [this.labelPosition]: true,\n            disabled: this.disabled,\n          }}\n        >\n          <span>\n            <slot />\n          </span>\n          <span\n            class={{\n              container: true,\n              disabled: this.disabled,\n              checked: this.checked,\n            }}\n          >\n            <span class=\"circle\">\n              {this.checked && (\n                <z-icon\n                  width={12}\n                  height={12}\n                  name=\"checkmark\"\n                ></z-icon>\n              )}\n            </span>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yJAAA,MAAMA,EAAY,o5EAClB,MAAAC,EAAeD,E,MCSFE,EAAa,M,gFAGH,M,mBAIJC,EAAcC,K,aAIX,M,YAIX,oBAAoBC,K,CAMrB,eAAAC,GACNC,KAAKC,YAAYC,KAAK,CACpBC,GAAIH,KAAKI,OACTC,QAASL,KAAKK,S,CAIV,WAAAC,CAAYC,GAClB,GAAIP,KAAKQ,SAAU,CACjB,M,CAGFR,KAAKK,QAAUE,EAAGE,OAAOJ,QACzBL,KAAKD,iB,CAGP,MAAAW,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,SAAAE,IAAA,2CACEV,GAAIH,KAAKI,OACTU,KAAK,WACLT,QAASL,KAAKK,QACdG,SAAUR,KAAKQ,SACfO,SAAUf,KAAKM,YAAYU,KAAKhB,QAElCW,EAAA,SAAAE,IAAA,2CACEI,QAASjB,KAAKI,OACdc,MAAO,CACL,CAAClB,KAAKmB,eAAgB,KACtBX,SAAUR,KAAKQ,WAGjBG,EAAA,QAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CACEK,MAAO,CACLE,UAAW,KACXZ,SAAUR,KAAKQ,SACfH,QAASL,KAAKK,UAGhBM,EAAA,QAAAE,IAAA,2CAAMK,MAAM,UACTlB,KAAKK,SACJM,EAAA,UACEU,MAAO,GACPC,OAAQ,GACRC,KAAK,iB"}

package/www/build/p-67450112.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as a,a as n,g as o}from"./p-10bb4f4b.js";import{I as s}from"./p-025f494e.js";const e="z-pagination{--z-pagination--page-button-width:64px;--z-pagination--pages-container-max-width:100%;display:flex;max-width:100%;flex-flow:column wrap;font-family:var(--font-family-sans);font-weight:var(--font-rg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4)}z-pagination,z-pagination *{box-sizing:border-box}z-pagination button{height:100%}z-pagination z-icon{fill:var(--color-icon01)}z-pagination *:disabled z-icon{fill:var(--color-disabled02)}z-pagination .page-label{margin-right:calc(var(--space-unit) * 3);color:var(--color-text02)}z-pagination .pagination-bar{display:flex;max-width:100%;height:48px;align-items:center}z-pagination .pagination-bar button{display:flex;align-items:center;justify-content:center;border:none;margin:0;background-color:var(--color-surface03);color:var(--color-primary01);cursor:pointer;font-family:inherit;font-weight:inherit;transition:background-color 0.15s ease-out, color 0.15s ease-out, border-bottom-color 0.15s ease-out,\n    font-size 0.15s ease-in-out, font-weight 0.15s ease-in-out}z-pagination .pagination-bar button:focus-visible{background-color:var(--color-hover-surface);box-shadow:inset var(--shadow-focus-primary);outline:none}z-pagination .pagination-bar .pagination-button{padding:calc(var(--space-unit) * 2);font-weight:var(--font-sb);text-transform:uppercase;white-space:nowrap}z-pagination .pagination-bar .navigation-button{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5)}z-pagination .pagination-bar .pagination-button:disabled,z-pagination .pagination-bar .navigation-button:disabled{background-color:var(--color-disabled01);color:var(--color-disabled02);cursor:default;pointer-events:none}z-pagination .pagination-bar .page-button,z-pagination .pagination-bar .ellipsis-button{width:var(--z-pagination--page-button-width)}z-pagination .pages-container{position:relative;display:inline-flex;max-width:100%;height:100%;overflow-x:auto;scroll-behavior:smooth;scroll-snap-align:center;scrollbar-width:none}z-pagination .pages-container::-webkit-scrollbar{display:none}z-pagination .pages-chunk{display:flex;scroll-snap-align:center}z-pagination .pagination-bar .page-button{padding-top:var(--border-size-large) solid transparent;border-bottom:var(--border-size-large) solid transparent;font-size:var(--font-size-2);font-weight:var(--font-sb)}z-pagination .pagination-bar .page-button:focus-visible{border-bottom-color:var(--color-hover-light)}z-pagination .pagination-bar .page-button[data-current]{border-bottom-color:var(--color-primary01);font-size:var(--font-size-7)}z-pagination .go-to-page{display:flex;flex-direction:column;row-gap:var(--space-unit)}z-pagination .go-to-page .label{color:var(--color-text02);text-transform:uppercase}z-pagination .go-to-page .inputs{display:flex;column-gap:var(--space-unit)}z-pagination .go-to-page .inputs z-input{width:calc(var(--space-unit) * 11)}z-pagination .go-to-page .inputs z-input input,z-pagination .mobile-go-to-page z-input input{padding:0 calc(var(--space-unit) * 1.5) !important;appearance:none}z-pagination .mobile-go-to-page{display:flex;height:100%;flex:1 auto;align-items:center;justify-content:center;background-color:var(--color-surface03)}z-pagination .mobile-go-to-page z-input{width:var(--z-pagination--page-button-width);margin-right:var(--space-unit)}z-pagination .mobile-go-to-page z-input input{text-align:center}z-pagination .mobile-go-to-page z-input input::-webkit-outer-spin-button,z-pagination .mobile-go-to-page z-input input::-webkit-inner-spin-button{appearance:none}z-pagination .mobile-go-to-page>span{font-size:var(--font-size-2)}@media (hover: hover){z-pagination .pagination-bar button:hover{background-color:var(--color-hover-surface)}z-pagination .pagination-bar .page-button:hover{border-bottom-color:var(--color-hover-light)}}@media (min-width: 768px){z-pagination{--z-pagination--page-button-width:88px;flex-direction:row;align-items:flex-end}z-pagination .pages-container{max-width:var(--z-pagination--pages-container-max-width)}}";const r=e;const h=class{constructor(a){t(this,a);this.pageChanged=i(this,"pageChanged",7);this.label=undefined;this.navArrows=true;this.totalPages=undefined;this.skip=0;this.edges=false;this.split=undefined;this.visiblePages=undefined;this.currentPage=1;this.goToPage=undefined;this._visiblePages=this.visiblePages;this.isMobile=false;this.goToPageValue=null}setPagesContainerWidth(){if(!this._visiblePages||this.split){this.host.style.setProperty("--z-pagination--pages-container-max-width","100%");return}const t=window.getComputedStyle(this.host);const i=t.getPropertyValue("--z-pagination--page-button-width");this.host.style.setProperty("--z-pagination--pages-container-max-width",`calc(${i} * ${this._visiblePages})`)}setVisiblePages(){this._visiblePages=Math.min(this.visiblePages||this.totalPages,this.totalPages)}onPageChanged(){this.pageChanged.emit(this.currentPage);this.scrollToPage()}onSplitChanged(){if(this.split){this.edges=false}}onResize(){this.setMobile()}setMobile(){const t="screen and (max-width: 767px)";this.isMobile=window.matchMedia(t).matches}getPagesChunks(){const t=Array.from({length:this.totalPages},((t,i)=>i+1));const i=[];const a=Math.ceil(t.length/this._visiblePages);for(let n=0;n<a;n++){i.push(t.slice(n*this._visiblePages,(n+1)*this._visiblePages))}return i}scrollToPage(){const t=this.host.querySelector(`[data-page="${this.currentPage}"]`);if(!t){return}t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})}selectPage(t){this.currentPage=Math.min(Math.max(t,1),this.totalPages)}renderPage(t){return a("button",{class:"page-button",type:"button","aria-current":this.currentPage===t?"page":"false",title:`Vai alla pagina ${t}`,"data-page":t,"data-current":this.currentPage===t,onClick:()=>this.selectPage(t)},t)}renderEllipsisButton(t){return a("button",{class:"ellipsis-button",type:"button",title:`Vai alla pagina ${t}`,onClick:()=>this.selectPage(t)},"…")}renderPages(){const t=this.getPagesChunks();if(t.length<=0){return}return t.map((t=>a("div",{class:"pages-chunk"},t.map((t=>this.renderPage(t))))))}renderSplitPages(){if(this.totalPages<=this.split*2+5){return Array.from({length:this.totalPages},((t,i)=>this.renderPage(i+1)))}if(this.currentPage<=this.split*2+2){return[...Array.from({length:this.split*2+3},((t,i)=>this.renderPage(i+1))),this.renderEllipsisButton(this.split*2+4),this.renderPage(this.totalPages)]}if(this.currentPage>this.split*2+2&&this.currentPage<this.totalPages-this.split*2-1){return[this.renderPage(1),this.renderEllipsisButton(this.currentPage-this.split-1),...Array.from({length:this.split*2+1},((t,i)=>this.renderPage(this.currentPage-this.split+i))),this.renderEllipsisButton(this.currentPage+this.split+1),this.renderPage(this.totalPages)]}return[this.renderPage(1),this.renderEllipsisButton(this.totalPages-this.split*2-3),...Array.from({length:this.split*2+3},((t,i)=>this.renderPage(this.totalPages-this.split*2-2+i)))]}renderBackButton(){return a("button",{class:"navigation-button",type:"button",title:"Vai alla pagina precedente",disabled:this.currentPage===1,onClick:()=>this.selectPage(this.currentPage-1)},a("z-icon",{name:"chevron-left"}))}renderForwardButton(){return a("button",{class:"navigation-button",type:"button",title:"Vai alla prossima pagina",disabled:this.currentPage===this.totalPages,onClick:()=>this.selectPage(this.currentPage+1)},a("z-icon",{name:"chevron-right"}))}renderMobile(){const t=this.getPagesChunks();return[this.label&&a("span",{class:"page-label body-1-sb"},this.label),a("div",{class:"pagination-bar"},this.renderBackButton(),!this.goToPage&&a("div",{class:"pages-container",role:"navigation",tabIndex:-1},t.length>0&&t.map((t=>a("div",{class:"pages-chunk"},t.map((t=>this.renderPage(t))))))),this.goToPage&&a("form",{class:"mobile-go-to-page",onSubmit:t=>{t.preventDefault();this.selectPage(this.goToPageValue)}},a("z-input",{class:"go-to-page-input",type:s.NUMBER,min:1,max:this.totalPages,message:false,onInput:t=>{this.goToPageValue=t.target.value},placeholder:this.currentPage.toString(),hasclearicon:false}),a("span",null,`/${this.totalPages}`)),this.renderForwardButton())]}componentDidLoad(){this.setVisiblePages()}componentDidRender(){if(this.split){this.edges=false}this.setPagesContainerWidth();this.setMobile()}render(){if(this.isMobile){return a(n,null,this.renderMobile())}return a(n,null,a("div",{class:"pagination-bar"},this.label&&a("span",{class:"page-label body-1-sb"},this.label),this.edges&&a("button",{class:"pagination-button",type:"button",title:"Vai alla pagina 1",disabled:this.currentPage===1,onClick:()=>this.selectPage(1)},"Pagina 1"),this.skip<this.totalPages&&this.skip>1&&a("button",{class:"pagination-button",type:"button",title:`Vai alla pagina ${this.currentPage-this.skip}`,disabled:this.currentPage<=this.skip,onClick:()=>this.selectPage(this.currentPage-this.skip)},"-",this.skip),this.navArrows&&this.renderBackButton(),a("div",{class:"pages-container",role:"navigation",tabIndex:-1},this.split?this.renderSplitPages():this.renderPages()),this.navArrows&&this.renderForwardButton(),this.skip<this.totalPages&&this.skip>1&&a("button",{class:"pagination-button",type:"button",title:`Vai alla pagina ${this.currentPage+this.skip}`,disabled:this.currentPage>this.totalPages-this.skip,onClick:()=>this.selectPage(this.currentPage+this.skip)},"+",this.skip),this.edges&&a("button",{class:"pagination-button",type:"button",title:`Vai alla pagina ${this.totalPages}`,disabled:this.currentPage===this.totalPages,onClick:()=>this.selectPage(this.totalPages)},"Pagina ",this.totalPages)),this.goToPage&&a("div",{class:"go-to-page"},a("span",{class:"label body-5-sb"},"Vai a pagina:"),a("div",{class:"inputs"},a("z-input",{class:"go-to-page-input",type:s.NUMBER,min:1,max:this.totalPages,message:false,placeholder:"2",hasclearicon:false,onInput:t=>{this.goToPageValue=t.target.value},onKeyDown:t=>t.key==="Enter"&&this.selectPage(this.goToPageValue)}),a("z-button",{disabled:!this.goToPageValue,title:"Vai alla pagina inserita",onClick:()=>this.selectPage(this.goToPageValue)},"vai"))))}get host(){return o(this)}static get watchers(){return{_visiblePages:["setPagesContainerWidth"],visiblePages:["setVisiblePages"],currentPage:["onPageChanged"],split:["onSplitChanged"]}}};h.style=r;export{h as z_pagination};
-//# sourceMappingURL=p-67450112.entry.js.map

package/www/build/p-67450112.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZPaginationStyle0","ZPagination","this","visiblePages","setPagesContainerWidth","_visiblePages","split","host","style","setProperty","pagesContainerStyle","window","getComputedStyle","pageButtonWidth","getPropertyValue","setVisiblePages","Math","min","totalPages","onPageChanged","pageChanged","emit","currentPage","scrollToPage","onSplitChanged","edges","onResize","setMobile","mobileMediaQuery","isMobile","matchMedia","matches","getPagesChunks","pages","Array","from","length","_","i","chunks","chunksCount","ceil","index","push","slice","pageBtn","querySelector","scrollIntoView","behavior","block","inline","selectPage","page","max","renderPage","h","class","type","title","onClick","renderEllipsisButton","renderPages","pagesChunks","map","chunk","renderSplitPages","renderBackButton","disabled","name","renderForwardButton","renderMobile","label","goToPage","role","tabIndex","onSubmit","ev","preventDefault","goToPageValue","InputType","NUMBER","message","onInput","target","value","placeholder","toString","hasclearicon","componentDidLoad","componentDidRender","render","Host","skip","navArrows","onKeyDown","key"],"sources":["src/components/z-pagination/styles.css?tag=z-pagination","src/components/z-pagination/index.tsx"],"sourcesContent":["z-pagination {\n  --z-pagination--page-button-width: 64px;\n  --z-pagination--pages-container-max-width: 100%;\n\n  display: flex;\n  max-width: 100%;\n  flex-flow: column wrap;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);\n}\n\nz-pagination,\nz-pagination * {\n  box-sizing: border-box;\n}\n\nz-pagination button {\n  height: 100%;\n}\n\nz-pagination z-icon {\n  fill: var(--color-icon01);\n}\n\nz-pagination *:disabled z-icon {\n  fill: var(--color-disabled02);\n}\n\nz-pagination .page-label {\n  margin-right: calc(var(--space-unit) * 3);\n  color: var(--color-text02);\n}\n\nz-pagination .pagination-bar {\n  display: flex;\n  max-width: 100%;\n  height: 48px;\n  align-items: center;\n}\n\nz-pagination .pagination-bar button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  margin: 0;\n  background-color: var(--color-surface03);\n  color: var(--color-primary01);\n  cursor: pointer;\n  font-family: inherit;\n  font-weight: inherit;\n  transition: background-color 0.15s ease-out, color 0.15s ease-out, border-bottom-color 0.15s ease-out,\n    font-size 0.15s ease-in-out, font-weight 0.15s ease-in-out;\n}\n\nz-pagination .pagination-bar button:focus-visible {\n  background-color: var(--color-hover-surface);\n  box-shadow: inset var(--shadow-focus-primary);\n  outline: none;\n}\n\nz-pagination .pagination-bar .pagination-button {\n  padding: calc(var(--space-unit) * 2);\n  font-weight: var(--font-sb);\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\nz-pagination .pagination-bar .navigation-button {\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5);\n}\n\nz-pagination .pagination-bar .pagination-button:disabled,\nz-pagination .pagination-bar .navigation-button:disabled {\n  background-color: var(--color-disabled01);\n  color: var(--color-disabled02);\n  cursor: default;\n  pointer-events: none;\n}\n\nz-pagination .pagination-bar .page-button,\nz-pagination .pagination-bar .ellipsis-button {\n  width: var(--z-pagination--page-button-width);\n}\n\nz-pagination .pages-container {\n  position: relative;\n  display: inline-flex;\n  max-width: 100%;\n  height: 100%;\n  overflow-x: auto;\n  scroll-behavior: smooth;\n  scroll-snap-align: center;\n\n  /* hide scrollbar in Firefox */\n  scrollbar-width: none;\n}\n\nz-pagination .pages-container::-webkit-scrollbar {\n  display: none;\n}\n\nz-pagination .pages-chunk {\n  display: flex;\n  scroll-snap-align: center;\n}\n\nz-pagination .pagination-bar .page-button {\n  padding-top: var(--border-size-large) solid transparent;\n  border-bottom: var(--border-size-large) solid transparent;\n  font-size: var(--font-size-2);\n  font-weight: var(--font-sb);\n}\n\nz-pagination .pagination-bar .page-button:focus-visible {\n  border-bottom-color: var(--color-hover-light);\n}\n\nz-pagination .pagination-bar .page-button[data-current] {\n  border-bottom-color: var(--color-primary01);\n  font-size: var(--font-size-7);\n}\n\nz-pagination .go-to-page {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--space-unit);\n}\n\nz-pagination .go-to-page .label {\n  color: var(--color-text02);\n  text-transform: uppercase;\n}\n\nz-pagination .go-to-page .inputs {\n  display: flex;\n  column-gap: var(--space-unit);\n}\n\nz-pagination .go-to-page .inputs z-input {\n  width: calc(var(--space-unit) * 11);\n}\n\nz-pagination .go-to-page .inputs z-input input,\nz-pagination .mobile-go-to-page z-input input {\n  padding: 0 calc(var(--space-unit) * 1.5) !important;\n  appearance: none;\n}\n\nz-pagination .mobile-go-to-page {\n  display: flex;\n  height: 100%;\n  flex: 1 auto;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--color-surface03);\n}\n\nz-pagination .mobile-go-to-page z-input {\n  width: var(--z-pagination--page-button-width);\n  margin-right: var(--space-unit);\n}\n\nz-pagination .mobile-go-to-page z-input input {\n  text-align: center;\n}\n\nz-pagination .mobile-go-to-page z-input input::-webkit-outer-spin-button,\nz-pagination .mobile-go-to-page z-input input::-webkit-inner-spin-button {\n  appearance: none;\n}\n\nz-pagination .mobile-go-to-page > span {\n  font-size: var(--font-size-2);\n}\n\n@media (hover: hover) {\n  z-pagination .pagination-bar button:hover {\n    background-color: var(--color-hover-surface);\n  }\n\n  z-pagination .pagination-bar .page-button:hover {\n    border-bottom-color: var(--color-hover-light);\n  }\n}\n\n@media (min-width: 768px) {\n  z-pagination {\n    --z-pagination--page-button-width: 88px;\n\n    flex-direction: row;\n    align-items: flex-end;\n  }\n\n  z-pagination .pages-container {\n    max-width: var(--z-pagination--pages-container-max-width);\n  }\n}\n","import {Component, Prop, h, Element, Event, EventEmitter, Watch, State, Listen, Host} from \"@stencil/core\";\nimport {InputType} from \"../../beans\";\n\n/**\n * Pagination bar component.\n */\n@Component({\n  tag: \"z-pagination\",\n  styleUrl: \"styles.css\",\n})\nexport class ZPagination {\n  @Element() host: HTMLZPaginationElement;\n\n  /** Pagination label placed before the bar. */\n  @Prop()\n  label?: string;\n\n  /** Enable navigation arrows. */\n  @Prop()\n  navArrows = true;\n\n  /** Total number of pages. Required. */\n  @Prop()\n  totalPages!: number;\n\n  /** Number of pages to skip. */\n  @Prop()\n  skip = 0;\n\n  /** Enable buttons to go to the first and last pages. */\n  @Prop()\n  edges = false;\n\n  /** Number of pages to show left/right of the current, before showing \"load more\" symbol (…). */\n  @Prop()\n  split?: number;\n\n  /** Number of pages to show at a time. If not set, all pages will be shown. */\n  @Prop()\n  visiblePages?: number;\n\n  /** Current page. */\n  @Prop({mutable: true})\n  currentPage = 1;\n\n  /** Whether to show \"go to page\" feature. */\n  @Prop()\n  goToPage: boolean;\n\n  /**\n   * Internal visible pages variable.\n   * Needed to better handle conflicting props like `visiblePages` and `split`.\n   * This state will change based on props values and validation,\n   * keeping original `visiblePages` value intact.\n   */\n  @State()\n  private _visiblePages = this.visiblePages;\n\n  /** Used to hides/change some functionalities on smaller screen sizes */\n  @State()\n  isMobile = false;\n\n  /** Value of the go to page input */\n  @State()\n  goToPageValue = null;\n\n  /** Event emitted when the current page has changed. */\n  @Event()\n  pageChanged: EventEmitter;\n\n  /**\n   * Set the max width of the pages container.\n   */\n  @Watch(\"_visiblePages\")\n  setPagesContainerWidth(): void {\n    if (!this._visiblePages || this.split) {\n      this.host.style.setProperty(\"--z-pagination--pages-container-max-width\", \"100%\");\n\n      return;\n    }\n\n    const pagesContainerStyle = window.getComputedStyle(this.host);\n    const pageButtonWidth = pagesContainerStyle.getPropertyValue(\"--z-pagination--page-button-width\");\n    this.host.style.setProperty(\n      \"--z-pagination--pages-container-max-width\",\n      `calc(${pageButtonWidth} * ${this._visiblePages})`\n    );\n  }\n\n  /**\n   * Set visible pages.\n   * Ensure that the visible pages are always <= the total pages.\n   * If `visiblePages` isn't set, fallback to the total pages.\n   */\n  @Watch(\"visiblePages\")\n  setVisiblePages(): void {\n    this._visiblePages = Math.min(this.visiblePages || this.totalPages, this.totalPages);\n  }\n\n  /**\n   * On page changed.\n   * @emits pageChanged\n   */\n  @Watch(\"currentPage\")\n  onPageChanged(): void {\n    this.pageChanged.emit(this.currentPage);\n    this.scrollToPage();\n  }\n\n  /**\n   * On split changed.\n   * Empty `edges` value. The split feature wins over the pages chunks and edges.\n   */\n  @Watch(\"split\")\n  onSplitChanged(): void {\n    if (this.split) {\n      this.edges = false;\n    }\n  }\n\n  /**\n   * Hide stuff on mobile.\n   */\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  onResize(): void {\n    this.setMobile();\n  }\n\n  /**\n   * Set functionalities according to screen size.\n   */\n  private setMobile(): void {\n    const mobileMediaQuery = \"screen and (max-width: 767px)\";\n    this.isMobile = window.matchMedia(mobileMediaQuery).matches;\n  }\n\n  /**\n   * Get a list of pages chunks, each of `visiblePages` length.\n   * @returns {number[][]}\n   */\n  private getPagesChunks(): number[][] {\n    // array of numbers from 1 to `totalPages`\n    const pages = Array.from({length: this.totalPages}, (_, i) => i + 1);\n\n    const chunks = [];\n    const chunksCount = Math.ceil(pages.length / this._visiblePages);\n    for (let index = 0; index < chunksCount; index++) {\n      chunks.push(pages.slice(index * this._visiblePages, (index + 1) * this._visiblePages));\n    }\n\n    return chunks;\n  }\n\n  /**\n   * Scroll to the left the chunk of pages containing the current page.\n   */\n  private scrollToPage(): void {\n    const pageBtn = this.host.querySelector(`[data-page=\"${this.currentPage}\"]`) as HTMLElement;\n\n    if (!pageBtn) {\n      return;\n    }\n\n    pageBtn.scrollIntoView({\n      behavior: \"smooth\",\n      block: \"nearest\",\n      inline: \"center\",\n    });\n  }\n\n  /**\n   * Select a page.\n   * Do validations on the passed value before assigning it to `currentPage`.\n   * @param {number} page Page number to set\n   */\n  private selectPage(page): void {\n    this.currentPage = Math.min(Math.max(page, 1), this.totalPages);\n  }\n\n  /**\n   * Render page number button.\n   * @param {number} page Page number to render\n   * @returns {HTMLButtonElement}\n   */\n  private renderPage(page): HTMLButtonElement {\n    return (\n      <button\n        class=\"page-button\"\n        type=\"button\"\n        aria-current={this.currentPage === page ? \"page\" : \"false\"}\n        title={`Vai alla pagina ${page}`}\n        data-page={page}\n        data-current={this.currentPage === page}\n        onClick={() => this.selectPage(page)}\n      >\n        {page}\n      </button>\n    );\n  }\n\n  /**\n   * Render split button.\n   * @param {number} page Page to select on click.\n   * @returns {HTMLButtonElement}\n   */\n  private renderEllipsisButton(page): HTMLButtonElement {\n    return (\n      <button\n        class=\"ellipsis-button\"\n        type=\"button\"\n        title={`Vai alla pagina ${page}`}\n        onClick={() => this.selectPage(page)}\n      >\n        …\n      </button>\n    );\n  }\n\n  /**\n   * Render chunked page buttons.\n   * @returns {HTMLDivElement[]}\n   */\n  private renderPages(): HTMLDivElement[] {\n    const pagesChunks = this.getPagesChunks();\n    if (pagesChunks.length <= 0) {\n      return;\n    }\n\n    return pagesChunks.map((chunk) => <div class=\"pages-chunk\">{chunk.map((page) => this.renderPage(page))}</div>);\n  }\n\n  /**\n   * Render page buttons when split feature is enabled.\n   * @returns {HTMLButtonElement[]}\n   */\n  private renderSplitPages(): HTMLButtonElement[] {\n    // left and right split pages, current page, first and last page, left and right ellipsis button\n    if (this.totalPages <= this.split * 2 + 5) {\n      // Too few pages: ellipsis will never be rendered, so let's just render all pages and that's it.\n      return Array.from({length: this.totalPages}, (_, i) => this.renderPage(i + 1));\n    }\n\n    if (this.currentPage <= this.split * 2 + 2) {\n      // Render first (2 * split + 3) pages, ellipsis, then last page.\n      return [\n        ...Array.from({length: this.split * 2 + 3}, (_, i) => this.renderPage(i + 1)),\n        this.renderEllipsisButton(this.split * 2 + 4),\n        this.renderPage(this.totalPages),\n      ];\n    }\n\n    if (this.currentPage > this.split * 2 + 2 && this.currentPage < this.totalPages - this.split * 2 - 1) {\n      // Render first page, ellipsis, current page surrounded by (split) pages both before and after, another ellipsis, then last page.\n      return [\n        this.renderPage(1),\n        this.renderEllipsisButton(this.currentPage - this.split - 1),\n        ...Array.from({length: this.split * 2 + 1}, (_, i) => this.renderPage(this.currentPage - this.split + i)),\n        this.renderEllipsisButton(this.currentPage + this.split + 1),\n        this.renderPage(this.totalPages),\n      ];\n    }\n\n    // Render first page, ellipsis, then last (2 * split + 3) pages.\n    return [\n      this.renderPage(1),\n      this.renderEllipsisButton(this.totalPages - this.split * 2 - 3),\n      ...Array.from({length: this.split * 2 + 3}, (_, i) => this.renderPage(this.totalPages - this.split * 2 - 2 + i)),\n    ];\n  }\n\n  private renderBackButton(): HTMLButtonElement {\n    return (\n      <button\n        class=\"navigation-button\"\n        type=\"button\"\n        title=\"Vai alla pagina precedente\"\n        disabled={this.currentPage === 1}\n        onClick={() => this.selectPage(this.currentPage - 1)}\n      >\n        <z-icon name=\"chevron-left\"></z-icon>\n      </button>\n    );\n  }\n\n  private renderForwardButton(): HTMLButtonElement {\n    return (\n      <button\n        class=\"navigation-button\"\n        type=\"button\"\n        title=\"Vai alla prossima pagina\"\n        disabled={this.currentPage === this.totalPages}\n        onClick={() => this.selectPage(this.currentPage + 1)}\n      >\n        <z-icon name=\"chevron-right\"></z-icon>\n      </button>\n    );\n  }\n\n  private renderMobile(): HTMLElement[] {\n    const pagesChunks = this.getPagesChunks();\n\n    return [\n      this.label && <span class=\"page-label body-1-sb\">{this.label}</span>,\n\n      <div class=\"pagination-bar\">\n        {this.renderBackButton()}\n\n        {!this.goToPage && (\n          <div\n            class=\"pages-container\"\n            role=\"navigation\"\n            tabIndex={-1}\n          >\n            {pagesChunks.length > 0 &&\n              pagesChunks.map((chunk) => <div class=\"pages-chunk\">{chunk.map((page) => this.renderPage(page))}</div>)}\n          </div>\n        )}\n\n        {this.goToPage && (\n          <form\n            class=\"mobile-go-to-page\"\n            onSubmit={(ev) => {\n              ev.preventDefault();\n              this.selectPage(this.goToPageValue);\n            }}\n          >\n            <z-input\n              class=\"go-to-page-input\"\n              type={InputType.NUMBER}\n              min={1}\n              max={this.totalPages}\n              message={false}\n              onInput={(ev: InputEvent) => {\n                this.goToPageValue = (ev.target as HTMLZInputElement).value;\n              }}\n              placeholder={this.currentPage.toString()}\n              hasclearicon={false}\n            ></z-input>\n            <span>{`/${this.totalPages}`}</span>\n          </form>\n        )}\n\n        {this.renderForwardButton()}\n      </div>,\n    ];\n  }\n\n  componentDidLoad(): void {\n    this.setVisiblePages();\n  }\n\n  componentDidRender(): void {\n    if (this.split) {\n      this.edges = false;\n    }\n\n    this.setPagesContainerWidth();\n    this.setMobile();\n  }\n\n  render(): HTMLZPaginationElement {\n    if (this.isMobile) {\n      return <Host>{this.renderMobile()}</Host>;\n    }\n\n    return (\n      <Host>\n        <div class=\"pagination-bar\">\n          {this.label && <span class=\"page-label body-1-sb\">{this.label}</span>}\n\n          {this.edges && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title=\"Vai alla pagina 1\"\n              disabled={this.currentPage === 1}\n              onClick={() => this.selectPage(1)}\n            >\n              Pagina 1\n            </button>\n          )}\n\n          {this.skip < this.totalPages && this.skip > 1 && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.currentPage - this.skip}`}\n              disabled={this.currentPage <= this.skip}\n              onClick={() => this.selectPage(this.currentPage - this.skip)}\n            >\n              -{this.skip}\n            </button>\n          )}\n\n          {this.navArrows && this.renderBackButton()}\n\n          <div\n            class=\"pages-container\"\n            role=\"navigation\"\n            tabIndex={-1}\n          >\n            {this.split ? this.renderSplitPages() : this.renderPages()}\n          </div>\n\n          {this.navArrows && this.renderForwardButton()}\n\n          {this.skip < this.totalPages && this.skip > 1 && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.currentPage + this.skip}`}\n              disabled={this.currentPage > this.totalPages - this.skip}\n              onClick={() => this.selectPage(this.currentPage + this.skip)}\n            >\n              +{this.skip}\n            </button>\n          )}\n\n          {this.edges && (\n            <button\n              class=\"pagination-button\"\n              type=\"button\"\n              title={`Vai alla pagina ${this.totalPages}`}\n              disabled={this.currentPage === this.totalPages}\n              onClick={() => this.selectPage(this.totalPages)}\n            >\n              Pagina {this.totalPages}\n            </button>\n          )}\n        </div>\n        {this.goToPage && (\n          <div class=\"go-to-page\">\n            <span class=\"label body-5-sb\">Vai a pagina:</span>\n            <div class=\"inputs\">\n              <z-input\n                class=\"go-to-page-input\"\n                type={InputType.NUMBER}\n                min={1}\n                max={this.totalPages}\n                message={false}\n                placeholder=\"2\"\n                hasclearicon={false}\n                onInput={(ev: InputEvent) => {\n                  this.goToPageValue = (ev.target as HTMLZInputElement).value;\n                }}\n                onKeyDown={(ev) => ev.key === \"Enter\" && this.selectPage(this.goToPageValue)}\n              ></z-input>\n              <z-button\n                disabled={!this.goToPageValue}\n                title=\"Vai alla pagina inserita\"\n                onClick={() => this.selectPage(this.goToPageValue)}\n              >\n                vai\n              </z-button>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/www/build/p-7c5b1265.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as n,a as i,g as o}from"./p-10bb4f4b.js";const a=':host,::slotted(*),*{box-sizing:border-box}:host{position:relative;display:inline-flex;flex-direction:column;--z-menu-label-color:var(--color-text01)}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{padding:0;border:0;margin:0;background:transparent;border-radius:0;color:inherit;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;padding-right:calc(var(--space-unit) * 0.5);padding-left:calc(var(--space-unit) * 0.5);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);box-shadow:var(--shadow-focus-primary)}.menu-label .menu-label-content{position:relative;display:flex;align-items:center}:host(:is([active],[open])) .menu-label-content,.menu-label:focus-within .menu-label-content{font-weight:var(--font-bd)}:host(:is([active],[open])) .menu-label-content ::slotted(*),.menu-label:focus-within .menu-label-content ::slotted(*){letter-spacing:normal}:host .menu-label .menu-label-content ::slotted(*:not([slot]):focus:focus-visible){box-shadow:none !important}:host(:is([active],[open],[vertical-context])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{position:absolute;bottom:0;left:0;width:100%;content:"";pointer-events:none}:host([vertical-context]) .menu-label-content::after{height:var(--border-size-small);background-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{height:var(--border-size-large);background-color:var(--color-secondary01)}::slotted([data-text])::after{height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}::slotted([data-text]){display:inline-flex;flex-direction:column}.menu-label .menu-label-content ::slotted(*){display:inline-flex;width:100%;margin:0;appearance:none;color:var(--z-menu-label-color);font-family:var(--font-family-sans);font-size:var(--font-size-5);font-weight:inherit;letter-spacing:0.36px;line-height:1.2;outline:none}.menu-label .menu-label-content ::slotted(*),.menu-label .menu-label-content z-icon{padding:var(--space-unit) 0}.menu-label .menu-label-content z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:currentcolor}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot="header"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot="header"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot="item"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25;outline:none}.items>::slotted([slot="item"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot="item"]:not(z-menu-section)){padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--color-surface05)}.items>::slotted([slot="item"]:hover),.items>::slotted([slot="item"]:focus:focus-visible),.items>::slotted([slot="item"]:active){border-color:var(--color-secondary01);font-weight:var(--font-bd)}';const s=a;const l=class{toggle(){if(!this.hasContent){return}this.open=!this.open;this.open?this.opened.emit():this.closed.emit()}handleClick(t){if(!this.floating||!this.open||this.hostElement.contains(t.target)){return}this.reflow();this.open=false;this.closed.emit()}onOpenChanged(){if(this.open){this.reflow(true)}else{cancelAnimationFrame(this.raf)}}constructor(n){t(this,n);this.opened=e(this,"opened",7);this.closed=e(this,"closed",7);this.active=undefined;this.floating=false;this.open=false;this.verticalContext=false;this.hasHeader=undefined;this.hasContent=undefined;this.toggle=this.toggle.bind(this);this.checkContent=this.checkContent.bind(this);this.onLabelSlotChange=this.onLabelSlotChange.bind(this);this.onItemsChange=this.onItemsChange.bind(this)}componentWillLoad(){this.checkContent()}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=e===null||e===void 0?void 0:e.textContent}reflow(t=false){if(this.content){const{style:t}=this.content;const{left:e}=this.hostElement.getBoundingClientRect();const n=getComputedStyle(this.content).width;const i=n?parseFloat(n.replace("px","")):375;const o=30;t.left=`${Math.min(window.innerWidth-e-i-o,0)}px`}if(t){this.raf=requestAnimationFrame(this.reflow.bind(this,t))}}checkContent(){this.hasHeader=!!this.hostElement.querySelectorAll("[slot=header]").length;this.hasContent=!!this.hostElement.querySelectorAll("[slot=item]").length||this.hasHeader}onItemsChange(){this.checkContent();const t=this.hostElement.querySelectorAll("[slot=item]");t.forEach((t=>{t.setAttribute("role","menuitem");t.dataset.text=t.textContent}))}renderMenuLabel(){if(this.hasContent){return n("button",{class:"menu-label","aria-expanded":this.open?"true":"false","aria-label":this.open?"Chiudi menù":"Apri menù",onClick:this.toggle},n("div",{class:"menu-label-content"},n("slot",{onSlotchange:this.onLabelSlotChange}),n("z-icon",{name:this.open?"chevron-up":"chevron-down"})))}return n("div",{class:"menu-label"},n("div",{class:"menu-label-content"},n("slot",{onSlotchange:this.onLabelSlotChange})))}render(){return n(i,{key:"f76898d2bf69ae311b8e0ae16ac15651a72aff19"},this.renderMenuLabel(),this.hasContent&&n("div",{class:"content",ref:t=>this.content=t},this.hasHeader&&n("header",{class:"header"},n("slot",{name:"header",onSlotchange:this.checkContent})),n("div",{class:"items",role:"menu"},n("slot",{name:"item",onSlotchange:this.onItemsChange}))))}get hostElement(){return o(this)}static get watchers(){return{open:["onOpenChanged"]}}};l.style=s;export{l as z_menu};
-//# sourceMappingURL=p-7c5b1265.entry.js.map

package/www/build/p-7c5b1265.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZMenuStyle0","ZMenu","toggle","this","hasContent","open","opened","emit","closed","handleClick","ev","floating","hostElement","contains","target","reflow","onOpenChanged","cancelAnimationFrame","raf","constructor","hostRef","bind","checkContent","onLabelSlotChange","onItemsChange","componentWillLoad","labelElement","assignedElements","dataset","text","textContent","live","content","style","left","getBoundingClientRect","widthPx","getComputedStyle","width","parseFloat","replace","safeScrollbarSpace","Math","min","window","innerWidth","requestAnimationFrame","hasHeader","querySelectorAll","length","items","forEach","item","setAttribute","renderMenuLabel","h","class","onClick","onSlotchange","name","render","Host","key","ref","el","role"],"sources":["src/components/navigation/z-menu/styles.css?tag=z-menu&encapsulation=shadow","src/components/navigation/z-menu/index.tsx"],"sourcesContent":[":host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n\n  --z-menu-label-color: var(--color-text01);\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-text01);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.menu-label {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  color: inherit;\n  outline: none;\n  text-align: left;\n}\n\nbutton.menu-label {\n  cursor: pointer;\n}\n\n.menu-label:focus-within {\n  z-index: 1;\n  padding-right: calc(var(--space-unit) * 0.5);\n  padding-left: calc(var(--space-unit) * 0.5);\n  margin-right: calc(var(--space-unit) * -0.5);\n  margin-left: calc(var(--space-unit) * -0.5);\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.menu-label .menu-label-content {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n:host(:is([active], [open])) .menu-label-content,\n.menu-label:focus-within .menu-label-content {\n  font-weight: var(--font-bd);\n}\n\n:host(:is([active], [open])) .menu-label-content ::slotted(*),\n.menu-label:focus-within .menu-label-content ::slotted(*) {\n  letter-spacing: normal;\n}\n\n:host .menu-label .menu-label-content ::slotted(*:not([slot]):focus:focus-visible) {\n  box-shadow: none !important;\n}\n\n/* border */\n:host(:is([active], [open], [vertical-context])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  content: \"\";\n  pointer-events: none;\n}\n\n:host([vertical-context]) .menu-label-content::after {\n  height: var(--border-size-small);\n  background-color: var(--color-surface03);\n}\n\n:host(:is([active], [open])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n  height: var(--border-size-large);\n  background-color: var(--color-secondary01);\n}\n\n/* Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  letter-spacing: normal;\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text])::after {\n    display: none;\n  }\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n.menu-label .menu-label-content ::slotted(*) {\n  display: inline-flex;\n  width: 100%;\n  margin: 0;\n  appearance: none;\n  color: var(--z-menu-label-color);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-5);\n  font-weight: inherit;\n  letter-spacing: 0.36px; /* increasing the letter spacing of the regular text helps reduce the size difference between regular and bold text */\n  line-height: 1.2;\n  outline: none;\n}\n\n.menu-label .menu-label-content ::slotted(*),\n.menu-label .menu-label-content z-icon {\n  padding: var(--space-unit) 0;\n}\n\n.menu-label .menu-label-content z-icon {\n  margin-left: calc(var(--space-unit) * 1.5);\n  fill: currentcolor;\n}\n\n.content {\n  background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n  display: none;\n}\n\n:host([floating]) .content {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 375px;\n  min-width: 100%;\n  max-width: 100vw;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n  box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n  width: 100%;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n  width: calc(var(--space-unit) * 11.25);\n  height: auto;\n  object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n  margin: auto 0;\n  margin-left: calc(var(--space-unit) * 2.5);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  line-height: 1.5;\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.25;\n  outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n  border-bottom: var(--border-size-small) solid var(--color-surface05);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active) {\n  border-color: var(--color-secondary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, h, Prop, State, Event, EventEmitter, Listen, Element, Watch, Host} from \"@stencil/core\";\n\n/**\n * @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n */\n@Component({\n  tag: \"z-menu\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenu {\n  @Element() hostElement: HTMLZMenuElement;\n\n  /** Flag to set the active status of the menu. */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Flag to set the display mode of the list.\n   * If true, the list will be absolutely positioned under the menu label,\n   * stacked beneath it otherwise.\n   */\n  @Prop({reflect: true})\n  floating? = false;\n\n  /** The opening state of the menu. */\n  @Prop({mutable: true, reflect: true})\n  open = false;\n\n  /**\n   * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).\n   * A small border is placed under it as a separator from other elements.\n   */\n  @Prop({reflect: true})\n  verticalContext = false;\n\n  @State()\n  hasHeader: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  private content: HTMLElement;\n\n  /** Animation frame request id. */\n  private raf: number;\n\n  /** The menu has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The menu has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the floating list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.floating || !this.open || this.hostElement.contains(ev.target as Element)) {\n      return;\n    }\n\n    this.reflow();\n    this.open = false;\n    this.closed.emit();\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (this.open) {\n      this.reflow(true);\n    } else {\n      cancelAnimationFrame(this.raf);\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.checkContent = this.checkContent.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.textContent;\n  }\n\n  /**\n   * Correctly set position of the floating menu in order to prevent overflow.\n   * @param live Should run the method on every refresh frame.\n   */\n  private reflow(live = false): void {\n    if (this.content) {\n      const {style} = this.content;\n      const {left} = this.hostElement.getBoundingClientRect();\n      const widthPx = getComputedStyle(this.content).width;\n      const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n      const safeScrollbarSpace = 30;\n      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n    }\n    if (live) {\n      this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n    }\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasHeader = !!this.hostElement.querySelectorAll(\"[slot=header]\").length;\n    this.hasContent = !!this.hostElement.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n  }\n\n  /**\n   * Set `menuitem` role to all menu items.\n   * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).\n   */\n  private onItemsChange(): void {\n    this.checkContent();\n    const items = this.hostElement.querySelectorAll<HTMLElement>(\"[slot=item]\");\n    items.forEach((item) => {\n      item.setAttribute(\"role\", \"menuitem\");\n      item.dataset.text = item.textContent;\n    });\n  }\n\n  private renderMenuLabel(): HTMLButtonElement | HTMLDivElement {\n    if (this.hasContent) {\n      return (\n        <button\n          class=\"menu-label\"\n          aria-expanded={this.open ? \"true\" : \"false\"}\n          aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n          onClick={this.toggle}\n        >\n          <div class=\"menu-label-content\">\n            <slot onSlotchange={this.onLabelSlotChange}></slot>\n            <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n          </div>\n        </button>\n      );\n    }\n\n    return (\n      <div class=\"menu-label\">\n        <div class=\"menu-label-content\">\n          <slot onSlotchange={this.onLabelSlotChange}></slot>\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLZMenuElement {\n    return (\n      <Host>\n        {this.renderMenuLabel()}\n\n        {this.hasContent && (\n          <div\n            class=\"content\"\n            ref={(el) => (this.content = el)}\n          >\n            {this.hasHeader && (\n              <header class=\"header\">\n                <slot\n                  name=\"header\"\n                  onSlotchange={this.checkContent}\n                ></slot>\n              </header>\n            )}\n\n            <div\n              class=\"items\"\n              role=\"menu\"\n            >\n              <slot\n                name=\"item\"\n                onSlotchange={this.onItemsChange}\n              ></slot>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/www/build/p-92aa1e0f.css

@@ -1,3 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,700;1,700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"); :root{--gray950:#121212;--gray900:#292929;--gray800:#3D3D3D;--gray700:#525252;--gray600:#666666;--gray500:#9B9B9B;--gray400:#ADADAD;--gray300:#C2C2C2;--gray200:#D6D6D6;--gray100:#EBEBEB;--gray50:#F6F6F6}:root{--blue950:#001229;--blue900:#001f46;--blue800:#002c63;--blue700:#003981;--blue600:#0047a0;--blue500:#0056c1;--blue400:#2e76ce;--blue300:#5893db;--blue200:#82b0e7;--blue100:#accdf3;--blue50:#d6eaff;--blue25:#ebf5ff}:root{--green950:#19200A;--green900:#22330A;--green800:#2B4808;--green700:#355D06;--green600:#407305;--green500:#568818;--green400:#6F9D2F;--green300:#8AB14A;--green200:#A6C66B;--green100:#C3DA92;--green50:#EFFCE0}:root{--yellow950:#33280F;--yellow900:#5C4615;--yellow800:#85641A;--yellow700:#AB8125;--yellow600:#D09E30;--yellow500:#F6BB3B;--yellow400:#F9C852;--yellow300:#FBD468;--yellow200:#FEE17F;--yellow150:#ffde72;--yellow100:#FFEA91;--yellow50:#FBF4E6}:root{--red950:#2A0005;--red900:#4C0009;--red800:#6F000D;--red700:#940111;--red600:#BA0115;--red500:#E2011A;--red400:#EB4F60;--red300:#EB4F60;--red200:#F49DA7;--red100:#F49DA7;--red50:#FDEFEE}:root{--avatar-C01:#99005B;--avatar-C02:#B01300;--avatar-C03:#E62200;--avatar-C04:#7C4000;--avatar-C05:#C25600;--avatar-C06:#6E6D6D;--avatar-C07:#667D00;--avatar-C08:#008741;--avatar-C09:#00612F;--avatar-C10:#007D8A;--avatar-C11:#007DB3;--avatar-C12:#00548C;--avatar-C13:#0028B1;--avatar-C14:#00019C;--avatar-C15:#6400EE;--avatar-C16:#5F3FFF;--avatar-C17:#8B00A5;--avatar-C18:#B200FF;--avatar-C19:#C700D6}:root{--subject-art:#C4C410;--subject-art_image:#C4C410;--subject-biology:#67C47F;--subject-chemistry:#C35598;--subject-civics:#000080;--subject-computer_science:#1AB956;--subject-earth_science:#8D3EB2;--subject-english:#F76C6C;--subject-food_science:#3F9176;--subject-french:#F76C6C;--subject-geography:#57C1DB;--subject-german:#F76C6C;--subject-grammar:#F87635;--subject-greek:#5BCBD9;--subject-history:#8B572A;--subject-law:#B90000;--subject-math:#266997;--subject-physics:#5A94C5;--subject-science_middle_school:#3A7922;--subject-spanish:#F76C6C;--subject-technology:#138473;--subject-topography:#F1AF24;--subject-technique:#752771}:root{--color-error-default:#7e0a00;--color-success-default:#417505;--color-warning-default:#F6BB3B;--color-black:#000000;--color-white:#FFFFFF}:root{--font-family-sans:"IBM Plex Sans", sans-serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25;letter-spacing:0}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28;letter-spacing:0}@media (max-width: 1151px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);line-height:1.333}}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333;letter-spacing:0}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4;letter-spacing:0}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4;letter-spacing:0}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5;letter-spacing:0}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5;letter-spacing:0}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:1.4;letter-spacing:0.16px}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);line-height:1.333;letter-spacing:0.32px}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5;letter-spacing:0}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);line-height:1.4;letter-spacing:0.16px}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);line-height:1.333;letter-spacing:0.32px}.helper,.helper-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);font-style:italic;line-height:1.333;letter-spacing:0.32px}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}:root{--space-unit:8px}:root{--shadow-color-base:rgba(66, 69, 72, 0.35);--shadow-inset-2:inset 0 2px 4px 0 var(--shadow-color-base);--shadow-inset-4:inset 0 4px 8px 0 var(--shadow-color-base);--shadow-0:0 0 0 0 var(--shadow-color-base);--shadow-1:0 1px 2px 0 var(--shadow-color-base);--shadow-2:0 2px 4px 0 var(--shadow-color-base);--shadow-3:0 3px 6px 0 var(--shadow-color-base);--shadow-4:0 4px 8px 0 var(--shadow-color-base);--shadow-6:0 6px 12px 0 var(--shadow-color-base);--shadow-8:0 8px 16px 0 var(--shadow-color-base);--shadow-12:0 12px 24px 0 var(--shadow-color-base);--shadow-16:0 16px 32px 0 var(--shadow-color-base);--shadow-24:0 24px 48px 0 var(--shadow-color-base)}:root{--border-no-radius:0;--border-size-small:1px;--border-size-medium:2px;--border-size-large:4px;--border-radius-small:2px;--border-radius:4px}:root{--grid-mobile-viewport:768px;--grid-mobile-column:4;--grid-mobile-margin:16px;--grid-mobile-gutter:16px;--grid-tablet-viewport:768px;--grid-tablet-column:8;--grid-tablet-margin:24px;--grid-tablet-gutter:24px;--grid-desktop-viewport:1152px;--grid-desktop-column:12;--grid-desktop-margin:24px;--grid-desktop-gutter:24px;--grid-wide-viewport:1366px;--grid-wide-column:12;--grid-wide-margin:32px;--grid-wide-gutter:32px;--page-max-width:1366px;--grid-margin:var(--grid-mobile-margin);--grid-gutter:var(--grid-mobile-gutter);--grid-columns:var(--grid-mobile-column)}@media (min-width: 768px) and (max-width: 1151px){:root{--grid-margin:var(--grid-tablet-margin);--grid-gutter:var(--grid-tablet-gutter);--grid-columns:var(--grid-tablet-column)}}@media (min-width: 1152px) and (max-width: 1365px){:root{--grid-margin:var(--grid-desktop-margin);--grid-gutter:var(--grid-desktop-gutter);--grid-columns:var(--grid-desktop-column)}}@media (min-width: 1366px){:root{--grid-margin:var(--grid-wide-margin);--grid-gutter:var(--grid-wide-gutter);--grid-columns:var(--grid-wide-column)}}.z-grid{display:grid;grid-template-columns:repeat(var(--grid-columns), 1fr);width:100%;column-gap:var(--grid-gutter);}.z-grid .col-full{grid-column:1/-1}.z-grid .col-1{grid-column:span 1}.z-grid .col-2{grid-column:span 2}.z-grid .col-3{grid-column:span 3}.z-grid .col-4,.z-grid .col-5,.z-grid .col-6,.z-grid .col-7,.z-grid .col-8,.z-grid .col-9,.z-grid .col-10,.z-grid .col-11,.z-grid .col-12{grid-column:span 4}.z-grid .col-start-1{grid-column-start:1}.z-grid .col-start-2{grid-column-start:2}.z-grid .col-start-3{grid-column-start:3}.z-grid .col-start-4,.z-grid .col-start-5,.z-grid .col-start-6,.z-grid .col-start-7,.z-grid .col-start-8,.z-grid .col-start-9,.z-grid .col-start-10,.z-grid .col-start-11,.z-grid .col-start-12{grid-column-start:4}.z-grid .-col-start-2{grid-column-start:-2}.z-grid .-col-start-3{grid-column-start:-3}.z-grid .-col-start-4{grid-column-start:-4}.z-grid .-col-start-5,.z-grid .-col-start-6,.z-grid .-col-start-7,.z-grid .-col-start-8,.z-grid .-col-start-9,.z-grid .-col-start-10,.z-grid .-col-start-11,.z-grid .-col-start-12,.z-grid .-col-start-13{grid-column-start:-5}.z-grid .col-end-last{grid-column-end:-1}.z-grid .col-end-2{grid-column-end:2}.z-grid .col-end-3{grid-column-end:3}.z-grid .col-end-4{grid-column-end:4}.z-grid .col-end-5,.z-grid .col-end-6,.z-grid .col-end-7,.z-grid .col-end-8,.z-grid .col-end-9,.z-grid .col-end-10,.z-grid .col-end-11,.z-grid .col-end-12,.z-grid .col-end-13{grid-column-end:5}.z-grid .-col-end-1{grid-column-end:-1}.z-grid .-col-end-2{grid-column-end:-2}.z-grid .-col-end-3{grid-column-end:-3}.z-grid .-col-end-4,.z-grid .-col-end-5,.z-grid .-col-end-6,.z-grid .-col-end-7,.z-grid .-col-end-8,.z-grid .-col-end-9,.z-grid .-col-end-10,.z-grid .-col-end-11,.z-grid .-col-end-12{grid-column-end:-4}@media (max-width: 767px){.z-grid .mobile-col-full{grid-column:1/-1}.z-grid .mobile-col-1{grid-column:span 1}.z-grid .mobile-col-2{grid-column:span 2}.z-grid .mobile-col-3{grid-column:span 3}.z-grid .mobile-col-4{grid-column:span 4}}@media (min-width: 768px){.z-grid .col-5{grid-column:span 5}.z-grid .col-6{grid-column:span 6}.z-grid .col-7{grid-column:span 7}.z-grid .col-8,.z-grid .col-9,.z-grid .col-10,.z-grid .col-11,.z-grid .col-12{grid-column:span 8}.z-grid .col-start-5{grid-column-start:5}.z-grid .col-start-6{grid-column-start:6}.z-grid .col-start-7{grid-column-start:7}.z-grid .col-start-8,.z-grid .col-start-9,.z-grid .col-start-10,.z-grid .col-start-11,.z-grid .col-start-12{grid-column-start:8}.z-grid .-col-start-6{grid-column-start:-6}.z-grid .-col-start-7{grid-column-start:-7}.z-grid .-col-start-8{grid-column-start:-8}.z-grid .-col-start-9,.z-grid .-col-start-10,.z-grid .-col-start-11,.z-grid .-col-start-12,.z-grid .-col-start-13{grid-column-start:-9}.z-grid .col-end-6{grid-column-end:6}.z-grid .col-end-7{grid-column-end:7}.z-grid .col-end-8{grid-column-end:8}.z-grid .col-end-9,.z-grid .col-end-10,.z-grid .col-end-11,.z-grid .col-end-12,.z-grid .col-end-13{grid-column-end:9}.z-grid .-col-end-5{grid-column-end:-5}.z-grid .-col-end-6{grid-column-end:-6}.z-grid .-col-end-7{grid-column-end:-7}.z-grid .-col-end-8,.z-grid .-col-end-9,.z-grid .-col-end-10,.z-grid .-col-end-11,.z-grid .-col-end-12{grid-column-end:-8}}@media (min-width: 768px) and (max-width: 1151px){.z-grid .tablet-col-full{grid-column:1/-1}.z-grid .tablet-col-1{grid-column:span 1}.z-grid .tablet-col-2{grid-column:span 2}.z-grid .tablet-col-3{grid-column:span 3}.z-grid .tablet-col-4{grid-column:span 4}.z-grid .tablet-col-5{grid-column:span 5}.z-grid .tablet-col-6{grid-column:span 6}.z-grid .tablet-col-7{grid-column:span 7}.z-grid .tablet-col-8{grid-column:span 8}.z-grid .tablet-col-start-1{grid-column-start:1}.z-grid .tablet-col-start-2{grid-column-start:2}.z-grid .tablet-col-start-3{grid-column-start:3}.z-grid .tablet-col-start-4{grid-column-start:4}.z-grid .tablet-col-start-5{grid-column-start:5}.z-grid .tablet-col-start-6{grid-column-start:6}.z-grid .tablet-col-start-7{grid-column-start:7}.z-grid .tablet-col-start-8{grid-column-start:8}.z-grid .-tablet-col-start-2{grid-column-start:-2}.z-grid .-tablet-col-start-3{grid-column-start:-3}.z-grid .-tablet-col-start-4{grid-column-start:-4}.z-grid .-tablet-col-start-5{grid-column-start:-5}.z-grid .-tablet-col-start-6{grid-column-start:-6}.z-grid .-tablet-col-start-7{grid-column-start:-7}.z-grid .-tablet-col-start-8{grid-column-start:-8}.z-grid .tablet-col-end-2{grid-column-end:2}.z-grid .tablet-col-end-3{grid-column-end:3}.z-grid .tablet-col-end-4{grid-column-end:4}.z-grid .tablet-col-end-6{grid-column-end:6}.z-grid .tablet-col-end-7{grid-column-end:7}.z-grid .tablet-col-end-8{grid-column-end:8}.z-grid .tablet-col-end-last{grid-column-end:-1}.z-grid .-tablet-col-end-1{grid-column-end:-1}.z-grid .-tablet-col-end-2{grid-column-end:-2}.z-grid .-tablet-col-end-3{grid-column-end:-3}.z-grid .-tablet-col-end-4{grid-column-end:-4}.z-grid .-tablet-col-end-5{grid-column-end:-5}.z-grid .-tablet-col-end-6{grid-column-end:-6}.z-grid .-tablet-col-end-7{grid-column-end:-7}.z-grid .-tablet-col-end-8{grid-column-end:-8}}@media (min-width: 1152px){.z-grid .col-9{grid-column:span 9}.z-grid .col-10{grid-column:span 10}.z-grid .col-11{grid-column:span 11}.z-grid .col-12{grid-column:span 12}.z-grid .col-start-9{grid-column-start:9}.z-grid .col-start-10{grid-column-start:10}.z-grid .col-start-11{grid-column-start:11}.z-grid .col-start-12{grid-column-start:12}.z-grid .-col-start-10{grid-column-start:-10}.z-grid .-col-start-11{grid-column-start:-11}.z-grid .-col-start-12{grid-column-start:-12}.z-grid .-col-start-13{grid-column-start:-13}.z-grid .col-end-10{grid-column-end:10}.z-grid .col-end-11{grid-column-end:11}.z-grid .col-end-12{grid-column-end:12}.z-grid .col-end-13{grid-column-end:13}.z-grid .-col-end-9{grid-column-end:-9}.z-grid .-col-end-10{grid-column-end:-10}.z-grid .-col-end-11{grid-column-end:-11}.z-grid .-col-end-12{grid-column-end:-12}}@media (min-width: 1152px) and (max-width: 1365px){.z-grid .desktop-col-full{grid-column:1/-1}.z-grid .desktop-col-1{grid-column:span 1}.z-grid .desktop-col-2{grid-column:span 2}.z-grid .desktop-col-3{grid-column:span 3}.z-grid .desktop-col-4{grid-column:span 4}.z-grid .desktop-col-5{grid-column:span 5}.z-grid .desktop-col-6{grid-column:span 6}.z-grid .desktop-col-7{grid-column:span 7}.z-grid .desktop-col-8{grid-column:span 8}.z-grid .desktop-col-9{grid-column:span 9}.z-grid .desktop-col-10{grid-column:span 10}.z-grid .desktop-col-11{grid-column:span 11}.z-grid .desktop-col-12{grid-column:span 12}.z-grid .desktop-col-start-1{grid-column-start:1}.z-grid .desktop-col-start-2{grid-column-start:2}.z-grid .desktop-col-start-3{grid-column-start:3}.z-grid .desktop-col-start-4{grid-column-start:4}.z-grid .desktop-col-start-5{grid-column-start:5}.z-grid .desktop-col-start-6{grid-column-start:6}.z-grid .desktop-col-start-7{grid-column-start:7}.z-grid .desktop-col-start-8{grid-column-start:8}.z-grid .desktop-col-start-9{grid-column-start:9}.z-grid .desktop-col-start-10{grid-column-start:10}.z-grid .desktop-col-start-11{grid-column-start:11}.z-grid .desktop-col-start-12{grid-column-start:12}.z-grid .-desktop-col-start-2{grid-column-start:-2}.z-grid .-desktop-col-start-3{grid-column-start:-3}.z-grid .-desktop-col-start-4{grid-column-start:-4}.z-grid .-desktop-col-start-5{grid-column-start:-5}.z-grid .-desktop-col-start-6{grid-column-start:-6}.z-grid .-desktop-col-start-7{grid-column-start:-7}.z-grid .-desktop-col-start-8{grid-column-start:-8}.z-grid .-desktop-col-start-9{grid-column-start:-9}.z-grid .-desktop-col-start-10{grid-column-start:-10}.z-grid .-desktop-col-start-11{grid-column-start:-11}.z-grid .-desktop-col-start-12{grid-column-start:-12}.z-grid .desktop-col-end-2{grid-column-end:2}.z-grid .desktop-col-end-3{grid-column-end:3}.z-grid .desktop-col-end-4{grid-column-end:4}.z-grid .desktop-col-end-6{grid-column-end:6}.z-grid .desktop-col-end-7{grid-column-end:7}.z-grid .desktop-col-end-8{grid-column-end:8}.z-grid .desktop-col-end-9{grid-column-end:9}.z-grid .desktop-col-end-10{grid-column-end:10}.z-grid .desktop-col-end-11{grid-column-end:11}.z-grid .desktop-col-end-12{grid-column-end:12}.z-grid .desktop-col-end-last{grid-column-end:-1}.z-grid .-desktop-col-end-1{grid-column-end:-1}.z-grid .-desktop-col-end-2{grid-column-end:-2}.z-grid .-desktop-col-end-3{grid-column-end:-3}.z-grid .-desktop-col-end-4{grid-column-end:-4}.z-grid .-desktop-col-end-5{grid-column-end:-5}.z-grid .-desktop-col-end-6{grid-column-end:-6}.z-grid .-desktop-col-end-7{grid-column-end:-7}.z-grid .-desktop-col-end-8{grid-column-end:-8}.z-grid .-desktop-col-end-9{grid-column-end:-9}.z-grid .-desktop-col-end-10{grid-column-end:-10}.z-grid .-desktop-col-end-11{grid-column-end:-11}.z-grid .-desktop-col-end-12{grid-column-end:-12}}@media (min-width: 1366px){.z-grid .wide-col-full{grid-column:1/-1}.z-grid .wide-col-1{grid-column:span 1}.z-grid .wide-col-2{grid-column:span 2}.z-grid .wide-col-3{grid-column:span 3}.z-grid .wide-col-4{grid-column:span 4}.z-grid .wide-col-5{grid-column:span 5}.z-grid .wide-col-6{grid-column:span 6}.z-grid .wide-col-7{grid-column:span 7}.z-grid .wide-col-8{grid-column:span 8}.z-grid .wide-col-9{grid-column:span 9}.z-grid .wide-col-10{grid-column:span 10}.z-grid .wide-col-11{grid-column:span 11}.z-grid .wide-col-12{grid-column:span 12}.z-grid .wide-col-start-1{grid-column-start:1}.z-grid .wide-col-start-2{grid-column-start:2}.z-grid .wide-col-start-3{grid-column-start:3}.z-grid .wide-col-start-4{grid-column-start:4}.z-grid .wide-col-start-5{grid-column-start:5}.z-grid .wide-col-start-6{grid-column-start:6}.z-grid .wide-col-start-7{grid-column-start:7}.z-grid .wide-col-start-8{grid-column-start:8}.z-grid .wide-col-start-9{grid-column-start:9}.z-grid .wide-col-start-10{grid-column-start:10}.z-grid .wide-col-start-11{grid-column-start:11}.z-grid .wide-col-start-12{grid-column-start:12}.z-grid .-wide-col-start-2{grid-column-start:-2}.z-grid .-wide-col-start-3{grid-column-start:-3}.z-grid .-wide-col-start-4{grid-column-start:-4}.z-grid .-wide-col-start-5{grid-column-start:-5}.z-grid .-wide-col-start-6{grid-column-start:-6}.z-grid .-wide-col-start-7{grid-column-start:-7}.z-grid .-wide-col-start-8{grid-column-start:-8}.z-grid .-wide-col-start-9{grid-column-start:-9}.z-grid .-wide-col-start-10{grid-column-start:-10}.z-grid .-wide-col-start-11{grid-column-start:-11}.z-grid .-wide-col-start-12{grid-column-start:-12}.z-grid .wide-col-end-2{grid-column-end:2}.z-grid .wide-col-end-3{grid-column-end:3}.z-grid .wide-col-end-4{grid-column-end:4}.z-grid .wide-col-end-6{grid-column-end:6}.z-grid .wide-col-end-7{grid-column-end:7}.z-grid .wide-col-end-8{grid-column-end:8}.z-grid .wide-col-end-9{grid-column-end:9}.z-grid .wide-col-end-10{grid-column-end:10}.z-grid .wide-col-end-11{grid-column-end:11}.z-grid .wide-col-end-12{grid-column-end:12}.z-grid .wide-col-end-last{grid-column-end:-1}.z-grid .-wide-col-end-1{grid-column-end:-1}.z-grid .-wide-col-end-2{grid-column-end:-2}.z-grid .-wide-col-end-3{grid-column-end:-3}.z-grid .-wide-col-end-4{grid-column-end:-4}.z-grid .-wide-col-end-5{grid-column-end:-5}.z-grid .-wide-col-end-6{grid-column-end:-6}.z-grid .-wide-col-end-7{grid-column-end:-7}.z-grid .-wide-col-end-8{grid-column-end:-8}.z-grid .-wide-col-end-9{grid-column-end:-9}.z-grid .-wide-col-end-10{grid-column-end:-10}.z-grid .-wide-col-end-11{grid-column-end:-11}.z-grid .-wide-col-end-12{grid-column-end:-12}}.z-fab{--z-fab-right-offset:var(--grid-margin);--z-fab-bottom-offset:var(--grid-margin);--z-fab-icon-size:20px;--z-fab-icon-fill:var(--color-icon03);position:fixed;z-index:1;right:var(--z-fab-right-offset);bottom:var(--z-fab-bottom-offset);display:flex;max-width:48px;align-items:center;column-gap:0;padding:14px;background-color:var(--color-primary01);border-radius:24px;box-shadow:var(--shadow-4);box-sizing:border-box;color:var(--color-text04);cursor:pointer;font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.25;transition:all 0.2s ease-in-out}button.z-fab{border:none}a.z-fab{text-decoration:none}.z-fab.z-fab-small{--z-fab-icon-size:18px;max-width:42px;padding:12px;border-radius:21px;font-size:var(--font-size-2);line-height:1.285}.z-fab.z-fab-x-small{--z-fab-icon-size:16px;max-width:36px;padding:10px;border-radius:18px;font-size:var(--font-size-1);line-height:1.333}.z-fab.z-fab-extended{max-width:100%;column-gap:var(--space-unit)}.z-fab.z-fab-extended.z-fab-x-small{column-gap:calc(var(--space-unit) / 2)}.z-fab.z-fab-extended>*:not(z-icon){opacity:1}.z-fab.z-fab-primary03{--z-fab-icon-fill:var(--color-icon01);background-color:var(--color-primary03);color:var(--color-icon01)}.z-fab.z-fab-surface01{--z-fab-icon-fill:var(--color-icon01);background-color:var(--color-surface01);color:var(--color-icon01)}.z-fab.z-fab-surface02{--z-fab-icon-fill:var(--color-icon01);background-color:var(--color-surface02);color:var(--color-icon01)}.z-fab.z-fab-surface04{--z-fab-icon-fill:var(--color-icon03);background-color:var(--color-surface04);color:var(--color-text04)}.z-fab z-icon{--z-icon-width:var(--z-fab-icon-size);--z-icon-height:var(--z-fab-icon-size);fill:var(--z-fab-icon-fill)}.z-fab>*:not(z-icon){overflow:hidden;opacity:0;transition:opacity 0.2s ease-in-out;white-space:nowrap}.z-fab.z-fab-extended>*:not(z-icon:first-child){opacity:1}@media (hover: hover){.z-fab.z-fab-extendable:hover{max-width:100%;column-gap:var(--space-unit)}.z-fab.z-fab-extendable:hover>*:not(z-icon:first-child){opacity:1}.z-fab.z-fab-x-small.z-fab-extendable:hover{column-gap:calc(var(--space-unit) / 2)}}button.z-link{background-color:transparent;margin:0;padding:0;border:0}a.z-link,button.z-link{display:inline-flex;color:var(--color-link-primary);fill:var(--color-link-primary);cursor:pointer;font-family:var(--font-family-sans);line-height:inherit;text-decoration:none}a.z-link:hover,a.z-link:focus,a.z-link:active,button.z-link:hover,button.z-link:focus,button.z-link:active{text-decoration:underline}a.z-link:hover,a.z-link:focus,button.z-link:hover,button.z-link:focus{color:var(--color-hover-link);fill:var(--color-hover-link)}a.z-link:active,a.z-link.z-link-active:active,button.z-link:active,button.z-link.z-link-active:active{color:var(--color-pressed-link);fill:var(--color-pressed-link)}a.z-link:visited,button.z-link:visited{color:var(--color-visited-link);fill:var(--color-visited-link)}a.z-link.z-link-active,button.z-link.z-link-active{color:var(--color-active-link);fill:var(--color-active-link)}a.z-link.z-link-active.z-link-inverse,button.z-link.z-link-active.z-link-inverse{color:var(--color-inverse-active-link);fill:var(--color-inverse-active-link)}a.z-link.z-link-active.z-link-black,button.z-link.z-link-active.z-link-black{color:var(--color-black);fill:var(--color-black)}a.z-link.z-link-disabled,button.z-link.z-link-disabled{color:var(--color-disabled03);fill:var(--color-disabled03);cursor:default;pointer-events:none;text-decoration:none;outline:none}a.z-link.z-link-underline,button.z-link.z-link-underline{text-decoration:underline}a.z-link.z-link-inverse,button.z-link.z-link-inverse{color:var(--color-inverse-link);fill:var(--color-inverse-link)}a.z-link.z-link-inverse:hover,button.z-link.z-link-inverse:hover{color:var(--color-inverse-hover-link);fill:var(--color-inverse-hover-link)}a.z-link.z-link-inverse:active,a.z-link.z-link-inverse:focus,button.z-link.z-link-inverse:active,button.z-link.z-link-inverse:focus{color:var(--color-inverse-pressed-link);fill:var(--color-inverse-pressed-link)}a.z-link.z-link-inverse:visited,button.z-link.z-link-inverse:visited{color:var(--color-inverse-visited-link);fill:var(--color-inverse-visited-link)}a.z-link.z-link-black,button.z-link.z-link-black{color:var(--gray800);fill:var(--gray800)}a.z-link.z-link-black:hover:visited,button.z-link.z-link-black:hover:visited{color:var(--gray800);fill:var(--gray800)}a.z-link.z-link-black:hover,a.z-link.z-link-black.z-link-active:focus,button.z-link.z-link-black:hover,button.z-link.z-link-black.z-link-active:focus{color:var(--color-black);fill:var(--color-black)}a.z-link.z-link-black:active,a.z-link.z-link-black.z-link-active:active,button.z-link.z-link-black:active,button.z-link.z-link-black.z-link-active:active{color:var(--gray700);fill:var(--gray700)}a.z-link.z-link-black.z-link-disabled.z-link-active,button.z-link.z-link-black.z-link-disabled.z-link-active{color:var(--color-disabled03);fill:var(--color-disabled03)}a.z-link.z-link-white,button.z-link.z-link-white{color:var(--color-white);fill:var(--color-white)}a.z-link.z-link-white.z-link-disabled,button.z-link.z-link-white.z-link-disabled{color:var(--color-disabled03);fill:var(--color-disabled03)}a.z-link.z-link-icon,button.z-link.z-link-icon{--z-icon-width:1.125em;--z-icon-height:1.125em;align-items:center;column-gap:0.5em}a.z-link.z-link-sb,button.z-link.z-link-sb{font-weight:var(--font-sb)}:root{--color-background:var(--gray50);--color-primary01:var(--blue500);--color-primary02:var(--blue25);--color-primary03:var(--blue50);--color-secondary01:var(--blue500);--color-secondary02:var(--red500);--color-secondary03:var(--red500);--color-danger01:var(--color-error-default);--color-danger02:var(--color-error-default);--color-error01:var(--color-error-default);--color-error02:var(--red800);--color-error-inverse:var(--red50);--color-text-error:var(--color-error-default);--color-success01:var(--color-success-default);--color-success02:var(--green800);--color-text-success:var(--color-success-default);--color-success-inverse:var(--green50);--color-warning01:var(--color-warning-default);--color-warning02:var(--yellow800);--color-text-warning:var(--color-warning-default);--color-warning-inverse:var(--yellow50);--color-surface01:var(--color-white);--color-surface02:var(--gray50);--color-surface03:var(--gray200);--color-surface04:var(--gray700);--color-surface05:var(--gray800);--color-text01:var(--gray800);--color-text02:var(--gray800);--color-text03:var(--gray300);--color-text04:var(--color-white);--color-text05:var(--gray600);--color-text-inverse:var(--color-white);--color-icon01:var(--blue500);--color-icon02:var(--gray800);--color-icon03:var(--color-white);--color-input-field01:var(--color-white);--color-input-field02:var(--blue500);--color-hover-primary:var(--blue800);--color-hover-primary-text:var(--color-black);--color-hover-secondary:var(--blue800);--color-hover-tertiary:var(--blue800);--color-hover-surface:var(--gray50);--color-hover-light:var(--blue400);--color-hover-danger:var(--red800);--color-active-primary:var(--blue800);--color-active-secondary:var(--blue800);--color-active-tertiary:var(--blue800);--color-active-surface:var(--gray300);--color-active-light:var(--blue400);--color-pressed-primary:var(--blue400);--color-pressed-secondary:var(--red400);--color-selected-surface:var(--gray300);--color-selected-light:var(--gray300);--color-highlight:var(--blue400);--color-ghost01:var(--gray300);--color-ghost02:var(--gray500);--color-disabled01:var(--gray200);--color-disabled02:var(--gray700);--color-disabled03:var(--gray500);--shadow-focus-primary:0 0 0 1px var(--color-white),
-    0 0 4px 3px var(--color-highlight);--color-link-primary:var(--blue500);--color-hover-link:var(--blue800);--color-active-link:var(--blue800);--color-pressed-link:var(--blue400);--color-visited-link:var(--blue800);--color-inverse-link:var(--color-white);--color-inverse-hover-link:var(--color-white);--color-inverse-active-link:var(--color-white);--color-inverse-pressed-link:var(--color-white);--color-inverse-visited-link:var(--gray300)}.theme-black-yellow{--color-background:var(--color-white);--color-primary01:var(--gray950);--color-primary02:var(--gray50);--color-primary03:var(--gray100);--color-secondary01:var(--yellow500);--color-secondary02:var(--yellow500);--color-secondary03:var(--yellow500);--color-text01:var(--gray950);--color-text02:var(--gray950);--color-text-inverse:var(--color-white);--color-input-field02:var(--gray950);--color-icon01:var(--gray950);--color-hover-primary:var(--gray800);--color-hover-secondary:var(--gray950);--color-hover-tertiary:var(--gray950);--color-hover-surface:var(--gray50);--color-hover-primary-text:var(--gray950);--color-hover-light:var(--yellow500);--color-active-primary:var(--gray800);--color-active-secondary:var(--gray800);--color-active-tertiary:var(--gray800);--color-active-surface:var(--gray300);--color-active-light:var(--gray400);--color-pressed-primary:var(--gray800);--color-highlight:var(--gray950);--shadow-focus-primary:0 0 0 1px var(--color-white),
-    0 0 4px 3px var(--color-highlight);--color-link-primary:var(--gray950);--color-hover-link:var(--gray800);--color-active-link:var(--gray800);--color-pressed-link:var(--gray400);--color-visited-link:var(--gray800)}.theme-dark{--color-surface01:var(--gray800);--color-primary01:var(--color-white);--color-primary02:#ffffff33;--color-primary03:var(--gray100);--color-hover-primary:var(--color-primary01);--color-pressed-primary:var(--color-primary01);--color-text02:var(--color-white);--color-text-inverse:var(--gray800);--color-input-field02:var(--gray800);--color-link-primary:var(--color-white);--color-hover-link:var(--color-link-primary);--color-active-link:var(--color-link-primary);--color-pressed-link:var(--color-link-primary);--color-visited-link:var(--color-link-primary);--color-error02:#fdefee;--color-text-error:#fdefee;--color-success02:#a8e168;--color-text-success:#a8e168;--color-warning02:#f7ca6a;--color-text-warning:#f7ca6a;background:var(--color-surface01)}z-accordion+z-accordion{border-top:none}z-accordion[variant="background"]:first-of-type:not(:last-of-type),z-accordion[variant="background"]:first-of-type:not(:last-of-type)::part(summary),z-accordion[variant="background"]:first-of-type:not(:last-of-type)::part(summary)::before,z-accordion[variant="background"]:first-of-type:not(:last-of-type)::part(content)::before{border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant="background"]+z-accordion[variant="background"],z-accordion[variant="background"]+z-accordion[variant="background"]::part(summary),z-accordion[variant="background"]+z-accordion[variant="background"]::part(summary)::before,z-accordion[variant="background"]+z-accordion[variant="background"]::part(content)::before{border-radius:0}z-accordion[variant="background"]+z-accordion[variant="background"]:last-of-type{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}z-accordion[variant="background"]+z-accordion[variant="background"]:last-of-type:not([open])::part(summary){border-bottom-right-radius:calc(var(--border-radius) - var(--border-size-small))}z-accordion[variant="background"]+z-accordion[variant="background"]:last-of-type:not([open])::part(summary),z-accordion[variant="background"]+z-accordion[variant="background"]:last-of-type:not([open])::part(summary)::before,z-accordion[variant="background"]+z-accordion[variant="background"]:last-of-type::part(content)::before{border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small))}

package/www/build/p-a7e61213.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s,g as i}from"./p-10bb4f4b.js";import{e as l,g as c,l as r,i as n}from"./p-025f494e.js";import{r as a,b as o,d as h,a as p,e as d}from"./p-955da62e.js";import"./p-2c886e8b.js";const z='.sc-z-select-h{display:inline-block;width:inherit;color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg)}[size="small"].sc-z-select-h,[size="x-small"].sc-z-select-h{font-size:var(--font-size-2)}.select-wrapper.sc-z-select>z-input.sc-z-select{width:100%}.select-wrapper.sc-z-select>div.sc-z-select{position:relative}.select-wrapper.sc-z-select>div.closed.sc-z-select{overflow:hidden;height:0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select{position:absolute;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 0.5) var(--space-unit);border:var(--border-size-small) solid var(--gray200);border-top:none;background:var(--color-surface01);outline:none}.select-wrapper.sc-z-select .closed.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:10}.select-wrapper.sc-z-select .open.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:20}.select-wrapper.sc-z-select .ul-scroll-wrapper.fixed.sc-z-select{position:static}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select{position:relative;overflow:auto;max-height:240px;padding:calc(var(--space-unit) * 0.5);outline:none;scrollbar-color:var(--color-primary01) transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-track{background-color:transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select{display:flex;align-items:center;padding-left:calc(var(--space-unit) * 1.5)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{display:block;padding:calc(var(--space-unit) * 0.5) 0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{display:block;padding:calc(var(--space-unit) * 0.5) var(--space-unit)}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{padding:0}[size="small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:16px;--z-icon-height:16px}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:14px;--z-icon-height:14px}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:0 var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.selected.sc-z-select{font-weight:bold}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select .no-results.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}.z-list-group-title.sc-z-select{color:var(--gray800)}.reset-item.sc-z-select{color:var(--color-primary01);fill:var(--color-primary01)}.reset-item-content.sc-z-select{display:flex;align-items:center}.reset-item.reset-item-margin.sc-z-select .reset-item-content.sc-z-select{margin-left:calc(var(--space-unit))}.reset-item.sc-z-select .reset-item-content.sc-z-select>z-icon.sc-z-select{margin-right:var(--space-unit)}.reset-item.hide.sc-z-select{display:none}';const u=z;const m=class{constructor(s){e(this,s);this.optionSelect=t(this,"optionSelect",7);this.resetSelect=t(this,"resetSelect",7);this.itemsList=[];this.htmlid=`id-${a()}`;this.items=undefined;this.name=undefined;this.label=undefined;this.ariaLabel="";this.disabled=false;this.readonly=false;this.placeholder=undefined;this.htmltitle=undefined;this.status=undefined;this.message=true;this.autocomplete=false;this.noresultslabel="Nessun risultato";this.hasGroupItems=undefined;this.isfixed=false;this.resetItem=undefined;this.size=l.BIG;this.isOpen=false;this.selectedItem=null;this.focusedItemId=undefined;this.searchString=undefined;this.toggleSelectUl=this.toggleSelectUl.bind(this);this.selectItem=this.selectItem.bind(this);this.handleSelectFocus=this.handleSelectFocus.bind(this)}watchItems(){this.itemsList=this.getInitialItemsArray();this.selectedItem=this.itemsList.find((e=>e.selected))}getFocusedItemHandler(e){this.focusedItemId=e.target.id}async getSelectedItem(){return this.selectedItem}async getValue(){return this.getSelectedValue()}async setValue(e){let t=[];if(typeof e==="string"){t.push(e)}else{t=e}this.selectedItem=this.itemsList.find((e=>t.includes(e.id)))}emitOptionSelect(){this.optionSelect.emit({id:this.htmlid,selected:this.getSelectedValue()})}emitResetSelect(){this.resetSelect.emit({id:this.htmlid})}componentWillLoad(){this.watchItems()}componentWillRender(){this.filterItems(this.searchString)}getInitialItemsArray(){return typeof this.items==="string"?JSON.parse(this.items):this.items}mapSelectedItemToItemsArray(){const e=this.getInitialItemsArray();return e.map((e=>{var t;e.selected=e.id===((t=this.selectedItem)===null||t===void 0?void 0:t.id);return e}))}getSelectedValue(){var e;return(e=this.selectedItem)===null||e===void 0?void 0:e.id}filterItems(e){const t=this.mapSelectedItemToItemsArray();if(!(e===null||e===void 0?void 0:e.length)){this.itemsList=t}else{this.itemsList=t.filter((t=>t.name.toUpperCase().includes(e.toUpperCase()))).map((t=>{const s=t.name.toUpperCase().indexOf(e.toUpperCase());const i=s+e.length;const l=t.name.substring(0,s)+`<strong>${t.name.substring(s,i)}</strong>`+t.name.substring(i,t.name.length);t.name=l;return t}))}}hasAutocomplete(){return o(this.autocomplete)===true}handleInputChange(e){this.searchString=e.detail.value;if(!this.isOpen){this.toggleSelectUl()}}selectItem(e,t){if(e&&e.disabled){return}this.itemsList=this.mapSelectedItemToItemsArray();this.itemsList=this.itemsList.map((s=>{s.selected=false;if(s.id===(e===null||e===void 0?void 0:e.id)){s.selected=t}return s}));this.selectedItem=this.itemsList.find((e=>e.selected));this.emitOptionSelect();if(this.searchString){this.searchString=null}}arrowsSelectNav(e,t){const s=this.resetItem&&!!this.selectedItem;const i=[c.ARROW_DOWN,c.ARROW_UP];if(!i.includes(e.key)){return}e.preventDefault();e.stopPropagation();if(!this.isOpen){this.toggleSelectUl()}let l;if(this.resetItem){if(e.key===c.ARROW_DOWN){l=t+1===this.itemsList.length+1?+!s:t+1}else if(e.key===c.ARROW_UP){l=t<=+!s?this.itemsList.length:t-1}}if(!this.resetItem){if(e.key===c.ARROW_DOWN){l=t+1===this.itemsList.length?0:t+1}else if(e.key===c.ARROW_UP){l=t<=0?this.itemsList.length-1:t-1}}this.focusSelectItem(l)}focusSelectItem(e){const t=this.element.querySelector(`#${this.htmlid}_${e}`);if(t){t.focus()}}toggleSelectUl(e=false){if(this.disabled||this.readonly){return}if(!this.isOpen){document.addEventListener("click",this.handleSelectFocus);document.addEventListener("keyup",this.handleSelectFocus)}else{document.removeEventListener("click",this.handleSelectFocus);document.removeEventListener("keyup",this.handleSelectFocus);if(e){this.element.querySelector(`#${this.htmlid}_input`).focus()}}this.focusedItemId="";this.isOpen=!this.isOpen}handleInputClick(e){const t=e.composedPath();const s=t.find((e=>e.classList&&e.classList.contains("reset-icon")));if(s){e.stopPropagation();return}this.toggleSelectUl()}handleSelectFocus(e){if(e instanceof KeyboardEvent&&e.key===c.ESC){e.stopPropagation();return this.toggleSelectUl(true)}if(e instanceof KeyboardEvent&&e.key!==c.TAB&&e.key!==c.ENTER){return}const t=h(d());const s=t.find((e=>e.nodeName.toLowerCase()==="z-input"&&e.id===`${this.htmlid}_input`));if(!s){this.toggleSelectUl(e instanceof MouseEvent?true:false)}}scrollToLetter(e){const t=this.itemsList.find((t=>t.name.charAt(0)===e));if(t){this.focusSelectItem(this.itemsList.indexOf(t))}}renderInput(){return s("z-input",{class:{"active-select":this.isOpen,"cursor-select":!this.autocomplete},id:`${this.htmlid}_input`,htmlid:`${this.htmlid}_select_input`,placeholder:this.placeholder,value:!this.isOpen&&this.selectedItem?this.selectedItem.name.replace(/<[^>]+>/g,""):null,label:this.label,"aria-expanded":this.isOpen?"true":"false","aria-label":this.ariaLabel,"aria-controls":`${this.htmlid}_list`,"aria-autocomplete":this.hasAutocomplete()?"list":"none","aria-activedescendant":this.isOpen?this.focusedItemId:"",icon:this.isOpen?"caret-up":"caret-down",hasclearicon:this.hasAutocomplete(),message:false,disabled:this.disabled,readonly:this.readonly||!this.hasAutocomplete()&&this.isOpen,status:this.isOpen?undefined:this.status,role:"combobox",size:this.size,onClick:e=>{this.handleInputClick(e)},onKeyUp:e=>{if(e.keyCode!==13){e.preventDefault()}p(e,this.toggleSelectUl)},onKeyDown:e=>this.arrowsSelectNav(e,this.selectedItem?this.itemsList.indexOf(this.selectedItem):this.resetItem?0:-1),onInputChange:e=>{this.handleInputChange(e)},onKeyPress:e=>{if(!this.hasAutocomplete()){e.preventDefault();this.scrollToLetter(String.fromCharCode(e.keyCode))}}})}renderSelectUl(){return s("div",{class:this.isOpen?"open":"closed",tabindex:"-1"},s("div",{class:{"ul-scroll-wrapper":true,fixed:this.isfixed},tabindex:"-1"},s("z-list",{role:"listbox","aria-label":this.ariaLabel||this.label,tabindex:this.disabled||this.readonly||!this.isOpen?-1:0,id:`${this.htmlid}_list`,"aria-multiselectable":false,size:this.listSizeType(),class:{disabled:this.disabled,readonly:this.readonly,filled:!!this.selectedItem,[`input-${this.status}`]:!this.isOpen&&!!this.status}},this.resetItem&&this.renderResetItem(),this.renderSelectUlItems())))}renderResetItem(){return s("z-list-element",{class:{hide:!this.selectedItem||!this.resetItem,"reset-item":true,"reset-item-margin":!this.hasGroupItems},clickable:true,disabled:false,dividerType:r.ELEMENT,role:"option",tabindex:"0","aria-selected":"false",id:`${this.htmlid}_${this.resetItem?"0":"none"}`,size:this.listSizeType(),onClickItem:()=>{this.selectedItem=null;this.searchString=null;this.emitResetSelect()},onKeyDown:e=>this.arrowsSelectNav(e,0)},s("div",{class:"reset-item-content"},s("z-icon",{name:"multiply-circled"}),s("span",null,this.resetItem)))}renderItem(e,t,i){return s("z-list-element",{clickable:!e.disabled,disabled:e.disabled,dividerType:i?r.HEADER:r.ELEMENT,role:"option",tabindex:e.disabled||!this.isOpen?-1:0,"aria-selected":e.selected?"true":"false",id:`${this.htmlid}_${t}`,size:this.listSizeType(),onClickItem:()=>this.selectItem(e,true),onKeyDown:e=>this.arrowsSelectNav(e,t)},s("div",{class:"list-element-container"},e.icon&&s("z-icon",{name:e.icon}),s("span",{class:{selected:!!e.selected,"list-element-content":true},innerHTML:e.name})))}listSizeType(){if(this.size===l.SMALL||this.size===l.X_SMALL){return n.SMALL}return n.MEDIUM}renderSelectUlItems(){if(!this.itemsList.length){return this.renderNoSearchResults()}if(this.hasGroupItems){return this.renderSelectGroupItems()}return this.itemsList.map(((e,t,s)=>{const i=s.length===t+1;const l=this.resetItem?t+1:t;return this.renderItem(e,l,i)}))}renderSelectGroupItems(){const e=this.itemsList.reduce(((e,t,s,i)=>{var l;const{category:c}=t;const r=i.length===s+1;const n=this.resetItem?s+1:s;const a=this.renderItem(t,n,r);e[c]=(l=e[c])!==null&&l!==void 0?l:[];e[c].push(a);return e}),{});return Object.entries(e).map((([e,t])=>s("z-list-group",{"divider-type":r.ELEMENT},s("span",{class:"body-3-sb z-list-group-title",slot:"header-title"},e),t.map((e=>e)))))}renderNoSearchResults(){return s("z-list-element",{color:"blue500",class:"no-results",size:this.listSizeType()},s("z-icon",{name:"multiply-circle",fill:"blue500"}),this.noresultslabel)}renderMessage(){if(o(this.message)===false){return}return s("z-input-message",{message:o(this.message)===true?undefined:this.message,status:this.status,class:this.size})}render(){return s("div",{key:"5566ddc949ae9fee8724ebd22bb2ae21dfc0d19e",class:"select-wrapper"},this.renderInput(),this.renderSelectUl(),this.renderMessage())}get element(){return i(this)}static get watchers(){return{items:["watchItems"]}}};m.style=u;export{m as z_select};
-//# sourceMappingURL=p-a7e61213.entry.js.map