@lion/ui 0.3.5 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (146) hide show
  1. package/accordion.js +1 -0
  2. package/button.js +3 -0
  3. package/calendar-test-helpers.js +3 -0
  4. package/calendar.js +2 -0
  5. package/checkbox-group-test-suites.js +1 -0
  6. package/checkbox-group.js +3 -0
  7. package/collapsible.js +1 -0
  8. package/combobox-test-helpers.js +1 -0
  9. package/combobox.js +6 -0
  10. package/components/accordion/src/LionAccordion.js +20 -3
  11. package/components/accordion/test/lion-accordion.test.js +19 -0
  12. package/components/calendar/src/LionCalendar.js +5 -2
  13. package/components/calendar/src/utils/createMonth.js +1 -2
  14. package/components/calendar/test/lion-calendar.test.js +83 -4
  15. package/components/calendar/test/utils/createMonth.test.js +15 -0
  16. package/components/form-core/src/form-group/FormGroupMixin.js +7 -0
  17. package/components/form-core/src/validate/ValidateMixin.js +197 -153
  18. package/components/form-core/test-suites/ValidateMixin.suite.js +4 -4
  19. package/components/form-core/test-suites/form-group/FormGroupMixin-input.suite.js +1 -1
  20. package/components/form-core/test-suites/form-group/FormGroupMixin.suite.js +22 -7
  21. package/components/input-datepicker/src/LionInputDatepicker.js +4 -4
  22. package/components/input-datepicker/test/lion-input-datepicker.test.js +23 -0
  23. package/components/localize/types/LocalizeMixinTypes.ts +1 -1
  24. package/components/overlays/src/OverlayController.js +2 -4
  25. package/components/progress-indicator/src/LionProgressIndicator.js +1 -1
  26. package/components/progress-indicator/test/lion-progress-indicator.test.js +18 -1
  27. package/core.js +7 -0
  28. package/custom-elements.json +421 -379
  29. package/dialog.js +1 -0
  30. package/dist-types/components/accordion/src/LionAccordion.d.ts +10 -0
  31. package/dist-types/components/accordion/src/LionAccordion.d.ts.map +1 -1
  32. package/dist-types/components/calendar/src/LionCalendar.d.ts.map +1 -1
  33. package/dist-types/components/calendar/src/utils/createMonth.d.ts.map +1 -1
  34. package/dist-types/components/form-core/src/form-group/FormGroupMixin.d.ts.map +1 -1
  35. package/dist-types/components/form-core/src/validate/ValidateMixin.d.ts +1 -0
  36. package/dist-types/components/form-core/src/validate/ValidateMixin.d.ts.map +1 -1
  37. package/dist-types/components/form-core/test-suites/form-group/FormGroupMixin.suite.d.ts.map +1 -1
  38. package/dist-types/components/input-file/src/LionInputFile.d.ts +1 -1
  39. package/dist-types/components/input-file/src/LionInputFile.d.ts.map +1 -1
  40. package/dist-types/components/input-file/src/LionSelectedFileList.d.ts +1 -1
  41. package/dist-types/components/input-file/src/LionSelectedFileList.d.ts.map +1 -1
  42. package/dist-types/components/input-tel/src/LionInputTel.d.ts +1 -1
  43. package/dist-types/components/input-tel/src/LionInputTel.d.ts.map +1 -1
  44. package/dist-types/components/localize/types/LocalizeMixinTypes.d.ts +1 -1
  45. package/dist-types/components/localize/types/LocalizeMixinTypes.d.ts.map +1 -1
  46. package/dist-types/components/overlays/src/OverlayController.d.ts.map +1 -1
  47. package/dist-types/tsconfig.tsbuildinfo +1 -1
  48. package/docs/components/checkbox-group/overview.md +2 -2
  49. package/docs/components/collapsible/overview.md +1 -1
  50. package/docs/components/combobox/overview.md +1 -1
  51. package/docs/components/combobox/use-cases.md +1 -1
  52. package/docs/components/dialog/overview.md +1 -1
  53. package/docs/components/fieldset/overview.md +5 -5
  54. package/docs/components/form/overview.md +3 -3
  55. package/docs/components/icon/use-cases.md +1 -1
  56. package/docs/components/input/overview.md +1 -1
  57. package/docs/components/input-amount/overview.md +3 -3
  58. package/docs/components/input-date/overview.md +3 -3
  59. package/docs/components/input-datepicker/overview.md +5 -5
  60. package/docs/components/input-email/overview.md +2 -2
  61. package/docs/components/input-file/overview.md +1 -1
  62. package/docs/components/input-iban/overview.md +2 -2
  63. package/docs/components/input-range/overview.md +2 -2
  64. package/docs/components/input-stepper/overview.md +1 -1
  65. package/docs/components/input-tel/overview.md +1 -1
  66. package/docs/components/input-tel/use-cases.md +6 -6
  67. package/docs/components/input-tel-dropdown/overview.md +1 -1
  68. package/docs/components/radio-group/overview.md +3 -3
  69. package/docs/components/select-rich/use-cases.md +1 -1
  70. package/docs/components/tabs/examples.md +1 -1
  71. package/docs/fundamentals/index.md +4 -4
  72. package/docs/fundamentals/node-tools/providence-analytics/LocalConfiguration.md +1 -1
  73. package/docs/fundamentals/node-tools/providence-analytics/QueryResult.md +1 -1
  74. package/docs/fundamentals/node-tools/providence-analytics/analyzer.md +1 -1
  75. package/docs/fundamentals/node-tools/providence-analytics/dashboard.md +1 -1
  76. package/docs/fundamentals/node-tools/providence-analytics/overview.md +3 -3
  77. package/docs/fundamentals/node-tools/publish-docs/overview.md +3 -3
  78. package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md +2 -2
  79. package/docs/fundamentals/rationales/accessibility.md +1 -1
  80. package/docs/fundamentals/systems/core/SlotMixin.md +1 -1
  81. package/docs/fundamentals/systems/core/overview.md +1 -1
  82. package/docs/fundamentals/systems/form/formatting-and-parsing.md +4 -4
  83. package/docs/fundamentals/systems/form/model-value.md +1 -1
  84. package/docs/fundamentals/systems/form/overview.md +28 -28
  85. package/docs/fundamentals/systems/form/validate.md +1 -1
  86. package/docs/fundamentals/systems/localize/overview.md +4 -4
  87. package/docs/fundamentals/systems/overlays/configuration.md +2 -2
  88. package/docs/fundamentals/systems/overlays/overview.md +5 -5
  89. package/docs/fundamentals/systems/overlays/use-cases.md +2 -2
  90. package/docs/fundamentals/tools/helpers/overview.md +1 -1
  91. package/docs/fundamentals/tools/singleton-manager/overview.md +4 -4
  92. package/docs/guides/how-to/create-a-custom-field.md +5 -5
  93. package/docs/guides/how-to/create-a-form.md +4 -4
  94. package/docs/guides/how-to/extend-a-native-input.md +2 -2
  95. package/docs/guides/index.md +8 -8
  96. package/docs/guides/principles/index.md +5 -5
  97. package/docs/guides/principles/styling.md +1 -1
  98. package/drawer.js +1 -0
  99. package/fieldset.js +1 -0
  100. package/form-core-test-helpers.js +3 -0
  101. package/form-core-test-suites.js +10 -0
  102. package/form-core.js +45 -0
  103. package/form-integrations.js +1 -0
  104. package/form.js +1 -0
  105. package/helpers.js +7 -0
  106. package/icon-no-side-effects.js +1 -0
  107. package/icon.js +3 -0
  108. package/input-amount.js +4 -0
  109. package/input-date.js +1 -0
  110. package/input-datepicker-test-helpers.js +1 -0
  111. package/input-datepicker.js +1 -0
  112. package/input-email.js +1 -0
  113. package/input-file.js +3 -0
  114. package/input-iban.js +4 -0
  115. package/input-range.js +1 -0
  116. package/input-stepper.js +1 -0
  117. package/input-tel-dropdown-test-suites.js +1 -0
  118. package/input-tel-dropdown.js +2 -0
  119. package/input-tel-test-helpers.js +4 -0
  120. package/input-tel-test-suites.js +1 -0
  121. package/input-tel.js +5 -0
  122. package/input-test-helpers.js +1 -0
  123. package/input.js +1 -0
  124. package/listbox-test-helpers.js +1 -0
  125. package/listbox-test-suites.js +1 -0
  126. package/listbox.js +4 -0
  127. package/localize-no-side-effects.js +19 -0
  128. package/localize-test-helpers.js +7 -0
  129. package/localize.js +19 -0
  130. package/overlays-no-side-effects.js +1 -0
  131. package/overlays-test-helpers.js +1 -0
  132. package/overlays-test-suites.js +1 -0
  133. package/overlays.js +17 -0
  134. package/package.json +7 -3
  135. package/pagination.js +1 -0
  136. package/progress-indicator.js +1 -0
  137. package/radio-group.js +2 -0
  138. package/select-rich.js +2 -0
  139. package/select.js +1 -0
  140. package/steps.js +2 -0
  141. package/switch.js +2 -0
  142. package/tabs.js +1 -0
  143. package/textarea.js +1 -0
  144. package/tooltip.js +1 -0
  145. package/validate-messages-no-side-effects.js +1 -0
  146. package/validate-messages.js +1 -0
@@ -424,14 +424,14 @@ export class LionInputDatepicker extends ScopedElementsMixin(
424
424
  // we need to extract minDate, maxDate, minMaxDate and disabledDates validators
425
425
  validators.forEach(v => {
426
426
  const vctor = /** @type {typeof import('@lion/ui/form-core.js').Validator} */ (v.constructor);
427
- if (vctor.validatorName === 'MinDate') {
427
+ if (vctor.validatorName === 'MinDate' && v.type === 'error') {
428
428
  this.__calendarMinDate = v.param;
429
- } else if (vctor.validatorName === 'MaxDate') {
429
+ } else if (vctor.validatorName === 'MaxDate' && v.type === 'error') {
430
430
  this.__calendarMaxDate = v.param;
431
- } else if (vctor.validatorName === 'MinMaxDate') {
431
+ } else if (vctor.validatorName === 'MinMaxDate' && v.type === 'error') {
432
432
  this.__calendarMinDate = v.param.min;
433
433
  this.__calendarMaxDate = v.param.max;
434
- } else if (vctor.validatorName === 'IsDateDisabled') {
434
+ } else if (vctor.validatorName === 'IsDateDisabled' && v.type === 'error') {
435
435
  this.__calendarDisableDates = v.param;
436
436
  }
437
437
  });
@@ -323,6 +323,29 @@ describe('<lion-input-datepicker>', () => {
323
323
  expect(elObj.calendarEl.maxDate).to.equal(myMaxDate);
324
324
  });
325
325
 
326
+ it('does not converts MaxDate validator to "maxDate" property if validator type other then "error"', async () => {
327
+ const myMaxDate = new Date('2030/06/15');
328
+ const tagName = 'custom-input-datepicker';
329
+ if (!customElements.get(tagName)) {
330
+ customElements.define(
331
+ tagName,
332
+ class CustomInputDatepicker extends LionInputDatepicker {
333
+ static get validationTypes() {
334
+ return [...super.validationTypes, 'warning'];
335
+ }
336
+ },
337
+ );
338
+ }
339
+ const el = await fixture(html`
340
+ <custom-input-datepicker .validators=${[new MaxDate(myMaxDate, { type: 'warning' })]}>
341
+ </custom-input-datepicker>
342
+ `);
343
+ const elObj = new DatepickerInputObject(el);
344
+ await elObj.openCalendar();
345
+
346
+ expect(elObj.calendarEl.maxDate).to.be.undefined;
347
+ });
348
+
326
349
  it('should sync MinDate validator param with Calendar MinDate', async () => {
327
350
  const myMinDateValidator = new MinDate(new Date('2020/02/02'));
328
351
  const el = await fixture(html`
@@ -61,7 +61,7 @@ export interface msgOptions {
61
61
  }
62
62
 
63
63
  export declare class LocalizeMixinHost {
64
- static get localizeNamespaces(): StringToFunctionMap[];
64
+ static get localizeNamespaces(): NamespaceObject[];
65
65
 
66
66
  static get waitForLocalizeNamespaces(): boolean;
67
67
 
@@ -103,9 +103,6 @@ async function preloadPopper() {
103
103
  return /** @type {* & Promise<PopperModule>} */ (import('@popperjs/core/dist/esm/popper.js'));
104
104
  }
105
105
 
106
- // @ts-expect-error [external]: CSS not yet typed
107
- const supportsCSSTypedObject = window.CSS?.number && document.body.attributeStyleMap?.set;
108
-
109
106
  /**
110
107
  * OverlayController is the fundament for every single type of overlay. With the right
111
108
  * configuration, it can be used to build (modal) dialogs, tooltips, dropdowns, popovers,
@@ -808,7 +805,8 @@ export class OverlayController extends EventTarget {
808
805
  document.body.clientHeight - /** @type {number} */ (this.__bodyClientHeight);
809
806
  const newMarginRight = this.__bodyMarginRight + scrollbarWidth;
810
807
  const newMarginBottom = this.__bodyMarginBottom + scrollbarHeight;
811
- if (supportsCSSTypedObject) {
808
+ // @ts-expect-error [external]: CSS not yet typed
809
+ if (window.CSS?.number && document.body.attributeStyleMap?.set) {
812
810
  // @ts-expect-error [external]: types attributeStyleMap + CSS.px not available yet
813
811
  document.body.attributeStyleMap.set('margin-right', CSS.px(newMarginRight));
814
812
  // @ts-expect-error [external]: types attributeStyleMap + CSS.px not available yet
@@ -150,7 +150,7 @@ export class LionProgressIndicator extends LocalizeMixin(LitElement) {
150
150
  }
151
151
  } else {
152
152
  if (changedProperties.has('value')) {
153
- if (!this.value || typeof this.value !== 'number') {
153
+ if ((!this.value && this.value !== 0) || typeof this.value !== 'number') {
154
154
  this.removeAttribute('value');
155
155
  } else if (this.value < this.min) {
156
156
  this.value = this.min;
@@ -149,7 +149,9 @@ describe('lion-progress-indicator', () => {
149
149
  const el = await fixture(
150
150
  html`<lion-progress-indicator value="30"></lion-progress-indicator> `,
151
151
  );
152
- el.setAttribute('value', '');
152
+ // when the attribute is defined, lit set the property to Number(attributeValue)
153
+ // this means, setting the value to an empty string will be valid because Number('') is 0
154
+ el.setAttribute('value', 'invalid-value');
153
155
  await el.updateComplete;
154
156
  expect(el.indeterminate).to.be.true;
155
157
  await el.updateComplete;
@@ -158,6 +160,21 @@ describe('lion-progress-indicator', () => {
158
160
  expect(el.hasAttribute('aria-valuemax')).to.be.false;
159
161
  expect(el.getAttribute('aria-label')).to.equal('Loading');
160
162
  });
163
+
164
+ it('can update value to 0', async () => {
165
+ const el = await fixture(
166
+ html`<lion-progress-indicator value="0"></lion-progress-indicator> `,
167
+ );
168
+ await el.updateComplete;
169
+ expect(el.indeterminate).to.be.false;
170
+ });
171
+
172
+ // empty string will be converted to 0 by lit because value is declared as number
173
+ it('can update value to 0 if the set value is empty string', async () => {
174
+ const el = await fixture(html`<lion-progress-indicator value=""></lion-progress-indicator> `);
175
+ await el.updateComplete;
176
+ expect(el.indeterminate).to.be.false;
177
+ });
161
178
  });
162
179
 
163
180
  describe('Subclasers', () => {
package/core.js ADDED
@@ -0,0 +1,7 @@
1
+ export { DisabledMixin } from './components/core/src/DisabledMixin.js';
2
+ export { DisabledWithTabIndexMixin } from './components/core/src/DisabledWithTabIndexMixin.js';
3
+ export { ScopedStylesController } from './components/core/src/ScopedStylesController.js';
4
+ export { SlotMixin } from './components/core/src/SlotMixin.js';
5
+ export { browserDetection } from './components/core/src/browserDetection.js';
6
+ export { EventTargetShim } from './components/core/src/EventTargetShim.js';
7
+ export { uuid } from './components/core/src/uuid.js';