@progressive-development/pd-wizard/dist/pd-wizard/PdWizard.js

Webcomponent pd-wizard following open-wc recommendations

import { css, LitElement, html } from 'lit';
import { property, state } from 'lit/decorators.js';
import { localized, msg } from '@lit/localize';
import { pdIcons } from '@progressive-development/pd-icon';
import '@progressive-development/pd-icon/pd-icon';
import '@progressive-development/pd-forms/pd-panel-button';
import './pd-steps/pd-steps.js';

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let PdWizard = class extends LitElement {
  constructor() {
    super(...arguments);
    this.currentNumber = -99;
    this.wizardSteps = [];
    this.panelWizard = false;
    this._submited = false;
  }
  render() {
    if (!this.wizardSteps.length) return html``;
    const currentStep = this.wizardSteps[this.currentNumber - 1];
    return html`
      <div class="wiz-header">
        ${this.panelWizard ? html`
              <div class="wiz-panel-h">
                <h1>${currentStep?.title ?? "No-Title"}</h1>
                <pd-icon
                  class="panel-close-icon"
                  title="Close"
                  activeIcon
                  icon="${pdIcons.ICON_XCLOSE}"
                  @click="${this._closeWizard}"
                ></pd-icon>
              </div>
            ` : html`
              <div class="wiz-title">
                <slot name="slotLogo"></slot>
                <span class="title">${currentStep?.title ?? "No-Title"}</span>
                <pd-icon
                  class="close"
                  icon="${pdIcons.ICON_CLOSE}"
                  @click="${this._closeWizard}"
                ></pd-icon>
              </div>
            `}

        <div class="wiz-breadcrumbs">
          <pd-steps
            .steps="${this.wizardSteps}"
            .currentStepNr="${this.currentNumber}"
          ></pd-steps>
        </div>
      </div>

      <div class="wiz-content">
        <div class="wiz-content-inner">
          ${this.wizardSteps.map(
      (step, i) => html`
              <div
                style="${this.currentNumber === i + 1 ? "" : "display:none"}"
              >
                <slot name="step-${i + 1}"></slot>
              </div>
            `
    )}
        </div>
      </div>

      <div class="wiz-buttons">
        ${this.currentNumber >= 1 && this.wizardSteps.length ? html`
              <pd-panel-button
                @button-clicked="${this._previousStep}"
                pdButtonIcon="${pdIcons.ICON_ARROW_BACK}"
                buttonText="${msg("Zurück", { id: "pd.wizard.button.back" })}"
                style="visibility: ${this.currentNumber === 1 ? "hidden" : "visible"}"
              ></pd-panel-button>

              ${this.currentNumber !== this.wizardSteps.length && currentStep?.next !== false ? html`
                    <pd-panel-button
                      @button-clicked="${this._nextStep}"
                      pdButtonIcon="${pdIcons.ICON_ARROW_NEXT}"
                      buttonText="${msg("Weiter", {
      id: "pd.wizard.button.next"
    })}"
                    ></pd-panel-button>
                  ` : ""}
              ${this.currentNumber === this.wizardSteps.length ? html`
                    <pd-panel-button
                      pdButtonIcon="${pdIcons.ICON_SYNC}"
                      primary
                      ?disabled="${this._submited}"
                      @button-clicked="${this._submit}"
                      buttonText="${msg("Absenden", {
      id: "pd.wizard.button.send"
    })}"
                    ></pd-panel-button>
                  ` : ""}
            ` : ""}
      </div>
    `;
  }
  _previousStep() {
    this.dispatchEvent(new CustomEvent("previous-step"));
  }
  _nextStep() {
    this.dispatchEvent(new CustomEvent("next-step"));
  }
  _submit() {
    const detail = { submited: false };
    this.dispatchEvent(new CustomEvent("submit-wizard", { detail }));
    this._submited = detail.submited;
  }
  _closeWizard() {
    this.dispatchEvent(new CustomEvent("close-wizard"));
  }
};
PdWizard.styles = [
  css`
      :host {
        /* These values are used more than onnce and dfined here for short access */
        --my-height: var(--pd-wizard-title-height, 110px);
        --my-header-font-color: var(
          --pd-wizard-header-font-col,
          var(--pd-default-bg-col)
        );
        --my-header-bg-col: var(
          --pd-wizard-header-bg-col,
          var(--pd-default-col)
        );

        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .wiz-header {
        flex-grow: 0;
      }

      .wiz-title {
        position: relative;
        text-align: center;
        background-color: var(--my-header-bg-col);
        height: var(---my-height);
        padding-left: var(--pd-wizard-title-padding-left, 0);
        color: var(--my-header-font-color);
      }

      :host(.top-rounded) .wiz-title {
        border-top-left-radius: var(--pd-wizard-top-borderradius, 5px);
        border-top-right-radius: var(--pd-wizard-top-borderradius, 5px);
      }

      .title {
        font-family: var(--pd-default-font-title-family);
        font-size: var(--pd-wizard-header-font-size, 2em);
        font-weight: bolder;
        line-height: var(--my-height);
      }

      /* The Close Icon */
      .close {
        position: absolute;
        top: 6px;
        right: 6px;

        cursor: pointer;

        --pd-icon-size: 2em;
        --pd-icon-col-active: white;
      }

      .close:hover,
      .close:focus {
        color: var(--pd-default-hover-col);
      }

      .wiz-content {
        display: flex;
        justify-content: var(--pd-wizard-justify-content, center);
        flex-grow: 1;

        background-color: var(
          --pd-wizard-content-bg-col,
          var(--pd-default-bg-col)
        );
        padding: var(--pd-wizard-content-padding, 1em);
        overflow-y: var(--pd-wizard-content-scroll, auto);
      }

      .wiz-content-inner {
        background-color: var(
          --pd-wizard-content-inner-bg-col,
          var(--pd-default-bg-col)
        );
        max-width: var(--pd-wizard-content-max-width, 1024px);
        width: var(--pd-wizard-content-width, 75%);
      }

      .wiz-buttons {
        display: flex;
        justify-content: var(--pd-wizard-justify-buttons, space-around);
        flex-grow: 0;
        padding: 1em;

        background: linear-gradient(
          to top,
          var(--pd-wizard-buttons-bg-col1, var(--pd-default-light-col)) 0%,
          var(--pd-wizard-buttons-bg-col2, var(--pd-default-disabled-light-col))
            100%
        );
      }

      :host(.bottom-rounded) .wiz-buttons {
        border-bottom-left-radius: var(--pd-wizard-bottom-borderradius, 5px);
        border-bottom-right-radius: var(--pd-wizard-bottom-borderradius, 5px);
      }

      /* 
       * CSS for panel wizard 
       */
      .wiz-panel-h {
        padding: var(--pd-wizard-header-panel-padding, 0);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(
          --pd-wizard-header-panel-bg-col,
          var(--pd-default-col)
        );
        position: relative;
      }

      .wiz-panel-h h1 {
        color: var(--pd-wizard-header-panel-title-col, white);
        padding: 0;
        margin: 0.8em 0 0.5em 0;
        font-size: var(--pd-wizard-header-font-size, 1.2em);
        font-family: var(--pd-default-font-title-family);
      }

      .panel-close-icon {
        --pd-icon-size: 2em;
        --pd-icon-col-active: white;
        cursor: pointer;
        position: absolute;
        right: 0px;
        top: 0px;
      }

      /* Size Elements for small width */
      @media (max-width: 700px) {
        .close {
          font-size: 0.7rem;
          --pd-icon-size: 1.2rem;
          top: 3px;
          right: 3px;
        }
        .title {
          margin-left: 50px;
        }
      }
    `
];
__decorateClass([
  property({ type: Number })
], PdWizard.prototype, "currentNumber", 2);
__decorateClass([
  property({ type: Array })
], PdWizard.prototype, "wizardSteps", 2);
__decorateClass([
  property({ type: Boolean })
], PdWizard.prototype, "panelWizard", 2);
__decorateClass([
  state()
], PdWizard.prototype, "_submited", 2);
PdWizard = __decorateClass([
  localized()
], PdWizard);

export { PdWizard };