@lion/ui 0.17.0 → 0.18.0-menu-system.1

package/collapsible.js

@@ -1 +1,2 @@
 export { LionCollapsible } from './components/collapsible/src/LionCollapsible.js';
+// export { DisclosureMixin } from '../components/collapsible/src/DisclosureMixin.js';

package/components/button/src/LionButton.js

@@ -220,4 +220,8 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
       this.click();
     }
   }
+
+  // we want to be able to identify LionButtons w/o instanceof (for perf (loose dep) and dual version support),
+  // so we use a static property for that that doesn't get renamed by minifiers
+  static ['_$isLionButton$'] = true;
 }

package/components/button/test-suites/LionButton.suite.js

@@ -279,6 +279,7 @@ export function LionButtonSuite({ klass = LionButton } = {}) {
 
         sameProperties.forEach(property => {
           it(`has same value of the property "${property}" as in native button event`, () => {
+            // @ts-ignore - dynamic property access
             expect(lionButtonEvent[property]).to.equal(nativeButtonEvent[property]);
           });
         });

package/components/calendar/src/LionCalendar.js

@@ -928,6 +928,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     if (type !== 'Date') {
       tmpDate.setDate(1);
     }
+    // @ts-ignore - dynamic method access
     tmpDate[`set${type}`](tmpDate[`get${type}`]() + modify);
     // if we've reset the day count,
     // restore day count as best we can
@@ -935,6 +936,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
       const maxDays = new Date(tmpDate.getFullYear(), tmpDate.getMonth() + 1, 0).getDate();
       tmpDate.setDate(Math.min(this.centralDate.getDate(), maxDays));
     }
+    // @ts-ignore - dynamic property access
     this[dateType] = tmpDate;
   }
 

package/components/collapsible/src/DisclosureMixin.js

@@ -0,0 +1,313 @@
+/**
+ * @typedef {import('../types/DisclosureMixinTypes.js').DisclosureHost} DisclosureHost
+ * @typedef {import('../types/DisclosureMixinTypes.js').DisclosureMixin} DisclosureMixin
+ */
+
+// /**
+//  * @type {DisclosureMixin}
+//  */
+// const DisclosureMixinImplementation = superclass =>
+//   // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+//   class DisclosureMixin extends superclass {
+//     /** @type {any} */
+//     static get properties() {
+//       return {
+//         opened: { type: Boolean, reflect: true },
+//         handleFocus: { type: Boolean, attribute: 'handle-focus' },
+//         invokerInteraction: { type: String, attribute: 'invoker-interaction' },
+//       };
+//     }
+
+//     /**
+//      * @param {Element} focusableElOrWrapper
+//      * @returns {Element|null}
+//      */
+//     static _getFocusableInvokerEl(focusableElOrWrapper) {
+//       // return focusableElOrWrapper;
+//       return (
+//         focusableElOrWrapper &&
+//         (focusableElOrWrapper.hasAttribute('tabindex') || focusableElOrWrapper.tagName === 'BUTTON'
+//           ? focusableElOrWrapper
+//           : focusableElOrWrapper.querySelector('[role=button], button'))
+//       );
+//     }
+
+//     get _invokerNode() {
+//       const ctor = this.constructor;
+//       if (!this.__invokerNode) {
+//         const slottedNode = Array.from(this.children).find(child => child.slot === 'invoker');
+//         if (slottedNode) {
+//           this.__invokerNode = ctor._getFocusableInvokerEl(slottedNode);
+//         } else {
+//           this.__invokerNode =
+//             this.previousElementSibling?.hasAttribute('data-invoker') &&
+//             ctor._getFocusableInvokerEl(this.previousElementSibling);
+//         }
+//       }
+//       return this.__invokerNode;
+//     }
+
+//     get _contentNode() {
+//       if (!this._cachedOverlayContentNode) {
+//         this._cachedOverlayContentNode = Array.from(this.children).find(
+//           child => child.slot === 'content',
+//         );
+//       }
+//       return this._cachedOverlayContentNode;
+//     }
+
+//     constructor() {
+//       super();
+//       this.opened = false;
+//       /**
+//        * @type {'click'|'hover'}
+//        */
+//       this.invokerInteraction = 'click';
+//       /**
+//        * Puts focus on `_contentNode` on open and on `_invokerNode` on close.
+//        * @type {Boolean}
+//        */
+//       this.handleFocus = false;
+//       this.__disclosureNeedsSetup = true;
+
+//       this.toggle = this.toggle.bind(this);
+//       this.open = this.open.bind(this);
+//       this.close = this.close.bind(this);
+
+//       this.__handleAnimateComplete = this.__handleAnimateComplete.bind(this);
+
+//       this.__onInvokerMouseenter = this.__onInvokerMouseenter.bind(this);
+//       this.__onContentMouseenter = this.__onContentMouseenter.bind(this);
+//       this.__onInvokerMouseleave = this.__onInvokerMouseleave.bind(this);
+//       this.__onContentMouseleave = this.__onContentMouseleave.bind(this);
+//     }
+
+//     connectedCallback() {
+//       super.connectedCallback();
+//       // we do a setup after every connectedCallback as firstUpdated will only be called once
+//       this.__disclosureNeedsSetup = true;
+//       this.updateComplete.then(() => {
+//         if (this.__disclosureNeedsSetup) {
+//           this._setupDisclosure();
+//         }
+//         this.__disclosureNeedsSetup = false;
+//       });
+//       this.__setupAnimation();
+//     }
+
+//     disconnectedCallback() {
+//       super.disconnectedCallback();
+//       this._teardownDisclosure();
+//       this.__teardownAnimation();
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     _setupDisclosure() {
+//       console.log('_setupDisclosure', this.level);
+
+//       this._setupOpenCloseListeners();
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     _teardownDisclosure() {
+//       this._teardownOpenCloseListeners();
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     _setupOpenCloseListeners() {
+//       console.log('setup listeners', this.level);
+//       if (!this._invokerNode) {
+//         return;
+//       }
+
+//       const interactions = this.invokerInteraction.split(' ');
+
+//       if (interactions.includes('hover')) {
+//         this._invokerNode.addEventListener('mouseenter', this.__onInvokerMouseenter);
+//         this._contentNode?.addEventListener('mouseenter', this.__onContentMouseenter);
+//         this._invokerNode.addEventListener('mouseleave', this.__onInvokerMouseleave);
+//         this._contentNode?.addEventListener('mouseleave', this.__onContentMouseleave);
+//       }
+//       if (interactions.includes('click')) {
+//         this._invokerNode.addEventListener('click', this.toggle);
+//       }
+//     }
+
+//     __onInvokerMouseenter() {
+//       this.__invokerHover = true;
+//       this.open();
+//     }
+
+//     __onContentMouseenter() {
+//       this.__contentHover = true;
+//       console.log('this.__contentHover', this.__contentHover);
+//       this.open();
+//     }
+
+//     __onInvokerMouseleave() {
+//       setTimeout(() => {
+//         if (!this.__contentHover) {
+//           this.close();
+//         }
+//       });
+//       this.__invokerHover = false;
+//     }
+
+//     __onContentMouseleave() {
+//       setTimeout(() => {
+//         if (!this.__invokerHover) {
+//           this.close();
+//         }
+//       });
+//       this.__contentHover = false;
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     _teardownOpenCloseListeners() {
+//       if (!this._invokerNode) {
+//         return;
+//       }
+
+//       this._invokerNode.removeEventListener('mouseenter', this.open);
+//       this._invokerNode.removeEventListener('mouseleave', this.close);
+//       this._contentNode?.removeEventListener('mouseenter', this.open);
+//       this._contentNode?.removeEventListener('mouseleave', this.close);
+
+//       // console.log(this, 'removetCLick');
+
+//       this._invokerNode.removeEventListener('click', this.toggle);
+//     }
+
+//     // TODO: fire event on updated?
+//     /**
+//      * @override
+//      * @param {string} name
+//      * @param {any} oldValue
+//      */
+//     requestUpdate(name, oldValue) {
+//       super.requestUpdate(name, oldValue);
+//       if (name === 'opened') {
+//         this.dispatchEvent(new Event('opened-changed'));
+//       }
+//     }
+
+//     /**
+//      * @param {import('lit-element').PropertyValues } changedProperties
+//      */
+//     updated(changedProperties) {
+//       super.updated(changedProperties);
+
+//       if (changedProperties.has('opened')) {
+//         this._onOpenedChanged();
+//       }
+//     }
+
+//     /**
+//      * @param {import('lit-element').PropertyValues } changedProperties
+//      */
+//     firstUpdated(changedProperties) {
+//       super.firstUpdated(changedProperties);
+//       this._onOpenedChanged();
+
+//       if (this.handleFocus && !this._contentNode?.hasAttribute('tabindex')) {
+//         this._contentNode?.setAttribute('tabindex', '-1');
+//       }
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     async _onOpenedChanged() {
+//       this._invokerNode.setAttribute('aria-expanded', `${this.opened}`);
+
+//       if (this.opened) {
+//         this._contentNode.style.setProperty('display', '');
+//         await this._showAnimation({ contentNode: this._contentNode });
+//         this._onDisclosureShow();
+//       } else {
+//         this._onDisclosureHide();
+//         await this._hideAnimation({ contentNode: this._contentNode });
+//         this._contentNode.style.setProperty('display', 'none');
+//       }
+//     }
+
+//     _onDisclosureShow() {
+//       // if (this.checkedIndex != null) {
+//       //   this.activeIndex = this.checkedIndex;
+//       // }
+
+//       if (this.handleFocus) {
+//         this._contentNode.focus();
+//       }
+//     }
+
+//     _onDisclosureHide() {
+//       if (this.handleFocus) {
+//         this._invokerNode.focus();
+//       }
+//     }
+
+//     /**
+//      * Show animation implementation in sub-classer.
+//      * @param {{ contentNode: HTMLElement; }} cfg
+//      */
+//     // eslint-disable-next-line class-methods-use-this, no-empty-function
+//     async _showAnimation(cfg) {
+//       this._refreshAnimateCompletePromise();
+//     }
+
+//     /**
+//      * Hide animation implementation in sub-classer.
+//      * @param {{ contentNode: HTMLElement; }} cfg
+//      */
+//     // eslint-disable-next-line class-methods-use-this, no-empty-function
+//     async _hideAnimation(cfg) {
+//       this._refreshAnimateCompletePromise();
+//     }
+
+//     _refreshAnimateCompletePromise() {
+//       this._animateComplete = new Promise(resolve => {
+//         // Note that when a lib like GSAP is used, neither 'transitionend' or 'animationend' will be called.
+//         // In such a case, a subclasser needs to resolve this pending promise by calling this method
+//         this._resolveAnimateComplete = resolve;
+//       });
+//     }
+
+//     __setupAnimation() {
+//       this._contentNode.addEventListener('transitionend', this.__handleAnimateComplete);
+//       this._contentNode.addEventListener('animationend', this.__handleAnimateComplete);
+//     }
+
+//     __teardownAnimation() {
+//       this._contentNode.removeEventListener('transitionend', this.__handleAnimateComplete);
+//       this._contentNode.removeEventListener('animationend', this.__handleAnimateComplete);
+//     }
+
+//     __handleAnimateComplete() {
+//       if (typeof this._resolveAnimateComplete === 'function') {
+//         this._resolveAnimateComplete();
+//       }
+//     }
+
+//     toggle() {
+//       // console.log('toggul', this);
+//       this.opened = !this.opened;
+//     }
+
+//     open() {
+//       this.opened = true;
+//     }
+
+//     close() {
+//       this.opened = false;
+//     }
+//   };
+// export const DisclosureMixin = dedupeMixin(DisclosureMixinImplementation);

package/components/collapsible/types/DisclosureMixinTypes.ts

@@ -0,0 +1,48 @@
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement } from 'lit';
+
+export declare class DisclosureHost {
+  public opened: Boolean;
+
+  protected get _invokerNode(): HTMLElement;
+
+  protected get _contentNode(): HTMLElement;
+
+  public toggle(): void;
+
+  public open(): void;
+
+  public close(): void;
+
+  protected _onOpenedChanged(): Promise<void>;
+
+  protected _onDisclosureShow(): void;
+
+  protected _onDisclosureHide(): void;
+
+  protected _showAnimation(cfg: object): Promise<void>;
+
+  protected _hideAnimation(cfg: object): Promise<void>;
+
+  protected _refreshAnimateCompletePromise(): void;
+
+  protected _setupOpenCloseListeners(): void;
+
+  protected _teardownOpenCloseListeners(): void;
+
+  private __setupAnimation(): void;
+
+  private __teardownAnimation(): void;
+
+  private __handleAnimateComplete(): void;
+}
+
+export declare function DisclosureImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<DisclosureHost> &
+  DisclosureHost &
+  Pick<typeof DisclosureHost, keyof typeof DisclosureHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
+
+export type DisclosureMixin = typeof DisclosureImplementation;

package/components/combobox/test/lion-combobox.test.js

@@ -3227,6 +3227,7 @@ describe('lion-combobox', () => {
         const [el, options] = await fruitFixture({ autocomplete: 'both', matchMode: 'all' });
         await mimicUserTyping(/** @type {LionCombobox} */ (el), 'choke');
         await el.updateComplete;
+        // @ts-ignore - array index access
         const labelledElement = options[0].querySelector('span[aria-label="Artichoke"]');
         expect(labelledElement).to.not.be.null;
         expect(labelledElement.innerText).to.equal('Artichoke');

package/components/form-core/src/form-group/FormGroupMixin.js

@@ -352,11 +352,14 @@ const FormGroupMixinImplementation = superclass =>
       this.formElements._keys().forEach(name => {
         const elem = this.formElements[name];
         if (elem instanceof FormControlsCollection) {
+          // @ts-ignore - dynamic property access
           result[name] = elem.filter(el => _filterFn(el, property)).map(el => el[property]);
         } else if (_filterFn(elem, property)) {
           if (typeof elem._getFromAllFormElements === 'function') {
+            // @ts-ignore - dynamic property access
             result[name] = elem._getFromAllFormElements(property);
           } else {
+            // @ts-ignore - dynamic property access
             result[name] = elem[property];
           }
         }
@@ -386,6 +389,7 @@ const FormGroupMixinImplementation = superclass =>
           if (Array.isArray(this.formElements[name])) {
             this.formElements[name].forEach(
               (/** @type {FormControl} */ el, /** @type {number} */ index) => {
+                // @ts-ignore - dynamic property access
                 el[property] = values[name][index]; // eslint-disable-line no-param-reassign
               },
             );
@@ -393,6 +397,7 @@ const FormGroupMixinImplementation = superclass =>
           if (this.formElements[name]) {
             this.formElements[name][property] = values[name];
           } else {
+            // @ts-ignore - dynamic property access
             this.__pendingValues[property][name] = values[name];
           }
         });
@@ -406,6 +411,7 @@ const FormGroupMixinImplementation = superclass =>
     _anyFormElementHas(property) {
       return Object.keys(this.formElements).some(name => {
         if (Array.isArray(this.formElements[name])) {
+          // @ts-ignore - dynamic property access
           return this.formElements[name].some((/** @type {FormControl} */ el) => !!el[property]);
         }
         return !!this.formElements[name][property];
@@ -436,6 +442,7 @@ const FormGroupMixinImplementation = superclass =>
     _everyFormElementHas(property) {
       return Object.keys(this.formElements).every(name => {
         if (Array.isArray(this.formElements[name])) {
+          // @ts-ignore - dynamic property access
           return this.formElements[name].every((/** @type {FormControl} */ el) => !!el[property]);
         }
         return !!this.formElements[name][property];

package/components/form-core/src/registration/FormRegistrarMixin.js

@@ -162,15 +162,21 @@ const FormRegistrarMixinImplementation = superclass =>
         }
 
         if (name.substr(-2) === '[]') {
+          // @ts-ignore - dynamic named access to form elements
           if (!Array.isArray(this.formElements[name])) {
+            // @ts-ignore
             this.formElements[name] = new FormControlsCollection();
           }
           if (indexToInsertAt > 0) {
+            // @ts-ignore
             this.formElements[name].splice(indexToInsertAt, 0, child);
           } else {
+            // @ts-ignore
             this.formElements[name].push(child);
           }
+          // @ts-ignore
         } else if (!this.formElements[name]) {
+          // @ts-ignore
           this.formElements[name] = child;
         } else {
           console.info('Error Node:', child); // eslint-disable-line no-console
@@ -194,12 +200,17 @@ const FormRegistrarMixinImplementation = superclass =>
       // 2. Handle name based object keys
       if (this._isFormOrFieldset) {
         const { name } = child; // FIXME: <-- ElementWithParentFormGroup should become LionFieldWithParentFormGroup so that "name" exists
+        // @ts-ignore - dynamic named access to form elements
         if (name.substr(-2) === '[]' && this.formElements[name]) {
+          // @ts-ignore
           const idx = this.formElements[name].indexOf(child);
           if (idx > -1) {
+            // @ts-ignore
             this.formElements[name].splice(idx, 1);
           }
+          // @ts-ignore
         } else if (this.formElements[name]) {
+          // @ts-ignore
           delete this.formElements[name];
         }
       }

package/components/form-core/test/FormControlMixin.test.js

@@ -153,6 +153,7 @@ describe('FormControlMixin', () => {
         el.shadowRoot?.querySelector('.form-field__label'),
       );
       Object.entries(expectedValues).forEach(([key, val]) => {
+        // @ts-ignore - dynamic style property access
         expect(labelStyle[key]).to.equal(val);
       });
     });

package/components/form-core/test/validate/Validator.test.js

@@ -191,7 +191,9 @@ describe('Validator', () => {
   it('adds static ["_$isValidator$"] property as a marker to identify the Validator class across different lion versions (as instanceof cannot be used)', async () => {
     const myValidator = new Validator();
 
+    // @ts-ignore - static property access
     expect(myValidator.constructor['_$isValidator$']).to.exist;
+    // @ts-ignore - static property access
     expect(myValidator.constructor['_$isValidator$']).to.be.true;
   });
 

package/components/form-core/test-suites/ValidateMixin.suite.js

@@ -1554,11 +1554,13 @@ export function runValidateMixinSuite(customConfig) {
           // eslint-disable-next-line no-restricted-syntax
           for (const state of ['dirty', 'touched', 'prefilled', 'submitted']) {
             counter += 1;
+            // @ts-ignore - test property access
             el[state] = false;
             // eslint-disable-next-line no-await-in-loop
             await el.updateComplete;
             expect(spy.callCount).to.equal(counter);
             counter += 1;
+            // @ts-ignore - test property access
             el[state] = true;
             // eslint-disable-next-line no-await-in-loop
             await el.updateComplete;

package/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.js

@@ -714,6 +714,7 @@ export function runValidateMixinFeedbackPart() {
             const results = {
               'a-string-instead-of-bool': 'Msg based on enum output',
             };
+            // @ts-ignore - test data structure
             return results[/** @type {string} */ (outcome)];
           }
         }

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

@@ -6,6 +6,7 @@ async function combineLocalizeImports(importPromises) {
   const combinedResult = localizeObjects[0];
   for (const localizeObject of localizeObjects.slice(1)) {
     Object.entries(localizeObject.default).forEach(([key, val]) => {
+      // @ts-ignore - dynamic property access
       combinedResult.default[key] = val;
     });
   }

package/components/input-datepicker/test/lion-input-datepicker.test.js

@@ -597,12 +597,11 @@ describe('<lion-input-datepicker>', () => {
         <lion-input-datepicker label="End date" name="endDate"></lion-input-datepicker>
       `);
 
-      // @ts-expect-error
-      const elements = el.parentElement.children;
-      // @ts-expect-error
-      const startLabel = elements.startDate.querySelector('button').ariaLabel;
-      // @ts-expect-error
-      const endLabel = elements.endDate.querySelector('button').ariaLabel;
+      const elements = el.parentElement?.children;
+      // @ts-ignore - accessing by name property
+      const startLabel = elements?.startDate?.querySelector('button')?.ariaLabel;
+      // @ts-ignore - accessing by name property
+      const endLabel = elements?.endDate?.querySelector('button')?.ariaLabel;
 
       expect(startLabel).to.not.equal(endLabel);
     });

package/components/localize/test/date/formatDate.test.js

@@ -210,6 +210,7 @@ describe('formatDate', () => {
           locale,
         };
         const parsedDate = /** @type {Date} */ (parseDate('12.10.2019'));
+        // @ts-ignore - dynamic locale key access
         expect(formatDate(parsedDate, options)).to.equal(LOCALE_FORMATTED_DATE_MAP[locale]);
       });
     });

package/components/menu/CHANGELOG.md

@@ -0,0 +1,37 @@
+Allow advanced preprocessing
+
+- Turn '1' into '01-__-____'
+- Turn ’20’ into ’20-’, -> ’20-4’ into ’20-04’ etc…
+
+See: https://nosir.github.io/cleave.js/(But we should enhance the UX when editing the middle of a date)So:
+
+```js
+/**  * @returns {string | { viewValue:string, caretIndex:number } } */
+preprocessor(viewValue, { previousViewValue = ‘’, currentCaretIndex }) {
+  const diff = viewValue.length - previousViewValue.length;
+  if (diff === -1) && !isNaN(Number(previousViewValue[currentCaretIndex]))) {
+    // don’t respond to delete actions
+    return viewValue;
+  }
+
+  let newValue = '';
+  const strippedVal = viewValue.replace('-', '');
+  let dashesPlaced = 0;
+  let newCaretIndex;
+  for (let i = 0; i < 10; i+= 1) {
+    if (i === 2 || i === 4) {
+      newValue += ‘-’;
+      dashesPlaced += 1;
+      }
+    else if (i < strippedVal.length + dashesPlaced) {
+      newValue += strippedVal[i];
+    } else {
+      newValue += ‘_’;
+      if (newCaretIndex === undefined) {
+        newCaretIndex = i;
+      }
+    }
+  }
+  return { viewValue: newValue, caretIndex: newCaretIndex };
+}
+```