@descope/web-components-ui 1.0.295 → 1.0.297

package/src/components/text-components/descope-markdown-content/MarkdownContentClass.js

@@ -0,0 +1,98 @@
+import markdownit from 'markdown-it';
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../../mixins';
+import { compose } from '../../../helpers';
+import { getComponentName } from '../../../helpers/componentHelpers';
+import { hideWhenEmptyMixin } from '../hideWhenEmptyMixin';
+import { createBaseTextClass } from '../createBaseTextClass';
+import { enrichTokens, onClipboardCopy } from './helpers';
+
+export const componentName = getComponentName('markdown-content');
+
+const BaseMarkdownContentClass = createBaseTextClass(componentName);
+
+const markdownContentMixin = (superclass) =>
+  class MarkdownContentMixinClass extends superclass {
+    static get observedAttributes() {
+      return ['disabled-rules', 'line-break'];
+    }
+
+    get lineBreak() {
+      return this.getAttribute('line-break');
+    }
+
+    get disabledRules() {
+      return (this.getAttribute('disabled-rules') || '').split(',').filter(Boolean);
+    }
+
+    init() {
+      super.init();
+      this.#initMarkdown();
+      this.textSlot.addEventListener('slotchange', this.#parseChildren.bind(this));
+    }
+
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+      if (attrName === 'disabled-rules') {
+        if (newValue !== oldValue) {
+          this.#initMarkdown(newValue);
+          this.#parseChildren();
+        }
+      }
+    }
+
+    #initMarkdown() {
+      this.markdown = markdownit({ breaks: this.lineBreak }).disable(this.disabledRules);
+    }
+
+    #parseChildren() {
+      const node = this.textSlot.assignedNodes({ flatten: true })?.[0];
+
+      if (node && node.nodeType === Node.TEXT_NODE) {
+        const tokens = this.markdown.parse(node.textContent, { references: undefined });
+        const result = this.markdown.renderer.render(enrichTokens(tokens), {
+          breaks: this.lineBreak,
+        });
+
+        if (result !== node.textContent) {
+          const span = document.createElement('div');
+          span.classList.add('markdown-wrapper');
+          // eslint-disable-next-line no-use-before-define
+          span.innerHTML = `${getStyleReset()}${result}`;
+          span.addEventListener('copy', onClipboardCopy);
+          node.parentNode.replaceChild(span, node);
+        }
+      }
+    }
+  };
+
+export const MarkdownContentClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontSize: {},
+      fontFamily: {},
+      fontWeight: {},
+      textColor: { property: 'color' },
+      textLineHeight: { property: 'line-height' },
+      marginReset: { selector: '*', property: 'margin' },
+      textAlign: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+  markdownContentMixin,
+  hideWhenEmptyMixin
+)(BaseMarkdownContentClass);
+
+function getStyleReset() {
+  return `
+  <style>
+    .markdown-wrapper > * { margin:0 }
+    .markdown-wrapper > *:not(:only-child):not(:last-child) {
+      margin-bottom: var(${MarkdownContentClass.cssVarList.textLineHeight})
+    }
+  </style>
+  `;
+}

package/src/components/text-components/descope-markdown-content/helpers.js

@@ -0,0 +1,41 @@
+const customEleMap = {
+  a: 'descope-link',
+};
+
+const getTokenTag = (token) => customEleMap[token.tag] || token.tag;
+
+const isImageToken = (token) => token?.children?.[0].type === 'image';
+
+export const enrichTokens = (tokens) =>
+  tokens.map((token) => {
+    const tag = getTokenTag(token);
+
+    if (isImageToken(token)) {
+      token.children[0].attrs.push(['style', 'width:100%']);
+      return {
+        ...token,
+        tag,
+      };
+    }
+
+    if (token?.children?.length > 0) {
+      return {
+        ...token,
+        tag,
+        children: enrichTokens(token.children),
+      };
+    }
+
+    return {
+      ...token,
+      tag,
+    };
+  });
+
+export const onClipboardCopy = (e) => {
+  const selection = document.getSelection().toString();
+  const clipdata = e.clipboardData || window.clipboardData;
+  clipdata.setData('text/plain', selection);
+  clipdata.setData('text/html', selection);
+  e.preventDefault();
+};

package/src/components/text-components/descope-markdown-content/index.js

@@ -0,0 +1,5 @@
+import { componentName, MarkdownContentClass } from './MarkdownContentClass';
+
+customElements.define(componentName, MarkdownContentClass);
+
+export { MarkdownContentClass };

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

@@ -0,0 +1,34 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../../mixins';
+import { compose } from '../../../helpers';
+import { getComponentName } from '../../../helpers/componentHelpers';
+import { hideWhenEmptyMixin } from '../hideWhenEmptyMixin';
+import { createBaseTextClass } from '../createBaseTextClass';
+
+export const componentName = getComponentName('text');
+
+const BaseTextClass = createBaseTextClass(componentName);
+
+export const TextClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontSize: {},
+      textColor: { property: 'color' },
+      textLineHeight: { property: 'line-height' },
+      textLetterSpacing: { property: 'letter-spacing' },
+      textShadow: {},
+      textAlign: {},
+      textTransform: {},
+      fontFamily: {},
+      fontStyle: {},
+      fontWeight: {},
+      borderWidth: {},
+      borderStyle: {},
+      borderColor: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+  hideWhenEmptyMixin
+)(BaseTextClass);

package/src/components/text-components/hideWhenEmptyMixin.js

@@ -0,0 +1,17 @@
+import { observeChildren } from '../../helpers/componentHelpers';
+
+export const hideWhenEmptyMixin = (superclass) =>
+  class HideWhenEmptyMixinClass extends superclass {
+    get hideWhenEmpty() {
+      return this.getAttribute('hide-when-empty') === 'true';
+    }
+
+    init() {
+      super.init();
+
+      observeChildren(this, () => {
+        const hasChildren = !!this.childNodes.length;
+        this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';
+      });
+    }
+  };

package/src/dev/index.js

@@ -1,2 +1,3 @@
 export { defaultTheme } from '../theme';
+export { default as darkTheme } from '../darkTheme';
 export { themeToStyle } from '../helpers/themeHelpers';

package/src/index.cjs.js

@@ -20,7 +20,8 @@ export { NotpImageClass } from './components/descope-notp-image/NotpImageClass';
 export { NumberFieldClass } from './components/descope-number-field/NumberFieldClass';
 export { PasscodeClass } from './components/descope-passcode/PasscodeClass';
 export { PasswordClass } from './components/descope-password/PasswordClass';
-export { TextClass } from './components/descope-text/TextClass';
+export { TextClass } from './components/text-components/descope-text/TextClass';
+export { MarkdownContentClass } from './components/text-components/descope-markdown-content/MarkdownContentClass';
 export { TextAreaClass } from './components/descope-text-area/TextAreaClass';
 export { TextFieldClass } from './components/descope-text-field/TextFieldClass';
 export { ImageClass } from './components/descope-image/ImageClass';

package/src/index.d.ts

@@ -24,7 +24,8 @@ export { NotpImageClass } from './components/descope-notp-image';
 export { NumberFieldClass } from './components/descope-number-field';
 export { PasscodeClass } from './components/descope-passcode';
 export { PasswordClass } from './components/descope-password';
-export { TextClass } from './components/descope-text';
+export { TextClass } from './components/text-components/descope-text';
+export { MarkdownContentClass } from './components/text-components/descope-markdown-content';
 export { TextAreaClass } from './components/descope-text-area';
 export { TextFieldClass } from './components/descope-text-field';
 export { ImageClass } from './components/descope-image';

package/src/index.js

@@ -14,7 +14,8 @@ export * from './components/descope-notp-image';
 export * from './components/descope-number-field';
 export * from './components/descope-passcode';
 export * from './components/descope-password';
-export * from './components/descope-text';
+export * from './components/text-components/descope-text';
+export * from './components/text-components/descope-markdown-content';
 export * from './components/descope-text-area';
 export * from './components/descope-text-field';
 export * from './components/descope-image';

package/src/mixins/normalizeBooleanAttributesMixin.js

@@ -46,7 +46,7 @@ export const normalizeBooleanAttributesMixin = (superclass) =>
               }
             } else if (!attrVal) {
               // eslint-disable-next-line no-console
-              console.warn(
+              console.debug(
                 `attribute "${attr}" has no value, should it be added to the boolean attributes list?`
               );
             }

package/src/theme/components/index.js

@@ -11,6 +11,7 @@ import * as logo from './logo';
 import * as totpImage from './totpImage';
 import * as notpImage from './notpImage';
 import * as text from './text';
+import * as markdownContent from './markdownContent';
 import * as link from './link';
 import * as divider from './divider';
 import * as passcode from './passcode';
@@ -51,6 +52,7 @@ const components = {
   totpImage,
   notpImage,
   text,
+  markdownContent,
   link,
   divider,
   passcode,

package/src/theme/components/markdownContent.js

@@ -0,0 +1,84 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { MarkdownContentClass } from '../../components/text-components/descope-markdown-content/MarkdownContentClass';
+
+const globalRefs = getThemeRefs(globals);
+const vars = MarkdownContentClass.cssVarList;
+
+const markdownContent = {
+  [vars.hostDirection]: globalRefs.direction,
+
+  [vars.fontSize]: globalRefs.typography.body1.size,
+  [vars.fontWeight]: globalRefs.typography.body1.weight,
+  [vars.fontFamily]: globalRefs.typography.body1.font,
+
+  [vars.textLineHeight]: '1.35em',
+  [vars.textAlign]: 'left',
+  [vars.textColor]: globalRefs.colors.surface.dark,
+
+  mode: {
+    primary: {
+      [vars.textColor]: globalRefs.colors.surface.contrast,
+    },
+    secondary: {
+      [vars.textColor]: globalRefs.colors.surface.dark,
+    },
+    error: {
+      [vars.textColor]: globalRefs.colors.error.main,
+    },
+    success: {
+      [vars.textColor]: globalRefs.colors.success.main,
+    },
+  },
+
+  variant: {
+    h1: {
+      [vars.fontSize]: globalRefs.typography.h1.size,
+      [vars.fontWeight]: globalRefs.typography.h1.weight,
+      [vars.fontFamily]: globalRefs.typography.h1.font,
+    },
+    h2: {
+      [vars.fontSize]: globalRefs.typography.h2.size,
+      [vars.fontWeight]: globalRefs.typography.h2.weight,
+      [vars.fontFamily]: globalRefs.typography.h2.font,
+    },
+    h3: {
+      [vars.fontSize]: globalRefs.typography.h3.size,
+      [vars.fontWeight]: globalRefs.typography.h3.weight,
+      [vars.fontFamily]: globalRefs.typography.h3.font,
+    },
+    subtitle1: {
+      [vars.fontSize]: globalRefs.typography.subtitle1.size,
+      [vars.fontWeight]: globalRefs.typography.subtitle1.weight,
+      [vars.fontFamily]: globalRefs.typography.subtitle1.font,
+    },
+    subtitle2: {
+      [vars.fontSize]: globalRefs.typography.subtitle2.size,
+      [vars.fontWeight]: globalRefs.typography.subtitle2.weight,
+      [vars.fontFamily]: globalRefs.typography.subtitle2.font,
+    },
+    body1: {
+      [vars.fontSize]: globalRefs.typography.body1.size,
+      [vars.fontWeight]: globalRefs.typography.body1.weight,
+      [vars.fontFamily]: globalRefs.typography.body1.font,
+    },
+    body2: {
+      [vars.fontSize]: globalRefs.typography.body2.size,
+      [vars.fontWeight]: globalRefs.typography.body2.weight,
+      [vars.fontFamily]: globalRefs.typography.body2.font,
+    },
+  },
+
+  textAlign: {
+    right: { [vars.textAlign]: 'right' },
+    left: { [vars.textAlign]: 'left' },
+    center: { [vars.textAlign]: 'center' },
+  },
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default markdownContent;
+export { vars };

package/src/theme/components/text.js

@@ -1,6 +1,6 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
-import { TextClass } from '../../components/descope-text/TextClass';
+import { TextClass } from '../../components/text-components/descope-text/TextClass';
 
 const globalRefs = getThemeRefs(globals);
 const vars = TextClass.cssVarList;

package/dist/umd/1000.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1e3],{2561:(t,e,s)=>{s.d(e,{s:()=>h});var i=s(2061),n=s(357),r=s(7878);const a=t=>class extends t{#t=r.C.bind(this,"components-context");updateComponentsContext(t){this.dispatchEvent(new CustomEvent("components-context",{bubbles:!0,composed:!0,detail:t}))}};var o=s(2666),l=s(8084);const h=({componentName:t,baseSelector:e=""})=>{class s extends HTMLElement{static get componentName(){return t}#e;#s=!0;get baseSelector(){return e}get baseElement(){return this.#e??=this.baseSelector?this.rootElement.querySelector(this.baseSelector):this,this.#e||console.warn("missing base element for component",this.localName),this.#e}get rootElement(){return this.shadowRoot||this}get name(){return this.getAttribute("name")}connectedCallback(){super.connectedCallback?.(),this.rootElement.isConnected&&this.#s&&(this.#s=!1,this.init?.())}}return(0,i.qC)(n.A,o._,l.Q,a)(s)}},7878:(t,e,s)=>{function i(t,e={}){const s=new Event(t,e);this[`on${t}`]?.(s),this.dispatchEvent(s)}s.d(e,{C:()=>i})},357:(t,e,s)=>{s.d(e,{A:()=>i});const i=t=>class extends t{#i(){const e=this.localName;if(!t.componentName)throw Error('component name is not defined on super class, make sure you have a static get for "componentName"');if(e!==t.componentName)throw Error(`component name mismatch, expected "${t.componentName}", current "${e}"`)}init(){super.init?.(),this.#i()}}},2666:(t,e,s)=>{s.d(e,{_:()=>i});const i=t=>class extends t{init(){super.init?.(),this.baseElement.addEventListener("mouseover",(t=>{this.setAttribute("hover","true"),t.target.addEventListener("mouseleave",(()=>this.removeAttribute("hover")),{once:!0})}))}}},1e3:(t,e,s)=>{s.d(e,{li:()=>M,Ae:()=>f.A,DM:()=>m,yk:()=>h,e4:()=>u,_A:()=>A._,mE:()=>x,wX:()=>g,QT:()=>w.Q,Iw:()=>C,dj:()=>y});var i=s(5279),n=s(2061),r=s(4567),a=s(5561);class o{constructor(){this.styleMap=new Map}add(t,e,s){this.styleMap.has(t)||this.styleMap.set(t,[]),this.styleMap.set(t,[...this.styleMap.get(t),{property:e,value:s}])}toString(){return Array.from(this.styleMap.entries()).reduce(((t,[e,s])=>`${t}${e} { \n${s.map((({property:t,value:e})=>`${t}: ${e}`)).join(";\n")} \n}\n\n`),"")}}const l=(t,e)=>Object.keys(e).reduce(((e,s)=>Object.assign(e,{[s]:(0,r.Tk)(t,s)})),{}),h=({mappings:t={},componentNameOverride:e=""})=>s=>{const h=e||s.componentName;return class extends s{static get cssVarList(){return{...s.cssVarList,...l(h,{...t})}}#n;#r;#a;#o;#l;#h;#u;#c;#d;constructor({getRootElement:e,componentNameSuffix:s="",themeSection:r=i.qg,baseSelector:a}={}){super(),this.#o=s,this.#l=r,this.#u=a??this.baseSelector,this.#d=e,this.#c=Object.keys(t).map((t=>(0,n.E3)("st",s,t)))}get#m(){return a.componentsThemeManager.currentTheme?.[h]||""}#p(){this.#r.innerHTML=this.#m[this.#l]}#g(){this.#r=document.createElement("style"),this.#r.id=`style-mixin-theme__${h}`,this.#h.prepend(this.#r),this.#a=a.componentsThemeManager.onCurrentThemeChange(this.#p.bind(this)),this.#p()}#b(){if(this.#c.length){this.#n=document.createElement("style"),this.#n.id=`style-mixin-overrides__${h}`;const s=(t=h,e=i.k4,Array(e).fill(`.${t}`).join(""));this.#n.innerText=`:host(${s}) {}`,this.#h.append(this.#n)}var t,e}#E(t,e){const s=this.#n?.sheet?.cssRules[0].style;if(!s)return;const i=(0,r.Tk)(h,t.replace(new RegExp("^st-"),""));e?s?.setProperty(i,e):(s?.removeProperty(i),this.removeAttribute(t))}#v(t=[]){let e=!1;t.forEach((t=>{this.#c.includes(t)&&(this.#E(t,this.getAttribute(t)),e=!0)})),e&&(this.#n.innerHTML=this.#n?.sheet?.cssRules[0].cssText)}#y(){if(Object.keys(t).length){const e=document.createElement("style");e.id=`style-mixin-mappings__${h}`,e.innerHTML=((t,e,s)=>{const i=new o;return Object.keys(s).forEach((a=>{const o=((t,e)=>{const s={selector:"",property:(0,n.GL)(t)};return e&&Object.keys(e).length?Array.isArray(e)?e.map((t=>({...s,...t}))):[{...s,...e}]:[s]})(a,s[a]),l=(0,r.Tk)(t,a);o.forEach((({selector:t,property:s,important:r,fallback:a})=>{i.add(((t="",e="")=>(0,n.mf)(e)?e(t):`${t}${/^[A-Za-z]/.test(e)?` ${e}`:e}`)(e,t),(0,n.mf)(s)?s():s,((t,e)=>`var(${t}${e?`, ${e}`:""})`)(l,a)+(r?"!important":""))}))})),i.toString()})((0,n.E3)(h,this.#o),this.#u,t),this.#h.prepend(e)}}#f(t){(this.#h.classList||this.#h.host.classList).add(t)}async init(){super.init?.(),this.shadowRoot.isConnected&&(this.#h=await(this.#d?.(this))||this.shadowRoot,this.#f(h),this.#y(),this.#g(),this.#b(),(0,r.FX)(this,this.#v.bind(this),{}))}disconnectedCallback(){super.disconnectedCallback?.(),this.#a?.()}}},u=t=>class extends t{#A=null;static get observedAttributes(){return[...t.observedAttributes||[],"draggable"]}constructor(){super(),this.#A=document.createElement("style"),this.#A.innerText="* { cursor: inherit!important }"}#S(t){t?this.shadowRoot.appendChild(this.#A):this.#A.remove()}get isDraggable(){return this.hasAttribute("draggable")&&"false"!==this.getAttribute("draggable")}init(){this.addEventListener("mousedown",(t=>{if(this.isDraggable){const e=this.baseElement.getAttribute("tabindex");this.baseElement.setAttribute("tabindex","-1");const s=()=>{e?this.baseElement.setAttribute("tabindex",e):this.baseElement.removeAttribute("tabindex"),t.target.removeEventListener("mouseup",s),t.target.removeEventListener("dragend",s)};t.target.addEventListener("mouseup",s,{once:!0}),t.target.addEventListener("dragend",s,{once:!0})}})),super.init?.()}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),"draggable"===t&&this.#S("true"===s)}};var c=s(2561),d=s(7878);const m=({componentName:t,wrappedEleName:e,slots:s=[],style:i,excludeAttrsSync:a=[],includeAttrsSync:o=[],includeForwardProps:l=[],delegatesFocus:h=!0})=>{class u extends((0,c.s)({componentName:t,baseSelector:e})){#C=d.C.bind(this,"blur");#M=d.C.bind(this,"focus");constructor(){super().attachShadow({mode:"open",delegatesFocus:h}).innerHTML=`\n\t\t\t<style id="create-proxy">${(0,n.mf)(i)?i():i}</style>\n\t\t\t<${e}>\n\t\t\t${s.map((t=>`<slot ${t?`name="${t}" slot="${t}"`:""} ></slot>`)).join("")}\n\t\t\t</${e}>\n\t\t`}init(){super.init?.(),this.baseElement.addEventListener("blur",(t=>{this.#C()})),this.baseElement.addEventListener("focus",(t=>{this.#M()})),(0,r.Db)(this.baseElement,this,l),(0,r.tg)(this.baseElement,this,{excludeAttrs:a,includeAttrs:o})}}return u};s(5910);const p=["required","pattern"],g=t=>class extends t{static get observedAttributes(){return[...t.observedAttributes||[],...p]}static get formAssociated(){return!0}#w;get internals(){return this.#w}set internals(t){this.#w=t}constructor(){super(),this.#w=this.attachInternals()}get defaultErrorMsgValueMissing(){return"Please fill out this field."}get defaultErrorMsgPatternMismatch(){return"Please match the requested format."}get defaultErrorMsgTooShort(){return`Minimum length is ${this.getAttribute("minlength")}.`}get defaultErrorMsgTooLong(){return`Maximum length is ${this.getAttribute("maxlength")}.  `}get defaultErrorMsgRangeUnderflow(){return`At least ${this.getAttribute("min-items-selection")} items are required.`}get defaultErrorMsgRangeOverflow(){return`At most ${this.getAttribute("max-items-selection")} items are allowed.`}getErrorMessage(t){const{valueMissing:e,patternMismatch:s,typeMismatch:i,stepMismatch:n,tooShort:r,tooLong:a,rangeOverflow:o,rangeUnderflow:l,badInput:h,customError:u}=t;switch(!0){case e:return this.getAttribute("data-errormessage-value-missing")||this.defaultErrorMsgValueMissing;case s||i||n||h:return this.getAttribute("data-errormessage-pattern-mismatch")||this.defaultErrorMsgPatternMismatch;case r:return this.getAttribute("data-errormessage-pattern-mismatch-too-short")||this.defaultErrorMsgTooShort;case a:return this.getAttribute("data-errormessage-pattern-mismatch-too-long")||this.defaultErrorMsgTooLong;case l:return this.defaultErrorMsgRangeUnderflow;case o:return this.defaultErrorMsgRangeOverflow;case u:return this.validationMessage;default:return""}}#x(){const t=this.isReadOnly?{}:this.getValidity();this.#w.setValidity(t,this.getErrorMessage(t),this.validationTarget)}get validationMessage(){return this.#w.validationMessage}getValidity(){console.warn("getValidity","is not implemented")}checkValidity(){return this.#w.validity.valid}reportValidity(){return this.#w.reportValidity()}get validity(){return this.#w.validity}get validationTarget(){return this.inputElement}setCustomValidity(t){t?this.#w.setValidity({customError:!0},t,this.validationTarget):(this.#w.setValidity({}),this.#x())}get isRequired(){return this.hasAttribute("required")&&"false"!==this.getAttribute("required")}get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}get isDisabled(){return this.hasAttribute("disabled")&&"false"!==this.getAttribute("disabled")}get pattern(){return this.getAttribute("pattern")}get form(){return this.#w.form}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),p.includes(t)&&this.#x()}init(){super.init?.(),this.addEventListener("change",this.#x),this.addEventListener("invalid",(t=>t.stopPropagation())),this.addEventListener("input",this.#x),setTimeout((()=>this.#x()))}},b=["invalid","required"],E=t=>{if(!t)return;let e=t;for(let t=0;t<10;t++)if([e]=e.assignedElements(),"slot"!==e.localName)return e},v=({proxyProps:t=[],inputEvent:e="input",triggerValidationEvents:s=[],proxyParentValidation:i=!1})=>n=>class extends(g(n)){static get observedAttributes(){return[...n.observedAttributes||[],...b]}#T;#L=d.C.bind(this,"change");constructor(){super(),this.#T=super.inputElement}warnIfInputElementIsMissing(){clearTimeout(this.inputElementTimerId),this.inputElementTimerId=setTimeout((()=>{!this.#T&&console.warn(this.localName,"no input was found")}),0)}get inputElement(){if(this.#T)return this.#T;this.warnIfInputElementIsMissing();const t=this.baseElement.shadowRoot?.querySelector('slot[name="input"]'),e=this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');return this.#T=E(t)||E(e),this.#T}set inputElement(t){this.#T=t}getValidity(){return this.inputElement?.validity||{}}#V(){this.setAttribute("error-message",this.validationMessage)}reportValidity=()=>{this.inputElement.setCustomValidity(""),this.setCustomValidity(""),this.checkValidity()||(this.setAttribute("invalid","true"),this.#V(),this.focus())};defaultReportValidity(){return super.reportValidity()}init(){if(super.init?.(),this.baseElement._setInvalid=function(t){!t&&this._shouldSetInvalid(t)&&(this.invalid=t)},s.forEach((t=>{this.baseElement?.addEventListener(t,(()=>{this.inputElement?.setCustomValidity("")}))})),setTimeout((()=>{(Array.isArray(e)?e:[e]).forEach((t=>{this.baseElement?.addEventListener(t,(()=>{this.baseElement.checkValidity()?this.removeAttribute("invalid"):this.#V()}))})),this.baseElement.addEventListener("change",(()=>{this.#L()})),this.addEventListener("invalid",(()=>{this.checkValidity()||this.setAttribute("invalid","true"),this.#V()})),t.forEach((t=>{var e,s;e=this.inputElement,s=t,Object.defineProperty(this,s,{set(t){e[s]=t},get:()=>e[s],configurable:!0})})),this.setSelectionRange=this.inputElement.setSelectionRange?.bind(this.inputElement),(0,r.oP)(this,this.inputElement,{includeAttrs:["inputmode"]})})),i){const t=this.inputElement.internals,e=this;this.inputElement.internals=new Proxy(t,{get:(t,s)=>"function"==typeof t[s]&&"setValidity"===s?(...i)=>{if(3===i.length){const t=i.slice(0,i.length-1);t.push(e.inputElement),e.internals[s](...t)}else e.internals[s](...i);return t[s](...i)}:"function"==typeof t[s]?(...i)=>(e.internals[s](...i),t[s](...i)):t[s]})}}},y=t=>(0,n.qC)(v(t),h({componentNameOverride:(0,r.iY)("input-wrapper")}));var f=s(357),A=s(2666);const S=t=>async e=>{const s=await t(e);return new Promise((t=>{let e=0;const i=()=>{if(e>20)return console.error("could not get shadow root for element",s),void t(s);e++,s?.shadowRoot?t(s.shadowRoot):setTimeout(i)};i()}))},C=({name:t,selector:e,mappings:s={},forward:{attributes:a=[],include:o=!0}={}})=>u=>{const c=t||(t=>t.replace(/[^\w\s]/gi,""))(e),d=h({mappings:s})(u);return class extends d{static get cssVarList(){return{...d.cssVarList,[c]:l((0,n.E3)(u.componentName,"_"+c),s)}}#k;constructor(){const t=S((async t=>{const s=t.shadowRoot.querySelector(t.baseSelector);return e?(await S((()=>s))(t)).querySelector(e):s}));super({getRootElement:t,componentNameSuffix:"_"+c,themeSection:i.qM+c,baseSelector:":host"}),this.#k=t(this).then((t=>t.host))}async#$(){const t=await this.#k;t.onmouseenter=t=>{t.target.setAttribute("hover","true")},t.onmouseleave=t=>{t.target.removeAttribute("hover")}}async init(){super.init?.();const t=await this.#k;(0,r.oP)(this,t,{[o?"includeAttrs":"excludeAttrs"]:a}),this.#$()}}},M=t=>class extends t{#L=d.C.bind(this,"change");init(){super.init?.(),this.prevValue=this.value,this.addEventListener("change",(t=>{t.stopPropagation()})),this.addEventListener("blur",(()=>{this.value!==this.prevValue&&(this.#L(),this.prevValue=this.value)}))}};var w=s(8084);const x=t=>class extends t{init(){this.#N(),super.init?.()}#N(){["blur","focus","focusin","focusout"].forEach((t=>{this.addEventListener(t,(t=>{t.isTrusted&&t.target===this&&t.stopImmediatePropagation()}))}))}handleFocusEventsDispatching(t){let e;t?.forEach((t=>{t?.addEventListener("focusout",(t=>{t.stopImmediatePropagation(),e=setTimeout((()=>{e=null,d.C.call(this,"blur"),d.C.call(this,"focusout",{bubbles:!0})}))}));const s=t=>{t.stopImmediatePropagation(),clearTimeout(e),e||(d.C.call(this,"focus"),d.C.call(this,"focusin",{bubbles:!0}))};t?.addEventListener("focusin",s),t?.addEventListener("focus",s)}))}handleInputEventDispatching(){let t=this.value;this.addEventListener("input",(e=>{t===this.value?e.stopImmediatePropagation():t=this.value}))}}},8084:(t,e,s)=>{s.d(e,{Q:()=>r});var i=s(4567);const n=["readonly","focused","invalid","has-label","required","disabled","checked","has-helper","has-value","step-buttons-visible","hover","has-error-message","focus-ring","opened","active","password-visible","opening","closing","has-no-options"],r=t=>class extends t{init(){super.init?.(),(0,i.FX)(this,(t=>t.forEach((t=>{const e=this.getAttribute(t);(t=>n.includes(t))(t)?""===e?this.setAttribute(t,"true"):"false"===e&&this.removeAttribute(t):e||console.warn(`attribute "${t}" has no value, should it be added to the boolean attributes list?`)}))),{})}}}}]);

package/dist/umd/1037.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1037.js.LICENSE.txt */
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1037],{1037:(e,t,o)=>{o.d(t,{Dt:()=>a,G6:()=>h,T:()=>d,gn:()=>s,i7:()=>u,vU:()=>c});const n=e=>e.test(navigator.userAgent),r=e=>e.test(navigator.platform),a=n(/Android/u),u=n(/Chrome/u)&&/Google Inc/u.test(navigator.vendor),c=n(/Firefox/u),i=r(/^iPad/u)||r(/^Mac/u)&&navigator.maxTouchPoints>1,s=r(/^iPhone/u)||i,h=n(/^((?!chrome|android).)*safari/iu),d=(()=>{try{return document.createEvent("TouchEvent"),!0}catch(e){return!1}})()}}]);

package/dist/umd/1721.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1721],{1721:(e,s,c)=>{c(4750),c(7078)}}]);

package/dist/umd/1735.js

@@ -1,73 +0,0 @@
-/*! For license information please see 1735.js.LICENSE.txt */
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1735,7911],{48:(t,e,i)=>{i.d(e,{Pe:()=>h,kO:()=>_,jq:()=>u,KE:()=>g});var s=i(9392),n=i(6977);const o=t=>(...e)=>({_$litDirective$:t,values:e});class r{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}var a=i(3692);class c extends r{constructor(t){if(super(t),this.et=a.Ld,2!==t.type)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===a.Ld||null==t)return this.vt=void 0,this.et=t;if(t===a.Jb)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.et)return this.vt;this.et=t;const e=[t];return e.raw=e,this.vt={_$litType$:this.constructor.resultType,strings:e,values:[]}}}c.directiveName="unsafeHTML",c.resultType=1,o(c);class l extends c{}l.directiveName="unsafeSVG",l.resultType=2;const d=o(l);function h(t){let e=s.Ld;if(t){const i=t.cloneNode(!0);i.removeAttribute("id"),e=s.YP`${d(i.outerHTML)}`}return e}function _(t){let e=null==t||""===t?s.Ld:t;return function(t){return(0,n.hN)(t,n.VJ.SVG)||t===s.Ld}(e)||(console.error("[vaadin-icon] Invalid svg passed, please use Lit svg literal."),e=s.Ld),e}function u(t,e){const i=_(t);(0,s.sY)(i,e)}function g(t){return s.YP`${d(t)}`}},3529:(t,e,i)=>{i.d(e,{D:()=>_});var s=i(4241),n=i(2807),o=i(2521),r=i(48);const a={},c=new Set;function l(t,e){return(t||"").replace(`${e}:`,"")}function d(t){if(t)return t.split(":")[0]||"vaadin"}function h(t,e){t._icons=[...t.querySelectorAll("[id]")].reduce(((t,i)=>(t[l(i.id,e)]=i,t)),{})}class _ extends((0,o.S)(s.H3)){static get template(){return null}static get is(){return"vaadin-iconset"}static get properties(){return{name:{type:String,observer:"__nameChanged"},size:{type:Number,value:24}}}static get attachedIcons(){return c}static getIconset(t){return a[t]}static getIconSvg(t,e){const i=e||d(t),s=this.getIconset(i);if(!t||!s)return{svg:(0,r.Pe)(null)};const n=l(t,i),o=s._icons[n];return{preserveAspectRatio:o?o.getAttribute("preserveAspectRatio"):null,svg:(0,r.Pe)(o),size:s.size,viewBox:o?o.getAttribute("viewBox"):null}}static register(t,e,i){if(!a[t]){const s=document.createElement("vaadin-iconset");s.appendChild(i.content.cloneNode(!0)),a[t]=s,h(s,t),s.size=e,s.name=t,s.__nameChanged(t)}}connectedCallback(){super.connectedCallback(),this.style.display="none";const{name:t}=this;a[t]=this,h(this,t),this.__updateIcons(t)}__updateIcons(t){c.forEach((e=>{t===d(e.icon)&&e._applyIcon()}))}__nameChanged(t,e){e&&(a[t]=a[e],delete a[e]),t&&this.__updateIcons(t)}}(0,n.M)(_)},7911:(t,e,i)=>{i(9098);var s=i(6570);(0,s.hC)("vaadin-icon",s.iv`
-    :host {
-      width: var(--lumo-icon-size-m);
-      height: var(--lumo-icon-size-m);
-    }
-  `,{moduleId:"lumo-icon"});var n=i(4241),o=i(6155),r=i(2807),a=i(2521),c=i(4946),l=i(4463),d=i(1014),h=i(9680),_=i(1037);const u=!CSS.supports("container-type: inline-size")||!!_.G6&&!function(){const t=document.createElement("style");t.textContent="\n    .vaadin-icon-test-element {\n      container-type: size;\n      height: 2px;\n      visibility: hidden;\n      position: fixed;\n    }\n\n    .vaadin-icon-test-element::before {\n      content: '';\n      display: block;\n      height: 100cqh;\n    ";const e=document.createElement("div");e.classList.add("vaadin-icon-test-element"),document.body.append(t,e);const{height:i}=getComputedStyle(e,"::before");return t.remove(),e.remove(),"2px"===i}();u&&(0,s.hC)("vaadin-icon",s.iv`
-      :host::after,
-      :host::before {
-        font-size: var(--_vaadin-font-icon-size);
-      }
-    `,"vaadin-icon-font-size-mixin-styles");const g=(0,d.o)((t=>u?class extends((0,h.F)(t)){static get observers(){return["__iconFontSizeMixinfontChanged(iconClass, char, ligature)"]}ready(){super.ready(),this.__updateFontIconSize()}__iconFontSizeMixinfontChanged(t,e,i){this.__updateFontIconSize()}_onResize(){this.__updateFontIconSize()}__updateFontIconSize(){if(this.char||this.iconClass||this.ligature){const{paddingTop:t,paddingBottom:e,height:i}=getComputedStyle(this),s=parseFloat(i)-parseFloat(t)-parseFloat(e);this.style.setProperty("--_vaadin-font-icon-size",`${s}px`)}}}:t));var p=i(48),v=i(3529);const f=new Map;class m extends((0,s.Tb)((0,a.S)((0,o.k)((0,c.W)(g(n.H3)))))){static get template(){return n.dy`
-      <style>
-        :host {
-          display: inline-flex;
-          justify-content: center;
-          align-items: center;
-          box-sizing: border-box;
-          vertical-align: middle;
-          width: 24px;
-          height: 24px;
-          fill: currentColor;
-          container-type: size;
-        }
-
-        :host::after,
-        :host::before {
-          line-height: 1;
-          font-size: 100cqh;
-          -webkit-font-smoothing: antialiased;
-          text-rendering: optimizeLegibility;
-          -moz-osx-font-smoothing: grayscale;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        svg {
-          display: block;
-          width: 100%;
-          height: 100%;
-        }
-
-        :host(:is([icon-class], [font-icon-content])) svg {
-          display: none;
-        }
-
-        :host([font-icon-content])::before {
-          content: attr(font-icon-content);
-        }
-      </style>
-      <svg
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        viewBox="[[__computeViewBox(size, __viewBox)]]"
-        preserveAspectRatio="[[__computePAR(__defaultPAR, __preserveAspectRatio)]]"
-        fill$="[[__fill]]"
-        stroke$="[[__stroke]]"
-        stroke-width$="[[__strokeWidth]]"
-        stroke-linecap$="[[__strokeLinecap]]"
-        stroke-linejoin$="[[__strokeLinejoin]]"
-        aria-hidden="true"
-      >
-        <g id="svg-group"></g>
-        <g id="use-group" visibility$="[[__computeVisibility(__useRef, svg)]]">
-          <use href$="[[__useRef]]" />
-        </g>
-      </svg>
-
-      <slot name="tooltip"></slot>
-    `}static get is(){return"vaadin-icon"}static get properties(){return{icon:{type:String,reflectToAttribute:!0,observer:"__iconChanged"},svg:{type:Object},src:{type:String},symbol:{type:String},iconClass:{type:String,reflectToAttribute:!0},char:{type:String},ligature:{type:String},fontFamily:{type:String,observer:"__fontFamilyChanged"},size:{type:Number,value:24},__defaultPAR:{type:String,value:"xMidYMid meet"},__preserveAspectRatio:String,__useRef:Object,__svgElement:String,__viewBox:String,__fill:String,__stroke:String,__strokeWidth:String,__strokeLinecap:String,__strokeLinejoin:String}}static get observers(){return["__svgChanged(svg, __svgElement)","__fontChanged(iconClass, char, ligature)","__srcChanged(src, symbol)"]}static get observedAttributes(){return[...super.observedAttributes,"class"]}constructor(){super(),this.__fetch=fetch.bind(window)}get slotStyles(){return[`\n        ${this.localName}[icon-class] {\n          display: inline-flex;\n          vertical-align: middle;\n          font-size: inherit;\n        }\n      `]}get __iconClasses(){return this.iconClass?this.iconClass.split(" "):[]}ready(){super.ready(),this.__svgElement=this.shadowRoot.querySelector("#svg-group"),this._tooltipController=new l.f(this),this.addController(this._tooltipController)}connectedCallback(){super.connectedCallback(),v.D.attachedIcons.add(this)}disconnectedCallback(){super.disconnectedCallback(),v.D.attachedIcons.delete(this)}_applyIcon(){const{preserveAspectRatio:t,svg:e,size:i,viewBox:s}=v.D.getIconSvg(this.icon);s&&(this.__viewBox=s),t&&(this.__preserveAspectRatio=t),i&&i!==this.size&&(this.size=i),this.svg=e}__iconChanged(t){t?this._applyIcon():this.svg=(0,p.kO)(null)}async __srcChanged(t,e){if(t)if(this.icon="",t.startsWith("data:")||!e&&!t.includes("#"))try{f.has(t)||f.set(t,this.__fetch(t,{mode:"cors"}).then((t=>{if(!t.ok)throw new Error("Error loading icon");return t.text()})));const i=await f.get(t);m.__domParser||(m.__domParser=new DOMParser);const s=m.__domParser.parseFromString(i,"text/html").querySelector("svg");if(!s)throw new Error(`SVG element not found on path: ${t}`);this.svg=(0,p.KE)(s.innerHTML),e&&(this.__useRef=`#${e}`),this.__viewBox=s.getAttribute("viewBox"),this.__fill=s.getAttribute("fill"),this.__stroke=s.getAttribute("stroke"),this.__strokeWidth=s.getAttribute("stroke-width"),this.__strokeLinecap=s.getAttribute("stroke-linecap"),this.__strokeLinejoin=s.getAttribute("stroke-linejoin")}catch(t){console.error(t),this.svg=null}else{const[i,s]=t.split("#");this.__useRef=`${i}#${e||s}`}else this.svg=null}__svgChanged(t,e){e&&(0,p.jq)(t,e)}__computePAR(t,e){return e||t}__computeVisibility(t){return t?"visible":"hidden"}__computeViewBox(t,e){return e||`0 0 ${t} ${t}`}__fontChanged(t,e,i){this.classList.remove(...this.__addedIconClasses||[]),t&&(this.__addedIconClasses=[...this.__iconClasses],this.classList.add(...this.__addedIconClasses)),e?this.setAttribute("font-icon-content",e.length>1?String.fromCodePoint(parseInt(e,16)):e):i?this.setAttribute("font-icon-content",i):this.removeAttribute("font-icon-content"),(t||e||i)&&!this.icon&&(this.icon="")}attributeChangedCallback(t,e,i){super.attributeChangedCallback(t,e,i),"class"===t&&this.__iconClasses.some((t=>!this.classList.contains(t)))&&this.classList.add(...this.__iconClasses)}__fontFamilyChanged(t){this.style.fontFamily=`'${t}'`}}(0,r.M)(m)}}]);

package/dist/umd/2066.js

@@ -1,2 +0,0 @@
-/*! For license information please see 2066.js.LICENSE.txt */
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[2066],{3726:(e,t,n)=>{function o(e){const t=[];for(;e;){if(e.nodeType===Node.DOCUMENT_NODE){t.push(e);break}e.nodeType!==Node.DOCUMENT_FRAGMENT_NODE?e=e.assignedSlot?e.assignedSlot:e.parentNode:(t.push(e),e=e.host)}return t}function s(e){const t=[];let n;return"slot"===e.localName?n=e.assignedElements():(t.push(e),n=[...e.children]),n.forEach((e=>t.push(...s(e)))),t}function u(e,t){return t?t.closest(e)||u(e,t.getRootNode().host):null}function r(e){return e?new Set(e.split(" ")):new Set}function i(e){return e?[...e].join(" "):""}function c(e,t,n){const o=r(e.getAttribute(t));o.add(n),e.setAttribute(t,i(o))}function d(e,t,n){const o=r(e.getAttribute(t));o.delete(n),0!==o.size?e.setAttribute(t,i(o)):e.removeAttribute(t)}function l(e){return e.nodeType===Node.TEXT_NODE&&""===e.textContent.trim()}n.d(t,{$2:()=>c,AD:()=>o,Q4:()=>u,dV:()=>i,eC:()=>l,hK:()=>r,xX:()=>s,x_:()=>d})}}]);