@descope/web-components-ui 1.0.35

package/dist/umd/9.js

@@ -0,0 +1,312 @@
+/*! For license information please see 9.js.LICENSE.txt */
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9],{9765:(t,e,o)=>{var n=o(4241),i=o(6155),r=o(1402),s=o(4463),a=o(5128);const c=o(9897).iv`
+  :host {
+    display: inline-block;
+    position: relative;
+    outline: none;
+    white-space: nowrap;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  /* Aligns the button with form fields when placed on the same line.
+  Note, to make it work, the form fields should have the same "::before" pseudo-element. */
+  .vaadin-button-container::before {
+    content: '\\2003';
+    display: inline-block;
+    width: 0;
+    max-height: 100%;
+  }
+
+  .vaadin-button-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    min-height: inherit;
+    text-shadow: inherit;
+  }
+
+  [part='prefix'],
+  [part='suffix'] {
+    flex: none;
+  }
+
+  [part='label'] {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;var l=o(1598),u=o(9109),h=o(602);const d=t=>class extends((0,l.f)((0,h.L)(t))){get _activeKeys(){return[" "]}ready(){super.ready(),(0,u.NH)(this,"down",(t=>{this._shouldSetActive(t)&&this._setActive(!0)})),(0,u.NH)(this,"up",(()=>{this._setActive(!1)}))}disconnectedCallback(){super.disconnectedCallback(),this._setActive(!1)}_shouldSetActive(t){return!this.disabled}_onKeyDown(t){super._onKeyDown(t),this._shouldSetActive(t)&&this._activeKeys.includes(t.key)&&(this._setActive(!0),document.addEventListener("keyup",(t=>{this._activeKeys.includes(t.key)&&this._setActive(!1)}),{once:!0}))}_setActive(t){this.toggleAttribute("active",t)}};var m=o(2527),f=o(4062);const p=t=>class extends(d((0,f.N)((0,m.W)(t)))){static get properties(){return{tabindex:{type:Number,value:0,reflectToAttribute:!0}}}get _activeKeys(){return["Enter"," "]}ready(){super.ready(),this.hasAttribute("role")||this.setAttribute("role","button")}_onKeyDown(t){super._onKeyDown(t),this._activeKeys.includes(t.key)&&(t.preventDefault(),this.click())}};(0,a.hC)("vaadin-button",c,{moduleId:"vaadin-button-styles"});class v extends(p((0,r.S)((0,a.Tb)((0,i.k)(n.H3))))){static get is(){return"vaadin-button"}static get template(){return n.dy`
+  <div class="vaadin-button-container">
+    <span part="prefix" aria-hidden="true">
+      <slot name="prefix"></slot>
+    </span>
+    <span part="label">
+      <slot></slot>
+    </span>
+    <span part="suffix" aria-hidden="true">
+      <slot name="suffix"></slot>
+    </span>
+  </div>
+  <slot name="tooltip"></slot>
+`}ready(){super.ready(),this._tooltipController=new s.f(this),this.addController(this._tooltipController)}}customElements.define(v.is,v)},4599:(t,e,o)=>{o(1195),o(9098),o(9416),o(9849),o(4173);var n=o(5128);const i=n.iv`
+  :host {
+    /* Sizing */
+    --lumo-button-size: var(--lumo-size-m);
+    min-width: calc(var(--lumo-button-size) * 2);
+    height: var(--lumo-button-size);
+    padding: 0 calc(var(--lumo-button-size) / 3 + var(--lumo-border-radius-m) / 2);
+    margin: var(--lumo-space-xs) 0;
+    box-sizing: border-box;
+    /* Style */
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    font-weight: 500;
+    color: var(--_lumo-button-color, var(--lumo-primary-text-color));
+    background-color: var(--_lumo-button-background-color, var(--lumo-contrast-5pct));
+    border-radius: var(--lumo-border-radius-m);
+    cursor: var(--lumo-clickable-cursor);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    flex-shrink: 0;
+  }
+
+  /* Set only for the internal parts so we don't affect the host vertical alignment */
+  [part='label'],
+  [part='prefix'],
+  [part='suffix'] {
+    line-height: var(--lumo-line-height-xs);
+  }
+
+  [part='label'] {
+    padding: calc(var(--lumo-button-size) / 6) 0;
+  }
+
+  :host([theme~='small']) {
+    font-size: var(--lumo-font-size-s);
+    --lumo-button-size: var(--lumo-size-s);
+  }
+
+  :host([theme~='large']) {
+    font-size: var(--lumo-font-size-l);
+    --lumo-button-size: var(--lumo-size-l);
+  }
+
+  /* For interaction states */
+  :host::before,
+  :host::after {
+    content: '';
+    /* We rely on the host always being relative */
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: currentColor;
+    border-radius: inherit;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* Hover */
+
+  @media (any-hover: hover) {
+    :host(:hover)::before {
+      opacity: 0.02;
+    }
+  }
+
+  /* Active */
+
+  :host::after {
+    transition: opacity 1.4s, transform 0.1s;
+    filter: blur(8px);
+  }
+
+  :host([active])::before {
+    opacity: 0.05;
+    transition-duration: 0s;
+  }
+
+  :host([active])::after {
+    opacity: 0.1;
+    transition-duration: 0s, 0s;
+    transform: scale(0);
+  }
+
+  /* Keyboard focus */
+
+  :host([focus-ring]) {
+    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+  }
+
+  :host([theme~='primary'][focus-ring]) {
+    box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
+  }
+
+  /* Types (primary, tertiary, tertiary-inline */
+
+  :host([theme~='tertiary']),
+  :host([theme~='tertiary-inline']) {
+    background-color: transparent !important;
+    min-width: 0;
+  }
+
+  :host([theme~='tertiary']) {
+    padding: 0 calc(var(--lumo-button-size) / 6);
+  }
+
+  :host([theme~='tertiary-inline'])::before {
+    display: none;
+  }
+
+  :host([theme~='tertiary-inline']) {
+    margin: 0;
+    height: auto;
+    padding: 0;
+    line-height: inherit;
+    font-size: inherit;
+  }
+
+  :host([theme~='tertiary-inline']) [part='label'] {
+    padding: 0;
+    overflow: visible;
+    line-height: inherit;
+  }
+
+  :host([theme~='primary']) {
+    background-color: var(--_lumo-button-primary-background-color, var(--lumo-primary-color));
+    color: var(--_lumo-button-primary-color, var(--lumo-primary-contrast-color));
+    font-weight: 600;
+    min-width: calc(var(--lumo-button-size) * 2.5);
+  }
+
+  :host([theme~='primary'])::before {
+    background-color: black;
+  }
+
+  @media (any-hover: hover) {
+    :host([theme~='primary']:hover)::before {
+      opacity: 0.05;
+    }
+  }
+
+  :host([theme~='primary'][active])::before {
+    opacity: 0.1;
+  }
+
+  :host([theme~='primary'][active])::after {
+    opacity: 0.2;
+  }
+
+  /* Colors (success, error, contrast) */
+
+  :host([theme~='success']) {
+    color: var(--lumo-success-text-color);
+  }
+
+  :host([theme~='success'][theme~='primary']) {
+    background-color: var(--lumo-success-color);
+    color: var(--lumo-success-contrast-color);
+  }
+
+  :host([theme~='error']) {
+    color: var(--lumo-error-text-color);
+  }
+
+  :host([theme~='error'][theme~='primary']) {
+    background-color: var(--lumo-error-color);
+    color: var(--lumo-error-contrast-color);
+  }
+
+  :host([theme~='contrast']) {
+    color: var(--lumo-contrast);
+  }
+
+  :host([theme~='contrast'][theme~='primary']) {
+    background-color: var(--lumo-contrast);
+    color: var(--lumo-base-color);
+  }
+
+  /* Disabled state. Keep selectors after other color variants. */
+
+  :host([disabled]) {
+    pointer-events: none;
+    color: var(--lumo-disabled-text-color);
+  }
+
+  :host([theme~='primary'][disabled]) {
+    background-color: var(--lumo-contrast-30pct);
+    color: var(--lumo-base-color);
+  }
+
+  :host([theme~='primary'][disabled]) [part] {
+    opacity: 0.7;
+  }
+
+  /* Icons */
+
+  [part] ::slotted(vaadin-icon) {
+    display: inline-block;
+    width: var(--lumo-icon-size-m);
+    height: var(--lumo-icon-size-m);
+  }
+
+  /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
+  [part] ::slotted(vaadin-icon[icon^='vaadin:']) {
+    padding: 0.25em;
+    box-sizing: border-box !important;
+  }
+
+  [part='prefix'] {
+    margin-left: -0.25em;
+    margin-right: 0.25em;
+  }
+
+  [part='suffix'] {
+    margin-left: 0.25em;
+    margin-right: -0.25em;
+  }
+
+  /* Icon-only */
+
+  :host([theme~='icon']:not([theme~='tertiary-inline'])) {
+    min-width: var(--lumo-button-size);
+    padding-left: calc(var(--lumo-button-size) / 4);
+    padding-right: calc(var(--lumo-button-size) / 4);
+  }
+
+  :host([theme~='icon']) [part='prefix'],
+  :host([theme~='icon']) [part='suffix'] {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  /* RTL specific styles */
+
+  :host([dir='rtl']) [part='prefix'] {
+    margin-left: 0.25em;
+    margin-right: -0.25em;
+  }
+
+  :host([dir='rtl']) [part='suffix'] {
+    margin-left: -0.25em;
+    margin-right: 0.25em;
+  }
+
+  :host([dir='rtl'][theme~='icon']) [part='prefix'],
+  :host([dir='rtl'][theme~='icon']) [part='suffix'] {
+    margin-left: 0;
+    margin-right: 0;
+  }
+`;(0,n.hC)("vaadin-button",i,{moduleId:"lumo-button"}),o(9765)},9109:(t,e,o)=>{o.d(e,{BP:()=>M,NH:()=>N});var n=o(7913);const i=!1,r=t=>t,s="string"==typeof document.head.style.touchAction,a="__polymerGestures",c="__polymerGesturesHandled",l="__polymerGesturesTouchAction",u=["mousedown","mousemove","mouseup","click"],h=[0,1,4,2],d=function(){try{return 1===new MouseEvent("test",{buttons:1}).buttons}catch(t){return!1}}();function m(t){return u.indexOf(t)>-1}let f=!1;function p(t){if(!m(t)&&"touchend"!==t)return s&&f&&i?{passive:!0}:void 0}!function(){try{const t=Object.defineProperty({},"passive",{get(){f=!0}});window.addEventListener("test",null,t),window.removeEventListener("test",null,t)}catch(t){}}();const v=navigator.userAgent.match(/iP(?:[oa]d|hone)|Android/u),y={button:!0,command:!0,fieldset:!0,input:!0,keygen:!0,optgroup:!0,option:!0,select:!0,textarea:!0};function b(t){const e=t.type;if(!m(e))return!1;if("mousemove"===e){let e=void 0===t.buttons?1:t.buttons;return t instanceof window.MouseEvent&&!d&&(e=h[t.which]||0),Boolean(1&e)}return 0===(void 0===t.button?0:t.button)}const g={mouse:{target:null,mouseIgnoreJob:null},touch:{x:0,y:0,id:-1,scrollDecided:!1}};function x(t,e,o){t.movefn=e,t.upfn=o,document.addEventListener("mousemove",e),document.addEventListener("mouseup",o)}function w(t){document.removeEventListener("mousemove",t.movefn),document.removeEventListener("mouseup",t.upfn),t.movefn=null,t.upfn=null}const k=window.ShadyDOM&&window.ShadyDOM.noPatch?window.ShadyDOM.composedPath:t=>t.composedPath&&t.composedPath()||[],_={},z=[];function A(t){const e=k(t);return e.length>0?e[0]:t.target}function E(t){const e=t.type,o=t.currentTarget[a];if(!o)return;const n=o[e];if(!n)return;if(!t[c]&&(t[c]={},e.startsWith("touch"))){const o=t.changedTouches[0];if("touchstart"===e&&1===t.touches.length&&(g.touch.id=o.identifier),g.touch.id!==o.identifier)return;s||"touchstart"!==e&&"touchmove"!==e||function(t){const e=t.changedTouches[0],o=t.type;if("touchstart"===o)g.touch.x=e.clientX,g.touch.y=e.clientY,g.touch.scrollDecided=!1;else if("touchmove"===o){if(g.touch.scrollDecided)return;g.touch.scrollDecided=!0;const o=function(t){let e="auto";const o=k(t);for(let t,n=0;n<o.length;n++)if(t=o[n],t[l]){e=t[l];break}return e}(t);let n=!1;const i=Math.abs(g.touch.x-e.clientX),r=Math.abs(g.touch.y-e.clientY);t.cancelable&&("none"===o?n=!0:"pan-x"===o?n=r>i:"pan-y"===o&&(n=i>r)),n?t.preventDefault():Y("track")}}(t)}const i=t[c];if(!i.skip){for(let e,o=0;o<z.length;o++)e=z[o],n[e.name]&&!i[e.name]&&e.flow&&e.flow.start.indexOf(t.type)>-1&&e.reset&&e.reset();for(let o,r=0;r<z.length;r++)o=z[r],n[o.name]&&!i[o.name]&&(i[o.name]=!0,o[e](t))}}function N(t,e,o){return!!_[e]&&(function(t,e,o){const n=_[e],i=n.deps,r=n.name;let s=t[a];s||(t[a]=s={});for(let e,o,n=0;n<i.length;n++)e=i[n],v&&m(e)&&"click"!==e||(o=s[e],o||(s[e]=o={_count:0}),0===o._count&&t.addEventListener(e,E,p(e)),o[r]=(o[r]||0)+1,o._count=(o._count||0)+1);t.addEventListener(e,o),n.touchAction&&M(t,n.touchAction)}(t,e,o),!0)}function D(t){z.push(t),t.emits.forEach((e=>{_[e]=t}))}function M(t,e){s&&t instanceof HTMLElement&&n.YA.run((()=>{t.style.touchAction=e})),t[l]=e}function T(t,e,o){const n=new Event(e,{bubbles:!0,cancelable:!0,composed:!0});if(n.detail=o,r(t).dispatchEvent(n),n.defaultPrevented){const t=o.preventer||o.sourceEvent;t&&t.preventDefault&&t.preventDefault()}}function Y(t){const e=function(t){for(let e,o=0;o<z.length;o++){e=z[o];for(let o,n=0;n<e.emits.length;n++)if(o=e.emits[n],o===t)return e}return null}(t);e.info&&(e.info.prevent=!0)}function X(t,e,o,n){e&&T(e,t,{x:o.clientX,y:o.clientY,sourceEvent:o,preventer:n,prevent:t=>Y(t)})}function L(t,e,o){if(t.prevent)return!1;if(t.started)return!0;const n=Math.abs(t.x-e),i=Math.abs(t.y-o);return n>=5||i>=5}function C(t,e,o){if(!e)return;const n=t.moves[t.moves.length-2],i=t.moves[t.moves.length-1],r=i.x-t.x,s=i.y-t.y;let a,c=0;n&&(a=i.x-n.x,c=i.y-n.y),T(e,"track",{state:t.state,x:o.clientX,y:o.clientY,dx:r,dy:s,ddx:a,ddy:c,sourceEvent:o,hover:()=>function(t,e){let o=document.elementFromPoint(t,e),n=o;for(;n&&n.shadowRoot&&!window.ShadyDOM;){const i=n;if(n=n.shadowRoot.elementFromPoint(t,e),i===n)break;n&&(o=n)}return o}(o.clientX,o.clientY)})}function K(t,e,o){const n=Math.abs(e.clientX-t.x),i=Math.abs(e.clientY-t.y),r=A(o||e);!r||y[r.localName]&&r.hasAttribute("disabled")||(isNaN(n)||isNaN(i)||n<=25&&i<=25||function(t){if("click"===t.type){if(0===t.detail)return!0;const e=A(t);if(!e.nodeType||e.nodeType!==Node.ELEMENT_NODE)return!0;const o=e.getBoundingClientRect(),n=t.pageX,i=t.pageY;return!(n>=o.left&&n<=o.right&&i>=o.top&&i<=o.bottom)}return!1}(e))&&(t.prevent||T(r,"tap",{x:e.clientX,y:e.clientY,sourceEvent:e,preventer:o}))}D({name:"downup",deps:["mousedown","touchstart","touchend"],flow:{start:["mousedown","touchstart"],end:["mouseup","touchend"]},emits:["down","up"],info:{movefn:null,upfn:null},reset(){w(this.info)},mousedown(t){if(!b(t))return;const e=A(t),o=this;x(this.info,(t=>{b(t)||(X("up",e,t),w(o.info))}),(t=>{b(t)&&X("up",e,t),w(o.info)})),X("down",e,t)},touchstart(t){X("down",A(t),t.changedTouches[0],t)},touchend(t){X("up",A(t),t.changedTouches[0],t)}}),D({name:"track",touchAction:"none",deps:["mousedown","touchstart","touchmove","touchend"],flow:{start:["mousedown","touchstart"],end:["mouseup","touchend"]},emits:["track"],info:{x:0,y:0,state:"start",started:!1,moves:[],addMove(t){this.moves.length>2&&this.moves.shift(),this.moves.push(t)},movefn:null,upfn:null,prevent:!1},reset(){this.info.state="start",this.info.started=!1,this.info.moves=[],this.info.x=0,this.info.y=0,this.info.prevent=!1,w(this.info)},mousedown(t){if(!b(t))return;const e=A(t),o=this,n=t=>{const n=t.clientX,i=t.clientY;L(o.info,n,i)&&(o.info.state=o.info.started?"mouseup"===t.type?"end":"track":"start","start"===o.info.state&&Y("tap"),o.info.addMove({x:n,y:i}),b(t)||(o.info.state="end",w(o.info)),e&&C(o.info,e,t),o.info.started=!0)};x(this.info,n,(t=>{o.info.started&&n(t),w(o.info)})),this.info.x=t.clientX,this.info.y=t.clientY},touchstart(t){const e=t.changedTouches[0];this.info.x=e.clientX,this.info.y=e.clientY},touchmove(t){const e=A(t),o=t.changedTouches[0],n=o.clientX,i=o.clientY;L(this.info,n,i)&&("start"===this.info.state&&Y("tap"),this.info.addMove({x:n,y:i}),C(this.info,e,o),this.info.state="track",this.info.started=!0)},touchend(t){const e=A(t),o=t.changedTouches[0];this.info.started&&(this.info.state="end",this.info.addMove({x:o.clientX,y:o.clientY}),C(this.info,e,o))}}),D({name:"tap",deps:["mousedown","click","touchstart","touchend"],flow:{start:["mousedown","touchstart"],end:["click","touchend"]},emits:["tap"],info:{x:NaN,y:NaN,prevent:!1},reset(){this.info.x=NaN,this.info.y=NaN,this.info.prevent=!1},mousedown(t){b(t)&&(this.info.x=t.clientX,this.info.y=t.clientY)},click(t){b(t)&&K(this.info,t)},touchstart(t){const e=t.changedTouches[0];this.info.x=e.clientX,this.info.y=e.clientY},touchend(t){K(this.info,t.changedTouches[0],t)}})}}]);

package/dist/umd/9.js.LICENSE.txt

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/

package/dist/umd/descope-button-js.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[155],{3146:(e,t,o)=>{o.r(t),o.d(t,{Button:()=>l}),o(729);var r=o(2788),n=o(9893),s=o(2089),a=o(3097),d=o(3535);const i=(0,r.iY)("button"),l=(0,r.qC)((0,n.y)({mappings:{backgroundColor:{},borderRadius:{},color:{selector:"::part(label)"},borderColor:{},borderStyle:{},borderWidth:{},fontSize:{},height:{},width:(0,d.zy)({}),cursor:{},padding:{}}}),s.e)((0,a.D)({slots:["prefix","suffix"],wrappedEleName:"vaadin-button",style:"vaadin-button::part(label) { pointer-events: none; }",excludeAttrsSync:["tabindex"],componentName:i}));customElements.define(i,l)}}]);

package/dist/umd/descope-combo-js.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[559],{5319:(e,t,o)=>{o.r(t),o.d(t,{Combo:()=>d});var n=o(2788);o(3146),o(2320);const c=document.createElement("template"),s=(0,n.iY)("combo");c.innerHTML="\n  <descope-button></descope-button>\n  <descope-text-field></descope-text-field>\n";class d extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).appendChild(c.content.cloneNode(!0))}}customElements.define(s,d)}}]);

package/dist/umd/descope-date-picker-js.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[938],{3450:(e,s,a)=>{a.r(s),a.d(s,{DatePicker:()=>n}),a(3054);var c=a(2788),p=a(2089),t=a(3097);const i=(0,c.iY)("date-picker"),n=(0,c.qC)(p.e)((0,t.D)({componentName:i,slots:["prefix","suffix"],wrappedEleName:"vaadin-date-picker",style:""}));customElements.define(i,n)}}]);

package/dist/umd/descope-text-field-js.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[117],{2320:(t,e,i)=>{i.r(e),i.d(e,{TextField:()=>d}),i(6221);var r=i(2788),l=i(9893),s=i(2089),a=i(3097);const o=(0,r.iY)("text-field"),d=(0,r.qC)((0,l.y)({mappings:{placeholderColor:{selector:"> input:placeholder-shown",property:"color"},color:{},borderColor:{selector:"::part(input-field)"},borderWidth:{selector:"::part(input-field)"},borderStyle:{selector:"::part(input-field)"},borderRadius:{selector:"::part(input-field)"},boxShadow:{selector:"::part(input-field)"},height:{selector:"::part(input-field)"},padding:{selector:"::part(input-field)"},backgroundColor:{selector:"::part(input-field)"},labelColor:{selector:"::part(label)",property:"color"}}}),s.e,(t=>class extends t{static get formAssociated(){return!0}#t;constructor(){super(),this.#t=this.attachInternals(),this.hasAttribute("tabindex")||this.setAttribute("tabindex",0)}formAssociatedCallback(){this.setValidity?.()}connectedCallback(){super.connectedCallback();const t=this.proxyElement.querySelector("input");if(!t)throw Error("no input was found");this.checkValidity=()=>t.checkValidity(),this.reportValidity=()=>t.reportValidity(),this.validity=t.validity,this.setValidity=()=>{this.#t.setValidity(t.validity,t.validationMessage)},t.oninput=()=>{this.value=t.value,this.setValidity()}}}))((0,a.D)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:"",excludeAttrsSync:["tabindex"],componentName:o}));customElements.define(o,d)}}]);

package/dist/umd/index.js

@@ -0,0 +1 @@
+!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r():"function"==typeof define&&define.amd?define([],r):"object"==typeof exports?exports.DescopeUI=r():e.DescopeUI=r()}(self,(()=>(()=>{var e,r,t,o={2181:(e,r,t)=>{var o={"./descope-button.js":[3146,840,9,729,146,599,155],"./descope-combo.js":[5319,840,511,9,221,729,146,599,117,155,559],"./descope-date-picker.js":[3450,840,511,9,54,146,938],"./descope-text-field.js":[2320,840,511,221,146,599,117]};function n(e){if(!t.o(o,e))return Promise.resolve().then((()=>{var r=new Error("Cannot find module '"+e+"'");throw r.code="MODULE_NOT_FOUND",r}));var r=o[e],n=r[0];return Promise.all(r.slice(1).map(t.e)).then((()=>t(n)))}n.keys=()=>Object.keys(o),n.id=2181,e.exports=n},7507:(e,r,t)=>{const o=t(2181);e.exports=o.keys().reduce(((e,r)=>(e[r.replace(/.*?([^\/]+)\.js$/,"$1")]=()=>o(r),e)),{})}},n={};function i(e){var r=n[e];if(void 0!==r)return r.exports;var t=n[e]={exports:{}};return o[e](t,t.exports,i),t.exports}i.m=o,e=[],i.O=(r,t,o,n)=>{if(!t){var a=1/0;for(l=0;l<e.length;l++){for(var[t,o,n]=e[l],c=!0,s=0;s<t.length;s++)(!1&n||a>=n)&&Object.keys(i.O).every((e=>i.O[e](t[s])))?t.splice(s--,1):(c=!1,n<a&&(a=n));if(c){e.splice(l--,1);var p=o();void 0!==p&&(r=p)}}return r}n=n||0;for(var l=e.length;l>0&&e[l-1][2]>n;l--)e[l]=e[l-1];e[l]=[t,o,n]},i.F={},i.E=e=>{Object.keys(i.F).map((r=>{i.F[r](e)}))},i.d=(e,r)=>{for(var t in r)i.o(r,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce(((r,t)=>(i.f[t](e,r),r)),[])),i.u=e=>(({117:"descope-text-field-js",155:"descope-button-js",559:"descope-combo-js",938:"descope-date-picker-js"}[e]||e)+".js"),i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),r={},t="DescopeUI:",i.l=(e,o,n,a)=>{if(r[e])r[e].push(o);else{var c,s;if(void 0!==n)for(var p=document.getElementsByTagName("script"),l=0;l<p.length;l++){var d=p[l];if(d.getAttribute("src")==e||d.getAttribute("data-webpack")==t+n){c=d;break}}c||(s=!0,(c=document.createElement("script")).charset="utf-8",c.timeout=120,i.nc&&c.setAttribute("nonce",i.nc),c.setAttribute("data-webpack",t+n),c.src=e),r[e]=[o];var u=(t,o)=>{c.onerror=c.onload=null,clearTimeout(f);var n=r[e];if(delete r[e],c.parentNode&&c.parentNode.removeChild(c),n&&n.forEach((e=>e(o))),t)return t(o)},f=setTimeout(u.bind(null,void 0,{type:"timeout",target:c}),12e4);c.onerror=u.bind(null,c.onerror),c.onload=u.bind(null,c.onload),s&&document.head.appendChild(c)}},i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;i.g.importScripts&&(e=i.g.location+"");var r=i.g.document;if(!e&&r&&(r.currentScript&&(e=r.currentScript.src),!e)){var t=r.getElementsByTagName("script");t.length&&(e=t[t.length-1].src)}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),i.p=e})(),(()=>{var e={826:0};i.f.j=(r,t)=>{var o=i.o(e,r)?e[r]:void 0;if(0!==o)if(o)t.push(o[2]);else{var n=new Promise(((t,n)=>o=e[r]=[t,n]));t.push(o[2]=n);var a=i.p+i.u(r),c=new Error;i.l(a,(t=>{if(i.o(e,r)&&(0!==(o=e[r])&&(e[r]=void 0),o)){var n=t&&("load"===t.type?"missing":t.type),a=t&&t.target&&t.target.src;c.message="Loading chunk "+r+" failed.\n("+n+": "+a+")",c.name="ChunkLoadError",c.type=n,c.request=a,o[1](c)}}),"chunk-"+r,r)}},i.F.j=r=>{if(!i.o(e,r)||void 0===e[r]){e[r]=null;var t=document.createElement("link");i.nc&&t.setAttribute("nonce",i.nc),t.rel="prefetch",t.as="script",t.href=i.p+i.u(r),document.head.appendChild(t)}},i.O.j=r=>0===e[r];var r=(r,t)=>{var o,n,[a,c,s]=t,p=0;if(a.some((r=>0!==e[r]))){for(o in c)i.o(c,o)&&(i.m[o]=c[o]);if(s)var l=s(i)}for(r&&r(t);p<a.length;p++)n=a[p],i.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return i.O(l)},t=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];t.forEach(r.bind(null,0)),t.push=r.bind(null,t.push.bind(t))})(),i.O(0,[826],(()=>{[840,9,729,146,599,155,511,221,117,559,54,938].map(i.E)}),5);var a=i(7507);return i.O(a)})()));

package/package.json

@@ -0,0 +1,45 @@
+{
+	"name": "@descope/web-components-ui",
+	"version": "1.0.35",
+	"description": "",
+	"main": "dist/cjs/index.cjs.js",
+	"module": "dist/index.esm.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		"require": "./dist/cjs/index.cjs.js",
+		"import": "./dist/index.esm.js"
+	},
+	"scripts": {
+		"test": "jest",
+		"lint": "echo \"Error: no lint specified\" && exit 0",
+		"build:umd": "webpack -c webpack.prod.js",
+		"build:lib": "rollup -c",
+		"build": "npm run build:umd && npm run build:lib",
+		"start": "webpack serve -c webpack.dev.js --port=8888"
+	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"license": "UNLICENSED",
+	"devDependencies": {
+		"@babel/preset-env": "^7.22.2",
+		"@rollup/plugin-node-resolve": "^15.0.2",
+		"html-webpack-plugin": "^5.5.1",
+		"jest": "^29.5.0",
+		"jest-environment-jsdom": "^29.5.0",
+		"rollup": "^3.21.4",
+		"webpack": "^5.79.0",
+		"webpack-cli": "^5.0.1",
+		"webpack-dev-server": "^4.13.3"
+	},
+	"dependencies": {
+		"@vaadin/button": "24.0.4",
+		"@vaadin/date-picker": "24.0.4",
+		"@vaadin/text-field": "24.0.4",
+		"color": "^4.2.3",
+		"lodash.merge": "4.6.2",
+		"lodash.set": "4.3.2",
+		"rollup-plugin-import-css": "^3.2.1"
+	}
+}

package/src/components/descope-button.js

@@ -0,0 +1,39 @@
+import "@vaadin/button";
+import { getComponentName, createStyleMixin, draggableMixin, createProxy, compose } from "../componentsHelpers";
+import { matchHostStyle } from "../componentsHelpers/createStyleMixin/helpers";
+
+const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
+
+const componentName = getComponentName("button");
+
+const Button = compose(
+  createStyleMixin({
+    // todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
+    mappings: {
+      'backgroundColor': {},
+      'borderRadius': {},
+      'color': { selector: '::part(label)' },
+      'borderColor': {},
+      'borderStyle': {},
+      'borderWidth': {},
+      'fontSize': {},
+      'height': {},
+      'width': matchHostStyle({}),
+      'cursor': {},
+      'padding': {},
+    },
+  }),
+  draggableMixin,
+)(
+  createProxy({
+    slots: ["prefix", "suffix"],
+    wrappedEleName: "vaadin-button",
+    style: `${editorOverrides}`,
+    excludeAttrsSync: ['tabindex'],
+    componentName
+  })
+)
+
+customElements.define(componentName, Button);
+
+export { Button }

package/src/components/descope-combo.js

@@ -0,0 +1,26 @@
+import { getComponentName } from '../componentsHelpers/index.js';
+import './descope-button.js'
+import './descope-text-field.js'
+
+const template = document.createElement('template')
+
+const componentName = getComponentName("combo");
+
+template.innerHTML = `
+  <descope-button></descope-button>
+  <descope-text-field></descope-text-field>
+`
+
+class Combo extends HTMLElement {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).appendChild(
+      template.content.cloneNode(true)
+    );
+  }
+}
+
+customElements.define(componentName, Combo);
+
+export { Combo }

package/src/components/descope-date-picker.js

@@ -0,0 +1,19 @@
+import "@vaadin/date-picker";
+import { getComponentName, draggableMixin, createProxy, compose } from "../componentsHelpers";
+
+const componentName = getComponentName("date-picker");
+
+const DatePicker = compose(
+	draggableMixin
+)(
+	createProxy({
+		componentName,
+		slots: ["prefix", "suffix"],
+		wrappedEleName: "vaadin-date-picker",
+		style: ``,
+	})
+);
+
+customElements.define(componentName, DatePicker);
+
+export { DatePicker }

package/src/components/descope-text-field.js

@@ -0,0 +1,36 @@
+import "@vaadin/text-field";
+import { getComponentName, createStyleMixin, draggableMixin, createProxy, inputMixin, compose } from "../componentsHelpers";
+
+const componentName = getComponentName("text-field")
+
+const TextField = compose(
+  createStyleMixin({
+    mappings: {
+      'placeholderColor': { selector: '> input:placeholder-shown', property: 'color' },
+      'color': {},
+      'borderColor': { selector: '::part(input-field)' },
+      'borderWidth': { selector: '::part(input-field)' },
+      'borderStyle': { selector: '::part(input-field)' },
+      'borderRadius': { selector: '::part(input-field)' },
+      'boxShadow': { selector: '::part(input-field)' },
+      'height': { selector: '::part(input-field)' },
+      'padding': { selector: '::part(input-field)' },
+      'backgroundColor': { selector: '::part(input-field)' },
+      'labelColor': { selector: '::part(label)', property: 'color' },
+    },
+  }),
+  draggableMixin,
+  inputMixin
+)(
+  createProxy({
+    slots: ["prefix", "suffix"],
+    wrappedEleName: "vaadin-text-field",
+    style: ``,
+    excludeAttrsSync: ['tabindex'],
+    componentName
+  })
+);
+
+customElements.define(componentName, TextField);
+
+export { TextField }

package/src/componentsHelpers/createProxy/helpers.js

@@ -0,0 +1,33 @@
+
+const observeAttributes = (ele, callback, excludeAttrs) => {
+  // sync all attrs on init
+  callback(...Array.from(ele.attributes).map(attr => attr.name));
+
+  const observer = new MutationObserver((mutationsList) => {
+    for (const mutation of mutationsList) {
+      if (mutation.type === "attributes" && !excludeAttrs.includes(mutation.attributeName)) {
+        callback(mutation.attributeName);
+      }
+    }
+  });
+
+  observer.observe(ele, { attributes: true });
+}
+
+const createSyncAttrsCb = (srcEle, targetEle) => (...attrNames) => {
+  attrNames.forEach(attrName => {
+    const srcAttrVal = srcEle.getAttribute(attrName);
+    if (srcAttrVal !== null) {
+      if (targetEle.getAttribute(attrName) !== srcAttrVal) {
+        targetEle.setAttribute(attrName, srcAttrVal);
+      }
+    } else {
+      targetEle.removeAttribute(attrName);
+    }
+  })
+}
+
+export const syncAttrs = (ele1, ele2, excludeAttrs) => {
+  observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), excludeAttrs)
+  observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), excludeAttrs)
+}

package/src/componentsHelpers/createProxy/index.js

@@ -0,0 +1,82 @@
+import { syncAttrs } from "./helpers";
+
+export const createProxy = ({ componentName, wrappedEleName, slots = [], style, excludeAttrsSync = [] }) => {
+
+	const template = `
+		${style ? `<style id="create-proxy">${style}</style>` : ''}
+		<${wrappedEleName}>
+		<slot></slot>
+		${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join("")}
+		</${wrappedEleName}>
+	`;
+
+	class ProxyElement extends HTMLElement {
+		static get componentName() {
+			return componentName;
+		}
+
+		constructor() {
+			super().attachShadow({ mode: "open" }).innerHTML = template;
+			this.hostElement = this.shadowRoot.host;
+			this.componentName = this.hostElement.tagName.toLowerCase()
+			this.wrappedComponentName = wrappedEleName
+		}
+
+		#checkComponentName() {
+			if (this.componentName !== componentName) {
+				throw Error(`component name mismatch, expected "${componentName}", current "${actualComponentName}"`)
+			}
+		}
+
+		connectedCallback() {
+			if (this.shadowRoot.isConnected) {
+				this.#checkComponentName()
+
+				this.proxyElement = this.shadowRoot.querySelector(wrappedEleName);
+				this.setAttribute('tabindex', '0');
+				
+				// we want to focus on the proxy element when focusing our WC
+				this.onfocus = (e) => {
+					this.proxyElement.focus()
+				}
+
+				// `onkeydown` is set on `proxyElement` support proper tab-index navigation
+				// this support is needed since both proxy host and element catch `focus`/`blur` event
+				// which causes faulty behaviour.
+				this.proxyElement.onkeydown = (e) => {
+					if (e.shiftKey && e.keyCode === 9) {
+						this.removeAttribute('tabindex');
+						// We want to defer the action of setting the tab index back
+						// so it will happen after focusing the previous element
+						setTimeout(() => this.setAttribute('tabindex', '0'), 0)
+					}
+				}
+
+				this.mouseoverCbRef = () => {
+					this.proxyElement.setAttribute('hover', '');
+					this.proxyElement.addEventListener('mouseleave', () =>
+						this.proxyElement.removeAttribute('hover'), { once: true })
+				}
+
+				this.proxyElement.addEventListener('mouseover', this.mouseoverCbRef);
+
+				// sync events
+				this.addEventListener = this.proxyElement.addEventListener;
+
+				syncAttrs(this.proxyElement, this.hostElement, excludeAttrsSync);
+			}
+		}
+
+		disconnectedCallback() {
+			this.proxyElement.removeEventListener('mouseover', this.mouseoverCbRef)
+		}
+
+		attributeChangedCallback() {
+			if (!this.proxyElement) {
+				return;
+			}
+		}
+	}
+
+	return ProxyElement;
+};