diff --git a/.changeset/gorgeous-masks-knock.md b/.changeset/gorgeous-masks-knock.md
deleted file mode 100644
index bbc29ae14..000000000
--- a/.changeset/gorgeous-masks-knock.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@lion/input-tel': patch
----
-
-fix: expose awesome-phonenumber-lib in npm package
diff --git a/packages/input-tel-dropdown/CHANGELOG.md b/packages/input-tel-dropdown/CHANGELOG.md
index ef8ac65c3..13cd1cee1 100644
--- a/packages/input-tel-dropdown/CHANGELOG.md
+++ b/packages/input-tel-dropdown/CHANGELOG.md
@@ -1,62 +1,70 @@
# @lion/input-tel-dropdown
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [55a900b7]
+ - @lion/input-tel@0.1.1
+
## 0.1.0
+
### Minor Changes
- 32b322c3: New component LionInpuTelDropdown
- aa8b8916: BREAKING CHANGE: Work without polyfill if possible
-
+
When using [component composition](https://lit.dev/docs/composition/component-composition/) in a Lion Component we always made it very explicit which sub-components are used.
On top of that we scoped these [sub components](https://open-wc.org/docs/development/scoped-elements/) to the [current shadow root](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Scoped-Custom-Element-Registries.md) allowing multiple version to be used simultaneously.
-
+
To enable this features we relied on the fact that the `ScopedElementsMixin` did loaded the needed polyfill for us.
-
+
We however over time got feedback from multiple consumers that lion components "break the app as soon as you load them".
The reasons is/was that not everyone is always using `ScopedElementsMixin` or in full control of the app (or its load order).
-
+
To quote the release notes of `ScopedElementsMixin` v2.1.0:
-
+
> ScopedElementsMixin 2.x tried to be as convenient as possible by automatically loading the scoped custom elements registry polyfill.
> This however led to a fatal error whenever you registered any component before ScopedElementsMixin was used.
-
+
And this was the case.
-
+
With the upgrade to `@open-wc/scoped-elements` v2.1.1 Lion now no longer automatically loads the polyfill through `ScopedElementsMixin`.
-
+
This essentially means the polyfill became optional which results in the following behavior
-
+
1. If polyfill is not loaded it will use the global registry as a fallback
2. Log error if actually scoping is needed and polyfill is not loaded
3. If you manually create elements you will need to handle polyfilled and not polyfilled cases now
-
+
```diff
- const myButton = this.shadowRoot.createElement('my-button');
+ const myButton = this.createScopedElement('my-button');
```
-
+
This also removes `@webcomponents/scoped-custom-element-registry` as a production dependency.
-
+
If you need scoping be sure to load the polyfill before any other web component gets registered.
-
+
It may look something like this in your HTML
-
+
```html
```
-
+
or if you have an SPA you can load it at the top of your app shell code
-
+
```js
import '@webcomponents/scoped-custom-element-registry';
```
-
+
You need scoping if you want to
-
+
use 2 major versions of a web component (e.g. in an SPA pageA uses 1.x and pageB uses 2.x of color-picker)
or you want to use the same tag name with different implementations (use tag color-picker from foo here and from bar here)
-
+
See more details at
-
+
- [Lion release blog post](https://lion-web.netlify.app/blog/lion-without-polyfills/)
- [@open-wc/scoped-elements release blog post](https://open-wc.org/blog/scoped-elements-without-polyfill/)
- [Change log of ScopedElementsMixin](https://github.com/open-wc/open-wc/blob/master/packages/scoped-elements/CHANGELOG.md#210)
diff --git a/packages/input-tel-dropdown/package.json b/packages/input-tel-dropdown/package.json
index 9ecb17e7e..3c4497c70 100644
--- a/packages/input-tel-dropdown/package.json
+++ b/packages/input-tel-dropdown/package.json
@@ -1,6 +1,6 @@
{
"name": "@lion/input-tel-dropdown",
- "version": "0.1.0",
+ "version": "0.1.1",
"description": "Input field for entering phone numbers with the help of a dropdown region list",
"license": "MIT",
"author": "ing-bank",
@@ -35,7 +35,7 @@
],
"dependencies": {
"@lion/core": "0.22.0",
- "@lion/input-tel": "0.1.0",
+ "@lion/input-tel": "0.1.1",
"@lion/localize": "0.24.0"
},
"keywords": [
diff --git a/packages/input-tel/CHANGELOG.md b/packages/input-tel/CHANGELOG.md
index 8ce8ba5dd..76c5862fe 100644
--- a/packages/input-tel/CHANGELOG.md
+++ b/packages/input-tel/CHANGELOG.md
@@ -1,62 +1,69 @@
# @lion/input-tel
+## 0.1.1
+
+### Patch Changes
+
+- 55a900b7: fix: expose awesome-phonenumber-lib in npm package
+
## 0.1.0
+
### Minor Changes
- a882c94f: New component "LionInputTel"
- aa8b8916: BREAKING CHANGE: Work without polyfill if possible
-
+
When using [component composition](https://lit.dev/docs/composition/component-composition/) in a Lion Component we always made it very explicit which sub-components are used.
On top of that we scoped these [sub components](https://open-wc.org/docs/development/scoped-elements/) to the [current shadow root](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Scoped-Custom-Element-Registries.md) allowing multiple version to be used simultaneously.
-
+
To enable this features we relied on the fact that the `ScopedElementsMixin` did loaded the needed polyfill for us.
-
+
We however over time got feedback from multiple consumers that lion components "break the app as soon as you load them".
The reasons is/was that not everyone is always using `ScopedElementsMixin` or in full control of the app (or its load order).
-
+
To quote the release notes of `ScopedElementsMixin` v2.1.0:
-
+
> ScopedElementsMixin 2.x tried to be as convenient as possible by automatically loading the scoped custom elements registry polyfill.
> This however led to a fatal error whenever you registered any component before ScopedElementsMixin was used.
-
+
And this was the case.
-
+
With the upgrade to `@open-wc/scoped-elements` v2.1.1 Lion now no longer automatically loads the polyfill through `ScopedElementsMixin`.
-
+
This essentially means the polyfill became optional which results in the following behavior
-
+
1. If polyfill is not loaded it will use the global registry as a fallback
2. Log error if actually scoping is needed and polyfill is not loaded
3. If you manually create elements you will need to handle polyfilled and not polyfilled cases now
-
+
```diff
- const myButton = this.shadowRoot.createElement('my-button');
+ const myButton = this.createScopedElement('my-button');
```
-
+
This also removes `@webcomponents/scoped-custom-element-registry` as a production dependency.
-
+
If you need scoping be sure to load the polyfill before any other web component gets registered.
-
+
It may look something like this in your HTML
-
+
```html
```
-
+
or if you have an SPA you can load it at the top of your app shell code
-
+
```js
import '@webcomponents/scoped-custom-element-registry';
```
-
+
You need scoping if you want to
-
+
use 2 major versions of a web component (e.g. in an SPA pageA uses 1.x and pageB uses 2.x of color-picker)
or you want to use the same tag name with different implementations (use tag color-picker from foo here and from bar here)
-
+
See more details at
-
+
- [Lion release blog post](https://lion-web.netlify.app/blog/lion-without-polyfills/)
- [@open-wc/scoped-elements release blog post](https://open-wc.org/blog/scoped-elements-without-polyfill/)
- [Change log of ScopedElementsMixin](https://github.com/open-wc/open-wc/blob/master/packages/scoped-elements/CHANGELOG.md#210)
diff --git a/packages/input-tel/package.json b/packages/input-tel/package.json
index 14fabe728..602ac22f7 100644
--- a/packages/input-tel/package.json
+++ b/packages/input-tel/package.json
@@ -1,6 +1,6 @@
{
"name": "@lion/input-tel",
- "version": "0.1.0",
+ "version": "0.1.1",
"description": "Input field for entering phone numbers, including validation, formatting and mobile keyboard support.",
"license": "MIT",
"author": "ing-bank",