superdesk-ui-framework 3.0.74 → 3.0.75
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.
- package/app/styles/_simple-list.scss +13 -1
- package/app/styles/components/_list-item.scss +4 -0
- package/app/styles/design-tokens/_design-tokens-general.scss +14 -1
- package/app/styles/form-elements/_inputs.scss +53 -11
- package/app-typescript/components/FormLabel.tsx +1 -1
- package/app-typescript/components/Lists/SimpleList.tsx +3 -0
- package/app-typescript/components/Select.tsx +13 -11
- package/dist/examples.bundle.js +160 -3
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +284 -1
- package/dist/superdesk-ui.bundle.css +68 -13
- package/dist/superdesk-ui.bundle.js +4 -2
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +284 -1
- package/package.json +1 -1
- package/react/components/FormLabel.js +1 -1
- package/react/components/Lists/SimpleList.d.ts +1 -0
- package/react/components/Lists/SimpleList.js +1 -0
- package/react/components/Select.js +2 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as Components from './components/Index';
|
|
3
|
-
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect} from '../../../../app-typescript/index';
|
|
3
|
+
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect, ContentDivider, Select, Option, AvatarGroup} from '../../../../app-typescript/index';
|
|
4
|
+
import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
|
|
4
5
|
import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
|
|
5
6
|
|
|
6
7
|
interface IProps {
|
|
@@ -23,7 +24,12 @@ interface IState {
|
|
|
23
24
|
date: any;
|
|
24
25
|
time: string;
|
|
25
26
|
modalPlanningTemplates: boolean;
|
|
27
|
+
modalSaveEvent: boolean;
|
|
28
|
+
modalSaveEvent2: boolean;
|
|
29
|
+
modalSaveEvent3: boolean;
|
|
26
30
|
treeSelectValue: any;
|
|
31
|
+
value: any;
|
|
32
|
+
valueS2: any;
|
|
27
33
|
}
|
|
28
34
|
|
|
29
35
|
let options2 = [
|
|
@@ -57,7 +63,12 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
57
63
|
date: new Date('2022-01-08'),
|
|
58
64
|
time: '16:50',
|
|
59
65
|
modalPlanningTemplates: false,
|
|
66
|
+
modalSaveEvent: false,
|
|
67
|
+
modalSaveEvent2: false,
|
|
68
|
+
modalSaveEvent3: false,
|
|
60
69
|
treeSelectValue: [],
|
|
70
|
+
value: undefined,
|
|
71
|
+
valueS2: undefined,
|
|
61
72
|
}
|
|
62
73
|
}
|
|
63
74
|
|
|
@@ -70,11 +81,283 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
70
81
|
}
|
|
71
82
|
|
|
72
83
|
render() {
|
|
84
|
+
const avatars: Array<IAvatarInGroup> = [
|
|
85
|
+
{
|
|
86
|
+
imageUrl: null,
|
|
87
|
+
initials: "VS",
|
|
88
|
+
displayName: 'Vladimir Stefanovic',
|
|
89
|
+
icon:{name: 'text', color: 'var(--sd-colour-highlight)'},
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
imageUrl: null,
|
|
93
|
+
initials: "JL",
|
|
94
|
+
displayName: 'Jeffrey Lebowski',
|
|
95
|
+
icon:{name: 'photo', color: 'var(--sd-colour-highlight)'}
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
imageUrl: null,
|
|
99
|
+
initials: "WS",
|
|
100
|
+
displayName: 'Walter Sobchak',
|
|
101
|
+
icon:{name: 'video', color: 'var(--sd-colour-highlight)'}
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
imageUrl: null,
|
|
105
|
+
initials: "ML",
|
|
106
|
+
displayName: 'Maude Lebowski',
|
|
107
|
+
icon:{name: 'file', color: 'var(--sd-colour-highlight)'}
|
|
108
|
+
},
|
|
109
|
+
];
|
|
110
|
+
const modalSaveEventFooterOne=(
|
|
111
|
+
<ButtonGroup align="end">
|
|
112
|
+
<Button text='Cancel' onClick={() => this.setState({modalSaveEvent:false})} />
|
|
113
|
+
<Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent:false})} />
|
|
114
|
+
</ButtonGroup>
|
|
115
|
+
);
|
|
116
|
+
const modalSaveEventFooterTwo=(
|
|
117
|
+
<ButtonGroup align="end">
|
|
118
|
+
<Button text='Cancel' onClick={() => this.setState({modalSaveEvent2:false})} />
|
|
119
|
+
<Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent2:false})} />
|
|
120
|
+
</ButtonGroup>
|
|
121
|
+
);
|
|
122
|
+
const modalSaveEventFooterThree=(
|
|
123
|
+
<ButtonGroup align="end">
|
|
124
|
+
<Button text='Cancel' onClick={() => this.setState({modalSaveEvent3:false})} />
|
|
125
|
+
<Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent3:false})} />
|
|
126
|
+
</ButtonGroup>
|
|
127
|
+
);
|
|
73
128
|
return (
|
|
74
129
|
<Components.Layout header='Testing Ground'>
|
|
75
130
|
<Components.LayoutContainer>
|
|
76
131
|
<Components.MainPanel>
|
|
132
|
+
<ButtonGroup>
|
|
133
|
+
<Button text="Save Event Modal (Event only)" onClick={() => this.setState({modalSaveEvent: true})} />
|
|
134
|
+
<Button text="Save Event Modal (Event & Planning)" onClick={() => this.setState({modalSaveEvent2: true})} />
|
|
135
|
+
<Button text="Save Event Modal (Planning only)" onClick={() => this.setState({modalSaveEvent3: true})} />
|
|
136
|
+
</ButtonGroup>
|
|
137
|
+
<hr />
|
|
138
|
+
{/* <button type="button" className="sd-dropdown-button" aria-haspopup="true" aria-expanded="false">
|
|
139
|
+
<span className="sd-dropdown-button__text-block">
|
|
140
|
+
<label className="sd-dropdown-button__text-label">Coverage:</label>
|
|
141
|
+
<span className="sd-dropdown-button__text-value">Events & Coverages</span>
|
|
142
|
+
</span>
|
|
143
|
+
<Icon name='chevron-down-thin' />
|
|
144
|
+
</button> */}
|
|
145
|
+
|
|
146
|
+
<hr />
|
|
77
147
|
<Button text="Planning Templates" onClick={() => this.setState({modalPlanningTemplates: true})} />
|
|
148
|
+
<span></span>
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
{/* Event Saving modals */}
|
|
152
|
+
{/* Event Only (This one existed Before) */}
|
|
153
|
+
<Modal
|
|
154
|
+
headerTemplate="Save Event"
|
|
155
|
+
zIndex={10000}
|
|
156
|
+
visible={this.state.modalSaveEvent}
|
|
157
|
+
contentPadding='medium'
|
|
158
|
+
contentBg='medium'
|
|
159
|
+
size='medium'
|
|
160
|
+
footerTemplate={modalSaveEventFooterOne}
|
|
161
|
+
onHide={() => {this.setState({modalSaveEvent: false})}}
|
|
162
|
+
>
|
|
163
|
+
<div>
|
|
164
|
+
<FormLabel text='Name'/>
|
|
165
|
+
<Text size='small' weight='medium'>Australian Open 2024</Text>
|
|
166
|
+
</div>
|
|
167
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
168
|
+
<div>
|
|
169
|
+
<FormLabel text='Current Date'/>
|
|
170
|
+
<Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
|
|
171
|
+
</div>
|
|
172
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
173
|
+
<div>
|
|
174
|
+
<FormLabel text='Current Repeat Summary'/>
|
|
175
|
+
<Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
|
|
176
|
+
</div>
|
|
177
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
178
|
+
<div>
|
|
179
|
+
<FormLabel text='No. of events'/>
|
|
180
|
+
<Text size='small' weight='medium'>1</Text>
|
|
181
|
+
</div>
|
|
182
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
183
|
+
<Text size='small' className='mb-1 mt-0-5'><strong>This is a recurring event</strong>. Update all recurring events or just this one?</Text>
|
|
184
|
+
<Select
|
|
185
|
+
value={this.state.value}
|
|
186
|
+
label='Update:'
|
|
187
|
+
required={false}
|
|
188
|
+
disabled={false}
|
|
189
|
+
inlineLabel={true}
|
|
190
|
+
labelHidden={true}
|
|
191
|
+
onChange={(value) => {
|
|
192
|
+
this.setState({
|
|
193
|
+
value: value,
|
|
194
|
+
})
|
|
195
|
+
}}
|
|
196
|
+
>
|
|
197
|
+
<Option>This event only</Option>
|
|
198
|
+
<Option>This and all future events</Option>
|
|
199
|
+
<Option>All events</Option>
|
|
200
|
+
</Select>
|
|
201
|
+
</Modal>
|
|
202
|
+
|
|
203
|
+
{/* Event and Planning */}
|
|
204
|
+
<Modal
|
|
205
|
+
headerTemplate="Save Event"
|
|
206
|
+
zIndex={10000}
|
|
207
|
+
visible={this.state.modalSaveEvent2}
|
|
208
|
+
contentPadding='medium'
|
|
209
|
+
contentBg='medium'
|
|
210
|
+
size='medium'
|
|
211
|
+
footerTemplate={modalSaveEventFooterTwo}
|
|
212
|
+
onHide={() => {this.setState({modalSaveEvent2: false})}}
|
|
213
|
+
>
|
|
214
|
+
<div>
|
|
215
|
+
<FormLabel text='Name'/>
|
|
216
|
+
<Text size='small' weight='medium'>Australian Open 2024</Text>
|
|
217
|
+
</div>
|
|
218
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
219
|
+
<div>
|
|
220
|
+
<FormLabel text='Current Date'/>
|
|
221
|
+
<Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
|
|
222
|
+
</div>
|
|
223
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
224
|
+
<div>
|
|
225
|
+
<FormLabel text='Current Repeat Summary'/>
|
|
226
|
+
<Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
|
|
227
|
+
</div>
|
|
228
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
229
|
+
<div>
|
|
230
|
+
<FormLabel text='No. of events'/>
|
|
231
|
+
<Text size='small' weight='medium'>1</Text>
|
|
232
|
+
</div>
|
|
233
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
234
|
+
<Text size='small' className='mb-1 mt-0-5'><strong>This is a recurring event</strong>. Update all recurring events or just this one?</Text>
|
|
235
|
+
<Select
|
|
236
|
+
value={this.state.valueS2}
|
|
237
|
+
label='Update:'
|
|
238
|
+
required={false}
|
|
239
|
+
disabled={false}
|
|
240
|
+
inlineLabel={true}
|
|
241
|
+
labelHidden={true}
|
|
242
|
+
onChange={(value) => {
|
|
243
|
+
this.setState({
|
|
244
|
+
value: value,
|
|
245
|
+
})
|
|
246
|
+
}}
|
|
247
|
+
>
|
|
248
|
+
<Option>This event only</Option>
|
|
249
|
+
<Option>This and all future events</Option>
|
|
250
|
+
<Option>All events</Option>
|
|
251
|
+
</Select>
|
|
252
|
+
<ContentDivider type="dashed" margin='small' />
|
|
253
|
+
<Heading type='h4' className='mb-1'>Related Planning(s)</Heading>
|
|
254
|
+
<div className='sd-list-item-group--space-between-items'>
|
|
255
|
+
<div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
|
|
256
|
+
<div className="sd-list-item__border sd-list-item__border--locked"></div>
|
|
257
|
+
<div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
|
|
258
|
+
<div className="sd-list-item__row">
|
|
259
|
+
<i role="presentation" className="icon-calendar icon--light-blue"></i>
|
|
260
|
+
<span className="sd-list-item__slugline">Planning Slug</span>
|
|
261
|
+
<span className="sd-overflow-ellipsis sd-list-item--element-grow">
|
|
262
|
+
<span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
|
|
263
|
+
</span>
|
|
264
|
+
</div>
|
|
265
|
+
<div className="sd-list-item__row sd-list-item__row--overflow-visible me-1">
|
|
266
|
+
<Label text='draft' style='translucent'/>
|
|
267
|
+
<span className="sd-margin-s--auto">
|
|
268
|
+
<AvatarGroup
|
|
269
|
+
size="x-small"
|
|
270
|
+
items={avatars}
|
|
271
|
+
/>
|
|
272
|
+
</span>
|
|
273
|
+
</div>
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
</div>
|
|
277
|
+
<Text size='small' className='mb-1'>
|
|
278
|
+
<strong>You made changes to a planning item that is a part of a recurring event</strong>.
|
|
279
|
+
Update all recurring planning or just this one?
|
|
280
|
+
</Text>
|
|
281
|
+
<Select
|
|
282
|
+
value={this.state.valueS2}
|
|
283
|
+
label='Update:'
|
|
284
|
+
required={false}
|
|
285
|
+
disabled={false}
|
|
286
|
+
inlineLabel={true}
|
|
287
|
+
labelHidden={true}
|
|
288
|
+
onChange={(valueS2) => {
|
|
289
|
+
this.setState({
|
|
290
|
+
value: valueS2,
|
|
291
|
+
})
|
|
292
|
+
}}
|
|
293
|
+
>
|
|
294
|
+
<Option>This planning only</Option>
|
|
295
|
+
<Option>This and all future plannings</Option>
|
|
296
|
+
<Option>All plannings</Option>
|
|
297
|
+
</Select>
|
|
298
|
+
|
|
299
|
+
</Modal>
|
|
300
|
+
|
|
301
|
+
{/* Planning only */}
|
|
302
|
+
<Modal
|
|
303
|
+
headerTemplate="Save Event"
|
|
304
|
+
zIndex={10000}
|
|
305
|
+
visible={this.state.modalSaveEvent3}
|
|
306
|
+
contentPadding='medium'
|
|
307
|
+
contentBg='medium'
|
|
308
|
+
size='medium'
|
|
309
|
+
footerTemplate={modalSaveEventFooterThree}
|
|
310
|
+
onHide={() => {this.setState({modalSaveEvent3: false})}}
|
|
311
|
+
>
|
|
312
|
+
<Heading type='h4' className='mb-1'>Related Planning(s)</Heading>
|
|
313
|
+
<div className='sd-list-item-group--space-between-items'>
|
|
314
|
+
<div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
|
|
315
|
+
<div className="sd-list-item__border sd-list-item__border--locked"></div>
|
|
316
|
+
<div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
|
|
317
|
+
<div className="sd-list-item__row">
|
|
318
|
+
<i role="presentation" className="icon-calendar icon--light-blue"></i>
|
|
319
|
+
<span className="sd-list-item__slugline">Planning Slug</span>
|
|
320
|
+
<span className="sd-overflow-ellipsis sd-list-item--element-grow">
|
|
321
|
+
<span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
|
|
322
|
+
</span>
|
|
323
|
+
</div>
|
|
324
|
+
<div className="sd-list-item__row sd-list-item__row--overflow-visible me-1">
|
|
325
|
+
<Label text='draft' style='translucent'/>
|
|
326
|
+
<span className="sd-margin-s--auto">
|
|
327
|
+
<AvatarGroup
|
|
328
|
+
size="x-small"
|
|
329
|
+
items={avatars}
|
|
330
|
+
/>
|
|
331
|
+
</span>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
</div>
|
|
335
|
+
</div>
|
|
336
|
+
<Text size='small' className='mb-1'>
|
|
337
|
+
<strong>You made changes to a planning item that is a part of a recurring event</strong>.
|
|
338
|
+
Update all recurring planning or just this one?
|
|
339
|
+
</Text>
|
|
340
|
+
<Select
|
|
341
|
+
value={this.state.valueS2}
|
|
342
|
+
label='Update:'
|
|
343
|
+
required={false}
|
|
344
|
+
disabled={false}
|
|
345
|
+
inlineLabel={true}
|
|
346
|
+
labelHidden={true}
|
|
347
|
+
onChange={(valueS2) => {
|
|
348
|
+
this.setState({
|
|
349
|
+
value: valueS2,
|
|
350
|
+
})
|
|
351
|
+
}}
|
|
352
|
+
>
|
|
353
|
+
<Option>This planning only</Option>
|
|
354
|
+
<Option>This and all future plannings</Option>
|
|
355
|
+
<Option>All plannings</Option>
|
|
356
|
+
</Select>
|
|
357
|
+
|
|
358
|
+
</Modal>
|
|
359
|
+
|
|
360
|
+
{/* Planning templates modal */}
|
|
78
361
|
<Modal headerTemplate="Planning templates"
|
|
79
362
|
zIndex={10000}
|
|
80
363
|
visible={this.state.modalPlanningTemplates}
|
|
@@ -11548,6 +11548,9 @@
|
|
|
11548
11548
|
--space--3: calc(3 * var(--base-increment));
|
|
11549
11549
|
--space--4: calc(4 * var(--base-increment));
|
|
11550
11550
|
--space--5: calc(5 * var(--base-increment));
|
|
11551
|
+
--space--6: calc(6 * var(--base-increment));
|
|
11552
|
+
--space--7: calc(7 * var(--base-increment));
|
|
11553
|
+
--space--8: calc(8 * var(--base-increment));
|
|
11551
11554
|
--gap--none: 0;
|
|
11552
11555
|
--gap--x-small: 0.4rem;
|
|
11553
11556
|
--gap--small: 0.8rem;
|
|
@@ -11578,6 +11581,10 @@
|
|
|
11578
11581
|
--width__modal--large: 80rem;
|
|
11579
11582
|
--width__modal--x-large: 80vw;
|
|
11580
11583
|
--text-size--base: 1rem;
|
|
11584
|
+
--text-size-x-small: calc(var(--text-size--base) * 1.2);
|
|
11585
|
+
--text-size-small: calc(var(--text-size--base) * 1.4);
|
|
11586
|
+
--text-size-medium: calc(var(--text-size--base) * 1.6);
|
|
11587
|
+
--text-size-large: calc(var(--text-size--base) * 2);
|
|
11581
11588
|
--sd-shadow--z1: 0 0 0 1px var(--sd-shadow-outline), 0 1px 3px hsla(0, 0%, 0%, 0.16), 0 0 1px hsla(0, 0%, 0%, 0.1);
|
|
11582
11589
|
--sd-shadow--z2: 0 0 0 1px var(--sd-shadow-outline), 0 1px 4px hsla(0, 0%, 0%, 0.16), 0 2px 6px hsla(0, 0%, 0%, 0.12), 0 0 1px hsla(0, 0%, 0%, 0.1);
|
|
11583
11590
|
--sd-shadow--z3: 0 0 0 1px var(--sd-shadow-outline), 0 1px 6px hsla(0, 0%, 0%, 0.16), 0 3px 8px hsla(0, 0%, 0%, 0.24), 0 0 1px hsla(0, 0%, 0%, 0.1);
|
|
@@ -11585,7 +11592,10 @@
|
|
|
11585
11592
|
--sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 0 1px rhsla(0, 0%, 0%, 0.12));
|
|
11586
11593
|
--sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 2px 6px rhsla(0, 0%, 0%, 0.14)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
|
|
11587
11594
|
--sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 3px 8px rhsla(0, 0%, 0%, 0.26)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
|
|
11588
|
-
--sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px rhsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
|
|
11595
|
+
--sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px rhsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
|
|
11596
|
+
--form-element-height-small: var(--space--3);
|
|
11597
|
+
--form-element-height-medium: var(--space--4);
|
|
11598
|
+
--form-element-height-large: var(--space--5); }
|
|
11589
11599
|
|
|
11590
11600
|
:root,
|
|
11591
11601
|
[data-theme="light-ui"] {
|
|
@@ -35246,11 +35256,19 @@ a.label {
|
|
|
35246
35256
|
display: flex;
|
|
35247
35257
|
flex-direction: row;
|
|
35248
35258
|
align-items: center;
|
|
35249
|
-
gap:
|
|
35259
|
+
gap: var(--space--1);
|
|
35250
35260
|
color: var(--color-text); }
|
|
35251
35261
|
.simple-list .simple-list__item [class^="icon-"], .simple-list .simple-list__item [class*=" icon-"] {
|
|
35252
35262
|
flex-grow: 0;
|
|
35253
35263
|
flex-shrink: 0; }
|
|
35264
|
+
.simple-list .simple-list__item.simple-list__item--gap-none {
|
|
35265
|
+
gap: 0; }
|
|
35266
|
+
.simple-list .simple-list__item.simple-list__item--gap-small {
|
|
35267
|
+
gap: var(--space-0-5); }
|
|
35268
|
+
.simple-list .simple-list__item.simple-list__item--gap-medium {
|
|
35269
|
+
gap: var(--space-1); }
|
|
35270
|
+
.simple-list .simple-list__item.simple-list__item--gap-large {
|
|
35271
|
+
gap: var(--space-1-5); }
|
|
35254
35272
|
.simple-list .simple-list__item--stacked {
|
|
35255
35273
|
display: flex;
|
|
35256
35274
|
flex-direction: column;
|
|
@@ -42122,6 +42140,8 @@ a.text-link {
|
|
|
42122
42140
|
margin: 0.2rem 0 0.8rem; }
|
|
42123
42141
|
.sd-list-item__row:only-child {
|
|
42124
42142
|
margin: 0.2rem 0; }
|
|
42143
|
+
.sd-list-item__row.sd-list-item__row--overflow-visible {
|
|
42144
|
+
overflow: visible !important; }
|
|
42125
42145
|
|
|
42126
42146
|
.sd-list-item__row--only-child {
|
|
42127
42147
|
margin: 0.2rem 0 !important; }
|
|
@@ -49649,7 +49669,7 @@ textarea.sd-media-carousel__media-title {
|
|
|
49649
49669
|
position: relative;
|
|
49650
49670
|
display: block;
|
|
49651
49671
|
position: relative;
|
|
49652
|
-
padding-inline-end:
|
|
49672
|
+
padding-inline-end: var(--space--3);
|
|
49653
49673
|
min-width: 5rem;
|
|
49654
49674
|
cursor: pointer; }
|
|
49655
49675
|
.sd-input__select::placeholder {
|
|
@@ -49722,25 +49742,60 @@ textarea.sd-media-carousel__media-title {
|
|
|
49722
49742
|
grid-column: 2/4; }
|
|
49723
49743
|
.sd-input.sd-input--is-select::after {
|
|
49724
49744
|
position: relative;
|
|
49725
|
-
|
|
49745
|
+
font-family: 'sd_icons';
|
|
49746
|
+
content: "\e64b";
|
|
49726
49747
|
grid-row: 2/3;
|
|
49727
49748
|
grid-column: 2/4;
|
|
49749
|
+
--icon-base-size: 14px !important;
|
|
49750
|
+
width: var(--icon-base-size);
|
|
49751
|
+
height: var(--icon-base-size);
|
|
49752
|
+
line-height: var(--icon-base-size);
|
|
49753
|
+
font-size: var(--icon-base-size);
|
|
49754
|
+
speak: none;
|
|
49755
|
+
font-style: normal;
|
|
49756
|
+
font-weight: normal;
|
|
49757
|
+
font-variant: normal;
|
|
49758
|
+
text-transform: none;
|
|
49759
|
+
color: var(--color-icon-default);
|
|
49760
|
+
-webkit-font-smoothing: antialiased;
|
|
49728
49761
|
align-self: center;
|
|
49729
49762
|
justify-self: flex-end;
|
|
49730
49763
|
display: inline-block;
|
|
49731
|
-
|
|
49732
|
-
height: 0;
|
|
49733
|
-
margin-inline-end: 1rem;
|
|
49734
|
-
vertical-align: middle;
|
|
49735
|
-
border-inline-start: 0.4rem solid transparent;
|
|
49736
|
-
border-inline-end: 0.4rem solid transparent;
|
|
49737
|
-
border-block-start: 0.4rem solid var(--color-text);
|
|
49764
|
+
margin-inline-end: var(--space--1);
|
|
49738
49765
|
pointer-events: none;
|
|
49739
49766
|
opacity: 0.4;
|
|
49740
|
-
|
|
49741
|
-
|
|
49767
|
+
z-index: 0;
|
|
49768
|
+
transition: opacity 0.2s ease; }
|
|
49742
49769
|
.sd-input.sd-input--is-select:hover::after {
|
|
49743
49770
|
opacity: 0.6; }
|
|
49771
|
+
.sd-input .sd-input__select-caret-wrapper {
|
|
49772
|
+
position: relative;
|
|
49773
|
+
display: block; }
|
|
49774
|
+
.sd-input .sd-input__select-caret-wrapper::after {
|
|
49775
|
+
--icon-base-size: 14px !important;
|
|
49776
|
+
font-family: 'sd_icons';
|
|
49777
|
+
content: "\e64b";
|
|
49778
|
+
position: absolute;
|
|
49779
|
+
inset-block-start: 10px;
|
|
49780
|
+
inset-inline-end: 0;
|
|
49781
|
+
width: var(--icon-base-size);
|
|
49782
|
+
height: var(--icon-base-size);
|
|
49783
|
+
line-height: var(--icon-base-size);
|
|
49784
|
+
font-size: var(--icon-base-size);
|
|
49785
|
+
speak: none;
|
|
49786
|
+
font-style: normal;
|
|
49787
|
+
font-weight: normal;
|
|
49788
|
+
font-variant: normal;
|
|
49789
|
+
text-transform: none;
|
|
49790
|
+
color: var(--color-text);
|
|
49791
|
+
-webkit-font-smoothing: antialiased;
|
|
49792
|
+
margin-inline-end: var(--space--1);
|
|
49793
|
+
pointer-events: none;
|
|
49794
|
+
opacity: 0.6;
|
|
49795
|
+
z-index: 0;
|
|
49796
|
+
transition: opacity 0.2s ease; }
|
|
49797
|
+
.sd-input .sd-input__select-caret-wrapper:hover::after {
|
|
49798
|
+
opacity: 1; }
|
|
49744
49799
|
.sd-input .sd-input__message-box {
|
|
49745
49800
|
grid-row: 3/4;
|
|
49746
49801
|
grid-column: 2/3; }
|
|
@@ -66312,7 +66312,8 @@ var Select = /** @class */ (function (_super) {
|
|
|
66312
66312
|
React.createElement("span", null, this.props.value)));
|
|
66313
66313
|
}
|
|
66314
66314
|
return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
|
|
66315
|
-
React.createElement("
|
|
66315
|
+
React.createElement("span", { className: 'sd-input__select-caret-wrapper' },
|
|
66316
|
+
React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly }, this.props.children))));
|
|
66316
66317
|
};
|
|
66317
66318
|
return Select;
|
|
66318
66319
|
}(React.Component));
|
|
@@ -77554,7 +77555,7 @@ var FormLabel = /** @class */ (function (_super) {
|
|
|
77554
77555
|
var classes = (0, classnames_1.default)('form-label form-label--block', {
|
|
77555
77556
|
'form-label--light': this.props.style === 'light',
|
|
77556
77557
|
});
|
|
77557
|
-
return (React.createElement("
|
|
77558
|
+
return (React.createElement("label", { className: classes }, this.props.text));
|
|
77558
77559
|
};
|
|
77559
77560
|
return FormLabel;
|
|
77560
77561
|
}(React.PureComponent));
|
|
@@ -104888,6 +104889,7 @@ var SimpleListItem = /** @class */ (function (_super) {
|
|
|
104888
104889
|
'simple-list__item--justify-flex-start': this.props.justify === undefined
|
|
104889
104890
|
},
|
|
104890
104891
|
_a["simple-list__item--justify-".concat(this.props.justify)] = this.props.justify || this.props.justify !== undefined,
|
|
104892
|
+
_a["simple-list__item--gap-".concat(this.props.gap)] = this.props.gap || this.props.gap !== undefined,
|
|
104891
104893
|
_a));
|
|
104892
104894
|
return (React.createElement("li", { className: classes, id: this.props.id || undefined }, this.props.children));
|
|
104893
104895
|
};
|