@lion/ui 0.24.0 → 0.26.0

package/docs/fundamentals/systems/overlays/assets/demo-overlay-positioning.mjs

@@ -1,537 +0,0 @@
-/* eslint-disable max-classes-per-file */
-/* eslint-disable import/no-extraneous-dependencies */
-import { html, LitElement, css } from 'lit';
-import { ref, createRef } from 'lit/directives/ref.js';
-import { OverlayMixin } from '@lion/ui/overlays.js';
-import './demo-el-using-overlaymixin.js';
-
-/**
- * @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig
- * @typedef {import('@lion/ui/types/overlays.js').OverlayHost} OverlayHost
- * @typedef {import('@lion/ui/button.js').LionButton} LionButton
- * @typedef {'top-start'|'top'|'top-end'|'right-start'|'right'|'right-end'|'bottom-start'|'bottom'|'bottom-end'|'left-start'|'left'|'left-end'} LocalPlacement
- * @typedef {'center'|'top-left'|'top'|'top-right'|'right'|'bottom-right'|'bottom'|'bottom-left'|'left'} ViewportPlacement
- * @typedef {{refs: { contentNodeWrapper:{ref: {value:HTMLElement}}; closeButton: {ref: {value:HTMLButtonElement|LionButton}; label:string} }}} TemplateDataForOverlay
- */
-class DemoOverlayEl extends OverlayMixin(LitElement) {
-  /** @type {any} */
-  static get properties() {
-    return {
-      simulateViewport: { type: Boolean, attribute: 'simulate-viewport', reflect: true },
-      noDialogEl: { type: Boolean, attribute: 'no-dialog-el' },
-      useAbsolute: { type: Boolean, attribute: 'use-absolute', reflect: true },
-    };
-  }
-
-  static get styles() {
-    return [
-      super.styles || [],
-      css`
-        :host([use-absolute]) dialog {
-          position: absolute !important;
-        }
-
-        :host([simulate-viewport]) {
-          position: absolute;
-          inset: 0;
-          z-index: -1;
-        }
-
-        :host([simulate-viewport]) dialog {
-          position: absolute !important;
-          inset: 0;
-          width: 100%;
-          height: 100%;
-        }
-
-        :host([simulate-viewport]) #overlay-content-node-wrapper.overlays__overlay-container {
-          position: absolute;
-        }
-
-        /*=== demo invoker and content ===*/
-
-        :host ::slotted([slot='invoker']) {
-          border: 4px dashed;
-          height: 24px;
-          min-width: 24px;
-        }
-
-        :host ::slotted([slot='content']) {
-          background-color: black;
-          color: white;
-          height: 54px;
-          min-width: 54px;
-          display: flex;
-          place-items: center;
-          padding: 20px;
-          text-align: center;
-          font-size: 0.8rem;
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-
-    this.simulateViewport = false;
-    this._noDialogEl = false;
-    this.useAbsolute = false;
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  _defineOverlayConfig() {
-    return /** @type {OverlayConfig} */ ({
-      placementMode: 'local',
-      noDialogEl: this._noDialogEl,
-      popperConfig: { strategy: this.useAbsolute ? 'absolute' : 'fixed' },
-    });
-  }
-
-  _setupOpenCloseListeners() {
-    super._setupOpenCloseListeners();
-
-    if (this._overlayInvokerNode) {
-      this._overlayInvokerNode.addEventListener('click', this.toggle);
-    }
-  }
-
-  _teardownOpenCloseListeners() {
-    super._teardownOpenCloseListeners();
-
-    if (this._overlayInvokerNode) {
-      this._overlayInvokerNode.removeEventListener('click', this.toggle);
-    }
-  }
-
-  refs = {
-    invokerSlot: /** @type {{value: HTMLSlotElement}} */ (createRef()),
-    backdropSlot: /** @type {{value: HTMLSlotElement}} */ (createRef()),
-    contentSlot: /** @type {{value: HTMLSlotElement}} */ (createRef()),
-    closeButton: /** @type {{value: HTMLButtonElement|LionButton}} */ (createRef()),
-    contentNodeWrapper: /** @type {{value: HTMLElement}} */ (createRef()),
-  };
-
-  /**
-   * @overridable
-   * @type {TemplateDataForOverlay}
-   */
-  get _templateData() {
-    return {
-      refs: {
-        contentNodeWrapper: {
-          ref: this.refs.contentNodeWrapper,
-        },
-        closeButton: {
-          ref: this.refs.closeButton,
-          label: 'close dialog',
-        },
-      },
-    };
-  }
-
-  static templates = {
-    main: (/** @type {TemplateDataForOverlay} */ { refs }) => html`
-      <slot name="invoker"></slot>
-      <slot name="backdrop"></slot>
-      <div ${ref(refs.contentNodeWrapper.ref)} id="overlay-content-node-wrapper">
-        <slot name="content"></slot>
-      </div>
-    `,
-  };
-
-  render() {
-    const ctor = /** @type {typeof DemoOverlayEl} */ (this.constructor);
-    const templates = this.templates || ctor.templates;
-    return templates.main(this._templateData);
-  }
-}
-customElements.define('demo-overlay-el', DemoOverlayEl);
-
-class DemoOverlayPositioning extends LitElement {
-  static properties = {
-    placementMode: { attribute: 'placement-mode', type: String },
-    simulateViewport: { type: Boolean, attribute: 'simulate-viewport', reflect: true },
-    _activePos: { type: String, reflect: true, attribute: 'active-pos' },
-    _activeConfig: { type: Object, state: true },
-  };
-
-  static get styles() {
-    return [
-      css`
-        /*=== .pos-container ===*/
-
-        .pos-container {
-          padding: 0.5rem;
-          overflow: hidden;
-          place-items: center;
-          height: 20rem;
-          display: grid;
-          position: relative;
-        }
-
-        /*=== .pos-btn-wrapper ===*/
-
-        /** 
-         * We need a wrapper for position transforms, so that we can apply scale transforms on .pos-btn hover 
-        */
-
-        .pos-btn-wrapper {
-          position: absolute;
-        }
-
-        .pos-container--local .pos-btn-wrapper--bottom-start,
-        .pos-container--local .pos-btn-wrapper--bottom-end,
-        .pos-container--local .pos-btn-wrapper--top-start,
-        .pos-container--local .pos-btn-wrapper--top-end,
-        .pos-container--local .pos-btn-wrapper--top,
-        .pos-container--local .pos-btn-wrapper--bottom {
-          left: 50%;
-          transform: translateX(-50%);
-        }
-
-        .pos-container--local .pos-btn-wrapper--top-start,
-        .pos-container--local .pos-btn-wrapper--top-end,
-        .pos-container--local .pos-btn-wrapper--top {
-          top: 0;
-        }
-
-        .pos-container--local .pos-btn-wrapper--bottom-start,
-        .pos-container--local .pos-btn-wrapper--bottom-end,
-        .pos-container--local .pos-btn-wrapper--bottom {
-          bottom: 0;
-        }
-
-        .pos-container--local .pos-btn-wrapper--left-start,
-        .pos-container--local .pos-btn-wrapper--left-end,
-        .pos-container--local .pos-btn-wrapper--right-start,
-        .pos-container--local .pos-btn-wrapper--right-end,
-        .pos-container--local .pos-btn-wrapper--left,
-        .pos-container--local .pos-btn-wrapper--right {
-          top: 50%;
-          transform: translateY(-50%);
-        }
-
-        .pos-container--local .pos-btn-wrapper--left-start,
-        .pos-container--local .pos-btn-wrapper--left-end,
-        .pos-container--local .pos-btn-wrapper--left {
-          left: 0;
-        }
-
-        .pos-container--local .pos-btn-wrapper--right-start,
-        .pos-container--local .pos-btn-wrapper--right-end,
-        .pos-container--local .pos-btn-wrapper--right {
-          right: 0;
-        }
-
-        .pos-container--local .pos-btn-wrapper--bottom-start,
-        .pos-container--local .pos-btn-wrapper--top-start {
-          transform: translateX(-50%) translateX(-48px);
-        }
-
-        .pos-container--local .pos-btn-wrapper--bottom-end,
-        .pos-container--local .pos-btn-wrapper--top-end {
-          transform: translateX(-50%) translateX(48px);
-        }
-
-        .pos-container--local .pos-btn-wrapper--left-start,
-        .pos-container--local .pos-btn-wrapper--right-start {
-          transform: translateY(calc(-50% - 48px));
-        }
-
-        .pos-container--local .pos-btn-wrapper--left-end,
-        .pos-container--local .pos-btn-wrapper--right-end {
-          transform: translateY(calc(-50% + 48px));
-        }
-
-        .pos-container--global .pos-btn-wrapper {
-          top: 50%;
-          left: 50%;
-        }
-
-        .pos-container--global .pos-btn-wrapper--center {
-          transform: translateY(-50%) translateX(-50%);
-        }
-
-        .pos-container--global .pos-btn-wrapper--top-left {
-          transform: translateY(-50%) translateX(-50%) translateY(-48px) translateX(-48px);
-        }
-
-        .pos-container--global .pos-btn-wrapper--top {
-          transform: translateY(-50%) translateX(-50%) translateY(-48px);
-        }
-
-        .pos-container--global .pos-btn-wrapper--top-right {
-          transform: translateY(-50%) translateX(-50%) translateY(-48px) translateX(48px);
-        }
-
-        .pos-container--global .pos-btn-wrapper--bottom-left {
-          transform: translateY(-50%) translateX(-50%) translateY(48px) translateX(-48px);
-        }
-
-        .pos-container--global .pos-btn-wrapper--bottom {
-          transform: translateY(-50%) translateX(-50%) translateY(48px);
-        }
-
-        .pos-container--global .pos-btn-wrapper--bottom-right {
-          transform: translateY(-50%) translateX(-50%) translateY(48px) translateX(48px);
-        }
-
-        .pos-container--global .pos-btn-wrapper--right {
-          transform: translateY(-50%) translateX(-50%) translateX(48px);
-        }
-
-        .pos-container--global .pos-btn-wrapper--left {
-          transform: translateY(-50%) translateX(-50%) translateX(-48px);
-        }
-
-        /*=== .pos-btn ===*/
-
-        .pos-btn {
-          padding: 1rem;
-          cursor: pointer;
-          -webkit-appearance: button;
-          background-color: transparent;
-          background-image: none;
-          text-transform: none;
-          font-family: inherit;
-          font-size: 100%;
-          line-height: inherit;
-          color: inherit;
-          margin: 0;
-          box-sizing: border-box;
-          border: 0 solid #bfc3d9;
-        }
-
-        .pos-btn__inner {
-          border-style: solid;
-          border-width: 2px;
-          border-radius: 100%;
-          width: 0.25rem;
-          height: 0.25rem;
-        }
-
-        .pos-btn:hover {
-          transform: scaleX(2) scaleY(2);
-        }
-
-        .pos-btn--active .pos-btn__inner {
-          background-color: black;
-        }
-
-        /*=== .reference-btn ===*/
-
-        .reference-btn {
-          background: white;
-          box-sizing: border-box;
-          border: 5px dashed black;
-          cursor: pointer;
-          padding: 1rem;
-          width: 8rem;
-          height: 8rem;
-        }
-
-        .pos-container--global .reference-btn {
-          position: absolute;
-          inset: 0;
-          width: 100%;
-          height: 100%;
-          z-index: -1;
-        }
-
-        /*=== .close-btn ===*/
-
-        .close-btn {
-          background: transparent;
-          border: none;
-          position: absolute;
-          right: 0;
-          top: 0;
-          padding: 0.5rem;
-        }
-
-        .close-btn::after {
-          content: '';
-          clear: both;
-        }
-
-        /*=== .overlay-content ===*/
-
-        .overlay-content {
-          display: flex;
-          box-sizing: border-box;
-          border: 1px solid black;
-          align-items: center;
-          justify-items: center;
-          background-color: #000;
-          padding: 1rem;
-          width: 2rem;
-          height: 2rem;
-        }
-
-        :host([active-pos^='center']) .pos-container--global .overlay-content {
-          width: 14rem;
-          height: 16rem;
-        }
-
-        :host([active-pos^='bottom']) .pos-container--global .overlay-content,
-        :host([active-pos^='top']) .pos-container--global .overlay-content {
-          width: 50%;
-        }
-
-        :host([active-pos^='left']) .pos-container--global .overlay-content,
-        :host([active-pos^='right']) .pos-container--global .overlay-content {
-          height: 50%;
-        }
-
-        :host([active-pos^='center']) .pos-btn {
-          color: white;
-        }
-      `,
-    ];
-  }
-
-  refs = {
-    overlay: /** @type {{value: OverlayHost}} */ (createRef()),
-  };
-
-  constructor() {
-    super();
-
-    this.placementMode = 'local';
-    /** @type {ViewportPlacement[]|LocalPlacement[]} */
-    this._placements = [];
-    this.simulateViewport = false;
-    this._activePos = 'top';
-  }
-
-  /**
-   *
-   * @param {{pos:ViewportPlacement|LocalPlacement}} opts
-   */
-  async _updatePos({ pos }) {
-    this._activePos = pos;
-
-    const overlayEl = this.refs.overlay.value;
-
-    // @ts-ignore allow protected
-    if (overlayEl?._overlayCtrl) {
-      overlayEl.config = /** @type {Partial<OverlayConfig>} */ ({
-        popperConfig: { placement: pos },
-        viewportConfig: { placement: pos },
-      });
-      // TODO: these hacks below should not be needed. Fix when moving to floating-ui
-      // => animate different positions
-      // @ts-ignore allow protected
-      await overlayEl._overlayCtrl.hide();
-      // @ts-ignore allow protected
-      overlayEl._overlayCtrl.show();
-      overlayEl.config = /** @type {Partial<OverlayConfig>} */ ({
-        popperConfig: { placement: pos },
-        viewportConfig: { placement: pos },
-      });
-    }
-  }
-
-  /**
-   * @param {import('lit').PropertyValues } changedProperties
-   */
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-
-    this._updatePos({ pos: this.placementMode === 'local' ? 'top' : 'center' });
-  }
-
-  /**
-   * @param {import('lit').PropertyValues } changedProperties
-   */
-  update(changedProperties) {
-    if (changedProperties.has('placementMode')) {
-      if (this.placementMode === 'local') {
-        this._placements = [
-          `top-start`,
-          `top`,
-          `top-end`,
-          `right-start`,
-          `right`,
-          `right-end`,
-          `bottom-start`,
-          `bottom`,
-          `bottom-end`,
-          `left-start`,
-          `left`,
-          `left-end`,
-        ];
-      } else {
-        this._placements = [
-          `center`,
-          `top-left`,
-          `top`,
-          `top-right`,
-          `right`,
-          `bottom-right`,
-          `bottom`,
-          `bottom-left`,
-          `left`,
-        ];
-      }
-    }
-    super.update(changedProperties);
-  }
-
-  /**
-   * @param {import('lit').PropertyValues } changedProperties
-   */
-  updated(changedProperties) {
-    super.updated(changedProperties);
-
-    if (changedProperties.has('placementMode')) {
-      this._activeConfig = {
-        placementMode: this.placementMode,
-      };
-    }
-  }
-
-  /**
-   * @param {{pos:string}} opts
-   * @returns
-   */
-  _isActivePosBtn({ pos }) {
-    return pos === this._activePos;
-  }
-
-  render() {
-    return html`
-      <div class="pos-container pos-container--${this.placementMode}">
-        ${this._placements.map(
-          pos =>
-            html`
-              <div class="pos-btn-wrapper pos-btn-wrapper--${pos}">
-                <button
-                  @click="${() => this._updatePos({ pos })}"
-                  class="pos-btn ${this._isActivePosBtn({ pos }) ? 'pos-btn--active' : ''}"
-                  aria-label="${pos}"
-                >
-                  <div class="pos-btn__inner"></div>
-                </button>
-              </div>
-            `,
-        )}
-
-        <demo-overlay-el
-          opened
-          ?simulate-viewport="${this.simulateViewport}"
-          ${ref(
-            // @ts-ignore
-            this.refs.overlay,
-          )}
-          .config="${this._activeConfig}"
-        >
-          <button class="reference-btn" slot="invoker"></button>
-          <div class="overlay-content" slot="content"></div>
-        </demo-overlay-el>
-      </div>
-    `;
-  }
-}
-customElements.define('demo-overlay-positioning', DemoOverlayPositioning);

package/docs/fundamentals/systems/overlays/assets/umbrella-form.js

@@ -1,140 +0,0 @@
-import { LitElement, html } from 'lit';
-import { Required, MinLength } from '@lion/ui/form-core.js';
-import '@lion/ui/define/lion-form.js';
-import '@lion/ui/define/lion-fieldset.js';
-import '@lion/ui/define/lion-input.js';
-import '@lion/ui/define/lion-input-date.js';
-import '@lion/ui/define/lion-input-datepicker.js';
-import '@lion/ui/define/lion-input-amount.js';
-import '@lion/ui/define/lion-input-iban.js';
-import '@lion/ui/define/lion-input-email.js';
-import '@lion/ui/define/lion-input-tel.js';
-import '@lion/ui/define/lion-input-tel-dropdown.js';
-import '@lion/ui/define/lion-checkbox-group.js';
-import '@lion/ui/define/lion-checkbox.js';
-import '@lion/ui/define/lion-radio-group.js';
-import '@lion/ui/define/lion-radio.js';
-import '@lion/ui/define/lion-select.js';
-import '@lion/ui/define/lion-select-rich.js';
-import '@lion/ui/define/lion-listbox.js';
-import '@lion/ui/define/lion-option.js';
-import '@lion/ui/define/lion-combobox.js';
-import '@lion/ui/define/lion-input-range.js';
-import '@lion/ui/define/lion-textarea.js';
-import '@lion/ui/define/lion-button.js';
-import '@lion/ui/define/lion-switch.js';
-import '@lion/ui/define/lion-input-stepper.js';
-
-export class UmbrellaForm extends LitElement {
-  get _lionFormNode() {
-    return /** @type {import('@lion/ui/form.js').LionForm} */ (
-      this.shadowRoot?.querySelector('lion-form')
-    );
-  }
-
-  render() {
-    return html`
-      <lion-form>
-        <form>
-          <lion-fieldset name="fullName">
-            <lion-input
-              name="firstName"
-              label="First Name"
-              .validators="${[new Required()]}"
-            ></lion-input>
-            <lion-input
-              name="lastName"
-              label="Last Name"
-              .validators="${[new Required()]}"
-            ></lion-input>
-          </lion-fieldset>
-          <lion-input-date
-            name="date"
-            label="Date of application"
-            .modelValue="${new Date('2000/12/12')}"
-            .validators="${[new Required()]}"
-          ></lion-input-date>
-          <lion-input-datepicker
-            name="datepicker"
-            label="Date to be picked"
-            .modelValue="${new Date('2020/12/12')}"
-            .validators="${[new Required()]}"
-          ></lion-input-datepicker>
-          <lion-textarea
-            name="bio"
-            label="Biography"
-            .validators="${[new Required(), new MinLength(10)]}"
-            help-text="Please enter at least 10 characters"
-          ></lion-textarea>
-          <lion-input-amount name="money" label="Money"></lion-input-amount>
-          <lion-input-iban name="iban" label="Iban"></lion-input-iban>
-          <lion-input-email name="email" label="Email"></lion-input-email>
-          <lion-input-tel name="tel" label="Telephone Number"></lion-input-tel>
-          <lion-input-tel-dropdown
-            name="tel-dropdown"
-            label="Telephone Number with dropdown list"
-          ></lion-input-tel-dropdown>
-          <lion-checkbox-group
-            label="What do you like?"
-            name="checkers"
-            .validators="${[new Required()]}"
-          >
-            <lion-checkbox .choiceValue="${'foo'}" checked label="I like foo"></lion-checkbox>
-            <lion-checkbox .choiceValue="${'bar'}" checked label="I like bar"></lion-checkbox>
-            <lion-checkbox .choiceValue="${'baz'}" label="I like baz"></lion-checkbox>
-          </lion-checkbox-group>
-          <lion-radio-group
-            name="dinosaurs"
-            label="Favorite dinosaur"
-            .validators="${[new Required()]}"
-          >
-            <lion-radio .choiceValue="${'allosaurus'}" label="allosaurus"></lion-radio>
-            <lion-radio .choiceValue="${'brontosaurus'}" checked label="brontosaurus"></lion-radio>
-            <lion-radio .choiceValue="${'diplodocus'}" label="diplodocus"></lion-radio>
-          </lion-radio-group>
-          <lion-select-rich name="favoriteColor" label="Favorite color">
-            <lion-options slot="input">
-              <lion-option .choiceValue="${'red'}">Red</lion-option>
-              <lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
-              <lion-option .choiceValue="${'teal'}">Teal</lion-option>
-            </lion-options>
-          </lion-select-rich>
-          <lion-select label="Lyrics" name="lyrics" .validators="${[new Required()]}">
-            <select slot="input">
-              <option value="1">Fire up that loud</option>
-              <option value="2">Another round of shots...</option>
-              <option value="3">Drop down for what?</option>
-            </select>
-          </lion-select>
-          <lion-input-range
-            name="range"
-            min="1"
-            max="5"
-            .modelValue="${2.3}"
-            unit="%"
-            step="0.1"
-            label="Input range"
-          >
-          </lion-input-range>
-          <lion-checkbox-group name="terms" .validators="${[new Required()]}">
-            <lion-checkbox label="I blindly accept all terms and conditions"></lion-checkbox>
-          </lion-checkbox-group>
-          <lion-textarea name="comments" label="Comments"></lion-textarea>
-          <div class="buttons">
-            <lion-button raised>Submit</lion-button>
-            <lion-button
-              type="button"
-              raised
-              @click=${() => {
-                const lionForm = this._lionFormNode;
-                lionForm.resetGroup();
-              }}
-              >Reset</lion-button
-            >
-          </div>
-        </form>
-      </lion-form>
-    `;
-  }
-}
-customElements.define('umbrella-form', UmbrellaForm);