- ${this.selectedElements.map((option, i) => {
- const highlight = Boolean(
- this.removeChipOnNextBackspace && i === this.selectedElements.length - 1,
- );
- return this._selectedElementTemplate(option, highlight);
- })}
-
- `;
- }
-
- render() {
- return html` ${this._selectedElementsTemplate()} `;
- }
-
- /**
- * @param {{ key: string; }} ev
- */
- __textboxOnKeyup(ev) {
- if (ev.key === 'Backspace') {
- if (!this._inputNode.value) {
- if (this.removeChipOnNextBackspace && this.selectedElements.length) {
- this.selectedElements[this.selectedElements.length - 1].checked = false;
- }
- this.removeChipOnNextBackspace = true;
- }
- } else {
- this.removeChipOnNextBackspace = false;
- }
- }
-
- __restoreBackspace() {
- this.removeChipOnNextBackspace = false;
- }
-}
-customElements.define('demo-selection-display', DemoSelectionDisplay);
diff --git a/packages/ui/docs/components/combobox/src/gh-combobox/gh-button.js b/packages/ui/docs/components/combobox/src/gh-combobox/gh-button.js
deleted file mode 100644
index c24f2d33a..000000000
--- a/packages/ui/docs/components/combobox/src/gh-combobox/gh-button.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { css, html } from 'lit';
-import { LionButton } from '@lion/ui/button.js';
-
-export class GhButton extends LionButton {
- static get properties() {
- return {
- value: String,
- };
- }
-
- static get styles() {
- return css`
- :host {
- outline: none;
- position: relative;
- display: inline-flex;
- align-items: center;
- padding: 5px 16px;
- font-size: 14px;
- font-weight: 500;
- line-height: 20px;
- white-space: nowrap;
- vertical-align: middle;
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- border: 1px solid;
- border-radius: 6px;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
-
- color: #24292e;
- background-color: #fafbfc;
- border-color: rgba(27, 31, 35, 0.15);
- box-shadow: 0 1px 0 rgba(27, 31, 35, 0.04), inset 0 1px 0 hsla(0, 0%, 100%, 0.25);
- transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
- }
-
- :host(:hover) {
- background-color: #f3f4f6;
- transition-duration: 0.1s;
- }
-
- :host ::slotted([slot='before']) {
- margin-right: 4px;
- }
-
- /**
- * TODO: this doesn't have to be light dom anymore in LionButton,
- * just spawning a hidden native button on submit would be enough
- */
- :host ::slotted(button) {
- position: absolute;
- opacity: 0;
- }
- `;
- }
-
- render() {
- return html`
-
-
-
-
-
- ${this._groupOneTemplate()}
-
-
- ${this._groupTwoTemplate()}
-
-
-
-
-
-
- `;
- }
-
- /**
- * @override LionCombobox: restore to values FormControlMixin
- */
- // eslint-disable-next-line class-methods-use-this
- _groupTwoTemplate() {
- return html` ${this._inputGroupTemplate()} ${this._feedbackTemplate()} `;
- }
-
- get slots() {
- return {
- ...super.slots,
- 'selection-display': () =>
- renderLitAsNode(html`
- ${googleSearchIcon}
`
- : html`
-
-
-
- `;
- }
-
- _googleSearchBtnsTemplate() {
- return html`
-
-
-
-
-
`;
- }
-
- /**
- * @enhance FormControlMixin - add google search buttons
- */
- _groupTwoTemplate() {
- return html`${super._groupTwoTemplate()} ${!this.opened ? this._googleSearchBtnsTemplate() : ''} `;
- }
-
- get slots() {
- return {
- ...super.slots,
- label: () => renderLitAsNode(html`
- ${this._labelTemplate()}
-
- `;
- }
-
- /**
- * @enhance FormControlMixin
- */
- _inputGroupTemplate() {
- return html`
-
- ${this._inputGroupBeforeTemplate()}
-
- `;
- }
- },
-);
diff --git a/packages/ui/docs/components/combobox/src/md-combobox/md-combobox.js b/packages/ui/docs/components/combobox/src/md-combobox/md-combobox.js
deleted file mode 100644
index 81250a5dd..000000000
--- a/packages/ui/docs/components/combobox/src/md-combobox/md-combobox.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import { css, html } from 'lit';
-import { LionOption } from '@lion/ui/listbox.js';
-import { LionCombobox } from '@lion/ui/combobox.js';
-import { MdFieldMixin } from './MdFieldMixin.js';
-import './style/md-ripple.js';
-import './style/load-roboto.js';
-
-// TODO: insert ink wc here
-export class MdOption extends LionOption {
- static get styles() {
- return [
- ...super.styles,
- css`
- :host {
- position: relative;
- padding: 8px;
- }
-
- :host([focused]) {
- background: lightgray;
- }
-
- :host([active]) {
- color: #1867c0 !important;
- caret-color: #1867c0 !important;
- }
-
- :host ::slotted(.md-highlight) {
- color: rgba(0, 0, 0, 0.38);
- background: #eee;
- }
- `,
- ];
- }
-
- /**
- * @override
- * @param {string} matchingString
- */
- onFilterMatch(matchingString) {
- const { innerHTML } = this;
- this.__originalInnerHTML = innerHTML;
- this.innerHTML = innerHTML.replace(
- new RegExp(`(${matchingString})`, 'i'),
- `$1`,
- );
- this.style.display = '';
- }
-
- /**
- * @override
- */
- onFilterUnmatch() {
- if (this.__originalInnerHTML) {
- this.innerHTML = this.__originalInnerHTML;
- }
- this.style.display = 'none';
- }
-
- render() {
- return html`
- ${super.render()}
-
- ${this._inputGroupPrefixTemplate()} ${this._inputGroupInputTemplate()}
- ${this._inputGroupSuffixTemplate()}
-
- ${this._inputGroupAfterTemplate()}
-
-
-
-
-
`;
- }
-
- /**
- * @configure LionCombobox
- * @param {string} matchingString
- */
- onFilterMatch(matchingString) {
- this.__originalTitle = this.title;
- const newInnerHTML = this.title.replace(new RegExp(`(${matchingString})`, 'i'), `$1`);
- const helperNode = document.createElement('div');
- // For Safari, we need to add a label to the element
- helperNode.innerHTML = `${newInnerHTML}`;
- [this.title] = helperNode.children;
- this.style.cssText = `
- max-height: 500px;
- opacity: 1;
- `;
- }
-
- /**
- * @configure LionCombobox
- * @param {string} [curValue]
- * @param {string} [prevValue]
- */
- // eslint-disable-next-line no-unused-vars
- onFilterUnmatch() {
- if (this.__originalTitle) {
- this.title = this.__originalTitle;
- }
- this.style.cssText = `
- max-height: 0;
- opacity: 0;
- `;
- }
-}
-customElements.define('wa-option', WaOption);
-
-class WaCombobox extends LionCombobox {
- static get styles() {
- return [
- ...super.styles,
- css`
- :host {
- font-family: SF Pro Text, SF Pro Icons, system, -apple-system, system-ui,
- BlinkMacSystemFont, Helvetica Neue, Helvetica, Lucida Grande, Kohinoor Devanagari,
- sans-serif;
- }
-
- .input-group__container {
- display: flex;
- border-bottom: none;
- }
-
- * > ::slotted([role='listbox']) {
- max-height: none;
- }
-
- * > ::slotted([slot='input']) {
- font-size: 14px;
- }
-
- .input-group {
- padding: 15px;
- background: #f6f6f6;
- }
-
- .input-group__prefix {
- margin-right: 20px;
- color: #999;
- display: flex;
- }
-
- .input-group__container {
- border-radius: 18px;
- background: white;
- padding: 7px;
- padding-left: 16px;
- }
-
- /** Undo Popper */
- #overlay-content-node-wrapper {
- position: static !important;
- width: auto !important;
- transform: none !important;
-
- /* height: 300px;
- overflow: scroll; */
- }
- `,
- ];
- }
-
- get slots() {
- return {
- ...super.slots,
- prefix: () =>
- renderLitAsNode(
- html``,
- ),
- };
- }
-
- constructor() {
- super();
-
- /** @configure OverlayMixin */
- this.opened = true;
- /** @configure LionCombobox */
- this.showAllOnEmpty = true;
- /** @configure LionCombobox */
- this.rotateKeyboardNavigation = false;
- }
-}
-customElements.define('wa-combobox', WaCombobox);
diff --git a/packages/ui/docs/components/combobox/use-cases.md b/packages/ui/docs/components/combobox/use-cases.md
deleted file mode 100644
index 238555e99..000000000
--- a/packages/ui/docs/components/combobox/use-cases.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/combobox/use-cases.md)
diff --git a/packages/ui/docs/components/dialog/index.md b/packages/ui/docs/components/dialog/index.md
deleted file mode 100644
index c2c51ff0c..000000000
--- a/packages/ui/docs/components/dialog/index.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/dialog/index.md)
diff --git a/packages/ui/docs/components/dialog/overview.md b/packages/ui/docs/components/dialog/overview.md
deleted file mode 100644
index 97b95480e..000000000
--- a/packages/ui/docs/components/dialog/overview.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/dialog/overview.md)
diff --git a/packages/ui/docs/components/dialog/src/demo-dialog-style.js b/packages/ui/docs/components/dialog/src/demo-dialog-style.js
deleted file mode 100644
index 33b081365..000000000
--- a/packages/ui/docs/components/dialog/src/demo-dialog-style.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { css } from 'lit';
-
-export default css``;
diff --git a/packages/ui/docs/components/dialog/src/demoStyle.js b/packages/ui/docs/components/dialog/src/demoStyle.js
deleted file mode 100644
index 62f66b1c5..000000000
--- a/packages/ui/docs/components/dialog/src/demoStyle.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { css } from 'lit';
-
-export const demoStyle = css`
- .demo-box {
- width: 200px;
- background-color: white;
- border-radius: 2px;
- border: 1px solid grey;
- padding: 8px;
- }
- .demo-box_placements {
- display: flex;
- flex-direction: column;
- margin-top: 20px;
- }
- lion-dialog {
- display: block;
- padding: 10px;
- margin-bottom: 10px;
- }
- .close-button {
- color: black;
- font-size: 28px;
- line-height: 28px;
- }
- .demo-box__column {
- display: flex;
- flex-direction: column;
- }
- .demo-dialog--content {
- display: block;
- position: absolute;
- font-size: 16px;
- color: white;
- background-color: black;
- border-radius: 4px;
- padding: 8px;
- }
-
- .demo-dialog-content {
- display: block;
- position: absolute;
- font-size: 16px;
- color: white;
- background-color: black;
- border-radius: 4px;
- padding: 8px;
- }
-
- .demo-dialog-content__close-button {
- color: black;
- font-size: 28px;
- line-height: 28px;
- padding: 0;
- border-style: none;
- }
-`;
diff --git a/packages/ui/docs/components/dialog/src/slots-dialog-content.js b/packages/ui/docs/components/dialog/src/slots-dialog-content.js
deleted file mode 100644
index 6b481427d..000000000
--- a/packages/ui/docs/components/dialog/src/slots-dialog-content.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { LitElement, html, css } from 'lit';
-
-class SlotsDialogContent extends LitElement {
- static get styles() {
- return [
- css`
- :host {
- background-color: #fff;
- }
- .actions {
- border-top: 2px solid green;
- }
- `,
- ];
- }
-
- _closeOverlay() {
- this.dispatchEvent(new Event('close-overlay', { bubbles: true }));
- }
-
- render() {
- return html`
-
-
-
- 
- ${this.image
- ? ''
- : html`
-
-
-
-
-
`}
-
-
-
-
-
-
-
- ${this.title}
-
-
-
-
- ${this.time}
-
-
-
-
-
- ${this.text}
-
-
- This content contains an actions slot
-
-
-
- `;
- }
-}
-
-customElements.define('slots-dialog-content', SlotsDialogContent);
diff --git a/packages/ui/docs/components/dialog/src/styled-dialog-content.js b/packages/ui/docs/components/dialog/src/styled-dialog-content.js
deleted file mode 100644
index 799dae2e8..000000000
--- a/packages/ui/docs/components/dialog/src/styled-dialog-content.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { LitElement, html, css } from 'lit';
-
-class StyledDialogContent extends LitElement {
- static get styles() {
- return [
- css`
- :host {
- background-color: #fff;
- }
- .nice {
- font-weight: bold;
- color: green;
- }
- .close-button {
- color: black;
- font-size: 28px;
- line-height: 28px;
- }
- `,
- ];
- }
-
- _closeOverlay() {
- this.dispatchEvent(new Event('close-overlay', { bubbles: true }));
- }
-
- render() {
- return html`
- Hello person who opened the dialog!
-
-
- `;
- }
-}
-
-customElements.define('styled-dialog-content', StyledDialogContent);
diff --git a/packages/ui/docs/components/dialog/use-cases.md b/packages/ui/docs/components/dialog/use-cases.md
deleted file mode 100644
index f295536ca..000000000
--- a/packages/ui/docs/components/dialog/use-cases.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/dialog/use-cases.md)
diff --git a/packages/ui/docs/components/drawer/index.md b/packages/ui/docs/components/drawer/index.md
deleted file mode 100644
index 27ad39193..000000000
--- a/packages/ui/docs/components/drawer/index.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/drawer/index.md)
diff --git a/packages/ui/docs/components/drawer/overview.md b/packages/ui/docs/components/drawer/overview.md
deleted file mode 100644
index 07d4b8c97..000000000
--- a/packages/ui/docs/components/drawer/overview.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/drawer/overview.md)
diff --git a/packages/ui/docs/components/drawer/src/demoStyle.js b/packages/ui/docs/components/drawer/src/demoStyle.js
deleted file mode 100644
index 763a89c60..000000000
--- a/packages/ui/docs/components/drawer/src/demoStyle.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { css } from 'lit';
-
-export const demoStyle = css`
- .demo-container {
- height: 400px;
- display: flex;
- flex-direction: row;
- }
-
- .demo-container > div {
- padding: 8px;
- background-color: #f6f8fa;
- }
-
- lion-drawer {
- height: 400px;
- }
-
- button {
- all: revert !important;
- border: 2px solid #000000;
- background-color: rgb(239, 239, 239);
- }
-
- .demo-container-top {
- height: 400px;
- display: flex;
- flex-direction: column;
- }
-
- .demo-container-top > div {
- padding: 8px;
- height: 100%;
- background-color: #f6f8fa;
- }
-
- .demo-container-top lion-drawer {
- height: auto;
- width: 100%;
- }
-
- .demo-container-right {
- height: 400px;
- display: flex;
- flex-direction: row-reverse;
- }
-
- .demo-container-right > div {
- padding: 8px;
- background-color: #f6f8fa;
- }
-
- .demo-container-right lion-drawer {
- height: 400px;
- }
-
- .demo-container-opened {
- height: 400px;
- display: flex;
- flex-direction: row;
- }
-
- .demo-container-opened > div {
- padding: 8px;
- background-color: #f6f8fa;
- }
-
- .demo-container-opened lion-drawer {
- height: 400px;
- }
-`;
diff --git a/packages/ui/docs/components/drawer/use-cases.md b/packages/ui/docs/components/drawer/use-cases.md
deleted file mode 100644
index 8a01ab3d2..000000000
--- a/packages/ui/docs/components/drawer/use-cases.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/drawer/use-cases.md)
diff --git a/packages/ui/docs/components/fieldset/index.md b/packages/ui/docs/components/fieldset/index.md
deleted file mode 100644
index ecb2013fe..000000000
--- a/packages/ui/docs/components/fieldset/index.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/fieldset/index.md)
diff --git a/packages/ui/docs/components/fieldset/overview.md b/packages/ui/docs/components/fieldset/overview.md
deleted file mode 100644
index 180587cbf..000000000
--- a/packages/ui/docs/components/fieldset/overview.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/fieldset/overview.md)
diff --git a/packages/ui/docs/components/fieldset/use-cases.md b/packages/ui/docs/components/fieldset/use-cases.md
deleted file mode 100644
index 4453a315c..000000000
--- a/packages/ui/docs/components/fieldset/use-cases.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/fieldset/use-cases.md)
diff --git a/packages/ui/docs/components/form/index.md b/packages/ui/docs/components/form/index.md
deleted file mode 100644
index 14c7f4b56..000000000
--- a/packages/ui/docs/components/form/index.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/form/index.md)
diff --git a/packages/ui/docs/components/form/overview.md b/packages/ui/docs/components/form/overview.md
deleted file mode 100644
index 01f7b6fbb..000000000
--- a/packages/ui/docs/components/form/overview.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/form/overview.md)
diff --git a/packages/ui/docs/components/form/use-cases.md b/packages/ui/docs/components/form/use-cases.md
deleted file mode 100644
index f30634060..000000000
--- a/packages/ui/docs/components/form/use-cases.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/form/use-cases.md)
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug01.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug01.svg.js
deleted file mode 100644
index aea2228a4..000000000
--- a/packages/ui/docs/components/icon/assets/bugs/bug01.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug02.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug02.svg.js
deleted file mode 100644
index f69a54e44..000000000
--- a/packages/ui/docs/components/icon/assets/bugs/bug02.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug05.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug05.svg.js
deleted file mode 100644
index aa49c4c80..000000000
--- a/packages/ui/docs/components/icon/assets/bugs/bug05.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug06.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug06.svg.js
deleted file mode 100644
index 5c59fcbbb..000000000
--- a/packages/ui/docs/components/icon/assets/bugs/bug06.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug08.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug08.svg.js
deleted file mode 100644
index 3f29f4265..000000000
--- a/packages/ui/docs/components/icon/assets/bugs/bug08.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug12.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug12.svg.js
deleted file mode 100644
index 80333cb62..000000000
--- a/packages/ui/docs/components/icon/assets/bugs/bug12.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug19.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug19.svg.js
deleted file mode 100644
index 397d9f61a..000000000
--- a/packages/ui/docs/components/icon/assets/bugs/bug19.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug23.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug23.svg.js
deleted file mode 100644
index 8db0542b8..000000000
--- a/packages/ui/docs/components/icon/assets/bugs/bug23.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/bugs/bug24.svg.js b/packages/ui/docs/components/icon/assets/bugs/bug24.svg.js
deleted file mode 100644
index fe9cdeaa9..000000000
--- a/packages/ui/docs/components/icon/assets/bugs/bug24.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/iconset-bugs.js b/packages/ui/docs/components/icon/assets/iconset-bugs.js
deleted file mode 100755
index b1314dec5..000000000
--- a/packages/ui/docs/components/icon/assets/iconset-bugs.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import bug01 from './bugs/bug01.svg.js';
-import bug02 from './bugs/bug02.svg.js';
-import bug05 from './bugs/bug05.svg.js';
-import bug06 from './bugs/bug06.svg.js';
-import bug08 from './bugs/bug08.svg.js';
-import bug12 from './bugs/bug12.svg.js';
-import bug19 from './bugs/bug19.svg.js';
-import bug23 from './bugs/bug23.svg.js';
-import bug24 from './bugs/bug24.svg.js';
-
-export { bug01, bug02, bug05, bug06, bug08, bug12, bug19, bug23, bug24 };
diff --git a/packages/ui/docs/components/icon/assets/iconset-misc.js b/packages/ui/docs/components/icon/assets/iconset-misc.js
deleted file mode 100644
index 7541a4a01..000000000
--- a/packages/ui/docs/components/icon/assets/iconset-misc.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import arrowLeft from './misc/arrowLeft.svg.js';
-
-export { arrowLeft };
diff --git a/packages/ui/docs/components/icon/assets/iconset-space.js b/packages/ui/docs/components/icon/assets/iconset-space.js
deleted file mode 100755
index 56b4a217b..000000000
--- a/packages/ui/docs/components/icon/assets/iconset-space.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import alienSpaceship from './space/aliens-spaceship.svg.js';
-import meteor from './space/meteor.svg.js';
-import moonFlag from './space/moon-flag.svg.js';
-import moon from './space/moon.svg.js';
-import night from './space/night.svg.js';
-import orbit from './space/orbit.svg.js';
-import planet from './space/planet.svg.js';
-import robot from './space/robot.svg.js';
-import rocket from './space/rocket.svg.js';
-import satellite from './space/satellite.svg.js';
-import signal from './space/signal.svg.js';
-import spaceHelmet from './space/space-helmet.svg.js';
-import sun from './space/sun.svg.js';
-import telescope from './space/telescope.svg.js';
-
-export {
- alienSpaceship,
- meteor,
- moonFlag,
- moon,
- night,
- orbit,
- planet,
- robot,
- rocket,
- satellite,
- signal,
- spaceHelmet,
- sun,
- telescope,
-};
diff --git a/packages/ui/docs/components/icon/assets/misc/arrowLeft.svg.js b/packages/ui/docs/components/icon/assets/misc/arrowLeft.svg.js
deleted file mode 100644
index d23823b45..000000000
--- a/packages/ui/docs/components/icon/assets/misc/arrowLeft.svg.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default tag =>
- tag`
-
- `;
diff --git a/packages/ui/docs/components/icon/assets/space/aliens-spaceship.svg.js b/packages/ui/docs/components/icon/assets/space/aliens-spaceship.svg.js
deleted file mode 100644
index 9438a9317..000000000
--- a/packages/ui/docs/components/icon/assets/space/aliens-spaceship.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/meteor.svg.js b/packages/ui/docs/components/icon/assets/space/meteor.svg.js
deleted file mode 100644
index 197133816..000000000
--- a/packages/ui/docs/components/icon/assets/space/meteor.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/moon-flag.svg.js b/packages/ui/docs/components/icon/assets/space/moon-flag.svg.js
deleted file mode 100644
index 9283c4010..000000000
--- a/packages/ui/docs/components/icon/assets/space/moon-flag.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/moon.svg.js b/packages/ui/docs/components/icon/assets/space/moon.svg.js
deleted file mode 100644
index dbfb92b1c..000000000
--- a/packages/ui/docs/components/icon/assets/space/moon.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/night.svg.js b/packages/ui/docs/components/icon/assets/space/night.svg.js
deleted file mode 100644
index ba258dac1..000000000
--- a/packages/ui/docs/components/icon/assets/space/night.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/orbit.svg.js b/packages/ui/docs/components/icon/assets/space/orbit.svg.js
deleted file mode 100644
index e3f26ebb0..000000000
--- a/packages/ui/docs/components/icon/assets/space/orbit.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/planet.svg.js b/packages/ui/docs/components/icon/assets/space/planet.svg.js
deleted file mode 100644
index 2d0283f43..000000000
--- a/packages/ui/docs/components/icon/assets/space/planet.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/robot.svg.js b/packages/ui/docs/components/icon/assets/space/robot.svg.js
deleted file mode 100644
index 73dd887fd..000000000
--- a/packages/ui/docs/components/icon/assets/space/robot.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/rocket.svg.js b/packages/ui/docs/components/icon/assets/space/rocket.svg.js
deleted file mode 100644
index 6d7a1fdc6..000000000
--- a/packages/ui/docs/components/icon/assets/space/rocket.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/satellite.svg.js b/packages/ui/docs/components/icon/assets/space/satellite.svg.js
deleted file mode 100644
index 363059924..000000000
--- a/packages/ui/docs/components/icon/assets/space/satellite.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/signal.svg.js b/packages/ui/docs/components/icon/assets/space/signal.svg.js
deleted file mode 100644
index 8613b0e1f..000000000
--- a/packages/ui/docs/components/icon/assets/space/signal.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/space-helmet.svg.js b/packages/ui/docs/components/icon/assets/space/space-helmet.svg.js
deleted file mode 100644
index 4b7b539ef..000000000
--- a/packages/ui/docs/components/icon/assets/space/space-helmet.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/sun.svg.js b/packages/ui/docs/components/icon/assets/space/sun.svg.js
deleted file mode 100644
index 11a341845..000000000
--- a/packages/ui/docs/components/icon/assets/space/sun.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/assets/space/telescope.svg.js b/packages/ui/docs/components/icon/assets/space/telescope.svg.js
deleted file mode 100644
index 4fdffb02c..000000000
--- a/packages/ui/docs/components/icon/assets/space/telescope.svg.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export default tag =>
- tag``;
diff --git a/packages/ui/docs/components/icon/index.md b/packages/ui/docs/components/icon/index.md
deleted file mode 100644
index 9ad5a221b..000000000
--- a/packages/ui/docs/components/icon/index.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/icon/index.md)
diff --git a/packages/ui/docs/components/icon/overview.md b/packages/ui/docs/components/icon/overview.md
deleted file mode 100644
index 985aac84f..000000000
--- a/packages/ui/docs/components/icon/overview.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/icon/overview.md)
diff --git a/packages/ui/docs/components/icon/use-cases.md b/packages/ui/docs/components/icon/use-cases.md
deleted file mode 100644
index da1f5c94d..000000000
--- a/packages/ui/docs/components/icon/use-cases.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/icon/use-cases.md)
diff --git a/packages/ui/docs/components/index.md b/packages/ui/docs/components/index.md
deleted file mode 100644
index a1875dad6..000000000
--- a/packages/ui/docs/components/index.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../docs/components/index.md)
diff --git a/packages/ui/docs/components/input-amount/index.md b/packages/ui/docs/components/input-amount/index.md
deleted file mode 100644
index d7169e590..000000000
--- a/packages/ui/docs/components/input-amount/index.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-amount/index.md)
diff --git a/packages/ui/docs/components/input-amount/overview.md b/packages/ui/docs/components/input-amount/overview.md
deleted file mode 100644
index 61a60e843..000000000
--- a/packages/ui/docs/components/input-amount/overview.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-amount/overview.md)
diff --git a/packages/ui/docs/components/input-amount/use-cases.md b/packages/ui/docs/components/input-amount/use-cases.md
deleted file mode 100644
index dda15d2e8..000000000
--- a/packages/ui/docs/components/input-amount/use-cases.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-amount/use-cases.md)
diff --git a/packages/ui/docs/components/input-date/index.md b/packages/ui/docs/components/input-date/index.md
deleted file mode 100644
index dde5cb970..000000000
--- a/packages/ui/docs/components/input-date/index.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-date/index.md)
diff --git a/packages/ui/docs/components/input-date/overview.md b/packages/ui/docs/components/input-date/overview.md
deleted file mode 100644
index 78c5bc08d..000000000
--- a/packages/ui/docs/components/input-date/overview.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-date/overview.md)
diff --git a/packages/ui/docs/components/input-date/use-cases.md b/packages/ui/docs/components/input-date/use-cases.md
deleted file mode 100644
index 74ce9e7d4..000000000
--- a/packages/ui/docs/components/input-date/use-cases.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-date/use-cases.md)
diff --git a/packages/ui/docs/components/input-datepicker/index.md b/packages/ui/docs/components/input-datepicker/index.md
deleted file mode 100644
index 4a2f5b64b..000000000
--- a/packages/ui/docs/components/input-datepicker/index.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-datepicker/index.md)
diff --git a/packages/ui/docs/components/input-datepicker/overview.md b/packages/ui/docs/components/input-datepicker/overview.md
deleted file mode 100644
index 100c360b0..000000000
--- a/packages/ui/docs/components/input-datepicker/overview.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-datepicker/overview.md)
diff --git a/packages/ui/docs/components/input-datepicker/use-cases.md b/packages/ui/docs/components/input-datepicker/use-cases.md
deleted file mode 100644
index 774e615a9..000000000
--- a/packages/ui/docs/components/input-datepicker/use-cases.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-datepicker/use-cases.md)
diff --git a/packages/ui/docs/components/input-email/index.md b/packages/ui/docs/components/input-email/index.md
deleted file mode 100644
index e458f8b25..000000000
--- a/packages/ui/docs/components/input-email/index.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-email/index.md)
diff --git a/packages/ui/docs/components/input-email/overview.md b/packages/ui/docs/components/input-email/overview.md
deleted file mode 100644
index 9ee862ee1..000000000
--- a/packages/ui/docs/components/input-email/overview.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-email/overview.md)
diff --git a/packages/ui/docs/components/input-email/use-cases.md b/packages/ui/docs/components/input-email/use-cases.md
deleted file mode 100644
index a1745df38..000000000
--- a/packages/ui/docs/components/input-email/use-cases.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-email/use-cases.md)
diff --git a/packages/ui/docs/components/input-iban/index.md b/packages/ui/docs/components/input-iban/index.md
deleted file mode 100644
index 79f3cb63a..000000000
--- a/packages/ui/docs/components/input-iban/index.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-iban/index.md)
diff --git a/packages/ui/docs/components/input-iban/overview.md b/packages/ui/docs/components/input-iban/overview.md
deleted file mode 100644
index e39e8b7b0..000000000
--- a/packages/ui/docs/components/input-iban/overview.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-iban/overview.md)
diff --git a/packages/ui/docs/components/input-iban/use-cases.md b/packages/ui/docs/components/input-iban/use-cases.md
deleted file mode 100644
index 550452761..000000000
--- a/packages/ui/docs/components/input-iban/use-cases.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-iban/use-cases.md)
diff --git a/packages/ui/docs/components/input-range/index.md b/packages/ui/docs/components/input-range/index.md
deleted file mode 100644
index d98da4230..000000000
--- a/packages/ui/docs/components/input-range/index.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-range/index.md)
diff --git a/packages/ui/docs/components/input-range/overview.md b/packages/ui/docs/components/input-range/overview.md
deleted file mode 100644
index 68faa1c3d..000000000
--- a/packages/ui/docs/components/input-range/overview.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-range/overview.md)
diff --git a/packages/ui/docs/components/input-range/use-cases.md b/packages/ui/docs/components/input-range/use-cases.md
deleted file mode 100644
index 23378fe4b..000000000
--- a/packages/ui/docs/components/input-range/use-cases.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-range/use-cases.md)
diff --git a/packages/ui/docs/components/input-stepper/index.md b/packages/ui/docs/components/input-stepper/index.md
deleted file mode 100644
index 0de447404..000000000
--- a/packages/ui/docs/components/input-stepper/index.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-stepper/index.md)
diff --git a/packages/ui/docs/components/input-stepper/overview.md b/packages/ui/docs/components/input-stepper/overview.md
deleted file mode 100644
index 7b7d03759..000000000
--- a/packages/ui/docs/components/input-stepper/overview.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-stepper/overview.md)
diff --git a/packages/ui/docs/components/input-stepper/use-cases.md b/packages/ui/docs/components/input-stepper/use-cases.md
deleted file mode 100644
index 05e837bf1..000000000
--- a/packages/ui/docs/components/input-stepper/use-cases.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-stepper/use-cases.md)
diff --git a/packages/ui/docs/components/input-tel-dropdown/examples.md b/packages/ui/docs/components/input-tel-dropdown/examples.md
deleted file mode 100644
index fdaa33a5c..000000000
--- a/packages/ui/docs/components/input-tel-dropdown/examples.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-tel-dropdown/examples.md)
diff --git a/packages/ui/docs/components/input-tel-dropdown/index.md b/packages/ui/docs/components/input-tel-dropdown/index.md
deleted file mode 100644
index 13fc56bab..000000000
--- a/packages/ui/docs/components/input-tel-dropdown/index.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-tel-dropdown/index.md)
diff --git a/packages/ui/docs/components/input-tel-dropdown/overview.md b/packages/ui/docs/components/input-tel-dropdown/overview.md
deleted file mode 100644
index b718ec4a4..000000000
--- a/packages/ui/docs/components/input-tel-dropdown/overview.md
+++ /dev/null
@@ -1 +0,0 @@
-[=> See Source <=](../../../../../docs/components/input-tel-dropdown/overview.md)
diff --git a/packages/ui/docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js b/packages/ui/docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js
deleted file mode 100644
index 771d7d8ac..000000000
--- a/packages/ui/docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
-import { html, css } from 'lit';
-import { ref } from 'lit/directives/ref.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
-import {
- IntlSelectRich,
- IntlOption,
- IntlSeparator,
-} from '../../select-rich/src/intl-select-rich.js';
-
-/**
- * @typedef {import('@lion/ui/input-tel-dropdown/types.js').TemplateDataForDropdownInputTel}TemplateDataForDropdownInputTel
- */
-
-// Example implementation for https://intl-tel-input.com/
-export class IntlInputTelDropdown extends ScopedElementsMixin(LionInputTelDropdown) {
- /**
- * @configure LitElement
- * @enhance LionInputTelDropdown
- */
- static styles = [
- super.styles,
- css`
- :host,
- ::slotted(*) {
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
- font-size: 14px;
- line-height: 1.42857143;
- color: #333;
- }
-
- :host {
- max-width: 300px;
- }
-
- .input-group__container {
- width: 100%;
- height: 34px;
- font-size: 14px;
- line-height: 1.42857143;
- color: #555;
- background-color: #fff;
- background-image: none;
- border: 1px solid #ccc;
- border-radius: 4px;
- -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
- box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
- -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
- -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
- transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
- }
-
- .input-group__input {
- padding: 6px;
- box-sizing: border-box;
- }
-
- .input-group__input ::slotted(input) {
- border: none;
- outline: none;
- }
-
- :host([focused]) .input-group__container {
- border-color: #66afe9;
- outline: 0;
- -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
- box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
- }
- `,
- ];
-
- static templates = {
- ...(super.templates || {}),
- /**
- * @param {TemplateDataForDropdownInputTel} templateDataForDropdown
- */
- dropdown: templateDataForDropdown => {
- const { refs, data } = templateDataForDropdown;
- // TODO: once spread directive available, use it per ref (like ref(refs?.dropdown?.ref))
- return html`
- Look how nice this dialog looks!
-| - country name - | -- region code - | -- country code - | -
|---|---|---|
| ${nameForLocale} | -${regionCode} | -${countryCode} | -
-
-
- ${nameForLocale} (${nameForRegion})
- +${countryCode}
- `;
- }
-}
-customElements.define('intl-option', IntlOption);
-
-class IntlSelectInvoker extends LionSelectInvoker {
- /**
- * @configure LitElement
- * @enhance LionSelectInvoker
- */
- static styles = [
- super.styles,
- flagStyles,
- css`
- :host {
- /** TODO: avoid importants; should actually be configured in overlay */
- width: auto !important;
- background-color: transparent;
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- }
-
- #content-wrapper {
- display: flex;
- align-items: center;
- }
- `,
- ];
-
- /**
- * @configure SlotMixin
- * @override LionSelectInvoker
- */
- get slots() {
- return {};
- }
-
- /**
- * @override LionSelectInvoker
- */
- render() {
- const ctor = /** @type {typeof LionSelectInvoker} */ (this.constructor);
- return ctor._mainTemplate(this._templateData);
- }
-
- get _templateData() {
- return {
- data: { selectedElement: this.selectedElement, hostElement: this.hostElement },
- };
- }
-
- static _mainTemplate(templateData) {
- return html` ${this._contentTemplate(templateData)}
`;
- }
-
- static _contentTemplate({ data: { selectedElement, hostElement } }) {
- if (!selectedElement) {
- return ``;
- }
- return html`
-
-
- `;
- }
-}
-customElements.define('intl-select-invoker', IntlSelectInvoker);
-
-export class IntlSeparator extends LitElement {
- static styles = [
- css`
- :host {
- display: block;
- padding-bottom: 5px;
- margin-bottom: 5px;
- border-bottom: 1px solid #ccc;
- }
- `,
- ];
-
- /**
- * @lifecycle platform
- */
- connectedCallback() {
- super.connectedCallback();
- this.setAttribute('role', 'separator');
- }
-}
-customElements.define('intl-separator', IntlSeparator);
-
-export class IntlSelectRich extends LionSelectRich {
- static styles = [
- super.styles,
- css`
- :host,
- ::slotted(*) {
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
- font-size: 14px;
- line-height: 1.42857143;
- color: #333;
- }
-
- ::slotted([role='listbox']) {
- margin-left: -3px;
- display: block;
- white-space: nowrap;
- max-height: 200px;
- overflow-y: scroll;
- position: absolute;
- z-index: 2;
- list-style: none;
- text-align: left;
- padding: 0;
- margin: 0 0 0 -1px;
- box-shadow: 1px 1px 4px rgb(0 0 0 / 20%);
- background-color: white;
- border: 1px solid #ccc;
- -webkit-overflow-scrolling: touch;
- outline: none;
- }
-
- .form-field__group-two,
- .input-group,
- .input-group__container,
- .input-group__input {
- height: 100%;
- }
- `,
- ];
-
- /**
- * @configure ScopedElementsMixin
- */
- static scopedElements = { 'intl-select-invoker': IntlSelectInvoker };
-
- /**
- * @configure SlotMixin
- */
- slots = {
- ...super.slots,
- invoker: () => html`undefined`;
- }
- if (typeof p === 'object' && p !== null) {
- return JSON.stringify(p);
- }
- resultText = p;
- } else {
- resultText = prop.processor(field);
- }
-
- return html`${resultText}`;
- }
-
- constructor() {
- super();
- this.title = 'States';
- }
-
- render() {
- const computePropName = prop => (typeof prop === 'string' ? prop : prop.name);
- return html`
- | ${computePropName(prop)} | `)} -
|---|
| ${this.__renderProp(prop)} | `)} -
-
- `;
- }
-}
-customElements.define('demo-overlay', DemoOverlay);
-
-class DemoCloseButton extends LionButton {
- static get styles() {
- return [
- css`
- ::host {
- background: none;
- }
- `,
- ];
- }
-
- connectedCallback() {
- super.connectedCallback();
-
- this.innerText = '⨯';
- this.setAttribute('aria-label', 'Close');
- }
-}
-customElements.define('demo-close-button', DemoCloseButton);
diff --git a/packages/ui/docs/fundamentals/systems/overlays/assets/demo-overlay-backdrop.mjs b/packages/ui/docs/fundamentals/systems/overlays/assets/demo-overlay-backdrop.mjs
deleted file mode 100644
index 36fe51b90..000000000
--- a/packages/ui/docs/fundamentals/systems/overlays/assets/demo-overlay-backdrop.mjs
+++ /dev/null
@@ -1,47 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { css, LitElement } from 'lit';
-
-/**
- * @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig
- */
-class DemoOverlayBackdrop extends LitElement {
- static get styles() {
- return css`
- :host {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: grey;
- opacity: 0.3;
- position: fixed;
- }
-
- :host(.local-overlays__backdrop--visible) {
- display: block;
- }
-
- :host(.local-overlays__backdrop--animation-in) {
- animation: local-overlays-backdrop-fade-in 300ms;
- }
-
- :host(.local-overlays__backdrop--animation-out) {
- animation: local-overlays-backdrop-fade-out 300ms;
- opacity: 0;
- }
-
- @keyframes local-overlays-backdrop-fade-in {
- from {
- opacity: 0;
- }
- }
-
- @keyframes local-overlays-backdrop-fade-out {
- from {
- opacity: 0.3;
- }
- }
- `;
- }
-}
-customElements.define('demo-overlay-backdrop', DemoOverlayBackdrop);
diff --git a/packages/ui/docs/fundamentals/systems/overlays/assets/demo-overlay-positioning.mjs b/packages/ui/docs/fundamentals/systems/overlays/assets/demo-overlay-positioning.mjs
deleted file mode 100644
index ee796d591..000000000
--- a/packages/ui/docs/fundamentals/systems/overlays/assets/demo-overlay-positioning.mjs
+++ /dev/null
@@ -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.mjs';
-
-/**
- * @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`
-
-
- `,
- };
-
- 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
- ${this._placements.map(
- pos =>
- html`
-
-
-
-
-
- `;
- }
-}
-customElements.define('demo-overlay-positioning', DemoOverlayPositioning);
diff --git a/packages/ui/docs/fundamentals/systems/overlays/assets/umbrella-form.js b/packages/ui/docs/fundamentals/systems/overlays/assets/umbrella-form.js
deleted file mode 100644
index 0d4607bda..000000000
--- a/packages/ui/docs/fundamentals/systems/overlays/assets/umbrella-form.js
+++ /dev/null
@@ -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`
-
-
-
- `,
- )}
-
- Demo App
- - ${this.page === 'A' ? html`I am page A
-Overlays Status:
-Name: ${overlays.name}
-Blocked: ${overlays.blockBody}
- - - - `; - } -} - - -customElements.define('page-a', PageA); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/index.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/index.js deleted file mode 100644 index 5c5ae99b9..000000000 --- a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/index.js +++ /dev/null @@ -1,30 +0,0 @@ -export class OverlaysManager { - name = 'OverlayManager 2.x'; - - _blockBody = false; - - constructor() { - this._setupBlocker(); - } - - _setupBlocker() { - const blocker = document.createElement('div'); - blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;'); - blocker.innerText = `Blocker for ${this.name}`; - - const target = document.getElementById('overlay-target'); - target.appendChild(blocker); - - this.blocker = blocker; - } - - blockBody() { - this._blockBody = true; - this.blocker.style.backgroundColor = '#ff6161'; - } - - unBlockBody() { - this._blockBody = false; - this.blocker.style.backgroundColor = 'transparent'; - } -} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/instance.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/instance.js deleted file mode 100644 index c3e546133..000000000 --- a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/instance.js +++ /dev/null @@ -1,4 +0,0 @@ -import { OverlaysManager } from './index.js'; -import { singletonManager } from 'singleton-manager'; - -export const overlays = singletonManager.get('overlays::overlays::2.x') || new OverlaysManager(); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/page-b.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/page-b.js deleted file mode 100644 index bc65fde08..000000000 --- a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/page-b.js +++ /dev/null @@ -1,49 +0,0 @@ -import { LitElement, html, css } from 'lit-element'; -import { overlays } from 'overlays/instance.js'; - -export class PageB extends LitElement { - getInstance(sym, fallback) { - const ev = new CustomEvent('request-instance', { - detail: { key: sym }, - bubbles: true, - cancelable: true, - composed: true, - }); - this.dispatchEvent(ev); - return ev.detail.instance || fallback(); - } - - connectedCallback() { - super.connectedCallback(); - } - - static get styles() { - return css` - :host { - display: block; - padding: 10px; - border: 2px solid #ccc; - } - `; - } - - render() { - return html` -I am page B
-Overlays Status:
-Name: ${overlays.name}
-Blocked: ${overlays._blockBody}
- - - - `; - } -} - -customElements.define('page-b', PageB); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/overlayCompatibility.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/overlayCompatibility.js deleted file mode 100644 index 384537215..000000000 --- a/packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/overlayCompatibility.js +++ /dev/null @@ -1,70 +0,0 @@ -import { OverlaysManager } from 'overlays'; -import { singletonManager } from 'singleton-manager'; -import { OverlaysManager as OverlaysManager2 } from './node_modules/page-b/node_modules/overlays/index.js'; - -let compatibleManager1; -let compatibleManager2; - -const blocker = document.createElement('div'); -blocker.setAttribute( - 'style', - 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;', -); -blocker.innerText = `Shared Blocker for App`; -document.body.appendChild(blocker); - -class CompatibleManager1 extends OverlaysManager { - constructor() { - super(); - this.name = 'Compatible1 from App'; - } - - block(sync = true) { - super.block(); - if (sync) { - compatibleManager2.blockBody(false); - } - } - - unBlock(sync = true) { - super.unBlock(); - if (sync) { - compatibleManager2.unBlockBody(false); - } - } - - _setupBlocker() { - this.blocker = blocker; - } -} - -class CompatibleManager2 extends OverlaysManager2 { - constructor() { - super(); - this.name = 'Compatible2 from App'; - } - - blockBody(sync = true) { - super.blockBody(); - if (sync) { - compatibleManager1.block(); - } - } - - unBlockBody(sync = true) { - super.unBlockBody(); - if (sync) { - compatibleManager1.unBlock(); - } - } - - _setupBlocker() { - this.blocker = blocker; - } -} - -compatibleManager1 = new CompatibleManager1(); -compatibleManager2 = new CompatibleManager2(); - -singletonManager.set('overlays::overlays::1.x', compatibleManager1); -singletonManager.set('overlays::overlays::2.x', compatibleManager2); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js deleted file mode 100644 index 802bb6d85..000000000 --- a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js +++ /dev/null @@ -1,91 +0,0 @@ -import { LitElement, css, html } from 'lit'; - -import 'page-a/page-a.js'; -import 'page-b/page-b.js'; - -class DemoApp extends LitElement { - constructor() { - super(); - this.page = 'A'; - } - - static get properties() { - return { - page: { type: String }, - }; - } - - static get styles() { - return css` - :host { - display: block; - max-width: 680px; - margin: 0 auto; - } - - nav { - padding: 0 10px 10px 10px; - } - - button { - border: none; - padding: 1rem 2rem; - background: #0069ed; - color: #fff; - font-size: 1rem; - cursor: pointer; - text-align: center; - transition: background 250ms ease-in-out, transform 150ms ease; - } - - button:hover, - button:focus { - background: #0053ba; - } - - button:focus { - outline: 1px solid #fff; - outline-offset: -4px; - } - - button:active { - transform: scale(0.99); - } - - button.active { - background: #33a43f; - } - - h1 { - text-align: center; - } - `; - } - - render() { - return html` -Demo App
- - ${this.page === 'A' ? html`I am page A
-Overlays Status:
-Name: ${overlays.name}
-Blocked: ${overlays.blockBody}
- - - - `; - } -} - -customElements.define('page-a', PageA); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/index.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/index.js deleted file mode 100644 index ea2f3b178..000000000 --- a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/index.js +++ /dev/null @@ -1,30 +0,0 @@ -export class OverlaysManager { - name = 'OverlayManager 2.x'; - - _blockBody = false; - - constructor() { - this._setupBlocker(); - } - - _setupBlocker() { - const blocker = document.createElement('div'); - blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 180px; text-align: center;'); - blocker.innerText = `Blocker for ${this.name}`; - - const target = document.getElementById('overlay-target'); - target.appendChild(blocker); - - this.blocker = blocker; - } - - blockBody() { - this._blockBody = true; - this.blocker.style.backgroundColor = '#ff6161'; - } - - unBlockBody() { - this._blockBody = false; - this.blocker.style.backgroundColor = 'transparent'; - } -} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/instance.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/instance.js deleted file mode 100644 index f73ca3b47..000000000 --- a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/instance.js +++ /dev/null @@ -1,3 +0,0 @@ -import { OverlaysManager } from './index.js'; - -export const overlays = new OverlaysManager(); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/page-b.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/page-b.js deleted file mode 100644 index 94a90c0c0..000000000 --- a/packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/page-b.js +++ /dev/null @@ -1,34 +0,0 @@ -import { LitElement, html, css } from 'lit-element'; -import { overlays } from 'overlays/instance.js'; - -export class PageB extends LitElement { - static get styles() { - return css` - :host { - display: block; - padding: 10px; - border: 2px solid #ccc; - } - `; - } - - render() { - return html` -I am page B
-Overlays Status:
-Name: ${overlays.name}
-Blocked: ${overlays._blockBody}
- - - - `; - } -} - -customElements.define('page-b', PageB); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js deleted file mode 100644 index 057392db9..000000000 --- a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js +++ /dev/null @@ -1,93 +0,0 @@ -import { LitElement, css, html } from 'lit'; - -import './overlayCompatibility.js'; - -import 'page-a/page-a.js'; -import 'page-b/page-b.js'; - -class DemoApp extends LitElement { - constructor() { - super(); - this.page = 'A'; - } - - static get properties() { - return { - page: { type: String }, - }; - } - - static get styles() { - return css` - :host { - display: block; - max-width: 680px; - margin: 0 auto; - } - - nav { - padding: 0 10px 10px 10px; - } - - button { - border: none; - padding: 1rem 2rem; - background: #0069ed; - color: #fff; - font-size: 1rem; - cursor: pointer; - text-align: center; - transition: background 250ms ease-in-out, transform 150ms ease; - } - - button:hover, - button:focus { - background: #0053ba; - } - - button:focus { - outline: 1px solid #fff; - outline-offset: -4px; - } - - button:active { - transform: scale(0.99); - } - - button.active { - background: #33a43f; - } - - h1 { - text-align: center; - } - `; - } - - render() { - return html` -Demo App
- - ${this.page === 'A' ? html`I am page A
-Overlays Status:
-Name: ${overlays.name}
-Blocked: ${overlays.blockBody}
- - - - `; - } -} - -customElements.define('page-a', PageA); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/index.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/index.js deleted file mode 100644 index a2e56314e..000000000 --- a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/index.js +++ /dev/null @@ -1,30 +0,0 @@ -export class OverlaysManager { - name = 'OverlayManager 2.x'; - - blockBody = false; - - constructor() { - this._setupBlocker(); - } - - _setupBlocker() { - const blocker = document.createElement('div'); - blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;'); - blocker.innerText = `Blocker for ${this.name}`; - - const target = document.getElementById('overlay-target'); - target.appendChild(blocker); - - this.blocker = blocker; - } - - blockingBody() { - this.blockBody = true; - this.blocker.style.backgroundColor = '#ff6161'; - } - - unBlockingBody() { - this.blockBody = false; - this.blocker.style.backgroundColor = 'transparent'; - } -} diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/instance.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/instance.js deleted file mode 100644 index c3e546133..000000000 --- a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/instance.js +++ /dev/null @@ -1,4 +0,0 @@ -import { OverlaysManager } from './index.js'; -import { singletonManager } from 'singleton-manager'; - -export const overlays = singletonManager.get('overlays::overlays::2.x') || new OverlaysManager(); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/page-b.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/page-b.js deleted file mode 100644 index 41fa08ad4..000000000 --- a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/page-b.js +++ /dev/null @@ -1,34 +0,0 @@ -import { LitElement, html, css } from 'lit-element'; -import { overlays } from 'overlays/instance.js'; - -export class PageB extends LitElement { - static get styles() { - return css` - :host { - display: block; - padding: 10px; - border: 2px solid #ccc; - } - `; - } - - render() { - return html` -I am page B
-Overlays Status:
-Name: ${overlays.name}
-Blocked: ${overlays.blockBody}
- - - - `; - } -} - -customElements.define('page-b', PageB); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/overlayCompatibility.js b/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/overlayCompatibility.js deleted file mode 100644 index 36a9c73c0..000000000 --- a/packages/ui/docs/fundamentals/tools/singleton-manager/example-success/overlayCompatibility.js +++ /dev/null @@ -1,23 +0,0 @@ -import { OverlaysManager } from 'overlays'; -import { singletonManager } from 'singleton-manager'; - -class CompatibleManager extends OverlaysManager { - constructor() { - super(); - this.name = 'Compatible from App'; - this.blocker.innerText = `Blocker for ${this.name}`; - } - - blockingBody() { - this.block(); - } - - unBlockingBody() { - this.unBlock(); - } -} - -const compatibleManager = new CompatibleManager(); - -singletonManager.set('overlays::overlays::1.x', compatibleManager); -singletonManager.set('overlays::overlays::2.x', compatibleManager); diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/index.md b/packages/ui/docs/fundamentals/tools/singleton-manager/index.md deleted file mode 100644 index c596d52a8..000000000 --- a/packages/ui/docs/fundamentals/tools/singleton-manager/index.md +++ /dev/null @@ -1 +0,0 @@ -[=> See Source <=](../../../../../../docs/fundamentals/tools/singleton-manager/index.md) diff --git a/packages/ui/docs/fundamentals/tools/singleton-manager/overview.md b/packages/ui/docs/fundamentals/tools/singleton-manager/overview.md deleted file mode 100644 index bcb433e30..000000000 --- a/packages/ui/docs/fundamentals/tools/singleton-manager/overview.md +++ /dev/null @@ -1 +0,0 @@ -[=> See Source <=](../../../../../../docs/fundamentals/tools/singleton-manager/overview.md) diff --git a/packages/ui/docs/guides/how-to/create-a-custom-field.md b/packages/ui/docs/guides/how-to/create-a-custom-field.md deleted file mode 100644 index abf05508a..000000000 --- a/packages/ui/docs/guides/how-to/create-a-custom-field.md +++ /dev/null @@ -1 +0,0 @@ -[=> See Source <=](../../../../../docs/guides/how-to/create-a-custom-field.md) diff --git a/packages/ui/docs/guides/how-to/extend-a-native-input.md b/packages/ui/docs/guides/how-to/extend-a-native-input.md deleted file mode 100644 index 732d29738..000000000 --- a/packages/ui/docs/guides/how-to/extend-a-native-input.md +++ /dev/null @@ -1 +0,0 @@ -[=> See Source <=](../../../../../docs/guides/how-to/extend-a-native-input.md) diff --git a/packages/ui/docs/guides/how-to/get-started.md b/packages/ui/docs/guides/how-to/get-started.md deleted file mode 100644 index c6c257997..000000000 --- a/packages/ui/docs/guides/how-to/get-started.md +++ /dev/null @@ -1 +0,0 @@ -[=> See Source <=](../../../../../docs/guides/how-to/get-started.md) diff --git a/packages/ui/docs/guides/how-to/index.md b/packages/ui/docs/guides/how-to/index.md deleted file mode 100644 index f277f8c7c..000000000 --- a/packages/ui/docs/guides/how-to/index.md +++ /dev/null @@ -1 +0,0 @@ -[=> See Source <=](../../../../../docs/guides/how-to/index.md) diff --git a/packages/ui/docs/guides/index.md b/packages/ui/docs/guides/index.md deleted file mode 100644 index fda6dd4b0..000000000 --- a/packages/ui/docs/guides/index.md +++ /dev/null @@ -1 +0,0 @@ -[=> See Source <=](../../../../docs/guides/index.md) diff --git a/packages/ui/docs/guides/principles/definitions-and-terms.md b/packages/ui/docs/guides/principles/definitions-and-terms.md deleted file mode 100644 index 6ddd68b5b..000000000 --- a/packages/ui/docs/guides/principles/definitions-and-terms.md +++ /dev/null @@ -1 +0,0 @@ -[=> See Source <=](../../../../../docs/guides/principles/definitions-and-terms.md) diff --git a/packages/ui/docs/guides/principles/index.md b/packages/ui/docs/guides/principles/index.md deleted file mode 100644 index 782a0ca05..000000000 --- a/packages/ui/docs/guides/principles/index.md +++ /dev/null @@ -1 +0,0 @@ -[=> See Source <=](../../../../../docs/guides/principles/index.md) diff --git a/packages/ui/docs/guides/principles/scoped-elements.md b/packages/ui/docs/guides/principles/scoped-elements.md deleted file mode 100644 index fe49e687c..000000000 --- a/packages/ui/docs/guides/principles/scoped-elements.md +++ /dev/null @@ -1 +0,0 @@ -[=> See Source <=](../../../../../docs/guides/principles/scoped-elements.md) diff --git a/packages/ui/docs/guides/principles/styling.md b/packages/ui/docs/guides/principles/styling.md deleted file mode 100644 index b642e31f1..000000000 --- a/packages/ui/docs/guides/principles/styling.md +++ /dev/null @@ -1 +0,0 @@ -[=> See Source <=](../../../../../docs/guides/principles/styling.md) diff --git a/packages/ui/docs/guides/principles/subclasser-apis.md b/packages/ui/docs/guides/principles/subclasser-apis.md deleted file mode 100644 index 62c703759..000000000 --- a/packages/ui/docs/guides/principles/subclasser-apis.md +++ /dev/null @@ -1 +0,0 @@ -[=> See Source <=](../../../../../docs/guides/principles/subclasser-apis.md) diff --git a/packages/ui/docs/override.js b/packages/ui/docs/override.js deleted file mode 100644 index 552d7c9b9..000000000 --- a/packages/ui/docs/override.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * This will override all md files within the folder to only contain [=> See Source <=](../path/to/source.md) - */ - -import { writeFile } from 'fs/promises'; -import glob from 'glob'; - -const allFiles = glob.sync('**/*.md', { nodir: true }); -const files = allFiles; - -for (const filePath of files) { - const insert = 3 + filePath.match(/\//g).length; - const srcPath = `${'../'.repeat(insert)}docs/${filePath}`; - await writeFile(filePath, `[=> See Source <=](${srcPath})`); -} diff --git a/packages/ui/package.json b/packages/ui/package.json index 158bd4159..ff56e9145 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -41,7 +41,7 @@ "debug:firefox": "cd ../../ && npm run debug:firefox", "debug:webkit": "cd ../../ && npm run debug:webkit", "publish-docs": "node ../../packages-node/publish-docs/src/cli.js --github-url https://github.com/ing-bank/lion/ --git-root-dir ../../", - "prepublishOnly": "npm run types && node ./scripts/copy-doc-assets.js && npm run publish-docs && npm run custom-elements-manifest", + "prepublishOnly": "npm run types && node ./scripts/create-docs-for-npm-publish.js && npm run publish-docs && npm run custom-elements-manifest", "test": "cd ../../ && npm run test:browser", "types": "wireit", "types-check-only": "tsc --project tsconfig-check-only.json", diff --git a/packages/ui/scripts/copy-doc-assets.js b/packages/ui/scripts/copy-doc-assets.js deleted file mode 100644 index 47d0ffcad..000000000 --- a/packages/ui/scripts/copy-doc-assets.js +++ /dev/null @@ -1,29 +0,0 @@ -import fs from 'fs'; -import path from 'path'; -// eslint-disable-next-line import/no-extraneous-dependencies -import { globby } from 'globby'; -import { fileURLToPath } from 'url'; - -const monoDocsRoot = fileURLToPath(new URL('../../../docs', import.meta.url)); -const localDocsRoot = fileURLToPath(new URL('../docs', import.meta.url)); - -async function copyDocAssets() { - // Folders generated by Rocket - const oldDestinations = await globby([`${monoDocsRoot}/**/**/*.{js,cjs,mjs}`]); - - for (const oldDestination of oldDestinations) { - const relPath = oldDestination.replace(monoDocsRoot, ''); - - // don't handle private folders and Rocket specifics - if (relPath.startsWith('/_') || oldDestination.endsWith('11tydata.cjs')) { - // eslint-disable-next-line no-continue - continue; - } - const newDestination = `${localDocsRoot}${relPath}`; - - await fs.promises.mkdir(path.dirname(newDestination), { recursive: true }); - fs.promises.copyFile(oldDestination, newDestination); - } -} - -copyDocAssets(); diff --git a/packages/ui/scripts/create-docs-for-npm-publish.js b/packages/ui/scripts/create-docs-for-npm-publish.js new file mode 100644 index 000000000..ec3cf83c8 --- /dev/null +++ b/packages/ui/scripts/create-docs-for-npm-publish.js @@ -0,0 +1,76 @@ +import fs from 'fs'; +import path from 'path'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { globby } from 'globby'; +import { fileURLToPath } from 'url'; + +const monoRoot = fileURLToPath(new URL('../../../', import.meta.url)); +const lionUiPkgRoot = fileURLToPath(new URL('../', import.meta.url)); + +const monoDocsRoot = fileURLToPath(new URL('../../../docs', import.meta.url)); +const localDocsRoot = fileURLToPath(new URL('../docs', import.meta.url)); +const foldersWeAreInterestedIn = ['components', 'fundamentals', 'guides']; + +/** + * @param {string} rootPath + * @returns {object|undefined} + */ +function getPackageJson(rootPath) { + try { + const fileContent = fs.readFileSync(`${rootPath}/package.json`, 'utf8'); + return JSON.parse(fileContent); + } catch { + return undefined; + } +} + +async function sanityCheck() { + const pkgJsonMonoRoot = getPackageJson(monoRoot); + const pkgJsonLionUi = getPackageJson(lionUiPkgRoot); + + if (pkgJsonMonoRoot?.name !== '@lion/root' || pkgJsonLionUi.name !== '@lion/ui') { + throw new Error( + 'It seems like this script has moved. Adjust variables "monoRoot" and/or "lionUiPkgRoot"', + ); + } +} + +async function generateMdFilesWithSourceReferrals() { + const mdPaths = await globby(`${monoDocsRoot}/{${foldersWeAreInterestedIn.join(',')}}/**/*.md`, { + nodir: true, + }); + + for (const mdPath of mdPaths) { + const localPath = mdPath.replace(monoDocsRoot, ''); + const newDestination = `${localDocsRoot}${localPath}`; + const relSrcPath = path.relative(path.dirname(newDestination), monoDocsRoot); + await fs.promises.mkdir(path.dirname(newDestination), { recursive: true }); + // Make it ready for publish-docs + await fs.promises.writeFile(newDestination, `[=> See Source <=](${relSrcPath}${localPath})`); + } +} + +async function copyDocAssets() { + // Folders generated by Rocket + const originalAssetPaths = await globby([ + `${monoDocsRoot}/{${foldersWeAreInterestedIn.join(',')}}/**/**/*.{js,cjs,mjs}`, + ]); + + for (const originalAssetPath of originalAssetPaths) { + const localPath = originalAssetPath.replace(monoDocsRoot, ''); + + // don't handle private folders and Rocket specifics + if (localPath.startsWith('/_') || originalAssetPath.endsWith('11tydata.cjs')) { + // eslint-disable-next-line no-continue + continue; + } + const newDestination = `${localDocsRoot}${localPath}`; + + await fs.promises.mkdir(path.dirname(newDestination), { recursive: true }); + fs.promises.copyFile(originalAssetPath, newDestination); + } +} + +await sanityCheck(); +await generateMdFilesWithSourceReferrals(); +await copyDocAssets();