@descope/web-components-ui 0.0.1

package/dist/umd/9478.js

@@ -0,0 +1,338 @@
+/*! For license information please see 9478.js.LICENSE.txt */
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[7097,9478],{74075:(t,e,o)=>{o.d(e,{i:()=>r});const r=(0,o(75035).y)((t=>class extends t{static get properties(){return{disabled:{type:Boolean,value:!1,observer:"_disabledChanged",reflectToAttribute:!0}}}_disabledChanged(t){this._setAriaDisabled(t)}_setAriaDisabled(t){t?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled")}click(){this.disabled||super.click()}}))},79258:(t,e,o)=>{o.d(e,{f:()=>r});const r=(0,o(75035).y)((t=>class extends t{ready(){super.ready(),this.addEventListener("keydown",(t=>{this._onKeyDown(t)})),this.addEventListener("keyup",(t=>{this._onKeyUp(t)}))}_onKeyDown(t){switch(t.key){case"Enter":this._onEnter(t);break;case"Escape":this._onEscape(t)}}_onKeyUp(t){}_onEnter(t){}_onEscape(t){}}))},45898:(t,e,o)=>{o.d(e,{l:()=>a});var r=o(74075);const a=t=>class extends((0,r.i)(t)){static get properties(){return{tabindex:{type:Number,reflectToAttribute:!0,observer:"_tabindexChanged"},_lastTabIndex:{type:Number}}}_disabledChanged(t,e){super._disabledChanged(t,e),t?(void 0!==this.tabindex&&(this._lastTabIndex=this.tabindex),this.tabindex=-1):e&&(this.tabindex=this._lastTabIndex)}_tabindexChanged(t){this.disabled&&-1!==t&&(this._lastTabIndex=t,this.tabindex=-1)}}},84312:(t,e,o)=>{o.d(e,{$:()=>b});var r=o(98633),a=o(56096),i=o(65211),n=o(27150),s=o(83798),l=o(57224);const d=o(44720).AH`
+  :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;
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+
+    :host([focused]) {
+      outline-width: 2px;
+    }
+
+    :host([disabled]) {
+      outline-color: GrayText;
+    }
+  }
+`;var c=o(63437),u=o(73595),h=o(45898);const m=t=>class extends((0,c.e)((0,h.l)((0,u.y)(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),t.altKey||t.shiftKey||t.ctrlKey||t.metaKey||this._activeKeys.includes(t.key)&&(t.preventDefault(),this.click())}};(0,l.SF)("vaadin-button",d,{moduleId:"vaadin-button-styles"});class b extends(m((0,n.q)((0,l.cp)((0,a.w)(r.Pu))))){static get is(){return"vaadin-button"}static get template(){return r.qy`
+  <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.I(this),this.addController(this._tooltipController)}}(0,i.X)(b)},89685:(t,e,o)=>{o.d(e,{x:()=>a}),o(44497),o(4082),o(19155),o(40999),o(52301);var r=o(57224);const a=r.AH`
+  :host {
+    /* Sizing */
+    --lumo-button-size: var(--lumo-size-m);
+    min-width: var(--vaadin-button-min-width, calc(var(--_button-size) * 2));
+    height: var(--_button-size);
+    padding: var(--vaadin-button-padding, 0 calc(var(--_button-size) / 3 + var(--lumo-border-radius-m) / 2));
+    margin: var(--vaadin-button-margin, var(--lumo-space-xs) 0);
+    box-sizing: border-box;
+    /* Style */
+    font-family: var(--lumo-font-family);
+    font-size: var(--vaadin-button-font-size, var(--lumo-font-size-m));
+    font-weight: var(--vaadin-button-font-weight, 500);
+    color: var(--_lumo-button-text-color);
+    background: var(--_lumo-button-background);
+    border: var(--vaadin-button-border, none);
+    border-radius: var(--vaadin-button-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;
+    --_button-size: var(--vaadin-button-height, var(--lumo-button-size));
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+    /* Used by notification */
+    --_lumo-button-background: var(--vaadin-button-background, var(--lumo-contrast-5pct));
+    --_lumo-button-text-color: var(--vaadin-button-text-color, var(--lumo-primary-text-color));
+    --_lumo-button-primary-background: var(--vaadin-button-primary-background, var(--lumo-primary-color));
+    --_lumo-button-primary-text-color: var(--vaadin-button-primary-text-color, var(--lumo-primary-contrast-color));
+  }
+
+  /* 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;
+    inset: 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 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  :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: transparent !important;
+    background: var(--vaadin-button-tertiary-background, var(--_background));
+    min-width: 0;
+  }
+
+  :host([theme~='tertiary']) {
+    border: var(--vaadin-button-tertiary-border, none);
+    color: var(--vaadin-button-tertiary-text-color, var(--lumo-primary-text-color));
+    font-weight: var(--vaadin-button-tertiary-font-weight, 500);
+    padding: var(--vaadin-button-tertiary-padding, 0 calc(var(--_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: var(--_lumo-button-primary-background);
+    border: var(--vaadin-button-primary-border, none);
+    color: var(--_lumo-button-primary-text-color);
+    font-weight: var(--vaadin-button-primary-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,r.SF)("vaadin-button",a,{moduleId:"lumo-button"})},55093:(t,e,o)=>{o(89685),o(84312)}}]);

package/dist/umd/9478.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/
+ */