@descope/web-components-ui 3.20.4 → 3.21.1

package/dist/cjs/index.cjs.js

@@ -9546,6 +9546,37 @@ var collapsibleContainer$1 = /*#__PURE__*/Object.freeze({
 
 const componentName$16 = getComponentName('recovery-codes');
 
+const NO_ACTION = 'none';
+const DEFAULT_ERROR_MESSAGE =
+  'Copy or download your recovery codes to continue.';
+
+// default button label per action (buttons variant). the icons variant uses the vaadin
+// glyphs hardcoded in the shadow-DOM template below; the buttons variant uses image srcs.
+const ACTIONS = {
+  copy: { defaultText: 'Copy' },
+  download: { defaultText: 'Download' },
+};
+
+// per-button config suffixes; the full attribute is `${action}-${suffix}`.
+// `icon`/`icon-dark` are image srcs (the seeded glyph or a custom upload), matching
+// the standard button's start-icon (light/dark), not a boolean.
+const BUTTON_SUFFIXES = [
+  'text',
+  'variant',
+  'color',
+  'size',
+  'icon',
+  'icon-dark',
+];
+
+// changing any of these rebuilds the buttons (so the editor preview stays live)
+const BUTTON_ATTRS = [
+  'show-download',
+  ...Object.keys(ACTIONS).flatMap((action) =>
+    BUTTON_SUFFIXES.map((suffix) => `${action}-${suffix}`),
+  ),
+];
+
 const itemRenderer$5 = ({ value }, _, ref) => {
   return `
     <descope-text variant="${ref.variant}" mode="${ref.mode}">
@@ -9559,24 +9590,44 @@ class RawRecoveryCodes extends createBaseClass$1({
   baseSelector: ':host > div',
 }) {
   static get observedAttributes() {
-    return ['readonly'];
+    return ['readonly', 'required', ...BUTTON_ATTRS];
   }
 
+  // 'none' | 'copied' | 'downloaded' - the last action the user took on the codes
+  #action = NO_ACTION;
+
+  // the error is shown only after a submit attempt (reportValidity), like inputs
+  #showError = false;
+
+  // init() builds the buttons once with all seeded attrs; guards against rebuilding
+  // on every per-attribute change fired during element upgrade (before init runs)
+  #initialized = false;
+
   constructor() {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
       <div class="wrapper">
-        <div class="list"></div>
-        <descope-text class="icon-wrapper">
-          <vaadin-icon class="icon" icon="vaadin:copy-o" title="Copy"></vaadin-icon>
-        </descope-text>
+        <div class="codes-box">
+          <div class="list"></div>
+          <descope-text class="icon-wrapper">
+            <div class="icons">
+              <vaadin-icon class="icon copy-icon" icon="vaadin:copy-o" title="Copy"></vaadin-icon>
+              <vaadin-icon class="icon download-icon" icon="vaadin:download-alt" title="Download"></vaadin-icon>
+            </div>
+          </descope-text>
+        </div>
+        <div class="error-message"></div>
+        <div class="buttons-row"></div>
       </div>
     `;
 
     this.list = this.shadowRoot.querySelector('.list');
-    this.icon = this.shadowRoot.querySelector('.icon');
+    this.copyIcon = this.shadowRoot.querySelector('.copy-icon');
+    this.downloadIcon = this.shadowRoot.querySelector('.download-icon');
     this.iconWrapper = this.shadowRoot.querySelector('.icon-wrapper');
+    this.errorMessageEle = this.shadowRoot.querySelector('.error-message');
+    this.buttonsRow = this.shadowRoot.querySelector('.buttons-row');
 
     injectStyle(
       `
@@ -9585,8 +9636,14 @@ class RawRecoveryCodes extends createBaseClass$1({
         position: relative;
       }
       .wrapper {
+        display: flex;
+        flex-direction: column;
+      }
+      .codes-box {
         display: flex;
         justify-content: space-between;
+        box-sizing: border-box;
+        /* border shows the error ring inside the box; style/width/color/radius come from theme */
       }
       .list {
         display: flex;
@@ -9605,15 +9662,57 @@ class RawRecoveryCodes extends createBaseClass$1({
       .icon-wrapper {
         align-self: flex-start;
       }
+      .icons {
+        display: flex;
+        flex-direction: column;
+      }
       .icon {
         cursor: pointer;
       }
       .icon.copied {
         cursor: initial;
+        /* block re-clicks while the checkmark shows, so rapid clicks cannot repeat the action */
+        pointer-events: none;
       }
-      .icon.readonly {
+      /* readonly is a host attribute, so disable pointer events from one place */
+      :host([readonly="true"]) .icon,
+      :host([readonly="true"]) .buttons-row {
         pointer-events: none;
       }
+      .download-icon {
+        display: none;
+      }
+      :host([show-download="true"]) .download-icon {
+        display: inline-flex;
+      }
+      .error-message {
+        display: none;
+        /* width:0 + min-width:100% lets the message wrap to the component width without
+           its text expanding the (shrink-to-fit) component; full-width still fills the parent */
+        width: 0;
+        min-width: 100%;
+        box-sizing: border-box;
+        line-height: 1.2;
+        overflow-wrap: break-word;
+      }
+      :host([invalid]) .error-message {
+        display: block;
+      }
+      .buttons-row {
+        display: none;
+      }
+      :host([display-variant="buttons"]) .icon-wrapper {
+        display: none;
+      }
+      :host([display-variant="buttons"]) .buttons-row {
+        display: flex;
+        flex-wrap: wrap;
+      }
+      /* grow to fill equally; don't shrink below content, so they wrap to a new line
+         when they don't fit (like a container with auto-fit items) */
+      .buttons-row > descope-button {
+        flex: 1 0 auto;
+      }
     `,
       this,
     );
@@ -9627,41 +9726,190 @@ class RawRecoveryCodes extends createBaseClass$1({
     return this.getAttribute('mode');
   }
 
+  // the form value read by the flow SDK (#getFormData reads `.value`)
+  get value() {
+    return this.#action;
+  }
+
+  // a boolean attribute is "on" when present and not explicitly "false"
+  #boolAttr(name) {
+    return this.hasAttribute(name) && this.getAttribute(name) !== 'false';
+  }
+
+  get isRequired() {
+    return this.#boolAttr('required');
+  }
+
+  get isReadOnly() {
+    return this.#boolAttr('readonly');
+  }
+
+  get errorMessage() {
+    return (
+      this.getAttribute('data-errormessage-value-missing') ||
+      DEFAULT_ERROR_MESSAGE
+    );
+  }
+
+  get codesText() {
+    return String((this.data || []).map((rc) => rc.value).join('\n'));
+  }
+
   init() {
     super.init();
 
-    this.icon.addEventListener('click', this.onCopy.bind(this));
+    this.copyIcon.addEventListener('click', this.onCopy.bind(this));
+    this.downloadIcon.addEventListener('click', this.onDownload.bind(this));
 
     forwardAttrs(this, this.iconWrapper, { includeAttrs: ['variant', 'mode'] });
+
+    this.renderButtons();
+    this.#initialized = true;
   }
 
-  onCopy() {
-    navigator.clipboard.writeText(
-      String(this.data.map((rc) => rc.value).join('\n')),
+  get isDownloadEnabled() {
+    return this.getAttribute('show-download') === 'true';
+  }
+
+  // buttons variant: copy (+ download when enabled) as descope-buttons, each independently
+  // configurable. rendered even in the icons variant (CSS hides the row) so a variant switch is instant.
+  renderButtons() {
+    if (!this.buttonsRow) return;
+
+    const buttons = [this.buildButton('copy')];
+    if (this.isDownloadEnabled) {
+      buttons.push(this.buildButton('download'));
+    }
+    this.buttonsRow.replaceChildren(...buttons);
+  }
+
+  buildButton(action) {
+    const { defaultText } = ACTIONS[action];
+    const attr = (name, fallback) =>
+      this.getAttribute(`${action}-${name}`) || fallback;
+
+    const button = document.createElement('descope-button');
+    button.setAttribute('data-action', action);
+    button.setAttribute('variant', attr('variant', 'outline'));
+    button.setAttribute('mode', attr('color', 'primary'));
+    button.setAttribute('size', attr('size', 'md'));
+
+    // icon is an image src - the seeded glyph or a custom upload (light/dark),
+    // same as the standard button's start icon. rendered via descope-icon in the
+    // default slot (not slot="prefix") so it centers with the label when the
+    // button grows. descope-icon inlines SVGs, so the glyph (authored with
+    // fill="currentColor") tracks the button text color while an uploaded image
+    // keeps its own colors.
+    const iconSrc = this.getAttribute(`${action}-icon`);
+    if (iconSrc) {
+      const icon = document.createElement('descope-icon');
+      icon.setAttribute('src', iconSrc);
+      const iconDark = this.getAttribute(`${action}-icon-dark`);
+      if (iconDark) icon.setAttribute('src-dark', iconDark);
+      button.appendChild(icon);
+    }
+
+    button.appendChild(document.createTextNode(attr('text', defaultText)));
+    button.addEventListener('click', () =>
+      action === 'copy' ? this.onCopy() : this.onDownload(),
     );
+    return button;
+  }
 
-    this.icon.setAttribute('icon', 'vaadin:check-circle-o');
-    this.icon.setAttribute('title', 'Copied');
-    this.icon.classList.add('copied');
+  onCopy() {
+    if (this.isReadOnly) return;
+    navigator.clipboard.writeText(this.codesText);
+    this.showActionFeedback(this.copyIcon, 'Copied');
+    this.recordAction('copied');
+  }
 
-    setTimeout(() => {
-      this.icon.setAttribute('icon', 'vaadin:copy-o');
-      this.icon.setAttribute('title', 'Copy');
-      this.icon.classList.remove('copied');
+  onDownload() {
+    if (this.isReadOnly) return;
+    const blob = new Blob([this.codesText], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = 'recovery-codes.txt';
+    anchor.click();
+    URL.revokeObjectURL(url);
+
+    this.showActionFeedback(this.downloadIcon, 'Downloaded');
+    this.recordAction('downloaded');
+  }
+
+  // copy/download share this - only the visual feedback differs by variant
+  recordAction(action) {
+    this.#action = action;
+    // let the flow re-evaluate real-time conditions and pick up the new value
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+    // acting clears the mandatory error
+    if (this.checkValidity()) {
+      this.#showError = false;
+    }
+    this.syncValidityUI();
+  }
+
+  // icons variant: swap the icon to a checkmark for 5s (buttons variant is static)
+  showActionFeedback(iconEle, doneTitle) {
+    // on a rapid re-click the checkmark is already showing, so cancel the pending restore
+    // and keep the glyph/title we saved the first time (never capture the checkmark itself)
+    if (iconEle.feedbackTimer) {
+      clearTimeout(iconEle.feedbackTimer);
+    } else {
+      iconEle.originalIcon = iconEle.getAttribute('icon');
+      iconEle.originalTitle = iconEle.getAttribute('title');
+    }
+
+    iconEle.setAttribute('icon', 'vaadin:check-circle-o');
+    iconEle.setAttribute('title', doneTitle);
+    iconEle.classList.add('copied');
+
+    iconEle.feedbackTimer = setTimeout(() => {
+      iconEle.setAttribute('icon', iconEle.originalIcon);
+      iconEle.setAttribute('title', iconEle.originalTitle);
+      iconEle.classList.remove('copied');
+      iconEle.feedbackTimer = null;
     }, 5000);
   }
 
-  onReadOnly(isReadOnly) {
-    this.icon.classList.toggle('readonly', isReadOnly);
+  // the flow SDK's #validateInputs calls checkValidity/reportValidity on every *[name]
+  checkValidity() {
+    return this.isReadOnly || !this.isRequired || this.value !== NO_ACTION;
+  }
+
+  reportValidity() {
+    const valid = this.checkValidity();
+    this.#showError = !valid;
+    this.syncValidityUI();
+    return valid;
+  }
+
+  // single source of truth for the error UI - reflects `invalid` (theme `_invalid`
+  // draws the outline) and fills the message. never toggled anywhere else.
+  syncValidityUI() {
+    this.toggleAttribute('invalid', this.#showError);
+    if (this.errorMessageEle) {
+      this.errorMessageEle.textContent = this.#showError
+        ? this.errorMessage
+        : '';
+    }
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-    if (newValue !== oldValue) {
-      if (attrName === 'readonly') {
-        this.onReadOnly(newValue === 'true');
-      }
+    if (newValue === oldValue) return;
+
+    // if it stops being required, drop any error already shown
+    if (attrName === 'required' && !this.isRequired) {
+      this.#showError = false;
+      this.syncValidityUI();
+    }
+
+    // only rebuild for live edits after init (init already built once with all attrs);
+    // avoids rebuilding once per attribute during the initial element upgrade
+    if (this.#initialized && BUTTON_ATTRS.includes(attrName)) {
+      this.renderButtons();
     }
   }
 }
@@ -9681,10 +9929,66 @@ const RecoveryCodesClass = compose(
       textAlign: { selector: () => '.list', property: 'align-items' },
       iconColor: { selector: () => 'vaadin-icon', property: 'color' },
       iconSize: { selector: () => 'vaadin-icon', property: 'font-size' },
-      iconGap: { selector: () => '.wrapper', property: 'gap' },
+      iconGap: { selector: () => '.codes-box', property: 'gap' },
+      iconStackGap: { selector: () => '.icons', property: 'gap' },
+      buttonsGap: { selector: () => '.buttons-row', property: 'gap' },
+      sectionsGap: { selector: () => '.wrapper', property: 'gap' },
       bulletGap: { selector: () => 'descope-text span', property: 'gap' },
+      // top + bottom padding sit inside the border (below the codes) in both variants; in the
+      // buttons variant the bottom padding also repeats below the buttons (the buttons-row entry
+      // is inert in the icons variant, where the row is display:none).
+      verticalPadding: [
+        { selector: () => '.codes-box', property: 'padding-top' },
+        { selector: () => '.codes-box', property: 'padding-bottom' },
+        { selector: () => '.buttons-row', property: 'padding-bottom' },
+      ],
+      // horizontal padding insets the codes (inside the border) and the buttons, but NOT the
+      // error message, which stays aligned to the component edge (like the input error).
+      horizontalPadding: [
+        { selector: () => '.codes-box', property: 'padding-left' },
+        { selector: () => '.codes-box', property: 'padding-right' },
+        { selector: () => '.buttons-row', property: 'padding-left' },
+        { selector: () => '.buttons-row', property: 'padding-right' },
+      ],
+      errorBorderColor: {
+        selector: () => '.codes-box',
+        property: 'border-color',
+      },
+      errorMessageColor: {
+        selector: () => '.error-message',
+        property: 'color',
+      },
+      errorMessageFontSize: {
+        selector: () => '.error-message',
+        property: 'font-size',
+      },
+      errorMessageFontWeight: {
+        selector: () => '.error-message',
+        property: 'font-weight',
+      },
+      errorMessageFontFamily: {
+        selector: () => '.error-message',
+        property: 'font-family',
+      },
+      boxBorderRadius: {
+        selector: () => '.codes-box',
+        property: 'border-radius',
+      },
+      errorBorderWidth: {
+        selector: () => '.codes-box',
+        property: 'border-width',
+      },
+      boxBorderStyle: {
+        selector: () => '.codes-box',
+        property: 'border-style',
+      },
     },
   }),
+  // also inject the shared input-wrapper theme onto our host (like the input components do),
+  // so the error message + border track the console "customize inputs" tokens
+  createStyleMixin$1({
+    componentNameOverride: getComponentName('input-wrapper'),
+  }),
   createDynamicDataMixin$1({
     itemRenderer: itemRenderer$5,
     rerenderAttrsList: ['variant', 'mode'],
@@ -9703,9 +10007,33 @@ const recoveryCodes = {
   [vars$T.hostDirection]: globalRefs$t.direction,
   [vars$T.iconColor]: useVar$1(textVars$6.textColor),
   [vars$T.iconSize]: useVar$1(textVars$6.fontSize),
+  // gap between the codes and the icon column
   [vars$T.iconGap]: '8px',
+  // gap between the stacked copy and download icons
+  [vars$T.iconStackGap]: '16px',
+  // gap between the copy and download buttons (buttons variant)
+  [vars$T.buttonsGap]: '8px',
+  // gap between the codes, the error message and the buttons
+  [vars$T.sectionsGap]: '8px',
   [vars$T.bulletGap]: '0.35em',
 
+  // no padding by default so the current look is unchanged; the editor overrides per instance
+  [vars$T.verticalPadding]: '0',
+  [vars$T.horizontalPadding]: '0',
+
+  // error ring is transparent until the component is marked invalid (see _invalid below).
+  // message color/font + border come from the shared input-wrapper tokens, so customizing
+  // inputs in the console updates the recovery-codes error styling from the same place.
+  [vars$T.errorBorderColor]: 'transparent',
+  [vars$T.errorBorderWidth]: refs$1.borderWidth,
+  [vars$T.boxBorderRadius]: refs$1.borderRadius,
+  // local default; can later map to the input-wrapper border style if it exposes one
+  [vars$T.boxBorderStyle]: 'solid',
+  [vars$T.errorMessageColor]: refs$1.errorMessageTextColor,
+  [vars$T.errorMessageFontSize]: refs$1.errorMessageFontSize,
+  [vars$T.errorMessageFontWeight]: refs$1.errorMessageFontWeight,
+  [vars$T.errorMessageFontFamily]: refs$1.fontFamily,
+
   textAlign: {
     right: { [vars$T.textAlign]: 'flex-end' },
     left: { [vars$T.textAlign]: 'flex-start' },
@@ -9715,6 +10043,11 @@ const recoveryCodes = {
   _fullWidth: {
     [vars$T.hostWidth]: '100%',
   },
+
+  // reflected `invalid` attribute (set by the component on a failed submit)
+  _invalid: {
+    [vars$T.errorBorderColor]: refs$1.errorMessageTextColor,
+  },
 };
 
 var recoveryCodes$1 = /*#__PURE__*/Object.freeze({