@politiet/sheriff-web-components 2.12.0 → 2.13.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/custom-elements.json +51 -1
- package/dist/frameworks/vue.d.ts +79 -30
- package/dist/frameworks/vue.d.ts.map +1 -1
- package/dist/sds-alert/sds-alert.component.js +3 -3
- package/dist/sds-alert/sds-alert.component.js.map +1 -1
- package/dist/sds-alert/sds-alert.styles.d.ts.map +1 -1
- package/dist/sds-alert/sds-alert.styles.js +0 -6
- package/dist/sds-alert/sds-alert.styles.js.map +1 -1
- package/dist/sds-button/sds-button.component.d.ts +1 -0
- package/dist/sds-button/sds-button.component.d.ts.map +1 -1
- package/dist/sds-button/sds-button.component.js.map +1 -1
- package/dist/sds-details/sds-details.styles.d.ts.map +1 -1
- package/dist/sds-details/sds-details.styles.js +4 -2
- package/dist/sds-details/sds-details.styles.js.map +1 -1
- package/dist/sds-dialog/sds-dialog.styles.d.ts.map +1 -1
- package/dist/sds-dialog/sds-dialog.styles.js +2 -0
- package/dist/sds-dialog/sds-dialog.styles.js.map +1 -1
- package/dist/sds-icon/sds-icon-loader.d.ts +1 -0
- package/dist/sds-icon/sds-icon-loader.d.ts.map +1 -1
- package/dist/sds-icon/sds-icon-loader.js +21 -14
- package/dist/sds-icon/sds-icon-loader.js.map +1 -1
- package/dist/sds-radio/sds-radio.js +1 -1
- package/dist/sds-radio/sds-radio.js.map +1 -1
- package/dist/sds-text/sds-text.component.d.ts +2 -0
- package/dist/sds-text/sds-text.component.d.ts.map +1 -1
- package/dist/sds-text/sds-text.component.js +4 -0
- package/dist/sds-text/sds-text.component.js.map +1 -1
- package/dist/sds-text/sds-text.styles.d.ts.map +1 -1
- package/dist/sds-text/sds-text.styles.js +4 -0
- package/dist/sds-text/sds-text.styles.js.map +1 -1
- package/dist/sds-textarea/sds-textarea.styles.d.ts.map +1 -1
- package/dist/sds-textarea/sds-textarea.styles.js +2 -0
- package/dist/sds-textarea/sds-textarea.styles.js.map +1 -1
- package/dist/shared/assets/positioning.js +1 -1
- package/dist/sheriff-web-components.js +161 -157
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/dist/version.js.map +1 -1
- package/package.json +78 -36
- package/web-types.json +58 -33
package/custom-elements.json
CHANGED
|
@@ -3116,7 +3116,13 @@
|
|
|
3116
3116
|
"kind": "field",
|
|
3117
3117
|
"name": "cache",
|
|
3118
3118
|
"privacy": "private",
|
|
3119
|
-
"default": "new Map<string, string
|
|
3119
|
+
"default": "new Map<string, string>()"
|
|
3120
|
+
},
|
|
3121
|
+
{
|
|
3122
|
+
"kind": "field",
|
|
3123
|
+
"name": "pending",
|
|
3124
|
+
"privacy": "private",
|
|
3125
|
+
"default": "new Map<string, Promise<string>>()"
|
|
3120
3126
|
},
|
|
3121
3127
|
{
|
|
3122
3128
|
"kind": "field",
|
|
@@ -6161,6 +6167,16 @@
|
|
|
6161
6167
|
"attribute": "strong",
|
|
6162
6168
|
"reflects": true
|
|
6163
6169
|
},
|
|
6170
|
+
{
|
|
6171
|
+
"kind": "field",
|
|
6172
|
+
"name": "subtle",
|
|
6173
|
+
"type": {
|
|
6174
|
+
"text": "boolean"
|
|
6175
|
+
},
|
|
6176
|
+
"default": "false",
|
|
6177
|
+
"attribute": "subtle",
|
|
6178
|
+
"reflects": true
|
|
6179
|
+
},
|
|
6164
6180
|
{
|
|
6165
6181
|
"kind": "field",
|
|
6166
6182
|
"name": "tall",
|
|
@@ -6189,6 +6205,14 @@
|
|
|
6189
6205
|
"default": "false",
|
|
6190
6206
|
"fieldName": "strong"
|
|
6191
6207
|
},
|
|
6208
|
+
{
|
|
6209
|
+
"name": "subtle",
|
|
6210
|
+
"type": {
|
|
6211
|
+
"text": "boolean"
|
|
6212
|
+
},
|
|
6213
|
+
"default": "false",
|
|
6214
|
+
"fieldName": "subtle"
|
|
6215
|
+
},
|
|
6192
6216
|
{
|
|
6193
6217
|
"name": "tall",
|
|
6194
6218
|
"type": {
|
|
@@ -6252,6 +6276,18 @@
|
|
|
6252
6276
|
"module": "src/sds-text/sds-text.component.ts"
|
|
6253
6277
|
}
|
|
6254
6278
|
},
|
|
6279
|
+
{
|
|
6280
|
+
"name": "subtle",
|
|
6281
|
+
"type": {
|
|
6282
|
+
"text": "boolean"
|
|
6283
|
+
},
|
|
6284
|
+
"default": "false",
|
|
6285
|
+
"fieldName": "subtle",
|
|
6286
|
+
"inheritedFrom": {
|
|
6287
|
+
"name": "SDSTextComponent",
|
|
6288
|
+
"module": "src/sds-text/sds-text.component.ts"
|
|
6289
|
+
}
|
|
6290
|
+
},
|
|
6255
6291
|
{
|
|
6256
6292
|
"name": "tall",
|
|
6257
6293
|
"type": {
|
|
@@ -6294,6 +6330,20 @@
|
|
|
6294
6330
|
"module": "src/sds-text/sds-text.component.ts"
|
|
6295
6331
|
}
|
|
6296
6332
|
},
|
|
6333
|
+
{
|
|
6334
|
+
"kind": "field",
|
|
6335
|
+
"name": "subtle",
|
|
6336
|
+
"type": {
|
|
6337
|
+
"text": "boolean"
|
|
6338
|
+
},
|
|
6339
|
+
"default": "false",
|
|
6340
|
+
"attribute": "subtle",
|
|
6341
|
+
"reflects": true,
|
|
6342
|
+
"inheritedFrom": {
|
|
6343
|
+
"name": "SDSTextComponent",
|
|
6344
|
+
"module": "src/sds-text/sds-text.component.ts"
|
|
6345
|
+
}
|
|
6346
|
+
},
|
|
6297
6347
|
{
|
|
6298
6348
|
"kind": "field",
|
|
6299
6349
|
"name": "tall",
|
package/dist/frameworks/vue.d.ts
CHANGED
|
@@ -1,35 +1,84 @@
|
|
|
1
|
-
import type { DefineComponent } from 'vue';
|
|
1
|
+
import type { DefineComponent, HTMLAttributes, ButtonHTMLAttributes, DetailsHTMLAttributes, DialogHTMLAttributes, InputHTMLAttributes, LiHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'vue';
|
|
2
|
+
import type { SDSAlertProps, SDSButtonProps, SDSCardProps, SDSCheckboxGroupProps, SDSCheckboxProps, SDSChipProps, SDSDetailsGroupProps, SDSDetailProps, SDSDialogProps, SDSEnvironmentBannerProps, SDSHeadingProps, SDSIconProps, SDSInternalHeaderProps, SDSLoaderProps, SDSNotificationProps, SDSPopoverProps, SDSProcessProps, SDSProcessStepProps, SDSRadioGroupProps, SDSRadioProps, SDSSelectProps, SDSStepperProps, SDSStepperStepProps, SDSSwitchProps, SDSTagProps, SDSTextAreaProps, SDSTextFieldProps, SDSTextProps, SDSTooltipProps } from '..';
|
|
3
|
+
type Merge<Base, Props> = Omit<Base, keyof Props> & Props;
|
|
4
|
+
/**
|
|
5
|
+
* Convert kebab-cased to camelCased/
|
|
6
|
+
* E.g. `@sds-remove` converts to an `onSdsRemove` prop, because Vue
|
|
7
|
+
* camelizes listener names that contain no uppercase letters
|
|
8
|
+
*/
|
|
9
|
+
type Camelize<S extends string> = S extends `${infer Head}-${infer Tail}` ? `${Head}${Camelize<Capitalize<Tail>>}` : S;
|
|
10
|
+
/** A component that dispatches no custom events */
|
|
11
|
+
type NoEvents = Record<never, never>;
|
|
12
|
+
/**
|
|
13
|
+
* Type for a handler receives several kinds of events with the same name.
|
|
14
|
+
*/
|
|
15
|
+
type EventFor<DetailOrEvent> = DetailOrEvent extends Event ? DetailOrEvent : CustomEvent<DetailOrEvent>;
|
|
16
|
+
/**
|
|
17
|
+
* Makes our event more Vue-esque by mapping a record of `eventName: detail` to the optional `on*` handler.
|
|
18
|
+
* Covers both the plain-name events (`change`) and the prefixed ones (`sds-remove`).
|
|
19
|
+
*/
|
|
20
|
+
type CustomEventHandlers<Events> = {
|
|
21
|
+
[Name in keyof Events as `on${Capitalize<Camelize<Name & string>>}`]?: (event: EventFor<Events[Name]>) => void;
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* A base type for all of our Sheriff components with props, the standard attributes/events
|
|
25
|
+
* of the closest matching HTML element, and any custom events it dispatches.
|
|
26
|
+
*/
|
|
27
|
+
type SDSCustomElement<Props, Events = NoEvents, Base = HTMLAttributes> = DefineComponent<Merge<Merge<Base, Partial<Props>>, CustomEventHandlers<Events>>>;
|
|
2
28
|
declare module 'vue' {
|
|
3
29
|
interface GlobalComponents {
|
|
4
|
-
'sds-alert':
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
'sds-
|
|
8
|
-
'sds-
|
|
9
|
-
'sds-
|
|
10
|
-
'sds-
|
|
11
|
-
'sds-
|
|
12
|
-
'sds-
|
|
13
|
-
'sds-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
'sds-
|
|
17
|
-
'sds-
|
|
18
|
-
'sds-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
'sds-
|
|
22
|
-
'sds-
|
|
23
|
-
'sds-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
'sds-
|
|
29
|
-
'sds-
|
|
30
|
-
'sds-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
'sds-alert': SDSCustomElement<SDSAlertProps, {
|
|
31
|
+
'sds-remove': void;
|
|
32
|
+
}>;
|
|
33
|
+
'sds-card': SDSCustomElement<SDSCardProps>;
|
|
34
|
+
'sds-environment-banner': SDSCustomElement<SDSEnvironmentBannerProps>;
|
|
35
|
+
'sds-heading': SDSCustomElement<SDSHeadingProps>;
|
|
36
|
+
'sds-icon': SDSCustomElement<SDSIconProps>;
|
|
37
|
+
'sds-internal-header': SDSCustomElement<SDSInternalHeaderProps>;
|
|
38
|
+
'sds-loader': SDSCustomElement<SDSLoaderProps>;
|
|
39
|
+
'sds-notification': SDSCustomElement<SDSNotificationProps, {
|
|
40
|
+
'sds-remove': void;
|
|
41
|
+
}>;
|
|
42
|
+
'sds-tag': SDSCustomElement<SDSTagProps>;
|
|
43
|
+
'sds-text': SDSCustomElement<SDSTextProps>;
|
|
44
|
+
'sds-tooltip': SDSCustomElement<SDSTooltipProps, {
|
|
45
|
+
toggle: CustomEvent<HTMLElement> | ToggleEvent;
|
|
46
|
+
}>;
|
|
47
|
+
'sds-process': SDSCustomElement<SDSProcessProps>;
|
|
48
|
+
'sds-process-step': SDSCustomElement<SDSProcessStepProps, NoEvents, LiHTMLAttributes>;
|
|
49
|
+
'sds-stepper': SDSCustomElement<SDSStepperProps, {
|
|
50
|
+
change: {
|
|
51
|
+
index: number;
|
|
52
|
+
};
|
|
53
|
+
}>;
|
|
54
|
+
'sds-stepper-step': SDSCustomElement<SDSStepperStepProps, NoEvents, LiHTMLAttributes>;
|
|
55
|
+
'sds-popover': SDSCustomElement<SDSPopoverProps>;
|
|
56
|
+
'sds-details': SDSCustomElement<SDSDetailProps, {
|
|
57
|
+
toggle: {
|
|
58
|
+
open: boolean;
|
|
59
|
+
};
|
|
60
|
+
}, DetailsHTMLAttributes>;
|
|
61
|
+
'sds-details-group': SDSCustomElement<SDSDetailsGroupProps>;
|
|
62
|
+
'sds-button': SDSCustomElement<SDSButtonProps, NoEvents, ButtonHTMLAttributes>;
|
|
63
|
+
'sds-dialog': SDSCustomElement<SDSDialogProps, {
|
|
64
|
+
'sds-close': void;
|
|
65
|
+
}, DialogHTMLAttributes>;
|
|
66
|
+
'sds-checkbox': SDSCustomElement<SDSCheckboxProps, NoEvents, InputHTMLAttributes>;
|
|
67
|
+
'sds-checkbox-group': SDSCustomElement<SDSCheckboxGroupProps, {
|
|
68
|
+
'sds-update': void;
|
|
69
|
+
}, InputHTMLAttributes>;
|
|
70
|
+
'sds-chip': SDSCustomElement<SDSChipProps, {
|
|
71
|
+
'sds-remove': void;
|
|
72
|
+
}, InputHTMLAttributes>;
|
|
73
|
+
'sds-radio': SDSCustomElement<SDSRadioProps, NoEvents, InputHTMLAttributes>;
|
|
74
|
+
'sds-radio-group': SDSCustomElement<SDSRadioGroupProps, {
|
|
75
|
+
'sds-update': void;
|
|
76
|
+
}, InputHTMLAttributes>;
|
|
77
|
+
'sds-switch': SDSCustomElement<SDSSwitchProps, NoEvents, InputHTMLAttributes>;
|
|
78
|
+
'sds-textfield': SDSCustomElement<SDSTextFieldProps, NoEvents, InputHTMLAttributes>;
|
|
79
|
+
'sds-select': SDSCustomElement<SDSSelectProps, NoEvents, SelectHTMLAttributes>;
|
|
80
|
+
'sds-textarea': SDSCustomElement<SDSTextAreaProps, NoEvents, TextareaHTMLAttributes>;
|
|
33
81
|
}
|
|
34
82
|
}
|
|
83
|
+
export {};
|
|
35
84
|
//# sourceMappingURL=vue.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/frameworks/vue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/frameworks/vue.ts"],"names":[],"mappings":"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"}
|
|
@@ -27,8 +27,8 @@ export class SDSAlertComponent extends SDSEventDispatcherMixin(SDSElement) {
|
|
|
27
27
|
this._remove = () => {
|
|
28
28
|
this.dispatchSheriffEvent('sds-remove');
|
|
29
29
|
};
|
|
30
|
-
this._renderIcon = (iconName, size
|
|
31
|
-
return staticHtml `<${this.iconTag}
|
|
30
|
+
this._renderIcon = (iconName, size) => {
|
|
31
|
+
return staticHtml `<${this.iconTag} name="${iconName}" size=${size}></${this.iconTag}>`;
|
|
32
32
|
};
|
|
33
33
|
this._renderRemoveButton = (ariaLabel) => {
|
|
34
34
|
return staticHtml `<${this.buttonTag}
|
|
@@ -47,7 +47,7 @@ export class SDSAlertComponent extends SDSEventDispatcherMixin(SDSElement) {
|
|
|
47
47
|
const iconSize = this.variant === 'primary' ? 'md' : this.size ?? 'md';
|
|
48
48
|
const iconName = alertIcons[this.palette] ?? alertIcons['info'];
|
|
49
49
|
return html `<div class="sds-alert">
|
|
50
|
-
<div class="sds-alert__type">${this._renderIcon(iconName, iconSize
|
|
50
|
+
<div class="sds-alert__type">${this._renderIcon(iconName, iconSize)}</div>
|
|
51
51
|
<div class="sds-alert__content">
|
|
52
52
|
<slot name="title"></slot>
|
|
53
53
|
<slot name="message"></slot>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-alert.component.js","sourceRoot":"","sources":["../../src/sds-alert/sds-alert.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAM/E,MAAM,UAAU,GAAiC;IAChD,IAAI,EAAE,oCAAoC;IAC1C,OAAO,EAAE,8BAA8B;IACvC,SAAS,EAAE,yBAAyB;IACpC,MAAM,EAAE,2BAA2B;CACnC,CAAC;AAQF,MAAM,OAAO,iBAAkB,SAAQ,uBAAuB,CAAC,UAAU,CAAC;IAA1E;;QAG4C,YAAO,GAAa,SAAS,CAAC;QAC9B,SAAI,GAAc,IAAI,CAAC;QAEI,YAAO,GAAiB,MAAM,CAAC;QAE3F,YAAO,GAAgB,OAAO,CAAA,UAAU,CAAC;QACzC,cAAS,GAAgB,OAAO,CAAA,YAAY,CAAC;QAEtC,YAAO,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,CAAC;QACzC,CAAC,CAAC;QAEe,gBAAW,GAAG,CAAC,QAAgB,EAAE,IAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"sds-alert.component.js","sourceRoot":"","sources":["../../src/sds-alert/sds-alert.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAM/E,MAAM,UAAU,GAAiC;IAChD,IAAI,EAAE,oCAAoC;IAC1C,OAAO,EAAE,8BAA8B;IACvC,SAAS,EAAE,yBAAyB;IACpC,MAAM,EAAE,2BAA2B;CACnC,CAAC;AAQF,MAAM,OAAO,iBAAkB,SAAQ,uBAAuB,CAAC,UAAU,CAAC;IAA1E;;QAG4C,YAAO,GAAa,SAAS,CAAC;QAC9B,SAAI,GAAc,IAAI,CAAC;QAEI,YAAO,GAAiB,MAAM,CAAC;QAE3F,YAAO,GAAgB,OAAO,CAAA,UAAU,CAAC;QACzC,cAAS,GAAgB,OAAO,CAAA,YAAY,CAAC;QAEtC,YAAO,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,CAAC;QACzC,CAAC,CAAC;QAEe,gBAAW,GAAG,CAAC,QAAgB,EAAE,IAAY,EAAE,EAAE;YACjE,OAAO,UAAU,CAAA,IAAI,IAAI,CAAC,OAAO,UAAU,QAAQ,UAAU,IAAI,MAAM,IAAI,CAAC,OAAO,GAAG,CAAC;QACxF,CAAC,CAAC;QAEe,wBAAmB,GAAG,CAAC,SAAiB,EAAE,EAAE;YAC5D,OAAO,UAAU,CAAA,IAAI,IAAI,CAAC,SAAS;;;;UAI3B,IAAI;UACJ,SAAS;WACR,IAAI,CAAC,OAAO;;IAEnB,IAAI,CAAC,WAAW,CAAC,yBAAyB,EAAE,IAAI,CAAC;MAC/C,IAAI,CAAC,SAAS,GAAG,CAAC;QACvB,CAAC,CAAC;IAeH,CAAC;IAbS,MAAM;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC;QACvE,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC;QAEhE,OAAO,IAAI,CAAA;kCACqB,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC;;;;;KAKjE,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;SACtJ,CAAC;IACT,CAAC;;AA3Ce,wBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAES;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAA+B;AAC9B;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAwB;AACO;IAAxE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAAyB;AAC3B;IAArE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAgC","sourcesContent":["import { html, nothing } from 'lit';\nimport { SDSElement } from '../utils/sds-element';\nimport { property } from 'lit/decorators.js';\nimport { html as staticHtml, literal } from 'lit/static-html.js';\nimport type { StaticValue } from 'lit-html/static.js';\nimport { styles } from './sds-alert.styles';\nimport { SDS_VARIANTS, SDS_SIZES } from '../types';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\n\ntype ColorPalette = 'info' | 'success' | 'attention' | 'danger';\ntype Variants = Extract<SDS_VARIANTS, 'primary' | 'secondary'>;\ntype AlertSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nconst alertIcons: Record<ColorPalette, string> = {\n\tinfo: 'InformationSquareFill-aksel-filled',\n\tsuccess: 'check_circle-material-filled',\n\tattention: 'warning-material-filled',\n\tdanger: 'dangerous-material-filled',\n};\n\nexport interface SDSAlertProps {\n\tvariant?: Variants;\n\tsize?: AlertSize;\n\t'removable-label'?: string;\n}\n\nexport class SDSAlertComponent extends SDSEventDispatcherMixin(SDSElement) {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) variant: Variants = 'primary';\n\t@property({ type: String, reflect: true }) size: AlertSize = 'md';\n\t@property({ type: String, attribute: 'removable-label', reflect: true }) removableLabel?: string;\n\t@property({ type: String, attribute: 'data-palette', reflect: true }) palette: ColorPalette = 'info';\n\n\tprotected iconTag: StaticValue = literal`sds-icon`;\n\tprotected buttonTag: StaticValue = literal`sds-button`;\n\n\tprivate readonly _remove = () => {\n\t\tthis.dispatchSheriffEvent('sds-remove');\n\t};\n\n\tprivate readonly _renderIcon = (iconName: string, size: string) => {\n\t\treturn staticHtml`<${this.iconTag} name=\"${iconName}\" size=${size}></${this.iconTag}>`;\n\t};\n\n\tprivate readonly _renderRemoveButton = (ariaLabel: string) => {\n\t\treturn staticHtml`<${this.buttonTag}\n\t\tclass=\"sds-alert__remove-btn\"\n\t\tvariant=\"tertiary\"\n\t\tsize=\"sm\"\n\t\t?icon=${true}\n\t\tlabel=${ariaLabel}\n\t\t@click=${this._remove}\n\t\t>\n\t\t${this._renderIcon('close-material-outlined', 'sm')}\n\t\t</${this.buttonTag}>`;\n\t};\n\n\toverride render() {\n\t\tconst iconSize = this.variant === 'primary' ? 'md' : this.size ?? 'md';\n\t\tconst iconName = alertIcons[this.palette] ?? alertIcons['info'];\n\n\t\treturn html`<div class=\"sds-alert\">\n\t\t\t<div class=\"sds-alert__type\">${this._renderIcon(iconName, iconSize)}</div>\n\t\t\t<div class=\"sds-alert__content\">\n\t\t\t\t<slot name=\"title\"></slot>\n\t\t\t\t<slot name=\"message\"></slot>\n\t\t\t</div>\n\t\t\t${this.removableLabel && this.variant === 'primary' ? html`<div class=\"sds-alert__actions\">${this._renderRemoveButton(this.removableLabel)}</div>` : nothing}\n\t\t</div>`;\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-alert.styles.d.ts","sourceRoot":"","sources":["../../src/sds-alert/sds-alert.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-alert.styles.d.ts","sourceRoot":"","sources":["../../src/sds-alert/sds-alert.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgLlB,CAAC"}
|
|
@@ -90,12 +90,6 @@ export const styles = css `
|
|
|
90
90
|
--sds-button-text-color: var(--_sds-alert-text-color);
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
.sds-alert__icon {
|
|
94
|
-
display: block;
|
|
95
|
-
position: relative;
|
|
96
|
-
z-index: 1;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
93
|
:host([variant='secondary']) {
|
|
100
94
|
--_sds-alert-background-color: var(--sds-alert-background-color, transparent);
|
|
101
95
|
--_sds-alert-border-color: var(--sds-alert-border-color, transparent);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-alert.styles.js","sourceRoot":"","sources":["../../src/sds-alert/sds-alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"sds-alert.styles.js","sourceRoot":"","sources":["../../src/sds-alert/sds-alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-info-surface-tinted));\n\n\t\t--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-info-border-default));\n\t\t--_sds-alert-border-radius: var(--sds-alert-border-radius, var(--sds-radius-sm));\n\t\t--_sds-alert-border-width: var(--sds-alert-border-width, var(--sds-border-sm));\n\n\t\t--_sds-alert-column-gap: var(--sds-alert-column-gap, var(--sds-spacing-2xs));\n\t\t--_sds-alert-content-gap: var(--sds-alert-content-gap, var(--sds-spacing-3xs));\n\n\t\t--_sds-alert-font-family: var(--sds-alert-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-info-text-default));\n\n\t\t--_sds-alert-font-size: var(--sds-alert-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-alert-font-weight: var(--sds-alert-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-tall-content-md));\n\n\t\t--_sds-alert-title-font-size: var(--sds-alert-title-font-size, var(--sds-components-font-size-title-md));\n\t\t--_sds-alert-title-font-weight: var(--sds-alert-title-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t--_sds-alert-title-line-height: var(--sds-alert-title-line-height, var(--sds-components-line-height-tall-title-md));\n\n\t\t--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-info-text-subtle));\n\t\t--_sds-alert-icon-color-background: var(--sds-alert-icon-color-background, var(--sds-color-action-contrast-default, white));\n\t\t--_sds-alert-max-line-width: var(--sds-alert-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-alert-padding: var(--sds-alert-padding, var(--sds-spacing-sm));\n\n\t\t--sds-icon-color: var(--sds-alert-icon-color, var(--_sds-alert-icon-color));\n\n\t\tdisplay: block;\n\t}\n\n\t.sds-alert {\n\t\tdisplay: flex;\n\t\tgap: var(--_sds-alert-column-gap);\n\t\tpadding: var(--_sds-alert-padding);\n\t\tbackground-color: var(--_sds-alert-background-color);\n\t\tborder: var(--_sds-alert-border-width) solid var(--_sds-alert-border-color);\n\t\tborder-radius: var(--_sds-alert-border-radius);\n\t\tcolor: var(--_sds-alert-text-color);\n\t\tfont-family: var(--_sds-alert-font-family);\n\t\ttext-align: left;\n\t}\n\n\t:host([data-palette='success']) {\n\t\t--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-success-text-subtle));\n\t\t--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-success-border-default));\n\t\t--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-success-surface-tinted));\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-success-text-default));\n\t}\n\n\t:host([data-palette='danger']) {\n\t\t--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-danger-text-subtle));\n\t\t--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-danger-border-default));\n\t\t--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-danger-surface-tinted));\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-danger-text-default));\n\t}\n\n\t:host([data-palette='attention']) {\n\t\t--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-attention-text-subtle));\n\t\t--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-attention-border-default));\n\t\t--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-attention-surface-tinted));\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-attention-text-default));\n\t}\n\n\t:host([data-palette='warning']) {\n\t\t--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-warning-text-subtle));\n\t\t--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-warning-border-default));\n\t\t--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-warning-surface-tinted));\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-warning-text-default));\n\t}\n\n\t.sds-alert__type {\n\t\tcolor: var(--_sds-alert-icon-color);\n\t\tdisplay: flex;\n\t\talign-items: start;\n\t\tflex-wrap: wrap;\n\t}\n\n\t.sds-alert__content {\n\t\talign-self: center;\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t\tflex-direction: column;\n\t}\n\n\t.sds-alert__actions {\n\t\t--sds-button-padding-inline: 0;\n\t\t--sds-button-text-color: var(--_sds-alert-text-color);\n\t}\n\n\t:host([variant='secondary']) {\n\t\t--_sds-alert-background-color: var(--sds-alert-background-color, transparent);\n\t\t--_sds-alert-border-color: var(--sds-alert-border-color, transparent);\n\t\t--_sds-alert-border-width: var(--sds-alert-border-width, 0);\n\t\t--_sds-alert-padding: var(--sds-alert-padding, 0);\n\t\t--_sds-alert-column-gap: var(--sds-alert-column-gap, var(--sds-spacing-3xs));\n\t\t--_sds-alert-content-gap: var(--sds-alert-content-gap, var(--sds-spacing-4xs));\n\n\t\t--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-alert-font-weight: var(--sds-alert-font-weight, var(--sds-typography-body-md-tall-desktop-font-weight));\n\n\t\tposition: relative;\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: 4px;\n\t\t\tleft: 4px;\n\t\t\twidth: 16px;\n\t\t\theight: 16px;\n\t\t\tbackground-color: var(--_sds-alert-icon-color-background);\n\t\t\tz-index: -1;\n\t\t\tclip-path: circle(50%);\n\t\t}\n\n\t\t&:host([size='sm'])::after {\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t}\n\t}\n\n\t:host([variant='secondary']):host([data-palette='attention']) {\n\t\t--sds-icon-color: var(--sds-alert-icon-color, var(--sds-color-action-default));\n\n\t\t&::after {\n\t\t\ttop: 4px;\n\t\t\tleft: 2px;\n\t\t\twidth: 20px;\n\t\t\theight: 16px;\n\t\t\tclip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n\t\t}\n\t}\n\n\t:host([variant='secondary']):host([size='sm']) {\n\t\t--_sds-alert-font-size: var(--sds-alert-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-tall-content-sm));\n\t\t--_sds-alert-title-font-size: var(--sds-alert-title-font-size, var(--sds-components-font-size-title-sm));\n\t\t--_sds-alert-title-line-height: var(--sds-alert-title-line-height, var(--sds-components-line-height-tall-title-sm));\n\t}\n\n\t:host([variant='secondary']):host([size='md']) {\n\t\t--_sds-alert-font-size: var(--sds-alert-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-alert-title-font-size: var(--sds-alert-title-font-size, var(--sds-components-font-size-title-md));\n\t\t--_sds-alert-title-line-height: var(--sds-alert-title-line-height, var(--sds-components-line-height-tall-title-md));\n\t}\n\n\t:host([variant='secondary']):host([size='lg']) {\n\t\t--_sds-alert-font-size: var(--sds-alert-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-tall-content-lg));\n\t\t--_sds-alert-title-font-size: var(--sds-alert-title-font-size, var(--sds-components-font-size-title-lg));\n\t\t--_sds-alert-title-line-height: var(--sds-alert-title-line-height, var(--sds-components-line-height-tall-title-lg));\n\t}\n\n\t::slotted([slot='title']),\n\t::slotted(:is(h1, h2, h3, h4, h5, h6)) {\n\t\tcolor: var(--_sds-alert-text-color) !important;\n\t\tfont-size: var(--_sds-alert-title-font-size) !important;\n\t\tfont-style: normal !important;\n\t\tfont-weight: var(--_sds-alert-title-font-weight) !important;\n\t\tline-height: var(--_sds-alert-title-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--_sds-alert-max-line-width) !important;\n\t}\n\n\t::slotted([slot='message']),\n\t::slotted(:is(p)) {\n\t\tcolor: var(--_sds-alert-text-color) !important;\n\t\tfont-size: var(--_sds-alert-font-size) !important;\n\t\tfont-style: normal !important;\n\t\tfont-weight: var(--_sds-alert-font-weight) !important;\n\t\tline-height: var(--_sds-alert-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--_sds-alert-max-line-width) !important;\n\t}\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.component.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIlD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAInD,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,aAAa,GAAG,YAAY,GAAG,UAAU,CAAC;AAC/C,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AACxF,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,cAAc;IAC9B,OAAO,CAAC,EAAE,OAAO,GAAG,eAAe,GAAG,YAAY,CAAC;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IACjD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,aAAa,CAAC;CACxB;;AAED,qBAAa,kBAAmB,SAAQ,uBAA6G;IACpJ,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAE5C,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAE0C,QAAQ,EAAE,OAAO,CAAS;IAC1B,IAAI,EAAE,OAAO,CAAS;IACtB,QAAQ,EAAE,OAAO,CAAS;IAC1B,OAAO,EAAE,OAAO,CAAS;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,CAAQ;IACxB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,UAAU,CAAY;IAC5B,KAAK,EAAE,MAAM,CAAM;IACnB,OAAO,EAAE,aAAa,CAAa;IACnC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAa;IAE9D,OAAO,EAAG,iBAAiB,CAAC;;IAOtC,OAAO,CAAC,OAAO,EAAE,cAAc;IASxC,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,yBAAyB;IAKjC,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,QAAQ,CAAC,YAAY,CAsB3B;IAEO,MAAM;CAgCf"}
|
|
1
|
+
{"version":3,"file":"sds-button.component.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIlD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAInD,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,aAAa,GAAG,YAAY,GAAG,UAAU,CAAC;AAC/C,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AACxF,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,cAAc;IAC9B,OAAO,CAAC,EAAE,OAAO,GAAG,eAAe,GAAG,YAAY,CAAC;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IACjD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,aAAa,CAAC;CACxB;;AAED,qBAAa,kBAAmB,SAAQ,uBAA6G;IACpJ,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAE5C,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAE0C,QAAQ,EAAE,OAAO,CAAS;IAC1B,IAAI,EAAE,OAAO,CAAS;IACtB,QAAQ,EAAE,OAAO,CAAS;IAC1B,OAAO,EAAE,OAAO,CAAS;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,CAAQ;IACxB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,UAAU,CAAY;IAC5B,KAAK,EAAE,MAAM,CAAM;IACnB,OAAO,EAAE,aAAa,CAAa;IACnC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAa;IAE9D,OAAO,EAAG,iBAAiB,CAAC;;IAOtC,OAAO,CAAC,OAAO,EAAE,cAAc;IASxC,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,yBAAyB;IAKjC,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,QAAQ,CAAC,YAAY,CAsB3B;IAEO,MAAM;CAgCf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.component.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues, html, nothing } from 'lit';\nimport { SDSElement } from '../utils/sds-element';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { SDS_SIZES, SDS_VARIANTS } from '../types';\nimport { styles } from './sds-button.styles';\nimport { SDSEventDispatcherMixin, SDSDelegateInteractionMixin, SDSDialogTargetMixin, SDSPopoverTargetMixin } from '../mixins';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\ntype ButtonVariant = SDS_VARIANTS | 'critical';\ntype ButtonSize = 'large' | 'medium' | 'small' | Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\ntype TargetTypes = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface SDSButtonProps {\n\tcommand?: 'close' | 'request-close' | 'show-modal';\n\tcommandFor?: string;\n\tdisabled?: boolean;\n\tform?: string;\n\thref?: string;\n\ticon?: boolean;\n\tinverted?: boolean;\n\tloading?: boolean;\n\tname?: string;\n\tpopoverTarget?: string;\n\tpopoverTargetAction?: 'hide' | 'show' | 'toggle';\n\tsize?: ButtonSize;\n\ttarget?: TargetTypes;\n\ttype?: ButtonType;\n\tvalue?: string;\n\tvariant?: ButtonVariant;\n}\n\nexport class SDSButtonComponent extends SDSDialogTargetMixin(SDSPopoverTargetMixin(SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSElement)))) {\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\tstatic override shadowRootOptions: ShadowRootInit = {\n\t\t...SDSElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t};\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, reflect: true }) icon: boolean = false;\n\t@property({ type: Boolean, reflect: true }) inverted: boolean = false;\n\t@property({ type: Boolean, reflect: true }) loading: boolean = false;\n\t@property({ type: String, reflect: true }) form?: string;\n\t@property({ type: String, reflect: true }) href?: string;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) size: ButtonSize = 'lg';\n\t@property({ type: String, reflect: true }) target?: TargetTypes;\n\t@property({ type: String, reflect: true }) type: ButtonType = 'button';\n\t@property({ type: String, reflect: true }) value: string = '';\n\t@property({ type: String, reflect: true }) variant: ButtonVariant = 'primary';\n\t@property({ type: String, reflect: true }) label: string | undefined = undefined;\n\n\t@query('#control') control!: HTMLButtonElement;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t}\n\n\toverride updated(changed: PropertyValues) {\n\t\tsuper.updated(changed);\n\n\t\t// Cast critical variant to danger palette to prevent breaking changes\n\t\tif (changed.has('variant') && this.variant === 'critical') {\n\t\t\tthis.setAttribute('data-palette', 'danger');\n\t\t}\n\t}\n\n\tprivate _resolveForm(): HTMLFormElement | null {\n\t\tif (this.form) {\n\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\treturn root.querySelector<HTMLFormElement>(`form#${this.form}`);\n\t\t}\n\t\treturn this.internals.form;\n\t}\n\n\t// For popover triggers, let the browser handle the toggle natively.\n\t// Stop propagation and re-dispatch a composed click for listeners on the host.\n\tprivate _handlePopoverClick(event: MouseEvent): void {\n\t\tevent.stopImmediatePropagation();\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\t\tthis.dispatchSheriffEvent('click');\n\t}\n\n\t// For dialog commands, emulate the native commandfor/command behavior on the host.\n\t// Stop propagation and re-dispatch a composed click for listeners on the host.\n\tprivate _handleDialogCommandClick(): void {\n\t\tthis.runDialogCommand();\n\t\tthis.dispatchSheriffEvent('click');\n\t}\n\n\tprivate _handleSubmitClick(): void {\n\t\tif (this.dispatchSheriffEvent('submit')) {\n\t\t\tthis._resolveForm()?.requestSubmit();\n\t\t}\n\t}\n\n\tprivate _handleResetClick(): void {\n\t\tif (this.dispatchSheriffEvent('reset')) {\n\t\t\tthis._resolveForm()?.reset();\n\t\t}\n\t}\n\n\tprivate readonly _handleClick = (event: MouseEvent) => {\n\t\tif (this.popoverTarget) {\n\t\t\tthis._handlePopoverClick(event);\n\t\t\treturn;\n\t\t}\n\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.effectiveCommandFor && this.effectiveCommand) {\n\t\t\tthis._handleDialogCommandClick();\n\t\t\treturn;\n\t\t} else if (this.type === 'submit') {\n\t\t\tthis._handleSubmitClick();\n\t\t} else if (this.type === 'reset') {\n\t\t\tthis._handleResetClick();\n\t\t} else {\n\t\t\tthis.dispatchSheriffEvent('click');\n\t\t}\n\t};\n\n\toverride render() {\n\t\tconst buttonClasses = {\n\t\t\t'sds-button': true,\n\t\t\t'sds-button--as-link': !!this.href,\n\t\t};\n\n\t\tif (this.href) {\n\t\t\treturn html` <a id=\"link\" class=\"${classMap(buttonClasses)}\" href=\"${this.href}\" target=\"${ifDefined(this.target)}\">\n\t\t\t\t<slot name=\"before\"></slot>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"after\"></slot>\n\t\t\t</a>`;\n\t\t}\n\n\t\treturn html`\n\t\t\t<button\n\t\t\t\tid=\"control\"\n\t\t\t\tform=\"${ifDefined(this.form)}\"\n\t\t\t\tclass=\"${classMap(buttonClasses)}\"\n\t\t\t\ttype=\"${this.type}\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t@click=\"${this._handleClick}\"\n\t\t\t\taria-label=\"${ifDefined(this.label)}\"\n\t\t\t>\n\t\t\t\t${this.loading ? html`<sds-loader slot=\"before\" ?contrast=\"${this.inverted || this.variant !== 'primary'}\"></sds-loader>` : nothing} ${this.loading ? nothing : html`<slot name=\"before\"></slot>`}\n\t\t\t\t<slot></slot>\n\t\t\t\t${this.loading ? nothing : html`<slot name=\"after\"></slot>`}\n\t\t\t</button>\n\t\t`;\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sds-button.component.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues, html, nothing } from 'lit';\nimport { SDSElement } from '../utils/sds-element';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { SDS_SIZES, SDS_VARIANTS } from '../types';\nimport { styles } from './sds-button.styles';\nimport { SDSEventDispatcherMixin, SDSDelegateInteractionMixin, SDSDialogTargetMixin, SDSPopoverTargetMixin } from '../mixins';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\ntype ButtonVariant = SDS_VARIANTS | 'critical';\ntype ButtonSize = 'large' | 'medium' | 'small' | Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\ntype TargetTypes = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface SDSButtonProps {\n\tcommand?: 'close' | 'request-close' | 'show-modal';\n\tcommandFor?: string;\n\tdisabled?: boolean;\n\tform?: string;\n\thref?: string;\n\ticon?: boolean;\n\tinverted?: boolean;\n\tlabel?: string;\n\tloading?: boolean;\n\tname?: string;\n\tpopoverTarget?: string;\n\tpopoverTargetAction?: 'hide' | 'show' | 'toggle';\n\tsize?: ButtonSize;\n\ttarget?: TargetTypes;\n\ttype?: ButtonType;\n\tvalue?: string;\n\tvariant?: ButtonVariant;\n}\n\nexport class SDSButtonComponent extends SDSDialogTargetMixin(SDSPopoverTargetMixin(SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSElement)))) {\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\tstatic override shadowRootOptions: ShadowRootInit = {\n\t\t...SDSElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t};\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, reflect: true }) icon: boolean = false;\n\t@property({ type: Boolean, reflect: true }) inverted: boolean = false;\n\t@property({ type: Boolean, reflect: true }) loading: boolean = false;\n\t@property({ type: String, reflect: true }) form?: string;\n\t@property({ type: String, reflect: true }) href?: string;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) size: ButtonSize = 'lg';\n\t@property({ type: String, reflect: true }) target?: TargetTypes;\n\t@property({ type: String, reflect: true }) type: ButtonType = 'button';\n\t@property({ type: String, reflect: true }) value: string = '';\n\t@property({ type: String, reflect: true }) variant: ButtonVariant = 'primary';\n\t@property({ type: String, reflect: true }) label: string | undefined = undefined;\n\n\t@query('#control') control!: HTMLButtonElement;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t}\n\n\toverride updated(changed: PropertyValues) {\n\t\tsuper.updated(changed);\n\n\t\t// Cast critical variant to danger palette to prevent breaking changes\n\t\tif (changed.has('variant') && this.variant === 'critical') {\n\t\t\tthis.setAttribute('data-palette', 'danger');\n\t\t}\n\t}\n\n\tprivate _resolveForm(): HTMLFormElement | null {\n\t\tif (this.form) {\n\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\treturn root.querySelector<HTMLFormElement>(`form#${this.form}`);\n\t\t}\n\t\treturn this.internals.form;\n\t}\n\n\t// For popover triggers, let the browser handle the toggle natively.\n\t// Stop propagation and re-dispatch a composed click for listeners on the host.\n\tprivate _handlePopoverClick(event: MouseEvent): void {\n\t\tevent.stopImmediatePropagation();\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\t\tthis.dispatchSheriffEvent('click');\n\t}\n\n\t// For dialog commands, emulate the native commandfor/command behavior on the host.\n\t// Stop propagation and re-dispatch a composed click for listeners on the host.\n\tprivate _handleDialogCommandClick(): void {\n\t\tthis.runDialogCommand();\n\t\tthis.dispatchSheriffEvent('click');\n\t}\n\n\tprivate _handleSubmitClick(): void {\n\t\tif (this.dispatchSheriffEvent('submit')) {\n\t\t\tthis._resolveForm()?.requestSubmit();\n\t\t}\n\t}\n\n\tprivate _handleResetClick(): void {\n\t\tif (this.dispatchSheriffEvent('reset')) {\n\t\t\tthis._resolveForm()?.reset();\n\t\t}\n\t}\n\n\tprivate readonly _handleClick = (event: MouseEvent) => {\n\t\tif (this.popoverTarget) {\n\t\t\tthis._handlePopoverClick(event);\n\t\t\treturn;\n\t\t}\n\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.effectiveCommandFor && this.effectiveCommand) {\n\t\t\tthis._handleDialogCommandClick();\n\t\t\treturn;\n\t\t} else if (this.type === 'submit') {\n\t\t\tthis._handleSubmitClick();\n\t\t} else if (this.type === 'reset') {\n\t\t\tthis._handleResetClick();\n\t\t} else {\n\t\t\tthis.dispatchSheriffEvent('click');\n\t\t}\n\t};\n\n\toverride render() {\n\t\tconst buttonClasses = {\n\t\t\t'sds-button': true,\n\t\t\t'sds-button--as-link': !!this.href,\n\t\t};\n\n\t\tif (this.href) {\n\t\t\treturn html` <a id=\"link\" class=\"${classMap(buttonClasses)}\" href=\"${this.href}\" target=\"${ifDefined(this.target)}\">\n\t\t\t\t<slot name=\"before\"></slot>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"after\"></slot>\n\t\t\t</a>`;\n\t\t}\n\n\t\treturn html`\n\t\t\t<button\n\t\t\t\tid=\"control\"\n\t\t\t\tform=\"${ifDefined(this.form)}\"\n\t\t\t\tclass=\"${classMap(buttonClasses)}\"\n\t\t\t\ttype=\"${this.type}\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t@click=\"${this._handleClick}\"\n\t\t\t\taria-label=\"${ifDefined(this.label)}\"\n\t\t\t>\n\t\t\t\t${this.loading ? html`<sds-loader slot=\"before\" ?contrast=\"${this.inverted || this.variant !== 'primary'}\"></sds-loader>` : nothing} ${this.loading ? nothing : html`<slot name=\"before\"></slot>`}\n\t\t\t\t<slot></slot>\n\t\t\t\t${this.loading ? nothing : html`<slot name=\"after\"></slot>`}\n\t\t\t</button>\n\t\t`;\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-details.styles.d.ts","sourceRoot":"","sources":["../../src/sds-details/sds-details.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-details.styles.d.ts","sourceRoot":"","sources":["../../src/sds-details/sds-details.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA0IlB,CAAC"}
|
|
@@ -4,13 +4,13 @@ export const styles = css `
|
|
|
4
4
|
--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));
|
|
5
5
|
|
|
6
6
|
--_sds-details-summary-padding: var(--sds-details-summary-padding, var(--sds-spacing-xs));
|
|
7
|
-
--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));
|
|
7
|
+
--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));
|
|
8
8
|
--_sds-details-summary-gap: var(--sds-details-summary-gap, var(--sds-spacing-3xs));
|
|
9
9
|
--_sds-details-summary-border-radius: var(--sds-details-summary-border-radius, 0);
|
|
10
10
|
|
|
11
11
|
--_sds-details-content-padding-start: var(--sds-details-content-padding-start, calc(var(--_sds-details-summary-padding) + var(--_sds-details-summary-gap) + var(--sds-components-icon-md)));
|
|
12
12
|
--_sds-details-content-padding: var(--sds-details-content-padding, var(--sds-spacing-xs));
|
|
13
|
-
--_sds-details-content-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));
|
|
13
|
+
--_sds-details-content-background-color: var(--sds-details-content-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));
|
|
14
14
|
|
|
15
15
|
--_sds-details-focus-outline-size: var(--sds-details-focus-outline-size, var(--sds-details-focus-outline-width, var(--sds-color-states-focus-outline-size)));
|
|
16
16
|
--_sds-details-focus-color: var(--sds-details-focus-color, var(--sds-details-focus-outline-color, var(--sds-color-states-focus-outer)));
|
|
@@ -18,6 +18,7 @@ export const styles = css `
|
|
|
18
18
|
--_sds-details-focus-inner-color: var(--sds-details-focus-inner-color, var(--sds-color-states-focus-inner));
|
|
19
19
|
|
|
20
20
|
--_sds-details-icon-transition: var(--sds-details-icon-transition, transform 0.2s ease);
|
|
21
|
+
--_sds-details-icon-color: var(--sds-details-icon-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));
|
|
21
22
|
|
|
22
23
|
--_sds-details-border-color: var(--sds-details-border-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));
|
|
23
24
|
--_sds-details-border-bottom: var(--sds-details-border-bottom, solid 1px var(--_sds-details-border-color));
|
|
@@ -70,6 +71,7 @@ export const styles = css `
|
|
|
70
71
|
}
|
|
71
72
|
|
|
72
73
|
.sds-details__summary {
|
|
74
|
+
--sds-icon-color: var(--_sds-details-icon-color);
|
|
73
75
|
cursor: pointer;
|
|
74
76
|
display: flex;
|
|
75
77
|
align-items: center;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-details.styles.js","sourceRoot":"","sources":["../../src/sds-details/sds-details.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"sds-details.styles.js","sourceRoot":"","sources":["../../src/sds-details/sds-details.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0IxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\t--_sds-details-summary-padding: var(--sds-details-summary-padding, var(--sds-spacing-xs));\n\t\t--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t\t--_sds-details-summary-gap: var(--sds-details-summary-gap, var(--sds-spacing-3xs));\n\t\t--_sds-details-summary-border-radius: var(--sds-details-summary-border-radius, 0);\n\n\t\t--_sds-details-content-padding-start: var(--sds-details-content-padding-start, calc(var(--_sds-details-summary-padding) + var(--_sds-details-summary-gap) + var(--sds-components-icon-md)));\n\t\t--_sds-details-content-padding: var(--sds-details-content-padding, var(--sds-spacing-xs));\n\t\t--_sds-details-content-background-color: var(--sds-details-content-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\n\t\t--_sds-details-focus-outline-size: var(--sds-details-focus-outline-size, var(--sds-details-focus-outline-width, var(--sds-color-states-focus-outline-size)));\n\t\t--_sds-details-focus-color: var(--sds-details-focus-color, var(--sds-details-focus-outline-color, var(--sds-color-states-focus-outer)));\n\t\t--_sds-details-focus-spacing: var(--sds-details-focus-spacing, var(--sds-details-focus-outline-offset, var(--sds-color-states-focus-spacing)));\n\t\t--_sds-details-focus-inner-color: var(--sds-details-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-details-icon-transition: var(--sds-details-icon-transition, transform 0.2s ease);\n\t\t--_sds-details-icon-color: var(--sds-details-icon-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\t--_sds-details-border-color: var(--sds-details-border-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t\t--_sds-details-border-bottom: var(--sds-details-border-bottom, solid 1px var(--_sds-details-border-color));\n\t\t--_sds-details-border-top: var(--sds-details-border-top, solid 1px var(--_sds-details-border-color));\n\t\t--_sds-details-border-standalone: var(--sds-details-border-standalone, solid 1px var(--_sds-details-border-color));\n\t\t--_sds-details-border-radius: var(--sds-details-border-radius, var(--sds-radius-md));\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\t\t--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t}\n\n\t.sds-details {\n\t\tcolor: var(--_sds-details-text-color);\n\n\t\t&:is([open]) {\n\t\t\t--_sds-details-summary-background-color: var(----_sds-details-summary-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));\n\t\t}\n\n\t\t&:not([data-standalone]) {\n\t\t\tborder-top: var(--_sds-details-border-top);\n\t\t\tborder-bottom: var(--_sds-details-border-bottom);\n\t\t}\n\n\t\t/* Setting the border on the summary element preserves the border\n\t\t when the element has focus\n\t\t*/\n\t\t&:is([data-standalone]) {\n\t\t\tsummary {\n\t\t\t\tborder-radius: var(--_sds-details-border-radius);\n\t\t\t\tborder: var(--_sds-details-border-standalone);\n\t\t\t}\n\n\t\t\t&:is([open]) {\n\t\t\t\t& summary {\n\t\t\t\t\tborder-bottom-left-radius: 0px;\n\t\t\t\t\tborder-bottom-right-radius: 0px;\n\t\t\t\t}\n\n\t\t\t\t& .sds-details__content {\n\t\t\t\t\tborder-left: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-right: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-bottom: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-bottom-left-radius: var(--_sds-details-border-radius);\n\t\t\t\t\tborder-bottom-right-radius: var(--_sds-details-border-radius);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-details__summary {\n\t\t--sds-icon-color: var(--_sds-details-icon-color);\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: var(--_sds-details-summary-padding);\n\t\tbackground-color: var(--_sds-details-summary-background-color);\n\t\tborder-radius: var(--_sds-details-summary-border-radius);\n\t\tgap: var(--_sds-details-summary-gap);\n\t\tlist-style: none;\n\t\tuser-select: none;\n\n\t\t&:hover {\n\t\t\t--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--_sds-details-focus-spacing) var(--_sds-details-focus-inner-color);\n\t\t\toutline: var(--_sds-details-focus-outline-size) solid var(--_sds-details-focus-color);\n\t\t\toutline-offset: var(--_sds-details-focus-spacing);\n\t\t}\n\t}\n\n\t.sds-details__summary-content {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t}\n\n\tsds-icon {\n\t\ttransition: var(--_sds-details-icon-transition);\n\t}\n\n\t.sds-details:not([open]) sds-icon {\n\t\ttransform: rotate(180deg);\n\t}\n\n\t.sds-details__content {\n\t\tpadding: var(--_sds-details-content-padding);\n\t\tpadding-inline-start: var(--_sds-details-content-padding-start);\n\t}\n\n\t@media (prefers-reduced-motion: no-preference) {\n\t\t.sds-details__content {\n\t\t\tanimation: show-content-keyframes 200ms ease-in-out;\n\t\t}\n\t}\n\n\t@keyframes show-content-keyframes {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(-0.5rem);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t::slotted([slot='summary']) {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t}\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-dialog.styles.d.ts","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-dialog.styles.d.ts","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwHlB,CAAC"}
|
|
@@ -10,6 +10,7 @@ export const styles = css `
|
|
|
10
10
|
|
|
11
11
|
--_sds-dialog-max-width: var(--sds-dialog-max-width, min(60ch, 100vw));
|
|
12
12
|
--_sds-dialog-max-height: var(--sds-dialog-max-height, calc(100dvh - var(--sds-spacing-lg)));
|
|
13
|
+
--_sds-dialog-min-width: var(--sds-dialog-min-width, auto);
|
|
13
14
|
|
|
14
15
|
--_sds-dialog-margin: var(--sds-dialog-margin, auto);
|
|
15
16
|
--_sds-dialog-padding-block: var(--sds-dialog-padding-block, var(--sds-spacing-sm));
|
|
@@ -42,6 +43,7 @@ export const styles = css `
|
|
|
42
43
|
|
|
43
44
|
font-family: var(--_sds-dialog-font-family);
|
|
44
45
|
|
|
46
|
+
min-width: var(--_sds-dialog-min-width);
|
|
45
47
|
max-width: var(--_sds-dialog-max-width);
|
|
46
48
|
max-height: var(--_sds-dialog-max-height);
|
|
47
49
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-dialog.styles.js","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"sds-dialog.styles.js","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-dialog-background-color: var(--sds-dialog-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t\t--_sds-dialog-backdrop-color: var(--sds-dialog-backdrop-color, rgba(0, 0, 0, 0.5));\n\n\t\t--_sds-dialog-border-color: var(--sds-dialog-border-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t\t--_sds-dialog-border-radius: var(--sds-dialog-border-radius, var(--sds-radius-md));\n\t\t--_sds-dialog-border-width: var(--sds-dialog-border-width, var(--sds-border-sm));\n\n\t\t--_sds-dialog-max-width: var(--sds-dialog-max-width, min(60ch, 100vw));\n\t\t--_sds-dialog-max-height: var(--sds-dialog-max-height, calc(100dvh - var(--sds-spacing-lg)));\n\t\t--_sds-dialog-min-width: var(--sds-dialog-min-width, auto);\n\n\t\t--_sds-dialog-margin: var(--sds-dialog-margin, auto);\n\t\t--_sds-dialog-padding-block: var(--sds-dialog-padding-block, var(--sds-spacing-sm));\n\t\t--_sds-dialog-padding-inline: var(--sds-dialog-padding-inline, var(--sds-spacing-sm));\n\t\t--_sds-dialog-gap: var(--sds-dialog-gap, var(--sds-spacing-xs));\n\n\t\t--_sds-dialog-font-family: var(--sds-dialog-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-dialog-text-color: var(--sds-dialog-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\t--_sds-dialog-box-shadow: var(--sds-dialog-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));\n\n\t\t--_sds-dialog-animation-duration: var(--sds-dialog-animation-duration, 200ms);\n\t\t--_sds-dialog-close-button-offset: var(--sds-dialog-close-button-offset, var(--sds-spacing-3xs));\n\n\t\t--_sds-dialog-focus-color: var(--sds-dialog-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-dialog-focus-inner-color: var(--sds-dialog-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-dialog-focus-spacing: var(--sds-dialog-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-dialog-focus-outline-size: var(--sds-dialog-focus-outline-size, var(--sds-color-states-focus-outline-size));\n\n\t\tdisplay: contents;\n\t}\n\n\tdialog {\n\t\tcolor: var(--_sds-dialog-text-color);\n\t\tbackground-color: var(--_sds-dialog-background-color);\n\t\tbox-shadow: var(--_sds-dialog-box-shadow);\n\n\t\tborder: var(--_sds-dialog-border-width) solid var(--_sds-dialog-border-color);\n\t\tborder-radius: var(--_sds-dialog-border-radius);\n\n\t\tfont-family: var(--_sds-dialog-font-family);\n\n\t\tmin-width: var(--_sds-dialog-min-width);\n\t\tmax-width: var(--_sds-dialog-max-width);\n\t\tmax-height: var(--_sds-dialog-max-height);\n\n\t\toverflow: auto;\n\t\tpadding: 0;\n\n\t\topacity: 0;\n\t\ttransform: translateY(-1rem);\n\t\tanimation: sds-dialog-fade-in var(--_sds-dialog-animation-duration) ease-out forwards;\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--_sds-dialog-focus-spacing) var(--_sds-dialog-focus-inner-color);\n\t\t\toutline: var(--_sds-dialog-focus-outline-size) solid var(--_sds-dialog-focus-color);\n\t\t\toutline-offset: var(--_sds-dialog-focus-spacing);\n\t\t}\n\n\t\t&[open] {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tmargin: var(--_sds-dialog-margin);\n\t\t\tpadding-block: var(--_sds-dialog-padding-block);\n\t\t\tpadding-inline: var(--_sds-dialog-padding-inline);\n\t\t\tgap: var(--_sds-dialog-gap);\n\t\t}\n\n\t\t&.sds-dialog__empty-header:has(.sds-dialog__close-button) {\n\t\t\t/* Set padding right to avoid overflowing the close button */\n\t\t\tpadding-right: var(--sds-dialog-padding-right, var(--sds-spacing-lg));\n\t\t}\n\n\t\t&::backdrop {\n\t\t\tbackground-color: var(--_sds-dialog-backdrop-color);\n\t\t\t/* @keyframes does not work for ::backdrop in Firefox, so use transition instead */\n\t\t\ttransition: opacity var(--_sds-dialog-animation-duration) ease-out;\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&[open]::backdrop {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t@keyframes sds-dialog-fade-in {\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t.sds-dialog__close-button {\n\t\t--sds-button-text-color: var(--sds-dialog-close-button-color, var(--sds-color-text-subtle, var(--sds-color-main-text-subtle)));\n\t\t--sds-button-padding-inline: 0;\n\n\t\tposition: absolute;\n\t\ttop: var(--_sds-dialog-close-button-offset);\n\t\tright: var(--_sds-dialog-close-button-offset);\n\t\tz-index: 1;\n\t}\n\n\t.sds-dialog__header {\n\t\tmargin-right: var(--sds-spacing-lg);\n\t}\n\n\t@media (max-width: 640px) {\n\t\t:host {\n\t\t\t--_sds-dialog-max-width: var(--sds-dialog-max-width, 100%);\n\t\t\t--_sds-dialog-margin: var(--sds-dialog-margin, var(--sds-spacing-xs));\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\t--_sds-dialog-animation-duration: 0ms;\n\t\t}\n\t}\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-icon-loader.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon-loader.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"sds-icon-loader.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon-loader.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;AAYhE,qBAAa,aAAa;IACzB,OAAO,CAAC,KAAK,CAA6B;IAC1C,OAAO,CAAC,OAAO,CAAsC;IACrD,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,mBAAmB,CAAkB;IAE7C,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IAED,IAAI,kBAAkB,CAAC,KAAK,EAAE,OAAO,EAEpC;IAED,QAAQ,EAAE,WAAW,CAAmD;IAExE,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,GAAG,IAAI;IAqC9D,KAAK,IAAI,IAAI;IAKb,IAAI,aAAa,IAAI,WAAW,CAE/B;CACD"}
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
import { isSystemIcon, systemIcons } from './sds-icon.system';
|
|
2
|
-
const loadLocalIcons = (name) => import(`@politiet/sheriff-icons/dist/assets/${name}.js`)
|
|
3
|
-
.then(({ default: svg }) => {
|
|
4
|
-
return svg;
|
|
5
|
-
})
|
|
6
|
-
.catch((error) => {
|
|
7
|
-
console.log(error);
|
|
8
|
-
});
|
|
2
|
+
const loadLocalIcons = (name) => import(`@politiet/sheriff-icons/dist/assets/${name}.js`).then(({ default: svg }) => svg);
|
|
9
3
|
const loadCdnIcons = (name) => fetch(`https://cdn.jsdelivr.net/npm/@politiet/sheriff-icons/dist/assets/${name}.svg`).then((response) => {
|
|
10
4
|
if (!response.ok) {
|
|
11
5
|
throw new TypeError(`Sheriff: unknown icon: '${name}'`);
|
|
@@ -15,6 +9,7 @@ const loadCdnIcons = (name) => fetch(`https://cdn.jsdelivr.net/npm/@politiet/she
|
|
|
15
9
|
export class SDSIconLoader {
|
|
16
10
|
constructor() {
|
|
17
11
|
this.cache = new Map();
|
|
12
|
+
this.pending = new Map();
|
|
18
13
|
this._loadLocal = false;
|
|
19
14
|
this._disableSystemIcons = false;
|
|
20
15
|
this.resolver = this._loadLocal ? loadLocalIcons : loadCdnIcons;
|
|
@@ -34,24 +29,36 @@ export class SDSIconLoader {
|
|
|
34
29
|
onResolved(systemIcons[name]);
|
|
35
30
|
return;
|
|
36
31
|
}
|
|
37
|
-
|
|
32
|
+
const cached = this.cache.get(name);
|
|
38
33
|
if (typeof cached === 'string') {
|
|
39
34
|
onResolved(cached);
|
|
40
|
-
return;
|
|
41
35
|
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
36
|
+
else {
|
|
37
|
+
// If a parallell request is pending, we just await that
|
|
38
|
+
// instead of making a new request
|
|
39
|
+
const pending = this.pending.get(name);
|
|
40
|
+
if (pending) {
|
|
41
|
+
pending.then(onResolved);
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
const resolvePromise = this.resolver(name)
|
|
45
45
|
.then((svg) => {
|
|
46
46
|
this.cache.set(name, svg);
|
|
47
47
|
return svg;
|
|
48
|
+
})
|
|
49
|
+
.catch(() => {
|
|
50
|
+
return '';
|
|
51
|
+
})
|
|
52
|
+
.finally(() => {
|
|
53
|
+
this.pending.delete(name);
|
|
48
54
|
});
|
|
49
|
-
this.
|
|
55
|
+
this.pending.set(name, resolvePromise);
|
|
56
|
+
resolvePromise.then(onResolved);
|
|
50
57
|
}
|
|
51
|
-
cached.then(onResolved);
|
|
52
58
|
}
|
|
53
59
|
clear() {
|
|
54
60
|
this.cache.clear();
|
|
61
|
+
this.pending.clear();
|
|
55
62
|
}
|
|
56
63
|
get currentLoader() {
|
|
57
64
|
return this.resolver;
|