@politiet/sheriff-web-components 2.7.0 → 2.7.1
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 +171 -6
- package/dist/frameworks/preact.d.ts +4 -1
- package/dist/frameworks/preact.d.ts.map +1 -1
- package/dist/frameworks/react.d.ts +10 -2
- package/dist/frameworks/react.d.ts.map +1 -1
- package/dist/frameworks/solidjs.d.ts +1 -0
- package/dist/frameworks/solidjs.d.ts.map +1 -1
- package/dist/frameworks/svelte.d.ts +1 -0
- package/dist/frameworks/svelte.d.ts.map +1 -1
- package/dist/frameworks/vue.d.ts +1 -0
- package/dist/frameworks/vue.d.ts.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/mixins/sds-dialog-target-mixin.d.ts +2 -0
- package/dist/mixins/sds-dialog-target-mixin.d.ts.map +1 -1
- package/dist/mixins/sds-dialog-target-mixin.js +31 -15
- package/dist/mixins/sds-dialog-target-mixin.js.map +1 -1
- package/dist/react-wrappers/SDSPopoverWrapper.d.ts +4 -1
- package/dist/react-wrappers/SDSPopoverWrapper.d.ts.map +1 -1
- package/dist/react-wrappers/SDSPopoverWrapper.js +3 -1
- package/dist/react-wrappers/SDSPopoverWrapper.js.map +1 -1
- package/dist/react-wrappers/SDSTooltipWrapper.d.ts +6 -0
- package/dist/react-wrappers/SDSTooltipWrapper.d.ts.map +1 -0
- package/dist/react-wrappers/SDSTooltipWrapper.js +12 -0
- package/dist/react-wrappers/SDSTooltipWrapper.js.map +1 -0
- package/dist/react-wrappers/index.d.ts +1 -0
- package/dist/react-wrappers/index.d.ts.map +1 -1
- package/dist/react-wrappers/index.js +1 -0
- package/dist/react-wrappers/index.js.map +1 -1
- package/dist/sds-button/sds-button.component.js +1 -1
- package/dist/sds-button/sds-button.component.js.map +1 -1
- package/dist/sds-dialog/sds-dialog.component.js +1 -1
- package/dist/sds-dialog/sds-dialog.component.js.map +1 -1
- package/dist/sds-dialog/sds-dialog.spec.js +17 -3
- package/dist/sds-dialog/sds-dialog.spec.js.map +1 -1
- package/dist/sds-popover/sds-popover.d.ts +3 -1
- package/dist/sds-popover/sds-popover.d.ts.map +1 -1
- package/dist/sds-popover/sds-popover.js +18 -4
- package/dist/sds-popover/sds-popover.js.map +1 -1
- package/dist/sds-tooltip/assets/tooltip-styles.d.ts +3 -0
- package/dist/sds-tooltip/assets/tooltip-styles.d.ts.map +1 -0
- package/dist/sds-tooltip/assets/tooltip-styles.js +3 -0
- package/dist/sds-tooltip/assets/tooltip-styles.js.map +1 -0
- package/dist/sds-tooltip/sds-tooltip.d.ts +35 -0
- package/dist/sds-tooltip/sds-tooltip.d.ts.map +1 -0
- package/dist/sds-tooltip/sds-tooltip.js +140 -0
- package/dist/sds-tooltip/sds-tooltip.js.map +1 -0
- package/dist/sds-tooltip/sds-tooltip.spec.d.ts +2 -0
- package/dist/sds-tooltip/sds-tooltip.spec.d.ts.map +1 -0
- package/dist/sds-tooltip/sds-tooltip.spec.js +35 -0
- package/dist/sds-tooltip/sds-tooltip.spec.js.map +1 -0
- package/dist/sds-tooltip/sds-tooltip.styles.d.ts +2 -0
- package/dist/sds-tooltip/sds-tooltip.styles.d.ts.map +1 -0
- package/dist/sds-tooltip/sds-tooltip.styles.js +87 -0
- package/dist/sds-tooltip/sds-tooltip.styles.js.map +1 -0
- package/dist/shared/positioning.d.ts +2 -0
- package/dist/shared/positioning.d.ts.map +1 -0
- package/dist/shared/positioning.js +2 -0
- package/dist/shared/positioning.js.map +1 -0
- package/dist/sheriff-web-components.js +279 -196
- package/package.json +10 -4
- package/web-types.json +258 -5
- /package/dist/{sds-popover → shared}/assets/positioning.js +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SDSPopoverWrapper.d.ts","sourceRoot":"","sources":["../../src/react-wrappers/SDSPopoverWrapper.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SDSPopoverWrapper.d.ts","sourceRoot":"","sources":["../../src/react-wrappers/SDSPopoverWrapper.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,eAAO,MAAM,iBAAiB;cAKN,SAAS,CAAC,WAAW,CAAC;EAE5C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SDSPopoverWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSPopoverWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"SDSPopoverWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSPopoverWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAkB,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC;IAChD,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,UAAU;IACxB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,QAAQ,EAAE,QAAkC;KAC5C;CACD,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent, type EventName } from '@lit/react';\nimport { SDSPopover } from '../sds-popover/sds-popover';\n\nexport const SDSPopoverWrapper = createComponent({\n\ttagName: 'sds-popover',\n\telementClass: SDSPopover,\n\treact: React,\n\tevents: {\n\t\tonToggle: 'toggle' as EventName<ToggleEvent>,\n\t},\n});\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { SDSTooltip } from '../sds-tooltip/sds-tooltip';
|
|
2
|
+
import { SheriffEventName } from './types';
|
|
3
|
+
export declare const SDSTooltipWrapper: import("@lit/react").ReactWebComponent<SDSTooltip, {
|
|
4
|
+
onToggle: SheriffEventName;
|
|
5
|
+
}>;
|
|
6
|
+
//# sourceMappingURL=SDSTooltipWrapper.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SDSTooltipWrapper.d.ts","sourceRoot":"","sources":["../../src/react-wrappers/SDSTooltipWrapper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,iBAAiB;cAKN,gBAAgB;EAEtC,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { createComponent } from '@lit/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { SDSTooltip } from '../sds-tooltip/sds-tooltip';
|
|
4
|
+
export const SDSTooltipWrapper = createComponent({
|
|
5
|
+
tagName: 'sds-tooltip',
|
|
6
|
+
elementClass: SDSTooltip,
|
|
7
|
+
react: React,
|
|
8
|
+
events: {
|
|
9
|
+
onToggle: 'toggle',
|
|
10
|
+
},
|
|
11
|
+
});
|
|
12
|
+
//# sourceMappingURL=SDSTooltipWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SDSTooltipWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSTooltipWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGxD,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC;IAChD,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,UAAU;IACxB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,QAAQ,EAAE,QAA4B;KACtC;CACD,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit/react';\nimport React from 'react';\nimport { SDSTooltip } from '../sds-tooltip/sds-tooltip';\nimport { SheriffEventName } from './types';\n\nexport const SDSTooltipWrapper = createComponent({\n\ttagName: 'sds-tooltip',\n\telementClass: SDSTooltip,\n\treact: React,\n\tevents: {\n\t\tonToggle: 'toggle' as SheriffEventName,\n\t},\n});\n"]}
|
|
@@ -24,4 +24,5 @@ export { SDSTagWrapper } from './SDSTagWrapper';
|
|
|
24
24
|
export { SDSTextAreaWrapper } from './SDSTextAreaWrapper';
|
|
25
25
|
export { SDSTextFieldWrapper } from './SDSTextFieldWrapper';
|
|
26
26
|
export { SDSTextWrapper } from './SDSTextWrapper';
|
|
27
|
+
export { SDSTooltipWrapper } from './SDSTooltipWrapper';
|
|
27
28
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react-wrappers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react-wrappers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -24,4 +24,5 @@ export { SDSTagWrapper } from './SDSTagWrapper';
|
|
|
24
24
|
export { SDSTextAreaWrapper } from './SDSTextAreaWrapper';
|
|
25
25
|
export { SDSTextFieldWrapper } from './SDSTextFieldWrapper';
|
|
26
26
|
export { SDSTextWrapper } from './SDSTextWrapper';
|
|
27
|
+
export { SDSTooltipWrapper } from './SDSTooltipWrapper';
|
|
27
28
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react-wrappers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { SDSAlertWrapper } from './SDSAlertWrapper';\nexport { SDSButtonWrapper } from './SDSButtonWrapper';\nexport { SDSCardWrapper } from './SDSCardWrapper';\nexport { SDSCheckboxGroupWrapper } from './SDSCheckboxGroupWrapper';\nexport { SDSCheckboxWrapper } from './SDSCheckboxWrapper';\nexport { SDSChipWrapper } from './SDSChipWrapper';\nexport { SDSDialogWrapper } from './SDSDialogWrapper';\nexport { SDSDetailsWrapper } from './SDSDetailsWrapper';\nexport { SDSDetailsGroupWrapper } from './SDSDetailsGroupWrapper';\nexport { SDSHeadingWrapper } from './SDSHeadingWrapper';\nexport { SDSIconWrapper } from './SDSIconWrapper';\nexport { SDSLoaderWrapper } from './SDSLoaderWrapper';\nexport { SDSNotificationWrapper } from './SDSNotificationWrapper';\nexport { SDSProcessWrapper } from './SDSProcessWrapper';\nexport { SDSProcessStepWrapper } from './SDSProcessStepWrapper';\nexport { SDSPopoverWrapper } from './SDSPopoverWrapper';\nexport { SDSRadioGroupWrapper } from './SDSRadioGroupWrapper';\nexport { SDSRadioWrapper } from './SDSRadioWrapper';\nexport { SDSSelectWrapper } from './SDSSelectWrapper';\nexport { SDSStepperWrapper } from './SDSStepperWrapper';\nexport { SDSStepperStepWrapper } from './SDSStepperStepWrapper';\nexport { SDSSwitchWrapper } from './SDSSwitchWrapper';\nexport { SDSTagWrapper } from './SDSTagWrapper';\nexport { SDSTextAreaWrapper } from './SDSTextAreaWrapper';\nexport { SDSTextFieldWrapper } from './SDSTextFieldWrapper';\nexport { SDSTextWrapper } from './SDSTextWrapper';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react-wrappers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { SDSAlertWrapper } from './SDSAlertWrapper';\nexport { SDSButtonWrapper } from './SDSButtonWrapper';\nexport { SDSCardWrapper } from './SDSCardWrapper';\nexport { SDSCheckboxGroupWrapper } from './SDSCheckboxGroupWrapper';\nexport { SDSCheckboxWrapper } from './SDSCheckboxWrapper';\nexport { SDSChipWrapper } from './SDSChipWrapper';\nexport { SDSDialogWrapper } from './SDSDialogWrapper';\nexport { SDSDetailsWrapper } from './SDSDetailsWrapper';\nexport { SDSDetailsGroupWrapper } from './SDSDetailsGroupWrapper';\nexport { SDSHeadingWrapper } from './SDSHeadingWrapper';\nexport { SDSIconWrapper } from './SDSIconWrapper';\nexport { SDSLoaderWrapper } from './SDSLoaderWrapper';\nexport { SDSNotificationWrapper } from './SDSNotificationWrapper';\nexport { SDSProcessWrapper } from './SDSProcessWrapper';\nexport { SDSProcessStepWrapper } from './SDSProcessStepWrapper';\nexport { SDSPopoverWrapper } from './SDSPopoverWrapper';\nexport { SDSRadioGroupWrapper } from './SDSRadioGroupWrapper';\nexport { SDSRadioWrapper } from './SDSRadioWrapper';\nexport { SDSSelectWrapper } from './SDSSelectWrapper';\nexport { SDSStepperWrapper } from './SDSStepperWrapper';\nexport { SDSStepperStepWrapper } from './SDSStepperStepWrapper';\nexport { SDSSwitchWrapper } from './SDSSwitchWrapper';\nexport { SDSTagWrapper } from './SDSTagWrapper';\nexport { SDSTextAreaWrapper } from './SDSTextAreaWrapper';\nexport { SDSTextFieldWrapper } from './SDSTextFieldWrapper';\nexport { SDSTextWrapper } from './SDSTextWrapper';\nexport { SDSTooltipWrapper } from './SDSTooltipWrapper';\n"]}
|
|
@@ -33,7 +33,7 @@ export class SDSButtonComponent extends SDSDialogTargetMixin(SDSPopoverTargetMix
|
|
|
33
33
|
}
|
|
34
34
|
// For dialog commands, emulate the native commandfor/command behavior on the host.
|
|
35
35
|
// Stop propagation and re-dispatch a composed click for listeners on the host.
|
|
36
|
-
if (this.
|
|
36
|
+
if (this.effectiveCommandFor && this.effectiveCommand) {
|
|
37
37
|
event.preventDefault();
|
|
38
38
|
event.stopImmediatePropagation();
|
|
39
39
|
if (!this.disabled) {
|
|
@@ -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 { LitElement, PropertyValues, html, nothing } from 'lit';\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\tloading?: boolean;\n\tname?: string;\n\tpopoverTarget?: string;\n\tpopoverTargetAction?: string;\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(LitElement)))) {\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\tstatic override shadowRootOptions: ShadowRootInit = {\n\t\t...LitElement.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 }) 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 readonly _handleClick = (event: MouseEvent) => {\n\t\t// For popover triggers, let the browser handle the toggle natively.\n\t\t// Stop propagation and re-dispatch a composed click for listeners on the host.\n\t\tif (this.popoverTarget) {\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tif (!this.disabled) {\n\t\t\t\tthis.dispatchSheriffEvent('click');\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\t// For dialog commands, emulate the native commandfor/command behavior on the host.\n\t\t// Stop propagation and re-dispatch a composed click for listeners on the host.\n\t\tif (this.commandFor && this.command) {\n\t\t\tevent.preventDefault();\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tif (!this.disabled) {\n\t\t\t\tthis.runDialogCommand();\n\t\t\t\tthis.dispatchSheriffEvent('click');\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (!this.disabled) {\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'submit': {\n\t\t\t\t\tconst shouldSubmit = this.dispatchSheriffEvent('submit');\n\n\t\t\t\t\tif (shouldSubmit) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.requestSubmit();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.requestSubmit();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tcase 'reset': {\n\t\t\t\t\tconst shouldReset = this.dispatchSheriffEvent('reset');\n\n\t\t\t\t\tif (shouldReset) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.reset();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.reset();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tdefault:\n\t\t\t\t\tthis.dispatchSheriffEvent('click');\n\t\t\t}\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.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 { LitElement, PropertyValues, html, nothing } from 'lit';\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\tloading?: boolean;\n\tname?: string;\n\tpopoverTarget?: string;\n\tpopoverTargetAction?: string;\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(LitElement)))) {\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\tstatic override shadowRootOptions: ShadowRootInit = {\n\t\t...LitElement.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 }) 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 readonly _handleClick = (event: MouseEvent) => {\n\t\t// For popover triggers, let the browser handle the toggle natively.\n\t\t// Stop propagation and re-dispatch a composed click for listeners on the host.\n\t\tif (this.popoverTarget) {\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tif (!this.disabled) {\n\t\t\t\tthis.dispatchSheriffEvent('click');\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\t// For dialog commands, emulate the native commandfor/command behavior on the host.\n\t\t// Stop propagation and re-dispatch a composed click for listeners on the host.\n\t\tif (this.effectiveCommandFor && this.effectiveCommand) {\n\t\t\tevent.preventDefault();\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tif (!this.disabled) {\n\t\t\t\tthis.runDialogCommand();\n\t\t\t\tthis.dispatchSheriffEvent('click');\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (!this.disabled) {\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'submit': {\n\t\t\t\t\tconst shouldSubmit = this.dispatchSheriffEvent('submit');\n\n\t\t\t\t\tif (shouldSubmit) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.requestSubmit();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.requestSubmit();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tcase 'reset': {\n\t\t\t\t\tconst shouldReset = this.dispatchSheriffEvent('reset');\n\n\t\t\t\t\tif (shouldReset) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.reset();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.reset();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tdefault:\n\t\t\t\t\tthis.dispatchSheriffEvent('click');\n\t\t\t}\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.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"]}
|
|
@@ -147,7 +147,7 @@ export class SDSDialogComponent extends SDSEventDispatcherMixin(LitElement) {
|
|
|
147
147
|
<slot name="header" @slotchange=${this._handleHeaderSlotChange}></slot>
|
|
148
148
|
${this.closeButtonLabel
|
|
149
149
|
? html `
|
|
150
|
-
<sds-button class="sds-dialog__close-button" icon variant="tertiary" size="md"
|
|
150
|
+
<sds-button class="sds-dialog__close-button" icon variant="tertiary" size="md" command="close" label="${this.closeButtonLabel}">
|
|
151
151
|
<sds-icon name="close-material-outlined" size="md"></sds-icon>
|
|
152
152
|
</sds-button>
|
|
153
153
|
`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-dialog.component.js","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { styles } from './sds-dialog.styles';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\n\ntype ClosedBy = 'none' | 'closerequest' | 'any';\n\nexport interface SDSDialogProps {\n\topen?: boolean;\n\t/**\n\t * Set if dialog opens as a modal or not\n\t *\n\t * If non-modal, the user is allowed to interact with content outside of the dialog.\n\t * If modal, the dialog is placed in the top layer with a ::backdrop pseudo-element.\n\t *\n\t * Docs:\n\t * - https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/show\n\t * - https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal\n\t */\n\tmodal?: boolean;\n\t/**\n\t * Set what type of dismiss behavior closes the dialog\n\t * - 'none': Dialog can only be closed programmatically\n\t * - 'closerequest': Dialog closes on ESC key (default)\n\t * - 'any': Dialog closes on ESC key or clicking outside\n\t *\n\t * Docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\t */\n\tclosedby?: ClosedBy;\n\t'close-button-label'?: string;\n}\n\nexport class SDSDialogComponent extends SDSEventDispatcherMixin(LitElement) {\n\tstatic override styles = [styles];\n\n\t@property({ type: Boolean, reflect: true }) open: boolean = false;\n\t@property({ type: Boolean, reflect: true }) modal: boolean = false;\n\t@property({ type: String, reflect: true }) closedby: ClosedBy = 'closerequest';\n\t@property({ type: String, attribute: 'close-button-label' }) closeButtonLabel: string = 'Lukk dialogvindu';\n\n\t@query('dialog') private _dialog!: HTMLDialogElement;\n\n\t@state() private _isHeaderSlotEmpty: boolean = true;\n\n\t// Safari closedBy=any polyfill state\n\tprivate _pointerDownInside = false;\n\n\toverride firstUpdated(): void {\n\t\tthis._setupEventListeners();\n\t\tif (this.open) {\n\t\t\tthis._openDialog();\n\t\t}\n\t}\n\n\toverride updated(changedProperties: PropertyValues): void {\n\t\tif (!changedProperties.has('open')) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.open) {\n\t\t\tthis._openDialog();\n\t\t} else {\n\t\t\tthis._closeDialog();\n\t\t}\n\t}\n\n\tprivate _setupEventListeners(): void {\n\t\tthis._dialog.addEventListener('close', this._handleClose);\n\t\tthis._dialog.addEventListener('cancel', this._handleCancel);\n\t\tthis._dialog.addEventListener('click', this._handleClick);\n\t\tthis._dialog.addEventListener('pointerdown', this._handlePointerDown);\n\t\tthis._dialog.addEventListener('pointerup', this._handlePointerUp);\n\t\tthis._dialog.addEventListener('animationend', this._handleAutoFocus);\n\t}\n\n\tprivate _openDialog(): void {\n\t\tif (!this._dialog) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.modal) {\n\t\t\tthis._dialog.showModal();\n\t\t} else {\n\t\t\tthis._dialog.show();\n\t\t}\n\t}\n\n\tprivate _closeDialog(): void {\n\t\tif (!this._dialog) {\n\t\t\treturn;\n\t\t}\n\t\tthis._dialog.close();\n\t}\n\n\tprivate readonly _handleClose = (): void => {\n\t\tthis.open = false;\n\t\tthis.dispatchSheriffEvent('sds-close');\n\t};\n\n\tprivate readonly _handleClick = (event: MouseEvent): void => {\n\t\tconst target = event.target as Element | null;\n\n\t\tif (target?.closest('[data-command=\"close\"],[command=\"close\"]')) {\n\t\t\tthis._closeDialog();\n\t\t}\n\t};\n\n\t// Safari closedBy=\"any\" polyfill\n\t// Calculate whether the user's pointer down event is outside or inside dialog\n\t// If outside, close the dialog\n\tprivate readonly _handlePointerDown = (event: PointerEvent): void => {\n\t\tconst rect = this._dialog.getBoundingClientRect();\n\t\tconst { clientX: x, clientY: y } = event;\n\t\tthis._pointerDownInside = rect.top <= y && y <= rect.bottom && rect.left <= x && x <= rect.right;\n\t};\n\n\tprivate readonly _handlePointerUp = (event: PointerEvent): void => {\n\t\tconst wasDownInside = this._pointerDownInside;\n\t\tthis._pointerDownInside = false;\n\n\t\tif (this.closedby !== 'any' || wasDownInside) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Clicking the backdrop will have the dialog as the target in Safari/Chrome.\n\t\t// Firefox does not fire this callback when ::backdrop is clicked.\n\t\tif (event.target !== this._dialog) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Use requestAnimationFrame to let the browser handle native closedBy first.\n\t\t// This avoids checking for the closedBy property, which Safari 26.2 exposes\n\t\t// without implementing.\n\t\trequestAnimationFrame(() => {\n\t\t\tif (this._dialog && this._dialog.open) {\n\t\t\t\tthis._closeDialog();\n\t\t\t}\n\t\t});\n\t};\n\n\tprivate readonly _handleCancel = (event: Event): void => {\n\t\tif (this.closedby === 'none') {\n\t\t\tevent.preventDefault();\n\t\t}\n\t};\n\n\tprivate readonly _handleHeaderSlotChange = (event: Event): void => {\n\t\tconst slot = event.target as HTMLSlotElement;\n\t\tthis._isHeaderSlotEmpty = slot.assignedElements().length === 0;\n\t};\n\n\tprivate readonly _handleAutoFocus = (): void => {\n\t\t// slot:not([name]) finds the default nameless slot\n\t\tconst contentSlotElements = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])')?.assignedElements({ flatten: true });\n\t\tif (!contentSlotElements || contentSlotElements.length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst elementToFocus = contentSlotElements.find((element) => {\n\t\t\treturn element.getAttribute('autofocus') != null;\n\t\t});\n\n\t\tif (!(elementToFocus instanceof HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (document.activeElement !== elementToFocus) {\n\t\t\telementToFocus.focus();\n\t\t}\n\t};\n\n\tpublic show(): void {\n\t\tthis.open = true;\n\t}\n\n\tpublic showModal(): void {\n\t\tthis.modal = true;\n\t\tthis.open = true;\n\t}\n\n\tpublic close(): void {\n\t\tthis.open = false;\n\t}\n\n\tpublic requestClose(): void {\n\t\tif (!this._dialog) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._dialog.requestClose();\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<dialog .closedBy=\"${this.closedby}\" class=${this._isHeaderSlotEmpty ? 'sds-dialog__empty-header' : ''}>\n\t\t\t\t<div class=\"sds-dialog__header\">\n\t\t\t\t\t<slot name=\"header\" @slotchange=${this._handleHeaderSlotChange}></slot>\n\t\t\t\t\t${this.closeButtonLabel\n\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t<sds-button class=\"sds-dialog__close-button\" icon variant=\"tertiary\" size=\"md\" data-command=\"close\" label=\"${this.closeButtonLabel}\">\n\t\t\t\t\t\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"md\"></sds-icon>\n\t\t\t\t\t\t\t\t</sds-button>\n\t\t\t\t\t\t\t`\n\t\t\t\t\t\t: nothing}\n\t\t\t\t</div>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t</dialog>\n\t\t`;\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sds-dialog.component.js","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { styles } from './sds-dialog.styles';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\n\ntype ClosedBy = 'none' | 'closerequest' | 'any';\n\nexport interface SDSDialogProps {\n\topen?: boolean;\n\t/**\n\t * Set if dialog opens as a modal or not\n\t *\n\t * If non-modal, the user is allowed to interact with content outside of the dialog.\n\t * If modal, the dialog is placed in the top layer with a ::backdrop pseudo-element.\n\t *\n\t * Docs:\n\t * - https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/show\n\t * - https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal\n\t */\n\tmodal?: boolean;\n\t/**\n\t * Set what type of dismiss behavior closes the dialog\n\t * - 'none': Dialog can only be closed programmatically\n\t * - 'closerequest': Dialog closes on ESC key (default)\n\t * - 'any': Dialog closes on ESC key or clicking outside\n\t *\n\t * Docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\t */\n\tclosedby?: ClosedBy;\n\t'close-button-label'?: string;\n}\n\nexport class SDSDialogComponent extends SDSEventDispatcherMixin(LitElement) {\n\tstatic override styles = [styles];\n\n\t@property({ type: Boolean, reflect: true }) open: boolean = false;\n\t@property({ type: Boolean, reflect: true }) modal: boolean = false;\n\t@property({ type: String, reflect: true }) closedby: ClosedBy = 'closerequest';\n\t@property({ type: String, attribute: 'close-button-label' }) closeButtonLabel: string = 'Lukk dialogvindu';\n\n\t@query('dialog') private _dialog!: HTMLDialogElement;\n\n\t@state() private _isHeaderSlotEmpty: boolean = true;\n\n\t// Safari closedBy=any polyfill state\n\tprivate _pointerDownInside = false;\n\n\toverride firstUpdated(): void {\n\t\tthis._setupEventListeners();\n\t\tif (this.open) {\n\t\t\tthis._openDialog();\n\t\t}\n\t}\n\n\toverride updated(changedProperties: PropertyValues): void {\n\t\tif (!changedProperties.has('open')) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.open) {\n\t\t\tthis._openDialog();\n\t\t} else {\n\t\t\tthis._closeDialog();\n\t\t}\n\t}\n\n\tprivate _setupEventListeners(): void {\n\t\tthis._dialog.addEventListener('close', this._handleClose);\n\t\tthis._dialog.addEventListener('cancel', this._handleCancel);\n\t\tthis._dialog.addEventListener('click', this._handleClick);\n\t\tthis._dialog.addEventListener('pointerdown', this._handlePointerDown);\n\t\tthis._dialog.addEventListener('pointerup', this._handlePointerUp);\n\t\tthis._dialog.addEventListener('animationend', this._handleAutoFocus);\n\t}\n\n\tprivate _openDialog(): void {\n\t\tif (!this._dialog) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.modal) {\n\t\t\tthis._dialog.showModal();\n\t\t} else {\n\t\t\tthis._dialog.show();\n\t\t}\n\t}\n\n\tprivate _closeDialog(): void {\n\t\tif (!this._dialog) {\n\t\t\treturn;\n\t\t}\n\t\tthis._dialog.close();\n\t}\n\n\tprivate readonly _handleClose = (): void => {\n\t\tthis.open = false;\n\t\tthis.dispatchSheriffEvent('sds-close');\n\t};\n\n\tprivate readonly _handleClick = (event: MouseEvent): void => {\n\t\tconst target = event.target as Element | null;\n\n\t\tif (target?.closest('[data-command=\"close\"],[command=\"close\"]')) {\n\t\t\tthis._closeDialog();\n\t\t}\n\t};\n\n\t// Safari closedBy=\"any\" polyfill\n\t// Calculate whether the user's pointer down event is outside or inside dialog\n\t// If outside, close the dialog\n\tprivate readonly _handlePointerDown = (event: PointerEvent): void => {\n\t\tconst rect = this._dialog.getBoundingClientRect();\n\t\tconst { clientX: x, clientY: y } = event;\n\t\tthis._pointerDownInside = rect.top <= y && y <= rect.bottom && rect.left <= x && x <= rect.right;\n\t};\n\n\tprivate readonly _handlePointerUp = (event: PointerEvent): void => {\n\t\tconst wasDownInside = this._pointerDownInside;\n\t\tthis._pointerDownInside = false;\n\n\t\tif (this.closedby !== 'any' || wasDownInside) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Clicking the backdrop will have the dialog as the target in Safari/Chrome.\n\t\t// Firefox does not fire this callback when ::backdrop is clicked.\n\t\tif (event.target !== this._dialog) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Use requestAnimationFrame to let the browser handle native closedBy first.\n\t\t// This avoids checking for the closedBy property, which Safari 26.2 exposes\n\t\t// without implementing.\n\t\trequestAnimationFrame(() => {\n\t\t\tif (this._dialog && this._dialog.open) {\n\t\t\t\tthis._closeDialog();\n\t\t\t}\n\t\t});\n\t};\n\n\tprivate readonly _handleCancel = (event: Event): void => {\n\t\tif (this.closedby === 'none') {\n\t\t\tevent.preventDefault();\n\t\t}\n\t};\n\n\tprivate readonly _handleHeaderSlotChange = (event: Event): void => {\n\t\tconst slot = event.target as HTMLSlotElement;\n\t\tthis._isHeaderSlotEmpty = slot.assignedElements().length === 0;\n\t};\n\n\tprivate readonly _handleAutoFocus = (): void => {\n\t\t// slot:not([name]) finds the default nameless slot\n\t\tconst contentSlotElements = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])')?.assignedElements({ flatten: true });\n\t\tif (!contentSlotElements || contentSlotElements.length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst elementToFocus = contentSlotElements.find((element) => {\n\t\t\treturn element.getAttribute('autofocus') != null;\n\t\t});\n\n\t\tif (!(elementToFocus instanceof HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (document.activeElement !== elementToFocus) {\n\t\t\telementToFocus.focus();\n\t\t}\n\t};\n\n\tpublic show(): void {\n\t\tthis.open = true;\n\t}\n\n\tpublic showModal(): void {\n\t\tthis.modal = true;\n\t\tthis.open = true;\n\t}\n\n\tpublic close(): void {\n\t\tthis.open = false;\n\t}\n\n\tpublic requestClose(): void {\n\t\tif (!this._dialog) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._dialog.requestClose();\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<dialog .closedBy=\"${this.closedby}\" class=${this._isHeaderSlotEmpty ? 'sds-dialog__empty-header' : ''}>\n\t\t\t\t<div class=\"sds-dialog__header\">\n\t\t\t\t\t<slot name=\"header\" @slotchange=${this._handleHeaderSlotChange}></slot>\n\t\t\t\t\t${this.closeButtonLabel\n\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t<sds-button class=\"sds-dialog__close-button\" icon variant=\"tertiary\" size=\"md\" command=\"close\" label=\"${this.closeButtonLabel}\">\n\t\t\t\t\t\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"md\"></sds-icon>\n\t\t\t\t\t\t\t\t</sds-button>\n\t\t\t\t\t\t\t`\n\t\t\t\t\t\t: nothing}\n\t\t\t\t</div>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t</dialog>\n\t\t`;\n\t}\n}\n"]}
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { test, expect } from '@playwright/test';
|
|
2
2
|
test.describe('dialog-component', () => {
|
|
3
|
-
test.
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
test.beforeEach(async ({ page }) => {
|
|
4
|
+
await page.goto('iframe.html?viewMode=docs&id=test-dialog--docs');
|
|
5
|
+
await page.evaluate(async () => {
|
|
6
|
+
await customElements.whenDefined('sds-dialog');
|
|
6
7
|
});
|
|
8
|
+
});
|
|
9
|
+
test.describe('commandfor', () => {
|
|
7
10
|
test('sets aria-haspopup on the trigger button', async ({ page }) => {
|
|
8
11
|
const innerButton = page.locator('sds-button[commandfor="dialog-example"][command="show-modal"]').locator('button');
|
|
9
12
|
await expect(innerButton).toHaveAttribute('aria-haspopup', 'dialog');
|
|
@@ -46,5 +49,16 @@ test.describe('dialog-component', () => {
|
|
|
46
49
|
await expect(innerButton).toHaveAttribute('aria-expanded', 'false');
|
|
47
50
|
});
|
|
48
51
|
});
|
|
52
|
+
test.describe('also supports data-command', () => {
|
|
53
|
+
test('can open and close using data-command', async ({ page }) => {
|
|
54
|
+
const opener = page.locator('sds-button#trigger-data');
|
|
55
|
+
const closer = page.locator('sds-button#close-data');
|
|
56
|
+
const dialog = page.locator('sds-dialog#command-fixture-dialog');
|
|
57
|
+
await opener.click();
|
|
58
|
+
await expect(dialog).toHaveAttribute('open');
|
|
59
|
+
await closer.click();
|
|
60
|
+
await expect(dialog).not.toHaveAttribute('open');
|
|
61
|
+
});
|
|
62
|
+
});
|
|
49
63
|
});
|
|
50
64
|
//# sourceMappingURL=sds-dialog.spec.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-dialog.spec.js","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEhD,IAAI,CAAC,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IACtC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"sds-dialog.spec.js","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test, expect } from '@playwright/test';\n\ntest.describe('dialog-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto('iframe.html?viewMode=docs&id=test-dialog--docs');\n\n\t\tawait page.evaluate(async () => {\n\t\t\tawait customElements.whenDefined('sds-dialog');\n\t\t});\n\t});\n\n\ttest.describe('commandfor', () => {\n\t\ttest('sets aria-haspopup on the trigger button', async ({ page }) => {\n\t\t\tconst innerButton = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]').locator('button');\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-haspopup', 'dialog');\n\t\t});\n\n\t\ttest('sets aria-controls on the trigger button', async ({ page }) => {\n\t\t\tconst innerButton = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]').locator('button');\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-controls', 'dialog-example');\n\t\t});\n\n\t\ttest('aria-expanded is false before opening', async ({ page }) => {\n\t\t\tconst innerButton = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]').locator('button');\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'false');\n\t\t});\n\n\t\ttest('clicking the trigger opens the dialog', async ({ page }) => {\n\t\t\tconst trigger = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]');\n\t\t\tconst dialog = page.locator('sds-dialog#dialog-example');\n\n\t\t\tawait trigger.click();\n\n\t\t\tawait expect(dialog).toHaveAttribute('open');\n\t\t});\n\n\t\ttest('aria-expanded is true when dialog is open', async ({ page }) => {\n\t\t\tconst trigger = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]');\n\t\t\tconst innerButton = trigger.locator('button');\n\n\t\t\tawait trigger.click();\n\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'true');\n\t\t});\n\n\t\ttest('closing via command=\"close\" resets aria-expanded', async ({ page }) => {\n\t\t\tconst trigger = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]');\n\t\t\tconst innerButton = trigger.locator('button');\n\n\t\t\tawait trigger.click();\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'true');\n\n\t\t\tconst closeButton = page.locator('sds-dialog#dialog-example sds-button[slot=\"footer\"][command=\"close\"]');\n\t\t\tawait closeButton.click();\n\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'false');\n\t\t});\n\n\t\ttest('closing via ESC resets aria-expanded', async ({ page }) => {\n\t\t\tconst trigger = page.locator('sds-button[commandfor=\"dialog-example\"][command=\"show-modal\"]');\n\t\t\tconst innerButton = trigger.locator('button');\n\n\t\t\tawait trigger.click();\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'true');\n\n\t\t\tawait page.keyboard.press('Escape');\n\n\t\t\tawait expect(innerButton).toHaveAttribute('aria-expanded', 'false');\n\t\t});\n\t});\n\n\ttest.describe('also supports data-command', () => {\n\t\ttest('can open and close using data-command', async ({ page }) => {\n\t\t\tconst opener = page.locator('sds-button#trigger-data');\n\t\t\tconst closer = page.locator('sds-button#close-data');\n\t\t\tconst dialog = page.locator('sds-dialog#command-fixture-dialog');\n\n\t\t\tawait opener.click();\n\t\t\tawait expect(dialog).toHaveAttribute('open');\n\n\t\t\tawait closer.click();\n\t\t\tawait expect(dialog).not.toHaveAttribute('open');\n\t\t});\n\t});\n});\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
import '
|
|
2
|
+
import '../shared/positioning.js';
|
|
3
3
|
type SDSPopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'none';
|
|
4
4
|
type SDSPopoverAutoPlacement = 'true' | 'false';
|
|
5
5
|
type SDSPopoverOverscroll = 'contain';
|
|
@@ -14,6 +14,8 @@ export declare class SDSPopover extends LitElement {
|
|
|
14
14
|
autoPlacement: SDSPopoverProps['autoPlacement'];
|
|
15
15
|
overscroll: SDSPopoverProps['overscroll'];
|
|
16
16
|
connectedCallback(): void;
|
|
17
|
+
updated(changed: Map<string, unknown>): void;
|
|
18
|
+
private syncDataAttributes;
|
|
17
19
|
render(): import("lit-html").TemplateResult<1>;
|
|
18
20
|
}
|
|
19
21
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-popover.d.ts","sourceRoot":"","sources":["../../src/sds-popover/sds-popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,
|
|
1
|
+
{"version":3,"file":"sds-popover.d.ts","sourceRoot":"","sources":["../../src/sds-popover/sds-popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,0BAA0B,CAAC;AAElC,KAAK,mBAAmB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AACxE,KAAK,uBAAuB,GAAG,MAAM,GAAG,OAAO,CAAC;AAChD,KAAK,oBAAoB,GAAG,SAAS,CAAC;AAEtC,MAAM,WAAW,eAAe;IAC/B,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,UAAU,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAAY;IAGlC,SAAS,EAAE,eAAe,CAAC,WAAW,CAAC,CAAS;IAGhD,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAa;IAG5D,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAa;IAE7C,iBAAiB,IAAI,IAAI;IAUzB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAM9C,OAAO,CAAC,kBAAkB;IAMjB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
|
|
@@ -8,7 +8,7 @@ import { LitElement, html } from 'lit';
|
|
|
8
8
|
import { property } from 'lit/decorators.js';
|
|
9
9
|
import { guardedCustomElement } from '../utils/guarded-custom-element';
|
|
10
10
|
import { styles } from './sds-popover.styles';
|
|
11
|
-
import '
|
|
11
|
+
import '../shared/positioning.js';
|
|
12
12
|
let SDSPopover = class SDSPopover extends LitElement {
|
|
13
13
|
constructor() {
|
|
14
14
|
super(...arguments);
|
|
@@ -21,6 +21,20 @@ let SDSPopover = class SDSPopover extends LitElement {
|
|
|
21
21
|
if (!this.hasAttribute('popover')) {
|
|
22
22
|
this.setAttribute('popover', 'auto');
|
|
23
23
|
}
|
|
24
|
+
this.syncDataAttributes();
|
|
25
|
+
}
|
|
26
|
+
updated(changed) {
|
|
27
|
+
if (changed.has('placement') || changed.has('autoPlacement') || changed.has('overscroll')) {
|
|
28
|
+
this.syncDataAttributes();
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
syncDataAttributes() {
|
|
32
|
+
if (this.placement)
|
|
33
|
+
this.dataset.placement = this.placement;
|
|
34
|
+
if (this.autoPlacement)
|
|
35
|
+
this.dataset.autoplacement = this.autoPlacement;
|
|
36
|
+
if (this.overscroll)
|
|
37
|
+
this.dataset.overscroll = this.overscroll;
|
|
24
38
|
}
|
|
25
39
|
render() {
|
|
26
40
|
return html `<slot></slot>`;
|
|
@@ -28,13 +42,13 @@ let SDSPopover = class SDSPopover extends LitElement {
|
|
|
28
42
|
};
|
|
29
43
|
SDSPopover.styles = [styles];
|
|
30
44
|
__decorate([
|
|
31
|
-
property({ type: String,
|
|
45
|
+
property({ type: String, reflect: true })
|
|
32
46
|
], SDSPopover.prototype, "placement", void 0);
|
|
33
47
|
__decorate([
|
|
34
|
-
property({ type: String,
|
|
48
|
+
property({ type: String, reflect: true })
|
|
35
49
|
], SDSPopover.prototype, "autoPlacement", void 0);
|
|
36
50
|
__decorate([
|
|
37
|
-
property({ type: String,
|
|
51
|
+
property({ type: String, reflect: true })
|
|
38
52
|
], SDSPopover.prototype, "overscroll", void 0);
|
|
39
53
|
SDSPopover = __decorate([
|
|
40
54
|
guardedCustomElement('sds-popover')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-popover.js","sourceRoot":"","sources":["../../src/sds-popover/sds-popover.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,
|
|
1
|
+
{"version":3,"file":"sds-popover.js","sourceRoot":"","sources":["../../src/sds-popover/sds-popover.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,0BAA0B,CAAC;AAa3B,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAIN,cAAS,GAAiC,KAAK,CAAC;QAGhD,kBAAa,GAAqC,SAAS,CAAC;QAG5D,eAAU,GAAkC,SAAS,CAAC;IA2BvD,CAAC;IAzBS,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;QACtC,CAAC;QAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC3B,CAAC;IAEQ,OAAO,CAAC,OAA6B;QAC7C,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YAC3F,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC3B,CAAC;IACF,CAAC;IAEO,kBAAkB;QACzB,IAAI,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5D,IAAI,IAAI,CAAC,aAAa;YAAE,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QACxE,IAAI,IAAI,CAAC,UAAU;YAAE,IAAI,CAAC,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IAChE,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA,eAAe,CAAC;IAC5B,CAAC;;AAnCe,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACM;AAGhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACkB;AAG5D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACY;AAV1C,UAAU;IADtB,oBAAoB,CAAC,aAAa,CAAC;GACvB,UAAU,CAqCtB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-popover.styles';\nimport '../shared/positioning.js';\n\ntype SDSPopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'none';\ntype SDSPopoverAutoPlacement = 'true' | 'false';\ntype SDSPopoverOverscroll = 'contain';\n\nexport interface SDSPopoverProps {\n\tplacement?: SDSPopoverPlacement;\n\tautoPlacement?: SDSPopoverAutoPlacement;\n\toverscroll?: SDSPopoverOverscroll;\n}\n\n@guardedCustomElement('sds-popover')\nexport class SDSPopover extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true })\n\tplacement: SDSPopoverProps['placement'] = 'top';\n\n\t@property({ type: String, reflect: true })\n\tautoPlacement: SDSPopoverProps['autoPlacement'] = undefined;\n\n\t@property({ type: String, reflect: true })\n\toverscroll: SDSPopoverProps['overscroll'] = undefined;\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\n\t\tif (!this.hasAttribute('popover')) {\n\t\t\tthis.setAttribute('popover', 'auto');\n\t\t}\n\n\t\tthis.syncDataAttributes();\n\t}\n\n\toverride updated(changed: Map<string, unknown>) {\n\t\tif (changed.has('placement') || changed.has('autoPlacement') || changed.has('overscroll')) {\n\t\t\tthis.syncDataAttributes();\n\t\t}\n\t}\n\n\tprivate syncDataAttributes() {\n\t\tif (this.placement) this.dataset.placement = this.placement;\n\t\tif (this.autoPlacement) this.dataset.autoplacement = this.autoPlacement;\n\t\tif (this.overscroll) this.dataset.overscroll = this.overscroll;\n\t}\n\n\toverride render() {\n\t\treturn html`<slot></slot>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-popover': SDSPopover;\n\t}\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tooltip-styles.d.ts","sourceRoot":"","sources":["../../../src/sds-tooltip/assets/tooltip-styles.ts"],"names":[],"mappings":"AAAA,QAAA,IAAI,CAAC,QAA08E,CAAC;AAAA,OAAM,EAAC,CAAC,IAAI,OAAO,EAAC,CAAC"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
var t = '[data-tooltip]{--ds-tooltip:"";--_ds-data-tooltip:var(--ds-tooltip)}:host{--_ds-floating:top;--_ds-floating-arrow-size:0;--_ds-floating-arrow-visibility:inherit;animation:ds-fade-in .15s ease-in-out forwards;inset:0 auto auto 0;margin:0;overflow:visible;position:absolute}:host:before{background:inherit;border:inherit;border-left-color:transparent;border-top-color:transparent;box-sizing:border-box;content:"";height:var(--_ds-floating-arrow-size);left:var(--_ds-floating-arrow-x,50%);position:absolute;rotate:45deg;top:var(--_ds-floating-arrow-y,100%);translate:-50% -50%;visibility:var(--_ds-floating-arrow-visibility);width:var(--_ds-floating-arrow-size)}:host[data-overscroll=contain]{--_ds-floating-overscroll:contain;overflow:auto;overscroll-behavior:contain}:host{--_ds-floating:var(--dsc-tooltip-placement);--_ds-floating-arrow-size:var(--dsc-tooltip-arrow-size);--dsc-tooltip-background:var(--ds-color-neutral-text-default);--dsc-tooltip-color:var(--ds-color-neutral-background-default);--dsc-tooltip-border-radius:var(--ds-border-radius-default);--dsc-tooltip-padding:var(--ds-size-1) var(--ds-size-2);--dsc-tooltip-arrow-size:var(--ds-size-2);--dsc-tooltip-transition-duration:0.2s;--dsc-tooltip-transition-delay:150ms;--dsc-tooltip-placement:top;background:var(--dsc-tooltip-background);border:0;border-radius:var(--dsc-tooltip-border-radius);box-sizing:border-box;color:var(--dsc-tooltip-color);line-height:var(--ds-line-height-sm);padding:var(--dsc-tooltip-padding);view-transition-name:ds-tooltip;&[data-floating|=top]:before{rotate:45deg;top:100%}&[data-floating|=right]:before{left:0;rotate:135deg}&[data-floating|=bottom]:before{rotate:-135deg;top:0}&[data-floating|=left]:before{left:100%;rotate:-45deg}}:host:after{box-sizing:border-box;content:"";height:var(--_dsc-tooltip-safearea-height,0);left:var(--_ds-floating-arrow-x,50%);position:absolute;top:var(--_ds-floating-arrow-y,100%);translate:var(--_dsc-tooltip-safearea-translate);width:var(--_dsc-tooltip-safearea-width,0)}:host[data-floating=bottom]:after,:host[data-floating=top]:after{height:var(--dsc-tooltip-arrow-size);left:0;top:100%;width:100%}:host[data-floating=left]:after,:host[data-floating=right]:after{height:100%;left:100%;top:0;width:var(--dsc-tooltip-arrow-size)}:host[data-floating=bottom]:after{top:calc(var(--dsc-tooltip-arrow-size)*-1)}:host[data-floating=right]:after{left:calc(var(--dsc-tooltip-arrow-size)*-1)}:host:not([popover]){display:none}@media (forced-colors:active){:host{background:CanvasText}}';
|
|
2
|
+
export { t as default };
|
|
3
|
+
//# sourceMappingURL=tooltip-styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tooltip-styles.js","sourceRoot":"","sources":["../../../src/sds-tooltip/assets/tooltip-styles.ts"],"names":[],"mappings":"AAAA,IAAI,CAAC,GAAC,y8EAAy8E,CAAC;AAAA,OAAM,EAAC,CAAC,IAAI,OAAO,EAAC,CAAC","sourcesContent":["var t='[data-tooltip]{--ds-tooltip:\"\";--_ds-data-tooltip:var(--ds-tooltip)}:host{--_ds-floating:top;--_ds-floating-arrow-size:0;--_ds-floating-arrow-visibility:inherit;animation:ds-fade-in .15s ease-in-out forwards;inset:0 auto auto 0;margin:0;overflow:visible;position:absolute}:host:before{background:inherit;border:inherit;border-left-color:transparent;border-top-color:transparent;box-sizing:border-box;content:\"\";height:var(--_ds-floating-arrow-size);left:var(--_ds-floating-arrow-x,50%);position:absolute;rotate:45deg;top:var(--_ds-floating-arrow-y,100%);translate:-50% -50%;visibility:var(--_ds-floating-arrow-visibility);width:var(--_ds-floating-arrow-size)}:host[data-overscroll=contain]{--_ds-floating-overscroll:contain;overflow:auto;overscroll-behavior:contain}:host{--_ds-floating:var(--dsc-tooltip-placement);--_ds-floating-arrow-size:var(--dsc-tooltip-arrow-size);--dsc-tooltip-background:var(--ds-color-neutral-text-default);--dsc-tooltip-color:var(--ds-color-neutral-background-default);--dsc-tooltip-border-radius:var(--ds-border-radius-default);--dsc-tooltip-padding:var(--ds-size-1) var(--ds-size-2);--dsc-tooltip-arrow-size:var(--ds-size-2);--dsc-tooltip-transition-duration:0.2s;--dsc-tooltip-transition-delay:150ms;--dsc-tooltip-placement:top;background:var(--dsc-tooltip-background);border:0;border-radius:var(--dsc-tooltip-border-radius);box-sizing:border-box;color:var(--dsc-tooltip-color);line-height:var(--ds-line-height-sm);padding:var(--dsc-tooltip-padding);view-transition-name:ds-tooltip;&[data-floating|=top]:before{rotate:45deg;top:100%}&[data-floating|=right]:before{left:0;rotate:135deg}&[data-floating|=bottom]:before{rotate:-135deg;top:0}&[data-floating|=left]:before{left:100%;rotate:-45deg}}:host:after{box-sizing:border-box;content:\"\";height:var(--_dsc-tooltip-safearea-height,0);left:var(--_ds-floating-arrow-x,50%);position:absolute;top:var(--_ds-floating-arrow-y,100%);translate:var(--_dsc-tooltip-safearea-translate);width:var(--_dsc-tooltip-safearea-width,0)}:host[data-floating=bottom]:after,:host[data-floating=top]:after{height:var(--dsc-tooltip-arrow-size);left:0;top:100%;width:100%}:host[data-floating=left]:after,:host[data-floating=right]:after{height:100%;left:100%;top:0;width:var(--dsc-tooltip-arrow-size)}:host[data-floating=bottom]:after{top:calc(var(--dsc-tooltip-arrow-size)*-1)}:host[data-floating=right]:after{left:calc(var(--dsc-tooltip-arrow-size)*-1)}:host:not([popover]){display:none}@media (forced-colors:active){:host{background:CanvasText}}';export{t as default};\n"]}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import '../shared/positioning.js';
|
|
3
|
+
type SDSTooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
|
|
4
|
+
export interface SDSTooltipProps {
|
|
5
|
+
id: string;
|
|
6
|
+
placement?: SDSTooltipPlacement;
|
|
7
|
+
}
|
|
8
|
+
declare const SDSTooltip_base: import("../mixins/types").Constructable<import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface> & typeof LitElement;
|
|
9
|
+
export declare class SDSTooltip extends SDSTooltip_base {
|
|
10
|
+
static styles: import("lit").CSSResult[];
|
|
11
|
+
placement: SDSTooltipPlacement;
|
|
12
|
+
private triggers;
|
|
13
|
+
private cleanups;
|
|
14
|
+
private hoverTimeout;
|
|
15
|
+
private activeTrigger;
|
|
16
|
+
connectedCallback(): void;
|
|
17
|
+
updated(changed: Map<string, unknown>): void;
|
|
18
|
+
disconnectedCallback(): void;
|
|
19
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
20
|
+
private syncTriggerLabels;
|
|
21
|
+
private bindTriggers;
|
|
22
|
+
private onSelfMouseEnter;
|
|
23
|
+
private onSelfMouseLeave;
|
|
24
|
+
private show;
|
|
25
|
+
private hide;
|
|
26
|
+
private scheduleHide;
|
|
27
|
+
private onKeyDown;
|
|
28
|
+
}
|
|
29
|
+
declare global {
|
|
30
|
+
interface HTMLElementTagNameMap {
|
|
31
|
+
'sds-tooltip': SDSTooltip;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
export {};
|
|
35
|
+
//# sourceMappingURL=sds-tooltip.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-tooltip.d.ts","sourceRoot":"","sources":["../../src/sds-tooltip/sds-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,0BAA0B,CAAC;AAGlC,KAAK,mBAAmB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/D,MAAM,WAAW,eAAe;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,mBAAmB,CAAC;CAChC;;AAED,qBACa,UAAW,SAAQ,eAAmC;IAClE,OAAgB,MAAM,4BAAY;IAGlC,SAAS,EAAE,mBAAmB,CAAS;IAEvC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,QAAQ,CAAsB;IACtC,OAAO,CAAC,YAAY,CAA4C;IAChE,OAAO,CAAC,aAAa,CAA0B;IAEtC,iBAAiB;IAajB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMrC,oBAAoB;IAYpB,MAAM;IAIf,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,YAAY;IAsCpB,OAAO,CAAC,gBAAgB,CAEtB;IACF,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,IAAI;IAeZ,OAAO,CAAC,IAAI;IAaZ,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,SAAS,CAIf;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, html } from 'lit';
|
|
8
|
+
import { property } from 'lit/decorators.js';
|
|
9
|
+
import { guardedCustomElement } from '../utils/guarded-custom-element';
|
|
10
|
+
import { styles } from './sds-tooltip.styles';
|
|
11
|
+
import '../shared/positioning.js';
|
|
12
|
+
import { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';
|
|
13
|
+
let SDSTooltip = class SDSTooltip extends SDSEventDispatcherMixin(LitElement) {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments);
|
|
16
|
+
this.placement = 'top';
|
|
17
|
+
this.triggers = [];
|
|
18
|
+
this.cleanups = [];
|
|
19
|
+
this.onSelfMouseEnter = () => {
|
|
20
|
+
clearTimeout(this.hoverTimeout);
|
|
21
|
+
};
|
|
22
|
+
this.onSelfMouseLeave = () => this.hide();
|
|
23
|
+
this.onKeyDown = (e) => {
|
|
24
|
+
if (e.key === 'Escape') {
|
|
25
|
+
this.hide();
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
connectedCallback() {
|
|
30
|
+
super.connectedCallback();
|
|
31
|
+
this.setAttribute('role', 'tooltip');
|
|
32
|
+
this.setAttribute('popover', 'manual');
|
|
33
|
+
// Avoid screen readers entering the tooltip
|
|
34
|
+
// Rather set the tooltip's text as an aria-label on the trigger element
|
|
35
|
+
this.setAttribute('aria-hidden', 'true');
|
|
36
|
+
this.dataset.placement = this.placement;
|
|
37
|
+
this.bindTriggers();
|
|
38
|
+
// Defer to allow triggers to complete their first render
|
|
39
|
+
requestAnimationFrame(() => this.syncTriggerLabels());
|
|
40
|
+
}
|
|
41
|
+
updated(changed) {
|
|
42
|
+
if (changed.has('placement')) {
|
|
43
|
+
this.dataset.placement = this.placement;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
disconnectedCallback() {
|
|
47
|
+
super.disconnectedCallback();
|
|
48
|
+
clearTimeout(this.hoverTimeout);
|
|
49
|
+
document.removeEventListener('keydown', this.onKeyDown);
|
|
50
|
+
for (const cleanup of this.cleanups) {
|
|
51
|
+
cleanup();
|
|
52
|
+
}
|
|
53
|
+
this.cleanups = [];
|
|
54
|
+
this.triggers = [];
|
|
55
|
+
this.activeTrigger = undefined;
|
|
56
|
+
}
|
|
57
|
+
render() {
|
|
58
|
+
return html `<slot @slotchange=${this.syncTriggerLabels}></slot>`;
|
|
59
|
+
}
|
|
60
|
+
syncTriggerLabels() {
|
|
61
|
+
const text = this.textContent?.trim() ?? '';
|
|
62
|
+
if (!text) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
this.triggers.map((trigger) => {
|
|
66
|
+
const element = trigger.shadowRoot?.querySelector('button, a') ?? trigger;
|
|
67
|
+
this.cleanups.push(() => element.removeAttribute('aria-label'));
|
|
68
|
+
element.setAttribute('aria-label', text);
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
bindTriggers() {
|
|
72
|
+
if (!this.id)
|
|
73
|
+
return;
|
|
74
|
+
this.triggers = [...document.querySelectorAll('[aria-describedby]')].filter((trigger) => {
|
|
75
|
+
const describedBy = trigger.getAttribute('aria-describedby');
|
|
76
|
+
// `aria-describedby` is a space-separated ID list, e.g. "field-help tooltip-id".
|
|
77
|
+
// `/\s+/` splits on one or more whitespace characters so we can match this tooltip's id.
|
|
78
|
+
return describedBy?.split(/\s+/).includes(this.id) ?? false;
|
|
79
|
+
});
|
|
80
|
+
for (const trigger of this.triggers) {
|
|
81
|
+
const onMouseEnter = () => this.show(trigger);
|
|
82
|
+
const onMouseLeave = () => this.scheduleHide();
|
|
83
|
+
const onFocusIn = () => this.show(trigger);
|
|
84
|
+
const onFocusOut = () => this.hide();
|
|
85
|
+
trigger.addEventListener('mouseenter', onMouseEnter);
|
|
86
|
+
trigger.addEventListener('mouseleave', onMouseLeave);
|
|
87
|
+
trigger.addEventListener('focusin', onFocusIn);
|
|
88
|
+
trigger.addEventListener('focusout', onFocusOut);
|
|
89
|
+
this.cleanups.push(() => {
|
|
90
|
+
trigger.removeEventListener('mouseenter', onMouseEnter);
|
|
91
|
+
trigger.removeEventListener('mouseleave', onMouseLeave);
|
|
92
|
+
trigger.removeEventListener('focusin', onFocusIn);
|
|
93
|
+
trigger.removeEventListener('focusout', onFocusOut);
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
// Hovering the tooltip itself keeps it open (MDN pattern)
|
|
97
|
+
this.addEventListener('mouseenter', this.onSelfMouseEnter);
|
|
98
|
+
this.addEventListener('mouseleave', this.onSelfMouseLeave);
|
|
99
|
+
this.cleanups.push(() => {
|
|
100
|
+
this.removeEventListener('mouseenter', this.onSelfMouseEnter);
|
|
101
|
+
this.removeEventListener('mouseleave', this.onSelfMouseLeave);
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
show(trigger) {
|
|
105
|
+
clearTimeout(this.hoverTimeout);
|
|
106
|
+
if (!this.matches(':popover-open')) {
|
|
107
|
+
this.showPopover();
|
|
108
|
+
}
|
|
109
|
+
if (this.activeTrigger !== trigger) {
|
|
110
|
+
this.activeTrigger = trigger;
|
|
111
|
+
this.dispatchSheriffEvent('toggle', trigger);
|
|
112
|
+
}
|
|
113
|
+
document.addEventListener('keydown', this.onKeyDown);
|
|
114
|
+
}
|
|
115
|
+
hide() {
|
|
116
|
+
clearTimeout(this.hoverTimeout);
|
|
117
|
+
try {
|
|
118
|
+
this.hidePopover();
|
|
119
|
+
}
|
|
120
|
+
catch {
|
|
121
|
+
// Already hidden
|
|
122
|
+
}
|
|
123
|
+
this.activeTrigger = undefined;
|
|
124
|
+
document.removeEventListener('keydown', this.onKeyDown);
|
|
125
|
+
}
|
|
126
|
+
scheduleHide() {
|
|
127
|
+
clearTimeout(this.hoverTimeout);
|
|
128
|
+
// Grace period to let cursor travel from trigger to tooltip
|
|
129
|
+
this.hoverTimeout = setTimeout(() => this.hide(), 200);
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
SDSTooltip.styles = [styles];
|
|
133
|
+
__decorate([
|
|
134
|
+
property({ type: String, reflect: true })
|
|
135
|
+
], SDSTooltip.prototype, "placement", void 0);
|
|
136
|
+
SDSTooltip = __decorate([
|
|
137
|
+
guardedCustomElement('sds-tooltip')
|
|
138
|
+
], SDSTooltip);
|
|
139
|
+
export { SDSTooltip };
|
|
140
|
+
//# sourceMappingURL=sds-tooltip.js.map
|