ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: make broken demos work again

Browse source
This commit is contained in:
Thijs Louisse 2024-08-08 14:04:43 +02:00 committed by Thijs Louisse
parent e6f2e59134
commit 95b7460367
53 changed files with 469 additions and 469 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/components/button/use-cases.md
View file

@ -62,10 +62,10 @@ export const withinForm = () => html`
<input id="firstNameId" name="firstName" /> <input id="firstNameId" name="firstName" />
<label for="lastNameId">Last name</label> <label for="lastNameId">Last name</label>
<input id="lastNameId" name="lastName" /> <input id="lastNameId" name="lastName" />
<lion-button-submit @click=${ev => console.log('click submit handler', ev.target)} <lion-button-submit @click="${ev => console.log('click submit handler', ev.target)}"
>Submit</lion-button-submit >Submit</lion-button-submit
> >
<lion-button-reset @click=${ev => console.log('click reset handler', ev.target)} <lion-button-reset @click="${ev => console.log('click reset handler', ev.target)}"
>Reset</lion-button-reset >Reset</lion-button-reset
> >
</form> </form>

8
docs/components/calendar/use-cases.md
View file

@ -21,7 +21,7 @@ export const selectedDate = () => html`
max-width: 500px; max-width: 500px;
} }
</style> </style>
<lion-calendar class="demo-calendar" .selectedDate=${new Date(1988, 2, 5)}></lion-calendar> <lion-calendar class="demo-calendar" .selectedDate="${new Date(1988, 2, 5)}"></lion-calendar>
`; `;
``` ```
@ -160,7 +160,7 @@ export const disabledDates = () => html`
</style> </style>
<lion-calendar <lion-calendar
class="demo-calendar" class="demo-calendar"
.disableDates=${day => day.getDay() === 6 || day.getDay() === 0} .disableDates="${day => day.getDay() === 6 || day.getDay() === 0}"
></lion-calendar> ></lion-calendar>
`; `;
``` ```
@ -183,7 +183,7 @@ export const combinedDisabledDates = () => {
</style> </style>
<lion-calendar <lion-calendar
class="demo-calendar" class="demo-calendar"
.disableDates=${day => day.getDay() === 6 || day.getDay() === 0} .disableDates="${day => day.getDay() === 6 || day.getDay() === 0}"
.minDate="${new Date()}" .minDate="${new Date()}"
.maxDate="${maxDate}" .maxDate="${maxDate}"
></lion-calendar> ></lion-calendar>
@ -215,7 +215,7 @@ export const findingEnabledDates = () => {
</style> </style>
<lion-calendar <lion-calendar
class="demo-calendar js-calendar" class="demo-calendar js-calendar"
.disableDates=${day => day.getDay() === 6 || day.getDay() === 0} .disableDates="${day => day.getDay() === 6 || day.getDay() === 0}"
></lion-calendar> ></lion-calendar>
<button @click="${ev => getCalendar(ev).focusDate(getCalendar(ev).findNextEnabledDate())}"> <button @click="${ev => getCalendar(ev).focusDate(getCalendar(ev).findNextEnabledDate())}">
focus findNextEnabledDate focus findNextEnabledDate

6
docs/components/checkbox-group/overview.md
View file

@ -13,9 +13,9 @@ import '@lion/ui/define/lion-checkbox.js';
```html preview-story ```html preview-story
<lion-checkbox-group name="scientists[]" label="Favorite scientists"> <lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox> <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox> <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox> <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</lion-checkbox-group> </lion-checkbox-group>
``` ```

66
docs/components/checkbox-group/use-cases.md
View file

@ -35,9 +35,9 @@ Our recommendation would be to set the `name` attribute only on the `lion-checkb
name="scientists[]" name="scientists[]"
label="Favorite scientists" label="Favorite scientists"
> >
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox> <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox> <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox> <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</lion-checkbox-group> </lion-checkbox-group>
``` ```
@ -47,9 +47,9 @@ You can pre-select options by targeting the `modelValue` object of the option an
```html preview-story ```html preview-story
<lion-checkbox-group name="scientists" label="Favorite scientists"> <lion-checkbox-group name="scientists" label="Favorite scientists">
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox> <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'} checked></lion-checkbox> <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}" checked></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox> <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</lion-checkbox-group> </lion-checkbox-group>
``` ```
@ -59,9 +59,9 @@ You can disable the entire group by setting the `disabled` attribute on the `<li
```html preview-story ```html preview-story
<lion-checkbox-group name="scientists[]" label="Favorite scientists" disabled> <lion-checkbox-group name="scientists[]" label="Favorite scientists" disabled>
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox> <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox> <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox> <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</lion-checkbox-group> </lion-checkbox-group>
``` ```
@ -71,17 +71,17 @@ You can use `slot="label"` instead of the `label` attribute for defining more co
```html preview-story ```html preview-story
<lion-checkbox-group name="scientists[]" label="Favorite scientists"> <lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox .choiceValue=${'Archimedes'}> <lion-checkbox .choiceValue="${'Archimedes'}">
<label slot="label" <label slot="label"
><a href="https://wikipedia.org/wiki/Archimedes" target="_blank">Archimedes</a></label ><a href="https://wikipedia.org/wiki/Archimedes" target="_blank">Archimedes</a></label
> >
</lion-checkbox> </lion-checkbox>
<lion-checkbox .choiceValue=${'Francis Bacon'}> <lion-checkbox .choiceValue="${'Francis Bacon'}">
<label slot="label" <label slot="label"
><a href="https://wikipedia.org/wiki/Francis_Bacon" target="_blank">Francis Bacon</a></label ><a href="https://wikipedia.org/wiki/Francis_Bacon" target="_blank">Francis Bacon</a></label
> >
</lion-checkbox> </lion-checkbox>
<lion-checkbox .choiceValue=${'Marie Curie'}> <lion-checkbox .choiceValue="${'Marie Curie'}">
<label slot="label" <label slot="label"
><a href="https://wikipedia.org/wiki/Marie_Curie" target="_blank">Marie Curie</a></label ><a href="https://wikipedia.org/wiki/Marie_Curie" target="_blank">Marie Curie</a></label
> >
@ -97,17 +97,17 @@ You can add help text on each checkbox with `help-text` attribute on the `<lion-
<lion-checkbox-group name="scientists[]" label="Favorite scientists"> <lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox <lion-checkbox
label="Archimedes" label="Archimedes"
.choiceValue=${'Archimedes'} .choiceValue="${'Archimedes'}"
help-text="Archimedes of Syracuse was a Greek mathematician, physicist, engineer, inventor, and astronomer" help-text="Archimedes of Syracuse was a Greek mathematician, physicist, engineer, inventor, and astronomer"
></lion-checkbox> ></lion-checkbox>
<lion-checkbox <lion-checkbox
label="Francis Bacon" label="Francis Bacon"
.choiceValue=${'Francis Bacon'} .choiceValue="${'Francis Bacon'}"
help-text="Francis Bacon, 1st Viscount St Alban also known as Lord Verulam, was an English philosopher and statesman who served as Attorney General and as Lord Chancellor of England" help-text="Francis Bacon, 1st Viscount St Alban also known as Lord Verulam, was an English philosopher and statesman who served as Attorney General and as Lord Chancellor of England"
></lion-checkbox> ></lion-checkbox>
<lion-checkbox <lion-checkbox
label="Marie Curie" label="Marie Curie"
.choiceValue=${'Marie Curie'} .choiceValue="${'Marie Curie'}"
help-text="Marie Skłodowska Curie born Maria Salomea Skłodowska, was a Polish and naturalized-French physicist and chemist who conducted pioneering research on radioactivity" help-text="Marie Skłodowska Curie born Maria Salomea Skłodowska, was a Polish and naturalized-French physicist and chemist who conducted pioneering research on radioactivity"
></lion-checkbox> ></lion-checkbox>
</lion-checkbox-group> </lion-checkbox-group>
@ -129,9 +129,9 @@ export const event = ({ shadowRoot }) => html`
4, 4,
))} ))}
> >
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox> <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox> <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox> <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</lion-checkbox-group> </lion-checkbox-group>
<br /> <br />
<span>Selected scientists: <strong id="selectedDinosaur">N/A</strong></span> <span>Selected scientists: <strong id="selectedDinosaur">N/A</strong></span>
@ -147,22 +147,22 @@ A `checkbox-indeterminate`'s value is neither true nor false, but is instead ind
<lion-checkbox-indeterminate label="Old Greek scientists"> <lion-checkbox-indeterminate label="Old Greek scientists">
<lion-checkbox <lion-checkbox
label="Archimedes" label="Archimedes"
.choiceValue=${'Archimedes'} .choiceValue="${'Archimedes'}"
></lion-checkbox> ></lion-checkbox>
<lion-checkbox label="Plato" .choiceValue=${'Plato'}></lion-checkbox> <lion-checkbox label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
<lion-checkbox <lion-checkbox
label="Pythagoras" label="Pythagoras"
.choiceValue=${'Pythagoras'} .choiceValue="${'Pythagoras'}"
></lion-checkbox> ></lion-checkbox>
</lion-checkbox-indeterminate> </lion-checkbox-indeterminate>
<lion-checkbox-indeterminate label="17th Century scientists"> <lion-checkbox-indeterminate label="17th Century scientists">
<lion-checkbox <lion-checkbox
label="Isaac Newton" label="Isaac Newton"
.choiceValue=${'Isaac Newton'} .choiceValue="${'Isaac Newton'}"
></lion-checkbox> ></lion-checkbox>
<lion-checkbox <lion-checkbox
label="Galileo Galilei" label="Galileo Galilei"
.choiceValue=${'Galileo Galilei'} .choiceValue="${'Galileo Galilei'}"
></lion-checkbox> ></lion-checkbox>
</lion-checkbox-indeterminate> </lion-checkbox-indeterminate>
</lion-checkbox-group> </lion-checkbox-group>
@ -175,21 +175,21 @@ The `checkbox-indeterminate` can have another `checkbox-indeterminate` as a chil
<lion-checkbox-indeterminate label="Scientists"> <lion-checkbox-indeterminate label="Scientists">
<lion-checkbox <lion-checkbox
label="Isaac Newton" label="Isaac Newton"
.choiceValue=${'Isaac Newton'} .choiceValue="${'Isaac Newton'}"
></lion-checkbox> ></lion-checkbox>
<lion-checkbox <lion-checkbox
label="Galileo Galilei" label="Galileo Galilei"
.choiceValue=${'Galileo Galilei'} .choiceValue="${'Galileo Galilei'}"
></lion-checkbox> ></lion-checkbox>
<lion-checkbox-indeterminate label="Old Greek scientists"> <lion-checkbox-indeterminate label="Old Greek scientists">
<lion-checkbox <lion-checkbox
label="Archimedes" label="Archimedes"
.choiceValue=${'Archimedes'} .choiceValue="${'Archimedes'}"
></lion-checkbox> ></lion-checkbox>
<lion-checkbox label="Plato" .choiceValue=${'Plato'}></lion-checkbox> <lion-checkbox label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
<lion-checkbox <lion-checkbox
label="Pythagoras" label="Pythagoras"
.choiceValue=${'Pythagoras'} .choiceValue="${'Pythagoras'}"
></lion-checkbox> ></lion-checkbox>
</lion-checkbox-indeterminate> </lion-checkbox-indeterminate>
</lion-checkbox-indeterminate> </lion-checkbox-indeterminate>
@ -203,21 +203,21 @@ You can also use `mixed-state` attribute so your indeterminate checkbox toggles
<lion-checkbox-indeterminate mixed-state label="Scientists"> <lion-checkbox-indeterminate mixed-state label="Scientists">
<lion-checkbox <lion-checkbox
label="Isaac Newton" label="Isaac Newton"
.choiceValue=${'Isaac Newton'} .choiceValue="${'Isaac Newton'}"
></lion-checkbox> ></lion-checkbox>
<lion-checkbox <lion-checkbox
label="Galileo Galilei" label="Galileo Galilei"
.choiceValue=${'Galileo Galilei'} .choiceValue="${'Galileo Galilei'}"
></lion-checkbox> ></lion-checkbox>
<lion-checkbox-indeterminate mixed-state label="Old Greek scientists"> <lion-checkbox-indeterminate mixed-state label="Old Greek scientists">
<lion-checkbox <lion-checkbox
label="Archimedes" label="Archimedes"
.choiceValue=${'Archimedes'} .choiceValue="${'Archimedes'}"
></lion-checkbox> ></lion-checkbox>
<lion-checkbox label="Plato" .choiceValue=${'Plato'}></lion-checkbox> <lion-checkbox label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
<lion-checkbox <lion-checkbox
label="Pythagoras" label="Pythagoras"
.choiceValue=${'Pythagoras'} .choiceValue="${'Pythagoras'}"
></lion-checkbox> ></lion-checkbox>
</lion-checkbox-indeterminate> </lion-checkbox-indeterminate>
</lion-checkbox-indeterminate> </lion-checkbox-indeterminate>

6
docs/components/collapsible/use-cases.md
View file

@ -39,13 +39,13 @@ export const methods = ({ shadowRoot }) => html`
</div> </div>
</lion-collapsible> </lion-collapsible>
<section style="margin-top:16px"> <section style="margin-top:16px">
<button @click=${() => shadowRoot.querySelector('#car-collapsible').toggle()}> <button @click="${() => shadowRoot.querySelector('#car-collapsible').toggle()}">
Toggle content Toggle content
</button> </button>
<button @click=${() => shadowRoot.querySelector('#car-collapsible').show()}> <button @click="${() => shadowRoot.querySelector('#car-collapsible').show()}">
Show content Show content
</button> </button>
<button @click=${() => shadowRoot.querySelector('#car-collapsible').hide()}> <button @click="${() => shadowRoot.querySelector('#car-collapsible').hide()}">
Hide content Hide content
</button> </button>
</section> </section>

40
docs/components/combobox/extensions.md
View file

@ -20,11 +20,11 @@ easily from an extended Lion component, just by:
```js preview-story ```js preview-story
export const MaterialDesign = () => html` export const MaterialDesign = () => html`
<md-combobox name="combo" label="Default"> <md-combobox name="combo" label="Default">
<md-option .choiceValue=${'Apple'}>Apple</md-option> <md-option .choiceValue="${'Apple'}">Apple</md-option>
<md-option .choiceValue=${'Artichoke'}>Artichoke</md-option> <md-option .choiceValue="${'Artichoke'}">Artichoke</md-option>
<md-option .choiceValue=${'Asparagus'}>Asparagus</md-option> <md-option .choiceValue="${'Asparagus'}">Asparagus</md-option>
<md-option .choiceValue=${'Banana'}>Banana</md-option> <md-option .choiceValue="${'Banana'}">Banana</md-option>
<md-option .choiceValue=${'Beets'}>Beets</md-option> <md-option .choiceValue="${'Beets'}">Beets</md-option>
</md-combobox> </md-combobox>
`; `;
``` ```
@ -34,11 +34,11 @@ export const MaterialDesign = () => html`
```js preview-story ```js preview-story
export const Github = () => html` export const Github = () => html`
<gh-combobox name="combo" label="Switch branches/tags"> <gh-combobox name="combo" label="Switch branches/tags">
<gh-option href="https://www.github.com" .choiceValue=${'master'} default>master</gh-option> <gh-option href="https://www.github.com" .choiceValue="${'master'}" default>master</gh-option>
<gh-option .choiceValue=${'develop'}>develop</gh-option> <gh-option .choiceValue="${'develop'}">develop</gh-option>
<gh-option .choiceValue=${'release'}>release</gh-option> <gh-option .choiceValue="${'release'}">release</gh-option>
<gh-option .choiceValue=${'feat/abc'}>feat/abc</gh-option> <gh-option .choiceValue="${'feat/abc'}">feat/abc</gh-option>
<gh-option .choiceValue=${'feat/xyz123'}>feat/xyz123</gh-option> <gh-option .choiceValue="${'feat/xyz123'}">feat/xyz123</gh-option>
</gh-combobox> </gh-combobox>
`; `;
``` ```
@ -62,7 +62,7 @@ export const Whatsapp = () => {
is-user-text is-user-text
is-user-text-read is-user-text-read
image="${obamaImgUrl}" image="${obamaImgUrl}"
.choiceValue=${'Barack Obama'} .choiceValue="${'Barack Obama'}"
></wa-option> ></wa-option>
<wa-option <wa-option
title="Donald Trump" title="Donald Trump"
@ -70,28 +70,28 @@ export const Whatsapp = () => {
time="14:59" time="14:59"
is-user-text is-user-text
image="${trumpImgUrl}" image="${trumpImgUrl}"
.choiceValue=${'Donald Trump'} .choiceValue="${'Donald Trump'}"
></wa-option> ></wa-option>
<wa-option <wa-option
title="Joe Biden" title="Joe Biden"
text="Hehe😅. You too, man, you too..." text="Hehe😅. You too, man, you too..."
time="yesterday" time="yesterday"
image="${bidenImgUrl}" image="${bidenImgUrl}"
.choiceValue=${'Joe Biden'} .choiceValue="${'Joe Biden'}"
></wa-option> ></wa-option>
<wa-option <wa-option
title="George W. Bush" title="George W. Bush"
time="friday" time="friday"
text="You bet I will. Let's catch up soon!" text="You bet I will. Let's catch up soon!"
image="${bushImgUrl}" image="${bushImgUrl}"
.choiceValue=${'George W. Bush'} .choiceValue="${'George W. Bush'}"
></wa-option> ></wa-option>
<wa-option <wa-option
title="Bill Clinton" title="Bill Clinton"
time="thursday" time="thursday"
text="Dude...😂 😂 😂" text="Dude...😂 😂 😂"
image="${clintonImgUrl}" image="${clintonImgUrl}"
.choiceValue=${'Bill Clinton'} .choiceValue="${'Bill Clinton'}"
></wa-option> ></wa-option>
</wa-combobox> </wa-combobox>
`; `;
@ -114,35 +114,35 @@ export const GoogleSearch = () => {
href="https://www.google.com/search?query=apple" href="https://www.google.com/search?query=apple"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
.choiceValue=${'Apple'} .choiceValue="${'Apple'}"
>Apple</google-option >Apple</google-option
> >
<google-option <google-option
href="https://www.google.com/search?query=Artichoke" href="https://www.google.com/search?query=Artichoke"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
.choiceValue=${'Artichoke'} .choiceValue="${'Artichoke'}"
>Artichoke</google-option >Artichoke</google-option
> >
<google-option <google-option
href="https://www.google.com/search?query=Asparagus" href="https://www.google.com/search?query=Asparagus"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
.choiceValue=${'Asparagus'} .choiceValue="${'Asparagus'}"
>Asparagus</google-option >Asparagus</google-option
> >
<google-option <google-option
href="https://www.google.com/search?query=Banana" href="https://www.google.com/search?query=Banana"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
.choiceValue=${'Banana'} .choiceValue="${'Banana'}"
>Banana</google-option >Banana</google-option
> >
<google-option <google-option
href="https://www.google.com/search?query=Beets" href="https://www.google.com/search?query=Beets"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
.choiceValue=${'Beets'} .choiceValue="${'Beets'}"
>Beets</google-option >Beets</google-option
> >
</google-combobox> </google-combobox>

10
docs/components/combobox/use-cases.md
View file

@ -34,7 +34,7 @@ When `requireOptionMatch` is set to false the textbox is leading, with the listb
```js preview-story ```js preview-story
export const optionMatch = () => html` export const optionMatch = () => html`
<lion-combobox name="search" label="Search" .requireOptionMatch=${false}> <lion-combobox name="search" label="Search" .requireOptionMatch="${false}">
${lazyRender( ${lazyRender(
listboxData.map(entry => html` <lion-option .choiceValue="${entry}">${entry}</lion-option> `), listboxData.map(entry => html` <lion-option .choiceValue="${entry}">${entry}</lion-option> `),
)} )}
@ -243,7 +243,7 @@ export const multipleChoice = () => html`
${lazyRender( ${lazyRender(
listboxData.map( listboxData.map(
(entry, i) => html` (entry, i) => html`
<lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option> <lion-option .choiceValue="${entry}" ?checked="${i === 0}>${entry}"</lion-option>
`, `,
), ),
)} )}
@ -258,7 +258,7 @@ Alternatively, the multi-choice flag can be combined with .requireMultipleMatch=
```js preview-story ```js preview-story
export const multipleCustomizableChoice = () => html` export const multipleCustomizableChoice = () => html`
<lion-combobox name="combo" label="Multiple" .requireOptionMatch=${false} multiple-choice> <lion-combobox name="combo" label="Multiple" .requireOptionMatch="${false}" multiple-choice>
<demo-selection-display <demo-selection-display
slot="selection-display" slot="selection-display"
style="display: contents;" style="display: contents;"
@ -266,7 +266,7 @@ export const multipleCustomizableChoice = () => html`
${lazyRender( ${lazyRender(
listboxData.map( listboxData.map(
(entry, i) => html` (entry, i) => html`
<lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option> <lion-option .choiceValue="${entry}" ?checked="${i === 0}>${entry}"</lion-option>
`, `,
), ),
)} )}
@ -282,7 +282,7 @@ By default the a check is made which makes sure the value matches an option. Thi
```js preview-story ```js preview-story
export const validation = () => html` export const validation = () => html`
<lion-combobox name="combo" label="Validation" .validators=${[new Required()]}> <lion-combobox name="combo" label="Validation" .validators="${[new Required()]}">
${lazyRender( ${lazyRender(
listboxData.map(entry => html` <lion-option .choiceValue="${entry}">${entry}</lion-option> `), listboxData.map(entry => html` <lion-option .choiceValue="${entry}">${entry}</lion-option> `),
)} )}

2
docs/components/dialog/overview.md
View file

@ -21,7 +21,7 @@ export const main = () => html`
Hello! You can close this dialog here: Hello! You can close this dialog here:
<button <button
class="demo-dialog-content__close-button" class="demo-dialog-content__close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>

2
docs/components/dialog/src/slots-dialog-content.js
View file

@ -24,7 +24,7 @@ class SlotsDialogContent extends LitElement {
<div class="actions"> <div class="actions">
<slot name="actions"></slot> <slot name="actions"></slot>
</div> </div>
<button class="close-button" @click=${this._closeOverlay}>⨯</button> <button class="close-button" @click="${this._closeOverlay}">⨯</button>
`; `;
} }
} }

2
docs/components/dialog/src/styled-dialog-content.js
View file

@ -30,7 +30,7 @@ class StyledDialogContent extends LitElement {
<div> <div>
<p>Look how nice this <span class="nice">dialog</span> looks!</p> <p>Look how nice this <span class="nice">dialog</span> looks!</p>
</div> </div>
<button class="close-button" @click=${this._closeOverlay}>⨯</button> <button class="close-button" @click="${this._closeOverlay}">⨯</button>
`; `;
} }
} }

6
docs/components/dialog/use-cases.md
View file

@ -16,7 +16,7 @@ import './src/slots-dialog-content.js';
<lion-dialog> <lion-dialog>
<div slot="content"> <div slot="content">
This is a dialog This is a dialog
<button @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}>x</button> <button @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}">x</button>
<div> <div>
<button slot="invoker">Click me</button> <button slot="invoker">Click me</button>
</lion-dialog> </lion-dialog>
@ -35,7 +35,7 @@ export const placementOverrides = () => {
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
class="close-button" class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -88,7 +88,7 @@ export const otherOverrides = () => {
Hello! You can close this dialog here: Hello! You can close this dialog here:
<button <button
class="demo-dialog-content__close-button" class="demo-dialog-content__close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>

6
docs/components/drawer/use-cases.md
View file

@ -125,9 +125,9 @@ export const methods = ({ shadowRoot }) => html`
${demoStyle} ${demoStyle}
</style> </style>
<section style="margin-top:16px"> <section style="margin-top:16px">
<button @click=${() => shadowRoot.querySelector('#drawer').toggle()}>Toggle content</button> <button @click="${() => shadowRoot.querySelector('#drawer').toggle()}">Toggle content</button>
<button @click=${() => shadowRoot.querySelector('#drawer').show()}>Show content</button> <button @click="${() => shadowRoot.querySelector('#drawer').show()}">Show content</button>
<button @click=${() => shadowRoot.querySelector('#drawer').hide()}>Hide content</button> <button @click="${() => shadowRoot.querySelector('#drawer').hide()}">Hide content</button>
</section> </section>
<div class="demo-container"> <div class="demo-container">

4
docs/components/fieldset/overview.md
View file

@ -12,8 +12,8 @@ A web component that can be used to group multiple input fields or other fieldse
```js preview-story ```js preview-story
export const main = () => html` export const main = () => html`
<lion-fieldset name="nameGroup" label="Name"> <lion-fieldset name="nameGroup" label="Name">
<lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input> <lion-input name="firstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
<lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input> <lion-input name="lastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
</lion-fieldset> </lion-fieldset>
`; `;
``` ```

30
docs/components/fieldset/use-cases.md
View file

@ -16,9 +16,9 @@ The fieldset's modelValue is an `Object` containing properties where the key is
```js preview-story ```js preview-story
export const data = () => html` export const data = () => html`
<lion-fieldset name="nameGroup" label="Name"> <lion-fieldset name="nameGroup" label="Name">
<lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input> <lion-input name="firstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
<lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input> <lion-input name="lastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
<button @click=${ev => console.log(ev.target.parentElement.modelValue)}> <button @click="${ev => console.log(ev.target.parentElement.modelValue)}">
Log to Action Logger Log to Action Logger
</button> </button>
</lion-fieldset> </lion-fieldset>
@ -38,14 +38,14 @@ export const disabled = () => {
} }
return html` return html`
<lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled> <lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled>
<lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input> <lion-input name="FirstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
<lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input> <lion-input name="LastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
<lion-fieldset name="nameGroup2" label="Name"> <lion-fieldset name="nameGroup2" label="Name">
<lion-input name="FirstName2" label="First Name" .modelValue=${'Foo'} disabled></lion-input> <lion-input name="FirstName2" label="First Name" .modelValue="${'Foo'}" disabled></lion-input>
<lion-input name="LastName2" label="Last Name" .modelValue=${'Bar'}></lion-input> <lion-input name="LastName2" label="Last Name" .modelValue="${'Bar'}"></lion-input>
</lion-fieldset> </lion-fieldset>
</lion-fieldset> </lion-fieldset>
<button @click=${toggleDisabled}>Toggle disabled</button> <button @click="${toggleDisabled}">Toggle disabled</button>
`; `;
}; };
``` ```
@ -59,18 +59,18 @@ export const nestingFieldsets = () => html`
<lion-fieldset> <lion-fieldset>
<div slot="label">Personal data</div> <div slot="label">Personal data</div>
<lion-fieldset name="nameGroup" label="Name"> <lion-fieldset name="nameGroup" label="Name">
<lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input> <lion-input name="FirstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
<lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input> <lion-input name="LastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
</lion-fieldset> </lion-fieldset>
<lion-fieldset name="location" label="Location"> <lion-fieldset name="location" label="Location">
<lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input> <lion-input name="country" label="Country" .modelValue="${'Netherlands'}"></lion-input>
</lion-fieldset> </lion-fieldset>
<lion-input name="age" label="Age" .modelValue=${21}></lion-input> <lion-input name="age" label="Age" .modelValue="${21}"></lion-input>
<button @click=${ev => console.log(ev.target.parentElement.modelValue)}> <button @click="${ev => console.log(ev.target.parentElement.modelValue)}">
Log everything to Action Logger Log everything to Action Logger
</button> </button>
<br /> <br />
<button @click=${ev => console.log(ev.target.parentElement.formElements.nameGroup.modelValue)}> <button @click="${ev => console.log(ev.target.parentElement.formElements.nameGroup.modelValue)}">
Log only Name fieldset to Action Logger Log only Name fieldset to Action Logger
</button> </button>
</lion-fieldset> </lion-fieldset>
@ -168,7 +168,7 @@ export const validatingMultipleFieldsets = () => {
} }
}; };
return html` return html`
<lion-fieldset name="outer" .validators=${[new IsCatsDogs()]}> <lion-fieldset name="outer" .validators="${[new IsCatsDogs()]}">
<lion-fieldset name="inner1"> <lion-fieldset name="inner1">
<label slot="label">Fieldset no. 1</label> <label slot="label">Fieldset no. 1</label>
<lion-input label="Write 'cats' here" name="input1"> </lion-input> <lion-input label="Write 'cats' here" name="input1"> </lion-input>

8
docs/components/form/overview.md
View file

@ -21,10 +21,10 @@ export const main = () => {
}); });
}; };
return html` return html`
<lion-form @submit=${submitHandler}> <lion-form @submit="${submitHandler}">
<form @submit=${ev => ev.preventDefault()}> <form @submit="${ev => ev.preventDefault()}">
<lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input> <lion-input name="firstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
<lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input> <lion-input name="lastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
<button>Submit</button> <button>Submit</button>
</form> </form>
</lion-form> </lion-form>

8
docs/components/form/use-cases.md
View file

@ -39,8 +39,8 @@ export const formSubmit = () => {
ev.target.previousElementSibling.submit(); ev.target.previousElementSibling.submit();
}; };
return html` return html`
<lion-form @submit=${submitHandler}> <lion-form @submit="${submitHandler}">
<form @submit=${ev => ev.preventDefault()}> <form @submit="${ev => ev.preventDefault()}">
<lion-input <lion-input
name="firstName" name="firstName"
label="First Name" label="First Name"
@ -55,14 +55,14 @@ export const formSubmit = () => {
<button>Submit</button> <button>Submit</button>
<button <button
type="button" type="button"
@click=${ev => ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()} @click="${ev => ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}"
> >
Reset Reset
</button> </button>
</div> </div>
</form> </form>
</lion-form> </lion-form>
<button @click=${submitViaJS}>Explicit submit via JavaScript</button> <button @click="${submitViaJS}">Explicit submit via JavaScript</button>
`; `;
}; };
``` ```

16
docs/components/input-amount/use-cases.md
View file

@ -16,7 +16,7 @@ It will accept negative numbers with a minus symbol.
```js preview-story ```js preview-story
export const negativeNumber = () => html` export const negativeNumber = () => html`
<lion-input-amount label="Amount" .modelValue=${-123456.78}></lion-input-amount> <lion-input-amount label="Amount" .modelValue="${-123456.78}"></lion-input-amount>
`; `;
``` ```
@ -26,7 +26,7 @@ You can optionally set a currency label with the `currency` attribute, which is
```js preview-story ```js preview-story
export const currencySuffix = () => html` export const currencySuffix = () => html`
<lion-input-amount label="Price" currency="USD" .modelValue=${123456.78}></lion-input-amount> <lion-input-amount label="Price" currency="USD" .modelValue="${123456.78}"></lion-input-amount>
`; `;
``` ```
@ -43,7 +43,7 @@ export const forceLocale = () => {
label="Price" label="Price"
currency="JOD" currency="JOD"
.locale="nl-NL" .locale="nl-NL"
.modelValue=${123456.78} .modelValue="${123456.78}"
></lion-input-amount> ></lion-input-amount>
`; `;
}; };
@ -66,7 +66,7 @@ Separator characters include:
import { preprocessAmount } from '@lion/ui/input-amount.js'; import { preprocessAmount } from '@lion/ui/input-amount.js';
export const forceDigits = () => html` export const forceDigits = () => html`
<lion-input-amount label="Amount" .preprocessor=${preprocessAmount}></lion-input-amount> <lion-input-amount label="Amount" .preprocessor="${preprocessAmount}"></lion-input-amount>
`; `;
``` ```
@ -81,7 +81,7 @@ export const faultyPrefilled = () => html`
<lion-input-amount <lion-input-amount
label="Amount" label="Amount"
help-text="Faulty prefilled input will cause error feedback" help-text="Faulty prefilled input will cause error feedback"
.modelValue=${'foo'} .modelValue="${'foo'}"
></lion-input-amount> ></lion-input-amount>
`; `;
``` ```
@ -96,11 +96,11 @@ export const noDecimals = () => html`
<lion-input-amount <lion-input-amount
label="Amount" label="Amount"
help-text="Prefilled and formatted" help-text="Prefilled and formatted"
.formatOptions=${{ .formatOptions="${({
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 0, maximumFractionDigits: 0,
}} })}"
.modelValue=${20} .modelValue="${20}"
> >
</lion-input-amount> </lion-input-amount>
`; `;

16
docs/components/input-date/use-cases.md
View file

@ -12,7 +12,7 @@ import '@lion/ui/define/lion-input-date.js';
```js preview-story ```js preview-story
export const isADate = () => html` export const isADate = () => html`
<lion-input-date label="IsDate" .modelValue=${new Date('foo')}> </lion-input-date> <lion-input-date label="IsDate" .modelValue="${new Date('foo')}"> </lion-input-date>
`; `;
``` ```
@ -25,8 +25,8 @@ export const withMinimumDate = () => {
<lion-input-date <lion-input-date
label="MinDate" label="MinDate"
help-text="Enter a date greater than or equal to today." help-text="Enter a date greater than or equal to today."
.modelValue=${new Date('2018/05/30')} .modelValue="${new Date('2018/05/30')}"
.validators=${[new MinDate(new Date())]} .validators="${[new MinDate(new Date())]}"
> >
</lion-input-date> </lion-input-date>
`; `;
@ -42,8 +42,8 @@ export const withMaximumDate = () => {
<lion-input-date <lion-input-date
label="MaxDate" label="MaxDate"
help-text="Enter a date smaller than or equal to today." help-text="Enter a date smaller than or equal to today."
.modelValue=${new Date('2100/05/30')} .modelValue="${new Date('2100/05/30')}"
.validators=${[new MaxDate(new Date())]} .validators="${[new MaxDate(new Date())]}"
></lion-input-date> ></lion-input-date>
`; `;
}; };
@ -57,8 +57,8 @@ export const withMinimumAndMaximumDate = () => {
return html` return html`
<lion-input-date <lion-input-date
label="MinMaxDate" label="MinMaxDate"
.modelValue=${new Date('2018/05/30')} .modelValue="${new Date('2018/05/30')}"
.validators=${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]} .validators="${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}"
> >
<div slot="help-text"> <div slot="help-text">
Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate( Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate(
@ -77,7 +77,7 @@ export const faultyPrefilled = () => html`
<lion-input-date <lion-input-date
label="Date" label="Date"
help-text="Faulty prefilled input will be cleared" help-text="Faulty prefilled input will be cleared"
.modelValue=${'foo'} .modelValue="${'foo'}"
></lion-input-date> ></lion-input-date>
`; `;
``` ```

10
docs/components/input-datepicker/use-cases.md
View file

@ -17,8 +17,8 @@ Below are examples of different validators for dates.
export const minimumAndMaximumDate = () => html` export const minimumAndMaximumDate = () => html`
<lion-input-datepicker <lion-input-datepicker
label="MinMaxDate" label="MinMaxDate"
.modelValue=${new Date('2018/05/30')} .modelValue="${new Date('2018/05/30')}"
.validators=${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]} .validators="${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}"
> >
<div slot="help-text"> <div slot="help-text">
Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate( Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate(
@ -36,8 +36,8 @@ export const disableSpecificDates = () => html`
<lion-input-datepicker <lion-input-datepicker
label="IsDateDisabled" label="IsDateDisabled"
help-text="You're not allowed to choose any 15th." help-text="You're not allowed to choose any 15th."
.modelValue=${new Date('2023/06/15')} .modelValue="${new Date('2023/06/15')}"
.validators=${[new IsDateDisabled(d => d.getDate() === 15)]} .validators="${[new IsDateDisabled(d => d.getDate() === 15)]}"
></lion-input-datepicker> ></lion-input-datepicker>
`; `;
``` ```
@ -53,7 +53,7 @@ export const calendarHeading = () => html`
<lion-input-datepicker <lion-input-datepicker
label="Date" label="Date"
.calendarHeading="${'Custom heading'}" .calendarHeading="${'Custom heading'}"
.modelValue=${new Date()} .modelValue="${new Date()}"
></lion-input-datepicker> ></lion-input-datepicker>
`; `;
``` ```

6
docs/components/input-email/use-cases.md
View file

@ -14,7 +14,7 @@ Use `loadDefaultFeedbackMessages` to get our default feedback messages displayed
```js preview-story ```js preview-story
export const faultyPrefilled = () => html` export const faultyPrefilled = () => html`
<lion-input-email .modelValue=${'foo'} label="Email"></lion-input-email> <lion-input-email .modelValue="${'foo'}" label="Email"></lion-input-email>
`; `;
``` ```
@ -39,8 +39,8 @@ export const customValidator = () => {
} }
return html` return html`
<lion-input-email <lion-input-email
.modelValue=${'foo@bar.com'} .modelValue="${'foo@bar.com'}"
.validators=${[new GmailOnly()]} .validators="${[new GmailOnly()]}"
label="Email" label="Email"
></lion-input-email> ></lion-input-email>
`; `;

16
docs/components/input-iban/use-cases.md
View file

@ -11,7 +11,7 @@ import '@lion/ui/define/lion-input-iban.js';
```js preview-story ```js preview-story
export const prefilled = () => html` export const prefilled = () => html`
<lion-input-iban .modelValue=${'NL20INGB0001234567'} name="iban" label="IBAN"></lion-input-iban> <lion-input-iban .modelValue="${'NL20INGB0001234567'}" name="iban" label="IBAN"></lion-input-iban>
`; `;
``` ```
@ -20,7 +20,7 @@ export const prefilled = () => html`
```js preview-story ```js preview-story
export const faultyPrefilled = () => html` export const faultyPrefilled = () => html`
<lion-input-iban <lion-input-iban
.modelValue=${'NL20INGB0001234567XXXX'} .modelValue="${'NL20INGB0001234567XXXX'}"
name="iban" name="iban"
label="IBAN" label="IBAN"
></lion-input-iban> ></lion-input-iban>
@ -39,8 +39,8 @@ export const countryRestrictions = () => {
loadDefaultFeedbackMessages(); loadDefaultFeedbackMessages();
return html` return html`
<lion-input-iban <lion-input-iban
.modelValue=${'DE89370400440532013000'} .modelValue="${'DE89370400440532013000'}"
.validators=${[new IsCountryIBAN('NL')]} .validators="${[new IsCountryIBAN('NL')]}"
name="iban" name="iban"
label="IBAN" label="IBAN"
></lion-input-iban> ></lion-input-iban>
@ -58,8 +58,8 @@ export const countryRestrictionsMultiple = () => {
loadDefaultFeedbackMessages(); loadDefaultFeedbackMessages();
return html` return html`
<lion-input-iban <lion-input-iban
.modelValue=${'DE89370400440532013000'} .modelValue="${'DE89370400440532013000'}"
.validators=${[new IsCountryIBAN(['BE', 'NL', 'LU'])]} .validators="${[new IsCountryIBAN(['BE', 'NL', 'LU'])]}"
name="iban" name="iban"
label="IBAN" label="IBAN"
></lion-input-iban> ></lion-input-iban>
@ -88,8 +88,8 @@ export const blacklistedCountry = () => {
loadDefaultFeedbackMessages(); loadDefaultFeedbackMessages();
return html` return html`
<lion-input-iban <lion-input-iban
.modelValue=${'DE89370400440532013000'} .modelValue="${'DE89370400440532013000'}"
.validators=${[new IsNotCountryIBAN(['RO', 'NL'])]} .validators="${[new IsNotCountryIBAN(['RO', 'NL'])]}"
name="iban" name="iban"
label="IBAN" label="IBAN"
></lion-input-iban> ></lion-input-iban>

2
docs/components/input-tel-dropdown/extensions.md
View file

@ -22,7 +22,7 @@ export const IntlInputTelDropdown = () => {
return html` return html`
<intl-input-tel-dropdown <intl-input-tel-dropdown
.preferredRegions="${['NL', 'PH']}" .preferredRegions="${['NL', 'PH']}"
.modelValue=${'+639608920056'} .modelValue="${'+639608920056'}"
label="Telephone number" label="Telephone number"
help-text="Advanced dropdown and styling" help-text="Advanced dropdown and styling"
name="phoneNumber" name="phoneNumber"

10
docs/components/input-tel-dropdown/use-cases.md
View file

@ -46,9 +46,9 @@ export const allowedRegions = () => {
<lion-input-tel-dropdown <lion-input-tel-dropdown
label="Select region via dropdown" label="Select region via dropdown"
help-text="With region code 'NL'" help-text="With region code 'NL'"
.modelValue=${'+31612345678'} .modelValue="${'+31612345678'}"
name="phoneNumber" name="phoneNumber"
.allowedRegions=${['NL', 'DE', 'GB']} .allowedRegions="${['NL', 'DE', 'GB']}"
></lion-input-tel-dropdown> ></lion-input-tel-dropdown>
<h-output <h-output
.show="${['modelValue', 'activeRegion']}" .show="${['modelValue', 'activeRegion']}"
@ -69,10 +69,10 @@ export const preferredRegionCodes = () => {
<lion-input-tel-dropdown <lion-input-tel-dropdown
label="Select region via dropdown" label="Select region via dropdown"
help-text="Preferred regions show on top" help-text="Preferred regions show on top"
.modelValue=${'+31612345678'} .modelValue="${'+31612345678'}"
name="phoneNumber" name="phoneNumber"
.allowedRegions=${['BE', 'CA', 'DE', 'GB', 'NL', 'US']} .allowedRegions="${['BE', 'CA', 'DE', 'GB', 'NL', 'US']}"
.preferredRegions=${['DE', 'NL']} .preferredRegions="${['DE', 'NL']}"
></lion-input-tel-dropdown> ></lion-input-tel-dropdown>
<h-output <h-output
.show="${['modelValue', 'activeRegion']}" .show="${['modelValue', 'activeRegion']}"

6
docs/components/input-tel/use-cases.md
View file

@ -213,7 +213,7 @@ export const formatStrategy = () => {
${ref(inputTel)} ${ref(inputTel)}
label="Format strategy" label="Format strategy"
help-text="Choose a strategy above" help-text="Choose a strategy above"
.modelValue=${'+46707123456'} .modelValue="${'+46707123456'}"
format-strategy="national" format-strategy="national"
name="phoneNumber" name="phoneNumber"
></lion-input-tel> ></lion-input-tel>
@ -243,7 +243,7 @@ export const formatCountryCodeStyle = () => {
${ref(inputTel)} ${ref(inputTel)}
label="Format strategy" label="Format strategy"
help-text="Choose a strategy above" help-text="Choose a strategy above"
.modelValue=${'+46707123456'} .modelValue="${'+46707123456'}"
format-country-code-style="parentheses" format-country-code-style="parentheses"
name="phoneNumber" name="phoneNumber"
></lion-input-tel> ></lion-input-tel>
@ -268,7 +268,7 @@ export const liveFormat = () => {
<lion-input-tel <lion-input-tel
label="Realtime format on user input" label="Realtime format on user input"
help-text="Partial numbers are also formatted" help-text="Partial numbers are also formatted"
.modelValue=${new Unparseable('+31')} .modelValue="${new Unparseable('+31')}"
format-strategy="international" format-strategy="international"
live-format live-format
name="phoneNumber" name="phoneNumber"

6
docs/components/input/use-cases.md
View file

@ -49,7 +49,7 @@ export const helpText = () => html`
```js preview-story ```js preview-story
export const prefilled = () => html` export const prefilled = () => html`
<lion-input .modelValue=${'Prefilled value'} label="Prefilled"></lion-input> <lion-input .modelValue="${'Prefilled value'}" label="Prefilled"></lion-input>
`; `;
``` ```
@ -61,7 +61,7 @@ This field **will still be included** in the parent fieldset or form's `serializ
```js preview-story ```js preview-story
export const readOnly = () => html` export const readOnly = () => html`
<lion-input readonly .modelValue=${'This is read only'} label="Read only"></lion-input> <lion-input readonly .modelValue="${'This is read only'}" label="Read only"></lion-input>
`; `;
``` ```
@ -73,6 +73,6 @@ This field **will not be included** in the parent fieldset or form's `serialized
```js preview-story ```js preview-story
export const disabled = () => html` export const disabled = () => html`
<lion-input disabled .modelValue=${'This is disabled'} label="Disabled"></lion-input> <lion-input disabled .modelValue="${'This is disabled'}" label="Disabled"></lion-input>
`; `;
``` ```

10
docs/components/listbox/overview.md
View file

@ -15,11 +15,11 @@ import '@lion/ui/define/lion-option.js';
```js preview-story ```js preview-story
export const main = () => html` export const main = () => html`
<lion-listbox name="listbox" label="Default"> <lion-listbox name="listbox" label="Default">
<lion-option .choiceValue=${'Apple'}>Apple</lion-option> <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
<lion-option checked .choiceValue=${'Artichoke'}>Artichoke</lion-option> <lion-option checked .choiceValue="${'Artichoke'}">Artichoke</lion-option>
<lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option> <lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
<lion-option .choiceValue=${'Banana'}>Banana</lion-option> <lion-option .choiceValue="${'Banana'}">Banana</lion-option>
<lion-option .choiceValue=${'Beets'}>Beets</lion-option> <lion-option .choiceValue="${'Beets'}">Beets</lion-option>
</lion-listbox> </lion-listbox>
`; `;
``` ```

120
docs/components/listbox/use-cases.md
View file

@ -21,16 +21,16 @@ This will:
```html preview-story ```html preview-story
<lion-listbox name="combo" label="Multiple" multiple-choice> <lion-listbox name="combo" label="Multiple" multiple-choice>
<lion-option .choiceValue=${'Apple'}>Apple</lion-option> <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
<lion-option .choiceValue=${'Artichoke'}>Artichoke</lion-option> <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
<lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option> <lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
<lion-option .choiceValue=${'Banana'}>Banana</lion-option> <lion-option .choiceValue="${'Banana'}">Banana</lion-option>
<lion-option .choiceValue=${'Beets'}>Beets</lion-option> <lion-option .choiceValue="${'Beets'}">Beets</lion-option>
<lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option> <lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
<lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option> <lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
<lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option> <lion-option .choiceValue="${'Brussels sprout'}">Brussels sprout</lion-option>
<lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option> <lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
<lion-option .choiceValue=${'Carrot'}>Carrot</lion-option> <lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
</lion-listbox> </lion-listbox>
``` ```
@ -42,16 +42,16 @@ By default, `orientation="vertical"` is set, which enables up and down arrow key
```html preview-story ```html preview-story
<lion-listbox name="combo" label="Orientation horizontal" orientation="horizontal"> <lion-listbox name="combo" label="Orientation horizontal" orientation="horizontal">
<lion-option .choiceValue=${'Apple'}>Apple</lion-option> <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
<lion-option .choiceValue=${'Artichoke'}>Artichoke</lion-option> <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
<lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option> <lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
<lion-option .choiceValue=${'Banana'}>Banana</lion-option> <lion-option .choiceValue="${'Banana'}">Banana</lion-option>
<lion-option .choiceValue=${'Beets'}>Beets</lion-option> <lion-option .choiceValue="${'Beets'}">Beets</lion-option>
<lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option> <lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
<lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option> <lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
<lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option> <lion-option .choiceValue="${'Brussels sprout'}">Brussels sprout</lion-option>
<lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option> <lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
<lion-option .choiceValue=${'Carrot'}>Carrot</lion-option> <lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
</lion-listbox> </lion-listbox>
``` ```
@ -64,16 +64,16 @@ With `multiple-choice` flag configured, multiple options can be checked.
orientation="horizontal" orientation="horizontal"
multiple-choice multiple-choice
> >
<lion-option .choiceValue=${'Apple'}>Apple</lion-option> <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
<lion-option .choiceValue=${'Artichoke'}>Artichoke</lion-option> <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
<lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option> <lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
<lion-option .choiceValue=${'Banana'}>Banana</lion-option> <lion-option .choiceValue="${'Banana'}">Banana</lion-option>
<lion-option .choiceValue=${'Beets'}>Beets</lion-option> <lion-option .choiceValue="${'Beets'}">Beets</lion-option>
<lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option> <lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
<lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option> <lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
<lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option> <lion-option .choiceValue="${'Brussels sprout'}">Brussels sprout</lion-option>
<lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option> <lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
<lion-option .choiceValue=${'Carrot'}>Carrot</lion-option> <lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
</lion-listbox> </lion-listbox>
``` ```
@ -86,16 +86,16 @@ See [wai aria spec](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_foll
```html preview-story ```html preview-story
<lion-listbox name="combo" label="Selection follows focus" selection-follows-focus> <lion-listbox name="combo" label="Selection follows focus" selection-follows-focus>
<lion-option .choiceValue=${'Apple'}>Apple</lion-option> <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
<lion-option .choiceValue=${'Artichoke'} disabled>Artichoke</lion-option> <lion-option .choiceValue="${'Artichoke'}" disabled>Artichoke</lion-option>
<lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option> <lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
<lion-option .choiceValue=${'Banana'}>Banana</lion-option> <lion-option .choiceValue="${'Banana'}">Banana</lion-option>
<lion-option .choiceValue=${'Beets'}>Beets</lion-option> <lion-option .choiceValue="${'Beets'}">Beets</lion-option>
<lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option> <lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
<lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option> <lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
<lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option> <lion-option .choiceValue="${'Brussels sprout'}">Brussels sprout</lion-option>
<lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option> <lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
<lion-option .choiceValue=${'Carrot'}>Carrot</lion-option> <lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
</lion-listbox> </lion-listbox>
``` ```
@ -105,16 +105,16 @@ See [wai aria spec](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_foll
```html preview-story ```html preview-story
<lion-listbox name="combo" label="Rotate keyboard navigation" rotate-keyboard-navigation> <lion-listbox name="combo" label="Rotate keyboard navigation" rotate-keyboard-navigation>
<lion-option .choiceValue=${'Apple'}>Apple</lion-option> <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
<lion-option .choiceValue=${'Artichoke'}>Artichoke</lion-option> <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
<lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option> <lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
<lion-option .choiceValue=${'Banana'}>Banana</lion-option> <lion-option .choiceValue="${'Banana'}">Banana</lion-option>
<lion-option .choiceValue=${'Beets'}>Beets</lion-option> <lion-option .choiceValue="${'Beets'}">Beets</lion-option>
<lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option> <lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
<lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option> <lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
<lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option> <lion-option .choiceValue="${'Brussels sprout'}">Brussels sprout</lion-option>
<lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option> <lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
<lion-option .choiceValue=${'Carrot'}>Carrot</lion-option> <lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
</lion-listbox> </lion-listbox>
``` ```
@ -124,16 +124,16 @@ Navigation will skip over disabled options. Let's disable Artichoke and Brussel
```html preview-story ```html preview-story
<lion-listbox name="combo" label="Rotate with disabled options" rotate-keyboard-navigation> <lion-listbox name="combo" label="Rotate with disabled options" rotate-keyboard-navigation>
<lion-option .choiceValue=${'Apple'}>Apple</lion-option> <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
<lion-option .choiceValue=${'Artichoke'} disabled>Artichoke</lion-option> <lion-option .choiceValue="${'Artichoke'}" disabled>Artichoke</lion-option>
<lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option> <lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
<lion-option .choiceValue=${'Banana'}>Banana</lion-option> <lion-option .choiceValue="${'Banana'}">Banana</lion-option>
<lion-option .choiceValue=${'Beets'}>Beets</lion-option> <lion-option .choiceValue="${'Beets'}">Beets</lion-option>
<lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option> <lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
<lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option> <lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
<lion-option .choiceValue=${'Brussels sprout'} disabled>Brussels sprout</lion-option> <lion-option .choiceValue="${'Brussels sprout'}" disabled>Brussels sprout</lion-option>
<lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option> <lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
<lion-option .choiceValue=${'Carrot'}>Carrot</lion-option> <lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
</lion-listbox> </lion-listbox>
``` ```

10
docs/components/pagination/use-cases.md
View file

@ -52,17 +52,17 @@ export const methods = ({ shadowRoot }) => {
}} }}
></lion-pagination> ></lion-pagination>
<section style="margin-top:16px"> <section style="margin-top:16px">
<button @click=${() => shadowRoot.getElementById('pagination-method').previous()}> <button @click="${() => shadowRoot.getElementById('pagination-method').previous()}">
Previous Previous
</button> </button>
<button @click=${() => shadowRoot.getElementById('pagination-method').next()}>Next</button> <button @click="${() => shadowRoot.getElementById('pagination-method').next()}">Next</button>
<br /> <br />
<br /> <br />
<button @click=${() => shadowRoot.getElementById('pagination-method').first()}>First</button> <button @click="${() => shadowRoot.getElementById('pagination-method').first()}">First</button>
<button @click=${() => shadowRoot.getElementById('pagination-method').last()}>Last</button> <button @click="${() => shadowRoot.getElementById('pagination-method').last()}">Last</button>
<br /> <br />
<br /> <br />
<button @click=${() => shadowRoot.getElementById('pagination-method').goto(55)}> <button @click="${() => shadowRoot.getElementById('pagination-method').goto(55)}">
Go to 55 Go to 55
</button> </button>
</section> </section>

6
docs/components/radio-group/overview.md
View file

@ -13,9 +13,9 @@ import '@lion/ui/define/lion-radio.js';
```js preview-story ```js preview-story
export const main = () => html` export const main = () => html`
<lion-radio-group name="dinos" label="What are your favourite dinosaurs?"> <lion-radio-group name="dinos" label="What are your favourite dinosaurs?">
<lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio> <lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
<lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio> <lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
<lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio> <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
</lion-radio-group> </lion-radio-group>
`; `;
``` ```

36
docs/components/radio-group/use-cases.md
View file

@ -33,9 +33,9 @@ You can pre-select an option by adding the checked attribute to the selected `li
```js preview-story ```js preview-story
export const preSelect = () => html` export const preSelect = () => html`
<lion-radio-group name="dinos_2" label="What are your favourite dinosaurs?"> <lion-radio-group name="dinos_2" label="What are your favourite dinosaurs?">
<lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio> <lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
<lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'} checked></lion-radio> <lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}" checked></lion-radio>
<lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio> <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
</lion-radio-group> </lion-radio-group>
`; `;
``` ```
@ -47,9 +47,9 @@ You can disable a specific `lion-radio` option by adding the `disabled` attribut
```js preview-story ```js preview-story
export const disabledRadio = () => html` export const disabledRadio = () => html`
<lion-radio-group name="dinos_4" label="What are your favourite dinosaurs?"> <lion-radio-group name="dinos_4" label="What are your favourite dinosaurs?">
<lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio> <lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
<lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'} disabled></lion-radio> <lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}" disabled></lion-radio>
<lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio> <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
</lion-radio-group> </lion-radio-group>
`; `;
``` ```
@ -59,9 +59,9 @@ You can do the same thing for the entire group by setting the `disabled` attribu
```js preview-story ```js preview-story
export const disabledGroup = () => html` export const disabledGroup = () => html`
<lion-radio-group name="dinos_6" label="What are your favourite dinosaurs?" disabled> <lion-radio-group name="dinos_6" label="What are your favourite dinosaurs?" disabled>
<lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio> <lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
<lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio> <lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
<lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio> <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
</lion-radio-group> </lion-radio-group>
`; `;
``` ```
@ -73,17 +73,17 @@ You can use `slot="label"` instead of the `label` attribute for defining more co
```js preview-story ```js preview-story
export const label = () => html` export const label = () => html`
<lion-radio-group name="dinos_7" label="Favourite dinosaur"> <lion-radio-group name="dinos_7" label="Favourite dinosaur">
<lion-radio .choiceValue=${'allosaurus'}> <lion-radio .choiceValue="${'allosaurus'}">
<label slot="label" <label slot="label"
><a href="https://wikipedia.org/wiki/allosaurus" target="_blank">allosaurus</a></label ><a href="https://wikipedia.org/wiki/allosaurus" target="_blank">allosaurus</a></label
> >
</lion-radio> </lion-radio>
<lion-radio .choiceValue=${'brontosaurus'}> <lion-radio .choiceValue="${'brontosaurus'}">
<label slot="label" <label slot="label"
><a href="https://wikipedia.org/wiki/brontosaurus" target="_blank">brontosaurus</a></label ><a href="https://wikipedia.org/wiki/brontosaurus" target="_blank">brontosaurus</a></label
> >
</lion-radio> </lion-radio>
<lion-radio .choiceValue=${'diplodocus'}> <lion-radio .choiceValue="${'diplodocus'}">
<label slot="label" <label slot="label"
><a href="https://wikipedia.org/wiki/diplodocus" target="_blank">diplodocus</a></label ><a href="https://wikipedia.org/wiki/diplodocus" target="_blank">diplodocus</a></label
> >
@ -101,17 +101,17 @@ export const helpText = () => html`
<lion-radio-group name="dinosTwo" label="Favourite dinosaur"> <lion-radio-group name="dinosTwo" label="Favourite dinosaur">
<lion-radio <lion-radio
label="allosaurus" label="allosaurus"
.choiceValue=${'allosaurus'} .choiceValue="${'allosaurus'}"
help-text="Allosaurus is a genus of carnivorous theropod dinosaur that lived 155 to 145 million years ago during the late Jurassic period" help-text="Allosaurus is a genus of carnivorous theropod dinosaur that lived 155 to 145 million years ago during the late Jurassic period"
></lion-radio> ></lion-radio>
<lion-radio <lion-radio
label="brontosaurus" label="brontosaurus"
.choiceValue=${'brontosaurus'} .choiceValue="${'brontosaurus'}"
help-text="Brontosaurus is a genus of gigantic quadruped sauropod dinosaurs" help-text="Brontosaurus is a genus of gigantic quadruped sauropod dinosaurs"
></lion-radio> ></lion-radio>
<lion-radio <lion-radio
label="diplodocus" label="diplodocus"
.choiceValue=${'diplodocus'} .choiceValue="${'diplodocus'}"
help-text="Diplodocus is a genus of diplodocid sauropod dinosaurs whose fossils were first discovered in 1877 by S. W. Williston" help-text="Diplodocus is a genus of diplodocid sauropod dinosaurs whose fossils were first discovered in 1877 by S. W. Williston"
></lion-radio> ></lion-radio>
</lion-radio-group> </lion-radio-group>
@ -130,9 +130,9 @@ export const event = ({ shadowRoot }) => html`
@model-value-changed=${ev => @model-value-changed=${ev =>
(ev.target.parentElement.querySelector('#selectedDinosaur').innerText = ev.target.modelValue)} (ev.target.parentElement.querySelector('#selectedDinosaur').innerText = ev.target.modelValue)}
> >
<lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio> <lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
<lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio> <lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
<lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio> <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
</lion-radio-group> </lion-radio-group>
<br /> <br />
<span>Selected dinosaur: <strong id="selectedDinosaur">N/A</strong></span> <span>Selected dinosaur: <strong id="selectedDinosaur">N/A</strong></span>

6
docs/components/select-rich/overview.md
View file

@ -14,9 +14,9 @@ import '@lion/ui/define/lion-option.js';
```html preview-story ```html preview-story
<lion-select-rich name="favoriteColor" label="Favorite color"> <lion-select-rich name="favoriteColor" label="Favorite color">
<lion-option .choiceValue=${'red'}>Red</lion-option> <lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue=${'hotpink'}>Hotpink</lion-option> <lion-option .choiceValue="${'hotpink'}">Hotpink</lion-option>
<lion-option .choiceValue=${'blue'}>Blue</lion-option> <lion-option .choiceValue="${'blue'}">Blue</lion-option>
</lion-select-rich> </lion-select-rich>
``` ```

60
docs/components/select-rich/use-cases.md
View file

@ -67,7 +67,7 @@ export const manyOptionsWithScrolling = () => {
<lion-option .modelValue="${modelValues[3]}"> <lion-option .modelValue="${modelValues[3]}">
<p style="color: green;">I am green</p> <p style="color: green;">I am green</p>
</lion-option> </lion-option>
<lion-option .modelValue"=${modelValues[4]}"> <lion-option .modelValue"="${modelValues[4]}"">
<p style="color: blue;">I am blue</p> <p style="color: blue;">I am blue</p>
</lion-option> </lion-option>
</lion-select-rich> </lion-select-rich>
@ -84,9 +84,9 @@ The readonly attribute is delegated to the invoker for disabling opening the ove
```html preview-story ```html preview-story
<lion-select-rich label="Read-only select" readonly name="color"> <lion-select-rich label="Read-only select" readonly name="color">
<lion-option .choiceValue=${'red'}>Red</lion-option> <lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option> <lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option> <lion-option .choiceValue="${'teal'}">Teal</lion-option>
</lion-select-rich> </lion-select-rich>
``` ```
@ -98,19 +98,19 @@ If you disable the entire select, the disabled attribute is also delegated to th
```html preview-story ```html preview-story
<lion-select-rich label="Disabled select" disabled name="color"> <lion-select-rich label="Disabled select" disabled name="color">
<lion-option .choiceValue=${'red'}>Red</lion-option> <lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option> <lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option> <lion-option .choiceValue="${'teal'}">Teal</lion-option>
</lion-select-rich> </lion-select-rich>
``` ```
```html preview-story ```html preview-story
<lion-select-rich label="Disabled options" name="color"> <lion-select-rich label="Disabled options" name="color">
<lion-option .choiceValue=${'red'} disabled>Red</lion-option> <lion-option .choiceValue="${'red'}" disabled>Red</lion-option>
<lion-option .choiceValue=${'blue'}>Blue</lion-option> <lion-option .choiceValue="${'blue'}">Blue</lion-option>
<lion-option .choiceValue=${'hotpink'} disabled>Hotpink</lion-option> <lion-option .choiceValue="${'hotpink'}" disabled>Hotpink</lion-option>
<lion-option .choiceValue=${'green'}>Green</lion-option> <lion-option .choiceValue="${'green'}">Green</lion-option>
<lion-option .choiceValue=${'teal'} disabled>Teal</lion-option> <lion-option .choiceValue="${'teal'}" disabled>Teal</lion-option>
</lion-select-rich> </lion-select-rich>
``` ```
@ -134,8 +134,8 @@ export const renderOptions = ({ shadowRoot }) => {
); );
} }
return html` return html`
<lion-select-rich label="Credit Card" name="color" @model-value-changed=${showOutput}> <lion-select-rich label="Credit Card" name="color" @model-value-changed="${showOutput}">
${objs.map(obj => html` <lion-option .choiceValue=${obj}>${obj.label}</lion-option> `)} ${objs.map(obj => html` <lion-option .choiceValue="${obj}>${obj.label}</lion-option> `)}"
</lion-select-rich> </lion-select-rich>
<p>Full value:</p> <p>Full value:</p>
<pre id="demoRenderOutput"></pre> <pre id="demoRenderOutput"></pre>
@ -152,14 +152,14 @@ This changes the keyboard interaction.
```html preview-story ```html preview-story
<lion-select-rich label="Mac mode" name="color" interaction-mode="mac"> <lion-select-rich label="Mac mode" name="color" interaction-mode="mac">
<lion-option .choiceValue=${'red'}>Red</lion-option> <lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option> <lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option> <lion-option .choiceValue="${'teal'}">Teal</lion-option>
</lion-select-rich> </lion-select-rich>
<lion-select-rich label="Windows/Linux mode" name="color" interaction-mode="windows/linux"> <lion-select-rich label="Windows/Linux mode" name="color" interaction-mode="windows/linux">
<lion-option .choiceValue=${'red'}>Red</lion-option> <lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option> <lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option> <lion-option .choiceValue="${'teal'}">Teal</lion-option>
</lion-select-rich> </lion-select-rich>
``` ```
@ -199,9 +199,9 @@ export const checkedIndexAndValue = ({ shadowRoot }) => html`
Console log checked index and value Console log checked index and value
</button> </button>
<lion-select-rich id="checkedRichSelect" name="favoriteColor" label="Favorite color"> <lion-select-rich id="checkedRichSelect" name="favoriteColor" label="Favorite color">
<lion-option .choiceValue=${'red'}>Red</lion-option> <lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option> <lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option> <lion-option .choiceValue="${'teal'}">Teal</lion-option>
</lion-select-rich> </lion-select-rich>
`; `;
``` ```
@ -223,9 +223,9 @@ For this you can use `has-no-default-selected` attribute.
```html preview-story ```html preview-story
<lion-select-rich name="favoriteColor" label="Favorite color" has-no-default-selected> <lion-select-rich name="favoriteColor" label="Favorite color" has-no-default-selected>
<lion-option .choiceValue=${'red'}>Red</lion-option> <lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue=${'hotpink'}>Hotpink</lion-option> <lion-option .choiceValue="${'hotpink'}">Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option> <lion-option .choiceValue="${'teal'}">Teal</lion-option>
</lion-select-rich> </lion-select-rich>
``` ```
@ -238,7 +238,7 @@ If there is a single option rendered, then `singleOption` property is set to `tr
```html preview-story ```html preview-story
<lion-select-rich label="Single Option" name="color"> <lion-select-rich label="Single Option" name="color">
<lion-option .choiceValue=${'red'}>Red</lion-option> <lion-option .choiceValue="${'red'}">Red</lion-option>
</lion-select-rich> </lion-select-rich>
``` ```
@ -259,12 +259,12 @@ class SingleOptionRemoveAdd extends LitElement {
render() { render() {
return html` return html`
<button @click=${this.addOption}>Add an option</button> <button @click="${this.addOption}">Add an option</button>
<button @click=${this.removeOption}>Remove last option</button> <button @click="${this.removeOption}">Remove last option</button>
<lion-select-rich name="favoriteColor" label="Favorite color"> <lion-select-rich name="favoriteColor" label="Favorite color">
<lion-options slot="input"> <lion-options slot="input">
${this.options.map( ${this.options.map(
option => html` <lion-option .choiceValue=${option}>${option}</lion-option> `, option => html` <lion-option .choiceValue="${option}>${option}"</lion-option> `,
)} )}
</lion-options> </lion-options>
</lion-select-rich> </lion-select-rich>

2
docs/components/select/use-cases.md
View file

@ -13,7 +13,7 @@ loadDefaultFeedbackMessages();
You can preselect an option by setting the property modelValue. You can preselect an option by setting the property modelValue.
```html preview-story ```html preview-story
<lion-select name="favoriteColor" label="Favorite color" .modelValue=${'hotpink'}> <lion-select name="favoriteColor" label="Favorite color" .modelValue="${'hotpink'}">
<select slot="input"> <select slot="input">
<option selected hidden value>Please select</option> <option selected hidden value>Please select</option>
<option value="red">Red</option> <option value="red">Red</option>

8
docs/components/steps/overview.md
View file

@ -13,17 +13,17 @@ export const main = () => html`
<lion-steps> <lion-steps>
<lion-step initial-step> <lion-step initial-step>
Step 1 Step 1
<button type="button" @click=${ev => ev.target.parentElement.controller.next()}>Next</button> <button type="button" @click="${ev => ev.target.parentElement.controller.next()}">Next</button>
</lion-step> </lion-step>
<lion-step> <lion-step>
<button type="button" @click=${ev => ev.target.parentElement.controller.previous()}> <button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
Previous Previous
</button> </button>
Step 2 Step 2
<button type="button" @click=${ev => ev.target.parentElement.controller.next()}>Next</button> <button type="button" @click="${ev => ev.target.parentElement.controller.next()}">Next</button>
</lion-step> </lion-step>
<lion-step> <lion-step>
<button type="button" @click=${ev => ev.target.parentElement.controller.previous()}> <button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
Previous Previous
</button> </button>
Step 3 Step 3

14
docs/components/steps/use-cases.md
View file

@ -12,7 +12,7 @@ export const main = () => html`
<lion-step initial-step> <lion-step initial-step>
<p>Welcome</p> <p>Welcome</p>
<button disabled>previous</button> &nbsp; <button disabled>previous</button> &nbsp;
<button type="button" @click=${ev => ev.target.parentElement.controller.next()}>Next</button> <button type="button" @click="${ev => ev.target.parentElement.controller.next()}">Next</button>
</lion-step> </lion-step>
<lion-step> <lion-step>
<p>Are you single?</p> <p>Are you single?</p>
@ -36,29 +36,29 @@ export const main = () => html`
No No
</button> </button>
<br /><br /> <br /><br />
<button type="button" @click=${ev => ev.target.parentElement.controller.previous()}> <button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
Previous Previous
</button> </button>
</lion-step> </lion-step>
<lion-step id="is-single" .condition="${data => data.isSingle}"> <lion-step id="is-single" .condition="${data => data.isSingle}">
<p>You are single</p> <p>You are single</p>
<button type="button" @click=${ev => ev.target.parentElement.controller.previous()}> <button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
Previous Previous
</button> </button>
&nbsp; &nbsp;
<button type="button" @click=${ev => ev.target.parentElement.controller.next()}>Next</button> <button type="button" @click="${ev => ev.target.parentElement.controller.next()}">Next</button>
</lion-step> </lion-step>
<lion-step id="is-not-single" .condition="${data => data.isSingle}" invert-condition> <lion-step id="is-not-single" .condition="${data => data.isSingle}" invert-condition>
<p>You are NOT single.</p> <p>You are NOT single.</p>
<button type="button" @click=${ev => ev.target.parentElement.controller.previous()}> <button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
Previous Previous
</button> </button>
&nbsp; &nbsp;
<button type="button" @click=${ev => ev.target.parentElement.controller.next()}>Next</button> <button type="button" @click="${ev => ev.target.parentElement.controller.next()}">Next</button>
</lion-step> </lion-step>
<lion-step> <lion-step>
<p>Finish</p> <p>Finish</p>
<button type="button" @click=${ev => ev.target.parentElement.controller.previous()}> <button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
Previous Previous
</button> </button>
</lion-step> </lion-step>

2
docs/components/tabs/use-cases.md
View file

@ -12,7 +12,7 @@ You can set the `selectedIndex` to select a certain tab.
```js preview-story ```js preview-story
export const selectedIndex = () => html` export const selectedIndex = () => html`
<lion-tabs .selectedIndex=${1}> <lion-tabs .selectedIndex="${1}">
<button slot="tab">Info</button> <button slot="tab">Info</button>
<p slot="panel">Info page with lots of information about us.</p> <p slot="panel">Info page with lots of information about us.</p>
<button slot="tab">Work</button> <button slot="tab">Work</button>

6
docs/components/textarea/use-cases.md
View file

@ -13,7 +13,7 @@ You can prefill the textarea. If you want to prefill on multiline, you will have
export const prefilled = () => html` export const prefilled = () => html`
<lion-textarea <lion-textarea
label="Prefilled" label="Prefilled"
.modelValue=${['batman', 'and', 'robin'].join('\n')} .modelValue="${['batman', 'and', 'robin'].join('\n')}"
></lion-textarea> ></lion-textarea>
`; `;
``` ```
@ -35,7 +35,7 @@ export const readonly = () => html`
<lion-textarea <lion-textarea
label="Readonly" label="Readonly"
readonly readonly
.modelValue=${['batman', 'and', 'robin'].join('\n')} .modelValue="${['batman', 'and', 'robin'].join('\n')}"
></lion-textarea> ></lion-textarea>
`; `;
``` ```
@ -49,7 +49,7 @@ export const stopGrowing = () => html`
<lion-textarea <lion-textarea
label="Stop growing" label="Stop growing"
max-rows="4" max-rows="4"
.modelValue=${['batman', 'and', 'robin'].join('\n')} .modelValue="${['batman', 'and', 'robin'].join('\n')}"
></lion-textarea> ></lion-textarea>
`; `;
``` ```

12
docs/components/tooltip/use-cases.md
View file

@ -21,7 +21,7 @@ export const invokerRelation = () => {
margin: 50px; margin: 50px;
} }
</style> </style>
<lion-tooltip .config=${invokerRelationConfig}> <lion-tooltip .config="${invokerRelationConfig}">
<button slot="invoker" class="demo-tooltip-invoker">📅</button> <button slot="invoker" class="demo-tooltip-invoker">📅</button>
<div slot="content">Agenda<div> <div slot="content">Agenda<div>
</lion-tooltip> </lion-tooltip>
@ -50,19 +50,19 @@ export const placements = () => {
} }
</style> </style>
<div class="demo-box-placements"> <div class="demo-box-placements">
<lion-tooltip has-arrow .config=${placementTopConfig}> <lion-tooltip has-arrow .config="${placementTopConfig}">
<button slot="invoker">Top</button> <button slot="invoker">Top</button>
<div slot="content">Top placement</div> <div slot="content">Top placement</div>
</lion-tooltip> </lion-tooltip>
<lion-tooltip has-arrow .config=${placementRightConfig}> <lion-tooltip has-arrow .config="${placementRightConfig}">
<button slot="invoker">Right</button> <button slot="invoker">Right</button>
<div slot="content">Right placement</div> <div slot="content">Right placement</div>
</lion-tooltip> </lion-tooltip>
<lion-tooltip has-arrow .config=${placementBottomConfig}> <lion-tooltip has-arrow .config="${placementBottomConfig}">
<button slot="invoker">Bottom</button> <button slot="invoker">Bottom</button>
<div slot="content">Bottom placement</div> <div slot="content">Bottom placement</div>
</lion-tooltip> </lion-tooltip>
<lion-tooltip has-arrow .config=${placementLeftConfig}> <lion-tooltip has-arrow .config="${placementLeftConfig}">
<button slot="invoker">Left</button> <button slot="invoker">Left</button>
<div slot="content">Left placement</div> <div slot="content">Left placement</div>
</lion-tooltip> </lion-tooltip>
@ -120,7 +120,7 @@ export const overridePopperConfig = () => {
margin: 50px; margin: 50px;
} }
</style> </style>
<lion-tooltip .config=${overridePopperConfig}> <lion-tooltip .config="${overridePopperConfig}">
<button slot="invoker" class="demo-tooltip-invoker">Hover me</button> <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
<div slot="content">This is a tooltip<div> <div slot="content">This is a tooltip<div>
</lion-tooltip> </lion-tooltip>

8
docs/fundamentals/systems/form/formatting-and-parsing.md
View file

@ -56,7 +56,7 @@ export const parser = () => html`
help-text="Uses .parser to create model values from view values" help-text="Uses .parser to create model values from view values"
.parser="${viewValue => Number(viewValue)}" .parser="${viewValue => Number(viewValue)}"
.modelValue="${1234567890}" .modelValue="${1234567890}"
@model-value-changed=${({ target }) => console.log(target)} @model-value-changed="${({ target }) => console.log(target)}"
></lion-input> ></lion-input>
<h-output .show="${['modelValue']}"></h-output> <h-output .show="${['modelValue']}"></h-output>
`; `;
@ -165,7 +165,7 @@ export const preprocessors = () => {
<lion-input <lion-input
label="Date Example" label="Date Example"
help-text="Uses .preprocessor to prevent digits" help-text="Uses .preprocessor to prevent digits"
.preprocessor=${preprocess} .preprocessor="${preprocess}"
></lion-input> ></lion-input>
<h-output .show="${['modelValue']}"></h-output> <h-output .show="${['modelValue']}"></h-output>
`; `;
@ -190,14 +190,14 @@ export const liveFormatters = () => {
label="Live Format" label="Live Format"
.modelValue="${new Unparseable('+31')}" .modelValue="${new Unparseable('+31')}"
help-text="Uses .preprocessor to format during typing" help-text="Uses .preprocessor to format during typing"
.preprocessor=${(viewValue, { currentCaretIndex, prevViewValue }) => { .preprocessor="${(viewValue, { currentCaretIndex, prevViewValue }) => {
return liveFormatPhoneNumber(viewValue, { return liveFormatPhoneNumber(viewValue, {
regionCode: 'NL', regionCode: 'NL',
formatStrategy: 'international', formatStrategy: 'international',
currentCaretIndex, currentCaretIndex,
prevViewValue, prevViewValue,
}); });
}} }}"
></lion-input> ></lion-input>
<h-output .show="${['modelValue']}"></h-output> <h-output .show="${['modelValue']}"></h-output>
`; `;

38
docs/fundamentals/systems/form/use-cases.md
View file

@ -88,9 +88,9 @@ export const main = () => {
.validators="${[new Required()]}" .validators="${[new Required()]}"
.fieldName="${'value'}" .fieldName="${'value'}"
> >
<lion-checkbox .choiceValue=${'foo'} label="I like foo"></lion-checkbox> <lion-checkbox .choiceValue="${'foo'}" label="I like foo"></lion-checkbox>
<lion-checkbox .choiceValue=${'bar'} label="I like bar"></lion-checkbox> <lion-checkbox .choiceValue="${'bar'}" label="I like bar"></lion-checkbox>
<lion-checkbox .choiceValue=${'baz'} label="I like baz"></lion-checkbox> <lion-checkbox .choiceValue="${'baz'}" label="I like baz"></lion-checkbox>
</lion-checkbox-group> </lion-checkbox-group>
<lion-radio-group <lion-radio-group
name="dinosaurs" name="dinosaurs"
@ -98,14 +98,14 @@ export const main = () => {
.fieldName="${'dinosaur'}" .fieldName="${'dinosaur'}"
.validators="${[new Required()]}" .validators="${[new Required()]}"
> >
<lion-radio .choiceValue=${'allosaurus'} label="allosaurus"></lion-radio> <lion-radio .choiceValue="${'allosaurus'}" label="allosaurus"></lion-radio>
<lion-radio .choiceValue=${'brontosaurus'} label="brontosaurus"></lion-radio> <lion-radio .choiceValue="${'brontosaurus'}" label="brontosaurus"></lion-radio>
<lion-radio .choiceValue=${'diplodocus'} label="diplodocus"></lion-radio> <lion-radio .choiceValue="${'diplodocus'}" label="diplodocus"></lion-radio>
</lion-radio-group> </lion-radio-group>
<lion-listbox name="favoriteFruit" label="Favorite fruit"> <lion-listbox name="favoriteFruit" label="Favorite fruit">
<lion-option .choiceValue=${'Apple'}>Apple</lion-option> <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
<lion-option checked .choiceValue=${'Banana'}>Banana</lion-option> <lion-option checked .choiceValue="${'Banana'}">Banana</lion-option>
<lion-option .choiceValue=${'Mango'}>Mango</lion-option> <lion-option .choiceValue="${'Mango'}">Mango</lion-option>
</lion-listbox> </lion-listbox>
<lion-combobox <lion-combobox
.validators="${[new Required()]}" .validators="${[new Required()]}"
@ -113,17 +113,17 @@ export const main = () => {
label="Favorite movie" label="Favorite movie"
autocomplete="both" autocomplete="both"
> >
<lion-option checked .choiceValue=${'Rocky'}>Rocky</lion-option> <lion-option checked .choiceValue="${'Rocky'}">Rocky</lion-option>
<lion-option .choiceValue=${'Rocky II'}>Rocky II</lion-option> <lion-option .choiceValue="${'Rocky II'}">Rocky II</lion-option>
<lion-option .choiceValue=${'Rocky III'}>Rocky III</lion-option> <lion-option .choiceValue="${'Rocky III'}">Rocky III</lion-option>
<lion-option .choiceValue=${'Rocky IV'}>Rocky IV</lion-option> <lion-option .choiceValue="${'Rocky IV'}">Rocky IV</lion-option>
<lion-option .choiceValue=${'Rocky V'}>Rocky V</lion-option> <lion-option .choiceValue="${'Rocky V'}">Rocky V</lion-option>
<lion-option .choiceValue=${'Rocky Balboa'}>Rocky Balboa</lion-option> <lion-option .choiceValue="${'Rocky Balboa'}">Rocky Balboa</lion-option>
</lion-combobox> </lion-combobox>
<lion-select-rich name="favoriteColor" label="Favorite color"> <lion-select-rich name="favoriteColor" label="Favorite color">
<lion-option .choiceValue=${'red'}>Red</lion-option> <lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option> <lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option> <lion-option .choiceValue="${'teal'}">Teal</lion-option>
</lion-select-rich> </lion-select-rich>
<lion-select label="Lyrics" name="lyrics" .validators="${[new Required()]}"> <lion-select label="Lyrics" name="lyrics" .validators="${[new Required()]}">
<select slot="input"> <select slot="input">
@ -162,7 +162,7 @@ export const main = () => {
<div class="buttons"> <div class="buttons">
<lion-button-submit>Submit</lion-button-submit> <lion-button-submit>Submit</lion-button-submit>
<lion-button-reset <lion-button-reset
@click=${ev => ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()} @click="${ev => ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}"
>Reset</lion-button-reset >Reset</lion-button-reset
> >
</div> </div>

96
docs/fundamentals/systems/form/validate.md
View file

@ -211,11 +211,11 @@ export const defaultValidationMessages = () => {
.validators="${[new Required(), new MinLength(4)]}" .validators="${[new Required(), new MinLength(4)]}"
.modelValue="${'foo'}" .modelValue="${'foo'}"
></lion-input> ></lion-input>
<button @click=${() => (localize.locale = 'de-DE')}>DE</button> <button @click="${() => (localize.locale = 'de-DE')}">DE</button>
<button @click=${() => (localize.locale = 'en-GB')}>EN</button> <button @click="${() => (localize.locale = 'en-GB')}">EN</button>
<button @click=${() => (localize.locale = 'fr-FR')}>FR</button> <button @click="${() => (localize.locale = 'fr-FR')}">FR</button>
<button @click=${() => (localize.locale = 'nl-NL')}>NL</button> <button @click="${() => (localize.locale = 'nl-NL')}">NL</button>
<button @click=${() => (localize.locale = 'zh-CN')}>CN</button> <button @click="${() => (localize.locale = 'zh-CN')}">CN</button>
`; `;
}; };
``` ```
@ -228,7 +228,7 @@ The required validator can be put onto every form field element and will make su
```js preview-story ```js preview-story
export const requiredValidator = () => html` export const requiredValidator = () => html`
<lion-input .validators=${[new Required()]} label="Required" .fieldName="value"></lion-input> <lion-input .validators="${[new Required()]}" label="Required" .fieldName="value"></lion-input>
`; `;
``` ```
@ -243,28 +243,28 @@ Useful on input elements it allows to define how many characters can be entered.
```js preview-story ```js preview-story
export const stringValidators = () => html` export const stringValidators = () => html`
<lion-input <lion-input
.validators=${[new EqualsLength(7)]} .validators="${[new EqualsLength(7)]}"
.modelValue=${'not exactly'} .modelValue="${'not exactly'}"
label="EqualsLength" label="EqualsLength"
></lion-input> ></lion-input>
<lion-input <lion-input
.validators=${[new MinLength(10)]} .validators="${[new MinLength(10)]}"
.modelValue=${'too short'} .modelValue="${'too short'}"
label="MinLength" label="MinLength"
></lion-input> ></lion-input>
<lion-input <lion-input
.validators=${[new MaxLength(7)]} .validators="${[new MaxLength(7)]}"
.modelValue=${'too long'} .modelValue="${'too long'}"
label="MaxLength" label="MaxLength"
></lion-input> ></lion-input>
<lion-input <lion-input
.validators=${[new MinMaxLength({ min: 10, max: 20 })]} .validators="${[new MinMaxLength({ min: 10, max: 20 })]}"
.modelValue=${'that should be enough'} .modelValue="${'that should be enough'}"
label="MinMaxLength" label="MinMaxLength"
></lion-input> ></lion-input>
<lion-input <lion-input
.validators=${[new Pattern(/#LionRocks/)]} .validators="${[new Pattern(/#LionRocks/)]}"
.modelValue=${'regex checks if "#Lion<NO SPACE>Rocks" is in this input #LionRocks'} .modelValue="${'regex checks if "#Lion<NO SPACE>Rocks" is in this input #LionRocks'}"
label="Pattern" label="Pattern"
></lion-input> ></lion-input>
`; `;
@ -314,23 +314,23 @@ export const dateValidators = () => {
const tomorrow = new Date(year, month, day + 1); const tomorrow = new Date(year, month, day + 1);
return html` return html`
<lion-input-date <lion-input-date
.validators=${[new IsDate()]} .validators="${[new IsDate()]}"
.modelValue=${'foo'} .modelValue="${'foo'}"
label="IsDate" label="IsDate"
></lion-input-date> ></lion-input-date>
<lion-input-date <lion-input-date
.validators=${[new MinDate(today)]} .validators="${[new MinDate(today)]}"
.modelValue=${new Date(yesterday)} .modelValue="${new Date(yesterday)}"
label="MinDate" label="MinDate"
></lion-input-date> ></lion-input-date>
<lion-input-date <lion-input-date
.validators=${[new MaxDate(today)]} .validators="${[new MaxDate(today)]}"
.modelValue=${new Date(tomorrow)} .modelValue="${new Date(tomorrow)}"
label="MaxDate" label="MaxDate"
></lion-input-date> ></lion-input-date>
<lion-input-date <lion-input-date
.validators=${[new MinMaxDate({ min: new Date(yesterday), max: new Date(tomorrow) })]} .validators="${[new MinMaxDate({ min: new Date(yesterday), max: new Date(tomorrow) })]}"
.modelValue=${new Date(today)} .modelValue="${new Date(today)}"
label="MinMaxDate" label="MinMaxDate"
></lion-input-date> ></lion-input-date>
`; `;
@ -476,11 +476,11 @@ export const checkboxValidation = () => {
id="scientists" id="scientists"
name="scientists[]" name="scientists[]"
label="Favorite scientists" label="Favorite scientists"
.validators=${[new Required()]} .validators="${[new Required()]}"
> >
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox> <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox> <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox> <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</lion-checkbox-group> </lion-checkbox-group>
<button @click="${e => validate(e)}">Validate</button> <button @click="${e => validate(e)}">Validate</button>
`; `;
@ -512,11 +512,11 @@ export const checkboxValidationAdvanced = () => {
name="scientists2[]" name="scientists2[]"
label="Favorite scientists" label="Favorite scientists"
help-text="You should have at least 2 of those" help-text="You should have at least 2 of those"
.validators=${[new Required(), new HasMinTwoChecked()]} .validators="${[new Required(), new HasMinTwoChecked()]}"
> >
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox> <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox> <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox> <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</lion-checkbox-group> </lion-checkbox-group>
<button @click="${e => validate(e)}">Validate</button> <button @click="${e => validate(e)}">Validate</button>
`; `;
@ -536,10 +536,10 @@ export const radioValidation = () => {
id="dinos1" id="dinos1"
name="dinos1" name="dinos1"
label="Favourite dinosaur" label="Favourite dinosaur"
.validators=${[new Required()]} .validators="${[new Required()]}"
> >
<lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio> <lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
<lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio> <lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
<lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio> <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
</lion-radio-group> </lion-radio-group>
<button @click="${e => validate(e)}">Validate</button> <button @click="${e => validate(e)}">Validate</button>
@ -575,11 +575,11 @@ export const radioValidationAdvanced = () => {
id="dinos2" id="dinos2"
name="dinos2" name="dinos2"
label="Favourite dinosaur" label="Favourite dinosaur"
.validators=${[new Required(), new IsBrontosaurus()]} .validators="${[new Required(), new IsBrontosaurus()]}"
> >
<lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio> <lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
<lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio> <lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
<lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio> <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
</lion-radio-group> </lion-radio-group>
<button @click="${e => validate(e)}">Validate</button> <button @click="${e => validate(e)}">Validate</button>
`; `;
@ -593,12 +593,12 @@ Validation can be used as normal, below is an example of a combobox with a `Requ
```js preview-story ```js preview-story
export const validationCombobox = () => html` export const validationCombobox = () => html`
<lion-combobox .validators="${[new Required()]}" name="favoriteMovie" label="Favorite movie"> <lion-combobox .validators="${[new Required()]}" name="favoriteMovie" label="Favorite movie">
<lion-option checked .choiceValue=${'Rocky'}>Rocky</lion-option> <lion-option checked .choiceValue="${'Rocky'}">Rocky</lion-option>
<lion-option .choiceValue=${'Rocky II'}>Rocky II</lion-option> <lion-option .choiceValue="${'Rocky II'}">Rocky II</lion-option>
<lion-option .choiceValue=${'Rocky III'}>Rocky III</lion-option> <lion-option .choiceValue="${'Rocky III'}">Rocky III</lion-option>
<lion-option .choiceValue=${'Rocky IV'}>Rocky IV</lion-option> <lion-option .choiceValue="${'Rocky IV'}">Rocky IV</lion-option>
<lion-option .choiceValue=${'Rocky V'}>Rocky V</lion-option> <lion-option .choiceValue="${'Rocky V'}">Rocky V</lion-option>
<lion-option .choiceValue=${'Rocky Balboa'}>Rocky Balboa</lion-option> <lion-option .choiceValue="${'Rocky Balboa'}">Rocky Balboa</lion-option>
</lion-combobox> </lion-combobox>
`; `;
``` ```
@ -762,8 +762,8 @@ According to the W3C specs, Disabled fields should not be validated. Therefore i
export const disabledInputsValidation = () => html` export const disabledInputsValidation = () => html`
<lion-input <lion-input
disabled disabled
.validators=${[new EqualsLength(7)]} .validators="${[new EqualsLength(7)]}"
.modelValue=${'not exactly'} .modelValue="${'not exactly'}"
label="EqualsLength" label="EqualsLength"
></lion-input> ></lion-input>
`; `;
@ -840,7 +840,7 @@ export const backendValidation = () => {
opacity: 0.5; opacity: 0.5;
} }
</style> </style>
<lion-form @submit=${submitHandler}> <lion-form @submit="${submitHandler}">
<form> <form>
<lion-input <lion-input
label="username" label="username"

8
docs/fundamentals/systems/localize/use-cases.md
View file

@ -118,7 +118,7 @@ If you want to fetch it from some API this is also possible.
localize.loadNamespace({ localize.loadNamespace({
'my-hello-component': async locale => { 'my-hello-component': async locale => {
const response = await fetch( const response = await fetch(
`https://api.example.com/?namespace=my-hello-component&locale=${locale}`, `https://api.example.com/?namespace=my-hello-component&locale="${locale}"`,
); );
return response.json(); // resolves to the JSON object `{ greeting: 'Hallo {name}!' }` return response.json(); // resolves to the JSON object `{ greeting: 'Hallo {name}!' }`
}, },
@ -133,7 +133,7 @@ And this is there the second option comes in handy.
```js ```js
// using the regexp to match all component names staring with 'my-' // using the regexp to match all component names staring with 'my-'
localize.setupNamespaceLoader(/my-.+/, async (locale, namespace) => { localize.setupNamespaceLoader(/my-.+/, async (locale, namespace) => {
const response = await fetch(`https://api.example.com/?namespace=${namespace}&locale=${locale}`); const response = await fetch(`https://api.example.com/?namespace="${namespace}&locale=${locale}"`);
return response.json(); return response.json();
}); });
@ -302,14 +302,14 @@ This is sort of a router for the data and is typically needed to fetch it from a
// for one specific component // for one specific component
localize.setupNamespaceLoader('my-hello-component', async locale => { localize.setupNamespaceLoader('my-hello-component', async locale => {
const response = await fetch( const response = await fetch(
`https://api.example.com/?namespace=my-hello-component&locale=${locale}`, `https://api.example.com/?namespace=my-hello-component&locale="${locale}"`,
); );
return response.json(); return response.json();
}); });
// for all components which have a prefix in their names // for all components which have a prefix in their names
localize.setupNamespaceLoader(/my-.+/, async (locale, namespace) => { localize.setupNamespaceLoader(/my-.+/, async (locale, namespace) => {
const response = await fetch(`https://api.example.com/?namespace=${namespace}&locale=${locale}`); const response = await fetch(`https://api.example.com/?namespace="${namespace}&locale=${locale}"`);
return response.json(); return response.json();
}); });
``` ```

8
docs/fundamentals/systems/overlays/_configuration-positioning.md
View file

@ -59,13 +59,13 @@ The `placementMode` property determines the positioning of the `contentNode`:
export const placementLocal = () => { export const placementLocal = () => {
const placementModeLocalConfig = { placementMode: 'local' }; const placementModeLocalConfig = { placementMode: 'local' };
return html` return html`
<demo-el-using-overlaymixin .config=${placementModeLocalConfig}> <demo-el-using-overlaymixin .config="${placementModeLocalConfig}">
<button slot="invoker">Click me to open the local overlay!</button> <button slot="invoker">Click me to open the local overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
class="close-button" class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -81,13 +81,13 @@ export const placementLocal = () => {
export const placementGlobal = () => { export const placementGlobal = () => {
const placementModeGlobalConfig = { placementMode: 'global' }; const placementModeGlobalConfig = { placementMode: 'global' };
return html` return html`
<demo-el-using-overlaymixin .config=${placementModeGlobalConfig}> <demo-el-using-overlaymixin .config="${placementModeGlobalConfig}">
<button slot="invoker">Click me to open the global overlay!</button> <button slot="invoker">Click me to open the global overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
class="close-button" class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>

18
docs/fundamentals/systems/overlays/assets/umbrella-form.js
View file

@ -79,24 +79,24 @@ export class UmbrellaForm extends LitElement {
name="checkers" name="checkers"
.validators="${[new Required()]}" .validators="${[new Required()]}"
> >
<lion-checkbox .choiceValue=${'foo'} checked label="I like foo"></lion-checkbox> <lion-checkbox .choiceValue="${'foo'}" checked label="I like foo"></lion-checkbox>
<lion-checkbox .choiceValue=${'bar'} checked label="I like bar"></lion-checkbox> <lion-checkbox .choiceValue="${'bar'}" checked label="I like bar"></lion-checkbox>
<lion-checkbox .choiceValue=${'baz'} label="I like baz"></lion-checkbox> <lion-checkbox .choiceValue="${'baz'}" label="I like baz"></lion-checkbox>
</lion-checkbox-group> </lion-checkbox-group>
<lion-radio-group <lion-radio-group
name="dinosaurs" name="dinosaurs"
label="Favorite dinosaur" label="Favorite dinosaur"
.validators="${[new Required()]}" .validators="${[new Required()]}"
> >
<lion-radio .choiceValue=${'allosaurus'} label="allosaurus"></lion-radio> <lion-radio .choiceValue="${'allosaurus'}" label="allosaurus"></lion-radio>
<lion-radio .choiceValue=${'brontosaurus'} checked label="brontosaurus"></lion-radio> <lion-radio .choiceValue="${'brontosaurus'}" checked label="brontosaurus"></lion-radio>
<lion-radio .choiceValue=${'diplodocus'} label="diplodocus"></lion-radio> <lion-radio .choiceValue="${'diplodocus'}" label="diplodocus"></lion-radio>
</lion-radio-group> </lion-radio-group>
<lion-select-rich name="favoriteColor" label="Favorite color"> <lion-select-rich name="favoriteColor" label="Favorite color">
<lion-options slot="input"> <lion-options slot="input">
<lion-option .choiceValue=${'red'}>Red</lion-option> <lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option> <lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option> <lion-option .choiceValue="${'teal'}">Teal</lion-option>
</lion-options> </lion-options>
</lion-select-rich> </lion-select-rich>
<lion-select label="Lyrics" name="lyrics" .validators="${[new Required()]}"> <lion-select label="Lyrics" name="lyrics" .validators="${[new Required()]}">

56
docs/fundamentals/systems/overlays/configuration.md
View file

@ -29,13 +29,13 @@ export const placementLocal = () => {
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
<demo-el-using-overlaymixin .config=${placementModeLocalConfig}> <demo-el-using-overlaymixin .config="${placementModeLocalConfig}">
<button slot="invoker">Click me to open the local overlay!</button> <button slot="invoker">Click me to open the local overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
class="close-button" class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -51,13 +51,13 @@ export const placementLocal = () => {
export const placementGlobal = () => { export const placementGlobal = () => {
const placementModeGlobalConfig = { placementMode: 'global' }; const placementModeGlobalConfig = { placementMode: 'global' };
return html` return html`
<demo-el-using-overlaymixin .config=${placementModeGlobalConfig}> <demo-el-using-overlaymixin .config="${placementModeGlobalConfig}">
<button slot="invoker">Click me to open the global overlay!</button> <button slot="invoker">Click me to open the global overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
class="close-button" class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -82,7 +82,7 @@ export const usingTooltipConfig = () => {
const tooltipConfig = { ...withTooltipConfig() }; const tooltipConfig = { ...withTooltipConfig() };
return html` return html`
<demo-el-using-overlaymixin id="tooltip" .config=${tooltipConfig}> <demo-el-using-overlaymixin id="tooltip" .config="${tooltipConfig}">
<button slot="invoker">Hover me to open the tooltip!</button> <button slot="invoker">Hover me to open the tooltip!</button>
<div slot="content" class="demo-overlay">Hello!</div> <div slot="content" class="demo-overlay">Hello!</div>
</demo-el-using-overlaymixin> </demo-el-using-overlaymixin>
@ -103,7 +103,7 @@ You use the feature on any type of overlay.
export const trapsKeyboardFocus = () => { export const trapsKeyboardFocus = () => {
const trapsKeyboardFocusConfig = { ...withDropdownConfig(), trapsKeyboardFocus: true }; const trapsKeyboardFocusConfig = { ...withDropdownConfig(), trapsKeyboardFocus: true };
return html` return html`
<demo-el-using-overlaymixin .config=${trapsKeyboardFocusConfig}> <demo-el-using-overlaymixin .config="${trapsKeyboardFocusConfig}">
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
<div><a href="#">A focusable anchor</a></div> <div><a href="#">A focusable anchor</a></div>
@ -111,7 +111,7 @@ export const trapsKeyboardFocus = () => {
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
class="close-button" class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -129,13 +129,13 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
export const hidesOnEsc = () => { export const hidesOnEsc = () => {
const hidesOnEscConfig = { ...withDropdownConfig(), hidesOnEsc: true }; const hidesOnEscConfig = { ...withDropdownConfig(), hidesOnEsc: true };
return html` return html`
<demo-el-using-overlaymixin .config=${hidesOnEscConfig}> <demo-el-using-overlaymixin .config="${hidesOnEscConfig}">
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
class="close-button" class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -155,13 +155,13 @@ export const hidesOnEscFalse = () => {
hidesOnOutsideEsc: false, hidesOnOutsideEsc: false,
}; };
return html` return html`
<demo-el-using-overlaymixin .config=${hidesOnEscConfig}> <demo-el-using-overlaymixin .config="${hidesOnEscConfig}">
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
class="close-button" class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -179,13 +179,13 @@ Boolean property. When enabled allows closing the overlay on ESC key, even when
export const hidesOnOutsideEsc = () => { export const hidesOnOutsideEsc = () => {
const hidesOnEscConfig = { ...withDropdownConfig(), hidesOnOutsideEsc: true }; const hidesOnEscConfig = { ...withDropdownConfig(), hidesOnOutsideEsc: true };
return html` return html`
<demo-el-using-overlaymixin .config=${hidesOnEscConfig}> <demo-el-using-overlaymixin .config="${hidesOnEscConfig}">
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
class="close-button" class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -203,14 +203,14 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
export const hidesOnOutsideClick = () => { export const hidesOnOutsideClick = () => {
const hidesOnOutsideClickConfig = { ...withDropdownConfig(), hidesOnOutsideClick: true }; const hidesOnOutsideClickConfig = { ...withDropdownConfig(), hidesOnOutsideClick: true };
return html` return html`
<demo-el-using-overlaymixin .config=${hidesOnOutsideClickConfig}> <demo-el-using-overlaymixin .config="${hidesOnOutsideClickConfig}">
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
<label for="myInput">Clicking this label should not trigger close</label> <label for="myInput">Clicking this label should not trigger close</label>
<input id="myInput" /> <input id="myInput" />
<button <button
class="close-button" class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -233,13 +233,13 @@ export const elementToFocusAfterHide = () => {
const elementToFocusAfterHideConfig = { ...withDropdownConfig(), elementToFocusAfterHide: btn }; const elementToFocusAfterHideConfig = { ...withDropdownConfig(), elementToFocusAfterHide: btn };
return html` return html`
<demo-el-using-overlaymixin .config=${elementToFocusAfterHideConfig}> <demo-el-using-overlaymixin .config="${elementToFocusAfterHideConfig}">
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
class="close-button" class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -269,13 +269,13 @@ This currently only supports CSS Animations, because it relies on the `animation
export const hasBackdrop = () => { export const hasBackdrop = () => {
const hasBackdropConfig = { ...withDropdownConfig(), hasBackdrop: true }; const hasBackdropConfig = { ...withDropdownConfig(), hasBackdrop: true };
return html` return html`
<demo-el-using-overlaymixin .config=${hasBackdropConfig}> <demo-el-using-overlaymixin .config="${hasBackdropConfig}">
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
class="close-button" class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -299,19 +299,19 @@ export const isBlocking = () => {
This overlay gets closed when overlay B gets opened This overlay gets closed when overlay B gets opened
<button <button
class="close-button" class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
</div> </div>
</demo-el-using-overlaymixin> </demo-el-using-overlaymixin>
<demo-el-using-overlaymixin .config=${isBlockingConfig}> <demo-el-using-overlaymixin .config="${isBlockingConfig}">
<button slot="invoker">Overlay B: open second</button> <button slot="invoker">Overlay B: open second</button>
<div slot="content" class="demo-overlay demo-overlay--blocking"> <div slot="content" class="demo-overlay demo-overlay--blocking">
Overlay A is hidden... now close me and see overlay A again. Overlay A is hidden... now close me and see overlay A again.
<button <button
class="close-button" class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -332,13 +332,13 @@ Boolean property. When true, prevents scrolling content that is outside of the `
export const preventsScroll = () => { export const preventsScroll = () => {
const preventsScrollConfig = { preventsScroll: true }; const preventsScrollConfig = { preventsScroll: true };
return html` return html`
<demo-el-using-overlaymixin .config=${preventsScrollConfig}> <demo-el-using-overlaymixin .config="${preventsScrollConfig}">
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
class="close-button" class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -371,13 +371,13 @@ export const viewportConfig = () => {
viewportConfig: { placement: 'bottom-left' }, viewportConfig: { placement: 'bottom-left' },
}; };
return html` return html`
<demo-el-using-overlaymixin .config=${viewportConfig}> <demo-el-using-overlaymixin .config="${viewportConfig}">
<button slot="invoker">Click me to open the overlay in the bottom left corner!</button> <button slot="invoker">Click me to open the overlay in the bottom left corner!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
class="close-button" class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -451,13 +451,13 @@ export const popperConfig = () => {
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
<demo-el-using-overlaymixin .config=${popperConfig}> <demo-el-using-overlaymixin .config="${popperConfig}">
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
class="close-button" class="close-button"
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>

2
docs/fundamentals/systems/overlays/overview.md
View file

@ -43,7 +43,7 @@ html`
<div slot="content"> <div slot="content">
This is an overlay This is an overlay
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
>x</button> >x</button>
<div> <div>
<button slot="invoker"> <button slot="invoker">

56
docs/fundamentals/systems/overlays/use-cases.md
View file

@ -29,7 +29,7 @@ export const main = () => html`
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}> <button @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}">
⨯ ⨯
</button> </button>
</div> </div>
@ -152,13 +152,13 @@ The easiest way is declarative. This can be achieved by adding a `<slot name="ba
export const backdrop = () => { export const backdrop = () => {
const responsiveModalDialogConfig = { ...withModalDialogConfig() }; const responsiveModalDialogConfig = { ...withModalDialogConfig() };
return html` return html`
<demo-el-using-overlaymixin .config=${responsiveModalDialogConfig}> <demo-el-using-overlaymixin .config="${responsiveModalDialogConfig}">
<demo-overlay-backdrop slot="backdrop"></demo-overlay-backdrop> <demo-overlay-backdrop slot="backdrop"></demo-overlay-backdrop>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -176,12 +176,12 @@ export const backdropImperative = () => {
const backdropNode = document.createElement('demo-overlay-backdrop'); const backdropNode = document.createElement('demo-overlay-backdrop');
const responsiveModalDialogConfig = { ...withModalDialogConfig(), backdropNode }; const responsiveModalDialogConfig = { ...withModalDialogConfig(), backdropNode };
return html` return html`
<demo-el-using-overlaymixin .config=${responsiveModalDialogConfig}> <demo-el-using-overlaymixin .config="${responsiveModalDialogConfig}">
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -231,13 +231,13 @@ Under the hood, the OverlayController listens to `animationend` event, only then
export const backdropAnimation = () => { export const backdropAnimation = () => {
const responsiveModalDialogConfig = { ...withModalDialogConfig() }; const responsiveModalDialogConfig = { ...withModalDialogConfig() };
return html` return html`
<demo-el-using-overlaymixin .config=${responsiveModalDialogConfig}> <demo-el-using-overlaymixin .config="${responsiveModalDialogConfig}">
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<demo-overlay-backdrop slot="backdrop"></demo-overlay-backdrop> <demo-overlay-backdrop slot="backdrop"></demo-overlay-backdrop>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -262,7 +262,7 @@ export const responsiveSwitching = () => {
const responsiveBottomSheetConfig = { ...withBottomSheetConfig() }; const responsiveBottomSheetConfig = { ...withBottomSheetConfig() };
return html` return html`
<demo-el-using-overlaymixin <demo-el-using-overlaymixin
.config=${responsiveBottomSheetConfig} .config="${responsiveBottomSheetConfig}"
@before-opened=${e => { @before-opened=${e => {
if (window.innerWidth >= 600) { if (window.innerWidth >= 600) {
e.target.config = { ...withModalDialogConfig() }; e.target.config = { ...withModalDialogConfig() };
@ -275,7 +275,7 @@ export const responsiveSwitching = () => {
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -362,12 +362,12 @@ export const responsiveSwitching2 = () => {
</select> </select>
<br /> <br />
<demo-el-using-overlaymixin ${ref(overlayRef)} .config=${getConfig(selectRef.value?.value)}> <demo-el-using-overlaymixin ${ref(overlayRef)} .config="${getConfig(selectRef.value?.value)}">
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -401,13 +401,13 @@ export const openedState = () => {
<demo-el-using-overlaymixin <demo-el-using-overlaymixin
${ref(myRefs.overlay)} ${ref(myRefs.overlay)}
.opened="${appState.opened}" .opened="${appState.opened}"
@opened-changed=${onOpenClosed} @opened-changed="${onOpenClosed}"
> >
<button slot="invoker">Overlay</button> <button slot="invoker">Overlay</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -448,8 +448,8 @@ export const interceptingOpenClose = () => {
</button> </button>
<demo-el-using-overlaymixin <demo-el-using-overlaymixin
${ref(myRefs.overlay)} ${ref(myRefs.overlay)}
@before-closed=${intercept} @before-closed="${intercept}"
@before-opened=${intercept} @before-opened="${intercept}"
> >
<button <button
slot="invoker" slot="invoker"
@ -460,7 +460,7 @@ export const interceptingOpenClose = () => {
</button> </button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button @click=${() => (myRefs.overlay.value.opened = false)}>⨯</button> <button @click="${() => (myRefs.overlay.value.opened = false)}">⨯</button>
</div> </div>
</demo-el-using-overlaymixin> </demo-el-using-overlaymixin>
`; `;
@ -538,29 +538,29 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
export const overlayManager = () => { export const overlayManager = () => {
const hasBackdropConfig = { ...withModalDialogConfig(), hasBackdrop: true }; const hasBackdropConfig = { ...withModalDialogConfig(), hasBackdrop: true };
return html` return html`
<demo-el-using-overlaymixin .config=${hasBackdropConfig}> <demo-el-using-overlaymixin .config="${hasBackdropConfig}">
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
<br /> <br />
<button @click=${e => (document.querySelector('#secondOverlay').opened = true)}> <button @click="${e => (document.querySelector('#secondOverlay').opened = true)}">
Click me to open another overlay which is blocking Click me to open another overlay which is blocking
</button> </button>
</div> </div>
</demo-el-using-overlaymixin> </demo-el-using-overlaymixin>
<demo-el-using-overlaymixin <demo-el-using-overlaymixin
id="secondOverlay" id="secondOverlay"
.config=${{ ...withModalDialogConfig(), hasBackdrop: true, isBlocking: true }} .config="${{ ...withModalDialogConfig(), hasBackdrop: true, isBlocking: true }}"
> >
<div slot="content" class="demo-overlay demo-overlay--second"> <div slot="content" class="demo-overlay demo-overlay--second">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -580,13 +580,13 @@ Here is the example below
export const localBackdrop = () => { export const localBackdrop = () => {
const localBackdropConfig = { ...withDropdownConfig() }; const localBackdropConfig = { ...withDropdownConfig() };
return html` return html`
<demo-el-using-overlaymixin .config=${localBackdropConfig}> <demo-el-using-overlaymixin .config="${localBackdropConfig}">
<demo-overlay-backdrop slot="backdrop"></demo-overlay-backdrop> <demo-overlay-backdrop slot="backdrop"></demo-overlay-backdrop>
<button slot="invoker">Click me to open the overlay!</button> <button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay"> <div slot="content" class="demo-overlay">
Hello! You can close this notification here: Hello! You can close this notification here:
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -611,7 +611,7 @@ export const nestedOverlays = () => {
<div slot="content" id="nestedContent" class="demo-overlay"> <div slot="content" id="nestedContent" class="demo-overlay">
Nested content Nested content
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -619,7 +619,7 @@ export const nestedOverlays = () => {
<button slot="invoker" id="nestedInvoker">nested invoker button</button> <button slot="invoker" id="nestedInvoker">nested invoker button</button>
</demo-el-using-overlaymixin> </demo-el-using-overlaymixin>
<button <button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))} @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
> >
⨯ ⨯
</button> </button>
@ -684,15 +684,15 @@ export const LocalWithArrow = () => {
<button slot="invoker">Top</button> <button slot="invoker">Top</button>
<div slot="content">This is a tooltip with an arrow</div> <div slot="content">This is a tooltip with an arrow</div>
</arrow-example> </arrow-example>
<arrow-example .config=${placementRightConfig}> <arrow-example .config="${placementRightConfig}">
<button slot="invoker">Right</button> <button slot="invoker">Right</button>
<div slot="content">This is a tooltip with an arrow</div> <div slot="content">This is a tooltip with an arrow</div>
</arrow-example> </arrow-example>
<arrow-example .config=${placementBottomConfig}> <arrow-example .config="${placementBottomConfig}">
<button slot="invoker">Bottom</button> <button slot="invoker">Bottom</button>
<div slot="content">This is a tooltip with an arrow</div> <div slot="content">This is a tooltip with an arrow</div>
</arrow-example> </arrow-example>
<arrow-example .config=${placementLeftConfig}> <arrow-example .config="${placementLeftConfig}">
<button slot="invoker">Left</button> <button slot="invoker">Left</button>
<div slot="content">This is a tooltip with an arrow</div> <div slot="content">This is a tooltip with an arrow</div>
</arrow-example> </arrow-example>

40
docs/fundamentals/tools/ajax/use-cases.md
View file

@ -52,8 +52,8 @@ export const getRequest = () => {
--sb-action-logger-max-height: 300px; --sb-action-logger-max-height: 300px;
} }
</style> </style>
<button @click=${() => fetchHandler('pabu')}>Fetch Pabu</button> <button @click="${() => fetchHandler('pabu')}">Fetch Pabu</button>
<button @click=${() => fetchHandler('naga')}>Fetch Naga</button> <button @click="${() => fetchHandler('naga')}">Fetch Naga</button>
${actionLogger} ${actionLogger}
`; `;
}; };
@ -101,8 +101,8 @@ export const getJsonRequest = () => {
--sb-action-logger-max-height: 300px; --sb-action-logger-max-height: 300px;
} }
</style> </style>
<button @click=${() => fetchHandler('pabu')}>Fetch Pabu</button> <button @click="${() => fetchHandler('pabu')}">Fetch Pabu</button>
<button @click=${() => fetchHandler('naga')}>Fetch Naga</button> <button @click="${() => fetchHandler('naga')}">Fetch Naga</button>
${actionLogger} ${actionLogger}
`; `;
}; };
@ -151,7 +151,7 @@ export const errorHandling = () => {
--sb-action-logger-max-height: 300px; --sb-action-logger-max-height: 300px;
} }
</style> </style>
<button @click=${fetchHandler}>Fetch</button> <button @click="${fetchHandler}">Fetch</button>
${actionLogger} ${actionLogger}
`; `;
}; };
@ -239,8 +239,8 @@ export const cache = () => {
--sb-action-logger-max-height: 300px; --sb-action-logger-max-height: 300px;
} }
</style> </style>
<button @click=${() => fetchHandler('pabu')}>Fetch Pabu</button> <button @click="${() => fetchHandler('pabu')}">Fetch Pabu</button>
<button @click=${() => fetchHandler('naga')}>Fetch Naga</button> <button @click="${() => fetchHandler('naga')}">Fetch Naga</button>
${actionLogger} ${actionLogger}
`; `;
}; };
@ -274,8 +274,8 @@ export const cacheActionOptions = () => {
--sb-action-logger-max-height: 300px; --sb-action-logger-max-height: 300px;
} }
</style> </style>
<button @click=${() => fetchHandler('pabu')}>Fetch Pabu</button> <button @click="${() => fetchHandler('pabu')}">Fetch Pabu</button>
<button @click=${() => fetchHandler('naga')}>Fetch Naga</button> <button @click="${() => fetchHandler('naga')}">Fetch Naga</button>
${actionLogger} ${actionLogger}
`; `;
}; };
@ -321,7 +321,7 @@ export const cacheMaxAge = () => {
--sb-action-logger-max-height: 300px; --sb-action-logger-max-height: 300px;
} }
</style> </style>
<button @click=${fetchHandler}>Fetch Pabu</button> <button @click="${fetchHandler}">Fetch Pabu</button>
${actionLogger} ${actionLogger}
`; `;
}; };
@ -355,8 +355,8 @@ export const changeCacheIdentifier = () => {
--sb-action-logger-max-height: 300px; --sb-action-logger-max-height: 300px;
} }
</style> </style>
<button @click=${fetchHandler}>Fetch Pabu</button> <button @click="${fetchHandler}">Fetch Pabu</button>
<button @click=${changeUserHandler}>Change user</button> <button @click="${changeUserHandler}">Change user</button>
${actionLogger} ${actionLogger}
`; `;
}; };
@ -392,10 +392,10 @@ export const nonGETRequest = () => {
--sb-action-logger-max-height: 300px; --sb-action-logger-max-height: 300px;
} }
</style> </style>
<button @click=${() => fetchHandler('pabu', 'GET')}>GET Pabu</button> <button @click="${() => fetchHandler('pabu', 'GET')}">GET Pabu</button>
<button @click=${() => fetchHandler('pabu', 'PATCH')}>PATCH Pabu</button> <button @click="${() => fetchHandler('pabu', 'PATCH')}">PATCH Pabu</button>
<button @click=${() => fetchHandler('naga', 'GET')}>GET Naga</button> <button @click="${() => fetchHandler('naga', 'GET')}">GET Naga</button>
<button @click=${() => fetchHandler('naga', 'PATCH')}>PATCH Naga</button> <button @click="${() => fetchHandler('naga', 'PATCH')}">PATCH Naga</button>
${actionLogger} ${actionLogger}
`; `;
}; };
@ -446,10 +446,10 @@ export const invalidateRules = () => {
--sb-action-logger-max-height: 300px; --sb-action-logger-max-height: 300px;
} }
</style> </style>
<button @click=${() => fetchHandler('pabu', 'GET')}>GET Pabu</button> <button @click="${() => fetchHandler('pabu', 'GET')}">GET Pabu</button>
<button @click=${() => fetchHandler('pabu', 'PATCH')}>PATCH Pabu</button> <button @click="${() => fetchHandler('pabu', 'PATCH')}">PATCH Pabu</button>
<button @click=${() => fetchHandler('naga', 'GET')}>GET Naga</button> <button @click="${() => fetchHandler('naga', 'GET')}">GET Naga</button>
<button @click=${() => fetchHandler('naga', 'PATCH')}>PATCH Naga</button> <button @click="${() => fetchHandler('naga', 'PATCH')}">PATCH Naga</button>
${actionLogger} ${actionLogger}
`; `;
}; };

6
docs/fundamentals/tools/helpers/action-logger.md
View file

@ -112,17 +112,17 @@ export const customTitle = () => {
const uid = Math.random().toString(36).substr(2, 10); const uid = Math.random().toString(36).substr(2, 10);
return html` return html`
<button <button
@click=${e => e.target.parentElement.querySelector(`#logger-${uid}`).log('Hello, World!')} @click="${e => e.target.parentElement.querySelector(`#logger-${uid}`).log('Hello, World!')}"
> >
Log Log
</button> </button>
<sb-action-logger id="logger-${uid}" .title=${'Hello World'}></sb-action-logger> <sb-action-logger id="logger-${uid}" .title="${'Hello World'}"></sb-action-logger>
`; `;
}; };
``` ```
```html ```html
<sb-action-logger .title=${'Hello World'}></sb-action-logger> <sb-action-logger .title="${'Hello World'}"></sb-action-logger>
``` ```
## Rationale ## Rationale

4
docs/fundamentals/tools/singleton-manager/example-complex/demo-app.js
View file

@ -71,7 +71,7 @@ class DemoApp extends LitElement {
<h1>Demo App</h1> <h1>Demo App</h1>
<nav> <nav>
<button <button
class=${this.page === 'A' ? 'active' : ''} class="${this.page === 'A' ? 'active' : ''}"
@click=${() => { @click=${() => {
this.page = 'A'; this.page = 'A';
}} }}
@ -79,7 +79,7 @@ class DemoApp extends LitElement {
Page A Page A
</button> </button>
<button <button
class=${this.page === 'B' ? 'active' : ''} class="${this.page === 'B' ? 'active' : ''}"
@click=${() => { @click=${() => {
this.page = 'B'; this.page = 'B';
}} }}

4
docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js
View file

@ -69,7 +69,7 @@ class DemoApp extends LitElement {
<h1>Demo App</h1> <h1>Demo App</h1>
<nav> <nav>
<button <button
class=${this.page === 'A' ? 'active' : ''} class="${this.page === 'A' ? 'active' : ''}"
@click=${() => { @click=${() => {
this.page = 'A'; this.page = 'A';
}} }}
@ -77,7 +77,7 @@ class DemoApp extends LitElement {
Page A Page A
</button> </button>
<button <button
class=${this.page === 'B' ? 'active' : ''} class="${this.page === 'B' ? 'active' : ''}"
@click=${() => { @click=${() => {
this.page = 'B'; this.page = 'B';
}} }}

4
docs/fundamentals/tools/singleton-manager/example-success/demo-app.js
View file

@ -71,7 +71,7 @@ class DemoApp extends LitElement {
<h1>Demo App</h1> <h1>Demo App</h1>
<nav> <nav>
<button <button
class=${this.page === 'A' ? 'active' : ''} class="${this.page === 'A' ? 'active' : ''}"
@click=${() => { @click=${() => {
this.page = 'A'; this.page = 'A';
}} }}
@ -79,7 +79,7 @@ class DemoApp extends LitElement {
Page A Page A
</button> </button>
<button <button
class=${this.page === 'B' ? 'active' : ''} class="${this.page === 'B' ? 'active' : ''}"
@click=${() => { @click=${() => {
this.page = 'B'; this.page = 'B';
}} }}

2
docs/guides/principles/scoped-elements.md
View file

@ -23,7 +23,7 @@ class MyElement extends ScopedElementsMixin(LitElement) {
render() { render() {
return html` return html`
<lion-input label="Greeting" name="greeting" .modelValue=${'Hello world'}></lion-input> <lion-input label="Greeting" name="greeting" .modelValue="${'Hello world'}"></lion-input>
<lion-button>Save</lion-button> <lion-button>Save</lion-button>
`; `;
} }