@descope/web-components-ui 0.0.1

package/dist/umd/4554.js

@@ -0,0 +1,303 @@
+/*! For license information please see 4554.js.LICENSE.txt */
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4554],{24510:(t,e,o)=>{o.d(e,{f:()=>n});var a=o(75035),i=o(74075),r=(o(51919),o(97539)),s=o(98695);const n=(0,a.y)((t=>class extends((0,r.q)((0,i.i)((0,s.g)(t)))){static get properties(){return{checked:{type:Boolean,value:!1,notify:!0,reflectToAttribute:!0}}}static get delegateProps(){return[...super.delegateProps,"checked"]}_onChange(t){const e=t.target;this._toggleChecked(e.checked)}_toggleChecked(t){this.checked=t}}))},21860:(t,e,o)=>{o.d(e,{f:()=>i});var a=o(95925);class i extends a.r{constructor(t,e){super(t,"input","input",{initializer:(t,o)=>{o.value&&(t.value=o.value),o.type&&t.setAttribute("type",o.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},4554:(t,e,o)=>{o(44497),o(4082),o(19155),o(40999),o(52301);var a=o(57224);(0,a.SF)("vaadin-radio-button",a.AH`
+    :host {
+      color: var(--vaadin-radio-button-label-color, var(--lumo-body-text-color));
+      font-size: var(--vaadin-radio-button-label-font-size, var(--lumo-font-size-m));
+      font-family: var(--lumo-font-family);
+      line-height: var(--lumo-line-height-s);
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      -webkit-tap-highlight-color: transparent;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none;
+      cursor: default;
+      outline: none;
+      --_radio-button-size: var(--vaadin-radio-button-size, calc(var(--lumo-size-m) / 2));
+      --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+      --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+      --_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
+    }
+
+    :host([has-label]) ::slotted(label) {
+      padding: var(
+        --vaadin-radio-button-label-padding,
+        var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs)
+      );
+    }
+
+    [part='radio'] {
+      width: var(--_radio-button-size);
+      height: var(--_radio-button-size);
+      margin: var(--lumo-space-xs);
+      position: relative;
+      border-radius: 50%;
+      background: var(--vaadin-radio-button-background, var(--lumo-contrast-20pct));
+      transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s;
+      will-change: transform;
+      cursor: var(--lumo-clickable-cursor);
+      /* Default field border color */
+      --_input-border-color: var(--vaadin-input-field-border-color, var(--lumo-contrast-50pct));
+    }
+
+    /* Used for activation "halo" */
+    [part='radio']::before {
+      pointer-events: none;
+      color: transparent;
+      width: 100%;
+      height: 100%;
+      line-height: var(--_radio-button-size);
+      border-radius: inherit;
+      background-color: inherit;
+      transform: scale(1.4);
+      opacity: 0;
+      transition: transform 0.1s, opacity 0.8s;
+      will-change: transform, opacity;
+    }
+
+    /* Used for the dot */
+    [part='radio']::after {
+      content: '';
+      pointer-events: none;
+      width: 0;
+      height: 0;
+      border: var(--vaadin-radio-button-dot-size, 3px) solid
+        var(--vaadin-radio-button-dot-color, var(--lumo-primary-contrast-color));
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      transition: 0.25s transform;
+      will-change: transform;
+      background-clip: content-box;
+    }
+
+    :host([checked]) {
+      --vaadin-input-field-border-color: transparent;
+    }
+
+    :host([checked]) [part='radio'] {
+      background-color: var(--_selection-color);
+    }
+
+    :host([checked]) [part='radio']::after {
+      transform: translate(-50%, -50%) scale(1);
+    }
+
+    :host(:not([checked]):not([disabled]):hover) [part='radio'] {
+      background: var(--vaadin-radio-button-background-hover, var(--lumo-contrast-30pct));
+    }
+
+    :host([active]) [part='radio'] {
+      transform: scale(0.9);
+      transition-duration: 0.05s;
+    }
+
+    :host([active][checked]) [part='radio'] {
+      transform: scale(1.1);
+    }
+
+    :host([active]:not([checked])) [part='radio']::before {
+      transition-duration: 0.01s, 0.01s;
+      transform: scale(0);
+      opacity: 0.4;
+    }
+
+    :host([focus-ring]) [part='radio'] {
+      box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color),
+        inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      color: var(--lumo-disabled-text-color);
+      --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
+    }
+
+    :host([disabled]) ::slotted(label) {
+      color: inherit;
+    }
+
+    :host([disabled]) [part='radio'] {
+      background-color: var(--lumo-contrast-10pct);
+    }
+
+    :host([disabled]) [part='radio']::after {
+      border-color: var(--lumo-contrast-30pct);
+    }
+
+    /* RTL specific styles */
+    :host([dir='rtl'][has-label]) ::slotted(label) {
+      padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
+    }
+  `,{moduleId:"lumo-radio-button"});var i=o(98633),r=o(56096),s=o(65211),n=o(27150),d=o(63437),l=o(3205),c=o(24510),u=o(21860),h=o(68515),p=o(19074);const v=t=>class extends((0,h.U)((0,c.f)((0,l.v)((0,d.e)(t))))){static get properties(){return{name:{type:String,value:""},tabindex:{type:Number,value:0,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"name"]}constructor(){super(),this._setType("radio"),this.value="on"}ready(){super.ready(),this.addController(new u.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new p.q(this.inputElement,this._labelController))}},_=a.AH`
+  :host {
+    display: inline-block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([disabled]) {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .vaadin-radio-button-container {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: baseline;
+  }
+
+  [part='radio'],
+  ::slotted(input),
+  ::slotted(label) {
+    grid-row: 1;
+  }
+
+  [part='radio'],
+  ::slotted(input) {
+    grid-column: 1;
+  }
+
+  [part='radio'] {
+    width: var(--vaadin-radio-button-size, 1em);
+    height: var(--vaadin-radio-button-size, 1em);
+    --_input-border-width: var(--vaadin-input-field-border-width, 0);
+    --_input-border-color: var(--vaadin-input-field-border-color, transparent);
+    box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
+  }
+
+  [part='radio']::before {
+    display: block;
+    content: '\\202F';
+    line-height: var(--vaadin-radio-button-size, 1em);
+    contain: paint;
+  }
+
+  /* visually hidden */
+  ::slotted(input) {
+    opacity: 0;
+    cursor: inherit;
+    margin: 0;
+    align-self: stretch;
+    -webkit-appearance: none;
+    width: initial;
+    height: initial;
+  }
+
+  @media (forced-colors: active) {
+    [part='radio'] {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+
+    :host([focused]) [part='radio'] {
+      outline-width: 2px;
+    }
+
+    :host([disabled]) [part='radio'] {
+      outline-color: GrayText;
+    }
+  }
+`;(0,a.SF)("vaadin-radio-button",_,{moduleId:"vaadin-radio-button-styles"});class b extends(v((0,n.q)((0,a.cp)((0,r.w)(i.Pu))))){static get is(){return"vaadin-radio-button"}static get template(){return i.qy`
+      <div class="vaadin-radio-button-container">
+        <div part="radio" aria-hidden="true"></div>
+        <slot name="input"></slot>
+        <slot name="label"></slot>
+      </div>
+    `}}(0,s.X)(b);var g=o(71005),m=o(4749);const f=a.AH`
+  :host {
+    color: var(--lumo-body-text-color);
+    font-size: var(--lumo-font-size-m);
+    font-family: var(--lumo-font-family);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: transparent;
+    padding: var(--lumo-space-xs) 0;
+  }
+
+  :host::before {
+    /* Effective height of vaadin-radio-button */
+    height: var(--lumo-size-s);
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  :host([theme~='vertical']) [part='group-field'] {
+    flex-direction: column;
+  }
+
+  :host([disabled]) [part='label'] {
+    color: var(--lumo-disabled-text-color);
+    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+  }
+
+  :host([focused]:not([readonly])) [part='label'] {
+    color: var(--lumo-primary-text-color);
+  }
+
+  :host(:hover:not([readonly]):not([focused])) [part='label'],
+  :host(:hover:not([readonly])) [part='helper-text'] {
+    color: var(--lumo-body-text-color);
+  }
+
+  /* Touch device adjustment */
+  @media (pointer: coarse) {
+    :host(:hover:not([readonly]):not([focused])) [part='label'] {
+      color: var(--lumo-secondary-text-color);
+    }
+  }
+`;(0,a.SF)("vaadin-radio-group",[m.Q,g.d,f],{moduleId:"lumo-radio-group"});var y=o(74075),x=o(73595),k=o(79258),w=o(98475),B=o(83798),R=o(99309),C=o(12850);const z=t=>class extends((0,C.Y)((0,x.y)((0,y.i)((0,k.f)(t))))){static get properties(){return{value:{type:String,notify:!0,value:"",observer:"__valueChanged"},readonly:{type:Boolean,value:!1,reflectToAttribute:!0,observer:"__readonlyChanged"},_fieldName:{type:String}}}constructor(){super(),this.__registerRadioButton=this.__registerRadioButton.bind(this),this.__unregisterRadioButton=this.__unregisterRadioButton.bind(this),this.__onRadioButtonCheckedChange=this.__onRadioButtonCheckedChange.bind(this),this._tooltipController=new B.I(this),this._tooltipController.addEventListener("tooltip-changed",(t=>{const e=t.detail.node;if(e&&e.isConnected){const t=this.__radioButtons.map((t=>t.inputElement));this._tooltipController.setAriaTarget(t)}else this._tooltipController.setAriaTarget([])}))}get __radioButtons(){return this.__filterRadioButtons([...this.children])}get __selectedRadioButton(){return this.__radioButtons.find((t=>t.checked))}get isHorizontalRTL(){return this.__isRTL&&"vertical"!==this._theme}ready(){super.ready(),this.ariaTarget=this,this.setAttribute("role","radiogroup"),this._fieldName=`${this.localName}-${(0,R.I)()}`;const t=this.shadowRoot.querySelector("slot:not([name])");this._observer=new w.P(t,(({addedNodes:t,removedNodes:e})=>{this.__filterRadioButtons(t).reverse().forEach(this.__registerRadioButton),this.__filterRadioButtons(e).forEach(this.__unregisterRadioButton);const o=this.__radioButtons.map((t=>t.inputElement));this._tooltipController.setAriaTarget(o)})),this.addController(this._tooltipController)}__filterRadioButtons(t){return t.filter((t=>t.nodeType===Node.ELEMENT_NODE&&"vaadin-radio-button"===t.localName))}_onKeyDown(t){super._onKeyDown(t);const e=t.composedPath().find((t=>t.nodeType===Node.ELEMENT_NODE&&"vaadin-radio-button"===t.localName));["ArrowLeft","ArrowUp"].includes(t.key)&&(t.preventDefault(),this.__selectNextRadioButton(e)),["ArrowRight","ArrowDown"].includes(t.key)&&(t.preventDefault(),this.__selectPrevRadioButton(e))}_invalidChanged(t){super._invalidChanged(t),t?this.setAttribute("aria-invalid","true"):this.removeAttribute("aria-invalid")}__selectNextRadioButton(t){const e=this.__radioButtons.indexOf(t);this.__selectIncRadioButton(e,this.isHorizontalRTL?1:-1)}__selectPrevRadioButton(t){const e=this.__radioButtons.indexOf(t);this.__selectIncRadioButton(e,this.isHorizontalRTL?-1:1)}__selectIncRadioButton(t,e){const o=(this.__radioButtons.length+t+e)%this.__radioButtons.length,a=this.__radioButtons[o];a.disabled?this.__selectIncRadioButton(o,e):(a.focusElement.focus(),a.focusElement.click())}__registerRadioButton(t){t.name=this._fieldName,t.addEventListener("checked-changed",this.__onRadioButtonCheckedChange),(this.disabled||this.readonly)&&(t.disabled=!0),t.checked&&this.__selectRadioButton(t)}__unregisterRadioButton(t){t.removeEventListener("checked-changed",this.__onRadioButtonCheckedChange),t.value===this.value&&this.__selectRadioButton(null)}__onRadioButtonCheckedChange(t){t.target.checked&&this.__selectRadioButton(t.target)}__valueChanged(t,e){if(void 0!==e||""!==t){if(t){const e=this.__radioButtons.find((e=>e.value===t));e?(this.__selectRadioButton(e),this.toggleAttribute("has-value",!0)):console.warn(`The radio button with the value "${t}" was not found.`)}else this.__selectRadioButton(null),this.removeAttribute("has-value");void 0!==e&&this.validate()}}__readonlyChanged(t,e){(t||void 0!==e)&&e!==t&&this.__updateRadioButtonsDisabledProperty()}_disabledChanged(t,e){super._disabledChanged(t,e),(t||void 0!==e)&&e!==t&&this.__updateRadioButtonsDisabledProperty()}_shouldRemoveFocus(t){return!this.contains(t.relatedTarget)}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}__selectRadioButton(t){this.value=t?t.value:"",this.__radioButtons.forEach((e=>{e.checked=e===t})),this.readonly&&this.__updateRadioButtonsDisabledProperty()}__updateRadioButtonsDisabledProperty(){this.__radioButtons.forEach((t=>{this.readonly?t.disabled=t!==this.__selectedRadioButton:t.disabled=this.disabled}))}},E=a.AH`
+  :host {
+    display: inline-flex;
+  }
+
+  :host::before {
+    content: '\\2003';
+    width: 0;
+    display: inline-block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .vaadin-group-field-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  [part='group-field'] {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  :host(:not([has-label])) [part='label'] {
+    display: none;
+  }
+`;(0,a.SF)("vaadin-radio-group",E,{moduleId:"vaadin-radio-group-styles"});class T extends(z((0,n.q)((0,a.cp)(i.Pu)))){static get is(){return"vaadin-radio-group"}static get template(){return i.qy`
+      <div class="vaadin-group-field-container">
+        <div part="label">
+          <slot name="label"></slot>
+          <span part="required-indicator" aria-hidden="true"></span>
+        </div>
+
+        <div part="group-field">
+          <slot></slot>
+        </div>
+
+        <div part="helper-text">
+          <slot name="helper"></slot>
+        </div>
+
+        <div part="error-message">
+          <slot name="error-message"></slot>
+        </div>
+      </div>
+
+      <slot name="tooltip"></slot>
+    `}}(0,s.X)(T)}}]);

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

@@ -0,0 +1,11 @@
+/**
+ * @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/
+ */