@lion/ui 0.0.8 → 0.0.10

package/components/input-datepicker/src/LionCalendarOverlayFrame.js

@@ -1,125 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { LocalizeMixin } from '@lion/ui/localize.js';
-
-export class LionCalendarOverlayFrame extends LocalizeMixin(LitElement) {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: inline-block;
-          background: white;
-          position: relative;
-        }
-
-        :host([hidden]) {
-          display: none;
-        }
-
-        .calendar-overlay__header {
-          display: flex;
-        }
-
-        .calendar-overlay__heading {
-          padding: 16px 16px 8px;
-          flex: 1;
-        }
-
-        .calendar-overlay__heading > .calendar-overlay__close-button {
-          flex: none;
-        }
-
-        .calendar-overlay__close-button {
-          min-width: 40px;
-          min-height: 32px;
-          border-width: 0;
-          padding: 0;
-          font-size: 24px;
-        }
-      `,
-    ];
-  }
-
-  static get localizeNamespaces() {
-    return [
-      {
-        'lion-calendar-overlay-frame': /** @param {string} locale */ locale => {
-          switch (locale) {
-            case 'bg-BG':
-              return import('@lion/ui/overlays-translations/bg-BG.js');
-            case 'cs-CZ':
-              return import('@lion/ui/overlays-translations/cs-CZ.js');
-            case 'de-DE':
-              return import('@lion/ui/overlays-translations/de-DE.js');
-            case 'en-AU':
-              return import('@lion/ui/overlays-translations/en-AU.js');
-            case 'en-GB':
-              return import('@lion/ui/overlays-translations/en-GB.js');
-            case 'en-US':
-              return import('@lion/ui/overlays-translations/en-US.js');
-            case 'en-PH':
-              return import('@lion/ui/overlays-translations/en.js');
-            case 'es-ES':
-              return import('@lion/ui/overlays-translations/es-ES.js');
-            case 'fr-FR':
-              return import('@lion/ui/overlays-translations/fr-FR.js');
-            case 'fr-BE':
-              return import('@lion/ui/overlays-translations/fr-BE.js');
-            case 'hu-HU':
-              return import('@lion/ui/overlays-translations/hu-HU.js');
-            case 'it-IT':
-              return import('@lion/ui/overlays-translations/it-IT.js');
-            case 'nl-BE':
-              return import('@lion/ui/overlays-translations/nl-BE.js');
-            case 'nl-NL':
-              return import('@lion/ui/overlays-translations/nl-NL.js');
-            case 'pl-PL':
-              return import('@lion/ui/overlays-translations/pl-PL.js');
-            case 'ro-RO':
-              return import('@lion/ui/overlays-translations/ro-RO.js');
-            case 'ru-RU':
-              return import('@lion/ui/overlays-translations/ru-RU.js');
-            case 'sk-SK':
-              return import('@lion/ui/overlays-translations/sk-SK.js');
-            case 'uk-UA':
-              return import('@lion/ui/overlays-translations/uk-UA.js');
-            case 'zh-CN':
-              return import('@lion/ui/overlays-translations/zh.js');
-            default:
-              return import('@lion/ui/overlays-translations/en.js');
-          }
-        },
-      },
-      ...super.localizeNamespaces,
-    ];
-  }
-
-  /** @private */
-  __dispatchCloseEvent() {
-    this.dispatchEvent(new Event('close-overlay'));
-  }
-
-  render() {
-    // eslint-disable-line class-methods-use-this
-    return html`
-      <div class="calendar-overlay">
-        <div class="calendar-overlay__header">
-          <h1 class="calendar-overlay__heading">
-            <slot name="heading"></slot>
-          </h1>
-          <button
-            @click="${this.__dispatchCloseEvent}"
-            id="close-button"
-            title="${this.msgLit('lion-calendar-overlay-frame:close')}"
-            aria-label="${this.msgLit('lion-calendar-overlay-frame:close')}"
-            class="calendar-overlay__close-button"
-          >
-            <slot name="close-icon">&times;</slot>
-          </button>
-        </div>
-        <div id="overlay-content-node-wrapper">
-          <slot name="content"></slot>
-        </div>
-      </div>
-    `;
-  }
-}

package/components/overlays/src/globalOverlaysStyle.js

@@ -1,139 +0,0 @@
-import { css } from 'lit';
-
-export const globalOverlaysStyle = css`
-  .global-overlays {
-    position: fixed;
-    z-index: 200;
-  }
-
-  .global-overlays__overlay {
-    pointer-events: auto;
-  }
-
-  .global-overlays__overlay-container {
-    display: flex;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-  }
-
-  .global-overlays__overlay-container--top-left {
-    justify-content: flex-start;
-    align-items: flex-start;
-  }
-
-  .global-overlays__overlay-container--top {
-    justify-content: center;
-    align-items: flex-start;
-  }
-
-  .global-overlays__overlay-container--top-right {
-    justify-content: flex-end;
-    align-items: flex-start;
-  }
-
-  .global-overlays__overlay-container--right {
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .global-overlays__overlay-container--bottom-left {
-    justify-content: flex-start;
-    align-items: flex-end;
-  }
-
-  .global-overlays__overlay-container--bottom {
-    justify-content: center;
-    align-items: flex-end;
-  }
-
-  .global-overlays__overlay-container--bottom-right {
-    justify-content: flex-end;
-    align-items: flex-end;
-  }
-  .global-overlays__overlay-container--left {
-    justify-content: flex-start;
-    align-items: center;
-  }
-
-  .global-overlays__overlay-container--center {
-    justify-content: center;
-    align-items: center;
-  }
-
-  .global-overlays__overlay--bottom-sheet {
-    width: 100%;
-  }
-
-  .global-overlays .global-overlays__backdrop {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    background-color: #333333;
-    filter: opacity(30%);
-    display: none;
-  }
-
-  .global-overlays .global-overlays__backdrop--visible {
-    display: block;
-  }
-
-  .global-overlays .global-overlays__backdrop--animation-in {
-    animation: global-overlays-backdrop-fade-in 300ms;
-  }
-
-  .global-overlays .global-overlays__backdrop--animation-out {
-    animation: global-overlays-backdrop-fade-out 300ms;
-    opacity: 0;
-  }
-
-  @keyframes global-overlays-backdrop-fade-in {
-    from {
-      opacity: 0;
-    }
-  }
-
-  @keyframes global-overlays-backdrop-fade-out {
-    from {
-      opacity: 0.3;
-    }
-  }
-
-  body > *[inert] {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    pointer-events: none;
-  }
-
-  body.global-overlays-scroll-lock {
-    overflow: hidden;
-  }
-
-  body.global-overlays-scroll-lock-ios-fix {
-    position: fixed;
-    width: 100%;
-  }
-
-  html.global-overlays-scroll-lock-ios-fix {
-    height: 100vh;
-  }
-
-  @media screen and (prefers-reduced-motion: reduce) {
-    .global-overlays .global-overlays__backdrop--animation-in {
-      animation: global-overlays-backdrop-fade-in 1ms;
-    }
-
-    .global-overlays .global-overlays__backdrop--animation-out {
-      animation: global-overlays-backdrop-fade-out 1ms;
-    }
-  }
-`;

package/dist-types/components/input-datepicker/src/LionCalendarOverlayFrame.d.ts

@@ -1,10 +0,0 @@
-declare const LionCalendarOverlayFrame_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("../../localize/types/LocalizeMixinTypes.js").LocalizeMixinHost> & Pick<typeof import("../../localize/types/LocalizeMixinTypes.js").LocalizeMixinHost, "prototype" | "localizeNamespaces" | "waitForLocalizeNamespaces"> & Pick<typeof LitElement, "prototype" | "_$litElement$" | "enabledWarnings" | "enableWarning" | "disableWarning" | "addInitializer" | "_initializers" | "elementProperties" | "properties" | "elementStyles" | "styles" | "observedAttributes" | "createProperty" | "getPropertyOptions" | "shadowRootOptions">;
-export class LionCalendarOverlayFrame extends LionCalendarOverlayFrame_base {
-    static get styles(): import("lit").CSSResult[];
-    /** @private */
-    private __dispatchCloseEvent;
-    render(): import("lit-html").TemplateResult<1>;
-}
-import { LitElement } from "lit";
-export {};
-//# sourceMappingURL=LionCalendarOverlayFrame.d.ts.map

package/dist-types/components/input-datepicker/src/LionCalendarOverlayFrame.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LionCalendarOverlayFrame.d.ts","sourceRoot":"","sources":["../../../../components/input-datepicker/src/LionCalendarOverlayFrame.js"],"names":[],"mappings":";AAGA;IACE,+CAmCC;IAwDD,eAAe;IACf,6BAEC;IAED,+CAuBC;CACF"}

package/dist-types/components/overlays/src/globalOverlaysStyle.d.ts

@@ -1,2 +0,0 @@
-export const globalOverlaysStyle: import("lit").CSSResult;
-//# sourceMappingURL=globalOverlaysStyle.d.ts.map

package/dist-types/components/overlays/src/globalOverlaysStyle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"globalOverlaysStyle.d.ts","sourceRoot":"","sources":["../../../../components/overlays/src/globalOverlaysStyle.js"],"names":[],"mappings":"AAEA,0DAwIE"}

package/dist-types/exports/define/lion-calendar-overlay-frame.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=lion-calendar-overlay-frame.d.ts.map

package/dist-types/exports/define/lion-calendar-overlay-frame.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lion-calendar-overlay-frame.d.ts","sourceRoot":"","sources":["../../../exports/define/lion-calendar-overlay-frame.js"],"names":[],"mappings":""}

package/docs/fundamentals/systems/overlays/assets/demo-overlay-system.js

@@ -1,42 +0,0 @@
-import { html, LitElement } from 'lit';
-import { OverlayMixin } from '@lion/ui/overlays.js';
-
-/**
- * @typedef {import('../types/OverlayConfig').OverlayConfig} OverlayConfig
- */
-class DemoOverlaySystem extends OverlayMixin(LitElement) {
-  // eslint-disable-next-line class-methods-use-this
-  _defineOverlayConfig() {
-    return /** @type {OverlayConfig} */ ({
-      placementMode: 'global',
-    });
-  }
-
-  _setupOpenCloseListeners() {
-    super._setupOpenCloseListeners();
-
-    if (this._overlayInvokerNode) {
-      this._overlayInvokerNode.addEventListener('click', this.toggle);
-    }
-  }
-
-  _teardownOpenCloseListeners() {
-    super._teardownOpenCloseListeners();
-
-    if (this._overlayInvokerNode) {
-      this._overlayInvokerNode.removeEventListener('click', this.toggle);
-    }
-  }
-
-  render() {
-    return html`
-      <slot name="invoker"></slot>
-      <slot name="backdrop"></slot>
-      <div id="overlay-content-node-wrapper">
-        <slot name="content"></slot>
-      </div>
-      <div>popup is ${this.opened ? 'opened' : 'closed'}</div>
-    `;
-  }
-}
-customElements.define('demo-overlay-system', DemoOverlaySystem);

package/docs/fundamentals/systems/overlays/form-integration.md

@@ -1,65 +0,0 @@
-# Systems >> Overlays >> Form Integrations ||60
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-input-datepicker.js';
-import '@lion/ui/define/lion-listbox.js';
-import '@lion/ui/define/lion-listbox.js';
-import '@lion/ui/define/lion-select-rich.js';
-import './assets/demo-overlay-system.js';
-import './assets/applyDemoOverlayStyles.js';
-```
-
-## Select Rich
-
-Opening a Rich Select inside a dialog.
-
-```js preview-story
-export const selectRich = () => html`
-  <demo-overlay-system>
-    <button slot="invoker">Open Dialog</button>
-    <div slot="content" class="demo-overlay">
-      <h1>Select Rick example</h1>
-      <lion-select-rich name="favoriteColor" label="Favorite color">
-        <lion-option .choiceValue=${'red'}>Red</lion-option>
-        <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
-        <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-      </lion-select-rich>
-      <p>
-        You can close this dialog here:
-        <button
-          class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-      </p>
-    </div>
-  </demo-overlay-system>
-`;
-```
-
-## Input Datepicker
-
-Opening an Input Datepicker inside a dialog.
-
-```js preview-story
-export const inputDatepicker = () => html`
-  <demo-overlay-system>
-    <button slot="invoker">Open Dialog</button>
-    <div slot="content" class="demo-overlay">
-      <h1>Input Datepicker example</h1>
-      <lion-input-datepicker name="date" label="Date"></lion-input-datepicker>
-      <p>
-        You can close this dialog here:
-        <button
-          class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-      </p>
-    </div>
-  </demo-overlay-system>
-`;
-```

package/docs/fundamentals/systems/overlays/scope.md

@@ -1,176 +0,0 @@
-# Systems >> Overlays >> Scope ||50
-
-The goal of this document is to specify the goal and duties of the overlay system, mainly by
-identifying all different appearances and types of overlays.
-
-## What is an overlay manager?
-
-An overlay is a visual element that is painted on top of a page, breaking out of the regular
-document flow. An overlay manager is a global repository keeping track of all different types of overlays. The need for a global housekeeping mainly arises when multiple overlays are opened simultaneously. As opposed to a single overlay, the overlay manager stores knowledge about:
-
-- Whether the scroll behaviour of the body element can be manipulated.
-- What space is available in the window for drawing new overlays.
-
-The manager is in charge of rendering an overlay to the DOM. Therefore, a developer should be able to control:
-
-- Its ‘physical position’ (where the dialog is attached). This can either be:
-  - globally: at root level of the DOM. This guarantees a total control over its painting, since the stacking context can be controlled from here and interfering parents (that set overflow values or transforms) can’t be apparent. Additionally, making a modal dialog requiring all surroundings to have aria-hidden="true", will be easier when the overlay is attached on body level.
-  - locally: next to the invoking element. This gives advantages for accessibility and(performant) rendering of an overlay next to its invoker on scroll and window resizes
-- Toggling of the ‘shown’ state of the overlay
-- Positioning preferences(for instance ‘bottom-left’) and strategies (ordered fallback preferences)
-
-Presentation/styling of the overlay is out of the scope of the manager, except for its positioning in its context.
-
-Accessibility is usually dependent on the type of overlay, its specific implementation and its browser/screen reader support (aria 1.0 vs 1.1). We strive for an optimum here by supporting 1.0 as a bare minimum and add 1.1 enrichments on top.
-
-For every overlay, the manager has access to the overlay element and the invoker (and possible other elements that are needed for focus delegation as described in <https://www.w3.org/TR/wai-aria-practices/#dialog_modal> (notes).
-
-## Defining different types of overlays
-
-When browsing through the average ui library, one can encounter multiple names for occurrences of overlays. Here is a list of names encountered throughout the years:
-
-- dialog
-- modal
-- popover
-- popup
-- popdown
-- popper
-- bubble
-- balloon
-- dropdown
-- dropup
-- tooltip
-- layover
-- overlay
-- toast
-- snackbar
-- sheet (bottom, top, left, right)
-- etc..
-
-The problem with most of those terms is their lack of clear definition: what might be considered a tooltip in UI framework A, can be considered a popover in framework B. What can be called a modal in framework C, might actually be just a dialog. Etc etc…
-
-### Official specifications
-
-In order to avoid confusion and be as specification compliant as possible, it’s always a good idea to consult the W3C. This website shows a full list with specifications of accessible web widgets: <https://www.w3.org/TR/wai-aria-practices/>.
-A great overview of all widget-, structure- and role relations can be found in the ontology diagram below:
-
-<https://www.w3.org/WAI/PF/aria-1.1/rdf_model.svg>
-
-Out of all the overlay names mentioned above, we can only identify the dialog and the tooltip as official roles. Let’s take a closer look at their definitions...
-
-### Dialog
-
-The dialog is described as follows by the W3C:
-
-> “A dialog is a window overlaid on either the primary window or another dialog window. Windows
-> under a modal dialog are inert. That is, users cannot interact with content outside an active
-> dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so
-> it is difficult to discern, and in some implementations, attempts to interact with the inert
-> content cause the dialog to close.
-> Like non-modal dialogs, modal dialogs contain their tab sequence. That is, Tab and Shift + Tab do
-> not move focus outside the dialog. However, unlike most non-modal dialogs, modal dialogs do not
-> provide means for moving keyboard focus outside the dialog window without closing the dialog.”
-
-- specification: <https://www.w3.org/TR/wai-aria-1.1/#dialog>
-- widget description: <https://www.w3.org/TR/wai-aria-practices/#dialog_modal>
-
-### Tooltip
-
-According to W3C, a tooltip is described by the following:
-
-> “A tooltip is a popup that displays information related to an element when the element receives.
-> keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears.
-> when Escape is pressed or on mouse out.
-> Tooltip widgets do not receive focus. A hover that contains focusable elements can be made using.
-> a non-modal dialog.”
-
-- specification: <https://www.w3.org/TR/wai-aria-1.1/#tooltip>
-- widget description: <https://www.w3.org/TR/wai-aria-practices/#tooltip>
-
-What needs to be mentioned is that the W3C taskforce didn’t reach consensus yet about the above tooltip description. A good alternative resource:
-<https://inclusive-components.design/tooltips-toggletips/>
-
-### Dialog vs tooltip
-
-Summarizing, the main differences between dialogs and tooltips are:
-
-- Dialogs have a modal option, tooltips don’t
-- Dialogs have interactive content, tooltips don’t
-- Dialogs are opened via regular buttons (click/space/enter), tooltips act on focus/mouseover
-
-### Other roles and concepts
-
-Other roles worth mentioning are _alertdialog_ (a specific instance of the dialog for system alerts), select (an abstract role), _combobox_ and _menu_.
-
-Also, the W3C document often refers to _popup_. This term is mentioned in the context of _combobox_, _listbox_, _grid_, _tree_, _dialog_ and _tooltip_. Therefore, one could say it could be a term
-
-_aria-haspopup_ attribute needs to be mentioned: it can have values ‘menu’, ‘listbox’, ‘grid’, ’tree’ and ‘dialog’.
-
-## Common Overlay Components
-
-In our component library, we want to have the following overlay ‘child’ components:
-
-- Dialog
-- Tooltip
-- Popover
-- Dropdown
-- Toast
-- Sheet (bottom, top, left, right)
-- Select
-- Combobox/autocomplete
-- Application menu
-
-### Dialog Component
-
-The dialog is pretty much the dialog as described in the W3C spec, having the modal option applied by default. The flexibility in focus delegation (see <https://www.w3.org/TR/wai-aria-practices/#dialog_modal> notes) is not implemented, however.
-Addressing these:
-
-- The first focusable element in the content: although delegate this focus management to the
-  implementing developer is highly preferred, since this is highly dependent on the moment the dialog content has finished rendering. This is something the overlay manager or dialog widget should not be aware of in order to provide.a clean and reliable component.
-- The focusable element after a close: by default, this is the invoker. For different
-  behaviour, a reference should be supplied to a more logical element in the particular workflow.
-
-### Tooltip Component
-
-The tooltip is always invoked on hover and has no interactive content. See <https://inclusive-components.design/tooltips-toggletips/> (the tooltip example, not the toggle tip).
-
-### Popover Component
-
-The popover looks like a crossover between the dialog and the tooltip. Popovers are invoked on click. For non interactive content, the <https://inclusive-components.design/tooltips-toggletips/> toggletip could be applied. Whenever there would be a close button present, the ‘non interactiveness’ wouldn’t apply.
-
-An alternative implementation: <https://whatsock.com/tsg/Coding%20Arena/Popups/Popup%20(Internal%20Content)/demo.htm>
-This looks more like a small dialog, except that the page flow is respected (no rotating tab).
-
-### Dropdown Component
-
-The dropdown is not an official aria-widget and thus can’t be tied to a specific role. It exists in a lot of UI libraries and most of them share these properties:
-
-- Preferred position is ‘down’.
-- When no space at bottom, they show ‘up’ (in which. Case it behaves a as a dropup).
-- Unlike popovers and tooltips, it will never be positioned horizontally.
-
-Aliases are ‘popdown’, ‘pulldown’ and many others.
-
-### Select Component
-
-Implemented as a dropdown listbox with invoker button. Depending on the content of the options, the child list can either be of type listbox or grid.
-See: <https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html>
-
-### Combobox Component
-
-Implemented as a dropdown combobox with invoker input. Input is used as search filter and can contain autocomplete or autosuggest functionality:
-See: <https://www.w3.org/TR/wai-aria-practices/#combobox>
-
-### (Application) menu Component
-
-Or sometimes called context-menu. Uses a dropdown to position its content.
-See: <https://www.w3.org/WAI/tutorials/menus/flyout/>
-Be aware not to use role=“menu”: <https://www.w3.org/WAI/tutorials/menus/application-menus/>
-
-### Toast Component
-
-See: <https://www.webcomponents.org/element/@polymer/paper-toast>. Should probably be implemented as an alertdialog.
-
-### Sheet Component
-
-See: <https://material.io/design/components/sheets-bottom.html>. Should probably be a global(modal) dialog.

package/exports/define/lion-calendar-overlay-frame.js

@@ -1,3 +0,0 @@
-import { LionCalendarOverlayFrame } from '../input-datepicker.js';
-
-customElements.define('lion-calendar-overlay-frame', LionCalendarOverlayFrame);