@dosgato/dialog 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -204,7 +204,10 @@ $: updateSelected($value);
|
|
|
204
204
|
flex-wrap: wrap;
|
|
205
205
|
margin-bottom: 0.25em;
|
|
206
206
|
font-size: 0.9em;
|
|
207
|
-
align-items:
|
|
207
|
+
align-items: flex-start;
|
|
208
|
+
}
|
|
209
|
+
:global([data-eq~="400px"]) .dialog-chooser-container {
|
|
210
|
+
flex-direction: column;
|
|
208
211
|
}
|
|
209
212
|
div.dialog-chooser-container > :global(.dialog-chooser-thumbnail) {
|
|
210
213
|
width: 8em;
|
|
@@ -220,6 +223,9 @@ $: updateSelected($value);
|
|
|
220
223
|
max-width: calc(100% - 8.5em);
|
|
221
224
|
flex-grow: 1;
|
|
222
225
|
}
|
|
226
|
+
:global([data-eq~="400px"]) .dialog-chooser-right {
|
|
227
|
+
max-width: unset;
|
|
228
|
+
}
|
|
223
229
|
.dialog-chooser-right button {
|
|
224
230
|
margin-top: 0.5em;
|
|
225
231
|
border: 0;
|
|
@@ -256,5 +262,8 @@ $: updateSelected($value);
|
|
|
256
262
|
cursor: pointer;
|
|
257
263
|
line-height: 1;
|
|
258
264
|
}
|
|
265
|
+
:global([data-eq~="400px"] .dialog-chooser-container .dialog-chooser-thumbnail img) {
|
|
266
|
+
object-position: left;
|
|
267
|
+
}
|
|
259
268
|
|
|
260
269
|
</style>
|
|
@@ -38,6 +38,7 @@ function onChoose() {
|
|
|
38
38
|
}
|
|
39
39
|
function onDeselect() {
|
|
40
40
|
store.setPreview(undefined);
|
|
41
|
+
thumbnailExpanded = false;
|
|
41
42
|
}
|
|
42
43
|
function onUploadComplete() {
|
|
43
44
|
treeStore.openAndRefresh($selected).catch(console.error);
|
|
@@ -78,13 +79,14 @@ onMount(async () => {
|
|
|
78
79
|
await selectPreview(preloadPath);
|
|
79
80
|
});
|
|
80
81
|
const previewId = randomid();
|
|
82
|
+
let thumbnailExpanded = false;
|
|
81
83
|
</script>
|
|
82
84
|
|
|
83
85
|
<Dialog size="xl" ignoreTabs title={label} on:escape continueText="Choose" disabled={!$preview && required} cancelText="Cancel">
|
|
84
86
|
<section class="dialog-chooser-window">
|
|
85
87
|
<header class="dialog-chooser-controls">
|
|
86
88
|
{#if $sources.length > 1}
|
|
87
|
-
<Tabs bind:store={tabStore} tabs={$sources.map(s => ({ name: s.name, title: s.label ?? s.name }))} active={$preview?.source ?? $selected?.source ?? $source?.name ?? initialSource} />
|
|
89
|
+
<Tabs bind:store={tabStore} tabs={$sources.map(s => ({ name: s.name, title: s.label ?? s.name }))} active={$preview?.source ?? $selected?.source ?? $source?.name ?? initialSource} accordionOnMobile={false}/>
|
|
88
90
|
{/if}
|
|
89
91
|
</header>
|
|
90
92
|
<section class="dialog-chooser-chooser">
|
|
@@ -94,10 +96,20 @@ const previewId = randomid();
|
|
|
94
96
|
]} singleSelect store={treeStore} on:deselect={onDeselect} on:choose={onChoose} />
|
|
95
97
|
{/if}
|
|
96
98
|
</section>
|
|
97
|
-
<section id={previewId} class="dialog-chooser-preview" tabindex="-1">
|
|
99
|
+
<section id={previewId} class="dialog-chooser-preview" class:image={$preview?.type === 'asset' && $preview.image} tabindex="-1">
|
|
98
100
|
{#if $preview}
|
|
99
|
-
<Thumbnail item={$preview} larger />
|
|
100
|
-
<Details item={$preview} />
|
|
101
|
+
<Thumbnail item={$preview} larger expandable expanded={thumbnailExpanded} on:thumbnailsizechage={() => { thumbnailExpanded = !thumbnailExpanded }}/>
|
|
102
|
+
{#if !thumbnailExpanded}<Details item={$preview} />{/if}
|
|
103
|
+
{:else}
|
|
104
|
+
<section class="placeholder">
|
|
105
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 371 181">
|
|
106
|
+
<g id="Group_2845" data-name="Group 2845" transform="translate(-34 -94)">
|
|
107
|
+
<rect id="Rectangle_2035" data-name="Rectangle 2035" width="371" height="181" transform="translate(34 94)" fill="#d8d8d8"/>
|
|
108
|
+
<path id="Icon_awesome-image" data-name="Icon awesome-image" d="M145.453,124.875H15.047A15.047,15.047,0,0,1,0,109.828V19.547A15.047,15.047,0,0,1,15.047,4.5H145.453A15.047,15.047,0,0,1,160.5,19.547v90.281A15.047,15.047,0,0,1,145.453,124.875ZM35.109,22.055A17.555,17.555,0,1,0,52.664,39.609,17.555,17.555,0,0,0,35.109,22.055ZM20.063,104.813H140.438V69.7L113,42.269a3.762,3.762,0,0,0-5.32,0L65.2,84.75l-17.4-17.4a3.762,3.762,0,0,0-5.32,0L20.063,89.766Z" transform="translate(139 119.5)" fill="#c7c7c7"/>
|
|
109
|
+
</g>
|
|
110
|
+
</svg>
|
|
111
|
+
<p>Select an item to preview it here.</p>
|
|
112
|
+
</section>
|
|
101
113
|
{/if}
|
|
102
114
|
</section>
|
|
103
115
|
</section>
|
|
@@ -122,6 +134,8 @@ const previewId = randomid();
|
|
|
122
134
|
align-items: stretch;
|
|
123
135
|
justify-content: flex-end;
|
|
124
136
|
overflow: hidden;
|
|
137
|
+
container-type: inline-size;
|
|
138
|
+
container-name: dosgato-dialog-chooser-window
|
|
125
139
|
}
|
|
126
140
|
.dialog-chooser-window * {
|
|
127
141
|
box-sizing: border-box;
|
|
@@ -138,8 +152,12 @@ const previewId = randomid();
|
|
|
138
152
|
width: 25%;
|
|
139
153
|
max-width: 21em;
|
|
140
154
|
height: calc(100% - 4em);
|
|
141
|
-
padding: 1em;
|
|
155
|
+
padding: 0 1em 1em 1em;
|
|
142
156
|
overflow-y: auto;
|
|
157
|
+
overflow-x: hidden;
|
|
158
|
+
}
|
|
159
|
+
.dialog-chooser-preview :global(.dialog-chooser-thumbnail button) {
|
|
160
|
+
display: none;
|
|
143
161
|
}
|
|
144
162
|
.dialog-chooser-controls {
|
|
145
163
|
position: relative;
|
|
@@ -148,5 +166,70 @@ const previewId = randomid();
|
|
|
148
166
|
:global(footer.actions .upload) {
|
|
149
167
|
margin-right: auto;
|
|
150
168
|
}
|
|
169
|
+
.placeholder {
|
|
170
|
+
position: relative;
|
|
171
|
+
}
|
|
172
|
+
.placeholder p {
|
|
173
|
+
position: absolute;
|
|
174
|
+
left: 50%;
|
|
175
|
+
top: 50%;
|
|
176
|
+
transform: translate(-50%, -50%);
|
|
177
|
+
font-weight: 600;
|
|
178
|
+
width: 90%;
|
|
179
|
+
margin: 0;
|
|
180
|
+
display: flex;
|
|
181
|
+
justify-content: center;
|
|
182
|
+
text-align: center;
|
|
183
|
+
}
|
|
184
|
+
@container dosgato-dialog-chooser-window (max-width: 800px) {
|
|
185
|
+
.dialog-chooser-controls {
|
|
186
|
+
order: 2;
|
|
187
|
+
}
|
|
188
|
+
.dialog-chooser-chooser {
|
|
189
|
+
order: 3;
|
|
190
|
+
width: 100%;
|
|
191
|
+
height: 50%;
|
|
192
|
+
}
|
|
193
|
+
.dialog-chooser-preview {
|
|
194
|
+
order: 1;
|
|
195
|
+
width: 100%;
|
|
196
|
+
max-width: unset;
|
|
197
|
+
padding: 0;
|
|
198
|
+
height: unset;
|
|
199
|
+
display: flex;
|
|
200
|
+
overflow: hidden;
|
|
201
|
+
}
|
|
202
|
+
.dialog-chooser-preview.image {
|
|
203
|
+
height: 25vh;
|
|
204
|
+
}
|
|
205
|
+
.dialog-chooser-preview :global(.dialog-chooser-thumbnail) {
|
|
206
|
+
max-width: 50%;
|
|
207
|
+
}
|
|
208
|
+
.dialog-chooser-preview :global(.dialog-chooser-thumbnail.expanded) {
|
|
209
|
+
max-width: unset;
|
|
210
|
+
}
|
|
211
|
+
.dialog-chooser-preview :global(.dialog-chooser-thumbnail img) {
|
|
212
|
+
object-fit: cover;
|
|
213
|
+
object-position: center;
|
|
214
|
+
}
|
|
215
|
+
.dialog-chooser-preview :global(.dialog-chooser-thumbnail.expanded img) {
|
|
216
|
+
object-fit: scale-down;
|
|
217
|
+
width: unset;
|
|
218
|
+
}
|
|
219
|
+
.dialog-chooser-preview :global(.dialog-chooser-thumbnail button) {
|
|
220
|
+
display: block;
|
|
221
|
+
}
|
|
222
|
+
.dialog-chooser-preview :global(.dialog-chooser-info) {
|
|
223
|
+
width: 50%;
|
|
224
|
+
flex-direction: column;
|
|
225
|
+
flex-wrap: nowrap;
|
|
226
|
+
overflow-y: scroll;
|
|
227
|
+
}
|
|
228
|
+
.dialog-chooser-preview :global(.placeholder) {
|
|
229
|
+
width: 100%;
|
|
230
|
+
display: flex;
|
|
231
|
+
justify-content: center;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
151
234
|
|
|
152
235
|
</style>
|
|
@@ -2,14 +2,30 @@
|
|
|
2
2
|
import fileLinkOutline from '@iconify-icons/mdi/file-link-outline.js';
|
|
3
3
|
import FileIcon from '../FileIcon.svelte';
|
|
4
4
|
import Icon from '../Icon.svelte';
|
|
5
|
+
import { ScreenReaderOnly } from '@txstate-mws/svelte-components';
|
|
6
|
+
import { collapseIconSVG, expandIconSVG } from './icons';
|
|
7
|
+
import { createEventDispatcher } from 'svelte';
|
|
5
8
|
export let item;
|
|
6
9
|
export let larger = false;
|
|
10
|
+
export let expandable = false;
|
|
11
|
+
export let expanded = false;
|
|
12
|
+
const dispatch = createEventDispatcher();
|
|
13
|
+
function toggleThumbnailSize() {
|
|
14
|
+
dispatch('thumbnailsizechage');
|
|
15
|
+
}
|
|
7
16
|
</script>
|
|
8
|
-
|
|
9
|
-
<div class="dialog-chooser-thumbnail">
|
|
17
|
+
<div class="dialog-chooser-thumbnail" class:expanded>
|
|
10
18
|
{#if item.type === 'asset'}
|
|
11
19
|
{#if item.image}
|
|
12
|
-
<
|
|
20
|
+
<div style="position: relative; height: 100%;">
|
|
21
|
+
<img src={(larger ? (item.image.previewUrl ?? item.image.thumbnailUrl) : (item.image.thumbnailUrl ?? item.image.previewUrl)) ?? item.url} alt="" />
|
|
22
|
+
{#if expandable}
|
|
23
|
+
<button on:click={toggleThumbnailSize}>
|
|
24
|
+
{@html expanded ? collapseIconSVG : expandIconSVG}
|
|
25
|
+
<ScreenReaderOnly>{expanded ? 'View Image Details' : 'View Full Image'}</ScreenReaderOnly>
|
|
26
|
+
</button>
|
|
27
|
+
{/if}
|
|
28
|
+
</div>
|
|
13
29
|
{:else}
|
|
14
30
|
<FileIcon mime={item.mime} width='5em' />
|
|
15
31
|
{/if}
|
|
@@ -24,13 +40,14 @@ export let larger = false;
|
|
|
24
40
|
.dialog-chooser-thumbnail {
|
|
25
41
|
position: relative;
|
|
26
42
|
width: 100%;
|
|
27
|
-
padding-top: 75%;
|
|
28
43
|
margin-right: 0.5em;
|
|
44
|
+
margin-bottom: 0.5em;
|
|
29
45
|
}
|
|
30
46
|
.dialog-chooser-thumbnail img {
|
|
31
47
|
width: 100%;
|
|
32
48
|
height: 100%;
|
|
33
49
|
object-fit: scale-down;
|
|
50
|
+
object-position: top;
|
|
34
51
|
}
|
|
35
52
|
.dialog-chooser-thumbnail :global(svg) {
|
|
36
53
|
width: 80%;
|
|
@@ -39,10 +56,19 @@ export let larger = false;
|
|
|
39
56
|
}
|
|
40
57
|
.dialog-chooser-thumbnail > :global(*) {
|
|
41
58
|
display: block;
|
|
59
|
+
}
|
|
60
|
+
.dialog-chooser-thumbnail button {
|
|
42
61
|
position: absolute;
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
62
|
+
left: 0;
|
|
63
|
+
bottom: 0;
|
|
64
|
+
padding: 0;
|
|
65
|
+
background-color: transparent;
|
|
66
|
+
width: 2.5em;
|
|
67
|
+
border: 0;
|
|
68
|
+
}
|
|
69
|
+
.dialog-chooser-thumbnail button :global(svg) {
|
|
70
|
+
width: 100%;
|
|
71
|
+
height: 100%;
|
|
46
72
|
}
|
|
47
73
|
|
|
48
74
|
</style>
|
|
@@ -5,8 +5,12 @@ declare const __propDef: {
|
|
|
5
5
|
props: {
|
|
6
6
|
item: AnyItem | RawURL | BrokenURL;
|
|
7
7
|
larger?: boolean | undefined;
|
|
8
|
+
expandable?: boolean | undefined;
|
|
9
|
+
expanded?: boolean | undefined;
|
|
8
10
|
};
|
|
9
11
|
events: {
|
|
12
|
+
thumbnailsizechage: CustomEvent<any>;
|
|
13
|
+
} & {
|
|
10
14
|
[evt: string]: CustomEvent<any>;
|
|
11
15
|
};
|
|
12
16
|
slots: {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export declare const collapseIconSVG = "\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 37 33\">\n <g id=\"Group_2847\" data-name=\"Group 2847\" transform=\"translate(-145 -259)\">\n <g id=\"Group_2844\" data-name=\"Group 2844\" transform=\"translate(107 8)\">\n <path id=\"Rectangle_2144\" data-name=\"Rectangle 2144\" d=\"M4,0H33a4,4,0,0,1,4,4V29a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V4A4,4,0,0,1,4,0Z\" transform=\"translate(38 251)\" fill=\"#461314\"/>\n <g id=\"Component_2_4\" data-name=\"Component 2 \u2013 4\" transform=\"translate(43.803 254.77)\">\n <g id=\"Group_38\" data-name=\"Group 38\" transform=\"translate(0.5 0.5)\">\n <path id=\"Path_52\" data-name=\"Path 52\" d=\"M224.933,140.769\" transform=\"translate(-208.763 -132.536)\" fill=\"#fff\" stroke=\"#fff\" stroke-linecap=\"round\" stroke-miterlimit=\"10\" stroke-width=\"1\"/>\n <path id=\"Path_53\" data-name=\"Path 53\" d=\"M61.806,55.229a.47.47,0,0,0-.47.47v5.208l-7.4-7.407a.471.471,0,0,0-.665.666l7.384,7.389-5.141.071a.47.47,0,0,0,.013.94l6.289-.087a.469.469,0,0,0,.463-.47V55.7A.47.47,0,0,0,61.806,55.229Z\" transform=\"translate(-53.13 -53.362)\" fill=\"#fff\"/>\n <path id=\"Path_53_-_Outline\" data-name=\"Path 53 - Outline\" d=\"M53.6,52.862a.964.964,0,0,1,.687.285L60.836,59.7v-4a.97.97,0,1,1,1.94,0v6.31a.971.971,0,0,1-.958.97l-6.3.087a.97.97,0,0,1-.011-1.94l3.957-.055L52.914,54.52a.971.971,0,0,1,.686-1.657Z\" transform=\"translate(-53.13 -53.362)\" fill=\"#fff\"/>\n <path id=\"Path_54\" data-name=\"Path 54\" d=\"M223.42,53.943a.47.47,0,0,0-.665,0l-7.406,7.411-.072-5.183a.47.47,0,1,0-.94.013l.087,6.293a.469.469,0,0,0,.47.464H221.2a.47.47,0,0,0,0-.94h-5.166l7.387-7.392A.471.471,0,0,0,223.42,53.943Z\" transform=\"translate(-199.163 -53.764)\" fill=\"#fff\"/>\n <path id=\"Path_54_-_Outline\" data-name=\"Path 54 - Outline\" d=\"M223.087,53.305a.971.971,0,0,1,.686,1.657L217.239,61.5h3.96a.97.97,0,0,1,0,1.94h-6.306a.972.972,0,0,1-.97-.958l-.087-6.292a.97.97,0,0,1,.959-.984h.012a.973.973,0,0,1,.968.958l.055,4L222.4,53.59A.963.963,0,0,1,223.087,53.305Z\" transform=\"translate(-199.163 -53.764)\" fill=\"#fff\"/>\n <path id=\"Path_55\" data-name=\"Path 55\" d=\"M225.431,204.214\" transform=\"translate(-209.214 -190.005)\" fill=\"#fff\" stroke=\"#fff\" stroke-linecap=\"round\" stroke-miterlimit=\"10\" stroke-width=\"1\"/>\n <path id=\"Path_56\" data-name=\"Path 56\" d=\"M223.859,224.095l-7.346-7.352,5.143-.071a.47.47,0,0,0-.013-.941l-6.289.087a.469.469,0,0,0-.464.47V222.6a.47.47,0,1,0,.94,0v-5.206l7.362,7.367a.471.471,0,0,0,.665-.666Z\" transform=\"translate(-199.666 -200.438)\" fill=\"#fff\"/>\n <path id=\"Path_56_-_Outline\" data-name=\"Path 56 - Outline\" d=\"M223.526,225.4a.964.964,0,0,1-.687-.285l-6.509-6.513v4a.97.97,0,1,1-1.94,0v-6.311a.972.972,0,0,1,.958-.97l6.3-.087a.97.97,0,0,1,.012,1.941l-3.96.055,6.51,6.515a.971.971,0,0,1-.686,1.657Z\" transform=\"translate(-199.666 -200.438)\" fill=\"#fff\"/>\n <path id=\"Path_57\" data-name=\"Path 57\" d=\"M62.542,216.473a.469.469,0,0,0-.47-.464H55.766a.47.47,0,0,0,0,.94h5.2l-7.37,7.375a.471.471,0,1,0,.666.666l7.352-7.358.071,5.145a.47.47,0,1,0,.94-.013Z\" transform=\"translate(-53.43 -200.689)\" fill=\"#fff\"/>\n <path id=\"Path_57_-_Outline\" data-name=\"Path 57 - Outline\" d=\"M55.766,215.509h6.307a.972.972,0,0,1,.969.959l.087,6.292a.97.97,0,0,1-.959.984h-.012a.973.973,0,0,1-.968-.958l-.055-3.96-6.515,6.52a.971.971,0,1,1-1.373-1.373l6.517-6.522h-4a.97.97,0,0,1,0-1.94Z\" transform=\"translate(-53.43 -200.689)\" fill=\"#fff\"/>\n </g>\n </g>\n </g>\n </g>\n </svg>\n";
|
|
2
|
+
export declare const expandIconSVG = "\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 37 33\">\n <g id=\"Group_2846\" data-name=\"Group 2846\" transform=\"translate(-36 -251)\">\n <path id=\"Rectangle_2144\" data-name=\"Rectangle 2144\" d=\"M4,0H33a4,4,0,0,1,4,4V29a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V4A4,4,0,0,1,4,0Z\" transform=\"translate(36 251)\" fill=\"#461314\"/>\n <g id=\"Icon_ionic-ios-expand\" data-name=\"Icon ionic-ios-expand\" transform=\"translate(38.737 251.737)\">\n <path id=\"Path_1316\" data-name=\"Path 1316\" d=\"M7.339,6.142H11.9a.814.814,0,0,0,.815-.815V5.315A.814.814,0,0,0,11.9,4.5H5.315a.814.814,0,0,0-.815.815V11.9a.814.814,0,0,0,.815.815h.012a.814.814,0,0,0,.815-.815V7.339l6.869,6.822a.807.807,0,0,0,.575.235.789.789,0,0,0,.575-.241.814.814,0,0,0,0-1.15Z\" transform=\"translate(0 0)\" fill=\"#fff\"/>\n <path id=\"Path_1316_-_Outline\" data-name=\"Path 1316 - Outline\" d=\"M5.315,4.25H11.9a1.067,1.067,0,0,1,1.065,1.065v.012A1.067,1.067,0,0,1,11.9,6.392H7.94l6.4,6.437a1.064,1.064,0,0,1,0,1.5,1.035,1.035,0,0,1-.752.314,1.054,1.054,0,0,1-.752-.308L6.392,7.94V11.9a1.067,1.067,0,0,1-1.065,1.065H5.315A1.067,1.067,0,0,1,4.25,11.9V5.315A1.067,1.067,0,0,1,5.315,4.25ZM11.9,5.892a.566.566,0,0,0,.565-.565V5.315A.566.566,0,0,0,11.9,4.75H5.315a.566.566,0,0,0-.565.565V11.9a.566.566,0,0,0,.565.565h.012a.566.566,0,0,0,.565-.565V6.738l7.3,7.245a.558.558,0,0,0,.4.162.542.542,0,0,0,.395-.164.565.565,0,0,0,0-.8L6.738,5.892Z\" transform=\"translate(0 0)\" fill=\"#fff\"/>\n <path id=\"Path_1317\" data-name=\"Path 1317\" d=\"M28.718,4.5H22.137a.814.814,0,0,0-.815.815v.012a.814.814,0,0,0,.815.815h4.558l-6.822,6.869a.815.815,0,0,0,1.15,1.156l6.869-6.828V11.9a.814.814,0,0,0,.815.815h.012a.814.814,0,0,0,.815-.815V5.315A.814.814,0,0,0,28.718,4.5Z\" transform=\"translate(-2.508 0)\" fill=\"#fff\"/>\n <path id=\"Path_1317_-_Outline\" data-name=\"Path 1317 - Outline\" d=\"M22.137,4.25h6.582a1.067,1.067,0,0,1,1.065,1.065V11.9a1.067,1.067,0,0,1-1.065,1.065h-.012A1.067,1.067,0,0,1,27.641,11.9V7.94l-6.443,6.4a1.065,1.065,0,0,1-1.5-1.51l6.4-6.442H22.137a1.067,1.067,0,0,1-1.065-1.065V5.315A1.067,1.067,0,0,1,22.137,4.25Zm6.582,8.212a.566.566,0,0,0,.565-.565V5.315a.566.566,0,0,0-.565-.565H22.137a.566.566,0,0,0-.565.565v.012a.566.566,0,0,0,.565.565H27.3l-7.245,7.3a.565.565,0,0,0,.8.8l7.3-7.252V11.9a.566.566,0,0,0,.565.565Z\" transform=\"translate(-2.508 0)\" fill=\"#fff\"/>\n <path id=\"Path_1318\" data-name=\"Path 1318\" d=\"M13.586,19.631a.807.807,0,0,0-.575.235L6.142,26.694V22.136a.814.814,0,0,0-.815-.815H5.315a.814.814,0,0,0-.815.815v6.582a.814.814,0,0,0,.815.815H11.9a.814.814,0,0,0,.815-.815v-.012a.814.814,0,0,0-.815-.815H7.339l6.822-6.869a.815.815,0,0,0-.575-1.39Z\" transform=\"translate(0 -2.508)\" fill=\"#fff\"/>\n <path id=\"Path_1318_-_Outline\" data-name=\"Path 1318 - Outline\" d=\"M13.586,19.381a1.065,1.065,0,0,1,.752,1.817l-6.4,6.442H11.9a1.067,1.067,0,0,1,1.065,1.065v.012A1.067,1.067,0,0,1,11.9,29.783H5.315A1.067,1.067,0,0,1,4.25,28.718V22.136a1.067,1.067,0,0,1,1.065-1.065h.012a1.067,1.067,0,0,1,1.065,1.065v3.957l6.443-6.4A1.054,1.054,0,0,1,13.586,19.381Zm-1.689,9.9a.566.566,0,0,0,.565-.565v-.012a.566.566,0,0,0-.565-.565H6.738l7.245-7.3a.565.565,0,0,0-.8-.8l-7.3,7.252V22.136a.566.566,0,0,0-.565-.565H5.315a.566.566,0,0,0-.565.565v6.582a.566.566,0,0,0,.565.565Z\" transform=\"translate(0 -2.508)\" fill=\"#fff\"/>\n <path id=\"Path_1319\" data-name=\"Path 1319\" d=\"M28.718,21.322h-.012a.814.814,0,0,0-.815.815V26.7l-6.869-6.822a.807.807,0,0,0-.575-.235.789.789,0,0,0-.575.241.814.814,0,0,0,0,1.15l6.822,6.863H22.137a.814.814,0,0,0-.815.815v.012a.814.814,0,0,0,.815.815h6.582a.814.814,0,0,0,.815-.815V22.137A.814.814,0,0,0,28.718,21.322Z\" transform=\"translate(-2.508 -2.509)\" fill=\"#fff\"/>\n <path id=\"Path_1319_-_Outline\" data-name=\"Path 1319 - Outline\" d=\"M20.447,19.388a1.054,1.054,0,0,1,.752.308l6.442,6.4V22.137a1.067,1.067,0,0,1,1.065-1.065h.012a1.067,1.067,0,0,1,1.065,1.065v6.582a1.067,1.067,0,0,1-1.065,1.065H22.137a1.067,1.067,0,0,1-1.065-1.065v-.012a1.067,1.067,0,0,1,1.065-1.065h3.957L19.7,21.2a1.064,1.064,0,0,1,0-1.5A1.035,1.035,0,0,1,20.447,19.388ZM28.141,27.3l-7.3-7.245a.558.558,0,0,0-.4-.162.542.542,0,0,0-.395.164.565.565,0,0,0,0,.8l7.246,7.29H22.137a.566.566,0,0,0-.565.565v.012a.566.566,0,0,0,.565.565h6.582a.566.566,0,0,0,.565-.565V22.137a.566.566,0,0,0-.565-.565h-.012a.566.566,0,0,0-.565.565Z\" transform=\"translate(-2.508 -2.509)\" fill=\"#fff\"/>\n </g>\n </g>\n </svg>\n";
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
export const collapseIconSVG = `
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 33">
|
|
3
|
+
<g id="Group_2847" data-name="Group 2847" transform="translate(-145 -259)">
|
|
4
|
+
<g id="Group_2844" data-name="Group 2844" transform="translate(107 8)">
|
|
5
|
+
<path id="Rectangle_2144" data-name="Rectangle 2144" d="M4,0H33a4,4,0,0,1,4,4V29a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V4A4,4,0,0,1,4,0Z" transform="translate(38 251)" fill="#461314"/>
|
|
6
|
+
<g id="Component_2_4" data-name="Component 2 – 4" transform="translate(43.803 254.77)">
|
|
7
|
+
<g id="Group_38" data-name="Group 38" transform="translate(0.5 0.5)">
|
|
8
|
+
<path id="Path_52" data-name="Path 52" d="M224.933,140.769" transform="translate(-208.763 -132.536)" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1"/>
|
|
9
|
+
<path id="Path_53" data-name="Path 53" d="M61.806,55.229a.47.47,0,0,0-.47.47v5.208l-7.4-7.407a.471.471,0,0,0-.665.666l7.384,7.389-5.141.071a.47.47,0,0,0,.013.94l6.289-.087a.469.469,0,0,0,.463-.47V55.7A.47.47,0,0,0,61.806,55.229Z" transform="translate(-53.13 -53.362)" fill="#fff"/>
|
|
10
|
+
<path id="Path_53_-_Outline" data-name="Path 53 - Outline" d="M53.6,52.862a.964.964,0,0,1,.687.285L60.836,59.7v-4a.97.97,0,1,1,1.94,0v6.31a.971.971,0,0,1-.958.97l-6.3.087a.97.97,0,0,1-.011-1.94l3.957-.055L52.914,54.52a.971.971,0,0,1,.686-1.657Z" transform="translate(-53.13 -53.362)" fill="#fff"/>
|
|
11
|
+
<path id="Path_54" data-name="Path 54" d="M223.42,53.943a.47.47,0,0,0-.665,0l-7.406,7.411-.072-5.183a.47.47,0,1,0-.94.013l.087,6.293a.469.469,0,0,0,.47.464H221.2a.47.47,0,0,0,0-.94h-5.166l7.387-7.392A.471.471,0,0,0,223.42,53.943Z" transform="translate(-199.163 -53.764)" fill="#fff"/>
|
|
12
|
+
<path id="Path_54_-_Outline" data-name="Path 54 - Outline" d="M223.087,53.305a.971.971,0,0,1,.686,1.657L217.239,61.5h3.96a.97.97,0,0,1,0,1.94h-6.306a.972.972,0,0,1-.97-.958l-.087-6.292a.97.97,0,0,1,.959-.984h.012a.973.973,0,0,1,.968.958l.055,4L222.4,53.59A.963.963,0,0,1,223.087,53.305Z" transform="translate(-199.163 -53.764)" fill="#fff"/>
|
|
13
|
+
<path id="Path_55" data-name="Path 55" d="M225.431,204.214" transform="translate(-209.214 -190.005)" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1"/>
|
|
14
|
+
<path id="Path_56" data-name="Path 56" d="M223.859,224.095l-7.346-7.352,5.143-.071a.47.47,0,0,0-.013-.941l-6.289.087a.469.469,0,0,0-.464.47V222.6a.47.47,0,1,0,.94,0v-5.206l7.362,7.367a.471.471,0,0,0,.665-.666Z" transform="translate(-199.666 -200.438)" fill="#fff"/>
|
|
15
|
+
<path id="Path_56_-_Outline" data-name="Path 56 - Outline" d="M223.526,225.4a.964.964,0,0,1-.687-.285l-6.509-6.513v4a.97.97,0,1,1-1.94,0v-6.311a.972.972,0,0,1,.958-.97l6.3-.087a.97.97,0,0,1,.012,1.941l-3.96.055,6.51,6.515a.971.971,0,0,1-.686,1.657Z" transform="translate(-199.666 -200.438)" fill="#fff"/>
|
|
16
|
+
<path id="Path_57" data-name="Path 57" d="M62.542,216.473a.469.469,0,0,0-.47-.464H55.766a.47.47,0,0,0,0,.94h5.2l-7.37,7.375a.471.471,0,1,0,.666.666l7.352-7.358.071,5.145a.47.47,0,1,0,.94-.013Z" transform="translate(-53.43 -200.689)" fill="#fff"/>
|
|
17
|
+
<path id="Path_57_-_Outline" data-name="Path 57 - Outline" d="M55.766,215.509h6.307a.972.972,0,0,1,.969.959l.087,6.292a.97.97,0,0,1-.959.984h-.012a.973.973,0,0,1-.968-.958l-.055-3.96-6.515,6.52a.971.971,0,1,1-1.373-1.373l6.517-6.522h-4a.97.97,0,0,1,0-1.94Z" transform="translate(-53.43 -200.689)" fill="#fff"/>
|
|
18
|
+
</g>
|
|
19
|
+
</g>
|
|
20
|
+
</g>
|
|
21
|
+
</g>
|
|
22
|
+
</svg>
|
|
23
|
+
`;
|
|
24
|
+
export const expandIconSVG = `
|
|
25
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 33">
|
|
26
|
+
<g id="Group_2846" data-name="Group 2846" transform="translate(-36 -251)">
|
|
27
|
+
<path id="Rectangle_2144" data-name="Rectangle 2144" d="M4,0H33a4,4,0,0,1,4,4V29a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V4A4,4,0,0,1,4,0Z" transform="translate(36 251)" fill="#461314"/>
|
|
28
|
+
<g id="Icon_ionic-ios-expand" data-name="Icon ionic-ios-expand" transform="translate(38.737 251.737)">
|
|
29
|
+
<path id="Path_1316" data-name="Path 1316" d="M7.339,6.142H11.9a.814.814,0,0,0,.815-.815V5.315A.814.814,0,0,0,11.9,4.5H5.315a.814.814,0,0,0-.815.815V11.9a.814.814,0,0,0,.815.815h.012a.814.814,0,0,0,.815-.815V7.339l6.869,6.822a.807.807,0,0,0,.575.235.789.789,0,0,0,.575-.241.814.814,0,0,0,0-1.15Z" transform="translate(0 0)" fill="#fff"/>
|
|
30
|
+
<path id="Path_1316_-_Outline" data-name="Path 1316 - Outline" d="M5.315,4.25H11.9a1.067,1.067,0,0,1,1.065,1.065v.012A1.067,1.067,0,0,1,11.9,6.392H7.94l6.4,6.437a1.064,1.064,0,0,1,0,1.5,1.035,1.035,0,0,1-.752.314,1.054,1.054,0,0,1-.752-.308L6.392,7.94V11.9a1.067,1.067,0,0,1-1.065,1.065H5.315A1.067,1.067,0,0,1,4.25,11.9V5.315A1.067,1.067,0,0,1,5.315,4.25ZM11.9,5.892a.566.566,0,0,0,.565-.565V5.315A.566.566,0,0,0,11.9,4.75H5.315a.566.566,0,0,0-.565.565V11.9a.566.566,0,0,0,.565.565h.012a.566.566,0,0,0,.565-.565V6.738l7.3,7.245a.558.558,0,0,0,.4.162.542.542,0,0,0,.395-.164.565.565,0,0,0,0-.8L6.738,5.892Z" transform="translate(0 0)" fill="#fff"/>
|
|
31
|
+
<path id="Path_1317" data-name="Path 1317" d="M28.718,4.5H22.137a.814.814,0,0,0-.815.815v.012a.814.814,0,0,0,.815.815h4.558l-6.822,6.869a.815.815,0,0,0,1.15,1.156l6.869-6.828V11.9a.814.814,0,0,0,.815.815h.012a.814.814,0,0,0,.815-.815V5.315A.814.814,0,0,0,28.718,4.5Z" transform="translate(-2.508 0)" fill="#fff"/>
|
|
32
|
+
<path id="Path_1317_-_Outline" data-name="Path 1317 - Outline" d="M22.137,4.25h6.582a1.067,1.067,0,0,1,1.065,1.065V11.9a1.067,1.067,0,0,1-1.065,1.065h-.012A1.067,1.067,0,0,1,27.641,11.9V7.94l-6.443,6.4a1.065,1.065,0,0,1-1.5-1.51l6.4-6.442H22.137a1.067,1.067,0,0,1-1.065-1.065V5.315A1.067,1.067,0,0,1,22.137,4.25Zm6.582,8.212a.566.566,0,0,0,.565-.565V5.315a.566.566,0,0,0-.565-.565H22.137a.566.566,0,0,0-.565.565v.012a.566.566,0,0,0,.565.565H27.3l-7.245,7.3a.565.565,0,0,0,.8.8l7.3-7.252V11.9a.566.566,0,0,0,.565.565Z" transform="translate(-2.508 0)" fill="#fff"/>
|
|
33
|
+
<path id="Path_1318" data-name="Path 1318" d="M13.586,19.631a.807.807,0,0,0-.575.235L6.142,26.694V22.136a.814.814,0,0,0-.815-.815H5.315a.814.814,0,0,0-.815.815v6.582a.814.814,0,0,0,.815.815H11.9a.814.814,0,0,0,.815-.815v-.012a.814.814,0,0,0-.815-.815H7.339l6.822-6.869a.815.815,0,0,0-.575-1.39Z" transform="translate(0 -2.508)" fill="#fff"/>
|
|
34
|
+
<path id="Path_1318_-_Outline" data-name="Path 1318 - Outline" d="M13.586,19.381a1.065,1.065,0,0,1,.752,1.817l-6.4,6.442H11.9a1.067,1.067,0,0,1,1.065,1.065v.012A1.067,1.067,0,0,1,11.9,29.783H5.315A1.067,1.067,0,0,1,4.25,28.718V22.136a1.067,1.067,0,0,1,1.065-1.065h.012a1.067,1.067,0,0,1,1.065,1.065v3.957l6.443-6.4A1.054,1.054,0,0,1,13.586,19.381Zm-1.689,9.9a.566.566,0,0,0,.565-.565v-.012a.566.566,0,0,0-.565-.565H6.738l7.245-7.3a.565.565,0,0,0-.8-.8l-7.3,7.252V22.136a.566.566,0,0,0-.565-.565H5.315a.566.566,0,0,0-.565.565v6.582a.566.566,0,0,0,.565.565Z" transform="translate(0 -2.508)" fill="#fff"/>
|
|
35
|
+
<path id="Path_1319" data-name="Path 1319" d="M28.718,21.322h-.012a.814.814,0,0,0-.815.815V26.7l-6.869-6.822a.807.807,0,0,0-.575-.235.789.789,0,0,0-.575.241.814.814,0,0,0,0,1.15l6.822,6.863H22.137a.814.814,0,0,0-.815.815v.012a.814.814,0,0,0,.815.815h6.582a.814.814,0,0,0,.815-.815V22.137A.814.814,0,0,0,28.718,21.322Z" transform="translate(-2.508 -2.509)" fill="#fff"/>
|
|
36
|
+
<path id="Path_1319_-_Outline" data-name="Path 1319 - Outline" d="M20.447,19.388a1.054,1.054,0,0,1,.752.308l6.442,6.4V22.137a1.067,1.067,0,0,1,1.065-1.065h.012a1.067,1.067,0,0,1,1.065,1.065v6.582a1.067,1.067,0,0,1-1.065,1.065H22.137a1.067,1.067,0,0,1-1.065-1.065v-.012a1.067,1.067,0,0,1,1.065-1.065h3.957L19.7,21.2a1.064,1.064,0,0,1,0-1.5A1.035,1.035,0,0,1,20.447,19.388ZM28.141,27.3l-7.3-7.245a.558.558,0,0,0-.4-.162.542.542,0,0,0-.395.164.565.565,0,0,0,0,.8l7.246,7.29H22.137a.566.566,0,0,0-.565.565v.012a.566.566,0,0,0,.565.565h6.582a.566.566,0,0,0,.565-.565V22.137a.566.566,0,0,0-.565-.565h-.012a.566.566,0,0,0-.565.565Z" transform="translate(-2.508 -2.509)" fill="#fff"/>
|
|
37
|
+
</g>
|
|
38
|
+
</g>
|
|
39
|
+
</svg>
|
|
40
|
+
`;
|
package/package.json
CHANGED