@descope/web-components-ui 1.0.419 → 1.0.421

package/node_modules/theme-globals/src/index.js

@@ -0,0 +1,180 @@
+import { getThemeRefs, getThemeVars, genColors } from 'common/theme-helpers';
+
+const direction = 'ltr';
+
+export const colors = genColors({
+  surface: {
+    main: '#ffffff',
+    dark: '#636c74',
+    light: '#cfd3d7',
+    highlight: '#f4f5f6',
+    contrast: '#181a1c',
+  },
+  primary: {
+    main: '#006af5',
+    dark: '#004094',
+    light: '#71aeff',
+    highlight: '#f0f6ff',
+    contrast: '#ffffff',
+  },
+  secondary: {
+    main: '#802ed6',
+    dark: '#6410bc',
+    light: '#be89f5',
+    highlight: '#ede7f6',
+    contrast: '#ffffff',
+  },
+  success: {
+    main: '#008000',
+    dark: '#005700',
+    light: '#8bc38b',
+    highlight: '#f5faf5',
+    contrast: '#ffffff',
+  },
+  error: {
+    main: '#e21d12',
+    dark: '#b3170f',
+    light: '#f4807a',
+    highlight: '#fef1f1',
+    contrast: '#ffffff',
+  },
+});
+
+const fonts = {
+  font1: {
+    family: [
+      'Roboto',
+      'ui-sans-serif',
+      'system-ui',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      'Segoe UI',
+      'Helvetica Neue',
+      'Arial',
+      'Noto Sans',
+      'sans-serif',
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji',
+    ],
+    label: 'Roboto',
+    url: 'https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900',
+  },
+  font2: {
+    family: [
+      'ui-sans-serif',
+      'system-ui',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      'Segoe UI',
+      'Roboto',
+      'Helvetica Neue',
+      'Arial',
+      'Noto Sans',
+      'sans-serif',
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji',
+    ],
+    label: 'Sans Serif',
+  },
+};
+
+const fontsRef = getThemeRefs({ fonts }).fonts;
+
+const typography = {
+  h1: {
+    font: fontsRef.font1.family,
+    weight: '900',
+    size: '48px',
+  },
+  h2: {
+    font: fontsRef.font1.family,
+    weight: '800',
+    size: '38px',
+  },
+  h3: {
+    font: fontsRef.font1.family,
+    weight: '600',
+    size: '28px',
+  },
+  subtitle1: {
+    font: fontsRef.font2.family,
+    weight: '500',
+    size: '22px',
+  },
+  subtitle2: {
+    font: fontsRef.font2.family,
+    weight: '400',
+    size: '20px',
+  },
+  body1: {
+    font: fontsRef.font1.family,
+    weight: '400',
+    size: '16px',
+  },
+  body2: {
+    font: fontsRef.font1.family,
+    weight: '400',
+    size: '14px',
+  },
+};
+
+const spacing = {
+  xs: '2px',
+  sm: '4px',
+  md: '8px',
+  lg: '16px',
+  xl: '32px',
+};
+
+const border = {
+  xs: '1px',
+  sm: '2px',
+  md: '3px',
+  lg: '4px',
+  xl: '5px',
+};
+
+const radius = {
+  xs: '5px',
+  sm: '10px',
+  md: '15px',
+  lg: '20px',
+  xl: '25px',
+  '2xl': '30px',
+  '3xl': '35px',
+};
+
+const shadow = {
+  wide: {
+    sm: '0 2px 3px -0.5px',
+    md: '0 4px 6px -1px',
+    lg: '0 10px 15px -3px',
+    xl: '0 20px 25px -5px',
+    '2xl': '0 25px 50px -12px',
+  },
+  narrow: {
+    sm: '0 1px 2px -1px',
+    md: '0 2px 4px -2px',
+    lg: '0 4px 6px -4px',
+    xl: '0 8px 10px -6px',
+    '2xl': '0 16px 16px -8px',
+  },
+};
+
+const globals = {
+  colors,
+  typography,
+  spacing,
+  border,
+  radius,
+  shadow,
+  fonts,
+  direction,
+};
+
+export default globals;
+export const vars = getThemeVars(globals);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.419",
+  "version": "1.0.421",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -14,36 +14,6 @@
       "require": "./package.json"
     }
   },
-  "scripts": {
-    "test:unit": "jest",
-    "test:pw": "playwright test",
-    "test:pw:updateSnapshots": "npm run test:pw -- --update-snapshots",
-    "test:ui": "playwright test --ui",
-    "test:ui:debug": "PWDEBUG=1 npm run test:ui",
-    "test:ci": "npm run container:build && docker run --rm --network host -v $(pwd):/work/ -w /work/ descope-wcui-playwright-image",
-    "test:ci:updateSnapshots": "npm run test:ci -- --update-snapshots",
-    "lint": "eslint --fix --max-warnings 0",
-    "lint:all": "npm run lint .",
-    "build:umd": "webpack -c webpack.prod.js",
-    "build:lib": "rollup -c",
-    "build": "npm run build:umd && npm run build:lib && cp src/index.d.ts dist",
-    "start": "webpack serve -c webpack.dev.js --port=8888",
-    "format": "prettier --ignore-path .gitignore --write .",
-    "format:all": "npm run format .",
-    "format-lint": "lint-staged",
-    "prepare": "husky install",
-    "storybook": "start-storybook -p 6006 --quiet",
-    "build-storybook": "build-storybook",
-    "container:build": "docker build -t descope-wcui-playwright-image .",
-    "container:debug": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.38.0-jammy /bin/bash",
-    "postinstall": "if [ \"$PWD\" = \"$INIT_CWD\" ]; then npx patch-package --error-on-fail --error-on-warn && cp ./patches/lumo-icons.woff ./node_modules/@vaadin/vaadin-lumo-styles/lumo-icons.woff; fi"
-  },
-  "lint-staged": {
-    "src/**/*.{js,jsx}": [
-      "npm run lint",
-      "npm run format"
-    ]
-  },
   "files": [
     "dist",
     "src"
@@ -54,15 +24,18 @@
     "@babel/preset-env": "^7.22.2",
     "@jest/globals": "^29.7.0",
     "@playwright/test": "1.38.1",
-    "@rollup/plugin-node-resolve": "^16.0.0",
-    "@storybook/addon-actions": "^6.4.9",
-    "@storybook/addon-controls": "^6.4.9",
-    "@storybook/addon-essentials": "^6.4.9",
-    "@storybook/addon-links": "^6.4.9",
-    "@storybook/html": "^6.4.9",
-    "@storybook/manager-api": "^7.4.6",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-controls": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/html": "^8.4.7",
+    "@storybook/html-webpack5": "^8.4.7",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/web-components-vite": "^8.4.7",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/node": "^22.0.0",
+    "@types/node": "^20.8.0",
     "eslint": "^8.48.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",
@@ -81,10 +54,18 @@
     "svg-url-loader": "^8.0.0",
     "webpack": "^5.79.0",
     "webpack-cli": "^6.0.0",
-    "webpack-dev-server": "^5.0.0"
+    "webpack-dev-server": "^5.0.0",
+    "@rollup/plugin-virtual": "3.0.2",
+    "rollup-replace-plugin": "0.0.1",
+    "webpack-replace-plugin": "0.0.1"
   },
+  "bundledDependencies": [
+    "common",
+    "theme-globals",
+    "descope-text",
+    "descope-avatar"
+  ],
   "dependencies": {
-    "@vaadin/avatar": "24.3.4",
     "@vaadin/button": "24.3.4",
     "@vaadin/checkbox": "24.3.4",
     "@vaadin/combo-box": "24.3.4",
@@ -109,7 +90,11 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "markdown-it": "14.1.0"
+    "markdown-it": "14.1.0",
+    "common": "0.0.1",
+    "descope-text": "0.0.1",
+    "descope-avatar": "0.0.1",
+    "theme-globals": "0.0.1"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",
@@ -138,5 +123,31 @@
   },
   "vaadin": {
     "disableUsageStatistics": true
+  },
+  "scripts": {
+    "e2e": "npm run e2e:container -- \"$(node ./scripts/printAffectedComponents)\"",
+    "e2e:local": "playwright test",
+    "e2e:local:ui": "playwright test --ui",
+    "e2e:local:ui:debug": "PWDEBUG=1 npm run e2e:local:ui",
+    "pree2e:container": "docker build -t descope-wcui-playwright-image .",
+    "e2e:container": "MONOREPO_ROOT=$(git rev-parse --show-toplevel) && PROJECT_DIR=$(pwd) && PROJECT_RELATIVE_PATH=${PROJECT_DIR#$MONOREPO_ROOT/} && docker run --rm --network host -v $MONOREPO_ROOT:/work/ -w /work/$PROJECT_RELATIVE_PATH descope-wcui-playwright-image",
+    "e2e:container:updateSnapshots": "npm run e2e:container -- --update-snapshots",
+    "container:build": "docker build -t descope-wcui-playwright-image .",
+    "container:debug": "MONOREPO_ROOT=$(git rev-parse --show-toplevel) && PROJECT_DIR=$(pwd) && PROJECT_RELATIVE_PATH=${PROJECT_DIR#$MONOREPO_ROOT/} && docker run --rm --network host -v $MONOREPO_ROOT:/work/ -w /work/$PROJECT_RELATIVE_PATH -it mcr.microsoft.com/playwright:v1.38.0-jammy /bin/bash",
+    "print-components": "nx show projects --projects 'packages/web-components/components/*'",
+    "print-components:affected": "nx show projects --projects 'packages/web-components/components/*' --affected",
+    "print-components:affected:ci": "nx show projects --projects 'packages/web-components/components/*' --affected --base=$(sh $(git rev-parse --show-toplevel)/tools/scripts/latestTag.sh)",
+    "test": "jest",
+    "lint": "eslint --fix --max-warnings 0",
+    "lint:all": "npm run lint .",
+    "build:umd": "webpack -c webpack.prod.js",
+    "build:lib": "rollup -c",
+    "build": "npm run build:umd && npm run build:lib && cp src/index.d.ts dist",
+    "start": "webpack serve -c webpack.dev.js --port=8888",
+    "format": "prettier --ignore-path .gitignore --write .",
+    "format:all": "npm run format .",
+    "storybook": "storybook dev -p 6006 --quiet",
+    "build-storybook": "storybook build",
+    "lint-staged": "lint-staged"
   }
-}
+}

package/src/components/descope-apps-list/AppsListClass.js

@@ -7,7 +7,7 @@ import {
   componentNameValidationMixin,
 } from '../../mixins';
 import { createDynamicDataMixin } from '../../mixins/createDynamicDataMixin';
-import { TextClass } from '../descope-text/TextClass';
+import { TextClass } from 'descope-text/class';
 
 export const componentName = getComponentName('apps-list');
 

package/src/components/descope-apps-list/index.js

@@ -1,6 +1,6 @@
 import '../descope-list';
-import '../descope-avatar';
-import '../descope-text';
+import 'descope-avatar';
+import 'descope-text';
 import { componentName, AppsListClass } from './AppsListClass';
 
 customElements.define(componentName, AppsListClass);

package/src/components/descope-divider/DividerClass.js

@@ -2,7 +2,7 @@ import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
-import { TextClass } from '../descope-text/TextClass';
+import { TextClass } from 'descope-text/class';
 
 export const componentName = getComponentName('divider');
 class RawDivider extends createBaseClass({ componentName, baseSelector: ':host > div' }) {

package/src/components/descope-divider/index.js

@@ -1,5 +1,5 @@
 import { componentName, DividerClass } from './DividerClass';
-import '../descope-text';
+import 'descope-text';
 
 customElements.define(componentName, DividerClass);
 

package/src/components/descope-link/LinkClass.js

@@ -1,6 +1,6 @@
 import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
-import { TextClass } from '../descope-text/TextClass';
+import { TextClass } from 'descope-text/class';
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 

package/src/components/descope-link/index.js

@@ -1,5 +1,5 @@
 import { componentName, LinkClass } from './LinkClass';
-import '../descope-text';
+import 'descope-text';
 
 customElements.define(componentName, LinkClass);
 

package/src/components/descope-security-questions-verify/SecurityQuestionsVerifyClass.js

@@ -2,7 +2,7 @@ import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName, observeAttributes } from '../../helpers/componentHelpers';
 import { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';
-import { TextClass } from '../descope-text/TextClass';
+import { TextClass } from 'descope-text/class';
 import { TextFieldClass } from '../descope-text-field/TextFieldClass';
 
 export const componentName = getComponentName('security-questions-verify');

package/src/components/descope-security-questions-verify/index.js

@@ -1,5 +1,5 @@
 import { componentName, SecurityQuestionsVerifyClass } from './SecurityQuestionsVerifyClass';
-import '../descope-text';
+import 'descope-text';
 import '../descope-text-field';
 
 customElements.define(componentName, SecurityQuestionsVerifyClass);

package/src/components/descope-user-attribute/UserAttributeClass.js

@@ -4,7 +4,7 @@ import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 import deleteIcon from './delete.svg';
 import editIcon from './edit.svg';
-import { TextClass } from '../descope-text/TextClass';
+import { TextClass } from 'descope-text/class';
 import { ButtonClass } from '../descope-button/ButtonClass';
 import { BadgeClass } from '../descope-badge/BadgeClass';
 

package/src/components/descope-user-attribute/index.js

@@ -1,5 +1,5 @@
 import { componentName, UserAttributeClass } from './UserAttributeClass';
-import '../descope-text';
+import 'descope-text';
 import '../descope-button';
 import '../descope-badge';
 import '@vaadin/icon';

package/src/components/descope-user-auth-method/UserAuthMethodClass.js

@@ -3,7 +3,7 @@ import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 import greenVIcon from './green-v.svg';
-import { TextClass } from '../descope-text/TextClass';
+import { TextClass } from 'descope-text/class';
 import { ButtonClass } from '../descope-button/ButtonClass';
 import { BadgeClass } from '../descope-badge/BadgeClass';
 import { IconClass } from '../descope-icon/IconClass';

package/src/components/descope-user-auth-method/index.js

@@ -1,5 +1,5 @@
 import { componentName, UserAuthMethodClass } from './UserAuthMethodClass';
-import '../descope-text';
+import 'descope-text';
 import '../descope-button';
 import '../descope-badge';
 import '@vaadin/icon';

package/src/components/mapping-fields/descope-mappings-field/MappingsFieldClass.js

@@ -5,7 +5,7 @@ import {
   proxyInputMixin,
   componentNameValidationMixin,
 } from '../../../mixins';
-import { TextClass } from '../../descope-text/TextClass';
+import { TextClass } from 'descope-text/class';
 import { compose } from '../../../helpers';
 import { forwardAttrs, getComponentName, syncAttrs } from '../../../helpers/componentHelpers';
 import { componentName as descopeInternalComponentName } from './descope-mappings-field-internal/MappingsFieldInternal';

package/src/components/mapping-fields/descope-mappings-field/index.js

@@ -2,7 +2,7 @@ import '@vaadin/custom-field';
 import '@vaadin/icon';
 import '@vaadin/icons';
 import { componentName, MappingsFieldClass } from './MappingsFieldClass';
-import '../../descope-text';
+import 'descope-text';
 import '../../descope-button';
 import '../../descope-text-field';
 import '../../descope-combo-box';

package/src/helpers/themeHelpers/index.js

@@ -172,4 +172,4 @@ export const createHelperVars = (theme, prefix) => {
   return [res.theme, res.useVars, res.vars];
 };
 
-export { componentsThemeManager } from './componentsThemeManager';
+export { componentsThemeManager } from 'common/theme-helpers';

package/src/index.cjs.js

@@ -20,7 +20,6 @@ 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 { EnrichedTextClass } from './components/descope-enriched-text/EnrichedTextClass';
 export { TextAreaClass } from './components/descope-text-area/TextAreaClass';
 export { TextFieldClass } from './components/descope-text-field/TextFieldClass';
@@ -38,7 +37,6 @@ export { NotificationClass } from './components/descope-notification/Notificatio
 export { GridClass } from './components/descope-grid/GridClass';
 export { BadgeClass } from './components/descope-badge/BadgeClass';
 export { MultiSelectComboBoxClass } from './components/descope-multi-select-combo-box/MultiSelectComboBoxClass';
-export { AvatarClass } from './components/descope-avatar/AvatarClass';
 export { UserAttributeClass } from './components/descope-user-attribute/UserAttributeClass';
 export { UserAuthMethodClass } from './components/descope-user-auth-method/UserAuthMethodClass';
 export { MappingsFieldClass } from './components/mapping-fields/descope-mappings-field/MappingsFieldClass';
@@ -58,3 +56,5 @@ export { SecurityQuestionsSetupClass } from './components/descope-security-quest
 export { SecurityQuestionsVerifyClass } from './components/descope-security-questions-verify/SecurityQuestionsVerifyClass';
 export { HybridFieldClass } from './components/descope-hybrid-field/HybridFieldClass';
 export { AlertClass } from './components/descope-alert/AlertClass';
+
+/* INJECT_COMPONENTS */

package/src/index.d.ts

@@ -1,5 +1,3 @@
-declare module '@descope/web-components-ui';
-
 export {
   globalsThemeToStyle,
   createComponentsTheme,

package/src/index.js

@@ -15,7 +15,6 @@ 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/descope-enriched-text';
 export * from './components/descope-text-area';
 export * from './components/descope-text-field';
@@ -33,7 +32,6 @@ export * from './components/descope-multi-select-combo-box';
 export * from './components/descope-badge';
 export * from './components/descope-modal';
 export * from './components/descope-notification';
-export * from './components/descope-avatar';
 export * from './components/descope-icon';
 export * from './components/mapping-fields/descope-mappings-field';
 export * from './components/descope-user-attribute';
@@ -60,3 +58,5 @@ export {
 export { genColor } from './helpers/themeHelpers/colorsHelpers';
 export { defaultTheme, themeVars } from './theme';
 export { default as darkTheme } from './darkTheme';
+
+/* INJECT_COMPONENTS */

package/src/index.umd.js

@@ -1,4 +1,4 @@
-const { componentsThemeManager } = require('./helpers/themeHelpers/componentsThemeManager');
+const { componentsThemeManager } = require('./helpers/themeHelpers');
 
 const components = import.meta.webpackContext('./components', {
   recursive: true,
@@ -24,3 +24,5 @@ module.exports = components.keys().reduce((acc, key) => {
 }, {});
 
 module.exports.componentsThemeManager = componentsThemeManager;
+
+/* INJECT_COMPONENTS */

package/src/mixins/createStyleMixin/index.js

@@ -1,7 +1,7 @@
 import { BASE_THEME_SECTION, CSS_SELECTOR_SPECIFIER_MULTIPLY } from '../../constants';
 import { kebabCaseJoin } from '../../helpers';
 import { getCssVarName, observeAttributes } from '../../helpers/componentHelpers';
-import { componentsThemeManager } from '../../helpers/themeHelpers/componentsThemeManager';
+import { componentsThemeManager } from '../../helpers/themeHelpers';
 import { createStyle, createCssVarsList, createClassSelectorSpecifier } from './helpers';
 
 const STYLE_OVERRIDE_ATTR_PREFIX = 'st';

package/src/theme/components/alert.js

@@ -1,7 +1,7 @@
 import globals from '../globals';
 import { getThemeRefs, useVar } from '../../helpers/themeHelpers';
 import { AlertClass } from '../../components/descope-alert/AlertClass';
-import { vars as textCompVars } from './text';
+import { vars as textCompVars } from 'descope-text/theme';
 
 const globalRefs = getThemeRefs(globals);
 const vars = AlertClass.cssVarList;

package/src/theme/components/comboBox.js

@@ -81,8 +81,8 @@ export const comboBox = {
     [vars.overlay.loaderWidth]: '30px',
     [vars.overlay.loaderHeight]: '30px',
     [vars.overlay.loaderBorder]: '2px solid transparent',
-    [vars.overlay
-      .loaderBorderColor]: `${globalRefs.colors.primary.highlight} ${globalRefs.colors.primary.highlight} ${globalRefs.colors.primary.main} ${globalRefs.colors.primary.main}`,
+    [vars.overlay.loaderBorderColor]:
+      `${globalRefs.colors.primary.highlight} ${globalRefs.colors.primary.highlight} ${globalRefs.colors.primary.main} ${globalRefs.colors.primary.main}`,
     [vars.overlay.loaderBorderRadius]: '50%',
     [vars.overlay.contentHeight]: '100px',
     [vars.overlay.contentOpacity]: '0',

package/src/theme/components/enrichedText.js

@@ -1,7 +1,7 @@
 import globals from '../globals';
 import { getThemeRefs, useVar } from '../../helpers/themeHelpers';
 import { EnrichedTextClass } from '../../components/descope-enriched-text/EnrichedTextClass';
-import { vars as textCompVars } from './text';
+import { vars as textCompVars } from 'descope-text/theme';
 import { vars as linkCompVars } from './link';
 
 const globalRefs = getThemeRefs(globals);

package/src/theme/components/index.js

@@ -10,7 +10,7 @@ import * as container from './container';
 import * as logo from './logo';
 import * as totpImage from './totpImage';
 import * as notpImage from './notpImage';
-import * as text from './text';
+import * as text from 'descope-text/theme';
 import * as enrichedText from './enrichedText';
 import * as link from './link';
 import * as divider from './divider';
@@ -31,7 +31,7 @@ import * as grid from './grid';
 import * as notificationCard from './notificationCard';
 import * as multiSelectComboBox from './multiSelectComboBox';
 import * as badge from './badge';
-import * as avatar from './avatar';
+import * as avatar from 'descope-avatar/theme';
 import * as mappingsField from './mappingsField';
 import * as userAttribute from './userAttribute';
 import * as userAuthMethod from './userAuthMethod';

package/dist/umd/1033.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1033.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[1033],{1033:(t,e,n)=>{n.d(e,{e:()=>c});var o=n(27568),i=n(50063),s=n(67766);const c=t=>class extends((0,i.i)((0,s.f)(t))){get _activeKeys(){return[" "]}ready(){super.ready(),(0,o.ch)(this,"down",(t=>{this._shouldSetActive(t)&&this._setActive(!0)})),(0,o.ch)(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)}}},27568:(t,e,n)=>{n.d(e,{ch:()=>M});var o=n(81510);const i=!1,s="string"==typeof document.head.style.touchAction,c="__polymerGestures",u="__polymerGesturesHandled",r="__polymerGesturesTouchAction",a=["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 f(t){return a.indexOf(t)>-1}let l=!1;function m(t){if(!f(t)&&"touchend"!==t)return s&&l&&i?{passive:!0}:void 0}!function(){try{const t=Object.defineProperty({},"passive",{get(){l=!0}});window.addEventListener("test",null,t),window.removeEventListener("test",null,t)}catch(t){}}();const p=navigator.userAgent.match(/iP(?:[oa]d|hone)|Android/u),v={button:!0,command:!0,fieldset:!0,input:!0,keygen:!0,optgroup:!0,option:!0,select:!0,textarea:!0};function y(t){const e=t.type;if(!f(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 w={mouse:{target:null,mouseIgnoreJob:null},touch:{x:0,y:0,id:-1,scrollDecided:!1}};function g(t,e,n){t.movefn=e,t.upfn=n,document.addEventListener("mousemove",e),document.addEventListener("mouseup",n)}function _(t){document.removeEventListener("mousemove",t.movefn),document.removeEventListener("mouseup",t.upfn),t.movefn=null,t.upfn=null}const b=window.ShadyDOM&&window.ShadyDOM.noPatch?window.ShadyDOM.composedPath:t=>t.composedPath&&t.composedPath()||[],x={},k=[];function E(t){const e=b(t);return e.length>0?e[0]:t.target}function A(t){const e=t.type,n=t.currentTarget[c];if(!n)return;const o=n[e];if(!o)return;if(!t[u]&&(t[u]={},e.startsWith("touch"))){const n=t.changedTouches[0];if("touchstart"===e&&1===t.touches.length&&(w.touch.id=n.identifier),w.touch.id!==n.identifier)return;s||"touchstart"!==e&&"touchmove"!==e||function(t){const e=t.changedTouches[0],n=t.type;if("touchstart"===n)w.touch.x=e.clientX,w.touch.y=e.clientY,w.touch.scrollDecided=!1;else if("touchmove"===n){if(w.touch.scrollDecided)return;w.touch.scrollDecided=!0;const n=function(t){let e="auto";const n=b(t);for(let t,o=0;o<n.length;o++)if(t=n[o],t[r]){e=t[r];break}return e}(t);let o=!1;const i=Math.abs(w.touch.x-e.clientX),s=Math.abs(w.touch.y-e.clientY);t.cancelable&&("none"===n?o=!0:"pan-x"===n?o=s>i:"pan-y"===n&&(o=i>s)),o?t.preventDefault():X("track")}}(t)}const i=t[u];if(!i.skip){for(let e,n=0;n<k.length;n++)e=k[n],o[e.name]&&!i[e.name]&&e.flow&&e.flow.start.indexOf(t.type)>-1&&e.reset&&e.reset();for(let n,s=0;s<k.length;s++)n=k[s],o[n.name]&&!i[n.name]&&(i[n.name]=!0,n[e](t))}}function M(t,e,n){return!!x[e]&&(function(t,e,n){const i=x[e],u=i.deps,a=i.name;let h=t[c];h||(t[c]=h={});for(let e,n,o=0;o<u.length;o++)e=u[o],p&&f(e)&&"click"!==e||(n=h[e],n||(h[e]=n={_count:0}),0===n._count&&t.addEventListener(e,A,m(e)),n[a]=(n[a]||0)+1,n._count=(n._count||0)+1);t.addEventListener(e,n),i.touchAction&&function(t,e){s&&t instanceof HTMLElement&&o._3.run((()=>{t.style.touchAction=e})),t[r]=e}(t,i.touchAction)}(t,e,n),!0)}function N(t){k.push(t),t.emits.forEach((e=>{x[e]=t}))}function T(t,e,n){const o=new Event(e,{bubbles:!0,cancelable:!0,composed:!0});if(o.detail=n,t.dispatchEvent(o),o.defaultPrevented){const t=n.preventer||n.sourceEvent;t&&t.preventDefault&&t.preventDefault()}}function X(t){const e=function(t){for(let e,n=0;n<k.length;n++){e=k[n];for(let n,o=0;o<e.emits.length;o++)if(n=e.emits[o],n===t)return e}return null}(t);e.info&&(e.info.prevent=!0)}function Y(t,e,n,o){e&&T(e,t,{x:n.clientX,y:n.clientY,sourceEvent:n,preventer:o,prevent:t=>X(t)})}function D(t,e,n){if(t.prevent)return!1;if(t.started)return!0;const o=Math.abs(t.x-e),i=Math.abs(t.y-n);return o>=5||i>=5}function L(t,e,n){if(!e)return;const o=t.moves[t.moves.length-2],i=t.moves[t.moves.length-1],s=i.x-t.x,c=i.y-t.y;let u,r=0;o&&(u=i.x-o.x,r=i.y-o.y),T(e,"track",{state:t.state,x:n.clientX,y:n.clientY,dx:s,dy:c,ddx:u,ddy:r,sourceEvent:n,hover:()=>function(t,e){let n=document.elementFromPoint(t,e),o=n;for(;o&&o.shadowRoot&&!window.ShadyDOM;){const i=o;if(o=o.shadowRoot.elementFromPoint(t,e),i===o)break;o&&(n=o)}return n}(n.clientX,n.clientY)})}function P(t,e,n){const o=Math.abs(e.clientX-t.x),i=Math.abs(e.clientY-t.y),s=E(n||e);!s||v[s.localName]&&s.hasAttribute("disabled")||(isNaN(o)||isNaN(i)||o<=25&&i<=25||function(t){if("click"===t.type){if(0===t.detail)return!0;const e=E(t);if(!e.nodeType||e.nodeType!==Node.ELEMENT_NODE)return!0;const n=e.getBoundingClientRect(),o=t.pageX,i=t.pageY;return!(o>=n.left&&o<=n.right&&i>=n.top&&i<=n.bottom)}return!1}(e))&&(t.prevent||T(s,"tap",{x:e.clientX,y:e.clientY,sourceEvent:e,preventer:n}))}N({name:"downup",deps:["mousedown","touchstart","touchend"],flow:{start:["mousedown","touchstart"],end:["mouseup","touchend"]},emits:["down","up"],info:{movefn:null,upfn:null},reset(){_(this.info)},mousedown(t){if(!y(t))return;const e=E(t),n=this;g(this.info,(t=>{y(t)||(Y("up",e,t),_(n.info))}),(t=>{y(t)&&Y("up",e,t),_(n.info)})),Y("down",e,t)},touchstart(t){Y("down",E(t),t.changedTouches[0],t)},touchend(t){Y("up",E(t),t.changedTouches[0],t)}}),N({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,_(this.info)},mousedown(t){if(!y(t))return;const e=E(t),n=this,o=t=>{const o=t.clientX,i=t.clientY;D(n.info,o,i)&&(n.info.state=n.info.started?"mouseup"===t.type?"end":"track":"start","start"===n.info.state&&X("tap"),n.info.addMove({x:o,y:i}),y(t)||(n.info.state="end",_(n.info)),e&&L(n.info,e,t),n.info.started=!0)};g(this.info,o,(t=>{n.info.started&&o(t),_(n.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=E(t),n=t.changedTouches[0],o=n.clientX,i=n.clientY;D(this.info,o,i)&&("start"===this.info.state&&X("tap"),this.info.addMove({x:o,y:i}),L(this.info,e,n),this.info.state="track",this.info.started=!0)},touchend(t){const e=E(t),n=t.changedTouches[0];this.info.started&&(this.info.state="end",this.info.addMove({x:n.clientX,y:n.clientY}),L(this.info,e,n))}}),N({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){y(t)&&(this.info.x=t.clientX,this.info.y=t.clientY)},click(t){y(t)&&P(this.info,t)},touchstart(t){const e=t.changedTouches[0];this.info.x=e.clientX,this.info.y=e.clientY},touchend(t){P(this.info,t.changedTouches[0],t)}})}}]);