@foxy.io/elements 1.34.0-beta.2 → 1.34.0-beta.3

package/dist/cdn/shared-9ea762dc.js

@@ -1,294 +0,0 @@
-import{_ as e}from"./shared-d1195c27.js";import"./shared-ff10b9fb.js";import"./shared-25b83adb.js";import"./shared-f4e03cdc.js";import"./shared-8d826ccb.js";import{T as t}from"./shared-cc8ce493.js";import"./shared-f79438f8.js";import{h as s,P as i}from"./shared-6583e3f9.js";import{E as n,T as l}from"./shared-08e73812.js";import{L as a}from"./shared-d3ffbcb0.js";import{C as r}from"./shared-61ade33e.js";import{I as o}from"./shared-a9b8c3ab.js";import"./shared-5cdec81e.js";import{x as A,z as d,y as h}from"./shared-70612035.js";import{O as u}from"./shared-83c8a2d2.js";import{a as m,F as c}from"./shared-6b578d1a.js";import{c as p,L as v,h as g}from"./shared-dc73b9a5.js";import{D as _}from"./shared-eb8a9f27.js";class y extends CustomEvent{constructor(e){super("change",{detail:e})}}class f extends y{}const b=s`<dom-module id="lumo-list-box" theme-for="vaadin-list-box">
-  <template>
-    <style>
-      :host {
-        -webkit-tap-highlight-color: transparent;
-        --_lumo-item-selected-icon-display: var(--_lumo-list-box-item-selected-icon-display, block);
-      }
-
-      /* IE11 flexbox issue workaround (vaadin-items are flex containers with min-height) */
-      [part="items"] {
-        display: flex;
-        flex-direction: column;
-      }
-
-      [part="items"] ::slotted(*) {
-        flex: none;
-      }
-
-      /* Normal item */
-
-      [part="items"] ::slotted(vaadin-item) {
-        -webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
-        cursor: default;
-      }
-
-      [part="items"] ::slotted(vaadin-item) {
-        outline: none;
-        border-radius: var(--lumo-border-radius);
-        padding-left: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius) / 4));
-        padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
-      }
-
-      /* Workaround to display checkmark in IE11 when list-box is not used in dropdown-menu */
-      [part="items"] ::slotted(vaadin-item)::before {
-        display: var(--_lumo-item-selected-icon-display);
-      }
-
-      /* Hovered item */
-      /* TODO a workaround until we have "focus-follows-mouse". After that, use the hover style for focus-ring as well */
-
-      [part="items"] ::slotted(vaadin-item:hover:not([disabled])) {
-        background-color: var(--lumo-primary-color-10pct);
-      }
-
-      /* Focused item */
-
-      [part="items"] ::slotted([focus-ring]:not([disabled])) {
-        box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
-      }
-
-      @media (pointer: coarse) {
-        [part="items"] ::slotted(vaadin-item:hover:not([disabled])) {
-          background-color: transparent;
-        }
-
-        [part="items"] ::slotted([focus-ring]:not([disabled])) {
-          box-shadow: none;
-        }
-      }
-
-      /* Easily add section dividers */
-
-      [part="items"] ::slotted(hr) {
-        height: 1px;
-        border: 0;
-        padding: 0;
-        margin: var(--lumo-space-s) var(--lumo-border-radius);
-        background-color: var(--lumo-contrast-10pct);
-      }
-
-      /* RTL specific styles */
-
-      :host([dir="rtl"]) [part="items"] ::slotted(vaadin-item) {
-        padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
-        padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius) / 4));
-      }
-    </style>
-  </template>
-</dom-module>`;document.head.appendChild(b.content);
-/**
-@license
-Copyright (c) 2019 Vaadin Ltd.
-This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/
-const E=e=>class extends(a(e)){static get properties(){return{multiple:{type:Boolean,value:!1,reflectToAttribute:!0,observer:"_multipleChanged"},selectedValues:{type:Array,notify:!0,value:function(){return[]}}}}static get observers(){return["_enhanceMultipleItems(items, multiple, selected, selectedValues, selectedValues.*)"]}ready(){this.addEventListener("click",(e=>this._onMultipleClick(e))),super.ready()}_enhanceMultipleItems(e,t,s,i){if(e&&t){if(i){const t=i.map((t=>e[t]));e.forEach((e=>e.selected=-1!==t.indexOf(e)))}this._scrollToLastSelectedItem()}}_scrollToLastSelectedItem(){const e=this.selectedValues.slice(-1)[0];e&&!e.disabled&&this._scrollToItem(e)}_onMultipleClick(e){const t=this._filterItems(e.composedPath())[0],s=t&&!t.disabled?this.items.indexOf(t):-1;s<0||!this.multiple||(e.preventDefault(),-1!==this.selectedValues.indexOf(s)?this.selectedValues=this.selectedValues.filter((e=>e!==s)):this.selectedValues=this.selectedValues.concat(s))}_multipleChanged(e,t){!e&&t&&(this.selectedValues=[],this.items.forEach((e=>e.selected=!1))),e&&!t&&void 0!==this.selected&&(this.push("selectedValues",this.selected),this.selected=void 0)}}
-/**
-@license
-Copyright (c) 2017 Vaadin Ltd.
-This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/;class x extends(n(E(l(i)))){static get template(){return s`
-    <style>
-      :host {
-        display: flex;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-
-      [part="items"] {
-        height: 100%;
-        width: 100%;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-      }
-    </style>
-    <div part="items">
-      <slot></slot>
-    </div>
-`}static get is(){return"vaadin-list-box"}static get version(){return"1.4.0"}static get properties(){return{orientation:{readOnly:!0}}}constructor(){super(),this.focused}ready(){super.ready(),this.setAttribute("role","list"),setTimeout(this._checkImport.bind(this),2e3)}get _scrollerElement(){return this.shadowRoot.querySelector('[part="items"]')}_checkImport(){var e=this.querySelector("vaadin-item");!e||e instanceof i||console.warn("Make sure you have imported the vaadin-item element.")}}customElements.define(x.is,x);const w=s`<dom-module id="lumo-select" theme-for="vaadin-select">
-  <template>
-    <style include="lumo-field-button">
-      :host {
-        outline: none;
-        -webkit-tap-highlight-color: transparent;
-      }
-
-      [selected] {
-        padding-left: 0;
-        padding-right: 0;
-        flex: auto;
-      }
-
-      :host([theme~="small"]) [selected] {
-        padding: 0;
-        min-height: var(--lumo-size-s);
-      }
-
-      :host([theme~="align-left"]) [selected] {
-        text-align: left;
-      }
-
-      :host([theme~="align-right"]) [selected] {
-        text-align: right;
-      }
-
-      :host([theme~="align-center"]) [selected] {
-        text-align: center;
-      }
-
-      [part="toggle-button"]::before {
-        content: var(--lumo-icons-dropdown);
-      }
-
-      /* Highlight the toggle button when hovering over the entire component */
-      :host(:hover:not([readonly]):not([disabled])) [part="toggle-button"] {
-        color: var(--lumo-contrast-80pct);
-      }
-    </style>
-  </template>
-</dom-module><dom-module id="lumo-select-text-field" theme-for="vaadin-select-text-field">
-  <template>
-    <style>
-      :host([theme~="align-center"]) ::slotted([part~="value"]) {
-        --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
-      }
-
-      :host([theme~="align-center"]) ::slotted([part~="value"]) {
-        --_lumo-text-field-overflow-mask-image: none;
-      }
-
-      :host([theme~="align-right"]) ::slotted([part~="value"]) {
-        --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent 0.25em, #000 1.5em);
-      }
-
-      [part="input-field"] {
-        cursor: default;
-      }
-
-      [part="input-field"] ::slotted([part="value"]) {
-        display: flex;
-      }
-
-      /* ShadyCSS limitation workaround */
-      [part="input-field"] ::slotted([part="value"]) [selected]::before {
-        display: none;
-      }
-
-      [part="input-field"]:focus {
-        outline: none;
-      }
-
-      /* RTL specific styles */
-
-      :host([theme~="align-left"][dir="rtl"]) ::slotted([part~="value"]) {
-        --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
-      }
-
-      :host([theme~="align-center"][dir="rtl"]) ::slotted([part~="value"]) {
-        --_lumo-text-field-overflow-mask-image: none;
-      }
-
-      :host([dir="rtl"]) ::slotted([part~="value"]),
-      :host([theme~="align-right"][dir="rtl"]) ::slotted([part~="value"]) {
-        --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent 0.25em, #000 1.5em);
-      }
-    </style>
-  </template>
-</dom-module><dom-module id="lumo-select-overlay" theme-for="vaadin-select-overlay">
-  <template>
-    <style include="lumo-menu-overlay">
-      :host {
-        --_lumo-item-selected-icon-display: block;
-      }
-
-      [part~="overlay"] {
-        min-width: var(--vaadin-select-text-field-width);
-      }
-
-      /* Small viewport adjustment */
-      :host([phone]) {
-        top: 0 !important;
-        right: 0 !important;
-        bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
-        left: 0 !important;
-        align-items: stretch;
-        justify-content: flex-end;
-      }
-
-      :host([theme~="align-left"]) {
-        text-align: left;
-      }
-
-      :host([theme~="align-right"]) {
-        text-align: right;
-      }
-
-      :host([theme~="align-center"]) {
-        text-align: center;
-      }
-    </style>
-  </template>
-</dom-module>`;document.head.appendChild(w.content);
-/**
-@license
-Copyright (c) 2017 Vaadin Ltd.
-This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/
-const k=document.createElement("template");k.innerHTML='<dom-module id="vaadin-select-overlay-styles" theme-for="vaadin-select-overlay">\n  <template>\n    <style>\n      :host {\n        align-items: flex-start;\n        justify-content: flex-start;\n      }\n\n      :host([bottom-aligned]) {\n        justify-content: flex-end;\n      }\n\n      :host([right-aligned]) {\n        align-items: flex-end;\n      }\n\n      :host([dir="rtl"]) {\n        align-items: flex-end;\n      }\n\n      :host([dir="rtl"][right-aligned]) {\n        align-items: flex-start;\n      }\n    </style>\n  </template>\n</dom-module>',document.head.appendChild(k.content);class B extends u{static get is(){return"vaadin-select-overlay"}}
-/**
-@license
-Copyright (c) 2017 Vaadin Ltd.
-This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/
-let C;customElements.define(B.is,B);class I extends t{static get is(){return"vaadin-select-text-field"}static get template(){if(super.template.content.querySelector('slot[name="input"]'))return super.template;if(!C){C=super.template.cloneNode(!0);const e=document.createElement("slot");e.setAttribute("name","value");const t=C.content.querySelector("input");t.parentElement.replaceChild(e,t),e.appendChild(t)}return C}get focusElement(){return this.shadowRoot.querySelector("[part=input-field]")}get inputElement(){return this.shadowRoot.querySelector("input")}}customElements.define(I.is,I);
-/**
-@license
-Copyright (c) 2017 Vaadin Ltd.
-This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/
-const S=document.createElement("template");S.innerHTML="<custom-style>\n  <style>\n    @font-face {\n      font-family: \"vaadin-select-icons\";\n      src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAASEAAsAAAAABDgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIGKmNtYXAAAAFoAAAAVAAAAFQXVtKHZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAAHwAAAB8CohkJ2hlYWQAAAJAAAAANgAAADYOavgEaGhlYQAAAngAAAAkAAAAJAarA8ZobXR4AAACnAAAABQAAAAUCAABP2xvY2EAAAKwAAAADAAAAAwAKABSbWF4cAAAArwAAAAgAAAAIAAHABduYW1lAAAC3AAAAYYAAAGGmUoJ+3Bvc3QAAARkAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QADwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkA//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQE/AUAC6QIVABQAAAEwFx4BFxYxMDc+ATc2MTAjKgEjIgE/ISJPIiEhIk8iIUNCoEJDAhUhIk8iISEiTyIhAAEAAAABAABvL5bdXw889QALBAAAAAAA1jHaeQAAAADWMdp5AAAAAALpAhUAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAAukAAQAAAAAAAAAAAAAAAAAAAAUEAAAAAAAAAAAAAAAAAAAABAABPwAAAAAACgAUAB4APgABAAAABQAVAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');\n      font-weight: normal;\n      font-style: normal;\n    }\n  </style>\n</custom-style>",document.head.appendChild(S.content);class T extends(n(r(l(m(o,i))))){static get template(){return s`
-    <style>
-      :host {
-        display: inline-block;
-      }
-
-      vaadin-select-text-field {
-        width: 100%;
-        min-width: 0;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-
-      [part="toggle-button"] {
-        font-family: "vaadin-select-icons";
-      }
-
-      [part="toggle-button"]::before {
-        content: "\\e900";
-      }
-    </style>
-
-    <vaadin-select-text-field placeholder="[[placeholder]]" label="[[label]]" required="[[required]]" invalid="[[invalid]]" error-message="[[errorMessage]]" readonly\$="[[readonly]]" helper-text="[[helperText]]" theme\$="[[theme]]">
-      <slot name="prefix" slot="prefix"></slot>
-      <slot name="helper" slot="helper">[[helperText]]</slot>
-      <div part="value"></div>
-      <div part="toggle-button" slot="suffix" role="button" aria-haspopup="listbox" aria-label="Toggle"></div>
-    </vaadin-select-text-field>
-    <vaadin-select-overlay opened="{{opened}}" with-backdrop="[[_phone]]" phone\$="[[_phone]]" theme\$="[[theme]]"></vaadin-select-overlay>
-
-    <iron-media-query query="[[_phoneMediaQuery]]" query-matches="{{_phone}}"></iron-media-query>
-`}static get is(){return"vaadin-select"}static get version(){return"2.5.0"}static get properties(){return{opened:{type:Boolean,value:!1,notify:!0,reflectToAttribute:!0,observer:"_openedChanged"},renderer:Function,errorMessage:{type:String,value:""},label:{type:String},value:{type:String,value:"",notify:!0,observer:"_valueChanged"},required:{type:Boolean,reflectToAttribute:!0,observer:"_requiredChanged"},invalid:{type:Boolean,reflectToAttribute:!0,notify:!0,value:!1},name:{type:String,reflectToAttribute:!0},placeholder:{type:String},helperText:{type:String,value:""},readonly:{type:Boolean,value:!1,reflectToAttribute:!0},_phone:Boolean,_phoneMediaQuery:{value:"(max-width: 420px), (max-height: 420px)"},_overlayElement:Object,_inputElement:Object,_toggleElement:Object,_items:Object,_contentTemplate:Object,_oldTemplate:Object,_oldRenderer:Object}}static get observers(){return["_updateSelectedItem(value, _items)","_updateAriaExpanded(opened, _toggleElement, _inputElement)","_templateOrRendererChanged(_contentTemplate, renderer, _overlayElement)"]}constructor(){super(),this._boundSetPosition=this._setPosition.bind(this)}connectedCallback(){super.connectedCallback(),this.addEventListener("iron-resize",this._boundSetPosition)}ready(){super.ready(),this._overlayElement=this.shadowRoot.querySelector("vaadin-select-overlay"),this._valueElement=this.shadowRoot.querySelector('[part="value"]'),this._toggleElement=this.shadowRoot.querySelector('[part="toggle-button"]'),this._nativeInput=this.focusElement.shadowRoot.querySelector("input"),this._nativeInput.setAttribute("aria-hidden",!0),this._nativeInput.setAttribute("tabindex",-1),this._nativeInput.style.pointerEvents="none",this.focusElement.addEventListener("click",(e=>{const t=Array.from(e.composedPath()).some((e=>e.nodeType===Node.ELEMENT_NODE&&"helper"===e.getAttribute("slot")));this.opened=!this.readonly&&!t})),this.focusElement.addEventListener("keydown",(e=>this._onKeyDown(e))),this._observer=new c(this,(e=>this._setTemplateFromNodes(e.addedNodes))),this._observer.flush()}_setTemplateFromNodes(e){const t=Array.from(e).filter((e=>e.localName&&"template"===e.localName))[0]||this._contentTemplate;this._overlayElement.template=this._contentTemplate=t,this._setForwardHostProps()}_setForwardHostProps(){if(this._overlayElement.content){const e=this._overlayElement._instance&&this._overlayElement._instance.forwardHostProp;this._overlayElement._instance&&(this._overlayElement._instance.forwardHostProp=(...t)=>{e.apply(this._overlayElement._instance,t),setTimeout((()=>{this._updateValueSlot()}))},this._assignMenuElement())}}render(){this._overlayElement&&(this._overlayElement.render(),this._menuElement&&this._menuElement.items&&this._updateSelectedItem(this.value,this._menuElement.items))}_removeNewRendererOrTemplate(e,t,s,i){e!==t?this._contentTemplate=void 0:s!==i&&(this.renderer=void 0)}_templateOrRendererChanged(e,t,s){if(s){if(e&&t)throw this._removeNewRendererOrTemplate(e,this._oldTemplate,t,this._oldRenderer),new Error("You should only use either a renderer or a template for select content");this._oldTemplate=e,this._oldRenderer=t,t&&(s.setProperties({owner:this,renderer:t}),this.render(),s.content.firstChild&&this._assignMenuElement())}}_assignMenuElement(){this._menuElement=Array.from(this._overlayElement.content.children).filter((e=>"style"!==e.localName))[0],this._menuElement&&(this._menuElement.addEventListener("items-changed",(e=>{this._items=this._menuElement.items,this._items.forEach((e=>e.setAttribute("role","option")))})),this._menuElement.addEventListener("selected-changed",(e=>this._updateValueSlot())),this._menuElement.addEventListener("keydown",(e=>this._onKeyDownInside(e))),this._menuElement.addEventListener("click",(e=>{this.__userInteraction=!0,this.opened=!1}),!0),this._menuElement.setAttribute("role","listbox"))}get focusElement(){return this._inputElement||(this._inputElement=this.shadowRoot.querySelector("vaadin-select-text-field"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("iron-resize",this._boundSetPosition),this.opened=!1}notifyResize(){super.notifyResize(),this.positionTarget&&this.opened&&(this._setPosition(),requestAnimationFrame(this._setPosition.bind(this)))}_requiredChanged(e){this.setAttribute("aria-required",e)}_valueChanged(e,t){""===e?this.focusElement.removeAttribute("has-value"):this.focusElement.setAttribute("has-value",""),""===e&&void 0===t||this.validate()}_onKeyDown(e){if(!this.readonly&&!this.opened)if(/^(Enter|SpaceBar|\s|ArrowDown|Down|ArrowUp|Up)$/.test(e.key))e.preventDefault(),this.opened=!0;else if(/[a-zA-Z0-9]/.test(e.key)&&1===e.key.length){const t=this._menuElement.selected,s=void 0!==t?t:-1,i=this._menuElement._searchKey(s,e.key);i>=0&&(this.__userInteraction=!0,this._updateSelectedItem(this._items[i].value,this._items))}}_onKeyDownInside(e){/^(Tab)$/.test(e.key)&&(this.opened=!1)}_openedChanged(e,t){if(e){if(!this._overlayElement||!this._menuElement||!this._toggleElement||!this.focusElement||this.disabled||this.readonly)return void(this.opened=!1);this._openedWithFocusRing=this.hasAttribute("focus-ring")||this.focusElement.hasAttribute("focus-ring"),this._menuElement.focus(),this._setPosition(),window.addEventListener("scroll",this._boundSetPosition,!0)}else t&&(this.focusElement.focus(),this._openedWithFocusRing&&this.focusElement.setAttribute("focus-ring",""),this.validate(),window.removeEventListener("scroll",this._boundSetPosition,!0))}_hasContent(e){return!!e&&Boolean(e.hasAttribute("label")?e.getAttribute("label"):e.textContent.trim()||e.children.length)}_attachSelectedItem(e){if(!e)return;let t;e.hasAttribute("label")?(t=document.createElement("vaadin-item"),t.textContent=e.getAttribute("label")):t=e.cloneNode(!0),t._sourceItem=e,t.removeAttribute("tabindex"),t.removeAttribute("role"),this._valueElement.appendChild(t),t.selected=!0}_updateAriaExpanded(e,t,s){t&&t.setAttribute("aria-expanded",e),s&&s.focusElement&&s.focusElement.setAttribute("aria-expanded",e)}_updateValueSlot(){this.opened=!1,this._valueElement.innerHTML="";const e=this._items[this._menuElement.selected],t=this._hasContent(e),s=this._inputElement.shadowRoot.querySelector('slot[name="input"]')?"input":"value";this._valueElement.slot=t?s:"",t&&window.ShadyDOM&&window.ShadyDOM.flush(),this._attachSelectedItem(e),!this._valueChanging&&e&&(this._selectedChanging=!0,this.value=e.value||"",this.__userInteraction&&(this.dispatchEvent(new CustomEvent("change",{bubbles:!0})),this.__userInteraction=!1),delete this._selectedChanging)}_updateSelectedItem(e,t){t&&(this._menuElement.selected=t.reduce(((t,s,i)=>void 0===t&&s.value===e?i:t),void 0),this._selectedChanging||(this._valueChanging=!0,this._updateValueSlot(),delete this._valueChanging))}_setFocused(e){super._setFocused(this.opened||e),this.focusElement._setFocused(this.hasAttribute("focused")),!this.hasAttribute("focused")&&this.validate()}_setPosition(){const e=this._inputElement.shadowRoot.querySelector('[part~="input-field"]').getBoundingClientRect(),t=Math.min(window.innerWidth,document.documentElement.clientWidth),s=Math.min(window.innerHeight,document.documentElement.clientHeight),i=this.__shouldAlignRight(e,t),n=this.__shouldAlignBottom(e,s);i?(this._overlayElement.setAttribute("right-aligned",""),this._overlayElement.style.right=t-e.right+"px",this._overlayElement.style.removeProperty("left")):(this._overlayElement.removeAttribute("right-aligned"),this._overlayElement.style.left=e.left+"px",this._overlayElement.style.removeProperty("right")),n?(this._overlayElement.setAttribute("bottom-aligned",""),this._overlayElement.style.removeProperty("top"),this._overlayElement.style.bottom=s-e.bottom+"px"):(this._overlayElement.removeAttribute("bottom-aligned"),this._overlayElement.style.removeProperty("bottom"),this._overlayElement.style.top=e.top+"px"),this._overlayElement.updateStyles({"--vaadin-select-text-field-width":e.width+"px"})}__shouldAlignRight(e,t){const s="rtl"===this.getAttribute("dir"),i=e.left/t,n=(t-e.right)/t;return s?i>.3:n<.3}__shouldAlignBottom(e,t){return e.top>(t-e.height)/2}_setInvalid(e){this._shouldSetInvalid(e)&&(this.invalid=e)}_shouldSetInvalid(e){return!0}validate(){const e=!(!this.disabled&&this.required&&!this.value);return this._setInvalid(!e),this.dispatchEvent(new CustomEvent("validated",{detail:{valid:e}})),e}}customElements.define(T.is,T);let Q,D,M=e=>e;A("vaadin-list-box",p(Q||(Q=M`
-[part='items'] ::slotted(vaadin-item.dropdown-divisor){
-  color:var(--lumo-contrast-40pct);
-  box-shadow:0 1px var(--lumo-contrast-10pct);
-  border-radius:0;
-}
-
-[part='items'] ::slotted(vaadin-item.dropdown-sub-item){
-  margin-left:var(--lumo-space-l);
-}
-  `)));class j extends v{constructor(){super(),this.disabled=!1,this.label="",this.value=null,this.items=null,this.getText=e=>e,this.__unexistentValue=`@foxy.io/elements#dropdown-${Math.random().toFixed(16).substr(2)}`,this.__renderedItems={},this.__list=document.createElement("vaadin-list-box")}static get properties(){return e(e({},super.properties),{},{disabled:{type:Boolean},getText:{type:Object,attribute:!1},items:{type:Array},label:{type:String},value:{type:String}})}static get styles(){return d.styles}render(){return g(D||(D=M` <vaadin-select class="w-full ${0}" data-testid="select" .label="${0}" .value="${0}" .disabled="${0}" .renderer="${0}" @change="${0}"> </vaadin-select> `),this.label?"-mt-m":"",this.label,null===this.value?this.__unexistentValue:this.value,this.disabled,this.__renderItems.bind(this),this.__handleChange)}__renderItems(e){var t;let s=e.querySelector("vaadin-list-box");null===s&&(e.appendChild(this.__list),s=this.__list);for(const e of Object.values(this.__renderedItems))e.dataset.keep="";const i=null!==(t=this.items)&&void 0!==t?t:[];for(let e=0;e<i.length;++e)if("string"==typeof i[e])this.__addOrKeepItem(i[e],i[e],s).classList.add("dropdown-item");else if(Array.isArray(i[e])){const t=this.__addOrKeepItem(i[e][0],i[e][0],s);t.classList.add("dropdown-item","dropdown-divisor"),t.disabled=!0;for(const t of i[e][1])this.__addOrKeepItem(i[e][0]+": "+t,t,s).classList.add("dropdown-sub-item")}for(const e of Object.values(this.__renderedItems)){const t=e;t.dataset.keep||(e.remove(),delete this.__renderedItems[t.dataset.trackId])}}__addOrKeepItem(e,t,s){let i;return this.__renderedItems[e]?i=this.__renderedItems[e]:(i=document.createElement("vaadin-item"),this.__renderedItems[e]=i,i.value=e,s.appendChild(i)),i.dataset.keep="true",i.dataset.trackId=e,i.textContent=this.getText(t),i}__handleChange(e){const t=e.target.value,s=t===this.__unexistentValue?null:t;this.dispatchEvent(new _(s))}}let R,$,L=e=>e;class O extends v{constructor(){super(...arguments),this.variant=null}static get styles(){return[d.styles,p(R||(R=L`@keyframes blink{from{opacity:.5}to{opacity:1}}.animated{animation:blink .5s infinite alternate}:host{display:inline-block;min-width:4rem}`))]}static get properties(){return e(e({},super.properties),{},{variant:{type:String}})}render(){const e="error"===this.variant?"bg-error-10":"bg-contrast-10",t=null===this.variant?"animated":"";return g($||($=L` <div class="relative"> <span class="opacity-0"><slot></slot></span> <div class="${0} ${0} rounded my-xs absolute inset-0"></div> </div> `),e,t)}}let P,V,q,G=e=>e;class N extends h{constructor(){super(...arguments),this.key=""}static get scopedElements(){return{"x-skeleton":O}}static get properties(){return e(e({},super.properties),{},{key:{type:String,reflect:!0},opts:{type:Object}})}static get styles(){return[super.styles,p(P||(P=G`:host{display:inline-block;color:inherit;line-height:inherit;font:inherit}`))]}get whenReady(){return this._whenI18nReady.then((()=>this.updateComplete))}render(){return this._isI18nReady?g(V||(V=G`${0}<slot></slot>`),this._t(this.key,this.opts)):g(q||(q=G`<x-skeleton class="block">${0}<slot></slot></x-skeleton>`),this.key)}}function W(...e){return e.filter((e=>!!e))}let F,H,K,U,Y=e=>e;class J extends h{constructor(){super(...arguments),this.disabled=!1,this.value=[]}static get scopedElements(){return{"x-i18n":N}}static get properties(){return e(e({},super.properties),{},{disabled:{type:Boolean},value:{type:Array}})}render(){const e=J._allDays.map((e=>{try{return e.toLocaleString(this.lang,{minimumIntegerDigits:2})}catch(t){return e.toString()}}));return g(F||(F=Y` <div class="space-y-s"> <div class="flex flex-wrap -mx-xs -mb-xs" style="max-width:364px;font-feature-settings:'tnum' 1"> ${0} </div> ${0} </div> `),J._allDays.map(((t,s)=>g(H||(H=Y` <label class="${0}"> ${0} <input type="checkbox" class="sr-only" ?disabled="${0}" ?checked="${0}" @change="${0}"> </label> `),this._getLabelClass(t),e[s],this.disabled,this.value.includes(t),(e=>this._handleChange(e,t))))),W(this.value.length>0&&g(K||(K=Y` <p class="text-s text-tertiary leading-s"> <x-i18n key="monthday-picker.hint" .opts="${0}" .lang="${0}"> </x-i18n> ${0} </p> `),{days:this.value},this.lang,W([29,30,31].some((e=>this.value.includes(e)))&&g(U||(U=Y`<x-i18n key="monthday-picker.warning" .lang="${0}"></x-i18n>`),this.lang)))))}_getLabelClass(e){let t="flex items-center justify-center m-xs p-s rounded text-m font-medium transition duration-200 sm-p-0 sm-h-m sm-w-l ";return this.value.includes(e)||(t+="bg-contrast-5 "),this._isI18nReady&&!this.disabled?(t+="cursor-pointer ",t+=this.value.includes(e)?"text-base ":"hover-bg-primary-10 ",e<29?(t+="focus-within-shadow-outline ",t+=this.value.includes(e)?"bg-primary":"text-body"):(t+="focus-within-shadow-outline-error ",t+=this.value.includes(e)?"bg-error":"text-error")):(t+="text-transparent ",this.value.includes(e)&&(t+=e<29?"bg-primary-50":"bg-error-10")),t}_handleChange(e,t){e.stopPropagation(),this._toggle(t),this._sendChange()}_sendChange(){this.dispatchEvent(new y(this.value))}_toggle(e){const t=this.value.indexOf(e);this.value=-1===t?[...this.value,e]:this.value.filter(((e,s)=>s!==t))}}function z(e,t,s="long"){const i=new Date;for(;i.getDay()!==e;)i.setDate(i.getDate()+1);return i.toLocaleDateString(t,{weekday:s})}J._allDays=Array.from(new Array(31),((e,t)=>t+1));let Z,X,ee,te=e=>e;class se extends J{render(){return g(Z||(Z=te` <div class="space-y-s"> <div class="flex flex-wrap -mx-xs -mb-xs text-m uppercase"> ${0} </div> ${0} </div> `),se._allDays.map((e=>g(X||(X=te` <label class="${0}"> ${0} <input type="checkbox" class="sr-only" ?disabled="${0}" ?checked="${0}" @change="${0}"> </label> `),this._getLabelClass(e),z(e,this.lang,"short"),this.disabled||!this._isI18nReady,this.value.includes(e),(t=>this._handleChange(t,e))))),W(this.value.length>0&&g(ee||(ee=te` <p class="text-s text-tertiary leading-s"> <x-i18n key="weekday-picker.hint" .lang="${0}" .opts="${0}"> </x-i18n> </p> `),this.lang,{days:this.value})))}_getLabelClass(e){let t="flex items-center justify-center m-xs h-m w-xl rounded font-medium transition duration-200 ";return this._isI18nReady&&!this.disabled?(t+="cursor-pointer focus-within-shadow-outline ",t+=this.value.includes(e)?"text-base bg-primary":"bg-contrast-5 hover-bg-contrast-10 text-body"):(t+="text-transparent ",t+=this.value.includes(e)?"bg-primary-50":"bg-contrast-5"),t}_sendChange(){this.dispatchEvent(new f(this.value))}}se._allDays=new Array(7).fill(0).map(((e,t)=>t));export{j as D,N as I,J as M,O as S,se as W,T as a,W as c,z as t};

package/dist/cdn/shared-b73aaedb.js

@@ -1 +0,0 @@
-import"./shared-433ff5ae.js";import"./shared-9dd252c7.js";import{I as t}from"./shared-684174e7.js";import{I as e}from"./shared-e8744e04.js";import"./foxy-copy-to-clipboard.js";import"./foxy-nucleon-element.js";import"./foxy-form-dialog.js";import"./shared-0d4cdb19.js";import{_ as s,m as i}from"./shared-d1195c27.js";import{h as r,s as o}from"./shared-dc73b9a5.js";import{s as l}from"./shared-99940888.js";import{g as a}from"./shared-bab2ea2c.js";import{F as n}from"./shared-343d1fd7.js";import{i as d}from"./shared-9803aa7c.js";import{c as h}from"./shared-4e709717.js";import{u as c}from"./shared-e8b8c8d0.js";let u,f=t=>t;let p,y,m,v,x,b,g,$,_=t=>t;customElements.define("foxy-internal-resource-picker-control-form",class extends e{constructor(){super(...arguments),this.selectionProps={}}static get properties(){return s(s({},super.properties),{},{selectionProps:{attribute:!1}})}renderBody(){return r(u||(u=f` <foxy-internal-async-list-control infer="selection" form="foxy-null" hide-delete-button hide-create-button @itemclick="${0}" ...="${0}"> </foxy-internal-async-list-control> `),(t=>{t.preventDefault(),this.edit({selection:t.detail}),this.submit()}),l(this.selectionProps))}}),customElements.define("foxy-internal-resource-picker-control",class extends t{constructor(){super(...arguments),this.getDisplayValueOptions=t=>({resource:t}),this.showCopyIdButton=!1,this.virtualHost=c("internal-resource-picker-control-"),this.getItemUrl=null,this.formProps={},this.filters=[],this.layout=null,this.first=null,this.item=null,this.form=null,this.__getItemRenderer=i((t=>new Function("ctx",`return ctx.html\`\n        <${null!=t?t:"foxy-null"}\n          related=\${JSON.stringify(ctx.related)}\n          parent=\${ctx.parent}\n          infer="card"\n          href=\${ctx.href}\n          ...=\${ctx.spread(ctx.props)}\n        >\n        </${null!=t?t:"foxy-null"}>\``)))}static get properties(){return s(s({},super.properties),{},{getDisplayValueOptions:{attribute:!1},showCopyIdButton:{type:Boolean,attribute:"show-copy-id-button"},virtualHost:{},getItemUrl:{attribute:!1},formProps:{type:Object},filters:{type:Array},layout:{},first:{},item:{},form:{}})}renderControl(){var t;const e=s(s({},this.formProps),{},{".selectionProps":{".filters":this.filters,".first":this.first,".item":this.item}});return r(p||(p=_` <foxy-form-dialog parent="foxy://${0}/select" header="header" infer="dialog" alert .props="${0}" .form="${0}" @fetch="${0}"> </foxy-form-dialog> ${0} `),this.virtualHost,e,null!==(t=this.form)&&void 0!==t?t:"foxy-internal-resource-picker-control-form",this.__handleFetchEvent,"summary-item"===this.layout?this.__renderSummaryItemLayout():this.__renderStandaloneLayout())}updated(t){var e,s;super.updated(t),t.has("item")&&(null===(s=(e=this.__getItemRenderer.cache).clear)||void 0===s||s.call(e))}__clear(){this._value="",this.dispatchEvent(new CustomEvent("clear"))}__renderSummaryItemLayout(){const t=this.renderRoot.querySelector("#value");return r(y||(y=_` <div class="flex items-start leading-xs gap-m"> <div class="flex-1"> <div class="text-m text-body whitespace-nowrap">${0}</div> <div class="text-s text-secondary">${0}</div> <div class="text-s text-error" ?hidden="${0}"> ${0} </div> </div> <div class="flex items-center gap-xs"> <button aria-label="${0}" class="${0}" ?disabled="${0}" @click="${0}"> <div class="truncate min-w-0"> ${0} </div> </button> <button aria-label="${0}" class="${0}" style="width:1em;height:1em" ?disabled="${0}" ?hidden="${0}" @click="${0}"> ${0} </button> </div> </div> <foxy-nucleon infer="" href="${0}" id="value" @update="${0}"> </foxy-nucleon> `),this.label,this.helperText,this.disabled||this.readonly,this._errorMessage,this.t("select"),h({"text-right min-w-0 transition-colors transition-opacity":!0,"rounded-s focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"text-secondary":this.readonly,"text-disabled":this.disabled,"cursor-pointer text-body hover-opacity-80":!this.disabled&&!this.readonly,"font-medium":!this.readonly}),this.disabled||this.readonly,(t=>{if(this.disabled||this.readonly)return;const e=t.currentTarget,s=this.renderRoot.querySelector("foxy-form-dialog");s.href="",s.show(e)}),this._value?r(m||(m=_` <foxy-i18n infer="" key="value" .options="${0}"> </foxy-i18n> `),(null==t?void 0:t.data)?this.getDisplayValueOptions(t.data):{context:(null==t?void 0:t.in("fail"))?"fail":"busy"}):this.placeholder,this.t("clear"),h({"rounded-full transition-colors":!0,"focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"cursor-pointer text-tertiary hover-text-body":!this.disabled,"cursor-default text-disabled":this.disabled}),this.disabled,this.readonly||!this._value,this.__clear,o(v||(v=_`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`)),d(this._value||void 0),(()=>this.requestUpdate()))}__renderStandaloneLayout(){var t,e,s;const i="string"==typeof this._value?null===(t=this.getItemUrl)||void 0===t?void 0:t.call(this,this._value):void 0,o="string"==typeof this._value?a(this._value):void 0;return r(x||(x=_` <div class="block group"> <div class="${0}"> <span class="mr-auto">${0}</span> ${0} ${0} ${0} </div> <div class="text-secondary text-s" ?hidden="${0}">${0}</div> <button class="${0}" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)" ?disabled="${0}" @click="${0}"> <div class="${0}"> ${0} </div> </button> <div class="mt-xs text-xs leading-xs text-error" ?hidden="${0}"> ${0} </div> </div> `),h({"flex items-center gap-m transition-colors font-medium text-l":!0,"text-disabled":this.disabled}),this.label,i?r(b||(b=_` <a class="text-body rounded transition-opacity hover-opacity-90 focus-outline-none focus-ring-2 focus-ring-primary-50" href="${0}"> <foxy-i18n infer="" key="view"></foxy-i18n> </a> `),i):"",this.showCopyIdButton&&null!==o?r(g||(g=_` <foxy-copy-to-clipboard layout="text" theme="contrast tertiary-inline" infer="copy-id" text="${0}"> </foxy-copy-to-clipboard> `),o):"",this.readonly||!this._value?"":r($||($=_` <vaadin-button theme="error tertiary-inline" ?disabled="${0}" @click="${0}"> <foxy-i18n infer="" key="clear"></foxy-i18n> </vaadin-button> `),this.disabled,this.__clear),!this.helperText,this.helperText,h({"block w-full bg-contrast-5 rounded text-left transition-colors":!0,"focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"cursor-pointer hover-bg-contrast-10":!this.disabled&&!this.readonly,"cursor-default":this.disabled||this.readonly,"mt-s":!!this.label||!!this.helperText}),this.disabled||this.readonly,(t=>{const e=t.currentTarget,s=this.renderRoot.querySelector("foxy-form-dialog");s.href="",s.show(e)}),h({"transition-opacity":!0,"opacity-50":this.disabled}),this.__getItemRenderer(this.item)({html:r,data:null,href:this._value||"",related:[],parent:"",props:{},spread:l,simplifyNsLoading:this.simplifyNsLoading,disabled:this.disabled,disabledControls:this.disabledControls,readonly:this.readonly,readonlyControls:this.readonlyControls,hidden:this.hidden,hiddenControls:this.hiddenControls,templates:this.templates,previous:null,next:null,group:null!==(s=null===(e=this.nucleon)||void 0===e?void 0:e.group)&&void 0!==s?s:"",lang:this.lang,ns:this.ns}),!this._errorMessage||this.disabled||this.readonly,this._errorMessage)}__handleFetchEvent(t){if(!(t instanceof n))return;if(t.defaultPrevented)return;const{url:e,method:s}=t.request;return e===`foxy://${this.virtualHost}/select`&&"POST"===s?t.respondWith(this.__handleSelect(t.request)):e===`foxy://${this.virtualHost}/empty`&&"GET"===s?t.respondWith(this.__handleEmpty()):void 0}async __handleSelect(t){const e=await t.clone().json();return this._value=e.selection,new Response(JSON.stringify({_links:{self:{href:`foxy://${this.virtualHost}/empty`}},message:"Resource selected."}))}async __handleEmpty(){return new Response(JSON.stringify({_links:{self:{href:`foxy://${this.virtualHost}/empty`}},message:"Resource selected."}))}});

package/dist/cdn/shared-ccc7a886.js

@@ -1 +0,0 @@
-import"./foxy-spinner.js";import{I as e}from"./shared-6b5e4fe4.js";customElements.define("foxy-internal-card",e);

package/dist/cdn/shared-e8744e04.js

@@ -1 +0,0 @@
-import"./shared-433ff5ae.js";import"./shared-0d4cdb19.js";import{a as e}from"./shared-684174e7.js";import{h as t}from"./shared-dc73b9a5.js";import{l as r,_ as i,B as n}from"./shared-d1195c27.js";import"./shared-46189aae.js";import"./foxy-copy-to-clipboard.js";import"./foxy-spinner.js";import{g as s}from"./shared-bab2ea2c.js";import{C as o}from"./shared-d1cb97c6.js";import{T as a}from"./shared-70612035.js";import{N as d}from"./shared-e8b8c8d0.js";import{c as l}from"./shared-4e709717.js";let c,h=e=>e;customElements.define("foxy-internal-timestamps-control",class extends e{renderControl(){return t(c||(c=h` <p class="font-lumo text-s leading-s text-secondary"> <foxy-i18n infer="" key="date_created"></foxy-i18n> <foxy-i18n .options="${0}" infer="" key="date"> </foxy-i18n> <span>&bull;<span> <foxy-i18n infer="" key="date_modified"></foxy-i18n> <foxy-i18n .options="${0}" infer="" key="date"> </foxy-i18n> </span></span></p> `),{value:r(this,"nucleon.data.date_created")},{value:r(this,"nucleon.data.date_modified")})}});let f,u=e=>e;customElements.define("foxy-internal-submit-control",class extends e{constructor(){super(...arguments),this.theme="primary"}static get properties(){return i(i({},super.properties),{},{theme:{type:String}})}renderControl(){return t(f||(f=u` <vaadin-button theme="${0}" ?disabled="${0}" @click="${0}"> <foxy-i18n infer="" key="caption"></foxy-i18n> </vaadin-button> `),this.theme,this.disabled,(()=>{var e;return null===(e=this.nucleon)||void 0===e?void 0:e.submit()}))}});let p,y=e=>e;customElements.define("foxy-internal-delete-control",class extends e{constructor(){super(...arguments),this.theme="error"}static get properties(){return i(i({},super.properties),{},{theme:{type:String}})}renderControl(){return t(p||(p=y` <foxy-internal-confirm-dialog message="delete_prompt" confirm="delete" cancel="cancel" header="delete" theme="primary error" infer="" id="confirm" @hide="${0}"> </foxy-internal-confirm-dialog> <vaadin-button data-testid="delete" theme="${0}" class="w-full" ?disabled="${0}" @click="${0}"> <foxy-i18n infer="" key="delete"></foxy-i18n> </vaadin-button> `),(e=>{var t;return!e.detail.cancelled&&(null===(t=this.nucleon)||void 0===t?void 0:t.delete())}),this.theme,this.disabled||this.readonly,(e=>{this.renderRoot.querySelector("#confirm").show(e.currentTarget)}))}});let m,x=e=>e;customElements.define("foxy-internal-undo-control",class extends e{constructor(){super(...arguments),this.theme="secondary"}static get properties(){return i(i({},super.properties),{},{theme:{type:String}})}renderControl(){return t(m||(m=x` <vaadin-button theme="${0}" ?disabled="${0}" @click="${0}"> <foxy-i18n infer="" key="caption"></foxy-i18n> </vaadin-button> `),this.theme,this.disabled,(()=>{var e;return null===(e=this.nucleon)||void 0===e?void 0:e.undo()}))}});let b,v,g,$,k,S,_,j,E,O,T,C,w=e=>e;const K=o(a(d));class B extends K{constructor(){super(...arguments),this.status=null}static get properties(){return i(i({},super.properties),{},{status:{type:Object}})}renderHeaderActions(e){return null}get headerTitleKey(){return"title"}get headerTitleOptions(){return i(i({},this.data),{},{context:this.data?"existing":"new",id:this.data?s(this.data._links.self.href):null})}get headerSubtitleKey(){return"subtitle"}get headerSubtitleOptions(){var e;return null!==(e=this.data)&&void 0!==e?e:{}}get headerCopyIdValue(){var e;return this.data&&null!==(e=s(this.data._links.self.href))&&void 0!==e?e:""}get hiddenSelector(){const e=[super.hiddenSelector.toString()];return this.href&&e.unshift("create"),this.href||e.unshift("delete","timestamps","submit"),this.in({idle:{snapshot:"dirty"}})||e.unshift("undo","submit"),new n(e.join(" ").trim())}renderHeader(){if(this.hiddenSelector.matches("header",!0))return t(b||(b=w``));const e=this.data,r=e?this.renderHeaderActions(e):null;return t(v||(v=w` <div> ${0} <h2> <span class="flex items-center gap-s leading-xs text-xl font-medium break-all"> <foxy-i18n options="${0}" infer="header" key="${0}"> </foxy-i18n> ${0} </span> ${0} </h2> ${0} </div> `),this.renderTemplateOrSlot("header:before"),JSON.stringify(this.headerTitleOptions),this.headerTitleKey,e?t(g||(g=w` ${0} ${0} `),this.hiddenSelector.matches("header:copy-id",!0)?"":t($||($=w` <foxy-copy-to-clipboard infer="header copy-id" class="text-m" text="${0}"> </foxy-copy-to-clipboard> `),this.headerCopyIdValue),this.hiddenSelector.matches("header:copy-json",!0)?"":t(k||(k=w` <foxy-copy-to-clipboard infer="header copy-json" class="text-m" icon="icons:code" text="${0}"> </foxy-copy-to-clipboard> `),JSON.stringify(e,null,2))):"",e?t(S||(S=w` <foxy-i18n infer="header" class="text-m text-secondary" key="${0}" .options="${0}"> </foxy-i18n> ${0} `),this.headerSubtitleKey,this.headerSubtitleOptions,r?t(_||(_=w`<div class="mt-xs flex gap-m">${0}</div>`),r):""):"",this.renderTemplateOrSlot("header:after"))}renderBody(){return t(j||(j=w` <foxy-internal-timestamps-control infer="timestamps"></foxy-internal-timestamps-control> <div class="flex gap-m" ?hidden="${0}"> <foxy-internal-delete-control infer="delete"></foxy-internal-delete-control> <div class="w-full"></div> <foxy-internal-undo-control infer="undo"> </foxy-internal-undo-control> <foxy-internal-submit-control infer="submit"> </foxy-internal-submit-control> <foxy-internal-submit-control infer="create" theme="primary success"> </foxy-internal-submit-control> </div> `),["delete","undo","submit","create"].every((e=>this.hiddenSelector.matches(e,!0))))}render(){const e=!(this.in("idle")||this.in({busy:"fetching"})&&this.data);return t(E||(E=w` <div aria-busy="${0}" aria-live="polite" class="relative"> <div class="${0}"> ${0} ${0} ${0} </div> <div data-testid="spinner" class="${0}"> <foxy-spinner layout="${0}" state="${0}" infer="spinner"> </foxy-spinner> ${0} </div> </div> `),this.in("busy"),l({"space-y-m":!0,"transition-opacity":!0,"opacity-0 pointer-events-none":e}),this.__generalErrors.map((e=>this.__renderGeneralError(e))),this.status?this.__renderStatus(this.status):"",this.renderBody(),l({"flex flex-col items-center justify-center gap-m":!0,"transition-opacity absolute inset-0":!0,"opacity-0 pointer-events-none":!e}),this.in("fail")?"vertical":"no-label",this.in("fail")?"error":"busy",this.href&&this.in("fail")?t(O||(O=w` <vaadin-button theme="small contrast" @click="${0}"> <foxy-i18n infer="spinner" key="refresh"></foxy-i18n> </vaadin-button> `),(()=>this.refresh())):"")}get __generalErrors(){const e=this.constructor.generalErrorPrefix;return this.errors.filter((t=>t.startsWith(e)))}__renderGeneralError(e){return t(T||(T=w` <foxy-i18n class="leading-xs text-body rounded bg-error-10 block" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)" infer="error" key="${0}"> </foxy-i18n> `),e.replace("error:",""))}__renderStatus({key:e,options:r}){if(!this.hiddenSelector.matches("status",!0))return t(C||(C=w` <p data-testid="status" class="leading-xs text-body rounded bg-success-10 flex items-start gap-m" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)"> <foxy-i18n class="flex-1" infer="status" key="${0}" .options="${0}"></foxy-i18n> <vaadin-button class="flex-shrink-0" theme="success tertiary-inline" @click="${0}"> <foxy-i18n class="flex-1" infer="status" key="close"></foxy-i18n> </vaadin-button> </p> `),e,r,(()=>this.status=null))}}B.generalErrorPrefix="error:",customElements.define("foxy-internal-form",B);export{B as I};

package/dist/cdn/shared-eb8a9f27.js

@@ -1 +0,0 @@
-import{ap as e,aq as t,ar as a,as as s,at as i,au as n,av as r,aw as o,o as l,ax as d,ay as u,az as c,aA as h,aB as m,aC as v,aD as g,m as p,_ as y,aE as b}from"./shared-d1195c27.js";import"./shared-6b578d1a.js";import"./shared-ff10b9fb.js";import"./shared-a1f697c2.js";import"./shared-3ef5dcef.js";import"./shared-cc8ce493.js";import"./shared-f6f4bed5.js";import"./shared-3ebbd21d.js";import{d as f,P as x,A as _,c as w,h as $,L as E}from"./shared-dc73b9a5.js";import"./shared-7edf38e9.js";import"./shared-f79438f8.js";import{p as k}from"./shared-0d4cdb19.js";import{a as T,y as S}from"./shared-70612035.js";import{I as C}from"./shared-17a61265.js";import{s as V}from"./shared-99940888.js";import{i as A}from"./shared-fcdb896f.js";var M={raise:e,send:t,sendParent:a,sendUpdate:s,log:i,cancel:n,start:r,stop:o,assign:l,after:d,done:u,respond:c,forwardTo:h,escalate:m,choose:v,pure:g};const j=f((e=>t=>{const{element:a,name:s,strings:i}=t.committer;if(2!==i.length||""!==i[0]||""!==i[1])throw new Error("live directive bindings must not contain any static values");if(t.committer.parts.length>1)throw new Error("live directive must be the only directive for an attribute or property");if(t instanceof x)a[s]!==e&&t.setValue(e);else{if(!(t instanceof _))throw new Error("live directive can only be used on attributes or properties");a.getAttribute(s)!==e&&t.setValue(e)}}));class I extends CustomEvent{constructor(e){super("change",{detail:e})}}class D extends CustomEvent{constructor(e){super("change",{detail:e})}}class U extends D{}let q,F,P=e=>e;class L extends(T(C(E))){constructor(){super(...arguments),this.label="",this.value="",this.disabled=!1,this.readonly=!1,this.errorMessage="",this.__i18n={formatValue:e=>e.join(""),parseValue:e=>{const{count:t,units:a}=k(e);return[t.toString(),a]}},this.__getItems=p((e=>{const t=k(e).count;return[{value:"d",label:this.t("day",{count:t})},{value:"w",label:this.t("week",{count:t})},{value:"m",label:this.t("month",{count:t})},{value:"y",label:this.t("year",{count:t})}]}))}static get properties(){return y(y({},super.properties),{},{checkValidity:{attribute:!1},errorMessage:{type:String,attribute:"error-message"},disabled:{type:Boolean,reflect:!0},readonly:{type:Boolean,reflect:!0},label:{type:String},value:{type:String}})}static get styles(){return w(q||(q=P`:host{display:block}vaadin-custom-field{width:100%;font-size:0;line-height:0;padding-top:0!important}vaadin-custom-field::part(label){padding-bottom:var(--lumo-space-s)}vaadin-custom-field::part(error-message)[aria-hidden=false]{padding-top:var(--lumo-space-xs)}vaadin-combo-box,vaadin-integer-field{width:calc(50% - (var(--lumo-space-s)/ 2))}vaadin-integer-field{margin-right:var(--lumo-space-s);padding:0}vaadin-combo-box::part(text-field){padding:0}`))}render(){return $(F||(F=P` <vaadin-custom-field data-testid="field" .i18n="${0}" .label="${0}" .value="${0}" ?disabled="${0}" ?readonly="${0}" .errorMessage="${0}" .checkValidity="${0}" @change="${0}"> <vaadin-integer-field data-testid="value" min="1" max="999" has-controls prevent-invalid-input ?invalid="${0}" ?disabled="${0}" ?readonly="${0}"> </vaadin-integer-field> <vaadin-combo-box data-testid="units" item-value-path="value" item-label-path="label" .items="${0}" ?invalid="${0}" ?disabled="${0}" ?readonly="${0}"> </vaadin-combo-box> </vaadin-custom-field> `),this.__i18n,this.label,j(this.value),this.disabled,this.readonly,this.errorMessage,this.checkValidity,this.__handleChange,!this.checkValidity(),this.disabled,this.readonly,this.__getItems(this.value),!this.checkValidity(),this.disabled,this.readonly)}updated(e){super.updated(e);const t=this.renderRoot.firstElementChild;t.value!==this.value&&(t.value=this.value)}checkValidity(){return!0}__handleChange(e){const t=e.target;this.value=t.value,this.dispatchEvent(new U(this.value))}}const B=b({id:"choice",type:"parallel",context:{defaultCustomValue:"",customValue:null,custom:!1,items:[],value:null,type:"text",min:null,max:null},states:{mutability:{initial:"editable",states:{editable:{},readonly:{}},on:{SET_READONLY:[{target:".editable",cond:"isPayloadFalsey"},{target:".readonly",cond:"isPayloadTruthy"}]}},interactivity:{initial:"enabled",states:{enabled:{},disabled:{}},on:{SET_DISABLED:[{target:".enabled",cond:"isPayloadFalsey"},{target:".disabled",cond:"isPayloadTruthy"}]}},selection:{initial:"unknown",states:{unknown:{always:[{target:"multiple",cond:"isValueArray"},{target:"single"}]},none:{},single:{},multiple:{}}},extension:{initial:"unknown",states:{unknown:{always:[{target:"present",cond:"hasCustom"},{target:"absent"}]},absent:{},present:{initial:"unknown",states:{unknown:{always:[{target:"selected",cond:"hasCustomValue"},{target:"available"}]},available:{on:{SET_TYPE:{actions:"setType"}}},selected:{initial:"unknown",states:{unknown:{always:[{target:"number",cond:"showsNumberField"},{target:"integer",cond:"showsIntegerField"},{target:"textarea",cond:"showsTextarea"},{target:"frequency",cond:"showsFrequency"},{target:"text"}]},text:{},frequency:{},textarea:{},integer:{type:"parallel",states:{min:{initial:"unknown",states:{unknown:{always:[{target:"custom",cond:"hasMinConstraint"},{target:"none"}]},none:{},custom:{}}},max:{initial:"unknown",states:{unknown:{always:[{target:"custom",cond:"hasMaxConstraint"},{target:"none"}]},none:{},custom:{}}}}},number:{type:"parallel",states:{min:{initial:"unknown",states:{unknown:{always:[{target:"custom",cond:"hasMinConstraint"},{target:"none"}]},none:{},custom:{}}},max:{initial:"unknown",states:{unknown:{always:[{target:"custom",cond:"hasMaxConstraint"},{target:"none"}]},none:{},custom:{}}}}}}}}}}}},on:{SET_DEFAULT_CUSTOM_VALUE:{actions:"setDefaultCustomValue"},SET_CUSTOM:{actions:"setCustom",target:[".selection.unknown",".extension.unknown"]},SET_VALUE:{actions:"setValue",target:[".selection.unknown",".extension.unknown"]},SET_ITEMS:{actions:"setItems",target:[".selection.unknown",".extension.unknown"]},SET_TYPE:{actions:"setType",target:".extension.unknown"},SET_MIN:{actions:"setMin",target:".extension.unknown"},SET_MAX:{actions:"setMax",target:".extension.unknown"}}},{guards:{isPayloadFalsey:(e,t)=>!t.data,isPayloadTruthy:(e,t)=>!!t.data,isValueArray:e=>Array.isArray(e.value),showsIntegerField:e=>"integer"===e.type,showsNumberField:e=>"number"===e.type,showsFrequency:e=>"frequency"===e.type,showsTextarea:e=>"textarea"===e.type,hasMinConstraint:e=>"number"==typeof e.min,hasMaxConstraint:e=>"number"==typeof e.max,hasCustomValue:e=>"string"==typeof e.customValue,hasCustom:e=>e.custom},actions:{setDefaultCustomValue:M.assign({defaultCustomValue:(e,t)=>t.data}),setValue:M.assign({value:(e,t)=>t.data,customValue:(e,t)=>Array.isArray(t.data)?t.data.find((t=>!e.items.includes(t))):e.items.includes(t.data)?null:t.data}),setCustom:M.assign({custom:(e,t)=>t.data}),setItems:M.assign({items:(e,t)=>t.data}),setType:M.assign({type:(e,t)=>t.data}),setMin:M.assign({min:(e,t)=>t.data}),setMax:M.assign({max:(e,t)=>t.data})}});let N,O,Y,R,z,X,G,H,J,K,Q,W,Z,ee,te=e=>e;const ae=`@foxy.io/elements::other[${(Math.pow(10,10)*Math.random()).toFixed(0)}]`;class se extends S{constructor(){super(...arguments),this.getText=e=>e,this.__service=A(B).onChange((()=>this.requestUpdate())).onTransition((({changed:e})=>e&&this.requestUpdate())).start()}static get scopedElements(){return{"vaadin-integer-field":customElements.get("vaadin-integer-field"),"vaadin-number-field":customElements.get("vaadin-number-field"),"vaadin-text-field":customElements.get("vaadin-text-field"),"x-frequency-input":L,"vaadin-text-area":customElements.get("vaadin-text-area"),"iron-icon":customElements.get("iron-icon")}}static get styles(){return[super.styles,w(Y||(Y=te`:host{--item-width:calc((var(--lumo-space-m) * 2) + 1.25rem)}.ml-xxl{margin-left:var(--item-width)}.item{height:var(--lumo-size-l);width:var(--item-width)}.radio{height:1.25rem;width:1.25rem}.check{height:1.125rem;width:1.125rem}.dot{height:.5rem;width:.5rem}`))]}static get properties(){return y(y({},super.properties),{},{defaultCustomValue:{type:String,attribute:"default-custom-value"},disabled:{type:Boolean},readonly:{type:Boolean},custom:{type:Boolean},type:{type:String},min:{type:Number},max:{type:Number},value:{type:Array},items:{type:Array},getText:{attribute:!1}})}get defaultCustomValue(){return this.__service.state.context.defaultCustomValue}set defaultCustomValue(e){this.__service.send("SET_DEFAULT_CUSTOM_VALUE",{data:e})}get readonly(){return this.__service.state.matches("mutability.readonly")}set readonly(e){this.__service.send("SET_READONLY",{data:e})}get disabled(){return this.__service.state.matches("interactivity.disabled")}set disabled(e){this.__service.send("SET_DISABLED",{data:e})}get custom(){return this.__service.state.matches("extension.present")}set custom(e){this.__service.send("SET_CUSTOM",{data:e})}get type(){return this.__service.state.context.type}set type(e){this.__service.send("SET_TYPE",{data:e})}get min(){return this.__service.state.context.min}set min(e){this.__service.send("SET_MIN",{data:e})}get max(){return this.__service.state.context.max}set max(e){this.__service.send("SET_MAX",{data:e})}get value(){return this.__service.state.context.value}set value(e){this.__service.send("SET_VALUE",{data:e})}get items(){return this.__service.state.context.items}set items(e){this.__service.send("SET_ITEMS",{data:e})}render(){const e=this.custom?[...this.items,ae]:this.items,t=Array.isArray(this.value),a=this.__service.state.matches("extension.present.selected"),s=$(R||(R=te` ${0} `),e.map(((e,s,i)=>{var n;const r=this.custom&&s===i.length-1,o=r?a:t?!!(null===(n=this.value)||void 0===n?void 0:n.includes(e)):e===String(this.value),l=this.disabled||!this._isI18nReady,d=V({value:r?ae:e,name:t?e:"choice","data-testid":`item-${e}`,"?disabled":l,"@change":t=>{if(this.readonly)return t.preventDefault();const a=t.target.checked,s=e===ae?this.defaultCustomValue:e,i=this.value;Array.isArray(i)?this.value=e===ae?a?[...i,s]:i.slice(0,i.length-1):a?[s,...i]:i.filter((e=>e!==s)):this.value=a?s:null,this.dispatchEvent(new I(this.value))}}),u=$(z||(z=te` <div> ${0} </div> `),e===ae?this._t("choice.other").toString():$(X||(X=te`<slot name="${0}">${0}</slot>`),`${e}-label`,this.getText(e)));return $(G||(G=te` <div class="ml-xxl border-t border-contrast-10 ${0}"></div> ${0} <div class="mr-m ml-xxl"> ${0} ${0} </div> `),s?"":"hidden",t?function(e,t,a,s,i){const n="transition ease-in-out duration-200",r=`${n} transform ${a?"scale-100":"scale-0"} ${e?"text-contrast-70":"text-tint"}`;return $(O||(O=te` <label class="group flex items-center ${0}"> <div class="item flex items-center justify-center flex-shrink-0 text-primary-contrast"> <div class="check rounded-s ${0} ${0} ${0} focus-within-shadow-outline"> <iron-icon icon="lumo:checkmark" class="block w-full h-full ${0}"></iron-icon> <input type="checkbox" class="sr-only" .checked="${0}" ...="${0}"> </div> </div> <div class="font-lumo leading-m ${0}">${0}</div> </label> `),t||e?"":"cursor-pointer","border "+(e?"border-dashed border-contrast-30":"border-transparent"),n,e?"":t?a?"bg-primary-50":"bg-contrast-10":a?"bg-primary":"bg-contrast-20 group-hover-bg-contrast-30",r,a,s,t?"text-disabled":e?"text-secondary":"text-body",i)}(this.readonly,l,o,d,u):function(e,t,a,s,i){const n="transition ease-in-out duration-200",r=`${n} ${t||e?"":"shadow-xs"} transform ${a?"scale-100":"scale-0"} ${e?"bg-contrast-70":"bg-tint"}`;return $(N||(N=te` <label class="group flex items-center ${0}"> <div class="item flex items-center justify-center flex-shrink-0"> <div class="flex radio rounded-full ${0} ${0} ${0} focus-within-shadow-outline"> <div class="dot m-auto rounded-full ${0}"></div> <input type="radio" class="sr-only" .checked="${0}" ...="${0}"> </div> </div> <div class="font-lumo leading-m ${0}">${0}</div> </label> `),t||e?"":"cursor-pointer","border "+(e?"border-dashed border-contrast-30":"border-transparent"),n,e?"":t?a?"bg-primary-50":"bg-contrast-10":a?"bg-primary":"bg-contrast-20 group-hover-bg-contrast-30",r,a,s,t?"text-disabled":e?"text-secondary":"text-body",i)}(this.readonly,l,o,d,u),e===ae&&a?this.__field:"",e!==ae?$(H||(H=te`<slot name="${0}"></slot>`),e):"")})));return $(J||(J=te`<form>${0}</form> `),s)}get __field(){const e=V({placeholder:this._t("choice.other").toString(),class:"w-full mb-m",value:this.__service.state.context.customValue,max:this.max,min:this.min,ns:this.ns,"?disabled":this.disabled,"?readonly":this.readonly,"data-testid":"field","@change":e=>{e.stopPropagation();const t=e.target.value;Array.isArray(this.value)?this.value=this.value.slice(0,this.value.length-1).concat(t):this.value=t,this.dispatchEvent(new I(this.value))}});return"frequency"===this.type?$(K||(K=te`<x-frequency-input ...="${0}"></x-frequency-input>`),e):"integer"===this.type?$(Q||(Q=te`<vaadin-integer-field ...="${0}" has-controls></vaadin-integer-field>`),e):"number"===this.type?$(W||(W=te`<vaadin-number-field ...="${0}" has-controls></vaadin-number-field>`),e):"textarea"===this.type?$(Z||(Z=te`<vaadin-text-area ...="${0}"></vaadin-text-area>`),e):$(ee||(ee=te`<vaadin-text-field ...="${0}"></vaadin-text-field>`),e)}}export{se as C,D,I as a,M as b};

package/dist/elements/public/TemplateConfigForm/CountriesList.d.ts

@@ -1,21 +0,0 @@
-import { ScopedElementsMap } from '@open-wc/scoped-elements';
-import { TemplateResult } from 'lit-html';
-import { NucleonElement } from '../NucleonElement/NucleonElement';
-import { PropertyDeclarations } from 'lit-element';
-import { Rels } from '@foxy.io/sdk/backend';
-import { Resource } from '@foxy.io/sdk/core';
-declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
-    defaultNS: string;
-} & {
-    styles: import("lit-element").CSSResultArray;
-} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/src/types").ScopedElementsHost>;
-export declare class CountriesList extends Base<Resource<Rels.Countries>> {
-    static get scopedElements(): ScopedElementsMap;
-    static get properties(): PropertyDeclarations;
-    countries: Record<string, '*' | string[]>;
-    regions: string;
-    private __newCountry;
-    render(): TemplateResult;
-    private __addCountry;
-}
-export {};

package/dist/elements/public/TemplateConfigForm/CountriesList.js

@@ -1,137 +0,0 @@
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
-import { html } from 'lit-html';
-import { ConfigurableMixin } from "../../../mixins/configurable.js";
-import { CountryCard } from "./CountryCard.js";
-import { NucleonElement } from "../NucleonElement/NucleonElement.js";
-import { ThemeableMixin } from "../../../mixins/themeable.js";
-import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { classMap } from "../../../utils/class-map.js";
-import { ifDefined } from 'lit-html/directives/if-defined';
-const Base = ScopedElementsMixin(ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement))));
-export class CountriesList extends Base {
-    constructor() {
-        super(...arguments);
-        this.countries = {};
-        this.regions = '';
-        this.__newCountry = '';
-    }
-    static get scopedElements() {
-        return {
-            'x-country-card': CountryCard,
-            'iron-icon': customElements.get('iron-icon'),
-        };
-    }
-    static get properties() {
-        return {
-            ...super.properties,
-            __newCountry: { attribute: false },
-            countries: { type: Object },
-            regions: { type: String },
-        };
-    }
-    render() {
-        var _a, _b;
-        return html `
-      <div>
-        <div class="space-y-s" data-testid="countries">
-          ${Object.entries(this.countries).map(([country, regions]) => {
-            var _a, _b;
-            let regionsLink;
-            try {
-                const url = new URL(this.regions);
-                url.searchParams.set('country_code', country);
-                regionsLink = url.toString();
-            }
-            catch (_c) {
-                regionsLink = '';
-            }
-            return html `
-              <x-country-card
-                regions=${JSON.stringify(regions === '*' ? [] : regions)}
-                code=${country}
-                name=${ifDefined((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.values[country]) === null || _b === void 0 ? void 0 : _b.default)}
-                href=${regionsLink}
-                lang=${this.lang}
-                ns=${this.ns}
-                ?disabled=${this.disabled}
-                ?readonly=${this.readonly}
-                @update:regions=${(evt) => {
-                const newCountries = { ...this.countries };
-                const newRegions = evt.currentTarget.regions;
-                newCountries[country] = newRegions.length ? newRegions : '*';
-                this.countries = newCountries;
-                this.dispatchEvent(new CustomEvent('update:countries'));
-            }}
-                @delete=${() => {
-                const newCountries = { ...this.countries };
-                delete newCountries[country];
-                this.countries = newCountries;
-                this.dispatchEvent(new CustomEvent('update:countries'));
-            }}
-              >
-              </x-country-card>
-            `;
-        })}
-
-          <div
-            data-testid="new-country"
-            class=${classMap({
-            'h-m flex items-center rounded transition-colors': true,
-            'border border-contrast-10 ring-primary-50': true,
-            'hover-border-contrast-40': !this.disabled,
-            'focus-within-ring-1 focus-within-border-primary-50': !this.disabled,
-            'flex': !this.readonly,
-            'hidden': this.readonly,
-        })}
-          >
-            <input
-              placeholder=${this.t('add_country')}
-              class="w-full bg-transparent appearance-none h-m text-s px-m focus-outline-none"
-              list="list"
-              .value=${this.__newCountry}
-              ?disabled=${this.disabled}
-              ?readonly=${this.readonly}
-              @keydown=${(evt) => {
-            if (evt.key === 'Enter' && this.__newCountry)
-                this.__addCountry();
-        }}
-              @input=${(evt) => {
-            const target = evt.currentTarget;
-            this.__newCountry = target.value;
-        }}
-            />
-
-            <button
-              aria-label=${this.t('create')}
-              class=${classMap({
-            'mr-xs flex-shrink-0': true,
-            'flex items-center justify-center rounded-full transition-colors': true,
-            'bg-contrast-5 text-disabled cursor-default': !this.__newCountry,
-            'bg-success-10 text-success cursor-pointer': !!this.__newCountry,
-            'hover-bg-success hover-text-success-contrast': !!this.__newCountry,
-            'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.__newCountry,
-        })}
-              style="width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)"
-              ?disabled=${!this.__newCountry || this.disabled}
-              @click=${this.__addCountry}
-            >
-              <iron-icon icon="icons:add" class="icon-inline text-m"></iron-icon>
-            </button>
-          </div>
-        </div>
-
-        <datalist id="list">
-          ${Object.entries((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : {}).map(([code, country]) => {
-            return html `<option value=${code}>${country.default}</option>`;
-        })}
-        </datalist>
-      </div>
-    `;
-    }
-    __addCountry() {
-        this.countries = { ...this.countries, [this.__newCountry]: '*' };
-        this.__newCountry = '';
-        this.dispatchEvent(new CustomEvent('update:countries'));
-    }
-}
-//# sourceMappingURL=CountriesList.js.map

package/dist/elements/public/TemplateConfigForm/CountriesList.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CountriesList.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateConfigForm/CountriesList.ts"],"names":[],"mappings":"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","sourcesContent":["import { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { CountryCard } from './CountryCard';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nconst Base = ScopedElementsMixin(\n  ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement)))\n);\n\nexport class CountriesList extends Base<Resource<Rels.Countries>> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'x-country-card': CountryCard,\n      'iron-icon': customElements.get('iron-icon'),\n    };\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __newCountry: { attribute: false },\n      countries: { type: Object },\n      regions: { type: String },\n    };\n  }\n\n  countries: Record<string, '*' | string[]> = {};\n\n  regions = '';\n\n  private __newCountry = '';\n\n  render(): TemplateResult {\n    return html`\n      <div>\n        <div class=\"space-y-s\" data-testid=\"countries\">\n          ${Object.entries(this.countries).map(([country, regions]) => {\n            let regionsLink: string;\n\n            try {\n              const url = new URL(this.regions);\n              url.searchParams.set('country_code', country);\n              regionsLink = url.toString();\n            } catch {\n              regionsLink = '';\n            }\n\n            return html`\n              <x-country-card\n                regions=${JSON.stringify(regions === '*' ? [] : regions)}\n                code=${country}\n                name=${ifDefined(this.data?.values[country]?.default)}\n                href=${regionsLink}\n                lang=${this.lang}\n                ns=${this.ns}\n                ?disabled=${this.disabled}\n                ?readonly=${this.readonly}\n                @update:regions=${(evt: CustomEvent) => {\n                  const newCountries = { ...this.countries };\n                  const newRegions = (evt.currentTarget as CountryCard).regions;\n\n                  newCountries[country] = newRegions.length ? newRegions : '*';\n                  this.countries = newCountries;\n\n                  this.dispatchEvent(new CustomEvent('update:countries'));\n                }}\n                @delete=${() => {\n                  const newCountries = { ...this.countries };\n                  delete newCountries[country];\n                  this.countries = newCountries;\n\n                  this.dispatchEvent(new CustomEvent('update:countries'));\n                }}\n              >\n              </x-country-card>\n            `;\n          })}\n\n          <div\n            data-testid=\"new-country\"\n            class=${classMap({\n              'h-m flex items-center rounded transition-colors': true,\n              'border border-contrast-10 ring-primary-50': true,\n              'hover-border-contrast-40': !this.disabled,\n              'focus-within-ring-1 focus-within-border-primary-50': !this.disabled,\n              'flex': !this.readonly,\n              'hidden': this.readonly,\n            })}\n          >\n            <input\n              placeholder=${this.t('add_country')}\n              class=\"w-full bg-transparent appearance-none h-m text-s px-m focus-outline-none\"\n              list=\"list\"\n              .value=${this.__newCountry}\n              ?disabled=${this.disabled}\n              ?readonly=${this.readonly}\n              @keydown=${(evt: KeyboardEvent) => {\n                if (evt.key === 'Enter' && this.__newCountry) this.__addCountry();\n              }}\n              @input=${(evt: InputEvent) => {\n                const target = evt.currentTarget as HTMLInputElement;\n                this.__newCountry = target.value;\n              }}\n            />\n\n            <button\n              aria-label=${this.t('create')}\n              class=${classMap({\n                'mr-xs flex-shrink-0': true,\n                'flex items-center justify-center rounded-full transition-colors': true,\n                'bg-contrast-5 text-disabled cursor-default': !this.__newCountry,\n                'bg-success-10 text-success cursor-pointer': !!this.__newCountry,\n                'hover-bg-success hover-text-success-contrast': !!this.__newCountry,\n                'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.__newCountry,\n              })}\n              style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n              ?disabled=${!this.__newCountry || this.disabled}\n              @click=${this.__addCountry}\n            >\n              <iron-icon icon=\"icons:add\" class=\"icon-inline text-m\"></iron-icon>\n            </button>\n          </div>\n        </div>\n\n        <datalist id=\"list\">\n          ${Object.entries(this.data?.values ?? {}).map(([code, country]) => {\n            return html`<option value=${code}>${country.default}</option>`;\n          })}\n        </datalist>\n      </div>\n    `;\n  }\n\n  private __addCountry() {\n    this.countries = { ...this.countries, [this.__newCountry]: '*' };\n    this.__newCountry = '';\n    this.dispatchEvent(new CustomEvent('update:countries'));\n  }\n}\n"]}

package/dist/elements/public/TemplateConfigForm/CountryCard.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CountryCard.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateConfigForm/CountryCard.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement)));\n\nexport class CountryCard extends Base<Resource<Rels.Regions>> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __newRegion: { attribute: false },\n      regions: { type: Array },\n      name: { type: String },\n      code: { type: String },\n    };\n  }\n\n  regions: string[] = [];\n\n  name = '';\n\n  code = '';\n\n  private __newRegion = '';\n\n  render(): TemplateResult {\n    return html`\n      <div\n        class=${classMap({\n          'border border-contrast-10 rounded text-s': true,\n          'text-disabled': this.disabled,\n        })}\n      >\n        <div\n          data-testid=\"country\"\n          class=\"h-m flex justify-between items-center border-b border-contrast-10\"\n        >\n          <div class=\"ml-m\">\n            <span>${this.name || this.code}</span>\n            ${this.name ? html`<span class=\"text-secondary\">${this.code}</span>` : ''}\n          </div>\n\n          <button\n            aria-label=${this.t('delete')}\n            class=${classMap({\n              'mr-xs items-center justify-center rounded-full transition-colors': true,\n              'hover-bg-error-10 hover-text-error': !this.disabled,\n              'focus-outline-none focus-ring-2 ring-inset ring-error-50': !this.disabled,\n              'cursor-default': this.disabled,\n              'flex': !this.readonly,\n              'hidden': this.readonly,\n            })}\n            style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n            ?disabled=${this.disabled}\n            @click=${() => this.dispatchEvent(new CustomEvent('delete'))}\n          >\n            <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n          </button>\n        </div>\n\n        <div data-testid=\"regions\" class=\"flex flex-wrap p-xs\">\n          ${this.regions.map(region => {\n            const name = this.data?.values[region]?.default;\n            const code = region;\n\n            return html`\n              <div\n                class=\"flex items-center border border-contrast-10 h-s m-xs\"\n                style=\"border-radius: var(--lumo-size-s)\"\n              >\n                <span class=\"mx-s\">\n                  <span>${name || code}</span>\n                  ${name ? html`<span class=\"text-secondary\">${code}</span>` : ''}\n                </span>\n\n                <button\n                  aria-label=${this.t('delete')}\n                  class=${classMap({\n                    'items-center justify-center rounded-full transition-colors': true,\n                    'hover-bg-error-10 hover-text-error': !this.disabled,\n                    'focus-outline-none focus-ring-2 ring-inset ring-error-50': !this.disabled,\n                    'cursor-default': this.disabled,\n                    'flex': !this.readonly,\n                    'hidden': this.readonly,\n                  })}\n                  style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n                  ?disabled=${this.disabled}\n                  @click=${() => {\n                    this.regions = this.regions.filter(value => value !== region);\n                    this.dispatchEvent(new CustomEvent('update:regions'));\n                  }}\n                >\n                  <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n                </button>\n              </div>\n            `;\n          })}\n\n          <div\n            data-testid=\"new-region\"\n            style=\"border-radius: var(--lumo-size-s)\"\n            class=${classMap({\n              'h-s m-xs items-center transition-colors border border-contrast-10': true,\n              'hover-border-contrast-40': !this.disabled,\n              'focus-within-ring-1 ring-primary-50 focus-within-border-primary-50': !this.disabled,\n              'flex': !this.readonly,\n              'hidden': this.readonly,\n            })}\n          >\n            <input\n              placeholder=${this.t('add_region')}\n              class=\"bg-transparent appearance-none h-s text-s px-s focus-outline-none\"\n              style=\"width: 8rem\"\n              list=\"list\"\n              .value=${this.__newRegion}\n              ?disabled=${this.disabled}\n              ?readonly=${this.readonly}\n              @keydown=${(evt: KeyboardEvent) => {\n                if (evt.key === 'Enter' && this.__newRegion) this.__addRegion();\n              }}\n              @input=${(evt: InputEvent) => {\n                const target = evt.currentTarget as HTMLInputElement;\n                this.__newRegion = target.value;\n              }}\n            />\n\n            <button\n              style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n              class=${classMap({\n                'flex-shrink-0': true,\n                'flex items-center justify-center rounded-full transition-colors': true,\n                'bg-contrast-5 text-disabled cursor-default': !this.__newRegion,\n                'bg-success-10 text-success cursor-pointer': !!this.__newRegion,\n                'hover-bg-success hover-text-success-contrast': !!this.__newRegion,\n                'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.__newRegion,\n              })}\n              ?disabled=${this.disabled || !this.__newRegion}\n              @click=${this.__addRegion}\n            >\n              <iron-icon icon=\"icons:add\" class=\"icon-inline text-m\"></iron-icon>\n            </button>\n          </div>\n\n          <datalist id=\"list\">\n            ${Object.values(this.data?.values ?? {}).map(region => {\n              return html`<option value=${region.code}>${region.default}</option>`;\n            })}\n          </datalist>\n        </div>\n      </div>\n    `;\n  }\n\n  private __addRegion() {\n    this.regions = [...new Set([...this.regions, this.__newRegion])];\n    this.__newRegion = '';\n    this.dispatchEvent(new CustomEvent('update:regions'));\n  }\n}\n"]}