mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
refactor: use icons from carbon-icons-svelte@11 (#1227)
* chore: update ignore rules, remove unused files * refactor(icons): use icons from carbon-icons-svelte@11 * docs(time-picker): fix default value * chore: upgrade carbon-icons-svelte to v11 * docs: update examples to use icons from carbon-icons-svelte@11 * docs: update number of icons [ci skip]
This commit is contained in:
metonym
GitHub
parent
755a8aa5bc
commit
ba58ba8f00
176 changed files with 1410 additions and 2487 deletions
|
|
@ -15,7 +15,7 @@
|
|||
export let iconDescription = "Expand/Collapse";
|
||||
|
||||
import { onMount, getContext } from "svelte";
|
||||
import ChevronRight16 from "../icons/ChevronRight16.svelte";
|
||||
import ChevronRight from "../icons/ChevronRight.svelte";
|
||||
|
||||
let initialDisabled = disabled;
|
||||
|
||||
|
|
@ -68,10 +68,7 @@
|
|||
}
|
||||
}}"
|
||||
>
|
||||
<ChevronRight16
|
||||
class="bx--accordion__arrow"
|
||||
aria-label="{iconDescription}"
|
||||
/>
|
||||
<ChevronRight class="bx--accordion__arrow" aria-label="{iconDescription}" />
|
||||
<div class:bx--accordion__title="{true}">
|
||||
<slot name="title">{title}</slot>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
/** Set to `false` to close the first accordion item */
|
||||
export let open = true;
|
||||
|
||||
import ChevronRight16 from "../icons/ChevronRight16.svelte";
|
||||
import ChevronRight from "../icons/ChevronRight.svelte";
|
||||
import SkeletonText from "../SkeletonText/SkeletonText.svelte";
|
||||
</script>
|
||||
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
class:bx--accordion__item--active="{true}"
|
||||
>
|
||||
<span class:bx--accordion__heading="{true}">
|
||||
<ChevronRight16 class="bx--accordion__arrow" />
|
||||
<ChevronRight class="bx--accordion__arrow" />
|
||||
<SkeletonText class="bx--accordion__title" />
|
||||
</span>
|
||||
<div class="bx--accordion__content">
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
{#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
|
||||
<li class="bx--accordion__item">
|
||||
<span class="bx--accordion__heading">
|
||||
<ChevronRight16 class="bx--accordion__arrow" />
|
||||
<ChevronRight class="bx--accordion__arrow" />
|
||||
<SkeletonText class="bx--accordion__title" />
|
||||
</span>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@
|
|||
export let ref = null;
|
||||
|
||||
import { createEventDispatcher, tick, onMount } from "svelte";
|
||||
import ChevronDown16 from "../icons/ChevronDown16.svelte";
|
||||
import ChevronDown from "../icons/ChevronDown.svelte";
|
||||
import Button from "../Button/Button.svelte";
|
||||
import CopyButton from "../CopyButton/CopyButton.svelte";
|
||||
import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte";
|
||||
|
|
@ -243,7 +243,7 @@
|
|||
}}"
|
||||
>
|
||||
<span class:bx--snippet-btn--text="{true}">{expandText}</span>
|
||||
<ChevronDown16
|
||||
<ChevronDown
|
||||
class="bx--icon-chevron--down bx--snippet__icon"
|
||||
aria-label="{expandText}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -100,9 +100,9 @@
|
|||
export let listRef = null;
|
||||
|
||||
import { createEventDispatcher, afterUpdate, tick } from "svelte";
|
||||
import Checkmark16 from "../icons/Checkmark16.svelte";
|
||||
import WarningFilled16 from "../icons/WarningFilled16.svelte";
|
||||
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
|
||||
import Checkmark from "../icons/Checkmark.svelte";
|
||||
import WarningFilled from "../icons/WarningFilled.svelte";
|
||||
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
|
||||
import ListBox from "../ListBox/ListBox.svelte";
|
||||
import ListBoxField from "../ListBox/ListBoxField.svelte";
|
||||
import ListBoxMenu from "../ListBox/ListBoxMenu.svelte";
|
||||
|
|
@ -314,10 +314,10 @@
|
|||
}}"
|
||||
/>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--list-box__invalid-icon" />
|
||||
<WarningFilled class="bx--list-box__invalid-icon" />
|
||||
{/if}
|
||||
{#if !invalid && warn}
|
||||
<WarningAltFilled16
|
||||
<WarningAltFilled
|
||||
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
|
||||
/>
|
||||
{/if}
|
||||
|
|
@ -368,7 +368,7 @@
|
|||
{itemToString(item)}
|
||||
</slot>
|
||||
{#if selectedItem && selectedItem.id === item.id}
|
||||
<Checkmark16 class="bx--list-box__menu-item__selected-icon" />
|
||||
<Checkmark class="bx--list-box__menu-item__selected-icon" />
|
||||
{/if}
|
||||
</ListBoxMenuItem>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
export let iconDescription = "Close";
|
||||
|
||||
import { getContext } from "svelte";
|
||||
import Close20 from "../icons/Close20.svelte";
|
||||
import Close from "../icons/Close.svelte";
|
||||
|
||||
const { closeModal, updateLabel } = getContext("ComposedModal");
|
||||
|
||||
|
|
@ -57,6 +57,6 @@
|
|||
on:click
|
||||
on:click="{closeModal}"
|
||||
>
|
||||
<Close20 class="bx--modal-close__icon {closeIconClass}" />
|
||||
<Close size="{20}" class="bx--modal-close__icon {closeIconClass}" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -50,8 +50,8 @@
|
|||
|
||||
import { onMount, getContext, createEventDispatcher, tick } from "svelte";
|
||||
import ContextMenu from "./ContextMenu.svelte";
|
||||
import Checkmark16 from "../icons/Checkmark16.svelte";
|
||||
import CaretRight16 from "../icons/CaretRight16.svelte";
|
||||
import Checkmark from "../icons/Checkmark.svelte";
|
||||
import CaretRight from "../icons/CaretRight.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const ctx = getContext("ContextMenu");
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
|
||||
if (selected) {
|
||||
if (ctxGroup) ctxGroup.addOption({ id });
|
||||
icon = Checkmark16;
|
||||
icon = Checkmark;
|
||||
} else {
|
||||
icon = undefined;
|
||||
}
|
||||
|
|
@ -158,7 +158,7 @@
|
|||
|
||||
if (selected) {
|
||||
if (ctxRadioGroup) ctxRadioGroup.setOption({ id });
|
||||
icon = Checkmark16;
|
||||
icon = Checkmark;
|
||||
} else {
|
||||
icon = undefined;
|
||||
}
|
||||
|
|
@ -253,7 +253,7 @@
|
|||
<span class:bx--menu-option__label="{true}" title="{labelText}">
|
||||
<slot name="labelText">{labelText}</slot>
|
||||
</span>
|
||||
<div class:bx--menu-option__info="{true}"><CaretRight16 /></div>
|
||||
<div class:bx--menu-option__info="{true}"><CaretRight /></div>
|
||||
</div>
|
||||
|
||||
<ContextMenu
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
};
|
||||
|
||||
import { createEventDispatcher, onMount } from "svelte";
|
||||
import Copy16 from "../icons/Copy16.svelte";
|
||||
import Copy from "../icons/Copy.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
}
|
||||
}}"
|
||||
>
|
||||
<Copy16 class="bx--snippet__icon" />
|
||||
<Copy class="bx--snippet__icon" />
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class:bx--assistive-text="{true}"
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@
|
|||
|
||||
import { createEventDispatcher, setContext } from "svelte";
|
||||
import { writable, derived } from "svelte/store";
|
||||
import ChevronRight16 from "../icons/ChevronRight16.svelte";
|
||||
import ChevronRight from "../icons/ChevronRight.svelte";
|
||||
import InlineCheckbox from "../Checkbox/InlineCheckbox.svelte";
|
||||
import RadioButton from "../RadioButton/RadioButton.svelte";
|
||||
import Table from "./Table.svelte";
|
||||
|
|
@ -286,7 +286,7 @@
|
|||
dispatch('click:header--expand', { expanded });
|
||||
}}"
|
||||
>
|
||||
<ChevronRight16 class="bx--table-expand__svg" />
|
||||
<ChevronRight class="bx--table-expand__svg" />
|
||||
</button>
|
||||
{/if}
|
||||
</th>
|
||||
|
|
@ -413,7 +413,7 @@
|
|||
});
|
||||
}}"
|
||||
>
|
||||
<ChevronRight16 class="bx--table-expand__svg" />
|
||||
<ChevronRight class="bx--table-expand__svg" />
|
||||
</button>
|
||||
{/if}
|
||||
</TableCell>
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
import { getContext } from "svelte";
|
||||
import ArrowUp20 from "../icons/ArrowUp20.svelte";
|
||||
import ArrowsVertical20 from "../icons/ArrowsVertical20.svelte";
|
||||
import ArrowUp from "../icons/ArrowUp.svelte";
|
||||
import ArrowsVertical from "../icons/ArrowsVertical.svelte";
|
||||
|
||||
const { sortHeader, tableSortable } = getContext("DataTable");
|
||||
|
||||
|
|
@ -46,8 +46,13 @@
|
|||
<div class:bx--table-header-label="{true}">
|
||||
<slot />
|
||||
</div>
|
||||
<ArrowUp20 aria-label="{ariaLabel}" class="bx--table-sort__icon" />
|
||||
<ArrowsVertical20
|
||||
<ArrowUp
|
||||
size="{20}"
|
||||
aria-label="{ariaLabel}"
|
||||
class="bx--table-sort__icon"
|
||||
/>
|
||||
<ArrowsVertical
|
||||
size="{20}"
|
||||
aria-label="{ariaLabel}"
|
||||
class="bx--table-sort__icon-unsorted"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
/** @extends {"../OverflowMenu/OverflowMenu.svelte"} OverflowMenuProps */
|
||||
|
||||
import { getContext } from "svelte";
|
||||
import Settings16 from "../icons/Settings16.svelte";
|
||||
import Settings from "../icons/Settings.svelte";
|
||||
import OverflowMenu from "../OverflowMenu/OverflowMenu.svelte";
|
||||
|
||||
const ctx = getContext("Toolbar");
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
<OverflowMenu
|
||||
bind:menuRef
|
||||
icon="{Settings16}"
|
||||
icon="{Settings}"
|
||||
{...$$restProps}
|
||||
class="bx--toolbar-action bx--overflow-menu {$$restProps.class}"
|
||||
flipped
|
||||
|
|
|
|||
|
|
@ -54,9 +54,9 @@
|
|||
export let ref = null;
|
||||
|
||||
import { getContext } from "svelte";
|
||||
import Calendar16 from "../icons/Calendar16.svelte";
|
||||
import WarningFilled16 from "../icons/WarningFilled16.svelte";
|
||||
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
|
||||
import Calendar from "../icons/Calendar.svelte";
|
||||
import WarningFilled from "../icons/WarningFilled.svelte";
|
||||
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
|
||||
|
||||
const {
|
||||
range,
|
||||
|
|
@ -138,22 +138,20 @@
|
|||
/>
|
||||
{#if !$hasCalendar}
|
||||
{#if invalid}
|
||||
<WarningFilled16
|
||||
<WarningFilled
|
||||
class="bx--date-picker__icon bx--date-picker__icon--invalid"
|
||||
/>
|
||||
{/if}
|
||||
{#if !invalid && warn}
|
||||
<WarningAltFilled16
|
||||
<WarningAltFilled
|
||||
class="bx--date-picker__icon bx--date-picker__icon--warn"
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if $hasCalendar}
|
||||
<Calendar16
|
||||
role="img"
|
||||
<Calendar
|
||||
class="bx--date-picker__icon"
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
on:click="{openCalendar}"
|
||||
/>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -101,8 +101,8 @@
|
|||
export let ref = null;
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import WarningFilled16 from "../icons/WarningFilled16.svelte";
|
||||
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
|
||||
import WarningFilled from "../icons/WarningFilled.svelte";
|
||||
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
|
||||
import {
|
||||
ListBox,
|
||||
ListBoxMenu,
|
||||
|
|
@ -190,10 +190,10 @@
|
|||
warnText="{warnText}"
|
||||
>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--list-box__invalid-icon" />
|
||||
<WarningFilled class="bx--list-box__invalid-icon" />
|
||||
{/if}
|
||||
{#if !invalid && warn}
|
||||
<WarningAltFilled16
|
||||
<WarningAltFilled
|
||||
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
|
||||
/>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
/** Set to `true` to indicate an invalid state */
|
||||
export let invalid = false;
|
||||
|
||||
import Close16 from "../icons/Close16.svelte";
|
||||
import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte";
|
||||
import WarningFilled16 from "../icons/WarningFilled16.svelte";
|
||||
import Close from "../icons/Close.svelte";
|
||||
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
|
||||
import WarningFilled from "../icons/WarningFilled.svelte";
|
||||
import Loading from "../Loading/Loading.svelte";
|
||||
</script>
|
||||
|
||||
|
|
@ -28,9 +28,9 @@
|
|||
|
||||
{#if status === "edit"}
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--file-invalid" />
|
||||
<WarningFilled class="bx--file-invalid" />
|
||||
{/if}
|
||||
<Close16
|
||||
<Close
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
class="bx--file-close"
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
{/if}
|
||||
|
||||
{#if status === "complete"}
|
||||
<CheckmarkFilled16
|
||||
<CheckmarkFilled
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
class="bx--file-complete"
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@
|
|||
export let successDelay = 1500;
|
||||
|
||||
import { createEventDispatcher, afterUpdate, onMount } from "svelte";
|
||||
import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte";
|
||||
import ErrorFilled16 from "../icons/ErrorFilled16.svelte";
|
||||
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
|
||||
import ErrorFilled from "../icons/ErrorFilled.svelte";
|
||||
import Loading from "../Loading/Loading.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
|
@ -56,12 +56,12 @@
|
|||
>
|
||||
<div class:bx--inline-loading__animation="{true}">
|
||||
{#if status === "error"}
|
||||
<ErrorFilled16
|
||||
<ErrorFilled
|
||||
class="bx--inline-loading--error"
|
||||
title="{iconDescription}"
|
||||
/>
|
||||
{:else if status === "finished"}
|
||||
<CheckmarkFilled16
|
||||
<CheckmarkFilled
|
||||
class="bx--inline-loading__checkmark-container"
|
||||
title="{iconDescription}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
/** @extends {"./Link.svelte"} LinkProps */
|
||||
|
||||
import Link from "./Link.svelte";
|
||||
import Launch16 from "../icons/Launch16.svelte";
|
||||
import Launch from "../icons/Launch.svelte";
|
||||
</script>
|
||||
|
||||
<Link
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
on:mouseenter
|
||||
on:mouseleave
|
||||
target="_blank"
|
||||
icon="{Launch16}"
|
||||
icon="{Launch}"
|
||||
>
|
||||
<slot />
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
*/
|
||||
export let translateWithId = (id) => defaultTranslations[id];
|
||||
|
||||
import ChevronDown16 from "../icons/ChevronDown16.svelte";
|
||||
import ChevronDown from "../icons/ChevronDown.svelte";
|
||||
|
||||
const defaultTranslations = {
|
||||
[translationIds.close]: "Close menu",
|
||||
|
|
@ -31,5 +31,5 @@
|
|||
{...$$restProps}
|
||||
on:click|preventDefault
|
||||
>
|
||||
<ChevronDown16 aria-label="{description}" title="{description}" />
|
||||
<ChevronDown aria-label="{description}" title="{description}" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
export let ref = null;
|
||||
|
||||
import { createEventDispatcher, getContext } from "svelte";
|
||||
import Close16 from "../icons/Close16.svelte";
|
||||
import Close from "../icons/Close.svelte";
|
||||
|
||||
const defaultTranslations = {
|
||||
[translationIds.clearAll]: "Clear all selected items",
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
aria-label="{translationIds.clearAll}"
|
||||
title="{description}"
|
||||
>
|
||||
<Close16 />
|
||||
<Close />
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
|
|
@ -101,6 +101,6 @@
|
|||
}}"
|
||||
>
|
||||
{#if selectionCount !== undefined}{selectionCount}{/if}
|
||||
<Close16 />
|
||||
<Close />
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
export let ref = null;
|
||||
|
||||
import { createEventDispatcher, onMount, afterUpdate } from "svelte";
|
||||
import Close20 from "../icons/Close20.svelte";
|
||||
import Close from "../icons/Close.svelte";
|
||||
import Button from "../Button/Button.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
|
@ -228,7 +228,8 @@
|
|||
open = false;
|
||||
}}"
|
||||
>
|
||||
<Close20
|
||||
<Close
|
||||
size="{20}"
|
||||
aria-label="{iconDescription}"
|
||||
class="bx--modal-close__icon"
|
||||
/>
|
||||
|
|
@ -253,7 +254,8 @@
|
|||
open = false;
|
||||
}}"
|
||||
>
|
||||
<Close20
|
||||
<Close
|
||||
size="{20}"
|
||||
aria-label="{iconDescription}"
|
||||
class="bx--modal-close__icon"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -161,8 +161,8 @@
|
|||
export let highlightedId = null;
|
||||
|
||||
import { afterUpdate, createEventDispatcher, setContext } from "svelte";
|
||||
import WarningFilled16 from "../icons/WarningFilled16.svelte";
|
||||
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
|
||||
import WarningFilled from "../icons/WarningFilled.svelte";
|
||||
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
|
||||
import Checkbox from "../Checkbox/Checkbox.svelte";
|
||||
import {
|
||||
ListBox,
|
||||
|
|
@ -300,10 +300,10 @@
|
|||
{checked.length > 0 && 'bx--multi-select--selected'}"
|
||||
>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--list-box__invalid-icon" />
|
||||
<WarningFilled class="bx--list-box__invalid-icon" />
|
||||
{/if}
|
||||
{#if !invalid && warn}
|
||||
<WarningAltFilled16
|
||||
<WarningAltFilled
|
||||
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
|
||||
/>
|
||||
{/if}
|
||||
|
|
@ -431,7 +431,7 @@
|
|||
value="{inputValue}"
|
||||
/>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--list-box__invalid-icon" />
|
||||
<WarningFilled class="bx--list-box__invalid-icon" />
|
||||
{/if}
|
||||
{#if inputValue}
|
||||
<ListBoxSelection
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
* Specify the icon to render
|
||||
* @type {typeof import("svelte").SvelteComponent}
|
||||
*/
|
||||
export let icon = Close20;
|
||||
export let icon = Close;
|
||||
|
||||
/**
|
||||
* Specify the title of the icon
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
/** Specify the ARIA label for the icon */
|
||||
export let iconDescription = "Close icon";
|
||||
|
||||
import Close20 from "../icons/Close20.svelte";
|
||||
import Close from "../icons/Close.svelte";
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
|
|
@ -38,6 +38,7 @@
|
|||
>
|
||||
<svelte:component
|
||||
this="{icon}"
|
||||
size="{20}"
|
||||
title="{title}"
|
||||
class="bx--{notificationType}-notification__close-icon"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -14,25 +14,26 @@
|
|||
/** Specify the ARIA label for the icon */
|
||||
export let iconDescription = "Closes notification";
|
||||
|
||||
import CheckmarkFilled20 from "../icons/CheckmarkFilled20.svelte";
|
||||
import ErrorFilled20 from "../icons/ErrorFilled20.svelte";
|
||||
import InformationFilled20 from "../icons/InformationFilled20.svelte";
|
||||
import InformationSquareFilled20 from "../icons/InformationSquareFilled20.svelte";
|
||||
import WarningFilled20 from "../icons/WarningFilled20.svelte";
|
||||
import WarningAltFilled20 from "../icons/WarningAltFilled20.svelte";
|
||||
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
|
||||
import ErrorFilled from "../icons/ErrorFilled.svelte";
|
||||
import InformationFilled from "../icons/InformationFilled.svelte";
|
||||
import InformationSquareFilled from "../icons/InformationSquareFilled.svelte";
|
||||
import WarningFilled from "../icons/WarningFilled.svelte";
|
||||
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
|
||||
|
||||
const icons = {
|
||||
error: ErrorFilled20,
|
||||
"info-square": InformationSquareFilled20,
|
||||
info: InformationFilled20,
|
||||
success: CheckmarkFilled20,
|
||||
warning: WarningFilled20,
|
||||
"warning-alt": WarningAltFilled20,
|
||||
error: ErrorFilled,
|
||||
"info-square": InformationSquareFilled,
|
||||
info: InformationFilled,
|
||||
success: CheckmarkFilled,
|
||||
warning: WarningFilled,
|
||||
"warning-alt": WarningAltFilled,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:component
|
||||
this="{icons[kind]}"
|
||||
size="{20}"
|
||||
title="{iconDescription}"
|
||||
class="bx--{notificationType}-notification__icon"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -100,11 +100,11 @@
|
|||
export let ref = null;
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import Add16 from "../icons/Add16.svelte";
|
||||
import Subtract16 from "../icons/Subtract16.svelte";
|
||||
import WarningFilled16 from "../icons/WarningFilled16.svelte";
|
||||
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
|
||||
import EditOff16 from "../icons/EditOff16.svelte";
|
||||
import Add from "../icons/Add.svelte";
|
||||
import Subtract from "../icons/Subtract.svelte";
|
||||
import WarningFilled from "../icons/WarningFilled.svelte";
|
||||
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
|
||||
import EditOff from "../icons/EditOff.svelte";
|
||||
|
||||
const defaultTranslations = {
|
||||
[translationIds.increment]: "Increment number",
|
||||
|
|
@ -207,15 +207,15 @@
|
|||
on:blur
|
||||
/>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--number__invalid" />
|
||||
<WarningFilled class="bx--number__invalid" />
|
||||
{/if}
|
||||
{#if !invalid && warn}
|
||||
<WarningAltFilled16
|
||||
<WarningAltFilled
|
||||
class="bx--number__invalid bx--number__invalid--warning"
|
||||
/>
|
||||
{/if}
|
||||
{#if readonly}
|
||||
<EditOff16 class="bx--text-input__readonly-icon" />
|
||||
<EditOff class="bx--text-input__readonly-icon" />
|
||||
{/if}
|
||||
{#if !hideSteppers}
|
||||
<div class:bx--number__controls="{true}">
|
||||
|
|
@ -231,7 +231,7 @@
|
|||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Subtract16 class="down-icon" />
|
||||
<Subtract class="down-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
<button
|
||||
|
|
@ -246,7 +246,7 @@
|
|||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Add16 class="up-icon" />
|
||||
<Add class="up-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,10 +31,11 @@
|
|||
export let menuOptionsClass = undefined;
|
||||
|
||||
/**
|
||||
* Specify the icon to render
|
||||
* Specify the icon to render.
|
||||
* Defaults to `<OverflowMenuVertical />`
|
||||
* @type {typeof import("svelte").SvelteComponent}
|
||||
*/
|
||||
export let icon = OverflowMenuVertical16;
|
||||
export let icon = OverflowMenuVertical;
|
||||
|
||||
/**
|
||||
* Specify the icon class
|
||||
|
|
@ -61,8 +62,8 @@
|
|||
afterUpdate,
|
||||
} from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
import OverflowMenuVertical16 from "../icons/OverflowMenuVertical16.svelte";
|
||||
import OverflowMenuHorizontal16 from "../icons/OverflowMenuHorizontal16.svelte";
|
||||
import OverflowMenuVertical from "../icons/OverflowMenuVertical.svelte";
|
||||
import OverflowMenuHorizontal from "../icons/OverflowMenuHorizontal.svelte";
|
||||
|
||||
const ctxBreadcrumbItem = getContext("BreadcrumbItem");
|
||||
const dispatch = createEventDispatcher();
|
||||
|
|
@ -75,7 +76,7 @@
|
|||
let onMountAfterUpdate = true;
|
||||
|
||||
$: if (ctxBreadcrumbItem) {
|
||||
icon = OverflowMenuHorizontal16;
|
||||
icon = OverflowMenuHorizontal;
|
||||
}
|
||||
|
||||
setContext("OverflowMenu", {
|
||||
|
|
|
|||
|
|
@ -71,8 +71,8 @@
|
|||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
import { afterUpdate, createEventDispatcher } from "svelte";
|
||||
import CaretLeft16 from "../icons/CaretLeft16.svelte";
|
||||
import CaretRight16 from "../icons/CaretRight16.svelte";
|
||||
import CaretLeft from "../icons/CaretLeft.svelte";
|
||||
import CaretRight from "../icons/CaretRight.svelte";
|
||||
import Button from "../Button/Button.svelte";
|
||||
import Select from "../Select/Select.svelte";
|
||||
import SelectItem from "../Select/SelectItem.svelte";
|
||||
|
|
@ -161,7 +161,7 @@
|
|||
kind="ghost"
|
||||
tooltipAlignment="center"
|
||||
tooltipPosition="top"
|
||||
icon="{CaretLeft16}"
|
||||
icon="{CaretLeft}"
|
||||
iconDescription="{backwardText}"
|
||||
disabled="{backButtonDisabled}"
|
||||
class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled
|
||||
|
|
@ -176,7 +176,7 @@
|
|||
kind="ghost"
|
||||
tooltipAlignment="end"
|
||||
tooltipPosition="top"
|
||||
icon="{CaretRight16}"
|
||||
icon="{CaretRight}"
|
||||
iconDescription="{forwardText}"
|
||||
disabled="{forwardButtonDisabled}"
|
||||
class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@
|
|||
export let backwardText = "Previous page";
|
||||
|
||||
import { afterUpdate, createEventDispatcher } from "svelte";
|
||||
import CaretLeft16 from "../icons/CaretLeft16.svelte";
|
||||
import CaretRight16 from "../icons/CaretRight16.svelte";
|
||||
import CaretLeft from "../icons/CaretLeft.svelte";
|
||||
import CaretRight from "../icons/CaretRight.svelte";
|
||||
import PaginationItem from "./PaginationItem.svelte";
|
||||
import PaginationOverflow from "./PaginationOverflow.svelte";
|
||||
import Button from "../Button/Button.svelte";
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
tooltipPosition="bottom"
|
||||
iconDescription="{backwardText}"
|
||||
disabled="{!loop && page === 0}"
|
||||
icon="{CaretLeft16}"
|
||||
icon="{CaretLeft}"
|
||||
on:click="{() => {
|
||||
if (page - 1 < 0) {
|
||||
if (loop) page = total - 1;
|
||||
|
|
@ -133,7 +133,7 @@
|
|||
tooltipPosition="bottom"
|
||||
iconDescription="{forwardText}"
|
||||
disabled="{!loop && page === total - 1}"
|
||||
icon="{CaretRight16}"
|
||||
icon="{CaretRight}"
|
||||
on:click="{() => {
|
||||
if (page + 1 >= total) {
|
||||
if (loop) page = 0;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
export let count = 0;
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import OverflowMenuHorizontal16 from "../icons/OverflowMenuHorizontal16.svelte";
|
||||
import OverflowMenuHorizontal from "../icons/OverflowMenuHorizontal.svelte";
|
||||
import PaginationItem from "./PaginationItem.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
{/each}
|
||||
</select>
|
||||
<div class:bx--pagination-nav__select-icon-wrapper="{true}">
|
||||
<OverflowMenuHorizontal16 class="bx--pagination-nav__select-icon" />
|
||||
<OverflowMenuHorizontal class="bx--pagination-nav__select-icon" />
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -24,10 +24,10 @@
|
|||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
import { onMount, getContext } from "svelte";
|
||||
import CheckmarkOutline16 from "../icons/CheckmarkOutline16.svelte";
|
||||
import Warning16 from "../icons/Warning16.svelte";
|
||||
import CircleDash16 from "../icons/CircleDash16.svelte";
|
||||
import Incomplete16 from "../icons/Incomplete16.svelte";
|
||||
import CheckmarkOutline from "../icons/CheckmarkOutline.svelte";
|
||||
import Warning from "../icons/Warning.svelte";
|
||||
import CircleDash from "../icons/CircleDash.svelte";
|
||||
import Incomplete from "../icons/Incomplete.svelte";
|
||||
|
||||
let step = {};
|
||||
|
||||
|
|
@ -84,13 +84,13 @@
|
|||
}}"
|
||||
>
|
||||
{#if invalid}
|
||||
<Warning16 class="bx--progress__warning" title="{description}" />
|
||||
<Warning class="bx--progress__warning" title="{description}" />
|
||||
{:else if current}
|
||||
<Incomplete16 title="{description}" />
|
||||
<Incomplete title="{description}" />
|
||||
{:else if complete}
|
||||
<CheckmarkOutline16 title="{description}" />
|
||||
<CheckmarkOutline title="{description}" />
|
||||
{:else}
|
||||
<CircleDash16 title="{description}" />
|
||||
<CircleDash title="{description}" />
|
||||
{/if}
|
||||
<slot props="{{ class: 'bx--progress-label' }}">
|
||||
<p class:bx--progress-label="{true}">{label}</p>
|
||||
|
|
|
|||
|
|
@ -53,10 +53,11 @@
|
|||
export let labelText = "";
|
||||
|
||||
/**
|
||||
* Specify the icon to render
|
||||
* Specify the icon to render.
|
||||
* Defaults to `<Search />`
|
||||
* @type {typeof import("svelte").SvelteComponent}
|
||||
*/
|
||||
export let icon = Search16;
|
||||
export let icon = IconSearch;
|
||||
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
|
@ -65,9 +66,8 @@
|
|||
export let ref = null;
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import Close16 from "../icons/Close16.svelte";
|
||||
import Close20 from "../icons/Close20.svelte";
|
||||
import Search16 from "../icons/Search16.svelte";
|
||||
import Close from "../icons/Close.svelte";
|
||||
import IconSearch from "../icons/IconSearch.svelte";
|
||||
import SearchSkeleton from "./SearchSkeleton.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
|
@ -162,7 +162,7 @@
|
|||
dispatch('clear');
|
||||
}}"
|
||||
>
|
||||
<svelte:component this="{size === 'xl' ? Close20 : Close16}" />
|
||||
<svelte:component this="{Close}" size="{size === 'xl' ? 20 : 16}" />
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -65,9 +65,9 @@
|
|||
|
||||
import { createEventDispatcher, setContext, afterUpdate } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
import ChevronDown16 from "../icons/ChevronDown16.svelte";
|
||||
import WarningFilled16 from "../icons/WarningFilled16.svelte";
|
||||
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
|
||||
import ChevronDown from "../icons/ChevronDown.svelte";
|
||||
import WarningFilled from "../icons/WarningFilled.svelte";
|
||||
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const selectedValue = writable(selected);
|
||||
|
|
@ -129,9 +129,9 @@
|
|||
>
|
||||
<slot />
|
||||
</select>
|
||||
<ChevronDown16 class="bx--select__arrow" />
|
||||
<ChevronDown class="bx--select__arrow" />
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--select__invalid-icon" />
|
||||
<WarningFilled class="bx--select__invalid-icon" />
|
||||
{/if}
|
||||
</div>
|
||||
{#if invalid}
|
||||
|
|
@ -173,12 +173,12 @@
|
|||
>
|
||||
<slot />
|
||||
</select>
|
||||
<ChevronDown16 class="bx--select__arrow" />
|
||||
<ChevronDown class="bx--select__arrow" />
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--select__invalid-icon" />
|
||||
<WarningFilled class="bx--select__invalid-icon" />
|
||||
{/if}
|
||||
{#if !invalid && warn}
|
||||
<WarningAltFilled16
|
||||
<WarningAltFilled
|
||||
class="bx--select__invalid-icon bx--select__invalid-icon--warning"
|
||||
/>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
import { createEventDispatcher, afterUpdate, setContext } from "svelte";
|
||||
import { writable, derived } from "svelte/store";
|
||||
import ChevronDownGlyph from "../icons/ChevronDownGlyph.svelte";
|
||||
import ChevronDown from "../icons/ChevronDown.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
|
|
@ -137,7 +137,7 @@
|
|||
>
|
||||
{#if currentTab}{currentTab.label}{/if}
|
||||
</a>
|
||||
<ChevronDownGlyph aria-hidden="true" title="{iconDescription}" />
|
||||
<ChevronDown aria-hidden="true" title="{iconDescription}" />
|
||||
</div>
|
||||
<ul
|
||||
role="tablist"
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import Close16 from "../icons/Close16.svelte";
|
||||
import Close from "../icons/Close.svelte";
|
||||
import TagSkeleton from "./TagSkeleton.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<Close16 />
|
||||
<Close />
|
||||
</button>
|
||||
</div>
|
||||
{:else if interactive}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
/** Obtain a reference to the textarea HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import WarningFilled16 from "../icons/WarningFilled16.svelte";
|
||||
import WarningFilled from "../icons/WarningFilled.svelte";
|
||||
|
||||
$: errorId = `error-${id}`;
|
||||
</script>
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
data-invalid="{invalid || undefined}"
|
||||
>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--text-area__invalid-icon" />
|
||||
<WarningFilled class="bx--text-area__invalid-icon" />
|
||||
{/if}
|
||||
<textarea
|
||||
bind:this="{ref}"
|
||||
|
|
|
|||
|
|
@ -81,10 +81,10 @@
|
|||
export let ref = null;
|
||||
|
||||
import { getContext } from "svelte";
|
||||
import WarningFilled16 from "../icons/WarningFilled16.svelte";
|
||||
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
|
||||
import View16 from "../icons/View16.svelte";
|
||||
import ViewOff16 from "../icons/ViewOff16.svelte";
|
||||
import WarningFilled from "../icons/WarningFilled.svelte";
|
||||
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
|
||||
import View from "../icons/View.svelte";
|
||||
import ViewOff from "../icons/ViewOff.svelte";
|
||||
|
||||
const ctx = getContext("Form");
|
||||
|
||||
|
|
@ -154,10 +154,10 @@
|
|||
data-invalid="{invalid || undefined}"
|
||||
>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--text-input__invalid-icon" />
|
||||
<WarningFilled class="bx--text-input__invalid-icon" />
|
||||
{/if}
|
||||
{#if !invalid && warn}
|
||||
<WarningAltFilled16
|
||||
<WarningAltFilled
|
||||
class="bx--text-input__invalid-icon
|
||||
bx--text-input__invalid-icon--warning"
|
||||
/>
|
||||
|
|
@ -213,9 +213,9 @@
|
|||
</span>
|
||||
{/if}
|
||||
{#if type === "text"}
|
||||
<ViewOff16 class="bx--icon-visibility-off" />
|
||||
<ViewOff class="bx--icon-visibility-off" />
|
||||
{:else}
|
||||
<View16 class="bx--icon-visibility-on" />
|
||||
<View class="bx--icon-visibility-on" />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -71,9 +71,9 @@
|
|||
export let readonly = false;
|
||||
|
||||
import { createEventDispatcher, getContext } from "svelte";
|
||||
import WarningFilled16 from "../icons/WarningFilled16.svelte";
|
||||
import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
|
||||
import EditOff16 from "../icons/EditOff16.svelte";
|
||||
import WarningFilled from "../icons/WarningFilled.svelte";
|
||||
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
|
||||
import EditOff from "../icons/EditOff.svelte";
|
||||
|
||||
const ctx = getContext("Form");
|
||||
const dispatch = createEventDispatcher();
|
||||
|
|
@ -163,16 +163,16 @@
|
|||
class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
|
||||
>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--text-input__invalid-icon" />
|
||||
<WarningFilled class="bx--text-input__invalid-icon" />
|
||||
{/if}
|
||||
{#if !invalid && warn}
|
||||
<WarningAltFilled16
|
||||
<WarningAltFilled
|
||||
class="bx--text-input__invalid-icon
|
||||
bx--text-input__invalid-icon--warning"
|
||||
/>
|
||||
{/if}
|
||||
{#if readonly}
|
||||
<EditOff16 class="bx--text-input__readonly-icon" />
|
||||
<EditOff class="bx--text-input__readonly-icon" />
|
||||
{/if}
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
export let ref = null;
|
||||
|
||||
import { afterUpdate } from "svelte";
|
||||
import ChevronDown16 from "../icons/ChevronDown16.svelte";
|
||||
import ChevronDown from "../icons/ChevronDown.svelte";
|
||||
|
||||
let refAbove = null;
|
||||
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
</div>
|
||||
<div class:bx--tile__chevron="{true}">
|
||||
<span>{expanded ? tileExpandedLabel : tileCollapsedLabel}</span>
|
||||
<ChevronDown16 />
|
||||
<ChevronDown />
|
||||
</div>
|
||||
<div class:bx--tile-content="{true}">
|
||||
<span class:bx--tile-content__below-the-fold="{true}">
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
export let name = "";
|
||||
|
||||
import { getContext } from "svelte";
|
||||
import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte";
|
||||
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
|
||||
|
||||
const { add, update, selectedValue } = getContext("TileGroup");
|
||||
|
||||
|
|
@ -71,10 +71,7 @@
|
|||
on:mouseleave
|
||||
>
|
||||
<span class:bx--tile__checkmark="{true}">
|
||||
<CheckmarkFilled16
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
/>
|
||||
<CheckmarkFilled aria-label="{iconDescription}" title="{iconDescription}" />
|
||||
</span>
|
||||
<span class:bx--tile-content="{true}">
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
export let ref = null;
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte";
|
||||
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
|
|
@ -80,10 +80,7 @@
|
|||
}}"
|
||||
>
|
||||
<span class:bx--tile__checkmark="{true}">
|
||||
<CheckmarkFilled16
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
/>
|
||||
<CheckmarkFilled aria-label="{iconDescription}" title="{iconDescription}" />
|
||||
</span>
|
||||
<span class:bx--tile-content="{true}">
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
import { setContext } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
import ChevronDownGlyph from "../icons/ChevronDownGlyph.svelte";
|
||||
import ChevronDown from "../icons/ChevronDown.svelte";
|
||||
|
||||
const selectedValue = writable(value);
|
||||
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
>
|
||||
<slot />
|
||||
</select>
|
||||
<ChevronDownGlyph
|
||||
<ChevronDown
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
class="bx--select__arrow"
|
||||
|
|
|
|||
|
|
@ -29,11 +29,11 @@
|
|||
export let hideIcon = false;
|
||||
|
||||
/**
|
||||
* Specify the icon to render for the tooltip button
|
||||
* Icon size must be 16px (e.g., `Add16`, `Task16`)
|
||||
* Specify the icon to render for the tooltip button.
|
||||
* Default to `<Information />`
|
||||
* @type {typeof import("svelte").SvelteComponent}
|
||||
*/
|
||||
export let icon = Information16;
|
||||
export let icon = Information;
|
||||
|
||||
/** Specify the ARIA label for the tooltip button */
|
||||
export let iconDescription = "";
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
|
||||
import { createEventDispatcher, afterUpdate, setContext } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
import Information16 from "../icons/Information16.svelte";
|
||||
import Information from "../icons/Information.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const tooltipOpen = writable(open);
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
export let icon = undefined;
|
||||
|
||||
import { afterUpdate, getContext } from "svelte";
|
||||
import CaretDown16 from "../icons/CaretDown16.svelte";
|
||||
import CaretDown from "../icons/CaretDown.svelte";
|
||||
import TreeViewNode, { computeTreeLeafDepth } from "./TreeViewNode.svelte";
|
||||
|
||||
let ref = null;
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
toggleNode(node);
|
||||
}}"
|
||||
>
|
||||
<CaretDown16
|
||||
<CaretDown
|
||||
class="bx--tree-parent-node__toggle-icon {expanded &&
|
||||
'bx--tree-parent-node__toggle-icon--expanded'}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -9,24 +9,24 @@
|
|||
export let isOpen = false;
|
||||
|
||||
/**
|
||||
* Specify the icon to render for the closed state
|
||||
* Defaults to `Menu20`
|
||||
* Specify the icon to render for the closed state.
|
||||
* Defaults to `<Menu size={20} />`
|
||||
* @type {typeof import("svelte").SvelteComponent}
|
||||
*/
|
||||
export let iconMenu = Menu20;
|
||||
export let iconMenu = Menu;
|
||||
|
||||
/**
|
||||
* Specify the icon to render for the opened state
|
||||
* Defaults to `Close20`
|
||||
* Specify the icon to render for the opened state.
|
||||
* Defaults to `<Close size={20} />`
|
||||
* @type {typeof import("svelte").SvelteComponent}
|
||||
*/
|
||||
export let iconClose = Close20;
|
||||
export let iconClose = Close;
|
||||
|
||||
/** Obtain a reference to the HTML button element */
|
||||
export let ref = null;
|
||||
|
||||
import Close20 from "../icons/Close20.svelte";
|
||||
import Menu20 from "../icons/Menu20.svelte";
|
||||
import Close from "../icons/Close.svelte";
|
||||
import Menu from "../icons/Menu.svelte";
|
||||
</script>
|
||||
|
||||
<button
|
||||
|
|
@ -41,5 +41,5 @@
|
|||
on:click
|
||||
on:click="{() => (isOpen = !isOpen)}"
|
||||
>
|
||||
<svelte:component this="{isOpen ? iconClose : iconMenu}" />
|
||||
<svelte:component this="{isOpen ? iconClose : iconMenu}" size="{20}" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -47,21 +47,21 @@
|
|||
export let ref = null;
|
||||
|
||||
/**
|
||||
* Specify the icon to render for the closed state
|
||||
* Defaults to `Menu20`
|
||||
* Specify the icon to render for the closed state.
|
||||
* Defaults to `<Menu size={20} />`
|
||||
* @type {typeof import("svelte").SvelteComponent}
|
||||
*/
|
||||
export let iconMenu = Menu20;
|
||||
export let iconMenu = Menu;
|
||||
|
||||
/**
|
||||
* Specify the icon to render for the opened state
|
||||
* Defaults to `Close20`
|
||||
* Specify the icon to render for the opened state.
|
||||
* Defaults to `<Close size={20} />`
|
||||
* @type {typeof import("svelte").SvelteComponent}
|
||||
*/
|
||||
export let iconClose = Close20;
|
||||
export let iconClose = Close;
|
||||
|
||||
import Close20 from "../icons/Close20.svelte";
|
||||
import Menu20 from "../icons/Menu20.svelte";
|
||||
import Close from "../icons/Close.svelte";
|
||||
import Menu from "../icons/Menu.svelte";
|
||||
import { shouldRenderHamburgerMenu } from "./navStore";
|
||||
import HamburgerMenu from "./HamburgerMenu.svelte";
|
||||
|
||||
|
|
|
|||
|
|
@ -3,16 +3,18 @@
|
|||
export let isOpen = false;
|
||||
|
||||
/**
|
||||
* Specify the icon to render
|
||||
* Specify the icon to render when the action panel is closed.
|
||||
* Defaults to `<Switcher size={20} />`
|
||||
* @type {typeof import("svelte").SvelteComponent}
|
||||
*/
|
||||
export let icon = AppSwitcher20;
|
||||
export let icon = Switcher;
|
||||
|
||||
/**
|
||||
* Specify the icon to render when the action panel is open
|
||||
* Specify the icon to render when the action panel is open.
|
||||
* Defaults to `<Close size={20} />`
|
||||
* @type {typeof import("svelte").SvelteComponent}
|
||||
*/
|
||||
export let closeIcon = Close20;
|
||||
export let closeIcon = Close;
|
||||
|
||||
/**
|
||||
* Specify the text
|
||||
|
|
@ -33,8 +35,8 @@
|
|||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { slide } from "svelte/transition";
|
||||
import Close20 from "../icons/Close20.svelte";
|
||||
import AppSwitcher20 from "../icons/AppSwitcher20.svelte";
|
||||
import Close from "../icons/Close.svelte";
|
||||
import Switcher from "../icons/Switcher.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
|
|
@ -65,11 +67,11 @@
|
|||
>
|
||||
{#if isOpen}
|
||||
<slot name="closeIcon">
|
||||
<svelte:component this="{closeIcon}" />
|
||||
<svelte:component this="{closeIcon}" size="{20}" />
|
||||
</slot>
|
||||
{:else}
|
||||
<slot name="icon">
|
||||
<svelte:component this="{icon}" />
|
||||
<svelte:component this="{icon}" size="{20}" />
|
||||
</slot>
|
||||
{/if}
|
||||
<slot name="text">
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
{...$$restProps}
|
||||
>
|
||||
<slot name="icon">
|
||||
<svelte:component this="{icon}" />
|
||||
<svelte:component this="{icon}" size="{20}" />
|
||||
</slot>
|
||||
</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
import { setContext } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
import ChevronDown16 from "../icons/ChevronDown16.svelte";
|
||||
import ChevronDown from "../icons/ChevronDown.svelte";
|
||||
|
||||
const selectedItems = writable({});
|
||||
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
on:blur
|
||||
>
|
||||
{text}
|
||||
<ChevronDown16 class="bx--header__menu-arrow" />
|
||||
<ChevronDown class="bx--header__menu-arrow" />
|
||||
</a>
|
||||
<ul
|
||||
bind:this="{menuRef}"
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@
|
|||
export let selectedResultIndex = 0;
|
||||
|
||||
import { createEventDispatcher, tick } from "svelte";
|
||||
import Close20 from "../icons/Close20.svelte";
|
||||
import Search20 from "../icons/Search20.svelte";
|
||||
import Close from "../icons/Close.svelte";
|
||||
import IconSearch from "../icons/IconSearch.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
active = true;
|
||||
}}"
|
||||
>
|
||||
<Search20 title="Search" />
|
||||
<IconSearch size="{20}" title="Search" />
|
||||
</button>
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
dispatch('clear');
|
||||
}}"
|
||||
>
|
||||
<Close20 title="Close" />
|
||||
<Close size="{20}" title="Close" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
/** Obtain a reference to the HTML button element */
|
||||
export let ref = null;
|
||||
|
||||
import ChevronDown16 from "../icons/ChevronDown16.svelte";
|
||||
import ChevronDown from "../icons/ChevronDown.svelte";
|
||||
</script>
|
||||
|
||||
<li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
class:bx--side-nav__icon--small="{true}"
|
||||
class:bx--side-nav__submenu-chevron="{true}"
|
||||
>
|
||||
<svelte:component this="{ChevronDown16}" title="Open Menu" tabindex="0" />
|
||||
<svelte:component this="{ChevronDown}" title="Open Menu" tabindex="0" />
|
||||
</div>
|
||||
</button>
|
||||
<ul role="menu" class:bx--side-nav__menu="{true}">
|
||||
|
|
|
|||
28
src/icons/Add.svelte
Normal file
28
src/icons/Add.svelte
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path
|
||||
d="M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z"
|
||||
></path>
|
||||
</svg>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="Add16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z"
|
||||
></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="AppSwitcher20"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="20"
|
||||
height="20"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z"
|
||||
></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
28
src/icons/ArrowUp.svelte
Normal file
28
src/icons/ArrowUp.svelte
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path
|
||||
d="M16 4L6 14 7.41 15.41 15 7.83 15 28 17 28 17 7.83 24.59 15.41 26 14 16 4z"
|
||||
></path>
|
||||
</svg>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="ArrowUp20"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="20"
|
||||
height="20"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M16 4L6 14 7.41 15.41 15 7.83 15 28 17 28 17 7.83 24.59 15.41 26 14 16 4z"
|
||||
></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
28
src/icons/ArrowsVertical.svelte
Normal file
28
src/icons/ArrowsVertical.svelte
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path
|
||||
d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"
|
||||
></path>
|
||||
</svg>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="ArrowsVertical20"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="20"
|
||||
height="20"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"
|
||||
></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
28
src/icons/Calendar.svelte
Normal file
28
src/icons/Calendar.svelte
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path
|
||||
d="M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20 V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z"
|
||||
></path>
|
||||
</svg>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="Calendar16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20 V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z"
|
||||
></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
26
src/icons/CaretDown.svelte
Normal file
26
src/icons/CaretDown.svelte
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path d="M24 12L16 22 8 12z"></path>
|
||||
</svg>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="CaretDown16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path d="M24 12L16 22 8 12z"></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
26
src/icons/CaretLeft.svelte
Normal file
26
src/icons/CaretLeft.svelte
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path d="M20 24L10 16 20 8z"></path>
|
||||
</svg>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="CaretLeft16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path d="M20 24L10 16 20 8z"></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
26
src/icons/CaretRight.svelte
Normal file
26
src/icons/CaretRight.svelte
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path d="M12 8L22 16 12 24z"></path>
|
||||
</svg>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="CaretRight16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path d="M12 8L22 16 12 24z"></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
26
src/icons/Checkmark.svelte
Normal file
26
src/icons/Checkmark.svelte
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path d="M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z"></path>
|
||||
</svg>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="Checkmark16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path d="M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z"></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
31
src/icons/CheckmarkFilled.svelte
Normal file
31
src/icons/CheckmarkFilled.svelte
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path
|
||||
d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"
|
||||
></path><path
|
||||
fill="none"
|
||||
d="M14 21.591L9 16.591 10.591 15 14 18.409 21.41 11 23.005 12.585 14 21.591z"
|
||||
data-icon-path="inner-path"></path>
|
||||
</svg>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="CheckmarkFilled16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7s7-3.1,7-7C15,4.1,11.9,1,8,1z M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z"
|
||||
></path><path
|
||||
d="M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z"
|
||||
data-icon-path="inner-path"
|
||||
opacity="0"></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="CheckmarkFilled20"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
width="20"
|
||||
height="20"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M10,1c-4.9,0-9,4.1-9,9s4.1,9,9,9s9-4,9-9S15,1,10,1z M8.7,13.5l-3.2-3.2l1-1l2.2,2.2l4.8-4.8l1,1L8.7,13.5z"
|
||||
></path><path
|
||||
fill="none"
|
||||
d="M8.7,13.5l-3.2-3.2l1-1l2.2,2.2l4.8-4.8l1,1L8.7,13.5z"
|
||||
data-icon-path="inner-path"
|
||||
opacity="0"></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
30
src/icons/CheckmarkOutline.svelte
Normal file
30
src/icons/CheckmarkOutline.svelte
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path
|
||||
d="M14 21.414L9 16.413 10.413 15 14 18.586 21.585 11 23 12.415 14 21.414z"
|
||||
></path><path
|
||||
d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"
|
||||
></path>
|
||||
</svg>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="CheckmarkOutline16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M14 21.414L9 16.413 10.413 15 14 18.586 21.585 11 23 12.415 14 21.414z"
|
||||
></path><path
|
||||
d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"
|
||||
></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
26
src/icons/ChevronDown.svelte
Normal file
26
src/icons/ChevronDown.svelte
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"></path>
|
||||
</svg>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="ChevronDown16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="ChevronDownGlyph"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 10 6"
|
||||
fill="currentColor"
|
||||
width="10"
|
||||
height="6"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z"></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
26
src/icons/ChevronRight.svelte
Normal file
26
src/icons/ChevronRight.svelte
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path d="M22 16L12 26 10.6 24.6 19.2 16 10.6 7.4 12 6z"></path>
|
||||
</svg>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="ChevronRight16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
|
|
@ -1,51 +1,28 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
export let size = 16;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="CircleDash16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path
|
||||
d="M7.7 4.7a14.7 14.7 0 00-3 3.1L6.3 9A13.26 13.26 0 018.9 6.3zM4.6 12.3l-1.9-.6A12.51 12.51 0 002 16H4A11.48 11.48 0 014.6 12.3zM2.7 20.4a14.4 14.4 0 002 3.9l1.6-1.2a12.89 12.89 0 01-1.7-3.3zM7.8 27.3a14.4 14.4 0 003.9 2l.6-1.9A12.89 12.89 0 019 25.7zM11.7 2.7l.6 1.9A11.48 11.48 0 0116 4V2A12.51 12.51 0 0011.7 2.7zM24.2 27.3a15.18 15.18 0 003.1-3.1L25.7 23A11.53 11.53 0 0123 25.7zM27.4 19.7l1.9.6A15.47 15.47 0 0030 16H28A11.48 11.48 0 0127.4 19.7zM29.2 11.6a14.4 14.4 0 00-2-3.9L25.6 8.9a12.89 12.89 0 011.7 3.3zM24.1 4.6a14.4 14.4 0 00-3.9-2l-.6 1.9a12.89 12.89 0 013.3 1.7zM20.3 29.3l-.6-1.9A11.48 11.48 0 0116 28v2A21.42 21.42 0 0020.3 29.3z"
|
||||
></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
28
src/icons/Close.svelte
Normal file
28
src/icons/Close.svelte
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path
|
||||
d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
|
||||
></path>
|
||||
</svg>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="Close16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
|
||||
></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="Close20"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="20"
|
||||
height="20"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
|
||||
></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
28
src/icons/Copy.svelte
Normal file
28
src/icons/Copy.svelte
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path
|
||||
d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"
|
||||
></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path>
|
||||
</svg>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="Copy16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"
|
||||
></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
28
src/icons/EditOff.svelte
Normal file
28
src/icons/EditOff.svelte
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path
|
||||
d="M30 28.6L3.4 2 2 3.4l10.1 10.1L4 21.6V28h6.4l8.1-8.1L28.6 30 30 28.6zM9.6 26H6v-3.6l7.5-7.5 3.6 3.6L9.6 26zM29.4 6.2L29.4 6.2l-3.6-3.6c-.8-.8-2-.8-2.8 0l0 0 0 0-8 8 1.4 1.4L20 8.4l3.6 3.6L20 15.6l1.4 1.4 8-8C30.2 8.2 30.2 7 29.4 6.2L29.4 6.2zM25 10.6L21.4 7l3-3L28 7.6 25 10.6z"
|
||||
></path>
|
||||
</svg>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="EditOff16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M30 28.6L3.4 2 2 3.4l10.1 10.1L4 21.6V28h6.4l8.1-8.1L28.6 30 30 28.6zM9.6 26H6v-3.6l7.5-7.5 3.6 3.6L9.6 26zM29.4 6.2L29.4 6.2l-3.6-3.6c-.8-.8-2-.8-2.8 0l0 0 0 0-8 8 1.4 1.4L20 8.4l3.6 3.6L20 15.6l1.4 1.4 8-8C30.2 8.2 30.2 7 29.4 6.2L29.4 6.2zM25 10.6L21.4 7l3-3L28 7.6 25 10.6z"
|
||||
></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
32
src/icons/ErrorFilled.svelte
Normal file
32
src/icons/ErrorFilled.svelte
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path
|
||||
fill="none"
|
||||
d="M14.9 7.2H17.1V24.799H14.9z"
|
||||
data-icon-path="inner-path"
|
||||
transform="rotate(-45 16 16)"></path><path
|
||||
d="M16,2A13.914,13.914,0,0,0,2,16,13.914,13.914,0,0,0,16,30,13.914,13.914,0,0,0,30,16,13.914,13.914,0,0,0,16,2Zm5.4449,21L9,10.5557,10.5557,9,23,21.4448Z"
|
||||
></path>
|
||||
</svg>
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="ErrorFilled16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z M10.7,11.5L4.5,5.3l0.8-0.8l6.2,6.2L10.7,11.5z"
|
||||
></path><path
|
||||
fill="none"
|
||||
d="M10.7,11.5L4.5,5.3l0.8-0.8l6.2,6.2L10.7,11.5z"
|
||||
data-icon-path="inner-path"
|
||||
opacity="0"></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="ErrorFilled20"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
width="20"
|
||||
height="20"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
|
||||
></path><path
|
||||
d="M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
|
||||
data-icon-path="inner-path"
|
||||
opacity="0"></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
28
src/icons/IconSearch.svelte
Normal file
28
src/icons/IconSearch.svelte
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path
|
||||
d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
|
||||
></path>
|
||||
</svg>
|
||||
28
src/icons/Incomplete.svelte
Normal file
28
src/icons/Incomplete.svelte
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path
|
||||
d="M23.7642 6.8593l1.2851-1.5315A13.976 13.976 0 0020.8672 2.887l-.6836 1.8776A11.9729 11.9729 0 0123.7642 6.8593zM27.81 14l1.9677-.4128A13.8888 13.8888 0 0028.14 9.0457L26.4087 10A12.52 12.52 0 0127.81 14zM20.1836 27.2354l.6836 1.8776a13.976 13.976 0 004.1821-2.4408l-1.2851-1.5315A11.9729 11.9729 0 0120.1836 27.2354zM26.4087 22L28.14 23a14.14 14.14 0 001.6382-4.5872L27.81 18.0659A12.1519 12.1519 0 0126.4087 22zM16 30V2a14 14 0 000 28z"
|
||||
></path>
|
||||
</svg>
|
||||
30
src/icons/Information.svelte
Normal file
30
src/icons/Information.svelte
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path
|
||||
d="M17 22L17 14 13 14 13 16 15 16 15 22 12 22 12 24 20 24 20 22 17 22zM16 8a1.5 1.5 0 101.5 1.5A1.5 1.5 0 0016 8z"
|
||||
></path><path
|
||||
d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"
|
||||
></path>
|
||||
</svg>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="Information16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M8.5 11L8.5 6.5 6.5 6.5 6.5 7.5 7.5 7.5 7.5 11 6 11 6 12 10 12 10 11zM8 3.5c-.4 0-.8.3-.8.8S7.6 5 8 5c.4 0 .8-.3.8-.8S8.4 3.5 8 3.5z"
|
||||
></path><path
|
||||
d="M8,15c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S11.9,15,8,15z M8,2C4.7,2,2,4.7,2,8s2.7,6,6,6s6-2.7,6-6S11.3,2,8,2z"
|
||||
></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
31
src/icons/InformationFilled.svelte
Normal file
31
src/icons/InformationFilled.svelte
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path
|
||||
fill="none"
|
||||
d="M16,8a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,13.875H17.125v-8H13v2.25h1.875v5.75H12v2.25h8Z"
|
||||
data-icon-path="inner-path"></path><path
|
||||
d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,6a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,16.125H12v-2.25h2.875v-5.75H13v-2.25h4.125v8H20Z"
|
||||
></path>
|
||||
</svg>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="InformationFilled20"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="20"
|
||||
height="20"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
d="M16,8a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,13.875H17.125v-8H13v2.25h1.875v5.75H12v2.25h8Z"
|
||||
data-icon-path="inner-path"></path><path
|
||||
d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,6a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,16.125H12v-2.25h2.875v-5.75H13v-2.25h4.125v8H20Z"
|
||||
></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
31
src/icons/InformationSquareFilled.svelte
Normal file
31
src/icons/InformationSquareFilled.svelte
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path
|
||||
fill="none"
|
||||
d="M16,8a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,13.875H17.125v-8H13v2.25h1.875v5.75H12v2.25h8Z"
|
||||
data-icon-path="inner-path"></path><path
|
||||
d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM16,8a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,16.125H12v-2.25h2.875v-5.75H13v-2.25h4.125v8H20Z"
|
||||
></path>
|
||||
</svg>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="InformationSquareFilled20"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="20"
|
||||
height="20"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
d="M16,8a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,13.875H17.125v-8H13v2.25h1.875v5.75H12v2.25h8Z"
|
||||
data-icon-path="inner-path"></path><path
|
||||
d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM16,8a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,16.125H12v-2.25h2.875v-5.75H13v-2.25h4.125v8H20Z"
|
||||
></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
30
src/icons/Launch.svelte
Normal file
30
src/icons/Launch.svelte
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path
|
||||
d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
|
||||
></path><path
|
||||
d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
|
||||
></path>
|
||||
</svg>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="Launch16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M13,14H3c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h5v1H3v10h10V8h1v5C14,13.6,13.6,14,13,14z"
|
||||
></path><path d="M10 1L10 2 13.3 2 9 6.3 9.7 7 14 2.7 14 6 15 6 15 1z"></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
26
src/icons/Menu.svelte
Normal file
26
src/icons/Menu.svelte
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<path d="M4 6H28V8H4zM4 24H28V26H4zM4 12H28V14H4zM4 18H28V20H4z"></path>
|
||||
</svg>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="Menu20"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
width="20"
|
||||
height="20"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
|
||||
></path>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
27
src/icons/OverflowMenuHorizontal.svelte
Normal file
27
src/icons/OverflowMenuHorizontal.svelte
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<circle cx="8" cy="16" r="2"></circle><circle cx="16" cy="16" r="2"
|
||||
></circle><circle cx="24" cy="16" r="2"></circle>
|
||||
</svg>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let id = undefined;
|
||||
export let tabindex = undefined;
|
||||
export let focusable = false;
|
||||
export let title = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
$: ariaLabel = $$props["aria-label"];
|
||||
$: ariaLabelledBy = $$props["aria-labelledby"];
|
||||
$: labelled = ariaLabel || ariaLabelledBy || title;
|
||||
$: attributes = {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: tabindex === "0" ? true : focusable,
|
||||
tabindex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<svg
|
||||
data-carbon-icon="OverflowMenuHorizontal16"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keyup
|
||||
on:keydown
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
class="{className}"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style="{style}"
|
||||
id="{id}"
|
||||
{...attributes}
|
||||
>
|
||||
<circle cx="8" cy="16" r="2"></circle><circle cx="16" cy="16" r="2"
|
||||
></circle><circle cx="24" cy="16" r="2"></circle>
|
||||
<slot>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
</slot>
|
||||
</svg>
|
||||
27
src/icons/OverflowMenuVertical.svelte
Normal file
27
src/icons/OverflowMenuVertical.svelte
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<script>
|
||||
export let size = 16;
|
||||
|
||||
export let title = undefined;
|
||||
|
||||
$: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
|
||||
$: attributes = {
|
||||
"aria-hidden": labelled ? undefined : true,
|
||||
role: labelled ? "img" : undefined,
|
||||
focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="{size}"
|
||||
height="{size}"
|
||||
{...attributes}
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if title}<title>{title}</title>{/if}
|
||||
<circle cx="16" cy="8" r="2"></circle><circle cx="16" cy="16" r="2"
|
||||
></circle><circle cx="16" cy="24" r="2"></circle>
|
||||
</svg>
|
||||
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