@scouterna/ui-webc 3.1.0 → 4.0.0
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/dist/cjs/{index-BPpKjjvS.js → index-Vd3hlPvW.js} +35 -4
- package/dist/cjs/{inputMixin-D0IzcaXz.js → inputMixin-BsRV69ob.js} +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/scout-app-bar.cjs.entry.js +2 -2
- package/dist/cjs/scout-avatar.cjs.entry.js +39 -0
- package/dist/cjs/scout-bottom-bar-item.cjs.entry.js +2 -2
- package/dist/cjs/scout-bottom-bar.cjs.entry.js +2 -2
- package/dist/cjs/scout-button.cjs.entry.js +1 -1
- package/dist/cjs/scout-card.cjs.entry.js +1 -1
- package/dist/cjs/scout-checkbox_2.cjs.entry.js +2 -2
- package/dist/cjs/scout-divider.cjs.entry.js +1 -1
- package/dist/cjs/scout-drawer.cjs.entry.js +841 -0
- package/dist/cjs/scout-field.cjs.entry.js +1 -1
- package/dist/cjs/scout-input.cjs.entry.js +2 -2
- package/dist/cjs/scout-link.cjs.entry.js +1 -1
- package/dist/cjs/scout-list-view-item.cjs.entry.js +14 -3
- package/dist/cjs/scout-list-view-subheader.cjs.entry.js +1 -1
- package/dist/cjs/scout-list-view.cjs.entry.js +7 -5
- package/dist/cjs/scout-loader.cjs.entry.js +1 -1
- package/dist/cjs/scout-segmented-control.cjs.entry.js +88 -0
- package/dist/cjs/scout-select.cjs.entry.js +3 -3
- package/dist/cjs/scout-stack.cjs.entry.js +3 -3
- package/dist/cjs/scout-switch.cjs.entry.js +3 -3
- package/dist/cjs/scout-tabs-tab.cjs.entry.js +2 -2
- package/dist/cjs/scout-tabs.cjs.entry.js +3 -3
- package/dist/cjs/ui-webc.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +3 -0
- package/dist/collection/components/app-bar/app-bar.css +5 -1
- package/dist/collection/components/avatar/assets/fallbackImage.png +0 -0
- package/dist/collection/components/avatar/avatar.css +7 -0
- package/dist/collection/components/avatar/avatar.js +88 -0
- package/dist/collection/components/bottom-bar/bottom-bar.css +7 -2
- package/dist/collection/components/bottom-bar-item/bottom-bar-item.css +16 -2
- package/dist/collection/components/drawer/drawer.css +157 -0
- package/dist/collection/components/drawer/drawer.js +323 -0
- package/dist/collection/components/list-view/list-view.css +7 -2
- package/dist/collection/components/list-view/list-view.js +6 -4
- package/dist/collection/components/list-view-item/list-view-item.css +16 -4
- package/dist/collection/components/list-view-item/list-view-item.js +37 -1
- package/dist/collection/components/segmented-control/segmented-control.css +68 -0
- package/dist/collection/components/segmented-control/segmented-control.js +185 -0
- package/dist/collection/components/select/select.js +1 -1
- package/dist/collection/components/stack/stack.js +2 -2
- package/dist/collection/components/switch/switch.js +1 -1
- package/dist/collection/components/tabs/tabs.js +2 -2
- package/dist/collection/components/tabs-tab/tabs-tab.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/p-BO7j9O37.js +1 -0
- package/dist/components/p-CpD1flSg.js +1 -0
- package/dist/components/p-DLiFilsh.js +1 -0
- package/dist/components/{p-Qv5q0SGa.js → p-lrqW957X.js} +1 -1
- package/dist/components/scout-app-bar.js +1 -1
- package/dist/components/scout-avatar.d.ts +11 -0
- package/dist/components/scout-avatar.js +1 -0
- package/dist/components/scout-bottom-bar-item.js +1 -1
- package/dist/components/scout-bottom-bar.js +1 -1
- package/dist/components/scout-button.js +1 -1
- package/dist/components/scout-card.js +1 -1
- package/dist/components/scout-checkbox.js +1 -1
- package/dist/components/scout-divider.js +1 -1
- package/dist/components/scout-drawer.d.ts +11 -0
- package/dist/components/scout-drawer.js +1 -0
- package/dist/components/scout-field.js +1 -1
- package/dist/components/scout-input.js +1 -1
- package/dist/components/scout-link.js +1 -1
- package/dist/components/scout-list-view-item.js +1 -1
- package/dist/components/scout-list-view-subheader.js +1 -1
- package/dist/components/scout-list-view.js +1 -1
- package/dist/components/scout-loader.js +1 -1
- package/dist/components/scout-radio-button.js +1 -1
- package/dist/components/scout-segmented-control.d.ts +11 -0
- package/dist/components/scout-segmented-control.js +1 -0
- package/dist/components/scout-select.js +1 -1
- package/dist/components/scout-stack.js +1 -1
- package/dist/components/scout-switch.js +1 -1
- package/dist/components/scout-tabs-tab.js +1 -1
- package/dist/components/scout-tabs.js +1 -1
- package/dist/custom-elements.json +516 -1
- package/dist/esm/{index-CBq_WkdR.js → index-BtN0bCWb.js} +35 -5
- package/dist/esm/{inputMixin-CArDsEiI.js → inputMixin-DC4hF1Lp.js} +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/scout-app-bar.entry.js +2 -2
- package/dist/esm/scout-avatar.entry.js +37 -0
- package/dist/esm/scout-bottom-bar-item.entry.js +2 -2
- package/dist/esm/scout-bottom-bar.entry.js +2 -2
- package/dist/esm/scout-button.entry.js +1 -1
- package/dist/esm/scout-card.entry.js +1 -1
- package/dist/esm/scout-checkbox_2.entry.js +2 -2
- package/dist/esm/scout-divider.entry.js +1 -1
- package/dist/esm/scout-drawer.entry.js +839 -0
- package/dist/esm/scout-field.entry.js +1 -1
- package/dist/esm/scout-input.entry.js +2 -2
- package/dist/esm/scout-link.entry.js +1 -1
- package/dist/esm/scout-list-view-item.entry.js +14 -3
- package/dist/esm/scout-list-view-subheader.entry.js +1 -1
- package/dist/esm/scout-list-view.entry.js +7 -5
- package/dist/esm/scout-loader.entry.js +1 -1
- package/dist/esm/scout-segmented-control.entry.js +86 -0
- package/dist/esm/scout-select.entry.js +3 -3
- package/dist/esm/scout-stack.entry.js +3 -3
- package/dist/esm/scout-switch.entry.js +3 -3
- package/dist/esm/scout-tabs-tab.entry.js +2 -2
- package/dist/esm/scout-tabs.entry.js +3 -3
- package/dist/esm/ui-webc.js +3 -3
- package/dist/types/components/avatar/avatar.d.ts +16 -0
- package/dist/types/components/drawer/drawer.d.ts +53 -0
- package/dist/types/components/list-view-item/list-view-item.d.ts +7 -0
- package/dist/types/components/segmented-control/segmented-control.d.ts +40 -0
- package/dist/types/components/tabs/tabs.d.ts +1 -1
- package/dist/types/components.d.ts +264 -2
- package/dist/ui-webc/assets/fallbackImage.png +0 -0
- package/dist/ui-webc/p-0b313ae9.entry.js +1 -0
- package/dist/ui-webc/p-1c5b40f5.entry.js +1 -0
- package/dist/ui-webc/p-214dc4e4.entry.js +1 -0
- package/dist/ui-webc/{p-a153023c.entry.js → p-2d773911.entry.js} +1 -1
- package/dist/ui-webc/{p-c0696c1f.entry.js → p-4d676928.entry.js} +1 -1
- package/dist/ui-webc/p-4d905b20.entry.js +1 -0
- package/dist/ui-webc/{p-f8a4ef3d.entry.js → p-5b0e6de5.entry.js} +1 -1
- package/dist/ui-webc/p-6bd3258b.entry.js +1 -0
- package/dist/ui-webc/p-6fea31a0.entry.js +1 -0
- package/dist/ui-webc/{p-6287efe7.entry.js → p-70c0acea.entry.js} +1 -1
- package/dist/ui-webc/p-74bd1d24.entry.js +1 -0
- package/dist/ui-webc/{p-0e444b1f.entry.js → p-8c81f27f.entry.js} +1 -1
- package/dist/ui-webc/{p-ff537388.entry.js → p-9c8d24b2.entry.js} +1 -1
- package/dist/ui-webc/p-9e3739c6.entry.js +1 -0
- package/dist/ui-webc/p-BtN0bCWb.js +2 -0
- package/dist/ui-webc/{p-6xDaXBJm.js → p-DMdnqqlQ.js} +1 -1
- package/dist/ui-webc/{p-b699617e.entry.js → p-a26bd0db.entry.js} +1 -1
- package/dist/ui-webc/{p-a2c09e05.entry.js → p-cec7a021.entry.js} +1 -1
- package/dist/ui-webc/p-d0fc1cd6.entry.js +1 -0
- package/dist/ui-webc/p-d76c67a5.entry.js +1 -0
- package/dist/ui-webc/{p-8f5965aa.entry.js → p-d88cbd78.entry.js} +1 -1
- package/dist/ui-webc/{p-f8099e5b.entry.js → p-db109100.entry.js} +1 -1
- package/dist/ui-webc/{p-6825e415.entry.js → p-ee796725.entry.js} +1 -1
- package/dist/ui-webc/{p-189879c2.entry.js → p-f1fb33e9.entry.js} +1 -1
- package/dist/ui-webc/ui-webc.css +2 -2
- package/dist/ui-webc/ui-webc.esm.js +1 -1
- package/package.json +2 -1
- package/dist/components/p-B72iGJNe.js +0 -1
- package/dist/components/p-CXXyN7aY.js +0 -1
- package/dist/components/p-DxVqa2PR.js +0 -1
- package/dist/ui-webc/p-60cd6c7e.entry.js +0 -1
- package/dist/ui-webc/p-78126f74.entry.js +0 -1
- package/dist/ui-webc/p-CBq_WkdR.js +0 -2
- package/dist/ui-webc/p-c4f7cfa2.entry.js +0 -1
- package/dist/ui-webc/p-cdc127de.entry.js +0 -1
- package/dist/ui-webc/p-db40c987.entry.js +0 -1
- package/dist/ui-webc/p-ef34d84c.entry.js +0 -1
- package/dist/ui-webc/p-f799b2d8.entry.js +0 -1
|
@@ -8,12 +8,14 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
|
|
|
8
8
|
import { ItemType } from "./components/bottom-bar-item/bottom-bar-item";
|
|
9
9
|
import { Size, Variant } from "./components/button/button";
|
|
10
10
|
import { InputMode, InputType, Size as Size1, Variant as Variant1 } from "./components/input/input";
|
|
11
|
-
import { ItemType as ItemType1 } from "./components/list-view-item/list-view-item";
|
|
11
|
+
import { ActionType, ItemType as ItemType1 } from "./components/list-view-item/list-view-item";
|
|
12
|
+
import { Size as Size2 } from "./components/segmented-control/segmented-control";
|
|
12
13
|
import { Direction, GapSize } from "./components/stack/stack";
|
|
13
14
|
export { ItemType } from "./components/bottom-bar-item/bottom-bar-item";
|
|
14
15
|
export { Size, Variant } from "./components/button/button";
|
|
15
16
|
export { InputMode, InputType, Size as Size1, Variant as Variant1 } from "./components/input/input";
|
|
16
|
-
export { ItemType as ItemType1 } from "./components/list-view-item/list-view-item";
|
|
17
|
+
export { ActionType, ItemType as ItemType1 } from "./components/list-view-item/list-view-item";
|
|
18
|
+
export { Size as Size2 } from "./components/segmented-control/segmented-control";
|
|
17
19
|
export { Direction, GapSize } from "./components/stack/stack";
|
|
18
20
|
export namespace Components {
|
|
19
21
|
/**
|
|
@@ -24,6 +26,22 @@ export namespace Components {
|
|
|
24
26
|
interface ScoutAppBar {
|
|
25
27
|
"titleText"?: string;
|
|
26
28
|
}
|
|
29
|
+
/**
|
|
30
|
+
* The avatar component is used to display the user's profile picture.
|
|
31
|
+
* Wrap it with a container, to determine its size, since it scales to fit container.
|
|
32
|
+
*/
|
|
33
|
+
interface ScoutAvatar {
|
|
34
|
+
/**
|
|
35
|
+
* The name of the user.
|
|
36
|
+
* @default ""
|
|
37
|
+
*/
|
|
38
|
+
"alt": string;
|
|
39
|
+
/**
|
|
40
|
+
* The source URL of the user image.
|
|
41
|
+
* @default ""
|
|
42
|
+
*/
|
|
43
|
+
"imageSrc": string;
|
|
44
|
+
}
|
|
27
45
|
/**
|
|
28
46
|
* The bottom bar component is used in the Jamboree26 app to provide
|
|
29
47
|
* navigation at the bottom of the screen.
|
|
@@ -129,6 +147,48 @@ export namespace Components {
|
|
|
129
147
|
}
|
|
130
148
|
interface ScoutDivider {
|
|
131
149
|
}
|
|
150
|
+
interface ScoutDrawer {
|
|
151
|
+
/**
|
|
152
|
+
* Back button label.
|
|
153
|
+
* @default ""
|
|
154
|
+
*/
|
|
155
|
+
"backButtonLabel": string;
|
|
156
|
+
/**
|
|
157
|
+
* Disable backdrop for the drawer.
|
|
158
|
+
* @default false
|
|
159
|
+
*/
|
|
160
|
+
"disableBackdrop": boolean;
|
|
161
|
+
/**
|
|
162
|
+
* Disable drawer content padding. Use only if you have specific use case and you need to use full width.
|
|
163
|
+
* @default false
|
|
164
|
+
*/
|
|
165
|
+
"disableContentPadding": boolean;
|
|
166
|
+
/**
|
|
167
|
+
* Exit button label.
|
|
168
|
+
* @default ""
|
|
169
|
+
*/
|
|
170
|
+
"exitButtonLabel": string;
|
|
171
|
+
/**
|
|
172
|
+
* Heading within the sheet.
|
|
173
|
+
* @default ""
|
|
174
|
+
*/
|
|
175
|
+
"heading": string;
|
|
176
|
+
/**
|
|
177
|
+
* Open/close state of the drawer.
|
|
178
|
+
* @default false
|
|
179
|
+
*/
|
|
180
|
+
"open": boolean;
|
|
181
|
+
/**
|
|
182
|
+
* Render back button.
|
|
183
|
+
* @default false
|
|
184
|
+
*/
|
|
185
|
+
"showBackButton": boolean;
|
|
186
|
+
/**
|
|
187
|
+
* Render exit button.
|
|
188
|
+
* @default false
|
|
189
|
+
*/
|
|
190
|
+
"showExitButton": boolean;
|
|
191
|
+
}
|
|
132
192
|
/**
|
|
133
193
|
* The field component is used to wrap form fields with a label, help text, and
|
|
134
194
|
* error messages. It automatically captures validation events from its child
|
|
@@ -222,6 +282,11 @@ export namespace Components {
|
|
|
222
282
|
interface ScoutListView {
|
|
223
283
|
}
|
|
224
284
|
interface ScoutListViewItem {
|
|
285
|
+
/**
|
|
286
|
+
* The action to display on the right side of the item. For example, a chevron. This is purely visual and does not affect the behavior of the item in any way. Not visible when the type is "radio" or "checkbox".
|
|
287
|
+
* @default null
|
|
288
|
+
*/
|
|
289
|
+
"action": ActionType;
|
|
225
290
|
"checked"?: boolean;
|
|
226
291
|
"disabled"?: boolean;
|
|
227
292
|
"href"?: string;
|
|
@@ -277,6 +342,26 @@ export namespace Components {
|
|
|
277
342
|
"validity"?: string;
|
|
278
343
|
"value": string;
|
|
279
344
|
}
|
|
345
|
+
/**
|
|
346
|
+
* The segmented control component presents a set of options where exactly one
|
|
347
|
+
* option is active at a time.
|
|
348
|
+
* The component displays an indicator under the selected option and emits a
|
|
349
|
+
* `scoutChange` event when the user picks a different option, so you can update
|
|
350
|
+
* `value`.
|
|
351
|
+
* Use button elements as the slotted segment options.
|
|
352
|
+
*/
|
|
353
|
+
interface ScoutSegmentedControl {
|
|
354
|
+
/**
|
|
355
|
+
* Visual size of the segmented control. Use `small` for dense layouts and `medium` for the default size.
|
|
356
|
+
* @default "medium"
|
|
357
|
+
*/
|
|
358
|
+
"size": Size2;
|
|
359
|
+
/**
|
|
360
|
+
* Zero-based index of the currently active segment.
|
|
361
|
+
* @default 0
|
|
362
|
+
*/
|
|
363
|
+
"value": number;
|
|
364
|
+
}
|
|
280
365
|
/**
|
|
281
366
|
* The select component is a dropdown menu that allows users to select one
|
|
282
367
|
* option from a list. When used in a form, make sure to wrap it in a Field
|
|
@@ -365,6 +450,10 @@ export interface ScoutCheckboxCustomEvent<T> extends CustomEvent<T> {
|
|
|
365
450
|
detail: T;
|
|
366
451
|
target: HTMLScoutCheckboxElement;
|
|
367
452
|
}
|
|
453
|
+
export interface ScoutDrawerCustomEvent<T> extends CustomEvent<T> {
|
|
454
|
+
detail: T;
|
|
455
|
+
target: HTMLScoutDrawerElement;
|
|
456
|
+
}
|
|
368
457
|
export interface ScoutInputCustomEvent<T> extends CustomEvent<T> {
|
|
369
458
|
detail: T;
|
|
370
459
|
target: HTMLScoutInputElement;
|
|
@@ -381,6 +470,10 @@ export interface ScoutRadioButtonCustomEvent<T> extends CustomEvent<T> {
|
|
|
381
470
|
detail: T;
|
|
382
471
|
target: HTMLScoutRadioButtonElement;
|
|
383
472
|
}
|
|
473
|
+
export interface ScoutSegmentedControlCustomEvent<T> extends CustomEvent<T> {
|
|
474
|
+
detail: T;
|
|
475
|
+
target: HTMLScoutSegmentedControlElement;
|
|
476
|
+
}
|
|
384
477
|
export interface ScoutSelectCustomEvent<T> extends CustomEvent<T> {
|
|
385
478
|
detail: T;
|
|
386
479
|
target: HTMLScoutSelectElement;
|
|
@@ -405,6 +498,16 @@ declare global {
|
|
|
405
498
|
prototype: HTMLScoutAppBarElement;
|
|
406
499
|
new (): HTMLScoutAppBarElement;
|
|
407
500
|
};
|
|
501
|
+
/**
|
|
502
|
+
* The avatar component is used to display the user's profile picture.
|
|
503
|
+
* Wrap it with a container, to determine its size, since it scales to fit container.
|
|
504
|
+
*/
|
|
505
|
+
interface HTMLScoutAvatarElement extends Components.ScoutAvatar, HTMLStencilElement {
|
|
506
|
+
}
|
|
507
|
+
var HTMLScoutAvatarElement: {
|
|
508
|
+
prototype: HTMLScoutAvatarElement;
|
|
509
|
+
new (): HTMLScoutAvatarElement;
|
|
510
|
+
};
|
|
408
511
|
/**
|
|
409
512
|
* The bottom bar component is used in the Jamboree26 app to provide
|
|
410
513
|
* navigation at the bottom of the screen.
|
|
@@ -511,6 +614,24 @@ declare global {
|
|
|
511
614
|
prototype: HTMLScoutDividerElement;
|
|
512
615
|
new (): HTMLScoutDividerElement;
|
|
513
616
|
};
|
|
617
|
+
interface HTMLScoutDrawerElementEventMap {
|
|
618
|
+
"backButtonClicked": void;
|
|
619
|
+
"exitButtonClicked": void;
|
|
620
|
+
}
|
|
621
|
+
interface HTMLScoutDrawerElement extends Components.ScoutDrawer, HTMLStencilElement {
|
|
622
|
+
addEventListener<K extends keyof HTMLScoutDrawerElementEventMap>(type: K, listener: (this: HTMLScoutDrawerElement, ev: ScoutDrawerCustomEvent<HTMLScoutDrawerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
623
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
624
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
625
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
626
|
+
removeEventListener<K extends keyof HTMLScoutDrawerElementEventMap>(type: K, listener: (this: HTMLScoutDrawerElement, ev: ScoutDrawerCustomEvent<HTMLScoutDrawerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
627
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
628
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
629
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
630
|
+
}
|
|
631
|
+
var HTMLScoutDrawerElement: {
|
|
632
|
+
prototype: HTMLScoutDrawerElement;
|
|
633
|
+
new (): HTMLScoutDrawerElement;
|
|
634
|
+
};
|
|
514
635
|
/**
|
|
515
636
|
* The field component is used to wrap form fields with a label, help text, and
|
|
516
637
|
* error messages. It automatically captures validation events from its child
|
|
@@ -645,6 +766,31 @@ declare global {
|
|
|
645
766
|
prototype: HTMLScoutRadioButtonElement;
|
|
646
767
|
new (): HTMLScoutRadioButtonElement;
|
|
647
768
|
};
|
|
769
|
+
interface HTMLScoutSegmentedControlElementEventMap {
|
|
770
|
+
"scoutChange": { value: number };
|
|
771
|
+
}
|
|
772
|
+
/**
|
|
773
|
+
* The segmented control component presents a set of options where exactly one
|
|
774
|
+
* option is active at a time.
|
|
775
|
+
* The component displays an indicator under the selected option and emits a
|
|
776
|
+
* `scoutChange` event when the user picks a different option, so you can update
|
|
777
|
+
* `value`.
|
|
778
|
+
* Use button elements as the slotted segment options.
|
|
779
|
+
*/
|
|
780
|
+
interface HTMLScoutSegmentedControlElement extends Components.ScoutSegmentedControl, HTMLStencilElement {
|
|
781
|
+
addEventListener<K extends keyof HTMLScoutSegmentedControlElementEventMap>(type: K, listener: (this: HTMLScoutSegmentedControlElement, ev: ScoutSegmentedControlCustomEvent<HTMLScoutSegmentedControlElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
782
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
783
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
784
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
785
|
+
removeEventListener<K extends keyof HTMLScoutSegmentedControlElementEventMap>(type: K, listener: (this: HTMLScoutSegmentedControlElement, ev: ScoutSegmentedControlCustomEvent<HTMLScoutSegmentedControlElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
786
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
787
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
788
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
789
|
+
}
|
|
790
|
+
var HTMLScoutSegmentedControlElement: {
|
|
791
|
+
prototype: HTMLScoutSegmentedControlElement;
|
|
792
|
+
new (): HTMLScoutSegmentedControlElement;
|
|
793
|
+
};
|
|
648
794
|
interface HTMLScoutSelectElementEventMap {
|
|
649
795
|
"scoutInputChange": {
|
|
650
796
|
value: string;
|
|
@@ -753,12 +899,14 @@ declare global {
|
|
|
753
899
|
};
|
|
754
900
|
interface HTMLElementTagNameMap {
|
|
755
901
|
"scout-app-bar": HTMLScoutAppBarElement;
|
|
902
|
+
"scout-avatar": HTMLScoutAvatarElement;
|
|
756
903
|
"scout-bottom-bar": HTMLScoutBottomBarElement;
|
|
757
904
|
"scout-bottom-bar-item": HTMLScoutBottomBarItemElement;
|
|
758
905
|
"scout-button": HTMLScoutButtonElement;
|
|
759
906
|
"scout-card": HTMLScoutCardElement;
|
|
760
907
|
"scout-checkbox": HTMLScoutCheckboxElement;
|
|
761
908
|
"scout-divider": HTMLScoutDividerElement;
|
|
909
|
+
"scout-drawer": HTMLScoutDrawerElement;
|
|
762
910
|
"scout-field": HTMLScoutFieldElement;
|
|
763
911
|
"scout-input": HTMLScoutInputElement;
|
|
764
912
|
"scout-link": HTMLScoutLinkElement;
|
|
@@ -767,6 +915,7 @@ declare global {
|
|
|
767
915
|
"scout-list-view-subheader": HTMLScoutListViewSubheaderElement;
|
|
768
916
|
"scout-loader": HTMLScoutLoaderElement;
|
|
769
917
|
"scout-radio-button": HTMLScoutRadioButtonElement;
|
|
918
|
+
"scout-segmented-control": HTMLScoutSegmentedControlElement;
|
|
770
919
|
"scout-select": HTMLScoutSelectElement;
|
|
771
920
|
"scout-stack": HTMLScoutStackElement;
|
|
772
921
|
"scout-switch": HTMLScoutSwitchElement;
|
|
@@ -783,6 +932,22 @@ declare namespace LocalJSX {
|
|
|
783
932
|
interface ScoutAppBar {
|
|
784
933
|
"titleText"?: string;
|
|
785
934
|
}
|
|
935
|
+
/**
|
|
936
|
+
* The avatar component is used to display the user's profile picture.
|
|
937
|
+
* Wrap it with a container, to determine its size, since it scales to fit container.
|
|
938
|
+
*/
|
|
939
|
+
interface ScoutAvatar {
|
|
940
|
+
/**
|
|
941
|
+
* The name of the user.
|
|
942
|
+
* @default ""
|
|
943
|
+
*/
|
|
944
|
+
"alt"?: string;
|
|
945
|
+
/**
|
|
946
|
+
* The source URL of the user image.
|
|
947
|
+
* @default ""
|
|
948
|
+
*/
|
|
949
|
+
"imageSrc"?: string;
|
|
950
|
+
}
|
|
786
951
|
/**
|
|
787
952
|
* The bottom bar component is used in the Jamboree26 app to provide
|
|
788
953
|
* navigation at the bottom of the screen.
|
|
@@ -921,6 +1086,56 @@ declare namespace LocalJSX {
|
|
|
921
1086
|
}
|
|
922
1087
|
interface ScoutDivider {
|
|
923
1088
|
}
|
|
1089
|
+
interface ScoutDrawer {
|
|
1090
|
+
/**
|
|
1091
|
+
* Back button label.
|
|
1092
|
+
* @default ""
|
|
1093
|
+
*/
|
|
1094
|
+
"backButtonLabel"?: string;
|
|
1095
|
+
/**
|
|
1096
|
+
* Disable backdrop for the drawer.
|
|
1097
|
+
* @default false
|
|
1098
|
+
*/
|
|
1099
|
+
"disableBackdrop"?: boolean;
|
|
1100
|
+
/**
|
|
1101
|
+
* Disable drawer content padding. Use only if you have specific use case and you need to use full width.
|
|
1102
|
+
* @default false
|
|
1103
|
+
*/
|
|
1104
|
+
"disableContentPadding"?: boolean;
|
|
1105
|
+
/**
|
|
1106
|
+
* Exit button label.
|
|
1107
|
+
* @default ""
|
|
1108
|
+
*/
|
|
1109
|
+
"exitButtonLabel"?: string;
|
|
1110
|
+
/**
|
|
1111
|
+
* Heading within the sheet.
|
|
1112
|
+
* @default ""
|
|
1113
|
+
*/
|
|
1114
|
+
"heading"?: string;
|
|
1115
|
+
/**
|
|
1116
|
+
* Fired when clicking backButton (<-)
|
|
1117
|
+
*/
|
|
1118
|
+
"onBackButtonClicked"?: (event: ScoutDrawerCustomEvent<void>) => void;
|
|
1119
|
+
/**
|
|
1120
|
+
* Fired when clicking backButton (X). Also sent when clicking the backdrop.
|
|
1121
|
+
*/
|
|
1122
|
+
"onExitButtonClicked"?: (event: ScoutDrawerCustomEvent<void>) => void;
|
|
1123
|
+
/**
|
|
1124
|
+
* Open/close state of the drawer.
|
|
1125
|
+
* @default false
|
|
1126
|
+
*/
|
|
1127
|
+
"open"?: boolean;
|
|
1128
|
+
/**
|
|
1129
|
+
* Render back button.
|
|
1130
|
+
* @default false
|
|
1131
|
+
*/
|
|
1132
|
+
"showBackButton"?: boolean;
|
|
1133
|
+
/**
|
|
1134
|
+
* Render exit button.
|
|
1135
|
+
* @default false
|
|
1136
|
+
*/
|
|
1137
|
+
"showExitButton"?: boolean;
|
|
1138
|
+
}
|
|
924
1139
|
/**
|
|
925
1140
|
* The field component is used to wrap form fields with a label, help text, and
|
|
926
1141
|
* error messages. It automatically captures validation events from its child
|
|
@@ -1045,6 +1260,11 @@ declare namespace LocalJSX {
|
|
|
1045
1260
|
interface ScoutListView {
|
|
1046
1261
|
}
|
|
1047
1262
|
interface ScoutListViewItem {
|
|
1263
|
+
/**
|
|
1264
|
+
* The action to display on the right side of the item. For example, a chevron. This is purely visual and does not affect the behavior of the item in any way. Not visible when the type is "radio" or "checkbox".
|
|
1265
|
+
* @default null
|
|
1266
|
+
*/
|
|
1267
|
+
"action"?: ActionType;
|
|
1048
1268
|
"checked"?: boolean;
|
|
1049
1269
|
"disabled"?: boolean;
|
|
1050
1270
|
"href"?: string;
|
|
@@ -1132,6 +1352,30 @@ declare namespace LocalJSX {
|
|
|
1132
1352
|
"validity"?: string;
|
|
1133
1353
|
"value"?: string;
|
|
1134
1354
|
}
|
|
1355
|
+
/**
|
|
1356
|
+
* The segmented control component presents a set of options where exactly one
|
|
1357
|
+
* option is active at a time.
|
|
1358
|
+
* The component displays an indicator under the selected option and emits a
|
|
1359
|
+
* `scoutChange` event when the user picks a different option, so you can update
|
|
1360
|
+
* `value`.
|
|
1361
|
+
* Use button elements as the slotted segment options.
|
|
1362
|
+
*/
|
|
1363
|
+
interface ScoutSegmentedControl {
|
|
1364
|
+
/**
|
|
1365
|
+
* Emitted when the active segment changes as a result of a user click. The `value` in the event detail is the zero-based index of the newly selected segment.
|
|
1366
|
+
*/
|
|
1367
|
+
"onScoutChange"?: (event: ScoutSegmentedControlCustomEvent<{ value: number }>) => void;
|
|
1368
|
+
/**
|
|
1369
|
+
* Visual size of the segmented control. Use `small` for dense layouts and `medium` for the default size.
|
|
1370
|
+
* @default "medium"
|
|
1371
|
+
*/
|
|
1372
|
+
"size"?: Size2;
|
|
1373
|
+
/**
|
|
1374
|
+
* Zero-based index of the currently active segment.
|
|
1375
|
+
* @default 0
|
|
1376
|
+
*/
|
|
1377
|
+
"value"?: number;
|
|
1378
|
+
}
|
|
1135
1379
|
/**
|
|
1136
1380
|
* The select component is a dropdown menu that allows users to select one
|
|
1137
1381
|
* option from a list. When used in a form, make sure to wrap it in a Field
|
|
@@ -1271,12 +1515,14 @@ declare namespace LocalJSX {
|
|
|
1271
1515
|
}
|
|
1272
1516
|
interface IntrinsicElements {
|
|
1273
1517
|
"scout-app-bar": ScoutAppBar;
|
|
1518
|
+
"scout-avatar": ScoutAvatar;
|
|
1274
1519
|
"scout-bottom-bar": ScoutBottomBar;
|
|
1275
1520
|
"scout-bottom-bar-item": ScoutBottomBarItem;
|
|
1276
1521
|
"scout-button": ScoutButton;
|
|
1277
1522
|
"scout-card": ScoutCard;
|
|
1278
1523
|
"scout-checkbox": ScoutCheckbox;
|
|
1279
1524
|
"scout-divider": ScoutDivider;
|
|
1525
|
+
"scout-drawer": ScoutDrawer;
|
|
1280
1526
|
"scout-field": ScoutField;
|
|
1281
1527
|
"scout-input": ScoutInput;
|
|
1282
1528
|
"scout-link": ScoutLink;
|
|
@@ -1285,6 +1531,7 @@ declare namespace LocalJSX {
|
|
|
1285
1531
|
"scout-list-view-subheader": ScoutListViewSubheader;
|
|
1286
1532
|
"scout-loader": ScoutLoader;
|
|
1287
1533
|
"scout-radio-button": ScoutRadioButton;
|
|
1534
|
+
"scout-segmented-control": ScoutSegmentedControl;
|
|
1288
1535
|
"scout-select": ScoutSelect;
|
|
1289
1536
|
"scout-stack": ScoutStack;
|
|
1290
1537
|
"scout-switch": ScoutSwitch;
|
|
@@ -1302,6 +1549,11 @@ declare module "@stencil/core" {
|
|
|
1302
1549
|
* native-like navigation experience.
|
|
1303
1550
|
*/
|
|
1304
1551
|
"scout-app-bar": LocalJSX.ScoutAppBar & JSXBase.HTMLAttributes<HTMLScoutAppBarElement>;
|
|
1552
|
+
/**
|
|
1553
|
+
* The avatar component is used to display the user's profile picture.
|
|
1554
|
+
* Wrap it with a container, to determine its size, since it scales to fit container.
|
|
1555
|
+
*/
|
|
1556
|
+
"scout-avatar": LocalJSX.ScoutAvatar & JSXBase.HTMLAttributes<HTMLScoutAvatarElement>;
|
|
1305
1557
|
/**
|
|
1306
1558
|
* The bottom bar component is used in the Jamboree26 app to provide
|
|
1307
1559
|
* navigation at the bottom of the screen.
|
|
@@ -1330,6 +1582,7 @@ declare module "@stencil/core" {
|
|
|
1330
1582
|
*/
|
|
1331
1583
|
"scout-checkbox": LocalJSX.ScoutCheckbox & JSXBase.HTMLAttributes<HTMLScoutCheckboxElement>;
|
|
1332
1584
|
"scout-divider": LocalJSX.ScoutDivider & JSXBase.HTMLAttributes<HTMLScoutDividerElement>;
|
|
1585
|
+
"scout-drawer": LocalJSX.ScoutDrawer & JSXBase.HTMLAttributes<HTMLScoutDrawerElement>;
|
|
1333
1586
|
/**
|
|
1334
1587
|
* The field component is used to wrap form fields with a label, help text, and
|
|
1335
1588
|
* error messages. It automatically captures validation events from its child
|
|
@@ -1354,6 +1607,15 @@ declare module "@stencil/core" {
|
|
|
1354
1607
|
* label, help text, and error messages.
|
|
1355
1608
|
*/
|
|
1356
1609
|
"scout-radio-button": LocalJSX.ScoutRadioButton & JSXBase.HTMLAttributes<HTMLScoutRadioButtonElement>;
|
|
1610
|
+
/**
|
|
1611
|
+
* The segmented control component presents a set of options where exactly one
|
|
1612
|
+
* option is active at a time.
|
|
1613
|
+
* The component displays an indicator under the selected option and emits a
|
|
1614
|
+
* `scoutChange` event when the user picks a different option, so you can update
|
|
1615
|
+
* `value`.
|
|
1616
|
+
* Use button elements as the slotted segment options.
|
|
1617
|
+
*/
|
|
1618
|
+
"scout-segmented-control": LocalJSX.ScoutSegmentedControl & JSXBase.HTMLAttributes<HTMLScoutSegmentedControlElement>;
|
|
1357
1619
|
/**
|
|
1358
1620
|
* The select component is a dropdown menu that allows users to select one
|
|
1359
1621
|
* option from a list. When used in a form, make sure to wrap it in a Field
|
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{M as r,r as a,c as e,h as t}from"./p-BtN0bCWb.js";import{i}from"./p-DMdnqqlQ.js";const o=class extends(r(i)){constructor(r){super(),a(this,r),this.scoutInputChange=e(this,"scoutInputChange"),this.scoutBlur=e(this,"scoutBlur"),this.scoutValidate=e(this,"scoutValidate"),this._scoutValidityChanged=e(this,"_scoutValidityChanged"),this._scoutInvalid=e(this,"_scoutInvalid"),this._scoutFieldId=e(this,"_scoutFieldId"),this.scoutChecked=e(this,"scoutChecked")}toggled=!1;disabled=!1;ariaLabelledby;label;scoutChecked;onChange(r){const a=r.target;this.scoutChecked.emit({checked:a.checked,element:a})}render(){return t(this.label?.length?"label":"div",{key:"6d15a65d5338857bcecb4f5e80dce58d37c03153"},this.label,t("span",{key:"b398f86314685fe31394fe35eef10a515f5d9936",class:"inlineDivider"}),t("input",{key:"555d43eb9526f3831a127b316fa4142140056fb6",ref:r=>this.setInputRef(r),id:this.ariaId,type:"checkbox",class:"switch","aria-labelledby":this.ariaLabelledby,"aria-disabled":this.disabled,disabled:this.disabled,checked:this.toggled,onChange:r=>{this.onInput(),this.onChange(r)},onBlur:()=>this.onBlur(),onInvalid:()=>this.onInvalid()}))}static get delegatesFocus(){return!0}static get watchers(){return{validity:[{runValidation:0}]}}};o.style='.switch{width:var(--spacing-10);height:var(--spacing-6);-moz-appearance:none;appearance:none;-webkit-appearance:none;border-radius:var(--spacing-8);background-color:var(--color-text-brand-inverse);border:2px solid var(--color-gray-300);position:relative;display:flex;align-content:center;justify-content:center;transition-property:border-color;transition-duration:0.3s;transition-timing-function:ease-in-out;cursor:pointer;--switch-ball-padding:calc(var(--spacing-1) / 4);--switch-ball-size:calc(var(--spacing-5) - var(--switch-ball-padding) * 2)}@media (hover: hover){.switch:hover{transition-property:none;border-color:var(--color-gray-400);background-color:var(--color-background-brand-subtle-hovered)}}.switch:active{background-color:var(--color-background-brand-subtle-pressed)}.switch:checked{border-color:var(--color-background-brand-base)}@media (hover: hover){.switch:hover::before{background-color:var(--color-gray-400)}}.switch::before{content:"";background-color:var(--color-gray-300);width:var(--switch-ball-size);height:var(--switch-ball-size);border-radius:50%;position:absolute;top:var(--switch-ball-padding);left:var(--switch-ball-padding);transition-duration:0.3s;transition-property:left, right}.switch:checked::before{content:"";background-color:var(--color-background-brand-base);left:calc(100% - (var(--switch-ball-size) + var(--switch-ball-padding)));left:calc(100% - calc(var(--switch-ball-size) + var(--switch-ball-padding)))}.switch:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}.switch:disabled::before{background-color:var(--color-gray-300)}label{display:flex;flex-direction:row-reverse;align-items:center;font:var(--type-label-base);color:var(--color-text-base)}.inlineDivider{width:var(--spacing-2)}';export{o as scout_switch}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,d as e,h as s}from"./p-BtN0bCWb.js";const c=class{constructor(e){t(this,e)}get el(){return e(this)}onScoutChecked(t){const{checked:e,element:s}=t.detail;if("radio"!==s.type||!s.name||!e)return;const c=this.el.querySelectorAll("scout-list-view-item"),i=[];c.forEach((t=>{const e=t.shadowRoot?.querySelectorAll(`input[type="radio"][name="${CSS.escape(s.name)}"]`);e?.forEach((t=>{t!==s&&i.push(t)}))}));for(const t of i)t.checked=!1}render(){return s("div",{key:"a2c79ce8e0fe8028cb7b093f6bf64961a0ef4d05",class:"list",role:"list"},s("slot",{key:"6a147fbbb385c80325211e9cb009b6af0678dbb6"}))}static get delegatesFocus(){return!0}};c.style=".list{width:100%;display:flex;flex-direction:column;padding:var(--spacing-2);gap:2px}";export{c as scout_list_view}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as i,c as t,h as e,H as o}from"./p-BtN0bCWb.js";const r=class{constructor(e){i(this,e),this.scoutClick=t(this,"scoutClick")}icon;primary;secondary;type="button";action=null;href;target;rel;name;value;checked;disabled;scoutClick;render(){return e(o,{key:"a91a63b4ed66f3ea5139f83d0024b342cd7095d1",role:"listitem"},e("link"===this.type?"a":"radio"===this.type||"checkbox"===this.type?"label":"button",{key:"9c4e5c7e24c0f152f5e13b77a91c9eff0f73192d",class:"button",..."link"===this.type?{href:this.href,target:this.target,rel:this.rel??("_blank"===this.target?"noopener noreferrer":void 0)}:{},onClick:()=>this.scoutClick.emit()},this.getPrefix(),this.getContent(),this.getSuffix()))}getPrefix(){return this.icon?e("div",{class:"prefix-icon",innerHTML:this.icon}):null}getContent(){return e("div",{class:"content"},this.primary&&e("div",{class:"primary"},this.primary),this.secondary&&e("div",{class:"secondary"},this.secondary))}getSuffix(){return"radio"===this.type?e("scout-radio-button",{name:this.name,value:this.value,checked:this.checked,disabled:this.disabled}):"checkbox"===this.type?e("scout-checkbox",{name:this.name,value:this.value,checked:this.checked,disabled:this.disabled}):"chevron"===this.action?e("div",{class:"suffix-icon"},e("div",{class:"icon",style:{"--icon":"url(data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hldnJvbi1yaWdodCIKPgogIDxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPgogIDxwYXRoIGQ9Ik05IDZsNiA2bC02IDYiIC8+Cjwvc3ZnPg==)"}})):null}static get delegatesFocus(){return!0}};r.style=":host{display:flex}.button{flex:1;display:flex;align-items:center;text-align:inherit;min-height:var(--spacing-12);color:var(--color-text-base);padding:var(--spacing-4) var(--spacing-4);cursor:pointer;border:1px solid rgba(0, 0, 0, 0.05);background-color:var(--color-white);-webkit-text-decoration:none;text-decoration:none;border-radius:6px}:host(:first-of-type) .button{border-top-left-radius:var(--spacing-4);border-top-right-radius:var(--spacing-4)}:host(:last-of-type) .button{border-bottom-left-radius:var(--spacing-4);border-bottom-right-radius:var(--spacing-4)}@media (hover: hover){.button:hover{background-color:var(--color-background-brand-subtle-hovered);border-color:rgba(0, 0, 0, 0.03)}}.prefix-icon,.suffix-icon{display:flex;align-items:center;height:var(--spacing-6);color:var(--color-neutral-700)}.prefix-icon svg,.suffix-icon svg,.prefix-icon .icon,.suffix-icon .icon{width:var(--spacing-6);height:var(--spacing-6)}.prefix-icon{justify-content:flex-start;width:var(--spacing-10)}.suffix-icon{justify-content:flex-end;width:var(--spacing-8)}.suffix-icon .icon{background-color:currentColor;-webkit-mask-image:var(--icon);mask-image:var(--icon);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.content{flex:1;display:flex;flex-direction:column;justify-content:center}.primary{font:var(--type-body-base)}.secondary{font:var(--type-body-sm);color:var(--color-neutral-700)}";export{r as scout_list_view_item}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{M as t,r as s,c as a,h as i,H as r}from"./p-
|
|
1
|
+
import{M as t,r as s,c as a,h as i,H as r}from"./p-BtN0bCWb.js";import{i as o}from"./p-DMdnqqlQ.js";const e=class extends(t(o)){constructor(t){super(),s(this,t),this.scoutInputChange=a(this,"scoutInputChange"),this.scoutBlur=a(this,"scoutBlur"),this.scoutValidate=a(this,"scoutValidate"),this._scoutValidityChanged=a(this,"_scoutValidityChanged"),this._scoutInvalid=a(this,"_scoutInvalid"),this._scoutFieldId=a(this,"_scoutFieldId")}size="medium";variant="default";type="text";inputmode;pattern;value="";name;disabled=!1;placeholder;render(){return i(r,{key:"800efa151d522ef1d7a483128baa6c0958dcd100",class:`${"large"===this.size?"large":""} ${"elevated"===this.variant?"elevated":""}`},i("input",{key:"92756a5cdf529455fffaadcbcdd2bc36a5087c65",ref:t=>this.setInputRef(t),id:this.ariaId,type:this.type,name:this.name,inputMode:this.inputmode,pattern:this.pattern,class:"input",value:this.value,disabled:this.disabled,placeholder:this.placeholder,onInput:()=>this.onInput(),onBlur:()=>this.onBlur(),onInvalid:()=>this.onInvalid()}))}static get watchers(){return{validity:[{runValidation:0}]}}};e.style=".sc-scout-input-h{display:flex;height:var(--spacing-10);--scout-input-padding:var(--spacing-2);--scout-input-border-radius:var(--spacing-2);--scout-input-type:var(--type-body-base)}.large.sc-scout-input-h{height:var(--spacing-14);--scout-input-padding:var(--spacing-3);--scout-input-border-radius:var(--spacing-3);--scout-input-type:var(--type-body-lg)}.input.sc-scout-input{flex:1;padding:var(--scout-input-padding);font:var(--scout-input-type);border:1px solid var(--color-gray-300);border-radius:var(--scout-input-border-radius);background-color:var(--color-white);color:var(--color-text-base)}.input.sc-scout-input:disabled{background-color:var(--color-gray-100);color:var(--color-gray-700);cursor:not-allowed}.elevated.sc-scout-input-h .input.sc-scout-input{box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);border-color:transparent}";export{e as scout_input}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{M as o,r as e,c as a,h as r}from"./p-
|
|
1
|
+
import{M as o,r as e,c as a,h as r}from"./p-BtN0bCWb.js";import{i as t}from"./p-DMdnqqlQ.js";const c=class extends(o(t)){constructor(o){super(),e(this,o),this.scoutInputChange=a(this,"scoutInputChange"),this.scoutBlur=a(this,"scoutBlur"),this.scoutValidate=a(this,"scoutValidate"),this._scoutValidityChanged=a(this,"_scoutValidityChanged"),this._scoutInvalid=a(this,"_scoutInvalid"),this._scoutFieldId=a(this,"_scoutFieldId"),this.scoutChecked=a(this,"scoutChecked")}checked=!1;disabled=!1;ariaLabelledby;label;value;name;scoutChecked;onChange(o){const e=o.target;this.scoutChecked.emit({checked:e.checked,element:e})}render(){return r(this.label?.length?"label":"div",{key:"67b42b2b686fffecf891da832236fde663b740dc"},r("input",{key:"81821918d102e1ca809915c14a20aa0847f46e30",ref:o=>this.setInputRef(o),id:this.ariaId,type:"checkbox",value:this.value,name:this.name,class:"checkbox",style:{"--icon-checkbox":"url(data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hlY2siCj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNNSAxMmw1IDVsMTAgLTEwIiAvPgo8L3N2Zz4=)"},"aria-labelledby":this.ariaLabelledby,"aria-disabled":this.disabled,disabled:this.disabled,checked:this.checked,onChange:o=>{this.onInput(),this.onChange(o)},onBlur:()=>this.onBlur(),onInvalid:()=>this.onInvalid()}),this.label)}static get watchers(){return{validity:[{runValidation:0}]}}};c.style='.checkbox.sc-scout-checkbox{width:var(--spacing-6);height:var(--spacing-6);-moz-appearance:none;appearance:none;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;border-radius:3px;background-color:var(--color-text-brand-inverse);border:2px solid var(--color-gray-300);position:relative}@media (hover: hover){.checkbox.sc-scout-checkbox:hover{border:2px solid var(--color-gray-400);box-shadow:inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);cursor:pointer}}.checkbox.sc-scout-checkbox:active{background-color:var(--color-background-brand-subtle-pressed)}@media (hover: hover){.checkbox.sc-scout-checkbox:checked:hover{background-color:var(--color-background-brand-hovered);border-color:var(--color-background-brand-hovered);box-shadow:none}}.checkbox.sc-scout-checkbox:checked{background-color:var(--color-background-brand-base);border-color:var(--color-background-brand-base)}.checkbox.sc-scout-checkbox::after{content:"";position:absolute;width:var(--spacing-10);height:var(--spacing-10);top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox.sc-scout-checkbox:checked::before{content:"";background-color:var(--color-text-brand-inverse);width:var(--spacing-6);height:var(--spacing-6);position:absolute;top:50%;left:50%;right:0;bottom:0;transform:translate(-50%, -50%);-webkit-mask-image:var(--icon-checkbox);mask-image:var(--icon-checkbox);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.checkbox.sc-scout-checkbox:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}label.sc-scout-checkbox{display:flex;align-items:center;gap:var(--spacing-2);font:var(--type-label-base);color:var(--color-text-base)}';const s=class extends(o(t)){constructor(o){super(),e(this,o),this.scoutInputChange=a(this,"scoutInputChange"),this.scoutBlur=a(this,"scoutBlur"),this.scoutValidate=a(this,"scoutValidate"),this._scoutValidityChanged=a(this,"_scoutValidityChanged"),this._scoutInvalid=a(this,"_scoutInvalid"),this._scoutFieldId=a(this,"_scoutFieldId"),this.scoutChecked=a(this,"scoutChecked")}checked=!1;disabled=!1;ariaLabelledby;label;value;name;scoutChecked;onChange(o){const e=o.target;this.scoutChecked.emit({checked:e.checked,element:e})}render(){return r(this.label?.length?"label":"div",{key:"22df090dcbf2f2b4b14b7cad8d34500295045f70"},r("input",{key:"3bcc5022fa6202fd1fe733c1a8430f7ed1a54cf4",ref:o=>this.setInputRef(o),id:this.ariaId,type:"radio",value:this.value,name:this.name,class:"radio","aria-labelledby":this.ariaLabelledby,"aria-disabled":this.disabled,disabled:this.disabled,checked:this.checked,onChange:o=>{this.onInput(),this.onChange(o)},onBlur:()=>this.onBlur(),onInvalid:()=>this.onInvalid()}),this.label)}static get watchers(){return{validity:[{runValidation:0}]}}};s.style='.radio.sc-scout-radio-button{width:var(--spacing-6);height:var(--spacing-6);-moz-appearance:none;appearance:none;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;border-radius:100%;background-color:var(--color-white);border:2px solid var(--color-gray-300);position:relative}@media (hover: hover){.radio.sc-scout-radio-button:hover{border:2px solid var(--color-gray-400);box-shadow:inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);cursor:pointer}}.radio.sc-scout-radio-button:active{background-color:var(--color-background-brand-subtle-pressed)}@media (hover: hover){.radio.sc-scout-radio-button:checked:hover{border-color:var(--color-background-brand-hovered);box-shadow:none}.radio.sc-scout-radio-button:checked:hover::before{background-color:var(--color-background-brand-hovered)}}.radio.sc-scout-radio-button:checked{border-color:var(--color-background-brand-base)}.radio.sc-scout-radio-button::after{content:"";position:absolute;width:var(--spacing-10);height:var(--spacing-10);top:50%;left:50%;transform:translate(-50%, -50%)}.radio.sc-scout-radio-button:checked::before{content:"";background-color:var(--color-background-brand-base);width:var(--spacing-4);height:var(--spacing-4);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:100%}.radio.sc-scout-radio-button:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}label.sc-scout-radio-button{display:flex;align-items:center;gap:var(--spacing-2);font:var(--type-label-base);color:var(--color-text-base)}';export{c as scout_checkbox,s as scout_radio_button}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,h as a,H as s}from"./p-BtN0bCWb.js";var e;!function(t){t.xs="2",t.s="4",t.m="8",t.l="12",t.xl="16",t.xxl="20"}(e||(e={}));const c=class{constructor(a){t(this,a)}direction="row";gapSize="m";render(){return a(s,{key:"cf8f24869700a8f07be858433970b07f77a15c70",style:{"--stack-flex-direction":`${this.direction}`,"--stack-gap-spacing":`var(--spacing-${e[this.gapSize]})`}},a("slot",{key:"5673836639ec9e40da4e6558b8e42029dda5ff95"}))}static get delegatesFocus(){return!0}};c.style=":host{display:flex;width:100%;flex-direction:var(--stack-flex-direction);gap:var(--stack-gap-spacing)}";export{c as scout_stack}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as o,c as t,h as r,H as a}from"./p-
|
|
1
|
+
import{r as o,c as t,h as r,H as a}from"./p-BtN0bCWb.js";const n=class{constructor(r){o(this,r),this.scoutClick=t(this,"scoutClick")}type="button";href;target;rel;size="medium";variant="outlined";icon;iconPosition="after";iconOnly=!1;scoutClick;render(){const o="link"===this.type?"a":"button",t="link"===this.type?{href:this.href,target:this.target,rel:this.rel??("_blank"===this.target?"noopener noreferrer":void 0)}:{type:this.type},n=this.icon&&r("span",{key:"9a16653774acda8b34ff428fbe21cca1e481c9e4",class:"icon",innerHTML:this.icon});return r(a,{key:"05da4122d7e1b6e80c5230b43c42de366c2a570a","data-size":this.size,"data-icon-only":this.iconOnly},r(o,{key:"d95abeb01118b1c00439aa66b308302bcded9871",class:`button ${this.variant}`,onClick:()=>this.scoutClick.emit(),...t},"before"===this.iconPosition&&n,r("span",{key:"623acd0ca7b801027515f52e5ff984769ccee5d8",class:"content"},r("slot",{key:"17ba121fdc0522f7a7857d7d8abd937fe51d105b"})),"after"===this.iconPosition&&n))}};n.style='scout-button{display:inline-block;height:var(--spacing-10);font:var(--type-body-base)}scout-button[data-size="large"]{height:var(--spacing-12);font:var(--type-body-lg)}scout-button .button{flex:1;display:inline-flex;width:100%;height:100%;align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;box-sizing:border-box}scout-button[data-size="large"] .button{padding:0 var(--spacing-5)}scout-button .icon{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}scout-button .icon svg{width:100%;height:100%}scout-button[data-icon-only] .button{aspect-ratio:1 / 1;justify-content:center;padding:0}scout-button[data-icon-only] .icon{margin:0}scout-button[data-icon-only] .content{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}scout-button .button.primary{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}@media (hover: hover){scout-button .button.primary:hover{background-color:var(--color-background-brand-hovered)}}scout-button .button.primary:active{background-color:var(--color-background-brand-pressed)}scout-button .button.outlined{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}@media (hover: hover){scout-button .button.outlined:hover{background-color:var(--color-background-brand-subtle-hovered)}}scout-button .button.outlined:active{background-color:var(--color-background-brand-subtle-pressed)}scout-button .button.text{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}@media (hover: hover){scout-button .button.text:hover{background-color:var(--color-background-brand-subtle-hovered)}}scout-button .button.text:active{background-color:var(--color-background-brand-subtle-pressed)}scout-button .button.caution{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}@media (hover: hover){scout-button .button.caution:hover{background-color:var(--color-background-caution-bold-hovered)}}scout-button .button.caution:active{background-color:var(--color-background-caution-bold-pressed)}scout-button .button.danger{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}@media (hover: hover){scout-button .button.danger:hover{background-color:var(--color-background-danger-bold-hovered)}}scout-button .button.danger:active{background-color:var(--color-background-danger-bold-pressed)}';export{n as scout_button}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,h as s,a as r}from"./p-BtN0bCWb.js";const a=class{constructor(s){t(this,s)}imageSrc="";alt="";render(){return s("img",{src:(()=>{if(this.imageSrc)return this.imageSrc;try{return r("assets/fallbackImage.png")}catch(t){return console.info("In storybook, rendering from storybook asset"),"fallbackImage.png"}})(),alt:this.alt})}static get delegatesFocus(){return!0}static get assetsDirs(){return["assets"]}};a.style=":host{display:flex;aspect-ratio:1 / 1}img{border-radius:50%}";export{a as scout_avatar}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r,h as t,H as o}from"./p-BtN0bCWb.js";const s=class{constructor(t){r(this,t)}render(){return t(o,{key:"6a4d3d0bed1689875ec867b16f0c77f391662fc8"})}static get delegatesFocus(){return!0}};s.style=":host{display:block;height:1px;background-color:var(--color-gray-200)}";export{s as scout_divider}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as e,
|
|
1
|
+
import{r as e,d as t,h as a}from"./p-BtN0bCWb.js";const l=class{constructor(t){e(this,t)}label;helpText;inputId;errorText=null;errorHidden=!1;get hostElement(){return t(this)}catchFieldId(e){e.stopPropagation(),this.inputId=e.detail}handleValidation(e){const{element:t}=e.detail;this.errorHidden=!0,this.errorText=t.validity.valid?null:t.validationMessage}showError(){this.errorHidden=!1}render(){return a("div",{key:"b2b20acd9c1e41294bfbb8ce7e450e23142c5606",class:"field"},a("label",{key:"7b375df7d5a5e4bbe44ae963775c58a6c27b5479",htmlFor:this.inputId,class:"label"},this.label),a("slot",{key:"c5783c044aa82977cd21a56df4f838af95bc0bf3"}),a("p",{key:"38df5a4f28432e046bb95fed66d6c1972e1d7adc",class:"error-text","aria-live":"polite"},!this.errorHidden&&this.errorText),this.helpText&&a("p",{key:"1f84da3fad92b45ac1cf3b8d1fad75276b7f8359",class:"help-text"},this.helpText))}};l.style=".field.sc-scout-field{display:flex;flex-direction:column}.label.sc-scout-field{font:var(--type-label-sm);font-weight:600;color:var(--color-text-base)}.error-text.sc-scout-field{font:var(--type-label-sm);color:var(--color-text-danger-base);margin:var(--spacing-1) 0 0 0}.error-text.sc-scout-field:empty{margin:0}.help-text.sc-scout-field{font:var(--type-label-sm);color:var(--color-gray-600);margin:var(--spacing-1) 0 0 0}";export{l as scout_field}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as s,d as a,h as e,H as i}from"./p-BtN0bCWb.js";const r=class{constructor(a){t(this,a),this.scoutChange=s(this,"scoutChange")}value=0;scoutChange;widths=[];lefts=[];get el(){return a(this)}render(){return e(i,{key:"929deee05337a8f617c4e429db7b79a210d4aa9d"},e("slot",{key:"1fe4833315de956310d25206d5bcc5cd82be93cf"}),this.getIndicator())}componentDidLoad(){this.updateChildrenClasses(),this.calculateIndicatorSizes()}getIndicator(){return e("div",{"aria-hidden":"true",class:"indicator",style:{width:`${this.widths[this.value]||0}px`,transform:`translateX(${this.lefts[this.value]||0}px)`}})}handleClick(t){const s=t.target,a=Array.from(this.el.children).indexOf(s);-1!==a&&a!==this.value&&this.scoutChange.emit({value:a})}updateChildrenClasses(){Array.from(this.el.children).forEach(((t,s)=>{const a=t;s===this.value?a.setAttribute("data-active","true"):a.removeAttribute("data-active")}))}calculateIndicatorSizes(){this.widths=Array.from(this.el.children).map((t=>t.offsetWidth)),this.lefts=this.widths.map(((t,s)=>this.widths.slice(0,s).reduce(((t,s)=>t+s),0)))}static get delegatesFocus(){return!0}static get watchers(){return{value:[{updateChildrenClasses:0},{calculateIndicatorSizes:0}]}}};r.style=":host{position:relative;width:100%;display:flex;height:var(--spacing-12);--tabs-indicator-height:2px}.indicator{position:absolute;bottom:0;left:0;width:0;height:var(--tabs-indicator-height);background-color:var(--color-background-brand-base);transition:all 0.3s ease}";export{r as scout_tabs}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,h as
|
|
1
|
+
import{r as t,h as a}from"./p-BtN0bCWb.js";const e=class{constructor(a){t(this,a)}render(){return a("button",{key:"ba1a973a3eaf5e02ca19525aa1bb66616d5b56ac",class:"button-native",type:"button"},a("div",{key:"f0daa636e1b3d0058d198e469e0f4874c37a7ca1",class:"inner-container"},a("slot",{key:"19587f0a7794cbfa646c383e0b57ffb90ce4b67c"})))}static get delegatesFocus(){return!0}};e.style=":host{flex:1;display:block;width:auto}.button-native{position:relative;display:block;width:100%;height:100%;color:var(--color-gray-600);background-color:transparent;border:none;cursor:pointer;padding:var(--spacing-1) var(--spacing-1) calc(var(--spacing-1) + var(--tabs-indicator-height)) var(--spacing-1);font-weight:500;text-transform:uppercase;font-size:0.875rem;letter-spacing:0.04em}.inner-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;border-radius:var(--spacing-2);background-color:transparent}.button-native:hover{color:var(--color-text-base)}.button-native:hover .inner-container{background-color:var(--color-background-brand-subtle-hovered)}:host([data-active]) .button-native{color:var(--color-text-base)}";export{e as scout_tabs_tab}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,c as e,h as r}from"./p-
|
|
1
|
+
import{r as t,c as e,h as r}from"./p-BtN0bCWb.js";const o=class{constructor(r){t(this,r),this.scoutLinkClick=e(this,"scoutLinkClick")}href;label;rel;linkAriaLabel;type="link";target="_self";scoutLinkClick;render(){if("button"===this.type)return r("button",{type:"button","aria-label":this.linkAriaLabel||"",onClick:()=>this.scoutLinkClick.emit()},this.label);if(!this.href)throw new Error("Href is requied when type is set to link");return r("a",{href:this.href,target:this.target,"aria-label":this.linkAriaLabel||"",rel:this.rel??("_blank"===this.target?"noopener noreferrer":void 0)},this.label)}static get delegatesFocus(){return!0}};o.style=":host{display:inline}a,button{color:var(--color-text-brand-base);-webkit-text-decoration:none;text-decoration:none}@media (hover: hover){a:hover,button:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--color-background-brand-hover)}}a:active,button:active{color:var(--color-background-brand-pressed)}button{display:inline;background:none;border:none;padding:0;cursor:pointer}";export{o as scout_link}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as n,c as t,d as r,h as e}from"./p-BtN0bCWb.js";var o="data-focus-lock",i=function(n){for(var t=Array(n.length),r=0;r<n.length;++r)t[r]=n[r];return t},a=function(n){return Array.isArray(n)?n:[n]},u=function(n){return Array.isArray(n)?n[0]:n},c=function(n){return n.parentNode&&n.parentNode.nodeType===Node.DOCUMENT_FRAGMENT_NODE?n.parentNode.host:n.parentNode},s=function(n){return n===document||n&&n.nodeType===Node.DOCUMENT_NODE},d=function(n,t){var r=n.get(t);if(void 0!==r)return r;var e=function(n,t){return!n||s(n)||!function(n){if(n.nodeType!==Node.ELEMENT_NODE)return!1;var t=window.getComputedStyle(n,null);return!(!t||!t.getPropertyValue||"none"!==t.getPropertyValue("display")&&"hidden"!==t.getPropertyValue("visibility"))}(n)&&t(c(n))}(t,d.bind(void 0,n));return n.set(t,e),e},f=function(n,t){var r=n.get(t);if(void 0!==r)return r;var e=function(n,t){return!(n&&!s(n))||!!p(n)&&t(c(n))}(t,f.bind(void 0,n));return n.set(t,e),e},l=function(n){return n.dataset},h=function(n){return"INPUT"===n.tagName},v=function(n){return h(n)&&"radio"===n.type},p=function(n){var t=n.getAttribute("data-no-autofocus");return![!0,"true",""].includes(t)},b=function(n){var t;return Boolean(n&&(null===(t=l(n))||void 0===t?void 0:t.focusGuard))},m=function(n){return!b(n)},w=function(n){return Boolean(n)},g=function(n,t){var r=n.tabIndex-t.tabIndex;if(r){if(!n.tabIndex)return 1;if(!t.tabIndex)return-1}return r||n.index-t.index},k=function(n,t){return i(n).map((function(n,t){return{node:n,index:t,tabIndex:n.tabIndex}})).filter((function(n){return!t||n.tabIndex>=0})).sort(g)},x=["button:enabled","select:enabled","textarea:enabled","input:enabled","a[href]","area[href]","summary","iframe","object","embed","audio[controls]","video[controls]","[tabindex]","[contenteditable]","[autofocus]"].join(","),y=function(n){return i((n.shadowRoot||n).children).reduce((function(n,t){return n.concat(t.matches(x)?[t]:[],y(t))}),[])},B=function(n){return n.reduce((function(n,t){var r,e=y(t),o=(r=[]).concat.apply(r,e.map((function(n){return function(n){var t;return n instanceof HTMLIFrameElement&&(null===(t=n.contentDocument)||void 0===t?void 0:t.body)?B([n.contentDocument.body]):[n]}(n)})));return n.concat(o,t.parentNode?i(t.parentNode.querySelectorAll(x)).filter((function(n){return n===t})):[])}),[])},C=function(n,t){return i(n).filter((function(n){return d(t,n)})).filter((function(n){return function(n){return!((h(n)||function(n){return"BUTTON"===n.tagName}(n))&&("hidden"===n.type||n.disabled))}(n)}))},M=function(n,t){return void 0===t&&(t=new Map),i(n).filter((function(n){return f(t,n)}))},O=function(n,t){return k(C(B(n),t),!1)},L=function(n,t){return n.shadowRoot?L(n.shadowRoot,t):!(void 0===Object.getPrototypeOf(n).contains||!Object.getPrototypeOf(n).contains.call(n,t))||i(n.children).some((function(n){var r;if(n instanceof HTMLIFrameElement){var e=null===(r=n.contentDocument)||void 0===r?void 0:r.body;return!!e&&L(e,t)}return L(n,t)}))},N=function(n){return n.parentNode?N(n.parentNode):n},T=function(n){return a(n).filter(Boolean).reduce((function(n,t){var r=t.getAttribute(o);return n.push.apply(n,r?function(n){for(var t=new Set,r=n.length,e=0;e<r;e+=1)for(var o=e+1;o<r;o+=1){var i=n[e].compareDocumentPosition(n[o]);(i&Node.DOCUMENT_POSITION_CONTAINED_BY)>0&&t.add(o),(i&Node.DOCUMENT_POSITION_CONTAINS)>0&&t.add(e)}return n.filter((function(n,r){return!t.has(r)}))}(i(N(t).querySelectorAll("[".concat(o,'="').concat(r,'"]:not([').concat("data-focus-lock-disabled",'="disabled"])')))):[t]),n}),[])},j=function(n){if(void 0===n&&(n=document),n&&n.activeElement){var t=n.activeElement;return t.shadowRoot?j(t.shadowRoot):t instanceof HTMLIFrameElement&&function(){try{return t.contentWindow.document}catch(n){return}}()?j(t.contentWindow.document):t}},E=function(n,t){return v(n)&&n.name?function(n,t){return t.filter(v).filter((function(t){return t.name===n.name})).filter((function(n){return n.checked}))[0]||n}(n,t):n},H=function(n,t){return n.length>1?n.indexOf(E(n[t],n)):t},S="NEW_FOCUS",F=function(n,t,r){var e,o=n.map((function(n){return n.node})),i=M(o.filter((e=r,function(n){var t,r=null===(t=l(n))||void 0===t?void 0:t.autofocus;return n.autofocus||void 0!==r&&"false"!==r||e.indexOf(n)>=0})));return function(n){return n[0]&&n.length>1?E(n[0],n):n[0]}(i&&i.length?i:M(t))},z=function(n,t){return void 0===t&&(t=[]),t.push(n),n.parentNode&&z(n.parentNode.host||n.parentNode,t),t},I=function(n,t){for(var r=z(n),e=z(t),o=0;o<r.length;o+=1){var i=r[o];if(e.indexOf(i)>=0)return i}return!1},X=function(n,t){var r=j(a(n).length>0?document:u(n).ownerDocument),e=T(n).filter(m),o=function(n,t,r){var e=a(n),o=a(t),i=e[0],u=!1;return o.filter(Boolean).forEach((function(n){u=I(u||n,n)||u,r.filter(Boolean).forEach((function(n){var t=I(i,n);t&&(u=!u||L(t,u)?t:I(t,u))}))})),u}(r||n,n,e),c=new Map,s=O(e,c),d=function(n,t){return k(C(B(n),t),!0)}(e,c).filter((function(n){return m(n.node)}));if(d[0]||(d=s)[0]){var f,l,h,v=O([o],c).map((function(n){return n.node})),p=(f=v,l=d,h=new Map,l.forEach((function(n){return h.set(n.node,n)})),f.map((function(n){return h.get(n)})).filter(w)),g=p.map((function(n){return n.node})),x=function(n,t,r,e){var o=n.length,i=n[0],a=n[o-1],u=b(r);if(!(r&&n.indexOf(r)>=0)){var c,s,d=void 0!==r?t.indexOf(r):-1,f=e?t.indexOf(e):d,l=e?n.indexOf(e):-1,h=d-f,v=t.indexOf(i),p=t.indexOf(a),m=(c=t,s=new Set,c.forEach((function(n){return s.add(E(n,c))})),c.filter((function(n){return s.has(n)}))),w=(void 0!==r?m.indexOf(r):-1)-(e?m.indexOf(e):d),g=H(n,0),k=H(n,o-1);return-1===d||-1===l?S:!h&&l>=0?l:d<=v&&u&&Math.abs(h)>1?k:d>=p&&u&&Math.abs(h)>1?g:h&&Math.abs(w)>1?l:d<=v?k:d>p?g:h?Math.abs(h)>1?l:(o+l+h)%o:void 0}}(g,v,r,t);if(x===S){var y=F(s,g,function(n,t){return n.reduce((function(n,r){return n.concat(function(n,t){return C((r=n.querySelectorAll("[".concat("data-autofocus-inside","]")),i(r).map((function(n){return B([n])})).reduce((function(n,t){return n.concat(t)}),[])),t);var r}(r,t))}),[])}(e,c));return y?{node:y}:void console.warn("focus-lock: cannot find any node to move focus into")}return void 0===x?x:p[x]}},Y=0,A=!1,W=0,D=null,U=function(){var n,t,r=!1;if(W){var e=W;document&&document.activeElement===document.body||function(n){void 0===n&&(n=document);var t=j(n);return!!t&&i(n.querySelectorAll("[".concat("data-no-focus-lock","]"))).some((function(n){return L(n,t)}))}()||(e&&(n=e,void 0===t&&(t=j(u(n).ownerDocument)),!(!(!t||t.dataset&&t.dataset.focusGuard)&&T(n).some((function(n){return L(n,t)||function(n,t){return Boolean(i(n.querySelectorAll("iframe")).some((function(n){return function(n,t){return n===t}(n,t)})))}(n,t)}))))&&(r=function(n,t,r){void 0===r&&(r={});var e,o=X(n,D);if(!A&&o){if(Y>2)return console.error("FocusLock: focus-fighting detected. Only one focus management system could be active. See https://github.com/theKashey/focus-lock/#focus-fighting"),A=!0,void setTimeout((function(){A=!1}),1);Y++,"focus"in(e=o.node)&&e.focus(r.focusOptions),"contentWindow"in e&&e.contentWindow&&e.contentWindow.focus(),Y--}}(e)),D=document.activeElement)}return r},P=[],_=function(n){return t=P.filter((function(n){return n})).slice(-1)[0],W=t,!!void(t&&U())&&(n&&n.preventDefault(),!0);var t};const K=class{constructor(r){n(this,r),this.backButtonClicked=t(this,"backButtonClicked"),this.exitButtonClicked=t(this,"exitButtonClicked")}get rootElement(){return r(this)}open=!1;heading="";showBackButton=!1;backButtonLabel="";showExitButton=!1;exitButtonLabel="";disableBackdrop=!1;disableContentPadding=!1;drawerState="closed";focusedNode=null;componentWillLoad(){this.focusedNode=document.activeElement}componentDidLoad(){this.open&&this.setDrawerOpenState(!0)}disconnectedCallback(){}backButtonClicked;exitButtonClicked;onBackButtonClick(){this.backButtonClicked.emit()}onExitButtonClick(){this.exitButtonClicked.emit()}setDrawerOpenState(n){const t=this.rootElement.shadowRoot.querySelector(".drawer--container");var r;t||(this.drawerState=n?"opening":"closing"),n?(this.drawerState="opening",r=t,0===P.length&&document.addEventListener("focusin",_),P.indexOf(r)<0&&(P.push(r),_())):(function(n){P=P.filter((function(t){return t!==n})),_(),0===P.length&&document.removeEventListener("focusin",_)}(t),this.drawerState="closing")}render(){const n=this.heading||this.showBackButton||this.showExitButton;return e("div",{class:"drawer"},!this.disableBackdrop&&e("div",{onClick:()=>{this.onExitButtonClick()},class:"backdrop "+("closed"!==this.drawerState?"backdrop-visible":"backdrop-hidden")}),e("div",{class:`drawer--container ${(()=>{switch(this.drawerState){case"opening":case"open":return"open";case"closing":return"close"}})()}`,onAnimationEnd:()=>{this.drawerState=this.open?"open":"closed"}},n&&e("div",{class:"header--wrapper"},this.showBackButton&&e("button",{type:"button",class:"back-button",onClick:()=>this.onBackButtonClick()},e("span",{class:"icon",innerHTML:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M5 12l6 6" /><path d="M5 12l6 -6" /></svg>'}),e("span",{class:"visually-hidden"},this.backButtonLabel)),this.showExitButton&&e("button",{type:"button",class:"exit-button",onClick:()=>this.onExitButtonClick()},e("span",{class:"icon",innerHTML:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>'}),e("span",{class:"visually-hidden"},this.exitButtonLabel)),this.heading&&e("h3",{class:"heading"},this.heading)),e("div",{class:!this.disableContentPadding&&"content--wrapper"},e("slot",null))))}static get delegatesFocus(){return!0}static get watchers(){return{open:[{setDrawerOpenState:0}]}}};K.style=".drawer{width:100%}.drawer--container{position:fixed;bottom:0;right:0;left:0;height:90%;width:100%;transform:translateY(100%);background-color:#fefefe;box-shadow:0 0 20px 3px var(--color-gray-200);border-top-left-radius:var(--spacing-5);border-top-right-radius:var(--spacing-5);overflow:hidden;margin:0;z-index:101}@keyframes drawerOpen{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes drawerClose{from{transform:translateY(0)}to{transform:translateY(100%)}}.open{animation:drawerOpen 0.3s ease-in-out forwards}.close{animation:drawerClose 0.3s ease-in-out forwards}@media screen and (min-width: 901px){@keyframes drawerOpen{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes drawerClose{from{transform:translateX(0)}to{transform:translateX(100%)}}.drawer--container{top:0;bottom:0;right:0;left:auto;left:initial;height:100%;max-height:100%;max-width:90%;min-height:600px;width:430px;transform:translateX(100%);border-top-left-radius:var(--spacing-5);border-bottom-left-radius:var(--spacing-5);border-top-right-radius:0}.open{animation:drawerOpen 0.3s ease-in-out forwards}.close{animation:drawerClose 0.3s ease-in-out forwards}}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;transition:opacity 0.2s;z-index:100}.backdrop-hidden{opacity:0}.backdrop-visible{opacity:0.6;pointer-events:all;background-color:var(--color-gray-200)}.header--wrapper{display:flex;position:relative;width:100%;height:var(--spacing-20);flex-direction:row;justify-content:center;align-items:center}.heading{font:var(--type-body-lg);font-weight:600;color:var(--color-text-base)}.content--wrapper{padding:0 var(--spacing-7)}button{z-index:2;pointer-events:all;cursor:pointer;background:none;box-shadow:none;position:absolute;border:none;width:24px;height:24px;padding:24px;display:flex;align-items:center;justify-content:center}.exit-button{right:var(--spacing-3)}.back-button{left:var(--spacing-3)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";export{K as scout_drawer}
|