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" />
<label for="lastNameId">Last name</label>
<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
>
<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
>
</form>

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

@ -21,7 +21,7 @@ export const selectedDate = () => html`
max-width: 500px;
}
</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>
<lion-calendar
class="demo-calendar"
.disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
.disableDates="${day => day.getDay() === 6 || day.getDay() === 0}"
></lion-calendar>
`;
```
@ -183,7 +183,7 @@ export const combinedDisabledDates = () => {
</style>
<lion-calendar
class="demo-calendar"
.disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
.disableDates="${day => day.getDay() === 6 || day.getDay() === 0}"
.minDate="${new Date()}"
.maxDate="${maxDate}"
></lion-calendar>
@ -215,7 +215,7 @@ export const findingEnabledDates = () => {
</style>
<lion-calendar
class="demo-calendar js-calendar"
.disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
.disableDates="${day => day.getDay() === 6 || day.getDay() === 0}"
></lion-calendar>
<button @click="${ev => getCalendar(ev).focusDate(getCalendar(ev).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
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></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="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</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[]"
label="Favorite scientists"
>
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></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="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</lion-checkbox-group>
```
@ -47,9 +47,9 @@ You can pre-select options by targeting the `modelValue` object of the option an
```html preview-story
<lion-checkbox-group name="scientists" label="Favorite scientists">
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></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="Archimedes" .choiceValue="${'Archimedes'}"></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-group>
```
@ -59,9 +59,9 @@ You can disable the entire group by setting the `disabled` attribute on the `<li
```html preview-story
<lion-checkbox-group name="scientists[]" label="Favorite scientists" disabled>
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></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="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</lion-checkbox-group>
```
@ -71,17 +71,17 @@ You can use `slot="label"` instead of the `label` attribute for defining more co
```html preview-story
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox .choiceValue=${'Archimedes'}>
<lion-checkbox .choiceValue="${'Archimedes'}">
<label slot="label"
><a href="https://wikipedia.org/wiki/Archimedes" target="_blank">Archimedes</a></label
>
</lion-checkbox>
<lion-checkbox .choiceValue=${'Francis Bacon'}>
<lion-checkbox .choiceValue="${'Francis Bacon'}">
<label slot="label"
><a href="https://wikipedia.org/wiki/Francis_Bacon" target="_blank">Francis Bacon</a></label
>
</lion-checkbox>
<lion-checkbox .choiceValue=${'Marie Curie'}>
<lion-checkbox .choiceValue="${'Marie Curie'}">
<label slot="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
label="Archimedes"
.choiceValue=${'Archimedes'}
.choiceValue="${'Archimedes'}"
help-text="Archimedes of Syracuse was a Greek mathematician, physicist, engineer, inventor, and astronomer"
></lion-checkbox>
<lion-checkbox
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"
></lion-checkbox>
<lion-checkbox
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"
></lion-checkbox>
</lion-checkbox-group>
@ -129,9 +129,9 @@ export const event = ({ shadowRoot }) => html`
4,
))}
>
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></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="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</lion-checkbox-group>
<br />
<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
label="Archimedes"
.choiceValue=${'Archimedes'}
.choiceValue="${'Archimedes'}"
></lion-checkbox>
<lion-checkbox label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
<lion-checkbox label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
<lion-checkbox
label="Pythagoras"
.choiceValue=${'Pythagoras'}
.choiceValue="${'Pythagoras'}"
></lion-checkbox>
</lion-checkbox-indeterminate>
<lion-checkbox-indeterminate label="17th Century scientists">
<lion-checkbox
label="Isaac Newton"
.choiceValue=${'Isaac Newton'}
.choiceValue="${'Isaac Newton'}"
></lion-checkbox>
<lion-checkbox
label="Galileo Galilei"
.choiceValue=${'Galileo Galilei'}
.choiceValue="${'Galileo Galilei'}"
></lion-checkbox>
</lion-checkbox-indeterminate>
</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
label="Isaac Newton"
.choiceValue=${'Isaac Newton'}
.choiceValue="${'Isaac Newton'}"
></lion-checkbox>
<lion-checkbox
label="Galileo Galilei"
.choiceValue=${'Galileo Galilei'}
.choiceValue="${'Galileo Galilei'}"
></lion-checkbox>
<lion-checkbox-indeterminate label="Old Greek scientists">
<lion-checkbox
label="Archimedes"
.choiceValue=${'Archimedes'}
.choiceValue="${'Archimedes'}"
></lion-checkbox>
<lion-checkbox label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
<lion-checkbox label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
<lion-checkbox
label="Pythagoras"
.choiceValue=${'Pythagoras'}
.choiceValue="${'Pythagoras'}"
></lion-checkbox>
</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
label="Isaac Newton"
.choiceValue=${'Isaac Newton'}
.choiceValue="${'Isaac Newton'}"
></lion-checkbox>
<lion-checkbox
label="Galileo Galilei"
.choiceValue=${'Galileo Galilei'}
.choiceValue="${'Galileo Galilei'}"
></lion-checkbox>
<lion-checkbox-indeterminate mixed-state label="Old Greek scientists">
<lion-checkbox
label="Archimedes"
.choiceValue=${'Archimedes'}
.choiceValue="${'Archimedes'}"
></lion-checkbox>
<lion-checkbox label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
<lion-checkbox label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
<lion-checkbox
label="Pythagoras"
.choiceValue=${'Pythagoras'}
.choiceValue="${'Pythagoras'}"
></lion-checkbox>
</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>
</lion-collapsible>
<section style="margin-top:16px">
<button @click=${() => shadowRoot.querySelector('#car-collapsible').toggle()}>
<button @click="${() => shadowRoot.querySelector('#car-collapsible').toggle()}">
Toggle content
</button>
<button @click=${() => shadowRoot.querySelector('#car-collapsible').show()}>
<button @click="${() => shadowRoot.querySelector('#car-collapsible').show()}">
Show content
</button>
<button @click=${() => shadowRoot.querySelector('#car-collapsible').hide()}>
<button @click="${() => shadowRoot.querySelector('#car-collapsible').hide()}">
Hide content
</button>
</section>

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

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

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

@ -24,7 +24,7 @@ class SlotsDialogContent extends LitElement {
<div class="actions">
<slot name="actions"></slot>
</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>
<p>Look how nice this <span class="nice">dialog</span> looks!</p>
</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>
<div slot="content">
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>
<button slot="invoker">Click me</button>
</lion-dialog>
@ -35,7 +35,7 @@ export const placementOverrides = () => {
Hello! You can close this notification here:
<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>
@ -88,7 +88,7 @@ export const otherOverrides = () => {
Hello! You can close this dialog here:
<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>

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

@ -125,9 +125,9 @@ export const methods = ({ shadowRoot }) => html`
${demoStyle}
</style>
<section style="margin-top:16px">
<button @click=${() => shadowRoot.querySelector('#drawer').toggle()}>Toggle 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').toggle()}">Toggle content</button>
<button @click="${() => shadowRoot.querySelector('#drawer').show()}">Show content</button>
<button @click="${() => shadowRoot.querySelector('#drawer').hide()}">Hide content</button>
</section>
<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
export const main = () => html`
<lion-fieldset name="nameGroup" label="Name">
<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="firstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
<lion-input name="lastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
</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
export const data = () => html`
<lion-fieldset name="nameGroup" label="Name">
<lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
<button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
<lion-input name="firstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
<lion-input name="lastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
<button @click="${ev => console.log(ev.target.parentElement.modelValue)}">
Log to Action Logger
</button>
</lion-fieldset>
@ -38,14 +38,14 @@ export const disabled = () => {
}
return html`
<lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled>
<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="FirstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
<lion-input name="LastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
<lion-fieldset name="nameGroup2" label="Name">
<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="FirstName2" label="First Name" .modelValue="${'Foo'}" disabled></lion-input>
<lion-input name="LastName2" label="Last Name" .modelValue="${'Bar'}"></lion-input>
</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>
<div slot="label">Personal data</div>
<lion-fieldset name="nameGroup" label="Name">
<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="FirstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
<lion-input name="LastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
</lion-fieldset>
<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-input name="age" label="Age" .modelValue=${21}></lion-input>
<button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
<lion-input name="age" label="Age" .modelValue="${21}"></lion-input>
<button @click="${ev => console.log(ev.target.parentElement.modelValue)}">
Log everything to Action Logger
</button>
<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
</button>
</lion-fieldset>
@ -168,7 +168,7 @@ export const validatingMultipleFieldsets = () => {
}
};
return html`
<lion-fieldset name="outer" .validators=${[new IsCatsDogs()]}>
<lion-fieldset name="outer" .validators="${[new IsCatsDogs()]}">
<lion-fieldset name="inner1">
<label slot="label">Fieldset no. 1</label>
<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`
<lion-form @submit=${submitHandler}>
<form @submit=${ev => ev.preventDefault()}>
<lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
<lion-form @submit="${submitHandler}">
<form @submit="${ev => ev.preventDefault()}">
<lion-input name="firstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
<lion-input name="lastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
<button>Submit</button>
</form>
</lion-form>

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

@ -39,8 +39,8 @@ export const formSubmit = () => {
ev.target.previousElementSibling.submit();
};
return html`
<lion-form @submit=${submitHandler}>
<form @submit=${ev => ev.preventDefault()}>
<lion-form @submit="${submitHandler}">
<form @submit="${ev => ev.preventDefault()}">
<lion-input
name="firstName"
label="First Name"
@ -55,14 +55,14 @@ export const formSubmit = () => {
<button>Submit</button>
<button
type="button"
@click=${ev => ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}
@click="${ev => ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}"
>
Reset
</button>
</div>
</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
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
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"
currency="JOD"
.locale="nl-NL"
.modelValue=${123456.78}
.modelValue="${123456.78}"
></lion-input-amount>
`;
};
@ -66,7 +66,7 @@ Separator characters include:
import { preprocessAmount } from '@lion/ui/input-amount.js';
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
label="Amount"
help-text="Faulty prefilled input will cause error feedback"
.modelValue=${'foo'}
.modelValue="${'foo'}"
></lion-input-amount>
`;
```
@ -96,11 +96,11 @@ export const noDecimals = () => html`
<lion-input-amount
label="Amount"
help-text="Prefilled and formatted"
.formatOptions=${{
.formatOptions="${({
minimumFractionDigits: 0,
maximumFractionDigits: 0,
}}
.modelValue=${20}
})}"
.modelValue="${20}"
>
</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
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
label="MinDate"
help-text="Enter a date greater than or equal to today."
.modelValue=${new Date('2018/05/30')}
.validators=${[new MinDate(new Date())]}
.modelValue="${new Date('2018/05/30')}"
.validators="${[new MinDate(new Date())]}"
>
</lion-input-date>
`;
@ -42,8 +42,8 @@ export const withMaximumDate = () => {
<lion-input-date
label="MaxDate"
help-text="Enter a date smaller than or equal to today."
.modelValue=${new Date('2100/05/30')}
.validators=${[new MaxDate(new Date())]}
.modelValue="${new Date('2100/05/30')}"
.validators="${[new MaxDate(new Date())]}"
></lion-input-date>
`;
};
@ -57,8 +57,8 @@ export const withMinimumAndMaximumDate = () => {
return html`
<lion-input-date
label="MinMaxDate"
.modelValue=${new Date('2018/05/30')}
.validators=${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}
.modelValue="${new Date('2018/05/30')}"
.validators="${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}"
>
<div slot="help-text">
Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate(
@ -77,7 +77,7 @@ export const faultyPrefilled = () => html`
<lion-input-date
label="Date"
help-text="Faulty prefilled input will be cleared"
.modelValue=${'foo'}
.modelValue="${'foo'}"
></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`
<lion-input-datepicker
label="MinMaxDate"
.modelValue=${new Date('2018/05/30')}
.validators=${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}
.modelValue="${new Date('2018/05/30')}"
.validators="${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}"
>
<div slot="help-text">
Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate(
@ -36,8 +36,8 @@ export const disableSpecificDates = () => html`
<lion-input-datepicker
label="IsDateDisabled"
help-text="You're not allowed to choose any 15th."
.modelValue=${new Date('2023/06/15')}
.validators=${[new IsDateDisabled(d => d.getDate() === 15)]}
.modelValue="${new Date('2023/06/15')}"
.validators="${[new IsDateDisabled(d => d.getDate() === 15)]}"
></lion-input-datepicker>
`;
```
@ -53,7 +53,7 @@ export const calendarHeading = () => html`
<lion-input-datepicker
label="Date"
.calendarHeading="${'Custom heading'}"
.modelValue=${new Date()}
.modelValue="${new Date()}"
></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
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`
<lion-input-email
.modelValue=${'foo@bar.com'}
.validators=${[new GmailOnly()]}
.modelValue="${'foo@bar.com'}"
.validators="${[new GmailOnly()]}"
label="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
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
export const faultyPrefilled = () => html`
<lion-input-iban
.modelValue=${'NL20INGB0001234567XXXX'}
.modelValue="${'NL20INGB0001234567XXXX'}"
name="iban"
label="IBAN"
></lion-input-iban>
@ -39,8 +39,8 @@ export const countryRestrictions = () => {
loadDefaultFeedbackMessages();
return html`
<lion-input-iban
.modelValue=${'DE89370400440532013000'}
.validators=${[new IsCountryIBAN('NL')]}
.modelValue="${'DE89370400440532013000'}"
.validators="${[new IsCountryIBAN('NL')]}"
name="iban"
label="IBAN"
></lion-input-iban>
@ -58,8 +58,8 @@ export const countryRestrictionsMultiple = () => {
loadDefaultFeedbackMessages();
return html`
<lion-input-iban
.modelValue=${'DE89370400440532013000'}
.validators=${[new IsCountryIBAN(['BE', 'NL', 'LU'])]}
.modelValue="${'DE89370400440532013000'}"
.validators="${[new IsCountryIBAN(['BE', 'NL', 'LU'])]}"
name="iban"
label="IBAN"
></lion-input-iban>
@ -88,8 +88,8 @@ export const blacklistedCountry = () => {
loadDefaultFeedbackMessages();
return html`
<lion-input-iban
.modelValue=${'DE89370400440532013000'}
.validators=${[new IsNotCountryIBAN(['RO', 'NL'])]}
.modelValue="${'DE89370400440532013000'}"
.validators="${[new IsNotCountryIBAN(['RO', 'NL'])]}"
name="iban"
label="IBAN"
></lion-input-iban>

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

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

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

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

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

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

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

@ -49,7 +49,7 @@ export const helpText = () => html`
```js preview-story
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
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
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
export const main = () => html`
<lion-listbox name="listbox" label="Default">
<lion-option .choiceValue=${'Apple'}>Apple</lion-option>
<lion-option checked .choiceValue=${'Artichoke'}>Artichoke</lion-option>
<lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
<lion-option .choiceValue=${'Banana'}>Banana</lion-option>
<lion-option .choiceValue=${'Beets'}>Beets</lion-option>
<lion-option .choiceValue="${'Apple'}">Apple</lion-option>
<lion-option checked .choiceValue="${'Artichoke'}">Artichoke</lion-option>
<lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
<lion-option .choiceValue="${'Banana'}">Banana</lion-option>
<lion-option .choiceValue="${'Beets'}">Beets</lion-option>
</lion-listbox>
`;
```

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

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

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

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

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

@ -13,9 +13,9 @@ import '@lion/ui/define/lion-radio.js';
```js preview-story
export const main = () => html`
<lion-radio-group name="dinos" label="What are your favourite dinosaurs?">
<lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
<lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
<lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
<lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
<lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
<lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
</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
export const preSelect = () => html`
<lion-radio-group name="dinos_2" label="What are your favourite dinosaurs?">
<lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
<lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'} checked></lion-radio>
<lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
<lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
<lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}" checked></lion-radio>
<lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
</lion-radio-group>
`;
```
@ -47,9 +47,9 @@ You can disable a specific `lion-radio` option by adding the `disabled` attribut
```js preview-story
export const disabledRadio = () => html`
<lion-radio-group name="dinos_4" label="What are your favourite dinosaurs?">
<lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
<lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'} disabled></lion-radio>
<lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
<lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
<lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}" disabled></lion-radio>
<lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
</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
export const disabledGroup = () => html`
<lion-radio-group name="dinos_6" label="What are your favourite dinosaurs?" disabled>
<lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
<lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
<lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
<lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
<lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
<lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
</lion-radio-group>
`;
```
@ -73,17 +73,17 @@ You can use `slot="label"` instead of the `label` attribute for defining more co
```js preview-story
export const label = () => html`
<lion-radio-group name="dinos_7" label="Favourite dinosaur">
<lion-radio .choiceValue=${'allosaurus'}>
<lion-radio .choiceValue="${'allosaurus'}">
<label slot="label"
><a href="https://wikipedia.org/wiki/allosaurus" target="_blank">allosaurus</a></label
>
</lion-radio>
<lion-radio .choiceValue=${'brontosaurus'}>
<lion-radio .choiceValue="${'brontosaurus'}">
<label slot="label"
><a href="https://wikipedia.org/wiki/brontosaurus" target="_blank">brontosaurus</a></label
>
</lion-radio>
<lion-radio .choiceValue=${'diplodocus'}>
<lion-radio .choiceValue="${'diplodocus'}">
<label slot="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
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"
></lion-radio>
<lion-radio
label="brontosaurus"
.choiceValue=${'brontosaurus'}
.choiceValue="${'brontosaurus'}"
help-text="Brontosaurus is a genus of gigantic quadruped sauropod dinosaurs"
></lion-radio>
<lion-radio
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"
></lion-radio>
</lion-radio-group>
@ -130,9 +130,9 @@ export const event = ({ shadowRoot }) => html`
@model-value-changed=${ev =>
(ev.target.parentElement.querySelector('#selectedDinosaur').innerText = ev.target.modelValue)}
>
<lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
<lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
<lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
<lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
<lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
<lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
</lion-radio-group>
<br />
<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
<lion-select-rich name="favoriteColor" label="Favorite color">
<lion-option .choiceValue=${'red'}>Red</lion-option>
<lion-option .choiceValue=${'hotpink'}>Hotpink</lion-option>
<lion-option .choiceValue=${'blue'}>Blue</lion-option>
<lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue="${'hotpink'}">Hotpink</lion-option>
<lion-option .choiceValue="${'blue'}">Blue</lion-option>
</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]}">
<p style="color: green;">I am green</p>
</lion-option>
<lion-option .modelValue"=${modelValues[4]}">
<lion-option .modelValue"="${modelValues[4]}"">
<p style="color: blue;">I am blue</p>
</lion-option>
</lion-select-rich>
@ -84,9 +84,9 @@ The readonly attribute is delegated to the invoker for disabling opening the ove
```html preview-story
<lion-select-rich label="Read-only select" readonly name="color">
<lion-option .choiceValue=${'red'}>Red</lion-option>
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option>
<lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
<lion-option .choiceValue="${'teal'}">Teal</lion-option>
</lion-select-rich>
```
@ -98,19 +98,19 @@ If you disable the entire select, the disabled attribute is also delegated to th
```html preview-story
<lion-select-rich label="Disabled select" disabled name="color">
<lion-option .choiceValue=${'red'}>Red</lion-option>
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option>
<lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
<lion-option .choiceValue="${'teal'}">Teal</lion-option>
</lion-select-rich>
```
```html preview-story
<lion-select-rich label="Disabled options" name="color">
<lion-option .choiceValue=${'red'} disabled>Red</lion-option>
<lion-option .choiceValue=${'blue'}>Blue</lion-option>
<lion-option .choiceValue=${'hotpink'} disabled>Hotpink</lion-option>
<lion-option .choiceValue=${'green'}>Green</lion-option>
<lion-option .choiceValue=${'teal'} disabled>Teal</lion-option>
<lion-option .choiceValue="${'red'}" disabled>Red</lion-option>
<lion-option .choiceValue="${'blue'}">Blue</lion-option>
<lion-option .choiceValue="${'hotpink'}" disabled>Hotpink</lion-option>
<lion-option .choiceValue="${'green'}">Green</lion-option>
<lion-option .choiceValue="${'teal'}" disabled>Teal</lion-option>
</lion-select-rich>
```
@ -134,8 +134,8 @@ export const renderOptions = ({ shadowRoot }) => {
);
}
return html`
<lion-select-rich label="Credit Card" name="color" @model-value-changed=${showOutput}>
${objs.map(obj => html` <lion-option .choiceValue=${obj}>${obj.label}</lion-option> `)}
<lion-select-rich label="Credit Card" name="color" @model-value-changed="${showOutput}">
${objs.map(obj => html` <lion-option .choiceValue="${obj}>${obj.label}</lion-option> `)}"
</lion-select-rich>
<p>Full value:</p>
<pre id="demoRenderOutput"></pre>
@ -152,14 +152,14 @@ This changes the keyboard interaction.
```html preview-story
<lion-select-rich label="Mac mode" name="color" interaction-mode="mac">
<lion-option .choiceValue=${'red'}>Red</lion-option>
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option>
<lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
<lion-option .choiceValue="${'teal'}">Teal</lion-option>
</lion-select-rich>
<lion-select-rich label="Windows/Linux mode" name="color" interaction-mode="windows/linux">
<lion-option .choiceValue=${'red'}>Red</lion-option>
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option>
<lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
<lion-option .choiceValue="${'teal'}">Teal</lion-option>
</lion-select-rich>
```
@ -199,9 +199,9 @@ export const checkedIndexAndValue = ({ shadowRoot }) => html`
Console log checked index and value
</button>
<lion-select-rich id="checkedRichSelect" name="favoriteColor" label="Favorite color">
<lion-option .choiceValue=${'red'}>Red</lion-option>
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option>
<lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
<lion-option .choiceValue="${'teal'}">Teal</lion-option>
</lion-select-rich>
`;
```
@ -223,9 +223,9 @@ For this you can use `has-no-default-selected` attribute.
```html preview-story
<lion-select-rich name="favoriteColor" label="Favorite color" has-no-default-selected>
<lion-option .choiceValue=${'red'}>Red</lion-option>
<lion-option .choiceValue=${'hotpink'}>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option>
<lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue="${'hotpink'}">Hotpink</lion-option>
<lion-option .choiceValue="${'teal'}">Teal</lion-option>
</lion-select-rich>
```
@ -238,7 +238,7 @@ If there is a single option rendered, then `singleOption` property is set to `tr
```html preview-story
<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>
```
@ -259,12 +259,12 @@ class SingleOptionRemoveAdd extends LitElement {
render() {
return html`
<button @click=${this.addOption}>Add an option</button>
<button @click=${this.removeOption}>Remove last option</button>
<button @click="${this.addOption}">Add an option</button>
<button @click="${this.removeOption}">Remove last option</button>
<lion-select-rich name="favoriteColor" label="Favorite color">
<lion-options slot="input">
${this.options.map(
option => html` <lion-option .choiceValue=${option}>${option}</lion-option> `,
option => html` <lion-option .choiceValue="${option}>${option}"</lion-option> `,
)}
</lion-options>
</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.
```html preview-story
<lion-select name="favoriteColor" label="Favorite color" .modelValue=${'hotpink'}>
<lion-select name="favoriteColor" label="Favorite color" .modelValue="${'hotpink'}">
<select slot="input">
<option selected hidden value>Please select</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-step initial-step>
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>
<button type="button" @click=${ev => ev.target.parentElement.controller.previous()}>
<button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
Previous
</button>
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>
<button type="button" @click=${ev => ev.target.parentElement.controller.previous()}>
<button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
Previous
</button>
Step 3

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

@ -12,7 +12,7 @@ export const main = () => html`
<lion-step initial-step>
<p>Welcome</p>
<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>
<p>Are you single?</p>
@ -36,29 +36,29 @@ export const main = () => html`
No
</button>
<br /><br />
<button type="button" @click=${ev => ev.target.parentElement.controller.previous()}>
<button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
Previous
</button>
</lion-step>
<lion-step id="is-single" .condition="${data => data.isSingle}">
<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
</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 id="is-not-single" .condition="${data => data.isSingle}" invert-condition>
<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
</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>
<p>Finish</p>
<button type="button" @click=${ev => ev.target.parentElement.controller.previous()}>
<button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
Previous
</button>
</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
export const selectedIndex = () => html`
<lion-tabs .selectedIndex=${1}>
<lion-tabs .selectedIndex="${1}">
<button slot="tab">Info</button>
<p slot="panel">Info page with lots of information about us.</p>
<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`
<lion-textarea
label="Prefilled"
.modelValue=${['batman', 'and', 'robin'].join('\n')}
.modelValue="${['batman', 'and', 'robin'].join('\n')}"
></lion-textarea>
`;
```
@ -35,7 +35,7 @@ export const readonly = () => html`
<lion-textarea
label="Readonly"
readonly
.modelValue=${['batman', 'and', 'robin'].join('\n')}
.modelValue="${['batman', 'and', 'robin'].join('\n')}"
></lion-textarea>
`;
```
@ -49,7 +49,7 @@ export const stopGrowing = () => html`
<lion-textarea
label="Stop growing"
max-rows="4"
.modelValue=${['batman', 'and', 'robin'].join('\n')}
.modelValue="${['batman', 'and', 'robin'].join('\n')}"
></lion-textarea>
`;
```

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

@ -21,7 +21,7 @@ export const invokerRelation = () => {
margin: 50px;
}
</style>
<lion-tooltip .config=${invokerRelationConfig}>
<lion-tooltip .config="${invokerRelationConfig}">
<button slot="invoker" class="demo-tooltip-invoker">📅</button>
<div slot="content">Agenda<div>
</lion-tooltip>
@ -50,19 +50,19 @@ export const placements = () => {
}
</style>
<div class="demo-box-placements">
<lion-tooltip has-arrow .config=${placementTopConfig}>
<lion-tooltip has-arrow .config="${placementTopConfig}">
<button slot="invoker">Top</button>
<div slot="content">Top placement</div>
</lion-tooltip>
<lion-tooltip has-arrow .config=${placementRightConfig}>
<lion-tooltip has-arrow .config="${placementRightConfig}">
<button slot="invoker">Right</button>
<div slot="content">Right placement</div>
</lion-tooltip>
<lion-tooltip has-arrow .config=${placementBottomConfig}>
<lion-tooltip has-arrow .config="${placementBottomConfig}">
<button slot="invoker">Bottom</button>
<div slot="content">Bottom placement</div>
</lion-tooltip>
<lion-tooltip has-arrow .config=${placementLeftConfig}>
<lion-tooltip has-arrow .config="${placementLeftConfig}">
<button slot="invoker">Left</button>
<div slot="content">Left placement</div>
</lion-tooltip>
@ -120,7 +120,7 @@ export const overridePopperConfig = () => {
margin: 50px;
}
</style>
<lion-tooltip .config=${overridePopperConfig}>
<lion-tooltip .config="${overridePopperConfig}">
<button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
<div slot="content">This is a tooltip<div>
</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"
.parser="${viewValue => Number(viewValue)}"
.modelValue="${1234567890}"
@model-value-changed=${({ target }) => console.log(target)}
@model-value-changed="${({ target }) => console.log(target)}"
></lion-input>
<h-output .show="${['modelValue']}"></h-output>
`;
@ -165,7 +165,7 @@ export const preprocessors = () => {
<lion-input
label="Date Example"
help-text="Uses .preprocessor to prevent digits"
.preprocessor=${preprocess}
.preprocessor="${preprocess}"
></lion-input>
<h-output .show="${['modelValue']}"></h-output>
`;
@ -190,14 +190,14 @@ export const liveFormatters = () => {
label="Live Format"
.modelValue="${new Unparseable('+31')}"
help-text="Uses .preprocessor to format during typing"
.preprocessor=${(viewValue, { currentCaretIndex, prevViewValue }) => {
.preprocessor="${(viewValue, { currentCaretIndex, prevViewValue }) => {
return liveFormatPhoneNumber(viewValue, {
regionCode: 'NL',
formatStrategy: 'international',
currentCaretIndex,
prevViewValue,
});
}}
}}"
></lion-input>
<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()]}"
.fieldName="${'value'}"
>
<lion-checkbox .choiceValue=${'foo'} label="I like foo"></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="${'foo'}" label="I like foo"></lion-checkbox>
<lion-checkbox .choiceValue="${'bar'}" label="I like bar"></lion-checkbox>
<lion-checkbox .choiceValue="${'baz'}" label="I like baz"></lion-checkbox>
</lion-checkbox-group>
<lion-radio-group
name="dinosaurs"
@ -98,14 +98,14 @@ export const main = () => {
.fieldName="${'dinosaur'}"
.validators="${[new Required()]}"
>
<lion-radio .choiceValue=${'allosaurus'} label="allosaurus"></lion-radio>
<lion-radio .choiceValue=${'brontosaurus'} label="brontosaurus"></lion-radio>
<lion-radio .choiceValue=${'diplodocus'} label="diplodocus"></lion-radio>
<lion-radio .choiceValue="${'allosaurus'}" label="allosaurus"></lion-radio>
<lion-radio .choiceValue="${'brontosaurus'}" label="brontosaurus"></lion-radio>
<lion-radio .choiceValue="${'diplodocus'}" label="diplodocus"></lion-radio>
</lion-radio-group>
<lion-listbox name="favoriteFruit" label="Favorite fruit">
<lion-option .choiceValue=${'Apple'}>Apple</lion-option>
<lion-option checked .choiceValue=${'Banana'}>Banana</lion-option>
<lion-option .choiceValue=${'Mango'}>Mango</lion-option>
<lion-option .choiceValue="${'Apple'}">Apple</lion-option>
<lion-option checked .choiceValue="${'Banana'}">Banana</lion-option>
<lion-option .choiceValue="${'Mango'}">Mango</lion-option>
</lion-listbox>
<lion-combobox
.validators="${[new Required()]}"
@ -113,17 +113,17 @@ export const main = () => {
label="Favorite movie"
autocomplete="both"
>
<lion-option checked .choiceValue=${'Rocky'}>Rocky</lion-option>
<lion-option .choiceValue=${'Rocky II'}>Rocky II</lion-option>
<lion-option .choiceValue=${'Rocky III'}>Rocky III</lion-option>
<lion-option .choiceValue=${'Rocky IV'}>Rocky IV</lion-option>
<lion-option .choiceValue=${'Rocky V'}>Rocky V</lion-option>
<lion-option .choiceValue=${'Rocky Balboa'}>Rocky Balboa</lion-option>
<lion-option checked .choiceValue="${'Rocky'}">Rocky</lion-option>
<lion-option .choiceValue="${'Rocky II'}">Rocky II</lion-option>
<lion-option .choiceValue="${'Rocky III'}">Rocky III</lion-option>
<lion-option .choiceValue="${'Rocky IV'}">Rocky IV</lion-option>
<lion-option .choiceValue="${'Rocky V'}">Rocky V</lion-option>
<lion-option .choiceValue="${'Rocky Balboa'}">Rocky Balboa</lion-option>
</lion-combobox>
<lion-select-rich name="favoriteColor" label="Favorite color">
<lion-option .choiceValue=${'red'}>Red</lion-option>
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option>
<lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
<lion-option .choiceValue="${'teal'}">Teal</lion-option>
</lion-select-rich>
<lion-select label="Lyrics" name="lyrics" .validators="${[new Required()]}">
<select slot="input">
@ -162,7 +162,7 @@ export const main = () => {
<div class="buttons">
<lion-button-submit>Submit</lion-button-submit>
<lion-button-reset
@click=${ev => ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}
@click="${ev => ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}"
>Reset</lion-button-reset
>
</div>

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

@ -211,11 +211,11 @@ export const defaultValidationMessages = () => {
.validators="${[new Required(), new MinLength(4)]}"
.modelValue="${'foo'}"
></lion-input>
<button @click=${() => (localize.locale = 'de-DE')}>DE</button>
<button @click=${() => (localize.locale = 'en-GB')}>EN</button>
<button @click=${() => (localize.locale = 'fr-FR')}>FR</button>
<button @click=${() => (localize.locale = 'nl-NL')}>NL</button>
<button @click=${() => (localize.locale = 'zh-CN')}>CN</button>
<button @click="${() => (localize.locale = 'de-DE')}">DE</button>
<button @click="${() => (localize.locale = 'en-GB')}">EN</button>
<button @click="${() => (localize.locale = 'fr-FR')}">FR</button>
<button @click="${() => (localize.locale = 'nl-NL')}">NL</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
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
export const stringValidators = () => html`
<lion-input
.validators=${[new EqualsLength(7)]}
.modelValue=${'not exactly'}
.validators="${[new EqualsLength(7)]}"
.modelValue="${'not exactly'}"
label="EqualsLength"
></lion-input>
<lion-input
.validators=${[new MinLength(10)]}
.modelValue=${'too short'}
.validators="${[new MinLength(10)]}"
.modelValue="${'too short'}"
label="MinLength"
></lion-input>
<lion-input
.validators=${[new MaxLength(7)]}
.modelValue=${'too long'}
.validators="${[new MaxLength(7)]}"
.modelValue="${'too long'}"
label="MaxLength"
></lion-input>
<lion-input
.validators=${[new MinMaxLength({ min: 10, max: 20 })]}
.modelValue=${'that should be enough'}
.validators="${[new MinMaxLength({ min: 10, max: 20 })]}"
.modelValue="${'that should be enough'}"
label="MinMaxLength"
></lion-input>
<lion-input
.validators=${[new Pattern(/#LionRocks/)]}
.modelValue=${'regex checks if "#Lion<NO SPACE>Rocks" is in this input #LionRocks'}
.validators="${[new Pattern(/#LionRocks/)]}"
.modelValue="${'regex checks if "#Lion<NO SPACE>Rocks" is in this input #LionRocks'}"
label="Pattern"
></lion-input>
`;
@ -314,23 +314,23 @@ export const dateValidators = () => {
const tomorrow = new Date(year, month, day + 1);
return html`
<lion-input-date
.validators=${[new IsDate()]}
.modelValue=${'foo'}
.validators="${[new IsDate()]}"
.modelValue="${'foo'}"
label="IsDate"
></lion-input-date>
<lion-input-date
.validators=${[new MinDate(today)]}
.modelValue=${new Date(yesterday)}
.validators="${[new MinDate(today)]}"
.modelValue="${new Date(yesterday)}"
label="MinDate"
></lion-input-date>
<lion-input-date
.validators=${[new MaxDate(today)]}
.modelValue=${new Date(tomorrow)}
.validators="${[new MaxDate(today)]}"
.modelValue="${new Date(tomorrow)}"
label="MaxDate"
></lion-input-date>
<lion-input-date
.validators=${[new MinMaxDate({ min: new Date(yesterday), max: new Date(tomorrow) })]}
.modelValue=${new Date(today)}
.validators="${[new MinMaxDate({ min: new Date(yesterday), max: new Date(tomorrow) })]}"
.modelValue="${new Date(today)}"
label="MinMaxDate"
></lion-input-date>
`;
@ -476,11 +476,11 @@ export const checkboxValidation = () => {
id="scientists"
name="scientists[]"
label="Favorite scientists"
.validators=${[new Required()]}
.validators="${[new Required()]}"
>
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></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="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</lion-checkbox-group>
<button @click="${e => validate(e)}">Validate</button>
`;
@ -512,11 +512,11 @@ export const checkboxValidationAdvanced = () => {
name="scientists2[]"
label="Favorite scientists"
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="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
<lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</lion-checkbox-group>
<button @click="${e => validate(e)}">Validate</button>
`;
@ -536,10 +536,10 @@ export const radioValidation = () => {
id="dinos1"
name="dinos1"
label="Favourite dinosaur"
.validators=${[new Required()]}
.validators="${[new Required()]}"
>
<lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
<lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
<lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
<lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
<lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
</lion-radio-group>
<button @click="${e => validate(e)}">Validate</button>
@ -575,11 +575,11 @@ export const radioValidationAdvanced = () => {
id="dinos2"
name="dinos2"
label="Favourite dinosaur"
.validators=${[new Required(), new IsBrontosaurus()]}
.validators="${[new Required(), new IsBrontosaurus()]}"
>
<lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
<lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
<lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
<lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
<lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
<lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
</lion-radio-group>
<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
export const validationCombobox = () => html`
<lion-combobox .validators="${[new Required()]}" name="favoriteMovie" label="Favorite movie">
<lion-option checked .choiceValue=${'Rocky'}>Rocky</lion-option>
<lion-option .choiceValue=${'Rocky II'}>Rocky II</lion-option>
<lion-option .choiceValue=${'Rocky III'}>Rocky III</lion-option>
<lion-option .choiceValue=${'Rocky IV'}>Rocky IV</lion-option>
<lion-option .choiceValue=${'Rocky V'}>Rocky V</lion-option>
<lion-option .choiceValue=${'Rocky Balboa'}>Rocky Balboa</lion-option>
<lion-option checked .choiceValue="${'Rocky'}">Rocky</lion-option>
<lion-option .choiceValue="${'Rocky II'}">Rocky II</lion-option>
<lion-option .choiceValue="${'Rocky III'}">Rocky III</lion-option>
<lion-option .choiceValue="${'Rocky IV'}">Rocky IV</lion-option>
<lion-option .choiceValue="${'Rocky V'}">Rocky V</lion-option>
<lion-option .choiceValue="${'Rocky Balboa'}">Rocky Balboa</lion-option>
</lion-combobox>
`;
```
@ -762,8 +762,8 @@ According to the W3C specs, Disabled fields should not be validated. Therefore i
export const disabledInputsValidation = () => html`
<lion-input
disabled
.validators=${[new EqualsLength(7)]}
.modelValue=${'not exactly'}
.validators="${[new EqualsLength(7)]}"
.modelValue="${'not exactly'}"
label="EqualsLength"
></lion-input>
`;
@ -840,7 +840,7 @@ export const backendValidation = () => {
opacity: 0.5;
}
</style>
<lion-form @submit=${submitHandler}>
<lion-form @submit="${submitHandler}">
<form>
<lion-input
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({
'my-hello-component': async locale => {
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}!' }`
},
@ -133,7 +133,7 @@ And this is there the second option comes in handy.
```js
// using the regexp to match all component names staring with 'my-'
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();
});
@ -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
localize.setupNamespaceLoader('my-hello-component', async locale => {
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();
});
// for all components which have a prefix in their names
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();
});
```

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 = () => {
const placementModeLocalConfig = { placementMode: 'local' };
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>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<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>
@ -81,13 +81,13 @@ export const placementLocal = () => {
export const placementGlobal = () => {
const placementModeGlobalConfig = { placementMode: 'global' };
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>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<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>

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

@ -79,24 +79,24 @@ export class UmbrellaForm extends LitElement {
name="checkers"
.validators="${[new Required()]}"
>
<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=${'baz'} label="I like baz"></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="${'baz'}" label="I like baz"></lion-checkbox>
</lion-checkbox-group>
<lion-radio-group
name="dinosaurs"
label="Favorite dinosaur"
.validators="${[new Required()]}"
>
<lion-radio .choiceValue=${'allosaurus'} label="allosaurus"></lion-radio>
<lion-radio .choiceValue=${'brontosaurus'} checked label="brontosaurus"></lion-radio>
<lion-radio .choiceValue=${'diplodocus'} label="diplodocus"></lion-radio>
<lion-radio .choiceValue="${'allosaurus'}" label="allosaurus"></lion-radio>
<lion-radio .choiceValue="${'brontosaurus'}" checked label="brontosaurus"></lion-radio>
<lion-radio .choiceValue="${'diplodocus'}" label="diplodocus"></lion-radio>
</lion-radio-group>
<lion-select-rich name="favoriteColor" label="Favorite color">
<lion-options slot="input">
<lion-option .choiceValue=${'red'}>Red</lion-option>
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option>
<lion-option .choiceValue="${'red'}">Red</lion-option>
<lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
<lion-option .choiceValue="${'teal'}">Teal</lion-option>
</lion-options>
</lion-select-rich>
<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;
}
</style>
<demo-el-using-overlaymixin .config=${placementModeLocalConfig}>
<demo-el-using-overlaymixin .config="${placementModeLocalConfig}">
<button slot="invoker">Click me to open the local overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<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>
@ -51,13 +51,13 @@ export const placementLocal = () => {
export const placementGlobal = () => {
const placementModeGlobalConfig = { placementMode: 'global' };
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>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<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>
@ -82,7 +82,7 @@ export const usingTooltipConfig = () => {
const tooltipConfig = { ...withTooltipConfig() };
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>
<div slot="content" class="demo-overlay">Hello!</div>
</demo-el-using-overlaymixin>
@ -103,7 +103,7 @@ You use the feature on any type of overlay.
export const trapsKeyboardFocus = () => {
const trapsKeyboardFocusConfig = { ...withDropdownConfig(), trapsKeyboardFocus: true };
return html`
<demo-el-using-overlaymixin .config=${trapsKeyboardFocusConfig}>
<demo-el-using-overlaymixin .config="${trapsKeyboardFocusConfig}">
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
<div><a href="#">A focusable anchor</a></div>
@ -111,7 +111,7 @@ export const trapsKeyboardFocus = () => {
Hello! You can close this notification here:
<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>
@ -129,13 +129,13 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
export const hidesOnEsc = () => {
const hidesOnEscConfig = { ...withDropdownConfig(), hidesOnEsc: true };
return html`
<demo-el-using-overlaymixin .config=${hidesOnEscConfig}>
<demo-el-using-overlaymixin .config="${hidesOnEscConfig}">
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<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>
@ -155,13 +155,13 @@ export const hidesOnEscFalse = () => {
hidesOnOutsideEsc: false,
};
return html`
<demo-el-using-overlaymixin .config=${hidesOnEscConfig}>
<demo-el-using-overlaymixin .config="${hidesOnEscConfig}">
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<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>
@ -179,13 +179,13 @@ Boolean property. When enabled allows closing the overlay on ESC key, even when
export const hidesOnOutsideEsc = () => {
const hidesOnEscConfig = { ...withDropdownConfig(), hidesOnOutsideEsc: true };
return html`
<demo-el-using-overlaymixin .config=${hidesOnEscConfig}>
<demo-el-using-overlaymixin .config="${hidesOnEscConfig}">
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<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>
@ -203,14 +203,14 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
export const hidesOnOutsideClick = () => {
const hidesOnOutsideClickConfig = { ...withDropdownConfig(), hidesOnOutsideClick: true };
return html`
<demo-el-using-overlaymixin .config=${hidesOnOutsideClickConfig}>
<demo-el-using-overlaymixin .config="${hidesOnOutsideClickConfig}">
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
<label for="myInput">Clicking this label should not trigger close</label>
<input id="myInput" />
<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>
@ -233,13 +233,13 @@ export const elementToFocusAfterHide = () => {
const elementToFocusAfterHideConfig = { ...withDropdownConfig(), elementToFocusAfterHide: btn };
return html`
<demo-el-using-overlaymixin .config=${elementToFocusAfterHideConfig}>
<demo-el-using-overlaymixin .config="${elementToFocusAfterHideConfig}">
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<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>
@ -269,13 +269,13 @@ This currently only supports CSS Animations, because it relies on the `animation
export const hasBackdrop = () => {
const hasBackdropConfig = { ...withDropdownConfig(), hasBackdrop: true };
return html`
<demo-el-using-overlaymixin .config=${hasBackdropConfig}>
<demo-el-using-overlaymixin .config="${hasBackdropConfig}">
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<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>
@ -299,19 +299,19 @@ export const isBlocking = () => {
This overlay gets closed when overlay B gets opened
<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>
</div>
</demo-el-using-overlaymixin>
<demo-el-using-overlaymixin .config=${isBlockingConfig}>
<demo-el-using-overlaymixin .config="${isBlockingConfig}">
<button slot="invoker">Overlay B: open second</button>
<div slot="content" class="demo-overlay demo-overlay--blocking">
Overlay A is hidden... now close me and see overlay A again.
<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>
@ -332,13 +332,13 @@ Boolean property. When true, prevents scrolling content that is outside of the `
export const preventsScroll = () => {
const preventsScrollConfig = { preventsScroll: true };
return html`
<demo-el-using-overlaymixin .config=${preventsScrollConfig}>
<demo-el-using-overlaymixin .config="${preventsScrollConfig}">
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<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>
@ -371,13 +371,13 @@ export const viewportConfig = () => {
viewportConfig: { placement: 'bottom-left' },
};
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>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<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>
@ -451,13 +451,13 @@ export const popperConfig = () => {
border: 1px solid black;
}
</style>
<demo-el-using-overlaymixin .config=${popperConfig}>
<demo-el-using-overlaymixin .config="${popperConfig}">
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<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>

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

@ -43,7 +43,7 @@ html`
<div slot="content">
This is an overlay
<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>
<div>
<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>
<div slot="content" class="demo-overlay">
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>
</div>
@ -152,13 +152,13 @@ The easiest way is declarative. This can be achieved by adding a `<slot name="ba
export const backdrop = () => {
const responsiveModalDialogConfig = { ...withModalDialogConfig() };
return html`
<demo-el-using-overlaymixin .config=${responsiveModalDialogConfig}>
<demo-el-using-overlaymixin .config="${responsiveModalDialogConfig}">
<demo-overlay-backdrop slot="backdrop"></demo-overlay-backdrop>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
>
⨯
</button>
@ -176,12 +176,12 @@ export const backdropImperative = () => {
const backdropNode = document.createElement('demo-overlay-backdrop');
const responsiveModalDialogConfig = { ...withModalDialogConfig(), backdropNode };
return html`
<demo-el-using-overlaymixin .config=${responsiveModalDialogConfig}>
<demo-el-using-overlaymixin .config="${responsiveModalDialogConfig}">
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
>
⨯
</button>
@ -231,13 +231,13 @@ Under the hood, the OverlayController listens to `animationend` event, only then
export const backdropAnimation = () => {
const responsiveModalDialogConfig = { ...withModalDialogConfig() };
return html`
<demo-el-using-overlaymixin .config=${responsiveModalDialogConfig}>
<demo-el-using-overlaymixin .config="${responsiveModalDialogConfig}">
<button slot="invoker">Click me to open the overlay!</button>
<demo-overlay-backdrop slot="backdrop"></demo-overlay-backdrop>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
>
⨯
</button>
@ -262,7 +262,7 @@ export const responsiveSwitching = () => {
const responsiveBottomSheetConfig = { ...withBottomSheetConfig() };
return html`
<demo-el-using-overlaymixin
.config=${responsiveBottomSheetConfig}
.config="${responsiveBottomSheetConfig}"
@before-opened=${e => {
if (window.innerWidth >= 600) {
e.target.config = { ...withModalDialogConfig() };
@ -275,7 +275,7 @@ export const responsiveSwitching = () => {
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
>
⨯
</button>
@ -362,12 +362,12 @@ export const responsiveSwitching2 = () => {
</select>
<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>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
>
⨯
</button>
@ -401,13 +401,13 @@ export const openedState = () => {
<demo-el-using-overlaymixin
${ref(myRefs.overlay)}
.opened="${appState.opened}"
@opened-changed=${onOpenClosed}
@opened-changed="${onOpenClosed}"
>
<button slot="invoker">Overlay</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
>
⨯
</button>
@ -448,8 +448,8 @@ export const interceptingOpenClose = () => {
</button>
<demo-el-using-overlaymixin
${ref(myRefs.overlay)}
@before-closed=${intercept}
@before-opened=${intercept}
@before-closed="${intercept}"
@before-opened="${intercept}"
>
<button
slot="invoker"
@ -460,7 +460,7 @@ export const interceptingOpenClose = () => {
</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button @click=${() => (myRefs.overlay.value.opened = false)}>⨯</button>
<button @click="${() => (myRefs.overlay.value.opened = false)}">⨯</button>
</div>
</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 = () => {
const hasBackdropConfig = { ...withModalDialogConfig(), hasBackdrop: true };
return html`
<demo-el-using-overlaymixin .config=${hasBackdropConfig}>
<demo-el-using-overlaymixin .config="${hasBackdropConfig}">
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
>
⨯
</button>
<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
</button>
</div>
</demo-el-using-overlaymixin>
<demo-el-using-overlaymixin
id="secondOverlay"
.config=${{ ...withModalDialogConfig(), hasBackdrop: true, isBlocking: true }}
.config="${{ ...withModalDialogConfig(), hasBackdrop: true, isBlocking: true }}"
>
<div slot="content" class="demo-overlay demo-overlay--second">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
>
⨯
</button>
@ -580,13 +580,13 @@ Here is the example below
export const localBackdrop = () => {
const localBackdropConfig = { ...withDropdownConfig() };
return html`
<demo-el-using-overlaymixin .config=${localBackdropConfig}>
<demo-el-using-overlaymixin .config="${localBackdropConfig}">
<demo-overlay-backdrop slot="backdrop"></demo-overlay-backdrop>
<button slot="invoker">Click me to open the overlay!</button>
<div slot="content" class="demo-overlay">
Hello! You can close this notification here:
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
>
⨯
</button>
@ -611,7 +611,7 @@ export const nestedOverlays = () => {
<div slot="content" id="nestedContent" class="demo-overlay">
Nested content
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
>
⨯
</button>
@ -619,7 +619,7 @@ export const nestedOverlays = () => {
<button slot="invoker" id="nestedInvoker">nested invoker button</button>
</demo-el-using-overlaymixin>
<button
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
>
⨯
</button>
@ -684,15 +684,15 @@ export const LocalWithArrow = () => {
<button slot="invoker">Top</button>
<div slot="content">This is a tooltip with an arrow</div>
</arrow-example>
<arrow-example .config=${placementRightConfig}>
<arrow-example .config="${placementRightConfig}">
<button slot="invoker">Right</button>
<div slot="content">This is a tooltip with an arrow</div>
</arrow-example>
<arrow-example .config=${placementBottomConfig}>
<arrow-example .config="${placementBottomConfig}">
<button slot="invoker">Bottom</button>
<div slot="content">This is a tooltip with an arrow</div>
</arrow-example>
<arrow-example .config=${placementLeftConfig}>
<arrow-example .config="${placementLeftConfig}">
<button slot="invoker">Left</button>
<div slot="content">This is a tooltip with an arrow</div>
</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;
}
</style>
<button @click=${() => fetchHandler('pabu')}>Fetch Pabu</button>
<button @click=${() => fetchHandler('naga')}>Fetch Naga</button>
<button @click="${() => fetchHandler('pabu')}">Fetch Pabu</button>
<button @click="${() => fetchHandler('naga')}">Fetch Naga</button>
${actionLogger}
`;
};
@ -101,8 +101,8 @@ export const getJsonRequest = () => {
--sb-action-logger-max-height: 300px;
}
</style>
<button @click=${() => fetchHandler('pabu')}>Fetch Pabu</button>
<button @click=${() => fetchHandler('naga')}>Fetch Naga</button>
<button @click="${() => fetchHandler('pabu')}">Fetch Pabu</button>
<button @click="${() => fetchHandler('naga')}">Fetch Naga</button>
${actionLogger}
`;
};
@ -151,7 +151,7 @@ export const errorHandling = () => {
--sb-action-logger-max-height: 300px;
}
</style>
<button @click=${fetchHandler}>Fetch</button>
<button @click="${fetchHandler}">Fetch</button>
${actionLogger}
`;
};
@ -239,8 +239,8 @@ export const cache = () => {
--sb-action-logger-max-height: 300px;
}
</style>
<button @click=${() => fetchHandler('pabu')}>Fetch Pabu</button>
<button @click=${() => fetchHandler('naga')}>Fetch Naga</button>
<button @click="${() => fetchHandler('pabu')}">Fetch Pabu</button>
<button @click="${() => fetchHandler('naga')}">Fetch Naga</button>
${actionLogger}
`;
};
@ -274,8 +274,8 @@ export const cacheActionOptions = () => {
--sb-action-logger-max-height: 300px;
}
</style>
<button @click=${() => fetchHandler('pabu')}>Fetch Pabu</button>
<button @click=${() => fetchHandler('naga')}>Fetch Naga</button>
<button @click="${() => fetchHandler('pabu')}">Fetch Pabu</button>
<button @click="${() => fetchHandler('naga')}">Fetch Naga</button>
${actionLogger}
`;
};
@ -321,7 +321,7 @@ export const cacheMaxAge = () => {
--sb-action-logger-max-height: 300px;
}
</style>
<button @click=${fetchHandler}>Fetch Pabu</button>
<button @click="${fetchHandler}">Fetch Pabu</button>
${actionLogger}
`;
};
@ -355,8 +355,8 @@ export const changeCacheIdentifier = () => {
--sb-action-logger-max-height: 300px;
}
</style>
<button @click=${fetchHandler}>Fetch Pabu</button>
<button @click=${changeUserHandler}>Change user</button>
<button @click="${fetchHandler}">Fetch Pabu</button>
<button @click="${changeUserHandler}">Change user</button>
${actionLogger}
`;
};
@ -392,10 +392,10 @@ export const nonGETRequest = () => {
--sb-action-logger-max-height: 300px;
}
</style>
<button @click=${() => fetchHandler('pabu', 'GET')}>GET Pabu</button>
<button @click=${() => fetchHandler('pabu', 'PATCH')}>PATCH Pabu</button>
<button @click=${() => fetchHandler('naga', 'GET')}>GET Naga</button>
<button @click=${() => fetchHandler('naga', 'PATCH')}>PATCH Naga</button>
<button @click="${() => fetchHandler('pabu', 'GET')}">GET Pabu</button>
<button @click="${() => fetchHandler('pabu', 'PATCH')}">PATCH Pabu</button>
<button @click="${() => fetchHandler('naga', 'GET')}">GET Naga</button>
<button @click="${() => fetchHandler('naga', 'PATCH')}">PATCH Naga</button>
${actionLogger}
`;
};
@ -446,10 +446,10 @@ export const invalidateRules = () => {
--sb-action-logger-max-height: 300px;
}
</style>
<button @click=${() => fetchHandler('pabu', 'GET')}>GET Pabu</button>
<button @click=${() => fetchHandler('pabu', 'PATCH')}>PATCH Pabu</button>
<button @click=${() => fetchHandler('naga', 'GET')}>GET Naga</button>
<button @click=${() => fetchHandler('naga', 'PATCH')}>PATCH Naga</button>
<button @click="${() => fetchHandler('pabu', 'GET')}">GET Pabu</button>
<button @click="${() => fetchHandler('pabu', 'PATCH')}">PATCH Pabu</button>
<button @click="${() => fetchHandler('naga', 'GET')}">GET Naga</button>
<button @click="${() => fetchHandler('naga', 'PATCH')}">PATCH Naga</button>
${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);
return html`
<button
@click=${e => e.target.parentElement.querySelector(`#logger-${uid}`).log('Hello, World!')}
@click="${e => e.target.parentElement.querySelector(`#logger-${uid}`).log('Hello, World!')}"
>
Log
</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
<sb-action-logger .title=${'Hello World'}></sb-action-logger>
<sb-action-logger .title="${'Hello World'}"></sb-action-logger>
```
## 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>
<nav>
<button
class=${this.page === 'A' ? 'active' : ''}
class="${this.page === 'A' ? 'active' : ''}"
@click=${() => {
this.page = 'A';
}}
@ -79,7 +79,7 @@ class DemoApp extends LitElement {
Page A
</button>
<button
class=${this.page === 'B' ? 'active' : ''}
class="${this.page === 'B' ? 'active' : ''}"
@click=${() => {
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>
<nav>
<button
class=${this.page === 'A' ? 'active' : ''}
class="${this.page === 'A' ? 'active' : ''}"
@click=${() => {
this.page = 'A';
}}
@ -77,7 +77,7 @@ class DemoApp extends LitElement {
Page A
</button>
<button
class=${this.page === 'B' ? 'active' : ''}
class="${this.page === 'B' ? 'active' : ''}"
@click=${() => {
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>
<nav>
<button
class=${this.page === 'A' ? 'active' : ''}
class="${this.page === 'A' ? 'active' : ''}"
@click=${() => {
this.page = 'A';
}}
@ -79,7 +79,7 @@ class DemoApp extends LitElement {
Page A
</button>
<button
class=${this.page === 'B' ? 'active' : ''}
class="${this.page === 'B' ? 'active' : ''}"
@click=${() => {
this.page = 'B';
}}

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

@ -23,7 +23,7 @@ class MyElement extends ScopedElementsMixin(LitElement) {
render() {
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>
`;
}