mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 19:01:05 +00:00
feat(prettier): add svelteBracketNewLine
This commit is contained in:
josefaidt
parent
7a28d21ceb
commit
398887a3d3
182 changed files with 974 additions and 494 deletions
|
|
@ -22,11 +22,13 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
{#if open}
|
||||
<li
|
||||
class:bx--accordion__item="{true}"
|
||||
class:bx--accordion__item--active="{true}">
|
||||
class:bx--accordion__item--active="{true}"
|
||||
>
|
||||
<span class:bx--accordion__heading="{true}">
|
||||
<ChevronRight16 class="bx--accordion__arrow" />
|
||||
<SkeletonText class="bx--accordion__title" />
|
||||
|
|
|
|||
|
|
@ -20,7 +20,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave />
|
||||
on:mouseleave
|
||||
/>
|
||||
{:else}
|
||||
<ul
|
||||
class:bx--accordion="{true}"
|
||||
|
|
@ -29,7 +30,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<slot />
|
||||
</ul>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,8 @@
|
|||
on:animationend
|
||||
on:animationend="{() => {
|
||||
animation = undefined;
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class:bx--accordion__heading="{true}"
|
||||
|
|
@ -50,10 +51,12 @@
|
|||
if (open && key === 'Escape') {
|
||||
open = false;
|
||||
}
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<ChevronRight16
|
||||
class="bx--accordion__arrow"
|
||||
aria-label="{iconDescription}" />
|
||||
aria-label="{iconDescription}"
|
||||
/>
|
||||
<div class="bx--accordion__title">
|
||||
<slot name="title">{title}</slot>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
{#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
|
||||
<div class:bx--breadcrumb-item="{true}">
|
||||
<span class:bx--link="{true}"> </span>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave />
|
||||
on:mouseleave
|
||||
/>
|
||||
{:else}
|
||||
<nav
|
||||
aria-label="Breadcrumb"
|
||||
|
|
@ -28,10 +29,12 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<ol
|
||||
class:bx--breadcrumb="{true}"
|
||||
class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}">
|
||||
class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
|
||||
>
|
||||
<slot />
|
||||
</ol>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -21,13 +21,15 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
{#if href}
|
||||
<Link href="{href}" aria-current="{$$restProps['aria-current']}">
|
||||
<slot />
|
||||
</Link>
|
||||
{:else}
|
||||
<slot
|
||||
props="{{ 'aria-current': $$restProps['aria-current'], class: 'bx--link' }}" />
|
||||
props="{{ 'aria-current': $$restProps['aria-current'], class: 'bx--link' }}"
|
||||
/>
|
||||
{/if}
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
{''}
|
||||
</a>
|
||||
{:else}
|
||||
|
|
@ -35,5 +36,6 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave></div>
|
||||
on:mouseleave
|
||||
></div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -129,7 +129,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave />
|
||||
on:mouseleave
|
||||
/>
|
||||
{:else}
|
||||
{#if as}
|
||||
<slot props="{buttonProps}" />
|
||||
|
|
@ -141,7 +142,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
{#if hasIconOnly}
|
||||
<span class:bx--assistive-text="{true}">{iconDescription}</span>
|
||||
{/if}
|
||||
|
|
@ -151,7 +153,8 @@
|
|||
this="{icon}"
|
||||
aria-hidden="true"
|
||||
class="bx--btn__icon"
|
||||
aria-label="{iconDescription}" />
|
||||
aria-label="{iconDescription}"
|
||||
/>
|
||||
{/if}
|
||||
</a>
|
||||
{:else}
|
||||
|
|
@ -161,7 +164,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
{#if hasIconOnly}
|
||||
<span class:bx--assistive-text="{true}">{iconDescription}</span>
|
||||
{/if}
|
||||
|
|
@ -171,7 +175,8 @@
|
|||
this="{icon}"
|
||||
aria-hidden="true"
|
||||
class="bx--btn__icon"
|
||||
aria-label="{iconDescription}" />
|
||||
aria-label="{iconDescription}"
|
||||
/>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
<div
|
||||
class:bx--btn-set="{true}"
|
||||
class:bx--btn-set--stacked="{stacked}"
|
||||
{...$$restProps}>
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,10 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<span
|
||||
class:bx--checkbox-label-text="{true}"
|
||||
class:bx--skeleton="{true}"></span>
|
||||
class:bx--skeleton="{true}"
|
||||
></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,8 @@
|
|||
bind:checked
|
||||
on:check="{({ detail }) => {
|
||||
console.log('on:check', detail);
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
<Checkbox {...checkboxProps} id="checkbox-label-2" checked />
|
||||
</fieldset>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -79,7 +79,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave />
|
||||
on:mouseleave
|
||||
/>
|
||||
{:else}
|
||||
<div
|
||||
class:bx--form-item="{true}"
|
||||
|
|
@ -88,7 +89,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
type="checkbox"
|
||||
|
|
@ -102,11 +104,13 @@
|
|||
on:change
|
||||
on:change="{() => {
|
||||
checked = !checked;
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
<label for="{id}" title="{title}" class:bx--checkbox-label="{true}">
|
||||
<span
|
||||
class:bx--checkbox-label-text="{true}"
|
||||
class:bx--visually-hidden="{hideLabel}">
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
>
|
||||
{labelText}
|
||||
</span>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<div class:bx--snippet-container="{true}">
|
||||
{#if type === 'single'}
|
||||
<span></span>
|
||||
|
|
|
|||
|
|
@ -111,7 +111,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave />
|
||||
on:mouseleave
|
||||
/>
|
||||
{:else}
|
||||
{#if type === 'inline'}
|
||||
{#if hideCopyButton}
|
||||
|
|
@ -121,7 +122,8 @@
|
|||
{expanded && 'bx--snippet--expand'}
|
||||
{light && 'bx--snippet--light'}
|
||||
{hideCopyButton && 'bx--snippet--no-copy'}"
|
||||
{...$$restProps}>
|
||||
{...$$restProps}
|
||||
>
|
||||
<code id="{id}">
|
||||
<slot>{code}</slot>
|
||||
</code>
|
||||
|
|
@ -141,7 +143,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<code id="{id}">
|
||||
<slot>{code}</slot>
|
||||
</code>
|
||||
|
|
@ -158,12 +161,14 @@
|
|||
class="{type && `bx--snippet--${type}`} {$$restProps.class}"
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<div
|
||||
role="{type === 'single' ? 'textbox' : undefined}"
|
||||
tabindex="{type === 'single' ? '0' : undefined}"
|
||||
class:bx--snippet-container="{true}"
|
||||
aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}">
|
||||
aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
|
||||
>
|
||||
<code>
|
||||
<pre bind:this="{ref}">
|
||||
<slot>{code}</slot>
|
||||
|
|
@ -176,7 +181,8 @@
|
|||
feedbackTimeout="{feedbackTimeout}"
|
||||
iconDescription="{copyButtonDescription}"
|
||||
on:click
|
||||
on:animationend />
|
||||
on:animationend
|
||||
/>
|
||||
{/if}
|
||||
{#if showMoreLess}
|
||||
<Button
|
||||
|
|
@ -185,11 +191,13 @@
|
|||
class="bx--snippet-btn--expand"
|
||||
on:click="{() => {
|
||||
expanded = !expanded;
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<span class:bx--snippet-btn--text="{true}">{expandText}</span>
|
||||
<ChevronDown16
|
||||
class="bx--icon-chevron--down bx--snippet__icon"
|
||||
aria-label="{expandText}" />
|
||||
aria-label="{expandText}"
|
||||
/>
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -33,21 +33,23 @@
|
|||
<p>
|
||||
<code>items</code> must be an array of objects; mandatory fields are `id` and `text`.
|
||||
</p>
|
||||
<pre
|
||||
style="margin-top: 1rem;">
|
||||
<code>{'items = Array<{ id: string; text: string; }>'}</code>
|
||||
<pre style="margin-top: 1rem;">
|
||||
<code
|
||||
>{'items = Array<{ id: string; text: string; }>'}</code>
|
||||
</pre>
|
||||
<div style="margin-top: 2rem;">
|
||||
<ToggleSmall
|
||||
labelText="Enable filtering"
|
||||
bind:toggled
|
||||
style="margin-top: 1rem;" />
|
||||
style="margin-top: 1rem;"
|
||||
/>
|
||||
<Button
|
||||
size="small"
|
||||
on:click="{() => {
|
||||
selectedIndex = 1;
|
||||
}}"
|
||||
style="margin-top: 1rem;">
|
||||
style="margin-top: 1rem;"
|
||||
>
|
||||
Set item to "Option 2"
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -65,5 +67,6 @@
|
|||
console.log('on:clear');
|
||||
}}"
|
||||
items="{items}"
|
||||
shouldFilterItem="{shouldFilterItem}" />
|
||||
shouldFilterItem="{shouldFilterItem}"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -183,7 +183,8 @@
|
|||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}">
|
||||
class:bx--label--disabled="{disabled}"
|
||||
>
|
||||
{titleText}
|
||||
</label>
|
||||
{/if}
|
||||
|
|
@ -196,7 +197,8 @@
|
|||
invalidText="{invalidText}"
|
||||
open="{open}"
|
||||
light="{light}"
|
||||
size="{size}">
|
||||
size="{size}"
|
||||
>
|
||||
<ListBoxField
|
||||
role="button"
|
||||
aria-expanded="{open}"
|
||||
|
|
@ -206,7 +208,8 @@
|
|||
id="{id}"
|
||||
name="{name}"
|
||||
disabled="{disabled}"
|
||||
translateWithId="{translateWithId}">
|
||||
translateWithId="{translateWithId}"
|
||||
>
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
tabindex="0"
|
||||
|
|
@ -251,7 +254,8 @@
|
|||
disabled="{disabled}"
|
||||
placeholder="{placeholder}"
|
||||
id="{id}"
|
||||
value="{inputValue}" />
|
||||
value="{inputValue}"
|
||||
/>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--list-box__invalid-icon" />
|
||||
{/if}
|
||||
|
|
@ -265,7 +269,8 @@
|
|||
}}"
|
||||
translateWithId="{translateWithId}"
|
||||
disabled="{disabled}"
|
||||
open="{open}" />
|
||||
open="{open}"
|
||||
/>
|
||||
{/if}
|
||||
<ListBoxMenuIcon
|
||||
on:click="{(e) => {
|
||||
|
|
@ -273,7 +278,8 @@
|
|||
open = !open;
|
||||
}}"
|
||||
translateWithId="{translateWithId}"
|
||||
open="{open}" />
|
||||
open="{open}"
|
||||
/>
|
||||
</ListBoxField>
|
||||
{#if open}
|
||||
<ListBoxMenu aria-label="{ariaLabel}" id="{id}">
|
||||
|
|
@ -290,7 +296,8 @@
|
|||
}}"
|
||||
on:mouseenter="{() => {
|
||||
highlightedIndex = i;
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
{itemToString(item)}
|
||||
</ListBoxMenuItem>
|
||||
{/each}
|
||||
|
|
@ -300,7 +307,8 @@
|
|||
{#if !invalid && helperText}
|
||||
<div
|
||||
class:bx--form__helper-text="{true}"
|
||||
class:bx--form__helper-text--disabled="{disabled}">
|
||||
class:bx--form__helper-text--disabled="{disabled}"
|
||||
>
|
||||
{helperText}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -18,11 +18,13 @@
|
|||
{...$$props.composedModal}
|
||||
on:click="{(e) => {
|
||||
console.log(e.target);
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<ModalHeader {...$$props.modalHeader} />
|
||||
<ModalBody
|
||||
{...$$props.modalBody}
|
||||
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
|
||||
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}"
|
||||
>
|
||||
<div>
|
||||
<PasswordInput bind:type placeholder="Password Input" aria-level="" />
|
||||
<Button
|
||||
|
|
@ -30,7 +32,8 @@
|
|||
size="field"
|
||||
on:click="{() => {
|
||||
type = type === 'password' ? 'text' : 'password';
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
Programmatically toggle password
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -58,7 +61,8 @@
|
|||
</ModalHeader>
|
||||
<ModalBody
|
||||
{...$$props.modalBody}
|
||||
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
|
||||
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}"
|
||||
>
|
||||
<p>
|
||||
Please see ModalWrapper for more examples and demo of the functionality.
|
||||
</p>
|
||||
|
|
@ -86,11 +90,13 @@
|
|||
{...$$props.composedModal}
|
||||
open
|
||||
on:close="{() => {}}"
|
||||
on:submit="{() => {}}">
|
||||
on:submit="{() => {}}"
|
||||
>
|
||||
<ModalHeader
|
||||
{...$$props.modalHeader}
|
||||
title="Passive modal title as the message. Should be direct and 3 lines or
|
||||
less." />
|
||||
less."
|
||||
/>
|
||||
<ModalBody {...$$props.modalBody} />
|
||||
<ModalFooter {...$$props.modalFooter} />
|
||||
</ComposedModal>
|
||||
|
|
@ -101,18 +107,21 @@
|
|||
<Button
|
||||
on:click="{() => {
|
||||
open = true;
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
Launch composed modal
|
||||
</Button>
|
||||
</div>
|
||||
<ComposedModal
|
||||
{...$$props.composedModal}
|
||||
open="{open}"
|
||||
on:close="{() => (open = false)}">
|
||||
on:close="{() => (open = false)}"
|
||||
>
|
||||
<ModalHeader {...$$props.modalHeader} />
|
||||
<ModalBody
|
||||
{...$$props.modalBody}
|
||||
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
|
||||
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}"
|
||||
>
|
||||
<p>
|
||||
Please see ModalWrapper for more examples and demo of the functionality.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -122,14 +122,16 @@
|
|||
focus(currentTarget);
|
||||
didOpen = false;
|
||||
}
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<div
|
||||
bind:this="{innerModal}"
|
||||
class:bx--modal-container="{true}"
|
||||
class="{size && `bx--modal-container--${size}`} {containerClass}"
|
||||
on:click="{() => {
|
||||
didClickInnerModal = true;
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@
|
|||
role="{hasScrollingContent ? 'region' : undefined}"
|
||||
class:bx--modal-content="{true}"
|
||||
class:bx--modal-content--with-form="{hasForm}"
|
||||
{...$$restProps}>
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
{#if hasScrollingContent}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,8 @@
|
|||
kind="{danger ? 'danger' : 'primary'}"
|
||||
disabled="{primaryButtonDisabled}"
|
||||
class="{primaryClass}"
|
||||
on:click="{submit}">
|
||||
on:click="{submit}"
|
||||
>
|
||||
{primaryButtonText}
|
||||
</Button>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,8 @@
|
|||
<p
|
||||
class:bx--modal-header__label="{true}"
|
||||
class:bx--type-delta="{true}"
|
||||
class:labelClass>
|
||||
class:labelClass
|
||||
>
|
||||
{label}
|
||||
</p>
|
||||
{/if}
|
||||
|
|
@ -60,7 +61,8 @@
|
|||
<p
|
||||
class:bx--modal-header__heading="{true}"
|
||||
class:bx--type-beta="{true}"
|
||||
class:titleClass>
|
||||
class:titleClass
|
||||
>
|
||||
{title}
|
||||
</p>
|
||||
{/if}
|
||||
|
|
@ -72,7 +74,8 @@
|
|||
class:bx--modal-close="{true}"
|
||||
class:closeClass
|
||||
on:click
|
||||
on:click="{closeModal}">
|
||||
on:click="{closeModal}"
|
||||
>
|
||||
<Close20 class="bx--modal-close__icon {closeIconClass}" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@
|
|||
light="{light}"
|
||||
on:change="{({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<Switch {...$$props} text="First section" />
|
||||
<Switch {...$$props} text="Second section" selected />
|
||||
<Switch {...$$props} text="Third section" />
|
||||
|
|
@ -30,7 +31,8 @@
|
|||
bind:selectedIndex
|
||||
on:change="{({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<Switch {...$$props} text="First section" />
|
||||
<Switch {...$$props} text="Second section" />
|
||||
<Switch {...$$props}>
|
||||
|
|
@ -44,7 +46,8 @@
|
|||
style="margin-top: 1.5rem"
|
||||
on:click="{() => {
|
||||
selectedIndex = 1;
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
Programmatically set to second index
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,8 @@
|
|||
} else if (key === 'ArrowLeft') {
|
||||
ctx.change(-1);
|
||||
}
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<span class:bx--content-switcher__label="{true}">
|
||||
<slot>{text}</slot>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -51,14 +51,16 @@
|
|||
if (animationName === 'hide-feedback') {
|
||||
animation = undefined;
|
||||
}
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<slot>
|
||||
{#if animation}{feedback || $$restProps['aria-label']}{/if}
|
||||
</slot>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class:bx--assistive-text="{true}"
|
||||
class:bx--copy-btn__feedback="{true}">
|
||||
class:bx--copy-btn__feedback="{true}"
|
||||
>
|
||||
{feedback}
|
||||
</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -9,4 +9,5 @@
|
|||
}}"
|
||||
on:animationend="{(e) => {
|
||||
console.log('animation end', e.animationName);
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
title="{iconDescription}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:animationend>
|
||||
on:animationend
|
||||
>
|
||||
<Copy16 class="bx--snippet__icon" />
|
||||
</Copy>
|
||||
|
|
|
|||
|
|
@ -82,7 +82,8 @@
|
|||
<TableContainer
|
||||
title="DataTable"
|
||||
description="With default options"
|
||||
{...props.getTableContainerProps()}>
|
||||
{...props.getTableContainerProps()}
|
||||
>
|
||||
<Table {...props.getTableProps()}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
|
|
@ -126,7 +127,8 @@
|
|||
console.log('on:click:cell', detail);
|
||||
}}"
|
||||
rows="{rows}"
|
||||
headers="{headers}" />
|
||||
headers="{headers}"
|
||||
/>
|
||||
{:else}
|
||||
<DataTable
|
||||
title="{$$props.title}"
|
||||
|
|
@ -147,5 +149,6 @@
|
|||
console.log('on:click:cell', detail);
|
||||
}}"
|
||||
rows="{rows}"
|
||||
headers="{headers}" />
|
||||
headers="{headers}"
|
||||
/>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -121,7 +121,8 @@
|
|||
zebra="{zebra}"
|
||||
size="{size}"
|
||||
stickyHeader="{stickyHeader}"
|
||||
sortable="{sortable}">
|
||||
sortable="{sortable}"
|
||||
>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{#each headers as header, i (header.key)}
|
||||
|
|
@ -137,7 +138,8 @@
|
|||
key: header.key,
|
||||
sortDirection,
|
||||
});
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
{header.value}
|
||||
</TableHeader>
|
||||
{/each}
|
||||
|
|
@ -149,13 +151,15 @@
|
|||
on:click="{() => {
|
||||
dispatch('click', { row });
|
||||
dispatch('click:row', row);
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
{#each row.cells as cell, j (cell.key)}
|
||||
<TableCell
|
||||
on:click="{() => {
|
||||
dispatch('click', { row, cell });
|
||||
dispatch('click:cell', cell);
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
{cell.value}
|
||||
</TableCell>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,8 @@
|
|||
class:bx--data-table--zebra="{zebra}"
|
||||
class:bx--data-table--static="{useStaticWidth}"
|
||||
class:bx--data-table--no-border="{!shouldShowBorder}"
|
||||
class:bx--data-table--sticky-header="{stickyHeader}">
|
||||
class:bx--data-table--sticky-header="{stickyHeader}"
|
||||
>
|
||||
<slot />
|
||||
</table>
|
||||
</section>
|
||||
|
|
@ -62,7 +63,8 @@
|
|||
class:bx--data-table--static="{useStaticWidth}"
|
||||
class:bx--data-table--no-border="{!shouldShowBorder}"
|
||||
class:bx--data-table--sticky-header="{stickyHeader}"
|
||||
{...$$restProps}>
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
</table>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,8 @@
|
|||
<div
|
||||
class:bx--data-table-container="{true}"
|
||||
class:bx--data-table--max-width="{stickyHeader}"
|
||||
{...$$restProps}>
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}
|
||||
<div class:bx--data-table-header="{true}">
|
||||
<h4 class:bx--data-table-header__title="{true}">{title}</h4>
|
||||
|
|
|
|||
|
|
@ -38,19 +38,22 @@
|
|||
{...$$restProps}
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<button
|
||||
class:bx--table-sort="{true}"
|
||||
class:bx--table-sort--active="{active}"
|
||||
class:bx--table-sort--ascending="{active && $sortHeader.sortDirection === 'descending'}"
|
||||
on:click>
|
||||
on:click
|
||||
>
|
||||
<span class:bx--table-header-label="{true}">
|
||||
<slot />
|
||||
</span>
|
||||
<ArrowUp20 aria-label="{ariaLabel}" class="bx--table-sort__icon" />
|
||||
<ArrowsVertical20
|
||||
aria-label="{ariaLabel}"
|
||||
class="bx--table-sort__icon-unsorted" />
|
||||
class="bx--table-sort__icon-unsorted"
|
||||
/>
|
||||
</button>
|
||||
</th>
|
||||
{:else}
|
||||
|
|
@ -61,7 +64,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<span class:bx--table-header-label="{true}">
|
||||
<slot />
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<slot />
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
* Set the size of the data table
|
||||
* @type {"compact" | "short" | "tall"} [size]
|
||||
*/
|
||||
export let size = undefined;
|
||||
export let size = undefined;
|
||||
|
||||
/**
|
||||
* Set to `true` to apply zebra styles to the datatable rows
|
||||
|
|
@ -61,7 +61,8 @@
|
|||
<span
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--btn="{true}"
|
||||
class:bx--btn--sm="{true}"></span>
|
||||
class:bx--btn--sm="{true}"
|
||||
></span>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
|
@ -76,7 +77,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
{#each cols as col, i (col)}
|
||||
|
|
|
|||
|
|
@ -18,19 +18,22 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<div
|
||||
class:bx--date-picker="{true}"
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--date-picker--range="{true}"
|
||||
class:bx--date-picker--short="{!range}"
|
||||
class:bx--date-picker--simple="{!range}">
|
||||
class:bx--date-picker--simple="{!range}"
|
||||
>
|
||||
{#each Array.from({ length: range ? 2 : 1 }, (_, i) => i) as input, i (input)}
|
||||
<div class:bx--date-picker-container="{true}">
|
||||
<label for="{id}" class:bx--label="{true}"></label>
|
||||
<div
|
||||
class:bx--date-picker__input="{true}"
|
||||
class:bx--skeleton="{true}"></div>
|
||||
class:bx--skeleton="{true}"
|
||||
></div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@
|
|||
datePickerType="single"
|
||||
on:change="{({ detail }) => {
|
||||
console.log('change', detail);
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<DatePickerInput
|
||||
{...$$props.datePickerInput}
|
||||
on:close="{() => {
|
||||
|
|
@ -27,13 +28,15 @@
|
|||
}}"
|
||||
on:input="{() => {
|
||||
console.log('on:input');
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
</DatePicker>
|
||||
<button
|
||||
on:click|preventDefault="{() => {
|
||||
value = '12/12/2020';
|
||||
}}"
|
||||
style="margin-top: 1rem">
|
||||
style="margin-top: 1rem"
|
||||
>
|
||||
Set date to 12/12/2020
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -42,11 +45,13 @@
|
|||
<DatePickerInput
|
||||
{...$$props.datePickerInput}
|
||||
id="date-picker-input-id-start"
|
||||
labelText="Start date" />
|
||||
labelText="Start date"
|
||||
/>
|
||||
<DatePickerInput
|
||||
{...$$props.datePickerInput}
|
||||
id="date-picker-input-id-end"
|
||||
labelText="End date" />
|
||||
labelText="End date"
|
||||
/>
|
||||
</DatePicker>
|
||||
{:else}
|
||||
<DatePicker
|
||||
|
|
@ -55,7 +60,8 @@
|
|||
bind:value
|
||||
on:change="{({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<DatePickerInput {...$$props.datePickerInput} />
|
||||
</DatePicker>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -191,7 +191,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<div
|
||||
bind:this="{datePickerRef}"
|
||||
id="{id}"
|
||||
|
|
@ -199,7 +200,8 @@
|
|||
class:bx--date-picker--short="{short}"
|
||||
class:bx--date-picker--light="{light}"
|
||||
class="{datePickerType && `bx--date-picker--${datePickerType}`}
|
||||
{datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}">
|
||||
{datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -102,13 +102,15 @@
|
|||
<div
|
||||
class:bx--date-picker-container="{true}"
|
||||
class:bx--date-picker--nolabel="{!labelText}"
|
||||
{...$$restProps}>
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if labelText}
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
class:bx--label--disabled="{disabled}">
|
||||
class:bx--label--disabled="{disabled}"
|
||||
>
|
||||
{labelText}
|
||||
</label>
|
||||
{/if}
|
||||
|
|
@ -141,14 +143,16 @@
|
|||
on:blur
|
||||
on:blur="{({ relatedTarget }) => {
|
||||
blurInput(relatedTarget);
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
{#if $hasCalendar}
|
||||
<Calendar16
|
||||
role="img"
|
||||
class="bx--date-picker__icon"
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
on:click="{openCalendar}" />
|
||||
on:click="{openCalendar}"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{#if invalid}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<div role="button" class:bx--list-box__field="{true}">
|
||||
<span class:bx--list-box__label="{true}"></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,16 +25,17 @@
|
|||
<code>items</code> must be an array of objects; mandatory fields are `id` and
|
||||
`text`.
|
||||
</p>
|
||||
<pre
|
||||
style="margin-top: 1rem;">
|
||||
<code>{'items = Array<{ id: string; text: string; }>'}</code>
|
||||
<pre style="margin-top: 1rem;">
|
||||
<code
|
||||
>{'items = Array<{ id: string; text: string; }>'}</code>
|
||||
</pre>
|
||||
<div style="margin-top: 2rem; margin-bottom: 2rem;">
|
||||
<Button
|
||||
size="small"
|
||||
on:click="{() => {
|
||||
selectedIndex = selectedIndex > -1 ? -1 : 1;
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
{selectedIndex > -1 ? 'Clear selected item' : 'Set item to "Option 2"'}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -157,12 +157,14 @@
|
|||
class:bx--dropdown__wrapper--inline="{inline}"
|
||||
class:bx--list-box__wrapper--inline="{inline}"
|
||||
class:bx--dropdown__wrapper--inline--invalid="{inline && invalid}"
|
||||
{...$$restProps}>
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if titleText}
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}">
|
||||
class:bx--label--disabled="{disabled}"
|
||||
>
|
||||
{titleText}
|
||||
</label>
|
||||
{/if}
|
||||
|
|
@ -184,7 +186,8 @@
|
|||
open="{open}"
|
||||
invalid="{invalid}"
|
||||
invalidText="{invalidText}"
|
||||
light="{light}">
|
||||
light="{light}"
|
||||
>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--list-box__invalid-icon" />
|
||||
{/if}
|
||||
|
|
@ -217,7 +220,8 @@
|
|||
}}"
|
||||
disabled="{disabled}"
|
||||
translateWithId="{translateWithId}"
|
||||
id="{id}">
|
||||
id="{id}"
|
||||
>
|
||||
<span class="bx--list-box__label">
|
||||
{#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
|
||||
</span>
|
||||
|
|
@ -236,7 +240,8 @@
|
|||
}}"
|
||||
on:mouseenter="{() => {
|
||||
highlightedIndex = i;
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
{itemToString(item)}
|
||||
</ListBoxMenuItem>
|
||||
{/each}
|
||||
|
|
@ -246,7 +251,8 @@
|
|||
{#if !inline && !invalid && helperText}
|
||||
<div
|
||||
class:bx--form__helper-text="{true}"
|
||||
class:bx--form__helper-text--disabled="{disabled}">
|
||||
class:bx--form__helper-text--disabled="{disabled}"
|
||||
>
|
||||
{helperText}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<SkeletonText heading width="100px" />
|
||||
<SkeletonText width="225px" class="bx--label-description" />
|
||||
<ButtonSkeleton />
|
||||
|
|
|
|||
|
|
@ -21,7 +21,8 @@
|
|||
{...$$props}
|
||||
on:add="{({ detail }) => {
|
||||
console.log(detail);
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
{:else if story === 'item'}
|
||||
<FileUploaderItem
|
||||
{...$$props}
|
||||
|
|
@ -30,7 +31,8 @@
|
|||
}}"
|
||||
on:click="{() => {
|
||||
console.log('click');
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
{:else if story === 'uploader'}
|
||||
<div class="bx--file__container">
|
||||
<FileUploader
|
||||
|
|
@ -42,13 +44,15 @@
|
|||
}}"
|
||||
on:remove="{({ detail }) => {
|
||||
console.log('remove', detail);
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
<Button
|
||||
kind="secondary"
|
||||
size="small"
|
||||
style="margin-top: 1rem"
|
||||
disabled="{disabled}"
|
||||
on:click="{fileUploader.clearFiles}">
|
||||
on:click="{fileUploader.clearFiles}"
|
||||
>
|
||||
Clear File{files.length === 1 ? '' : 's'}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -95,7 +95,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<strong class:bx--file--label="{true}">{labelTitle}</strong>
|
||||
<p class:bx--label-description="{true}">{labelDescription}</p>
|
||||
<FileUploaderButton
|
||||
|
|
@ -108,7 +109,8 @@
|
|||
on:change
|
||||
on:change="{({ target }) => {
|
||||
files = [...target.files].map(({ name }) => name);
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
<div class:bx--file-container="{true}">
|
||||
{#each files as name, i (name)}
|
||||
<span class:bx--file__selected-file="{true}">
|
||||
|
|
@ -126,7 +128,8 @@
|
|||
on:click
|
||||
on:click="{() => {
|
||||
files = files.filter((_, index) => index !== i);
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -79,7 +79,8 @@
|
|||
if (key === ' ' || key === 'Enter') {
|
||||
ref.click();
|
||||
}
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<span role="{role}">{labelText}</span>
|
||||
</label>
|
||||
<input
|
||||
|
|
@ -104,4 +105,5 @@
|
|||
on:click
|
||||
on:click="{({ target }) => {
|
||||
target.value = null;
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -94,7 +94,8 @@
|
|||
over = false;
|
||||
dispatch('add', validateFiles(dataTransfer.files));
|
||||
}
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<label
|
||||
for="{id}"
|
||||
tabindex="{tabindex}"
|
||||
|
|
@ -105,11 +106,13 @@
|
|||
if (key === ' ' || key === 'Enter') {
|
||||
ref.click();
|
||||
}
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<div
|
||||
role="{role}"
|
||||
class:bx--file__drop-container="{true}"
|
||||
class:bx--file__drop-container--drag-over="{over}">
|
||||
class:bx--file__drop-container--drag-over="{over}"
|
||||
>
|
||||
{labelText}
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
|
|
@ -128,7 +131,8 @@
|
|||
on:click
|
||||
on:click="{({ target }) => {
|
||||
target.value = null;
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,8 @@
|
|||
{...$$restProps}
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<p class:bx--file-filename="{true}">{name}</p>
|
||||
<span class:bx--file__state-container="{true}">
|
||||
<Filename
|
||||
|
|
@ -68,7 +69,8 @@
|
|||
}}"
|
||||
iconDescription="{iconDescription}"
|
||||
status="{status}"
|
||||
invalid="{invalid}" />
|
||||
invalid="{invalid}"
|
||||
/>
|
||||
</span>
|
||||
{#if invalid && errorSubject}
|
||||
<div class:bx--form-requirement="{true}">
|
||||
|
|
|
|||
|
|
@ -28,7 +28,8 @@
|
|||
description="{iconDescription}"
|
||||
{...$$restProps}
|
||||
small
|
||||
withOverlay="{false}" />
|
||||
withOverlay="{false}"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if status === 'edit'}
|
||||
|
|
@ -41,7 +42,8 @@
|
|||
class="bx--file-close"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:keydown />
|
||||
on:keydown
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if status === 'complete'}
|
||||
|
|
@ -49,5 +51,6 @@
|
|||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
class="bx--file-complete"
|
||||
{...$$restProps} />
|
||||
{...$$restProps}
|
||||
/>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@
|
|||
<Form
|
||||
on:submit="{(event) => {
|
||||
console.log('on:submit', event);
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<FormGroup {...$$props}>
|
||||
<Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
|
||||
<Checkbox id="checkbox-1" labelText="Checkbox Label" />
|
||||
|
|
@ -29,7 +30,8 @@
|
|||
min="{0}"
|
||||
max="{100}"
|
||||
value="{50}"
|
||||
step="{10}" />
|
||||
step="{10}"
|
||||
/>
|
||||
<FormGroup legendText="Toggle heading">
|
||||
<Toggle id="toggle-1" />
|
||||
<Toggle id="toggle-2" disabled />
|
||||
|
|
@ -38,29 +40,35 @@
|
|||
<FileUploader
|
||||
id="file-1"
|
||||
buttonLabel="Add files"
|
||||
labelDescription="Choose Files..." />
|
||||
labelDescription="Choose Files..."
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Radio Button heading">
|
||||
<RadioButtonGroup
|
||||
name="radio-button-group"
|
||||
defaultSelected="default-selected">
|
||||
defaultSelected="default-selected"
|
||||
>
|
||||
<RadioButton
|
||||
id="radio-1"
|
||||
value="standard"
|
||||
labelText="Standard Radio Button" />
|
||||
labelText="Standard Radio Button"
|
||||
/>
|
||||
<RadioButton
|
||||
id="radio-2"
|
||||
value="default-selected"
|
||||
labelText="Default Selected Radio Button" />
|
||||
labelText="Default Selected Radio Button"
|
||||
/>
|
||||
<RadioButton
|
||||
id="radio-3"
|
||||
value="blue"
|
||||
labelText="Standard Radio Button" />
|
||||
labelText="Standard Radio Button"
|
||||
/>
|
||||
<RadioButton
|
||||
id="radio-4"
|
||||
value="disabled"
|
||||
labelText="Disabled Radio Button"
|
||||
disabled />
|
||||
disabled
|
||||
/>
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Search">
|
||||
|
|
@ -71,7 +79,8 @@
|
|||
disabled
|
||||
hidden
|
||||
value="placeholder-item"
|
||||
text="Choose an option" />
|
||||
text="Choose an option"
|
||||
/>
|
||||
<SelectItem value="option-1" text="Option 1" />
|
||||
<SelectItem value="option-2" text="Option 2" />
|
||||
<SelectItem value="option-3" text="Option 3" />
|
||||
|
|
@ -79,7 +88,8 @@
|
|||
<TextInput
|
||||
id="text-input-1"
|
||||
labelText="Text Input label"
|
||||
placeholder="Placeholder text" />
|
||||
placeholder="Placeholder text"
|
||||
/>
|
||||
<TextInput id="text-input-2" type="password" labelText="Password" required />
|
||||
<TextInput
|
||||
id="text-input-3"
|
||||
|
|
@ -88,12 +98,14 @@
|
|||
invalidText="Your password must be at least 6 characters as well as contain
|
||||
at least one uppercase, one lowercase, and one number."
|
||||
required
|
||||
invalid />
|
||||
invalid
|
||||
/>
|
||||
<TextArea
|
||||
id="text-area"
|
||||
labelText="Text Area label"
|
||||
placeholder="Placeholder text"
|
||||
rows="{4}"
|
||||
cols="{50}" />
|
||||
cols="{50}"
|
||||
/>
|
||||
<Button type="submit">Submit</Button>
|
||||
</Form>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:submit|preventDefault>
|
||||
on:submit|preventDefault
|
||||
>
|
||||
<slot />
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<legend class:bx--label="{true}">{legendText}</legend>
|
||||
<slot />
|
||||
{#if message}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<slot />
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -13,4 +13,5 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave></div>
|
||||
on:mouseleave
|
||||
></div>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave />
|
||||
on:mouseleave
|
||||
/>
|
||||
{:else}
|
||||
<svelte:component
|
||||
this="{render}"
|
||||
|
|
@ -33,5 +34,6 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave />
|
||||
on:mouseleave
|
||||
/>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,8 @@
|
|||
style="margin-left: 1rem;"
|
||||
description="{loadingDescription}"
|
||||
status="{success ? 'finished' : 'active'}"
|
||||
aria-live="{ariaLive}" />
|
||||
aria-live="{ariaLive}"
|
||||
/>
|
||||
{:else}
|
||||
<Button on:click="{handleSubmit}">Submit</Button>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<div class:bx--inline-loading__animation="{true}">
|
||||
{#if status === 'error'}
|
||||
<Error20 class="bx--inline-loading--error" />
|
||||
|
|
@ -64,7 +65,8 @@
|
|||
small
|
||||
description="{iconDescription}"
|
||||
withOverlay="{false}"
|
||||
active="{status === 'active'}" />
|
||||
active="{status === 'active'}"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{#if description}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,6 @@ export const Default = () => ({
|
|||
href: text("The link href (href)", "#"),
|
||||
inline: boolean("Use the in-line variant (inline)", false),
|
||||
disabled: boolean("Disabled (disabled)", false),
|
||||
visited: boolean('Allow visited styles', false),
|
||||
visited: boolean("Allow visited styles", false),
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -35,7 +35,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<slot />
|
||||
</p>
|
||||
{:else}
|
||||
|
|
@ -51,7 +52,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<slot />
|
||||
</a>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,8 @@
|
|||
e.stopPropagation();
|
||||
}
|
||||
}}"
|
||||
on:click|preventDefault|stopPropagation>
|
||||
on:click|preventDefault|stopPropagation
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
{#if invalid}
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@
|
|||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keydown|preventDefault|stopPropagation
|
||||
on:blur>
|
||||
on:blur
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
role="listbox"
|
||||
id="menu-{id}"
|
||||
class:bx--list-box__menu="{true}"
|
||||
{...$$restProps}>
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@
|
|||
class:bx--list-box__menu-icon="{true}"
|
||||
class:bx--list-box__menu-icon--open="{open}"
|
||||
{...$$restProps}
|
||||
on:click|preventDefault>
|
||||
on:click|preventDefault
|
||||
>
|
||||
<ChevronDown16 aria-label="{description}" title="{description}" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@
|
|||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<div class:bx--list-box__menu-item__option="{true}">
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,8 @@
|
|||
if (!disabled && e.key === 'Enter') {
|
||||
dispatch('clear', e);
|
||||
}
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
{#if selectionCount}{selectionCount}{/if}
|
||||
<Close16 />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<slot />
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -36,14 +36,16 @@
|
|||
<div
|
||||
class:bx--loading-overlay="{true}"
|
||||
class:bx--loading-overlay--stop="{!active}"
|
||||
{...$$restProps}>
|
||||
{...$$restProps}
|
||||
>
|
||||
<div
|
||||
aria-atomic="true"
|
||||
aria-labelledby="{id}"
|
||||
aria-live="{active ? 'assertive' : 'off'}"
|
||||
class:bx--loading="{true}"
|
||||
class:bx--loading--small="{small}"
|
||||
class:bx--loading--stop="{!active}">
|
||||
class:bx--loading--stop="{!active}"
|
||||
>
|
||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||
<label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
|
||||
<svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150">
|
||||
|
|
@ -53,13 +55,15 @@
|
|||
class:bx--loading__background="{true}"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="{spinnerRadius}"></circle>
|
||||
r="{spinnerRadius}"
|
||||
></circle>
|
||||
{/if}
|
||||
<circle
|
||||
class:bx--loading__stroke="{true}"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="{spinnerRadius}"></circle>
|
||||
r="{spinnerRadius}"
|
||||
></circle>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -71,7 +75,8 @@
|
|||
class:bx--loading="{true}"
|
||||
class:bx--loading--small="{small}"
|
||||
class:bx--loading--stop="{!active}"
|
||||
{...$$restProps}>
|
||||
{...$$restProps}
|
||||
>
|
||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||
<label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
|
||||
<svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150">
|
||||
|
|
@ -81,13 +86,15 @@
|
|||
class:bx--loading__background="{true}"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="{spinnerRadius}"></circle>
|
||||
r="{spinnerRadius}"
|
||||
></circle>
|
||||
{/if}
|
||||
<circle
|
||||
class:bx--loading__stroke="{true}"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="{spinnerRadius}"></circle>
|
||||
r="{spinnerRadius}"
|
||||
></circle>
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@
|
|||
<Button
|
||||
on:click="{() => {
|
||||
open = true;
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
Launch modal
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -33,7 +34,8 @@
|
|||
}}"
|
||||
on:submit="{() => {
|
||||
console.log('submit');
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<div>
|
||||
<PasswordInput bind:type placeholder="Password Input" aria-level="" />
|
||||
<Button
|
||||
|
|
@ -41,7 +43,8 @@
|
|||
size="field"
|
||||
on:click="{() => {
|
||||
type = type === 'password' ? 'text' : 'password';
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
Programmatically toggle password
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export const Default = () => ({
|
|||
open: boolean("Open (open)", true),
|
||||
passiveModal: boolean("Without footer (passiveModal)", false),
|
||||
danger: boolean("Danger mode (danger)", false),
|
||||
alert: boolean('Alert mode (alert)', false),
|
||||
alert: boolean("Alert mode (alert)", false),
|
||||
shouldSubmitOnEnter: boolean(
|
||||
"Enter key to submit (shouldSubmitOnEnter)",
|
||||
false
|
||||
|
|
|
|||
|
|
@ -196,7 +196,8 @@
|
|||
}}"
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<div
|
||||
bind:this="{innerModal}"
|
||||
role="dialog"
|
||||
|
|
@ -207,7 +208,8 @@
|
|||
class="{size && `bx--modal-container--${size}`}"
|
||||
on:click="{() => {
|
||||
didClickInnerModal = true;
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<div class:bx--modal-header="{true}">
|
||||
{#if passiveModal}
|
||||
<button
|
||||
|
|
@ -218,10 +220,12 @@
|
|||
class="bx--modal-close"
|
||||
on:click="{() => {
|
||||
open = false;
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<Close20
|
||||
aria-label="{iconDescription}"
|
||||
class="bx--modal-close__icon" />
|
||||
class="bx--modal-close__icon"
|
||||
/>
|
||||
</button>
|
||||
{/if}
|
||||
{#if modalLabel}
|
||||
|
|
@ -241,10 +245,12 @@
|
|||
class:bx--modal-close="{true}"
|
||||
on:click="{() => {
|
||||
open = false;
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<Close20
|
||||
aria-label="{iconDescription}"
|
||||
class="bx--modal-close__icon" />
|
||||
class="bx--modal-close__icon"
|
||||
/>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -256,7 +262,8 @@
|
|||
tabindex="{hasScrollingContent ? '0' : undefined}"
|
||||
role="{hasScrollingContent ? 'region' : undefined}"
|
||||
aria-label="{hasScrollingContent ? ariaLabel : undefined}"
|
||||
aria-labelledby="{modalLabel ? modalLabelId : modalHeadingId}">
|
||||
aria-labelledby="{modalLabel ? modalLabelId : modalHeadingId}"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
{#if hasScrollingContent}
|
||||
|
|
@ -268,7 +275,8 @@
|
|||
kind="secondary"
|
||||
on:click="{() => {
|
||||
dispatch('click:button--secondary');
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
{secondaryButtonText}
|
||||
</Button>
|
||||
<Button
|
||||
|
|
@ -276,7 +284,8 @@
|
|||
disabled="{primaryButtonDisabled}"
|
||||
on:click="{() => {
|
||||
dispatch('submit');
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
{primaryButtonText}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@
|
|||
size="small"
|
||||
on:click="{() => {
|
||||
selectedIds = selectedIds.length > 0 ? [] : [items[1].id, items[2].id];
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
{selectedIds.length > 0 ? 'Clear' : 'Set initial'} selected items
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -34,5 +35,6 @@
|
|||
placeholder="Filter..."
|
||||
bind:selectedIds
|
||||
bind:items
|
||||
bind:value />
|
||||
bind:value
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -259,12 +259,14 @@
|
|||
class:bx--multi-select__wrapper--inline="{inline}"
|
||||
class:bx--list-box__wrapper--inline="{inline}"
|
||||
class:bx--multi-select__wrapper--inline--invalid="{inline && invalid}"
|
||||
{...$$restProps}>
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if titleText}
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}">
|
||||
class:bx--label--disabled="{disabled}"
|
||||
>
|
||||
{titleText}
|
||||
</label>
|
||||
{/if}
|
||||
|
|
@ -281,7 +283,8 @@
|
|||
{filterable && 'bx--multi-select--filterable'}
|
||||
{invalid && 'bx--multi-select--invalid'}
|
||||
{inline && 'bx--multi-select--inline'}
|
||||
{checked.length > 0 && 'bx--multi-select--selected'}">
|
||||
{checked.length > 0 && 'bx--multi-select--selected'}"
|
||||
>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--list-box__invalid-icon" />
|
||||
{/if}
|
||||
|
|
@ -327,7 +330,8 @@
|
|||
}}"
|
||||
id="{id}"
|
||||
disabled="{disabled}"
|
||||
translateWithId="{translateWithId}">
|
||||
translateWithId="{translateWithId}"
|
||||
>
|
||||
{#if checked.length > 0}
|
||||
<ListBoxSelection
|
||||
selectionCount="{checked.length}"
|
||||
|
|
@ -339,7 +343,8 @@
|
|||
fieldRef.blur();
|
||||
}}"
|
||||
translateWithId="{translateWithId}"
|
||||
disabled="{disabled}" />
|
||||
disabled="{disabled}"
|
||||
/>
|
||||
{/if}
|
||||
{#if filterable}
|
||||
<input
|
||||
|
|
@ -383,7 +388,8 @@
|
|||
placeholder="{placeholder}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
value="{inputValue}" />
|
||||
value="{inputValue}"
|
||||
/>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--list-box__invalid-icon" />
|
||||
{/if}
|
||||
|
|
@ -395,7 +401,8 @@
|
|||
}}"
|
||||
translateWithId="{translateWithId}"
|
||||
disabled="{disabled}"
|
||||
open="{open}" />
|
||||
open="{open}"
|
||||
/>
|
||||
{/if}
|
||||
<ListBoxMenuIcon
|
||||
on:click="{(e) => {
|
||||
|
|
@ -403,7 +410,8 @@
|
|||
open = !open;
|
||||
}}"
|
||||
translateWithId="{translateWithId}"
|
||||
open="{open}" />
|
||||
open="{open}"
|
||||
/>
|
||||
{/if}
|
||||
{#if !filterable}
|
||||
<span class="bx--list-box__label">{label}</span>
|
||||
|
|
@ -425,7 +433,8 @@
|
|||
}}"
|
||||
on:mouseenter="{() => {
|
||||
highlightedIndex = i;
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<Checkbox
|
||||
readonly
|
||||
tabindex="-1"
|
||||
|
|
@ -434,7 +443,8 @@
|
|||
name="{itemToString(item)}"
|
||||
labelText="{itemToString(item)}"
|
||||
checked="{item.checked}"
|
||||
disabled="{disabled}" />
|
||||
disabled="{disabled}"
|
||||
/>
|
||||
</ListBoxMenuItem>
|
||||
{/each}
|
||||
</ListBoxMenu>
|
||||
|
|
@ -443,7 +453,8 @@
|
|||
{#if !inline && !invalid && helperText}
|
||||
<div
|
||||
class:bx--form__helper-text="{true}"
|
||||
class:bx--form__helper-text--disabled="{disabled}">
|
||||
class:bx--form__helper-text--disabled="{disabled}"
|
||||
>
|
||||
{helperText}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -91,16 +91,19 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<div class:bx--inline-notification__details="{true}">
|
||||
<NotificationIcon
|
||||
notificationType="{notificationType}"
|
||||
kind="{kind}"
|
||||
iconDescription="{iconDescription}" />
|
||||
iconDescription="{iconDescription}"
|
||||
/>
|
||||
<NotificationTextDetails
|
||||
title="{title}"
|
||||
subtitle="{subtitle}"
|
||||
notificationType="{notificationType}">
|
||||
notificationType="{notificationType}"
|
||||
>
|
||||
<slot />
|
||||
</NotificationTextDetails>
|
||||
</div>
|
||||
|
|
@ -109,7 +112,8 @@
|
|||
<NotificationButton
|
||||
iconDescription="{iconDescription}"
|
||||
notificationType="{notificationType}"
|
||||
on:click="{close}" />
|
||||
on:click="{close}"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@
|
|||
{...$$props}
|
||||
on:close="{() => {
|
||||
console.log('on:close');
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<div slot="actions">
|
||||
<NotificationActionButton>{$$props.action}</NotificationActionButton>
|
||||
</div>
|
||||
|
|
@ -22,5 +23,6 @@
|
|||
on:close="{() => {
|
||||
console.log('on:close');
|
||||
}}"
|
||||
style="min-width: 30rem; margin-bottom: .5rem" />
|
||||
style="min-width: 30rem; margin-bottom: .5rem"
|
||||
/>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<slot />
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -36,10 +36,12 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<svelte:component
|
||||
this="{renderIcon}"
|
||||
title="{title}"
|
||||
class="{notificationType === 'toast' && 'bx--toast-notification__close-icon'}
|
||||
{notificationType === 'inline' && 'bx--inline-notification__close-icon'}" />
|
||||
{notificationType === 'inline' && 'bx--inline-notification__close-icon'}"
|
||||
/>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -37,4 +37,5 @@
|
|||
<svelte:component
|
||||
this="{icons[kind]}"
|
||||
title="{iconDescription}"
|
||||
class="bx--{notificationType}-notification__icon" />
|
||||
class="bx--{notificationType}-notification__icon"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -96,23 +96,27 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<NotificationIcon
|
||||
notificationType="{notificationType}"
|
||||
kind="{kind}"
|
||||
iconDescription="{iconDescription}" />
|
||||
iconDescription="{iconDescription}"
|
||||
/>
|
||||
<NotificationTextDetails
|
||||
title="{title}"
|
||||
subtitle="{subtitle}"
|
||||
caption="{caption}"
|
||||
notificationType="{notificationType}">
|
||||
notificationType="{notificationType}"
|
||||
>
|
||||
<slot />
|
||||
</NotificationTextDetails>
|
||||
{#if !hideCloseButton}
|
||||
<NotificationButton
|
||||
iconDescription="{iconDescription}"
|
||||
notificationType="{notificationType}"
|
||||
on:click="{close}" />
|
||||
on:click="{close}"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
{#if !hideLabel}
|
||||
<span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -17,5 +17,6 @@
|
|||
bind:value
|
||||
on:change="{({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -178,7 +178,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<div
|
||||
data-invalid="{error || undefined}"
|
||||
class:bx--number="{true}"
|
||||
|
|
@ -187,14 +188,16 @@
|
|||
class:bx--number--light="{light}"
|
||||
class:bx--number--nolabel="{hideLabel}"
|
||||
class:bx--number--mobile="{mobile}"
|
||||
class="{size && `bx--number--${size}`}">
|
||||
class="{size && `bx--number--${size}`}"
|
||||
>
|
||||
{#if mobile}
|
||||
{#if label}
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}"
|
||||
class:bx--visually-hidden="{hideLabel}">
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
>
|
||||
<slot name="label">{label}</slot>
|
||||
</label>
|
||||
{/if}
|
||||
|
|
@ -210,7 +213,8 @@
|
|||
on:click="{() => {
|
||||
updateValue(-1);
|
||||
}}"
|
||||
disabled="{disabled}">
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<CaretDownGlyph class="down-icon" />
|
||||
</button>
|
||||
<input
|
||||
|
|
@ -229,7 +233,8 @@
|
|||
min="{min}"
|
||||
step="{step}"
|
||||
value="{value}"
|
||||
readonly="{readonly}" />
|
||||
readonly="{readonly}"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
aria-live="polite"
|
||||
|
|
@ -241,7 +246,8 @@
|
|||
on:click="{() => {
|
||||
updateValue(1);
|
||||
}}"
|
||||
disabled="{disabled}">
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<CaretUpGlyph class="up-icon" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -251,7 +257,8 @@
|
|||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}"
|
||||
class:bx--visually-hidden="{hideLabel}">
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
>
|
||||
<slot name="label">{label}</slot>
|
||||
</label>
|
||||
{/if}
|
||||
|
|
@ -274,7 +281,8 @@
|
|||
min="{min}"
|
||||
step="{step}"
|
||||
value="{value}"
|
||||
readonly="{readonly}" />
|
||||
readonly="{readonly}"
|
||||
/>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--number__invalid" />
|
||||
{/if}
|
||||
|
|
@ -290,7 +298,8 @@
|
|||
on:click="{() => {
|
||||
updateValue(1);
|
||||
}}"
|
||||
disabled="{disabled}">
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<CaretUpGlyph class="up-icon" />
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -304,7 +313,8 @@
|
|||
on:click="{() => {
|
||||
updateValue(-1);
|
||||
}}"
|
||||
disabled="{disabled}">
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<CaretDownGlyph class="down-icon" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -313,7 +323,8 @@
|
|||
{#if !error && helperText}
|
||||
<div
|
||||
class:bx--form__helper-text="{true}"
|
||||
class:bx--form__helper-text--disabled="{disabled}">
|
||||
class:bx--form__helper-text--disabled="{disabled}"
|
||||
>
|
||||
{helperText}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<slot />
|
||||
</ol>
|
||||
|
|
|
|||
|
|
@ -13,32 +13,38 @@
|
|||
{...$$props.menu}
|
||||
on:close="{({ detail }) => {
|
||||
console.log('close', detail);
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Option 1"
|
||||
bind:primaryFocus />
|
||||
bind:primaryFocus
|
||||
/>
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Option 2 is an example of a really long string and how we
|
||||
recommend handling this"
|
||||
requireTitle />
|
||||
requireTitle
|
||||
/>
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Option 3"
|
||||
disabled />
|
||||
disabled
|
||||
/>
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Option 4" />
|
||||
text="Option 4"
|
||||
/>
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Danger option"
|
||||
danger />
|
||||
danger
|
||||
/>
|
||||
</OverflowMenu>
|
||||
{:else if story === 'trigger'}
|
||||
<OverflowMenu
|
||||
|
|
@ -46,17 +52,20 @@
|
|||
on:close="{({ detail }) => {
|
||||
console.log('close', detail);
|
||||
}}"
|
||||
style="width: auto">
|
||||
style="width: auto"
|
||||
>
|
||||
<div slot="menu" style="padding: 0 1rem">Menu</div>
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
text="Option 1"
|
||||
bind:primaryFocus />
|
||||
bind:primaryFocus
|
||||
/>
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
text="Option 2 is an example of a really long string and how we
|
||||
recommend handling this"
|
||||
requireTitle />
|
||||
requireTitle
|
||||
/>
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
|
||||
|
|
@ -66,16 +75,19 @@
|
|||
{...$$props.menu}
|
||||
on:close="{({ detail }) => {
|
||||
console.log('close', detail);
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
text="Option 1"
|
||||
bind:primaryFocus />
|
||||
bind:primaryFocus
|
||||
/>
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
text="Option 2 is an example of a really long string and how we
|
||||
recommend handling this"
|
||||
requireTitle />
|
||||
requireTitle
|
||||
/>
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
|
||||
|
|
|
|||
|
|
@ -188,13 +188,15 @@
|
|||
buttonRef.focus();
|
||||
}
|
||||
}
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<slot name="menu">
|
||||
<svelte:component
|
||||
this="{icon}"
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
class="bx--overflow-menu__icon {iconClass}" />
|
||||
class="bx--overflow-menu__icon {iconClass}"
|
||||
/>
|
||||
</slot>
|
||||
{#if open}
|
||||
<ul
|
||||
|
|
@ -207,7 +209,8 @@
|
|||
class:bx--overflow-menu--flip="{flipped}"
|
||||
class:bx--overflow-menu-options--open="{open}"
|
||||
class:bx--overflow-menu-options--light="{light}"
|
||||
class:menuOptionsClass>
|
||||
class:menuOptionsClass
|
||||
>
|
||||
<slot />
|
||||
</ul>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -83,7 +83,8 @@
|
|||
class:bx--overflow-menu--divider="{hasDivider}"
|
||||
class:bx--overflow-menu-options__option--danger="{danger}"
|
||||
class:bx--overflow-menu-options__option--disabled="{disabled}"
|
||||
{...$$restProps}>
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if href}
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a
|
||||
|
|
@ -100,7 +101,8 @@
|
|||
} else if (key === 'ArrowUp') {
|
||||
change(-1);
|
||||
}
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<slot>
|
||||
<div class:bx--overflow-menu-options__option-content="{true}">
|
||||
{text}
|
||||
|
|
@ -122,7 +124,8 @@
|
|||
} else if (key === 'ArrowUp') {
|
||||
change(-1);
|
||||
}
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<slot>
|
||||
<div class:bx--overflow-menu-options__option-content="{true}">
|
||||
{text}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<div class:bx--pagination__left="{true}">
|
||||
<SkeletonText width="70px" />
|
||||
<SkeletonText width="35px" />
|
||||
|
|
@ -17,7 +18,8 @@
|
|||
</div>
|
||||
<div
|
||||
class:bx--pagination__right="{true}"
|
||||
class:bx--pagination--inline="{true}">
|
||||
class:bx--pagination--inline="{true}"
|
||||
>
|
||||
<SkeletonText width="70px" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@
|
|||
{...$$props}
|
||||
on:update="{({ detail }) => {
|
||||
console.log(detail);
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
Pagination
|
||||
</Pagination>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -121,7 +121,8 @@
|
|||
<label
|
||||
id="bx--pagination-select-{id}-count-label"
|
||||
for="bx--pagination-select-{id}"
|
||||
class:bx--pagination__text="{true}">
|
||||
class:bx--pagination__text="{true}"
|
||||
>
|
||||
{itemsPerPageText}
|
||||
</label>
|
||||
<Select
|
||||
|
|
@ -130,7 +131,8 @@
|
|||
hideLabel
|
||||
noLabel
|
||||
inline
|
||||
bind:selected="{pageSize}">
|
||||
bind:selected="{pageSize}"
|
||||
>
|
||||
{#each pageSizes as size, i (size)}
|
||||
<SelectItem value="{size}" text="{size.toString()}" />
|
||||
{/each}
|
||||
|
|
@ -151,7 +153,8 @@
|
|||
labelText="Page number, of {totalPages} pages"
|
||||
inline
|
||||
hideLabel
|
||||
bind:selected="{page}">
|
||||
bind:selected="{page}"
|
||||
>
|
||||
{#each selectItems as size, i (size)}
|
||||
<SelectItem value="{size + 1}" text="{(size + 1).toString()}" />
|
||||
{/each}
|
||||
|
|
@ -173,7 +176,8 @@
|
|||
class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled ? 'bx--pagination__button--no-index' : ''}"
|
||||
on:click="{() => {
|
||||
page--;
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
<Button
|
||||
hasIconOnly
|
||||
kind="ghost"
|
||||
|
|
@ -185,6 +189,7 @@
|
|||
class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled ? 'bx--pagination__button--no-index' : ''}"
|
||||
on:click="{() => {
|
||||
page++;
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@
|
|||
aria-current="{active ? 'page' : undefined}"
|
||||
class:bx--pagination-nav__page="{true}"
|
||||
class:bx--pagination-nav__page--active="{active}"
|
||||
on:click>
|
||||
on:click
|
||||
>
|
||||
<span class:bx--pagination-nav__accessibility-label="{true}">
|
||||
<slot />
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@
|
|||
}}"
|
||||
on:click:button--next="{({ detail }) => {
|
||||
console.log('button--next', detail);
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
<div style="margin-top: 1.5rem">Bound page index: {page}</div>
|
||||
<Button
|
||||
kind="tertiary"
|
||||
|
|
@ -25,7 +26,8 @@
|
|||
style="margin-top: 1rem;"
|
||||
on:click="{() => {
|
||||
page = 3;
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
Set page to index 3
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -103,25 +103,29 @@
|
|||
page--;
|
||||
}
|
||||
dispatch('click:button--previous', { page });
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
</li>
|
||||
{#if fit > MIN || (fit <= MIN && page <= 1)}
|
||||
<PaginationItem
|
||||
page="{1}"
|
||||
active="{page === 0}"
|
||||
on:click="{() => (page = 0)}">
|
||||
on:click="{() => (page = 0)}"
|
||||
>
|
||||
{page === 0 ? 'Active, Page' : 'Page'}
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
<PaginationOverflow
|
||||
fromIndex="{startOffset}"
|
||||
count="{front}"
|
||||
on:select="{({ detail }) => (page = detail.index)}" />
|
||||
on:select="{({ detail }) => (page = detail.index)}"
|
||||
/>
|
||||
{#each items as item}
|
||||
<PaginationItem
|
||||
page="{item + 1}"
|
||||
active="{page === item}"
|
||||
on:click="{() => (page = item)}">
|
||||
on:click="{() => (page = item)}"
|
||||
>
|
||||
{page === item ? 'Active, Page' : 'Page'}
|
||||
</PaginationItem>
|
||||
{/each}
|
||||
|
|
@ -130,12 +134,14 @@
|
|||
count="{back}"
|
||||
on:select="{({ detail }) => {
|
||||
page = detail.index;
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
{#if total > 1}
|
||||
<PaginationItem
|
||||
page="{total}"
|
||||
active="{page === total - 1}"
|
||||
on:click="{() => (page = total - 1)}">
|
||||
on:click="{() => (page = total - 1)}"
|
||||
>
|
||||
{page === total - 1 ? 'Active, Page' : 'Page'}
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
|
|
@ -155,13 +161,15 @@
|
|||
page++;
|
||||
}
|
||||
dispatch('click:button--next', { page });
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
class:bx--pagination-nav__accessibility-label="{true}">
|
||||
class:bx--pagination-nav__accessibility-label="{true}"
|
||||
>
|
||||
Page {page + 1} of {total}
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,8 @@
|
|||
on:change="{({ target }) => {
|
||||
value = '';
|
||||
dispatch('select', { index: Number(target.value) });
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
<option value="" hidden></option>
|
||||
{#each Array.from({ length: count }, (_, i) => i) as i}
|
||||
<option value="{fromIndex + i}" data-page="{fromIndex + i + 1}">
|
||||
|
|
@ -50,7 +51,8 @@
|
|||
page="{fromIndex + 1}"
|
||||
on:click="{() => {
|
||||
dispatch('select', { index: fromIndex });
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
Page
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -14,14 +14,17 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
{#each [0, 1, 2, 3] as item, i (item)}
|
||||
<li
|
||||
class:bx--progress-step="{true}"
|
||||
class:bx--progress-step--incomplete="{true}">
|
||||
class:bx--progress-step--incomplete="{true}"
|
||||
>
|
||||
<div
|
||||
class:bx--progress-step-button="{true}"
|
||||
class:bx--progress-step-button--unclickable="{true}">
|
||||
class:bx--progress-step-button--unclickable="{true}"
|
||||
>
|
||||
<svg>
|
||||
<path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0"></path>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -16,10 +16,12 @@
|
|||
</ProgressStep>
|
||||
<ProgressStep
|
||||
label="Really long label"
|
||||
description="The progress indicator will listen for clicks on the steps" />
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
<ProgressStep
|
||||
label="Tooltip and really long label"
|
||||
description="The progress indicator will listen for clicks on the steps" />
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
</ProgressIndicator>
|
||||
{:else}
|
||||
<ProgressIndicator {...$$props}>
|
||||
|
|
@ -29,23 +31,28 @@
|
|||
secondaryLabel="Optional label"
|
||||
on:click="{() => {
|
||||
console.log('click');
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
<ProgressStep
|
||||
label="Second step with tooltip"
|
||||
description="Step 2: Getting started with Carbon Design System"
|
||||
secondaryLabel="Optional label" />
|
||||
secondaryLabel="Optional label"
|
||||
/>
|
||||
<ProgressStep
|
||||
label="Third step with tooltip"
|
||||
description="Step 3: Getting started with Carbon Design System" />
|
||||
description="Step 3: Getting started with Carbon Design System"
|
||||
/>
|
||||
<ProgressStep
|
||||
label="Fourth step"
|
||||
description="Step 4: Getting started with Carbon Design System"
|
||||
secondaryLabel="Example invalid step"
|
||||
invalid />
|
||||
invalid
|
||||
/>
|
||||
<ProgressStep
|
||||
label="Fifth step"
|
||||
description="Step 5: Getting started with Carbon Design System"
|
||||
disabled />
|
||||
disabled
|
||||
/>
|
||||
</ProgressIndicator>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<slot />
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,8 @@
|
|||
class:bx--progress-step--complete="{complete}"
|
||||
class:bx--progress-step--incomplete="{!complete && !current}"
|
||||
class:bx--progress-step--disabled="{disabled}"
|
||||
{...$$restProps}>
|
||||
{...$$restProps}
|
||||
>
|
||||
<button
|
||||
disabled="{disabled}"
|
||||
aria-disabled="{disabled}"
|
||||
|
|
@ -89,7 +90,8 @@
|
|||
if (e.key === ' ' || e.key === 'Enter') {
|
||||
change(step.index);
|
||||
}
|
||||
}}">
|
||||
}}"
|
||||
>
|
||||
{#if invalid}
|
||||
<Warning16 class="bx--progress__warning" />
|
||||
{:else if current}
|
||||
|
|
@ -104,7 +106,8 @@
|
|||
<title>{description}</title>
|
||||
<path
|
||||
d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3
|
||||
0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path>
|
||||
0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"
|
||||
></path>
|
||||
</svg>
|
||||
{/if}
|
||||
<slot props="{{ class: 'bx--progress-label' }}">
|
||||
|
|
|
|||
|
|
@ -4,9 +4,11 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<div class:bx--radio-button="{true}" class:bx--skeleton="{true}"></div>
|
||||
<span
|
||||
class:bx--radio-button__label="{true}"
|
||||
class:bx--skeleton="{true}"></span>
|
||||
class:bx--skeleton="{true}"
|
||||
></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,8 @@
|
|||
<div
|
||||
class:bx--radio-button-wrapper="{true}"
|
||||
class:bx--radio-button-wrapper--label-left="{labelPosition === 'left'}"
|
||||
{...$$restProps}>
|
||||
{...$$restProps}
|
||||
>
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
type="radio"
|
||||
|
|
@ -86,7 +87,8 @@
|
|||
if (ctx) {
|
||||
ctx.update(value);
|
||||
}
|
||||
}}" />
|
||||
}}"
|
||||
/>
|
||||
<label class:bx--radio-button__label="{true}" for="{id}">
|
||||
<span class:bx--radio-button__appearance="{true}"></span>
|
||||
<span class:bx--visually-hidden="{hideLabel}">{labelText}</span>
|
||||
|
|
|
|||
|
|
@ -51,12 +51,14 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<div
|
||||
class:bx--radio-button-group="{true}"
|
||||
class:bx--radio-button-group--vertical="{orientation === 'vertical'}"
|
||||
class="{labelPosition && `bx--radio-button-group--label-${labelPosition}`}"
|
||||
disabled="{disabled}">
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
on:mouseleave
|
||||
>
|
||||
<span class:bx--label="{true}"></span>
|
||||
<div class:bx--search-input="{true}"></div>
|
||||
</div>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue