2021-04-16 22:24:06 +12:00
|
|
|
<script context="module">
|
2021-04-21 07:06:27 +12:00
|
|
|
export const directions = ["n", "ne", "e", "se", "s", "sw", "w", "nw"]
|
2021-04-16 22:24:06 +12:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<script>
|
2021-04-21 07:06:27 +12:00
|
|
|
export let direction = "n"
|
|
|
|
export let name = "Add"
|
|
|
|
export let hidden = false
|
|
|
|
export let s = false
|
|
|
|
export let m = false
|
|
|
|
export let l = false
|
|
|
|
export let xl = false
|
2021-04-22 21:58:04 +12:00
|
|
|
export let hoverable = false
|
|
|
|
export let disabled = false
|
2021-04-16 22:24:06 +12:00
|
|
|
|
2021-04-21 07:06:27 +12:00
|
|
|
$: rotation = directions.indexOf(direction) * 45
|
|
|
|
$: useDefault = ![s, m, l, xl].includes(true)
|
2021-04-16 22:24:06 +12:00
|
|
|
</script>
|
|
|
|
|
2021-04-21 07:06:27 +12:00
|
|
|
<svg
|
|
|
|
on:click
|
2021-04-22 21:58:04 +12:00
|
|
|
class:hoverable
|
|
|
|
class:disabled
|
2021-04-21 07:06:27 +12:00
|
|
|
class:spectrum-Icon--sizeS={s}
|
|
|
|
class:spectrum-Icon--sizeM={m || useDefault}
|
|
|
|
class:spectrum-Icon--sizeL={l}
|
|
|
|
class:spectrum-Icon--sizeXL={xl}
|
|
|
|
class="spectrum-Icon"
|
|
|
|
focusable="false"
|
|
|
|
aria-hidden={hidden}
|
|
|
|
aria-label={name}
|
2021-04-23 20:33:41 +12:00
|
|
|
style={`transform: rotate(${rotation}deg)`}
|
|
|
|
>
|
2021-04-21 07:06:27 +12:00
|
|
|
<use xlink:href="#spectrum-icon-18-{name}" />
|
|
|
|
</svg>
|
2021-04-22 21:58:04 +12:00
|
|
|
|
|
|
|
<style>
|
|
|
|
svg.hoverable {
|
|
|
|
pointer-events: all;
|
|
|
|
transition: color var(--spectrum-global-animation-duration-100, 130ms);
|
|
|
|
}
|
|
|
|
svg.hoverable:hover {
|
|
|
|
color: var(--spectrum-alias-icon-color-selected);
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
svg.disabled {
|
|
|
|
color: var(--spectrum-global-color-gray-500) !important;
|
|
|
|
pointer-events: none !important;
|
|
|
|
}
|
|
|
|
</style>
|