@lion/ui 0.4.0-prerelease-bypass-export-map.0 → 0.4.1

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

@@ -424,14 +424,14 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     // we need to extract minDate, maxDate, minMaxDate and disabledDates validators
     validators.forEach(v => {
       const vctor = /** @type {typeof import('@lion/ui/form-core.js').Validator} */ (v.constructor);
-      if (vctor.validatorName === 'MinDate') {
+      if (vctor.validatorName === 'MinDate' && v.type === 'error') {
         this.__calendarMinDate = v.param;
-      } else if (vctor.validatorName === 'MaxDate') {
+      } else if (vctor.validatorName === 'MaxDate' && v.type === 'error') {
         this.__calendarMaxDate = v.param;
-      } else if (vctor.validatorName === 'MinMaxDate') {
+      } else if (vctor.validatorName === 'MinMaxDate' && v.type === 'error') {
         this.__calendarMinDate = v.param.min;
         this.__calendarMaxDate = v.param.max;
-      } else if (vctor.validatorName === 'IsDateDisabled') {
+      } else if (vctor.validatorName === 'IsDateDisabled' && v.type === 'error') {
         this.__calendarDisableDates = v.param;
       }
     });

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

@@ -323,6 +323,29 @@ describe('<lion-input-datepicker>', () => {
         expect(elObj.calendarEl.maxDate).to.equal(myMaxDate);
       });
 
+      it('does not converts MaxDate validator to "maxDate" property if validator type other then "error"', async () => {
+        const myMaxDate = new Date('2030/06/15');
+        const tagName = 'custom-input-datepicker';
+        if (!customElements.get(tagName)) {
+          customElements.define(
+            tagName,
+            class CustomInputDatepicker extends LionInputDatepicker {
+              static get validationTypes() {
+                return [...super.validationTypes, 'warning'];
+              }
+            },
+          );
+        }
+        const el = await fixture(html`
+          <custom-input-datepicker .validators=${[new MaxDate(myMaxDate, { type: 'warning' })]}>
+          </custom-input-datepicker>
+        `);
+        const elObj = new DatepickerInputObject(el);
+        await elObj.openCalendar();
+
+        expect(elObj.calendarEl.maxDate).to.be.undefined;
+      });
+
       it('should sync MinDate validator param with Calendar MinDate', async () => {
         const myMinDateValidator = new MinDate(new Date('2020/02/02'));
         const el = await fixture(html`

package/components/localize/types/LocalizeMixinTypes.ts

@@ -61,7 +61,7 @@ export interface msgOptions {
 }
 
 export declare class LocalizeMixinHost {
-  static get localizeNamespaces(): StringToFunctionMap[];
+  static get localizeNamespaces(): NamespaceObject[];
 
   static get waitForLocalizeNamespaces(): boolean;
 

package/components/overlays/src/OverlayController.js

@@ -103,9 +103,6 @@ async function preloadPopper() {
   return /** @type {* & Promise<PopperModule>} */ (import('@popperjs/core/dist/esm/popper.js'));
 }
 
-// @ts-expect-error [external]: CSS not yet typed
-const supportsCSSTypedObject = window.CSS?.number && document.body.attributeStyleMap?.set;
-
 /**
  * OverlayController is the fundament for every single type of overlay. With the right
  * configuration, it can be used to build (modal) dialogs, tooltips, dropdowns, popovers,
@@ -808,7 +805,8 @@ export class OverlayController extends EventTarget {
           document.body.clientHeight - /** @type {number} */ (this.__bodyClientHeight);
         const newMarginRight = this.__bodyMarginRight + scrollbarWidth;
         const newMarginBottom = this.__bodyMarginBottom + scrollbarHeight;
-        if (supportsCSSTypedObject) {
+        // @ts-expect-error [external]: CSS not yet typed
+        if (window.CSS?.number && document.body.attributeStyleMap?.set) {
           // @ts-expect-error [external]: types attributeStyleMap + CSS.px not available yet
           document.body.attributeStyleMap.set('margin-right', CSS.px(newMarginRight));
           // @ts-expect-error [external]: types attributeStyleMap + CSS.px not available yet

package/components/progress-indicator/src/LionProgressIndicator.js

@@ -150,7 +150,7 @@ export class LionProgressIndicator extends LocalizeMixin(LitElement) {
       }
     } else {
       if (changedProperties.has('value')) {
-        if (!this.value || typeof this.value !== 'number') {
+        if ((!this.value && this.value !== 0) || typeof this.value !== 'number') {
           this.removeAttribute('value');
         } else if (this.value < this.min) {
           this.value = this.min;

package/components/progress-indicator/test/lion-progress-indicator.test.js

@@ -149,7 +149,9 @@ describe('lion-progress-indicator', () => {
       const el = await fixture(
         html`<lion-progress-indicator value="30"></lion-progress-indicator> `,
       );
-      el.setAttribute('value', '');
+      // when the attribute is defined, lit set the property to Number(attributeValue)
+      // this means, setting the value to an empty string will be valid because Number('') is 0
+      el.setAttribute('value', 'invalid-value');
       await el.updateComplete;
       expect(el.indeterminate).to.be.true;
       await el.updateComplete;
@@ -158,6 +160,21 @@ describe('lion-progress-indicator', () => {
       expect(el.hasAttribute('aria-valuemax')).to.be.false;
       expect(el.getAttribute('aria-label')).to.equal('Loading');
     });
+
+    it('can update value to 0', async () => {
+      const el = await fixture(
+        html`<lion-progress-indicator value="0"></lion-progress-indicator> `,
+      );
+      await el.updateComplete;
+      expect(el.indeterminate).to.be.false;
+    });
+
+    // empty string will be converted to 0 by lit because value is declared as number
+    it('can update value to 0 if the set value is empty string', async () => {
+      const el = await fixture(html`<lion-progress-indicator value=""></lion-progress-indicator> `);
+      await el.updateComplete;
+      expect(el.indeterminate).to.be.false;
+    });
   });
 
   describe('Subclasers', () => {