@govtechsg/sgds-web-component 3.6.0-rc.2 → 3.6.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/base/button.js +1 -1
- package/components/Alert/index.umd.min.js +17 -17
- package/components/Alert/index.umd.min.js.map +1 -1
- package/components/Alert/sgds-alert.d.ts +1 -1
- package/components/Alert/sgds-alert.js +2 -2
- package/components/Alert/sgds-alert.js.map +1 -1
- package/components/Badge/index.umd.min.js +16 -16
- package/components/Badge/index.umd.min.js.map +1 -1
- package/components/Badge/sgds-badge.d.ts +1 -1
- package/components/Badge/sgds-badge.js +2 -2
- package/components/Badge/sgds-badge.js.map +1 -1
- package/components/Breadcrumb/index.umd.min.js +17 -17
- package/components/Breadcrumb/index.umd.min.js.map +1 -1
- package/components/Breadcrumb/sgds-breadcrumb-item.d.ts +1 -0
- package/components/Breadcrumb/sgds-breadcrumb-item.js +5 -2
- package/components/Breadcrumb/sgds-breadcrumb-item.js.map +1 -1
- package/components/Button/index.umd.min.js +1 -1
- package/components/Card/index.umd.min.js.map +1 -1
- package/components/Card/sgds-card.js.map +1 -1
- package/components/CloseButton/close-button.js +6 -0
- package/components/CloseButton/index.js +5 -0
- package/components/CloseButton/index.js.map +1 -0
- package/components/CloseButton/index.umd.min.js +50 -0
- package/components/CloseButton/index.umd.min.js.map +1 -0
- package/{internals → components}/CloseButton/sgds-close-button.d.ts +2 -4
- package/{internals → components}/CloseButton/sgds-close-button.js +4 -10
- package/components/CloseButton/sgds-close-button.js.map +1 -0
- package/components/ComboBox/index.umd.min.js +18 -18
- package/components/ComboBox/index.umd.min.js.map +1 -1
- package/components/Datepicker/index.umd.min.js +1 -1
- package/components/Datepicker/index.umd.min.js.map +1 -1
- package/components/Drawer/index.umd.min.js +6 -11
- package/components/Drawer/index.umd.min.js.map +1 -1
- package/components/Drawer/sgds-drawer.d.ts +1 -1
- package/components/Drawer/sgds-drawer.js +1 -1
- package/components/Drawer/sgds-drawer.js.map +1 -1
- package/components/FileUpload/index.umd.min.js +26 -26
- package/components/FileUpload/index.umd.min.js.map +1 -1
- package/components/FileUpload/sgds-file-upload.d.ts +1 -1
- package/components/FileUpload/sgds-file-upload.js +1 -1
- package/components/FileUpload/sgds-file-upload.js.map +1 -1
- package/components/Footer/footer-item.js +1 -1
- package/components/Footer/footer.js +1 -1
- package/components/Footer/index.umd.min.js +17 -17
- package/components/Footer/index.umd.min.js.map +1 -1
- package/components/Footer/sgds-footer-item.d.ts +1 -0
- package/components/Footer/sgds-footer-item.js +11 -1
- package/components/Footer/sgds-footer-item.js.map +1 -1
- package/components/Footer/sgds-footer.js +7 -7
- package/components/Footer/sgds-footer.js.map +1 -1
- package/components/IconButton/index.umd.min.js +1 -1
- package/components/IconCard/index.umd.min.js.map +1 -1
- package/components/IconCard/sgds-icon-card.js.map +1 -1
- package/components/ImageCard/index.umd.min.js.map +1 -1
- package/components/ImageCard/sgds-image-card.js.map +1 -1
- package/components/Input/index.umd.min.js.map +1 -1
- package/components/Input/sgds-input.js.map +1 -1
- package/components/Link/index.umd.min.js +9 -9
- package/components/Link/index.umd.min.js.map +1 -1
- package/components/Link/link.js +1 -1
- package/components/Link/sgds-link.d.ts +7 -1
- package/components/Link/sgds-link.js +28 -2
- package/components/Link/sgds-link.js.map +1 -1
- package/components/Mainnav/index.umd.min.js +1 -1
- package/components/Modal/index.umd.min.js +4 -4
- package/components/Modal/index.umd.min.js.map +1 -1
- package/components/Modal/sgds-modal.d.ts +1 -1
- package/components/Modal/sgds-modal.js +2 -2
- package/components/Modal/sgds-modal.js.map +1 -1
- package/components/Pagination/index.umd.min.js +1 -1
- package/components/QuantityToggle/index.umd.min.js +1 -1
- package/components/QuantityToggle/index.umd.min.js.map +1 -1
- package/components/Subnav/index.umd.min.js +11 -9
- package/components/Subnav/index.umd.min.js.map +1 -1
- package/components/Subnav/sgds-subnav.d.ts +4 -0
- package/components/Subnav/sgds-subnav.js +18 -2
- package/components/Subnav/sgds-subnav.js.map +1 -1
- package/components/Subnav/subnav.js +1 -1
- package/components/SystemBanner/index.d.ts +6 -0
- package/components/SystemBanner/index.js +6 -0
- package/components/SystemBanner/index.js.map +1 -0
- package/components/SystemBanner/index.umd.min.js +2101 -0
- package/components/SystemBanner/index.umd.min.js.map +1 -0
- package/components/SystemBanner/sgds-system-banner-item.d.ts +24 -0
- package/components/SystemBanner/sgds-system-banner-item.js +93 -0
- package/components/SystemBanner/sgds-system-banner-item.js.map +1 -0
- package/components/SystemBanner/sgds-system-banner.d.ts +51 -0
- package/components/SystemBanner/sgds-system-banner.js +224 -0
- package/components/SystemBanner/sgds-system-banner.js.map +1 -0
- package/components/SystemBanner/system-banner-context.d.ts +3 -0
- package/components/SystemBanner/system-banner-context.js +6 -0
- package/components/SystemBanner/system-banner-context.js.map +1 -0
- package/components/SystemBanner/system-banner-item.js +6 -0
- package/components/SystemBanner/system-banner-item.js.map +1 -0
- package/components/SystemBanner/system-banner.js +6 -0
- package/components/SystemBanner/system-banner.js.map +1 -0
- package/components/Toast/index.umd.min.js +12 -12
- package/components/Toast/index.umd.min.js.map +1 -1
- package/components/Toast/sgds-toast.d.ts +1 -1
- package/components/Toast/sgds-toast.js +2 -2
- package/components/Toast/sgds-toast.js.map +1 -1
- package/components/index.d.ts +2 -0
- package/components/index.js +2 -0
- package/components/index.js.map +1 -1
- package/components/index.umd.min.js +168 -136
- package/components/index.umd.min.js.map +1 -1
- package/css/fouc.css +3 -0
- package/index.d.ts +3 -1
- package/index.js +3 -1
- package/index.js.map +1 -1
- package/index.umd.min.js +212 -161
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/base/button.cjs.js +1 -1
- package/react/base/button.js +1 -1
- package/react/close-button/index.cjs.js +40 -0
- package/react/close-button/index.cjs.js.map +1 -0
- package/react/close-button/index.d.ts +2 -0
- package/react/close-button/index.js +16 -0
- package/react/close-button/index.js.map +1 -0
- package/react/components/Alert/sgds-alert.cjs.js +2 -2
- package/react/components/Alert/sgds-alert.cjs.js.map +1 -1
- package/react/components/Alert/sgds-alert.js +2 -2
- package/react/components/Alert/sgds-alert.js.map +1 -1
- package/react/components/Badge/sgds-badge.cjs.js +2 -2
- package/react/components/Badge/sgds-badge.cjs.js.map +1 -1
- package/react/components/Badge/sgds-badge.js +2 -2
- package/react/components/Badge/sgds-badge.js.map +1 -1
- package/react/components/Breadcrumb/sgds-breadcrumb-item.cjs.js +5 -2
- package/react/components/Breadcrumb/sgds-breadcrumb-item.cjs.js.map +1 -1
- package/react/components/Breadcrumb/sgds-breadcrumb-item.js +5 -2
- package/react/components/Breadcrumb/sgds-breadcrumb-item.js.map +1 -1
- package/react/components/Card/sgds-card.cjs.js.map +1 -1
- package/react/components/Card/sgds-card.js.map +1 -1
- package/react/components/CloseButton/close-button.cjs.js +11 -0
- package/react/components/CloseButton/close-button.js +7 -0
- package/react/{internals → components}/CloseButton/sgds-close-button.cjs.js +4 -10
- package/react/components/CloseButton/sgds-close-button.cjs.js.map +1 -0
- package/react/{internals → components}/CloseButton/sgds-close-button.js +4 -10
- package/react/components/CloseButton/sgds-close-button.js.map +1 -0
- package/react/components/Drawer/sgds-drawer.cjs.js +1 -1
- package/react/components/Drawer/sgds-drawer.cjs.js.map +1 -1
- package/react/components/Drawer/sgds-drawer.js +1 -1
- package/react/components/Drawer/sgds-drawer.js.map +1 -1
- package/react/components/FileUpload/sgds-file-upload.cjs.js +1 -1
- package/react/components/FileUpload/sgds-file-upload.cjs.js.map +1 -1
- package/react/components/FileUpload/sgds-file-upload.js +1 -1
- package/react/components/FileUpload/sgds-file-upload.js.map +1 -1
- package/react/components/Footer/footer-item.cjs.js +1 -1
- package/react/components/Footer/footer-item.js +1 -1
- package/react/components/Footer/footer.cjs.js +1 -1
- package/react/components/Footer/footer.js +1 -1
- package/react/components/Footer/sgds-footer-item.cjs.js +11 -1
- package/react/components/Footer/sgds-footer-item.cjs.js.map +1 -1
- package/react/components/Footer/sgds-footer-item.js +11 -1
- package/react/components/Footer/sgds-footer-item.js.map +1 -1
- package/react/components/Footer/sgds-footer.cjs.js +7 -7
- package/react/components/Footer/sgds-footer.cjs.js.map +1 -1
- package/react/components/Footer/sgds-footer.js +7 -7
- package/react/components/Footer/sgds-footer.js.map +1 -1
- package/react/components/IconCard/sgds-icon-card.cjs.js.map +1 -1
- package/react/components/IconCard/sgds-icon-card.js.map +1 -1
- package/react/components/ImageCard/sgds-image-card.cjs.js.map +1 -1
- package/react/components/ImageCard/sgds-image-card.js.map +1 -1
- package/react/components/Input/sgds-input.cjs.js.map +1 -1
- package/react/components/Input/sgds-input.js.map +1 -1
- package/react/components/Link/link.cjs.js +1 -1
- package/react/components/Link/link.js +1 -1
- package/react/components/Link/sgds-link.cjs.js +28 -2
- package/react/components/Link/sgds-link.cjs.js.map +1 -1
- package/react/components/Link/sgds-link.js +28 -2
- package/react/components/Link/sgds-link.js.map +1 -1
- package/react/components/Modal/sgds-modal.cjs.js +2 -2
- package/react/components/Modal/sgds-modal.cjs.js.map +1 -1
- package/react/components/Modal/sgds-modal.js +2 -2
- package/react/components/Modal/sgds-modal.js.map +1 -1
- package/react/components/Subnav/sgds-subnav.cjs.js +17 -1
- package/react/components/Subnav/sgds-subnav.cjs.js.map +1 -1
- package/react/components/Subnav/sgds-subnav.js +18 -2
- package/react/components/Subnav/sgds-subnav.js.map +1 -1
- package/react/components/Subnav/subnav.cjs.js +1 -1
- package/react/components/Subnav/subnav.js +1 -1
- package/react/components/SystemBanner/sgds-system-banner-item.cjs.js +99 -0
- package/react/components/SystemBanner/sgds-system-banner-item.cjs.js.map +1 -0
- package/react/components/SystemBanner/sgds-system-banner-item.js +94 -0
- package/react/components/SystemBanner/sgds-system-banner-item.js.map +1 -0
- package/react/components/SystemBanner/sgds-system-banner.cjs.js +230 -0
- package/react/components/SystemBanner/sgds-system-banner.cjs.js.map +1 -0
- package/react/components/SystemBanner/sgds-system-banner.js +225 -0
- package/react/components/SystemBanner/sgds-system-banner.js.map +1 -0
- package/react/components/SystemBanner/system-banner-context.cjs.js +11 -0
- package/react/components/SystemBanner/system-banner-context.cjs.js.map +1 -0
- package/react/components/SystemBanner/system-banner-context.js +7 -0
- package/react/components/SystemBanner/system-banner-context.js.map +1 -0
- package/react/components/SystemBanner/system-banner-item.cjs.js +11 -0
- package/react/components/SystemBanner/system-banner-item.cjs.js.map +1 -0
- package/react/components/SystemBanner/system-banner-item.js +7 -0
- package/react/components/SystemBanner/system-banner-item.js.map +1 -0
- package/react/components/SystemBanner/system-banner.cjs.js +11 -0
- package/react/components/SystemBanner/system-banner.cjs.js.map +1 -0
- package/react/components/SystemBanner/system-banner.js +7 -0
- package/react/components/SystemBanner/system-banner.js.map +1 -0
- package/react/components/Toast/sgds-toast.cjs.js +2 -2
- package/react/components/Toast/sgds-toast.cjs.js.map +1 -1
- package/react/components/Toast/sgds-toast.js +2 -2
- package/react/components/Toast/sgds-toast.js.map +1 -1
- package/react/index.cjs.js +114 -108
- package/react/index.cjs.js.map +1 -1
- package/react/index.d.ts +3 -0
- package/react/index.js +3 -0
- package/react/index.js.map +1 -1
- package/react/system-banner/index.cjs.js +43 -0
- package/react/system-banner/index.cjs.js.map +1 -0
- package/react/system-banner/index.d.ts +2 -0
- package/react/system-banner/index.js +19 -0
- package/react/system-banner/index.js.map +1 -0
- package/react/system-banner-item/index.cjs.js +42 -0
- package/react/system-banner-item/index.cjs.js.map +1 -0
- package/react/system-banner-item/index.d.ts +2 -0
- package/react/system-banner-item/index.js +18 -0
- package/react/system-banner-item/index.js.map +1 -0
- package/themes/root.css +14 -2
- package/internals/CloseButton/close-button.js +0 -6
- package/internals/CloseButton/sgds-close-button.js.map +0 -1
- package/react/internals/CloseButton/close-button.cjs.js +0 -11
- package/react/internals/CloseButton/close-button.js +0 -7
- package/react/internals/CloseButton/sgds-close-button.cjs.js.map +0 -1
- package/react/internals/CloseButton/sgds-close-button.js.map +0 -1
- package/utils/test.d.ts +0 -28
- /package/{internals → components}/CloseButton/close-button.js.map +0 -0
- /package/{internals → components}/CloseButton/index.d.ts +0 -0
- /package/react/{internals → components}/CloseButton/close-button.cjs.js.map +0 -0
- /package/react/{internals → components}/CloseButton/close-button.js.map +0 -0
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { css } from 'lit';
|
|
3
|
+
|
|
4
|
+
var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:focus,.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus,:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus,:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
|
|
5
|
+
|
|
6
|
+
export { css_248z as default };
|
|
7
|
+
//# sourceMappingURL=close-button.js.map
|
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
6
6
|
var tslib = require('tslib');
|
|
7
7
|
var lit = require('lit');
|
|
8
8
|
var decorators_js = require('lit/decorators.js');
|
|
9
|
-
var ifDefined_js = require('lit/directives/if-defined.js');
|
|
10
9
|
var sgdsElement = require('../../base/sgds-element.cjs.js');
|
|
11
10
|
var closeButton = require('./close-button.cjs.js');
|
|
12
11
|
var ceRegistry = require('../../utils/ce-registry.cjs.js');
|
|
@@ -14,16 +13,14 @@ var ceRegistry = require('../../utils/ce-registry.cjs.js');
|
|
|
14
13
|
/**
|
|
15
14
|
* @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.
|
|
16
15
|
*
|
|
17
|
-
* @cssprop --sgds-close-btn-border-radius - The border radius of close button border
|
|
18
|
-
*
|
|
19
16
|
*/
|
|
20
17
|
class SgdsCloseButton extends sgdsElement["default"] {
|
|
21
18
|
constructor() {
|
|
22
19
|
super(...arguments);
|
|
23
|
-
this.ariaLabel = "Close button";
|
|
24
20
|
/** Specifies a large or small button */
|
|
25
21
|
this.size = "md";
|
|
26
|
-
|
|
22
|
+
/** The tone of the close button */
|
|
23
|
+
this.tone = "default";
|
|
27
24
|
this._clickHandler = () => {
|
|
28
25
|
return;
|
|
29
26
|
};
|
|
@@ -39,22 +36,19 @@ class SgdsCloseButton extends sgdsElement["default"] {
|
|
|
39
36
|
}
|
|
40
37
|
render() {
|
|
41
38
|
return lit.html `
|
|
42
|
-
<button class="btn-close" aria-label
|
|
39
|
+
<button class="btn-close" aria-label="Close button" @click=${this._handleClick}>
|
|
43
40
|
<sgds-icon name="cross" size=${this.size}></sgds-icon>
|
|
44
41
|
</button>
|
|
45
42
|
`;
|
|
46
43
|
}
|
|
47
44
|
}
|
|
48
45
|
SgdsCloseButton.styles = [...sgdsElement["default"].styles, closeButton["default"]];
|
|
49
|
-
tslib.__decorate([
|
|
50
|
-
decorators_js.property({ type: String })
|
|
51
|
-
], SgdsCloseButton.prototype, "ariaLabel", void 0);
|
|
52
46
|
tslib.__decorate([
|
|
53
47
|
decorators_js.property({ type: String, reflect: true })
|
|
54
48
|
], SgdsCloseButton.prototype, "size", void 0);
|
|
55
49
|
tslib.__decorate([
|
|
56
50
|
decorators_js.property({ type: String, reflect: true })
|
|
57
|
-
], SgdsCloseButton.prototype, "
|
|
51
|
+
], SgdsCloseButton.prototype, "tone", void 0);
|
|
58
52
|
|
|
59
53
|
exports.SgdsCloseButton = SgdsCloseButton;
|
|
60
54
|
exports["default"] = SgdsCloseButton;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sgds-close-button.cjs.js","sources":["../../../../src/components/CloseButton/sgds-close-button.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport closeButtonStyles from \"./close-button.css\";\nimport { warnUnregisteredElements } from \"../../utils/ce-registry\";\n/**\n * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.\n *\n */\nexport class SgdsCloseButton extends SgdsElement {\n static styles = [...SgdsElement.styles, closeButtonStyles];\n\n /** Specifies a large or small button */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n /** The tone of the close button */\n @property({ type: String, reflect: true }) tone: \"default\" | \"fixed-dark\" | \"fixed-light\" = \"default\";\n\n private _handleClick() {\n this.removeEventListener(\"click\", this._clickHandler);\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n private _clickHandler = () => {\n return;\n };\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n /** Cannot register sgds-icon as dependency due to some circular dependencies, so we check and warn instead */\n warnUnregisteredElements(\"sgds-icon\");\n }\n render() {\n return html`\n <button class=\"btn-close\" aria-label=\"Close button\" @click=${this._handleClick}>\n <sgds-icon name=\"cross\" size=${this.size}></sgds-icon>\n </button>\n `;\n }\n}\n\nexport default SgdsCloseButton;\n"],"names":["SgdsElement","warnUnregisteredElements","html","closeButtonStyles","__decorate","property"],"mappings":";;;;;;;;;;;;AAKA;;;AAGG;AACG,MAAO,eAAgB,SAAQA,sBAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;;QAI6C,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;;QAEzB,IAAI,CAAA,IAAA,GAA6C,SAAS,CAAC;QAO9F,IAAa,CAAA,aAAA,GAAG,MAAK;YAC3B,OAAO;AACT,SAAC,CAAC;KAeH;IAtBS,YAAY,GAAA;QAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KACpD;AAMD,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;;QAGtCC,mCAAwB,CAAC,WAAW,CAAC,CAAC;KACvC;IACD,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;AACoD,iEAAA,EAAA,IAAI,CAAC,YAAY,CAAA;AAC7C,qCAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;KAE3C,CAAC;KACH;;AA5BM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAGF,sBAAW,CAAC,MAAM,EAAEG,sBAAiB,CAA5C,CAA8C;AAGhBC,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEzBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA4D,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
import { __decorate } from 'tslib';
|
|
3
3
|
import { html } from 'lit';
|
|
4
4
|
import { property } from 'lit/decorators.js';
|
|
5
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
6
5
|
import SgdsElement from '../../base/sgds-element.js';
|
|
7
6
|
import css_248z from './close-button.js';
|
|
8
7
|
import { warnUnregisteredElements } from '../../utils/ce-registry.js';
|
|
@@ -10,16 +9,14 @@ import { warnUnregisteredElements } from '../../utils/ce-registry.js';
|
|
|
10
9
|
/**
|
|
11
10
|
* @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.
|
|
12
11
|
*
|
|
13
|
-
* @cssprop --sgds-close-btn-border-radius - The border radius of close button border
|
|
14
|
-
*
|
|
15
12
|
*/
|
|
16
13
|
class SgdsCloseButton extends SgdsElement {
|
|
17
14
|
constructor() {
|
|
18
15
|
super(...arguments);
|
|
19
|
-
this.ariaLabel = "Close button";
|
|
20
16
|
/** Specifies a large or small button */
|
|
21
17
|
this.size = "md";
|
|
22
|
-
|
|
18
|
+
/** The tone of the close button */
|
|
19
|
+
this.tone = "default";
|
|
23
20
|
this._clickHandler = () => {
|
|
24
21
|
return;
|
|
25
22
|
};
|
|
@@ -35,22 +32,19 @@ class SgdsCloseButton extends SgdsElement {
|
|
|
35
32
|
}
|
|
36
33
|
render() {
|
|
37
34
|
return html `
|
|
38
|
-
<button class="btn-close" aria-label
|
|
35
|
+
<button class="btn-close" aria-label="Close button" @click=${this._handleClick}>
|
|
39
36
|
<sgds-icon name="cross" size=${this.size}></sgds-icon>
|
|
40
37
|
</button>
|
|
41
38
|
`;
|
|
42
39
|
}
|
|
43
40
|
}
|
|
44
41
|
SgdsCloseButton.styles = [...SgdsElement.styles, css_248z];
|
|
45
|
-
__decorate([
|
|
46
|
-
property({ type: String })
|
|
47
|
-
], SgdsCloseButton.prototype, "ariaLabel", void 0);
|
|
48
42
|
__decorate([
|
|
49
43
|
property({ type: String, reflect: true })
|
|
50
44
|
], SgdsCloseButton.prototype, "size", void 0);
|
|
51
45
|
__decorate([
|
|
52
46
|
property({ type: String, reflect: true })
|
|
53
|
-
], SgdsCloseButton.prototype, "
|
|
47
|
+
], SgdsCloseButton.prototype, "tone", void 0);
|
|
54
48
|
|
|
55
49
|
export { SgdsCloseButton, SgdsCloseButton as default };
|
|
56
50
|
//# sourceMappingURL=sgds-close-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sgds-close-button.js","sources":["../../../../src/components/CloseButton/sgds-close-button.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport closeButtonStyles from \"./close-button.css\";\nimport { warnUnregisteredElements } from \"../../utils/ce-registry\";\n/**\n * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.\n *\n */\nexport class SgdsCloseButton extends SgdsElement {\n static styles = [...SgdsElement.styles, closeButtonStyles];\n\n /** Specifies a large or small button */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n /** The tone of the close button */\n @property({ type: String, reflect: true }) tone: \"default\" | \"fixed-dark\" | \"fixed-light\" = \"default\";\n\n private _handleClick() {\n this.removeEventListener(\"click\", this._clickHandler);\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n private _clickHandler = () => {\n return;\n };\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n /** Cannot register sgds-icon as dependency due to some circular dependencies, so we check and warn instead */\n warnUnregisteredElements(\"sgds-icon\");\n }\n render() {\n return html`\n <button class=\"btn-close\" aria-label=\"Close button\" @click=${this._handleClick}>\n <sgds-icon name=\"cross\" size=${this.size}></sgds-icon>\n </button>\n `;\n }\n}\n\nexport default SgdsCloseButton;\n"],"names":["closeButtonStyles"],"mappings":";;;;;;;;AAKA;;;AAGG;AACG,MAAO,eAAgB,SAAQ,WAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;;QAI6C,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;;QAEzB,IAAI,CAAA,IAAA,GAA6C,SAAS,CAAC;QAO9F,IAAa,CAAA,aAAA,GAAG,MAAK;YAC3B,OAAO;AACT,SAAC,CAAC;KAeH;IAtBS,YAAY,GAAA;QAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KACpD;AAMD,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;;QAGtC,wBAAwB,CAAC,WAAW,CAAC,CAAC;KACvC;IACD,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;AACoD,iEAAA,EAAA,IAAI,CAAC,YAAY,CAAA;AAC7C,qCAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;KAE3C,CAAC;KACH;;AA5BM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAiB,CAA5C,CAA8C;AAGhB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEzB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA4D,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
|
|
@@ -14,7 +14,7 @@ var event = require('../../utils/event.cjs.js');
|
|
|
14
14
|
var scroll = require('../../utils/scroll.cjs.js');
|
|
15
15
|
var watch = require('../../utils/watch.cjs.js');
|
|
16
16
|
var drawer = require('./drawer.cjs.js');
|
|
17
|
-
var sgdsCloseButton = require('
|
|
17
|
+
var sgdsCloseButton = require('../CloseButton/sgds-close-button.cjs.js');
|
|
18
18
|
|
|
19
19
|
/**
|
|
20
20
|
* @summary Drawers slide in from a container to expose additional options and information.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-drawer.cjs.js","sources":["../../../../src/components/Drawer/sgds-drawer.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, stopAnimations } from \"../../utils/animate.js\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry.js\";\nimport { waitForEvent } from \"../../utils/event.js\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll.js\";\nimport { watch } from \"../../utils/watch.js\";\nimport drawerStyles from \"./drawer.css\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\n\n/**\n * @summary Drawers slide in from a container to expose additional options and information.\n *\n * @slot default - The drawer's main content\n * @slot title - The title of the drawer\n * @slot description - The description of the drawer\n * @slot footer - The footer of the drawer\n *\n * @event sgds-show - Emitted when the drawer opens.\n * @event sgds-after-show - Emitted after the drawer opens and all animations are complete.\n * @event sgds-hide - Emitted when the drawer closes.\n * @event sgds-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event sgds-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} sgds-request-close - Emitted when the user attempts to\n * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n * destructive behavior such as data loss.\n *\n */\nexport class SgdsDrawer extends SgdsElement {\n static styles = [...SgdsElement.styles, drawerStyles];\n /**@internal */\n static dependencies = {\n \"sgds-close-button\": SgdsCloseButton\n };\n\n /** @internal */\n private originalTrigger: HTMLElement | null;\n /** @internal */\n @query(\".drawer\") drawer: HTMLElement;\n /** @internal */\n @query(\".drawer-panel\") panel: HTMLElement;\n /** @internal */\n @query(\".drawer-overlay\") overlay: HTMLElement;\n\n /**\n * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /**\n * Defines the size of the drawer panel.\n * For drawers placed on the left or right (`start`/`end`), this controls the drawer's width.\n * For drawers placed on the top or bottom, this controls the drawer's height.\n * Accepts `small`, `medium`, or `large`. Defaults to `small`.\n */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" | \"lg\" = \"sm\";\n\n /** The direction from which the drawer will open. */\n @property({ type: String, reflect: true }) placement: \"top\" | \"end\" | \"bottom\" | \"start\" = \"end\";\n\n /**\n * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n * its parent element, set this attribute and add `position: relative` to the parent.\n */\n @property({ type: Boolean, reflect: true }) contained = false;\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n if (this.open) {\n this.addOpenListeners();\n\n if (!this.contained) {\n lockBodyScrolling(this);\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n unlockBodyScrolling(this);\n }\n\n private uppercaseFirstLetter(string: string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n }\n\n private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n const slRequestClose = this.emit(\"sgds-request-close\", {\n cancelable: true,\n detail: { source }\n });\n\n if (slRequestClose.defaultPrevented) {\n const animation = getAnimation(this, \"drawer.denyClose\");\n animateTo(this.panel, animation.keyframes, animation.options);\n return;\n }\n\n this.hide();\n }\n\n private addOpenListeners() {\n document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n }\n\n private removeOpenListeners() {\n document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n }\n\n private handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (this.open && !this.contained && event.key === \"Escape\") {\n event.stopPropagation();\n this.requestClose(\"keyboard\");\n }\n };\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n // Show\n this.emit(\"sgds-show\");\n this.addOpenListeners();\n this.originalTrigger = document.activeElement as HTMLElement;\n\n // Lock body scrolling only if the drawer isn't contained\n if (!this.contained) {\n lockBodyScrolling(this);\n }\n\n // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n // ourselves, and add the attribute back afterwards.\n //\n // Related: https://github.com/shoelace-style/shoelace/issues/693\n //\n const autoFocusTarget = this.querySelector(\"[autofocus]\");\n if (autoFocusTarget) {\n autoFocusTarget.removeAttribute(\"autofocus\");\n }\n\n await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n this.drawer.hidden = false;\n\n // Set initial focus\n requestAnimationFrame(() => {\n const slInitialFocus = this.emit(\"sgds-initial-focus\", { cancelable: true });\n\n if (!slInitialFocus.defaultPrevented) {\n // Set focus to the autofocus target and restore the attribute\n if (autoFocusTarget) {\n (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n } else {\n this.panel.focus({ preventScroll: true });\n }\n }\n\n // Restore the autofocus attribute\n if (autoFocusTarget) {\n autoFocusTarget.setAttribute(\"autofocus\", \"\");\n }\n });\n\n const panelAnimation = getAnimation(this, `drawer.show${this.uppercaseFirstLetter(this.placement)}`);\n const overlayAnimation = getAnimation(this, \"drawer.overlay.show\");\n await Promise.all([\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n ]);\n\n this.emit(\"sgds-after-show\");\n } else {\n // Hide\n this.emit(\"sgds-hide\");\n this.removeOpenListeners();\n\n if (!this.contained) {\n unlockBodyScrolling(this);\n }\n\n await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n const panelAnimation = getAnimation(this, `drawer.hide${this.uppercaseFirstLetter(this.placement)}`);\n const overlayAnimation = getAnimation(this, \"drawer.overlay.hide\");\n\n // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n // unexpectedly. We'll unhide them after all animations have completed.\n await Promise.all([\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n this.overlay.hidden = true;\n }),\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n this.panel.hidden = true;\n })\n ]);\n\n this.drawer.hidden = true;\n\n // Now that the dialog is hidden, restore the overlay and panel for next time\n this.overlay.hidden = false;\n this.panel.hidden = false;\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (typeof trigger?.focus === \"function\") {\n setTimeout(() => trigger.focus());\n }\n\n this.emit(\"sgds-after-hide\");\n }\n }\n\n @watch(\"contained\", { waitUntilFirstUpdate: true })\n handleNoModalChange() {\n if (this.open && !this.contained) {\n lockBodyScrolling(this);\n }\n\n if (this.open && this.contained) {\n unlockBodyScrolling(this);\n }\n }\n\n /** Shows the drawer. */\n public async show() {\n if (this.open) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /** Hides the drawer */\n public async hide() {\n if (!this.open) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n render() {\n const isHydrated = this.hasUpdated;\n const shouldHide = !this.open && !isHydrated;\n\n return html`\n <div\n class=${classMap({\n drawer: true,\n \"drawer-top\": this.placement === \"top\",\n \"drawer-end\": this.placement === \"end\",\n \"drawer-bottom\": this.placement === \"bottom\",\n \"drawer-start\": this.placement === \"start\",\n \"drawer-contained\": this.contained,\n \"drawer-fixed\": !this.contained\n })}\n ?hidden=${shouldHide}\n >\n <div class=\"drawer-overlay\" @click=${() => this.requestClose(\"overlay\")} tabindex=\"-1\"></div>\n\n <div\n class=\"drawer-panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n tabindex=\"0\"\n >\n <header class=\"drawer-header\">\n <slot name=\"title\"></slot>\n <slot name=\"description\"></slot>\n <sgds-close-button\n class=\"drawer-close\"\n aria-label=\"close drawer\"\n @click=\"${() => this.requestClose(\"close-button\")}\"\n ></sgds-close-button>\n </header>\n <slot class=\"drawer-body\"></slot>\n <slot name=\"footer\"></slot>\n </div>\n </div>\n `;\n }\n}\n\n// Top\nsetDefaultAnimation(\"drawer.showTop\", {\n keyframes: [\n { opacity: 0, translate: \"0 -100%\" },\n { opacity: 1, translate: \"0 0\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideTop\", {\n keyframes: [\n { opacity: 1, translate: \"0 0\" },\n { opacity: 0, translate: \"0 -100%\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\n// End\nsetDefaultAnimation(\"drawer.showEnd\", {\n keyframes: [\n { opacity: 0, translate: \"100%\" },\n { opacity: 1, translate: \"0\" }\n ],\n rtlKeyframes: [\n { opacity: 0, translate: \"-100%\" },\n { opacity: 1, translate: \"0\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideEnd\", {\n keyframes: [\n { opacity: 1, translate: \"0\" },\n { opacity: 0, translate: \"100%\" }\n ],\n rtlKeyframes: [\n { opacity: 1, translate: \"0\" },\n { opacity: 0, translate: \"-100%\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\n// Bottom\nsetDefaultAnimation(\"drawer.showBottom\", {\n keyframes: [\n { opacity: 0, translate: \"0 100%\" },\n { opacity: 1, translate: \"0 0\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideBottom\", {\n keyframes: [\n { opacity: 1, translate: \"0 0\" },\n { opacity: 0, translate: \"0 100%\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\n// Start\nsetDefaultAnimation(\"drawer.showStart\", {\n keyframes: [\n { opacity: 0, translate: \"-100%\" },\n { opacity: 1, translate: \"0\" }\n ],\n rtlKeyframes: [\n { opacity: 0, translate: \"100%\" },\n { opacity: 1, translate: \"0\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideStart\", {\n keyframes: [\n { opacity: 1, translate: \"0\" },\n { opacity: 0, translate: \"-100%\" }\n ],\n rtlKeyframes: [\n { opacity: 1, translate: \"0\" },\n { opacity: 0, translate: \"100%\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\n// Deny close\nsetDefaultAnimation(\"drawer.denyClose\", {\n keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],\n options: { duration: 250 }\n});\n\n// Overlay\nsetDefaultAnimation(\"drawer.overlay.show\", {\n keyframes: [{ opacity: 0 }, { opacity: 1 }],\n options: { duration: 250 }\n});\n\nsetDefaultAnimation(\"drawer.overlay.hide\", {\n keyframes: [{ opacity: 1 }, { opacity: 0 }],\n options: { duration: 250 }\n});\n\nexport default SgdsDrawer;\n"],"names":["SgdsElement","lockBodyScrolling","unlockBodyScrolling","getAnimation","animateTo","stopAnimations","waitForEvent","html","classMap","drawerStyles","SgdsCloseButton","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-drawer.cjs.js","sources":["../../../../src/components/Drawer/sgds-drawer.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, stopAnimations } from \"../../utils/animate.js\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry.js\";\nimport { waitForEvent } from \"../../utils/event.js\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll.js\";\nimport { watch } from \"../../utils/watch.js\";\nimport drawerStyles from \"./drawer.css\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\n\n/**\n * @summary Drawers slide in from a container to expose additional options and information.\n *\n * @slot default - The drawer's main content\n * @slot title - The title of the drawer\n * @slot description - The description of the drawer\n * @slot footer - The footer of the drawer\n *\n * @event sgds-show - Emitted when the drawer opens.\n * @event sgds-after-show - Emitted after the drawer opens and all animations are complete.\n * @event sgds-hide - Emitted when the drawer closes.\n * @event sgds-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event sgds-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} sgds-request-close - Emitted when the user attempts to\n * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n * destructive behavior such as data loss.\n *\n */\nexport class SgdsDrawer extends SgdsElement {\n static styles = [...SgdsElement.styles, drawerStyles];\n /**@internal */\n static dependencies = {\n \"sgds-close-button\": SgdsCloseButton\n };\n\n /** @internal */\n private originalTrigger: HTMLElement | null;\n /** @internal */\n @query(\".drawer\") drawer: HTMLElement;\n /** @internal */\n @query(\".drawer-panel\") panel: HTMLElement;\n /** @internal */\n @query(\".drawer-overlay\") overlay: HTMLElement;\n\n /**\n * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /**\n * Defines the size of the drawer panel.\n * For drawers placed on the left or right (`start`/`end`), this controls the drawer's width.\n * For drawers placed on the top or bottom, this controls the drawer's height.\n * Accepts `small`, `medium`, or `large`. Defaults to `small`.\n */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" | \"lg\" = \"sm\";\n\n /** The direction from which the drawer will open. */\n @property({ type: String, reflect: true }) placement: \"top\" | \"end\" | \"bottom\" | \"start\" = \"end\";\n\n /**\n * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n * its parent element, set this attribute and add `position: relative` to the parent.\n */\n @property({ type: Boolean, reflect: true }) contained = false;\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n if (this.open) {\n this.addOpenListeners();\n\n if (!this.contained) {\n lockBodyScrolling(this);\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n unlockBodyScrolling(this);\n }\n\n private uppercaseFirstLetter(string: string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n }\n\n private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n const slRequestClose = this.emit(\"sgds-request-close\", {\n cancelable: true,\n detail: { source }\n });\n\n if (slRequestClose.defaultPrevented) {\n const animation = getAnimation(this, \"drawer.denyClose\");\n animateTo(this.panel, animation.keyframes, animation.options);\n return;\n }\n\n this.hide();\n }\n\n private addOpenListeners() {\n document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n }\n\n private removeOpenListeners() {\n document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n }\n\n private handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (this.open && !this.contained && event.key === \"Escape\") {\n event.stopPropagation();\n this.requestClose(\"keyboard\");\n }\n };\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n // Show\n this.emit(\"sgds-show\");\n this.addOpenListeners();\n this.originalTrigger = document.activeElement as HTMLElement;\n\n // Lock body scrolling only if the drawer isn't contained\n if (!this.contained) {\n lockBodyScrolling(this);\n }\n\n // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n // ourselves, and add the attribute back afterwards.\n //\n // Related: https://github.com/shoelace-style/shoelace/issues/693\n //\n const autoFocusTarget = this.querySelector(\"[autofocus]\");\n if (autoFocusTarget) {\n autoFocusTarget.removeAttribute(\"autofocus\");\n }\n\n await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n this.drawer.hidden = false;\n\n // Set initial focus\n requestAnimationFrame(() => {\n const slInitialFocus = this.emit(\"sgds-initial-focus\", { cancelable: true });\n\n if (!slInitialFocus.defaultPrevented) {\n // Set focus to the autofocus target and restore the attribute\n if (autoFocusTarget) {\n (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n } else {\n this.panel.focus({ preventScroll: true });\n }\n }\n\n // Restore the autofocus attribute\n if (autoFocusTarget) {\n autoFocusTarget.setAttribute(\"autofocus\", \"\");\n }\n });\n\n const panelAnimation = getAnimation(this, `drawer.show${this.uppercaseFirstLetter(this.placement)}`);\n const overlayAnimation = getAnimation(this, \"drawer.overlay.show\");\n await Promise.all([\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n ]);\n\n this.emit(\"sgds-after-show\");\n } else {\n // Hide\n this.emit(\"sgds-hide\");\n this.removeOpenListeners();\n\n if (!this.contained) {\n unlockBodyScrolling(this);\n }\n\n await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n const panelAnimation = getAnimation(this, `drawer.hide${this.uppercaseFirstLetter(this.placement)}`);\n const overlayAnimation = getAnimation(this, \"drawer.overlay.hide\");\n\n // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n // unexpectedly. We'll unhide them after all animations have completed.\n await Promise.all([\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n this.overlay.hidden = true;\n }),\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n this.panel.hidden = true;\n })\n ]);\n\n this.drawer.hidden = true;\n\n // Now that the dialog is hidden, restore the overlay and panel for next time\n this.overlay.hidden = false;\n this.panel.hidden = false;\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (typeof trigger?.focus === \"function\") {\n setTimeout(() => trigger.focus());\n }\n\n this.emit(\"sgds-after-hide\");\n }\n }\n\n @watch(\"contained\", { waitUntilFirstUpdate: true })\n handleNoModalChange() {\n if (this.open && !this.contained) {\n lockBodyScrolling(this);\n }\n\n if (this.open && this.contained) {\n unlockBodyScrolling(this);\n }\n }\n\n /** Shows the drawer. */\n public async show() {\n if (this.open) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /** Hides the drawer */\n public async hide() {\n if (!this.open) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n render() {\n const isHydrated = this.hasUpdated;\n const shouldHide = !this.open && !isHydrated;\n\n return html`\n <div\n class=${classMap({\n drawer: true,\n \"drawer-top\": this.placement === \"top\",\n \"drawer-end\": this.placement === \"end\",\n \"drawer-bottom\": this.placement === \"bottom\",\n \"drawer-start\": this.placement === \"start\",\n \"drawer-contained\": this.contained,\n \"drawer-fixed\": !this.contained\n })}\n ?hidden=${shouldHide}\n >\n <div class=\"drawer-overlay\" @click=${() => this.requestClose(\"overlay\")} tabindex=\"-1\"></div>\n\n <div\n class=\"drawer-panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n tabindex=\"0\"\n >\n <header class=\"drawer-header\">\n <slot name=\"title\"></slot>\n <slot name=\"description\"></slot>\n <sgds-close-button\n class=\"drawer-close\"\n aria-label=\"close drawer\"\n @click=\"${() => this.requestClose(\"close-button\")}\"\n ></sgds-close-button>\n </header>\n <slot class=\"drawer-body\"></slot>\n <slot name=\"footer\"></slot>\n </div>\n </div>\n `;\n }\n}\n\n// Top\nsetDefaultAnimation(\"drawer.showTop\", {\n keyframes: [\n { opacity: 0, translate: \"0 -100%\" },\n { opacity: 1, translate: \"0 0\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideTop\", {\n keyframes: [\n { opacity: 1, translate: \"0 0\" },\n { opacity: 0, translate: \"0 -100%\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\n// End\nsetDefaultAnimation(\"drawer.showEnd\", {\n keyframes: [\n { opacity: 0, translate: \"100%\" },\n { opacity: 1, translate: \"0\" }\n ],\n rtlKeyframes: [\n { opacity: 0, translate: \"-100%\" },\n { opacity: 1, translate: \"0\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideEnd\", {\n keyframes: [\n { opacity: 1, translate: \"0\" },\n { opacity: 0, translate: \"100%\" }\n ],\n rtlKeyframes: [\n { opacity: 1, translate: \"0\" },\n { opacity: 0, translate: \"-100%\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\n// Bottom\nsetDefaultAnimation(\"drawer.showBottom\", {\n keyframes: [\n { opacity: 0, translate: \"0 100%\" },\n { opacity: 1, translate: \"0 0\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideBottom\", {\n keyframes: [\n { opacity: 1, translate: \"0 0\" },\n { opacity: 0, translate: \"0 100%\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\n// Start\nsetDefaultAnimation(\"drawer.showStart\", {\n keyframes: [\n { opacity: 0, translate: \"-100%\" },\n { opacity: 1, translate: \"0\" }\n ],\n rtlKeyframes: [\n { opacity: 0, translate: \"100%\" },\n { opacity: 1, translate: \"0\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideStart\", {\n keyframes: [\n { opacity: 1, translate: \"0\" },\n { opacity: 0, translate: \"-100%\" }\n ],\n rtlKeyframes: [\n { opacity: 1, translate: \"0\" },\n { opacity: 0, translate: \"100%\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\n// Deny close\nsetDefaultAnimation(\"drawer.denyClose\", {\n keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],\n options: { duration: 250 }\n});\n\n// Overlay\nsetDefaultAnimation(\"drawer.overlay.show\", {\n keyframes: [{ opacity: 0 }, { opacity: 1 }],\n options: { duration: 250 }\n});\n\nsetDefaultAnimation(\"drawer.overlay.hide\", {\n keyframes: [{ opacity: 1 }, { opacity: 0 }],\n options: { duration: 250 }\n});\n\nexport default SgdsDrawer;\n"],"names":["SgdsElement","lockBodyScrolling","unlockBodyScrolling","getAnimation","animateTo","stopAnimations","waitForEvent","html","classMap","drawerStyles","SgdsCloseButton","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ import { waitForEvent } from '../../utils/event.js';
|
|
|
10
10
|
import { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll.js';
|
|
11
11
|
import { watch } from '../../utils/watch.js';
|
|
12
12
|
import css_248z from './drawer.js';
|
|
13
|
-
import { SgdsCloseButton } from '
|
|
13
|
+
import { SgdsCloseButton } from '../CloseButton/sgds-close-button.js';
|
|
14
14
|
|
|
15
15
|
/**
|
|
16
16
|
* @summary Drawers slide in from a container to expose additional options and information.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-drawer.js","sources":["../../../../src/components/Drawer/sgds-drawer.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, stopAnimations } from \"../../utils/animate.js\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry.js\";\nimport { waitForEvent } from \"../../utils/event.js\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll.js\";\nimport { watch } from \"../../utils/watch.js\";\nimport drawerStyles from \"./drawer.css\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\n\n/**\n * @summary Drawers slide in from a container to expose additional options and information.\n *\n * @slot default - The drawer's main content\n * @slot title - The title of the drawer\n * @slot description - The description of the drawer\n * @slot footer - The footer of the drawer\n *\n * @event sgds-show - Emitted when the drawer opens.\n * @event sgds-after-show - Emitted after the drawer opens and all animations are complete.\n * @event sgds-hide - Emitted when the drawer closes.\n * @event sgds-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event sgds-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} sgds-request-close - Emitted when the user attempts to\n * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n * destructive behavior such as data loss.\n *\n */\nexport class SgdsDrawer extends SgdsElement {\n static styles = [...SgdsElement.styles, drawerStyles];\n /**@internal */\n static dependencies = {\n \"sgds-close-button\": SgdsCloseButton\n };\n\n /** @internal */\n private originalTrigger: HTMLElement | null;\n /** @internal */\n @query(\".drawer\") drawer: HTMLElement;\n /** @internal */\n @query(\".drawer-panel\") panel: HTMLElement;\n /** @internal */\n @query(\".drawer-overlay\") overlay: HTMLElement;\n\n /**\n * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /**\n * Defines the size of the drawer panel.\n * For drawers placed on the left or right (`start`/`end`), this controls the drawer's width.\n * For drawers placed on the top or bottom, this controls the drawer's height.\n * Accepts `small`, `medium`, or `large`. Defaults to `small`.\n */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" | \"lg\" = \"sm\";\n\n /** The direction from which the drawer will open. */\n @property({ type: String, reflect: true }) placement: \"top\" | \"end\" | \"bottom\" | \"start\" = \"end\";\n\n /**\n * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n * its parent element, set this attribute and add `position: relative` to the parent.\n */\n @property({ type: Boolean, reflect: true }) contained = false;\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n if (this.open) {\n this.addOpenListeners();\n\n if (!this.contained) {\n lockBodyScrolling(this);\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n unlockBodyScrolling(this);\n }\n\n private uppercaseFirstLetter(string: string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n }\n\n private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n const slRequestClose = this.emit(\"sgds-request-close\", {\n cancelable: true,\n detail: { source }\n });\n\n if (slRequestClose.defaultPrevented) {\n const animation = getAnimation(this, \"drawer.denyClose\");\n animateTo(this.panel, animation.keyframes, animation.options);\n return;\n }\n\n this.hide();\n }\n\n private addOpenListeners() {\n document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n }\n\n private removeOpenListeners() {\n document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n }\n\n private handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (this.open && !this.contained && event.key === \"Escape\") {\n event.stopPropagation();\n this.requestClose(\"keyboard\");\n }\n };\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n // Show\n this.emit(\"sgds-show\");\n this.addOpenListeners();\n this.originalTrigger = document.activeElement as HTMLElement;\n\n // Lock body scrolling only if the drawer isn't contained\n if (!this.contained) {\n lockBodyScrolling(this);\n }\n\n // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n // ourselves, and add the attribute back afterwards.\n //\n // Related: https://github.com/shoelace-style/shoelace/issues/693\n //\n const autoFocusTarget = this.querySelector(\"[autofocus]\");\n if (autoFocusTarget) {\n autoFocusTarget.removeAttribute(\"autofocus\");\n }\n\n await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n this.drawer.hidden = false;\n\n // Set initial focus\n requestAnimationFrame(() => {\n const slInitialFocus = this.emit(\"sgds-initial-focus\", { cancelable: true });\n\n if (!slInitialFocus.defaultPrevented) {\n // Set focus to the autofocus target and restore the attribute\n if (autoFocusTarget) {\n (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n } else {\n this.panel.focus({ preventScroll: true });\n }\n }\n\n // Restore the autofocus attribute\n if (autoFocusTarget) {\n autoFocusTarget.setAttribute(\"autofocus\", \"\");\n }\n });\n\n const panelAnimation = getAnimation(this, `drawer.show${this.uppercaseFirstLetter(this.placement)}`);\n const overlayAnimation = getAnimation(this, \"drawer.overlay.show\");\n await Promise.all([\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n ]);\n\n this.emit(\"sgds-after-show\");\n } else {\n // Hide\n this.emit(\"sgds-hide\");\n this.removeOpenListeners();\n\n if (!this.contained) {\n unlockBodyScrolling(this);\n }\n\n await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n const panelAnimation = getAnimation(this, `drawer.hide${this.uppercaseFirstLetter(this.placement)}`);\n const overlayAnimation = getAnimation(this, \"drawer.overlay.hide\");\n\n // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n // unexpectedly. We'll unhide them after all animations have completed.\n await Promise.all([\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n this.overlay.hidden = true;\n }),\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n this.panel.hidden = true;\n })\n ]);\n\n this.drawer.hidden = true;\n\n // Now that the dialog is hidden, restore the overlay and panel for next time\n this.overlay.hidden = false;\n this.panel.hidden = false;\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (typeof trigger?.focus === \"function\") {\n setTimeout(() => trigger.focus());\n }\n\n this.emit(\"sgds-after-hide\");\n }\n }\n\n @watch(\"contained\", { waitUntilFirstUpdate: true })\n handleNoModalChange() {\n if (this.open && !this.contained) {\n lockBodyScrolling(this);\n }\n\n if (this.open && this.contained) {\n unlockBodyScrolling(this);\n }\n }\n\n /** Shows the drawer. */\n public async show() {\n if (this.open) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /** Hides the drawer */\n public async hide() {\n if (!this.open) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n render() {\n const isHydrated = this.hasUpdated;\n const shouldHide = !this.open && !isHydrated;\n\n return html`\n <div\n class=${classMap({\n drawer: true,\n \"drawer-top\": this.placement === \"top\",\n \"drawer-end\": this.placement === \"end\",\n \"drawer-bottom\": this.placement === \"bottom\",\n \"drawer-start\": this.placement === \"start\",\n \"drawer-contained\": this.contained,\n \"drawer-fixed\": !this.contained\n })}\n ?hidden=${shouldHide}\n >\n <div class=\"drawer-overlay\" @click=${() => this.requestClose(\"overlay\")} tabindex=\"-1\"></div>\n\n <div\n class=\"drawer-panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n tabindex=\"0\"\n >\n <header class=\"drawer-header\">\n <slot name=\"title\"></slot>\n <slot name=\"description\"></slot>\n <sgds-close-button\n class=\"drawer-close\"\n aria-label=\"close drawer\"\n @click=\"${() => this.requestClose(\"close-button\")}\"\n ></sgds-close-button>\n </header>\n <slot class=\"drawer-body\"></slot>\n <slot name=\"footer\"></slot>\n </div>\n </div>\n `;\n }\n}\n\n// Top\nsetDefaultAnimation(\"drawer.showTop\", {\n keyframes: [\n { opacity: 0, translate: \"0 -100%\" },\n { opacity: 1, translate: \"0 0\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideTop\", {\n keyframes: [\n { opacity: 1, translate: \"0 0\" },\n { opacity: 0, translate: \"0 -100%\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\n// End\nsetDefaultAnimation(\"drawer.showEnd\", {\n keyframes: [\n { opacity: 0, translate: \"100%\" },\n { opacity: 1, translate: \"0\" }\n ],\n rtlKeyframes: [\n { opacity: 0, translate: \"-100%\" },\n { opacity: 1, translate: \"0\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideEnd\", {\n keyframes: [\n { opacity: 1, translate: \"0\" },\n { opacity: 0, translate: \"100%\" }\n ],\n rtlKeyframes: [\n { opacity: 1, translate: \"0\" },\n { opacity: 0, translate: \"-100%\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\n// Bottom\nsetDefaultAnimation(\"drawer.showBottom\", {\n keyframes: [\n { opacity: 0, translate: \"0 100%\" },\n { opacity: 1, translate: \"0 0\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideBottom\", {\n keyframes: [\n { opacity: 1, translate: \"0 0\" },\n { opacity: 0, translate: \"0 100%\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\n// Start\nsetDefaultAnimation(\"drawer.showStart\", {\n keyframes: [\n { opacity: 0, translate: \"-100%\" },\n { opacity: 1, translate: \"0\" }\n ],\n rtlKeyframes: [\n { opacity: 0, translate: \"100%\" },\n { opacity: 1, translate: \"0\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideStart\", {\n keyframes: [\n { opacity: 1, translate: \"0\" },\n { opacity: 0, translate: \"-100%\" }\n ],\n rtlKeyframes: [\n { opacity: 1, translate: \"0\" },\n { opacity: 0, translate: \"100%\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\n// Deny close\nsetDefaultAnimation(\"drawer.denyClose\", {\n keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],\n options: { duration: 250 }\n});\n\n// Overlay\nsetDefaultAnimation(\"drawer.overlay.show\", {\n keyframes: [{ opacity: 0 }, { opacity: 1 }],\n options: { duration: 250 }\n});\n\nsetDefaultAnimation(\"drawer.overlay.hide\", {\n keyframes: [{ opacity: 1 }, { opacity: 0 }],\n options: { duration: 250 }\n});\n\nexport default SgdsDrawer;\n"],"names":["drawerStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-drawer.js","sources":["../../../../src/components/Drawer/sgds-drawer.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, stopAnimations } from \"../../utils/animate.js\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry.js\";\nimport { waitForEvent } from \"../../utils/event.js\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll.js\";\nimport { watch } from \"../../utils/watch.js\";\nimport drawerStyles from \"./drawer.css\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\n\n/**\n * @summary Drawers slide in from a container to expose additional options and information.\n *\n * @slot default - The drawer's main content\n * @slot title - The title of the drawer\n * @slot description - The description of the drawer\n * @slot footer - The footer of the drawer\n *\n * @event sgds-show - Emitted when the drawer opens.\n * @event sgds-after-show - Emitted after the drawer opens and all animations are complete.\n * @event sgds-hide - Emitted when the drawer closes.\n * @event sgds-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event sgds-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} sgds-request-close - Emitted when the user attempts to\n * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n * destructive behavior such as data loss.\n *\n */\nexport class SgdsDrawer extends SgdsElement {\n static styles = [...SgdsElement.styles, drawerStyles];\n /**@internal */\n static dependencies = {\n \"sgds-close-button\": SgdsCloseButton\n };\n\n /** @internal */\n private originalTrigger: HTMLElement | null;\n /** @internal */\n @query(\".drawer\") drawer: HTMLElement;\n /** @internal */\n @query(\".drawer-panel\") panel: HTMLElement;\n /** @internal */\n @query(\".drawer-overlay\") overlay: HTMLElement;\n\n /**\n * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /**\n * Defines the size of the drawer panel.\n * For drawers placed on the left or right (`start`/`end`), this controls the drawer's width.\n * For drawers placed on the top or bottom, this controls the drawer's height.\n * Accepts `small`, `medium`, or `large`. Defaults to `small`.\n */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" | \"lg\" = \"sm\";\n\n /** The direction from which the drawer will open. */\n @property({ type: String, reflect: true }) placement: \"top\" | \"end\" | \"bottom\" | \"start\" = \"end\";\n\n /**\n * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n * its parent element, set this attribute and add `position: relative` to the parent.\n */\n @property({ type: Boolean, reflect: true }) contained = false;\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n if (this.open) {\n this.addOpenListeners();\n\n if (!this.contained) {\n lockBodyScrolling(this);\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n unlockBodyScrolling(this);\n }\n\n private uppercaseFirstLetter(string: string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n }\n\n private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n const slRequestClose = this.emit(\"sgds-request-close\", {\n cancelable: true,\n detail: { source }\n });\n\n if (slRequestClose.defaultPrevented) {\n const animation = getAnimation(this, \"drawer.denyClose\");\n animateTo(this.panel, animation.keyframes, animation.options);\n return;\n }\n\n this.hide();\n }\n\n private addOpenListeners() {\n document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n }\n\n private removeOpenListeners() {\n document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n }\n\n private handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (this.open && !this.contained && event.key === \"Escape\") {\n event.stopPropagation();\n this.requestClose(\"keyboard\");\n }\n };\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n // Show\n this.emit(\"sgds-show\");\n this.addOpenListeners();\n this.originalTrigger = document.activeElement as HTMLElement;\n\n // Lock body scrolling only if the drawer isn't contained\n if (!this.contained) {\n lockBodyScrolling(this);\n }\n\n // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n // ourselves, and add the attribute back afterwards.\n //\n // Related: https://github.com/shoelace-style/shoelace/issues/693\n //\n const autoFocusTarget = this.querySelector(\"[autofocus]\");\n if (autoFocusTarget) {\n autoFocusTarget.removeAttribute(\"autofocus\");\n }\n\n await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n this.drawer.hidden = false;\n\n // Set initial focus\n requestAnimationFrame(() => {\n const slInitialFocus = this.emit(\"sgds-initial-focus\", { cancelable: true });\n\n if (!slInitialFocus.defaultPrevented) {\n // Set focus to the autofocus target and restore the attribute\n if (autoFocusTarget) {\n (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n } else {\n this.panel.focus({ preventScroll: true });\n }\n }\n\n // Restore the autofocus attribute\n if (autoFocusTarget) {\n autoFocusTarget.setAttribute(\"autofocus\", \"\");\n }\n });\n\n const panelAnimation = getAnimation(this, `drawer.show${this.uppercaseFirstLetter(this.placement)}`);\n const overlayAnimation = getAnimation(this, \"drawer.overlay.show\");\n await Promise.all([\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n ]);\n\n this.emit(\"sgds-after-show\");\n } else {\n // Hide\n this.emit(\"sgds-hide\");\n this.removeOpenListeners();\n\n if (!this.contained) {\n unlockBodyScrolling(this);\n }\n\n await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);\n const panelAnimation = getAnimation(this, `drawer.hide${this.uppercaseFirstLetter(this.placement)}`);\n const overlayAnimation = getAnimation(this, \"drawer.overlay.hide\");\n\n // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n // unexpectedly. We'll unhide them after all animations have completed.\n await Promise.all([\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n this.overlay.hidden = true;\n }),\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n this.panel.hidden = true;\n })\n ]);\n\n this.drawer.hidden = true;\n\n // Now that the dialog is hidden, restore the overlay and panel for next time\n this.overlay.hidden = false;\n this.panel.hidden = false;\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (typeof trigger?.focus === \"function\") {\n setTimeout(() => trigger.focus());\n }\n\n this.emit(\"sgds-after-hide\");\n }\n }\n\n @watch(\"contained\", { waitUntilFirstUpdate: true })\n handleNoModalChange() {\n if (this.open && !this.contained) {\n lockBodyScrolling(this);\n }\n\n if (this.open && this.contained) {\n unlockBodyScrolling(this);\n }\n }\n\n /** Shows the drawer. */\n public async show() {\n if (this.open) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /** Hides the drawer */\n public async hide() {\n if (!this.open) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n render() {\n const isHydrated = this.hasUpdated;\n const shouldHide = !this.open && !isHydrated;\n\n return html`\n <div\n class=${classMap({\n drawer: true,\n \"drawer-top\": this.placement === \"top\",\n \"drawer-end\": this.placement === \"end\",\n \"drawer-bottom\": this.placement === \"bottom\",\n \"drawer-start\": this.placement === \"start\",\n \"drawer-contained\": this.contained,\n \"drawer-fixed\": !this.contained\n })}\n ?hidden=${shouldHide}\n >\n <div class=\"drawer-overlay\" @click=${() => this.requestClose(\"overlay\")} tabindex=\"-1\"></div>\n\n <div\n class=\"drawer-panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n tabindex=\"0\"\n >\n <header class=\"drawer-header\">\n <slot name=\"title\"></slot>\n <slot name=\"description\"></slot>\n <sgds-close-button\n class=\"drawer-close\"\n aria-label=\"close drawer\"\n @click=\"${() => this.requestClose(\"close-button\")}\"\n ></sgds-close-button>\n </header>\n <slot class=\"drawer-body\"></slot>\n <slot name=\"footer\"></slot>\n </div>\n </div>\n `;\n }\n}\n\n// Top\nsetDefaultAnimation(\"drawer.showTop\", {\n keyframes: [\n { opacity: 0, translate: \"0 -100%\" },\n { opacity: 1, translate: \"0 0\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideTop\", {\n keyframes: [\n { opacity: 1, translate: \"0 0\" },\n { opacity: 0, translate: \"0 -100%\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\n// End\nsetDefaultAnimation(\"drawer.showEnd\", {\n keyframes: [\n { opacity: 0, translate: \"100%\" },\n { opacity: 1, translate: \"0\" }\n ],\n rtlKeyframes: [\n { opacity: 0, translate: \"-100%\" },\n { opacity: 1, translate: \"0\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideEnd\", {\n keyframes: [\n { opacity: 1, translate: \"0\" },\n { opacity: 0, translate: \"100%\" }\n ],\n rtlKeyframes: [\n { opacity: 1, translate: \"0\" },\n { opacity: 0, translate: \"-100%\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\n// Bottom\nsetDefaultAnimation(\"drawer.showBottom\", {\n keyframes: [\n { opacity: 0, translate: \"0 100%\" },\n { opacity: 1, translate: \"0 0\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideBottom\", {\n keyframes: [\n { opacity: 1, translate: \"0 0\" },\n { opacity: 0, translate: \"0 100%\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\n// Start\nsetDefaultAnimation(\"drawer.showStart\", {\n keyframes: [\n { opacity: 0, translate: \"-100%\" },\n { opacity: 1, translate: \"0\" }\n ],\n rtlKeyframes: [\n { opacity: 0, translate: \"100%\" },\n { opacity: 1, translate: \"0\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"drawer.hideStart\", {\n keyframes: [\n { opacity: 1, translate: \"0\" },\n { opacity: 0, translate: \"-100%\" }\n ],\n rtlKeyframes: [\n { opacity: 1, translate: \"0\" },\n { opacity: 0, translate: \"100%\" }\n ],\n options: { duration: 250, easing: \"ease\" }\n});\n\n// Deny close\nsetDefaultAnimation(\"drawer.denyClose\", {\n keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],\n options: { duration: 250 }\n});\n\n// Overlay\nsetDefaultAnimation(\"drawer.overlay.show\", {\n keyframes: [{ opacity: 0 }, { opacity: 1 }],\n options: { duration: 250 }\n});\n\nsetDefaultAnimation(\"drawer.overlay.hide\", {\n keyframes: [{ opacity: 1 }, { opacity: 0 }],\n options: { duration: 250 }\n});\n\nexport default SgdsDrawer;\n"],"names":["drawerStyles"],"mappings":";;;;;;;;;;;;;;AAYA;;;;;;;;;;;;;;;;;;;AAmBG;AACG,MAAO,UAAW,SAAQ,WAAW,CAAA;AAA3C,IAAA,WAAA,GAAA;;AAgBE;;;AAGG;QACyC,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;AAEzD;;;;;AAKG;QACwC,IAAI,CAAA,IAAA,GAAuB,IAAI,CAAC;;QAGhC,IAAS,CAAA,SAAA,GAAuC,KAAK,CAAC;AAEjG;;;AAGG;QACyC,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;AA+CtD,QAAA,IAAA,CAAA,qBAAqB,GAAG,CAAC,KAAoB,KAAI;AACvD,YAAA,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBAC1D,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,gBAAA,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;aAC/B;AACH,SAAC,CAAC;KAyKH;AA3NC,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;AAEtC,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,gBAAgB,EAAE,CAAC;AAExB,YAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACnB,iBAAiB,CAAC,IAAI,CAAC,CAAC;aACzB;SACF;KACF;IAED,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,mBAAmB,CAAC,IAAI,CAAC,CAAC;KAC3B;AAEO,IAAA,oBAAoB,CAAC,MAAc,EAAA;AACzC,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;KACzD;AAEO,IAAA,YAAY,CAAC,MAA+C,EAAA;AAClE,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;AACrD,YAAA,UAAU,EAAE,IAAI;YAChB,MAAM,EAAE,EAAE,MAAM,EAAE;AACnB,SAAA,CAAC,CAAC;AAEH,QAAA,IAAI,cAAc,CAAC,gBAAgB,EAAE;YACnC,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,EAAE,kBAAkB,CAAC,CAAC;AACzD,YAAA,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;YAC9D,OAAO;SACR;QAED,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAEO,gBAAgB,GAAA;QACtB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;KAClE;IAEO,mBAAmB,GAAA;QACzB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;KACrE;IAUK,MAAA,gBAAgB,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;;AAEb,YAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACvB,IAAI,CAAC,gBAAgB,EAAE,CAAC;AACxB,YAAA,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,aAA4B,CAAC;;AAG7D,YAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACnB,iBAAiB,CAAC,IAAI,CAAC,CAAC;aACzB;;;;;;;YAQD,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;YAC1D,IAAI,eAAe,EAAE;AACnB,gBAAA,eAAe,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;aAC9C;YAED,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAC/E,YAAA,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC;;YAG3B,qBAAqB,CAAC,MAAK;AACzB,gBAAA,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AAE7E,gBAAA,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE;;oBAEpC,IAAI,eAAe,EAAE;wBAClB,eAAoC,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;qBACtE;yBAAM;wBACL,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;qBAC3C;iBACF;;gBAGD,IAAI,eAAe,EAAE;AACnB,oBAAA,eAAe,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;iBAC/C;AACH,aAAC,CAAC,CAAC;AAEH,YAAA,MAAM,cAAc,GAAG,YAAY,CAAC,IAAI,EAAE,CAAc,WAAA,EAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA,CAAE,CAAC,CAAC;YACrG,MAAM,gBAAgB,GAAG,YAAY,CAAC,IAAI,EAAE,qBAAqB,CAAC,CAAC;YACnE,MAAM,OAAO,CAAC,GAAG,CAAC;AAChB,gBAAA,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,CAAC;AACvE,gBAAA,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC;AAC9E,aAAA,CAAC,CAAC;AAEH,YAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC9B;aAAM;;AAEL,YAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACvB,IAAI,CAAC,mBAAmB,EAAE,CAAC;AAE3B,YAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACnB,mBAAmB,CAAC,IAAI,CAAC,CAAC;aAC3B;YAED,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAC/E,YAAA,MAAM,cAAc,GAAG,YAAY,CAAC,IAAI,EAAE,CAAc,WAAA,EAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA,CAAE,CAAC,CAAC;YACrG,MAAM,gBAAgB,GAAG,YAAY,CAAC,IAAI,EAAE,qBAAqB,CAAC,CAAC;;;;YAKnE,MAAM,OAAO,CAAC,GAAG,CAAC;AAChB,gBAAA,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAK;AACtF,oBAAA,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;AAC7B,iBAAC,CAAC;AACF,gBAAA,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAK;AAChF,oBAAA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;AAC3B,iBAAC,CAAC;AACH,aAAA,CAAC,CAAC;AAEH,YAAA,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;;AAG1B,YAAA,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC;AAC5B,YAAA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;;AAG1B,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;AACrC,YAAA,IAAI,QAAO,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAP,OAAO,CAAE,KAAK,CAAA,KAAK,UAAU,EAAE;gBACxC,UAAU,CAAC,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;aACnC;AAED,YAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC9B;KACF;IAGD,mBAAmB,GAAA;QACjB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YAChC,iBAAiB,CAAC,IAAI,CAAC,CAAC;SACzB;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE;YAC/B,mBAAmB,CAAC,IAAI,CAAC,CAAC;SAC3B;KACF;;AAGM,IAAA,MAAM,IAAI,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,OAAO,SAAS,CAAC;SAClB;AAED,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;AACjB,QAAA,OAAO,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;;AAGM,IAAA,MAAM,IAAI,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AACd,YAAA,OAAO,SAAS,CAAC;SAClB;AAED,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;AAClB,QAAA,OAAO,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QACnC,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC;AAE7C,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,YAAY,EAAE,IAAI,CAAC,SAAS,KAAK,KAAK;AACtC,YAAA,YAAY,EAAE,IAAI,CAAC,SAAS,KAAK,KAAK;AACtC,YAAA,eAAe,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ;AAC5C,YAAA,cAAc,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO;YAC1C,kBAAkB,EAAE,IAAI,CAAC,SAAS;AAClC,YAAA,cAAc,EAAE,CAAC,IAAI,CAAC,SAAS;SAChC,CAAC,CAAA;kBACQ,UAAU,CAAA;;AAEiB,2CAAA,EAAA,MAAM,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;;;;;;wBAMvD,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,CAAA;;;;;;;;;AAS5B,sBAAA,EAAA,MAAM,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;;;;;;;KAO1D,CAAC;KACH;;AAhQM,UAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAY,CAAvC,CAAyC;AACtD;AACO,UAAA,CAAA,YAAY,GAAG;AACpB,IAAA,mBAAmB,EAAE,eAAe;AACrC,CAFkB,CAEjB;AAKgB,UAAA,CAAA;IAAjB,KAAK,CAAC,SAAS,CAAC;AAAqB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEd,UAAA,CAAA;IAAvB,KAAK,CAAC,eAAe,CAAC;AAAoB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEjB,UAAA,CAAA;IAAzB,KAAK,CAAC,iBAAiB,CAAC;AAAsB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMH,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQd,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiC,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhC,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuD,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMrD,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAuDxD,UAAA,CAAA;IADL,KAAK,CAAC,MAAM,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AA6F7C,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,CAAA;AAGD,UAAA,CAAA;IADC,KAAK,CAAC,WAAW,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AASlD,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,IAAA,CAAA,CAAA;AAiEH;AACA,mBAAmB,CAAC,gBAAgB,EAAE;AACpC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE;AACpC,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE;AACjC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEH,mBAAmB,CAAC,gBAAgB,EAAE;AACpC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE;AAChC,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE;AACrC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEH;AACA,mBAAmB,CAAC,gBAAgB,EAAE;AACpC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;AACjC,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;AAC/B,KAAA;AACD,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE;AAClC,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;AAC/B,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEH,mBAAmB,CAAC,gBAAgB,EAAE;AACpC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;AAC9B,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;AAClC,KAAA;AACD,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;AAC9B,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE;AACnC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEH;AACA,mBAAmB,CAAC,mBAAmB,EAAE;AACvC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE;AACnC,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE;AACjC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEH,mBAAmB,CAAC,mBAAmB,EAAE;AACvC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE;AAChC,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE;AACpC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEH;AACA,mBAAmB,CAAC,kBAAkB,EAAE;AACtC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE;AAClC,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;AAC/B,KAAA;AACD,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;AACjC,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;AAC/B,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEH,mBAAmB,CAAC,kBAAkB,EAAE;AACtC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;AAC9B,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE;AACnC,KAAA;AACD,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE;AAC9B,QAAA,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;AAClC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;AAC3C,CAAA,CAAC,CAAC;AAEH;AACA,mBAAmB,CAAC,kBAAkB,EAAE;AACtC,IAAA,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;AACxD,IAAA,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;AAC3B,CAAA,CAAC,CAAC;AAEH;AACA,mBAAmB,CAAC,qBAAqB,EAAE;AACzC,IAAA,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AAC3C,IAAA,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;AAC3B,CAAA,CAAC,CAAC;AAEH,mBAAmB,CAAC,qBAAqB,EAAE;AACzC,IAAA,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AAC3C,IAAA,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;AAC3B,CAAA,CAAC;;;;"}
|
|
@@ -7,7 +7,7 @@ var tslib = require('tslib');
|
|
|
7
7
|
var lit = require('lit');
|
|
8
8
|
var decorators_js = require('lit/decorators.js');
|
|
9
9
|
var ref_js = require('lit/directives/ref.js');
|
|
10
|
-
var sgdsCloseButton = require('
|
|
10
|
+
var sgdsCloseButton = require('../CloseButton/sgds-close-button.cjs.js');
|
|
11
11
|
var sgdsButton = require('../Button/sgds-button.cjs.js');
|
|
12
12
|
var fileUpload = require('./file-upload.cjs.js');
|
|
13
13
|
var formControlElement = require('../../base/form-control-element.cjs.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-file-upload.cjs.js","sources":["../../../../src/components/FileUpload/sgds-file-upload.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport fileUploadStyles from \"./file-upload.css\";\n\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/**\n * @summary Allows users to upload files of various sizes and formats\n *\n * @slot default - Label for file upload button\n *\n * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail\n */\n\nexport class SgdsFileUpload extends SgdsFormValidatorMixin(FormControlElement) {\n static styles = [...FormControlElement.styles, fileUploadStyles];\n /**@internal */\n static dependencies = {\n \"sgds-button\": SgdsButton,\n \"sgds-close-button\": SgdsCloseButton,\n \"sgds-icon\": SgdsIcon\n };\n\n /** Allows multiple files to be listed for uploading */\n @property({ type: Boolean, reflect: true }) multiple = false;\n\n /** Specify the acceptable file type */\n @property({ type: String, reflect: true }) accept = \"\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback: string;\n\n /** Makes the input as a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n @state()\n private selectedFiles: File[] = [];\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage(): string {\n return this._mixinGetValidationMessage();\n }\n /**\n * Returns files selected for upload\n */\n public get files(): File[] {\n return this.selectedFiles;\n }\n\n private _setFileList(files: FileList) {\n this.emit(\"sgds-files-selected\", { detail: files });\n }\n\n private inputRef = createRef<HTMLInputElement>();\n\n private _handleClick(event: Event) {\n event.preventDefault();\n if (!this.disabled) {\n // Get a reference to the input element using the inputRef\n const inputElement = this.inputRef.value;\n // Do something with the input element\n inputElement.click();\n }\n }\n\n private _handleChange(event: Event) {\n const inputElement = event.target as HTMLInputElement;\n const files = inputElement.files as FileList;\n\n if (files.length > 0) {\n this.selectedFiles = Array.from(files);\n }\n // Trigger a re-render of the component to update the list of selected files\n this._setFileList(files);\n this.requestUpdate();\n super._mixinHandleChange(event);\n }\n\n private _removeFileHandler(index: number) {\n const inputElement = this.inputRef.value;\n const attachments = inputElement.files;\n\n const fileBuffer = new DataTransfer();\n for (let i = 0; i < attachments.length; i++) {\n if (index !== i) fileBuffer.items.add(attachments[i]);\n }\n\n // Assign buffer to file input\n inputElement.files = fileBuffer.files;\n // Re-populate selected files to the lists\n this._setFileList(fileBuffer.files);\n this.selectedFiles = Array.from(fileBuffer.files);\n\n // Trigger a re-render of the component to update the list of selected files\n this.requestUpdate();\n this._mixinValidate(this.input);\n }\n\n private _clearAllFiles() {\n const inputElement = this.inputRef.value;\n const fileBuffer = new DataTransfer();\n inputElement.files = fileBuffer.files;\n this._setFileList(fileBuffer.files);\n this.selectedFiles = Array.from(fileBuffer.files);\n }\n\n /**\n * fileupload requries a custom _mixinResetFormControl for clearing files\n */\n private _mixinResetFormControl() {\n this._clearAllFiles();\n this._mixinResetValidity(this.input);\n }\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n }\n protected _renderLabel() {\n const labelTemplate = html`\n <label for=${this._controlId} id=${this._labelId} class=\"form-label\"> ${this.label} </label>\n `;\n return this.label && labelTemplate;\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n\n protected _renderFeedback() {\n return html`\n <div class=\"invalid-feedback-container\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `;\n }\n render() {\n const getCheckedIcon = () => {\n return html`<sgds-icon name=\"check-circle-fill\" class=\"${this.invalid ? \"invalid\" : \"valid\"}\"></sgds-icon>`;\n };\n\n const listItems = this.selectedFiles.map(\n (file, index) => html`\n <li key=${index} class=\"file-upload-list-item\">\n ${getCheckedIcon()}\n <span class=\"filename\">${file.name}</span>\n <sgds-close-button\n aria-label=\"remove the file\"\n @click=${() => this._removeFileHandler(index)}\n ></sgds-close-button>\n </li>\n `\n );\n\n return html`\n <div class=\"file-upload\">\n <input\n ${ref(this.inputRef)}\n type=\"file\"\n @change=${this._handleChange}\n ?multiple=${this.multiple}\n accept=${this.accept}\n id=${this._controlId}\n ?required=${this.required}\n ?disabled=${this.disabled}\n />\n <div class=\"file-upload-container\">\n ${this._renderLabel()}\n <sgds-button variant=\"outline\" ?disabled=${this.disabled} @click=${this._handleClick}>\n <label for=${this._controlId}><slot></slot></label>\n <sgds-icon slot=\"rightIcon\" name=\"upload\"></sgds-icon>\n </sgds-button>\n ${this.hasFeedback && this.invalid ? this._renderFeedback() : this._renderHintText()}\n </div>\n <ul class=\"file-upload-list\">\n ${listItems}\n </ul>\n </div>\n `;\n }\n}\n\nexport default SgdsFileUpload;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","createRef","html","ref","fileUploadStyles","SgdsButton","SgdsCloseButton","SgdsIcon","__decorate","property","state","watch"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-file-upload.cjs.js","sources":["../../../../src/components/FileUpload/sgds-file-upload.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport fileUploadStyles from \"./file-upload.css\";\n\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/**\n * @summary Allows users to upload files of various sizes and formats\n *\n * @slot default - Label for file upload button\n *\n * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail\n */\n\nexport class SgdsFileUpload extends SgdsFormValidatorMixin(FormControlElement) {\n static styles = [...FormControlElement.styles, fileUploadStyles];\n /**@internal */\n static dependencies = {\n \"sgds-button\": SgdsButton,\n \"sgds-close-button\": SgdsCloseButton,\n \"sgds-icon\": SgdsIcon\n };\n\n /** Allows multiple files to be listed for uploading */\n @property({ type: Boolean, reflect: true }) multiple = false;\n\n /** Specify the acceptable file type */\n @property({ type: String, reflect: true }) accept = \"\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback: string;\n\n /** Makes the input as a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n @state()\n private selectedFiles: File[] = [];\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage(): string {\n return this._mixinGetValidationMessage();\n }\n /**\n * Returns files selected for upload\n */\n public get files(): File[] {\n return this.selectedFiles;\n }\n\n private _setFileList(files: FileList) {\n this.emit(\"sgds-files-selected\", { detail: files });\n }\n\n private inputRef = createRef<HTMLInputElement>();\n\n private _handleClick(event: Event) {\n event.preventDefault();\n if (!this.disabled) {\n // Get a reference to the input element using the inputRef\n const inputElement = this.inputRef.value;\n // Do something with the input element\n inputElement.click();\n }\n }\n\n private _handleChange(event: Event) {\n const inputElement = event.target as HTMLInputElement;\n const files = inputElement.files as FileList;\n\n if (files.length > 0) {\n this.selectedFiles = Array.from(files);\n }\n // Trigger a re-render of the component to update the list of selected files\n this._setFileList(files);\n this.requestUpdate();\n super._mixinHandleChange(event);\n }\n\n private _removeFileHandler(index: number) {\n const inputElement = this.inputRef.value;\n const attachments = inputElement.files;\n\n const fileBuffer = new DataTransfer();\n for (let i = 0; i < attachments.length; i++) {\n if (index !== i) fileBuffer.items.add(attachments[i]);\n }\n\n // Assign buffer to file input\n inputElement.files = fileBuffer.files;\n // Re-populate selected files to the lists\n this._setFileList(fileBuffer.files);\n this.selectedFiles = Array.from(fileBuffer.files);\n\n // Trigger a re-render of the component to update the list of selected files\n this.requestUpdate();\n this._mixinValidate(this.input);\n }\n\n private _clearAllFiles() {\n const inputElement = this.inputRef.value;\n const fileBuffer = new DataTransfer();\n inputElement.files = fileBuffer.files;\n this._setFileList(fileBuffer.files);\n this.selectedFiles = Array.from(fileBuffer.files);\n }\n\n /**\n * fileupload requries a custom _mixinResetFormControl for clearing files\n */\n private _mixinResetFormControl() {\n this._clearAllFiles();\n this._mixinResetValidity(this.input);\n }\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n }\n protected _renderLabel() {\n const labelTemplate = html`\n <label for=${this._controlId} id=${this._labelId} class=\"form-label\"> ${this.label} </label>\n `;\n return this.label && labelTemplate;\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n\n protected _renderFeedback() {\n return html`\n <div class=\"invalid-feedback-container\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `;\n }\n render() {\n const getCheckedIcon = () => {\n return html`<sgds-icon name=\"check-circle-fill\" class=\"${this.invalid ? \"invalid\" : \"valid\"}\"></sgds-icon>`;\n };\n\n const listItems = this.selectedFiles.map(\n (file, index) => html`\n <li key=${index} class=\"file-upload-list-item\">\n ${getCheckedIcon()}\n <span class=\"filename\">${file.name}</span>\n <sgds-close-button\n aria-label=\"remove the file\"\n @click=${() => this._removeFileHandler(index)}\n ></sgds-close-button>\n </li>\n `\n );\n\n return html`\n <div class=\"file-upload\">\n <input\n ${ref(this.inputRef)}\n type=\"file\"\n @change=${this._handleChange}\n ?multiple=${this.multiple}\n accept=${this.accept}\n id=${this._controlId}\n ?required=${this.required}\n ?disabled=${this.disabled}\n />\n <div class=\"file-upload-container\">\n ${this._renderLabel()}\n <sgds-button variant=\"outline\" ?disabled=${this.disabled} @click=${this._handleClick}>\n <label for=${this._controlId}><slot></slot></label>\n <sgds-icon slot=\"rightIcon\" name=\"upload\"></sgds-icon>\n </sgds-button>\n ${this.hasFeedback && this.invalid ? this._renderFeedback() : this._renderHintText()}\n </div>\n <ul class=\"file-upload-list\">\n ${listItems}\n </ul>\n </div>\n `;\n }\n}\n\nexport default SgdsFileUpload;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","createRef","html","ref","fileUploadStyles","SgdsButton","SgdsCloseButton","SgdsIcon","__decorate","property","state","watch"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { __decorate } from 'tslib';
|
|
|
3
3
|
import { html } from 'lit';
|
|
4
4
|
import { property, state } from 'lit/decorators.js';
|
|
5
5
|
import { createRef, ref } from 'lit/directives/ref.js';
|
|
6
|
-
import { SgdsCloseButton } from '
|
|
6
|
+
import { SgdsCloseButton } from '../CloseButton/sgds-close-button.js';
|
|
7
7
|
import { SgdsButton } from '../Button/sgds-button.js';
|
|
8
8
|
import css_248z from './file-upload.js';
|
|
9
9
|
import FormControlElement from '../../base/form-control-element.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-file-upload.js","sources":["../../../../src/components/FileUpload/sgds-file-upload.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport fileUploadStyles from \"./file-upload.css\";\n\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/**\n * @summary Allows users to upload files of various sizes and formats\n *\n * @slot default - Label for file upload button\n *\n * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail\n */\n\nexport class SgdsFileUpload extends SgdsFormValidatorMixin(FormControlElement) {\n static styles = [...FormControlElement.styles, fileUploadStyles];\n /**@internal */\n static dependencies = {\n \"sgds-button\": SgdsButton,\n \"sgds-close-button\": SgdsCloseButton,\n \"sgds-icon\": SgdsIcon\n };\n\n /** Allows multiple files to be listed for uploading */\n @property({ type: Boolean, reflect: true }) multiple = false;\n\n /** Specify the acceptable file type */\n @property({ type: String, reflect: true }) accept = \"\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback: string;\n\n /** Makes the input as a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n @state()\n private selectedFiles: File[] = [];\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage(): string {\n return this._mixinGetValidationMessage();\n }\n /**\n * Returns files selected for upload\n */\n public get files(): File[] {\n return this.selectedFiles;\n }\n\n private _setFileList(files: FileList) {\n this.emit(\"sgds-files-selected\", { detail: files });\n }\n\n private inputRef = createRef<HTMLInputElement>();\n\n private _handleClick(event: Event) {\n event.preventDefault();\n if (!this.disabled) {\n // Get a reference to the input element using the inputRef\n const inputElement = this.inputRef.value;\n // Do something with the input element\n inputElement.click();\n }\n }\n\n private _handleChange(event: Event) {\n const inputElement = event.target as HTMLInputElement;\n const files = inputElement.files as FileList;\n\n if (files.length > 0) {\n this.selectedFiles = Array.from(files);\n }\n // Trigger a re-render of the component to update the list of selected files\n this._setFileList(files);\n this.requestUpdate();\n super._mixinHandleChange(event);\n }\n\n private _removeFileHandler(index: number) {\n const inputElement = this.inputRef.value;\n const attachments = inputElement.files;\n\n const fileBuffer = new DataTransfer();\n for (let i = 0; i < attachments.length; i++) {\n if (index !== i) fileBuffer.items.add(attachments[i]);\n }\n\n // Assign buffer to file input\n inputElement.files = fileBuffer.files;\n // Re-populate selected files to the lists\n this._setFileList(fileBuffer.files);\n this.selectedFiles = Array.from(fileBuffer.files);\n\n // Trigger a re-render of the component to update the list of selected files\n this.requestUpdate();\n this._mixinValidate(this.input);\n }\n\n private _clearAllFiles() {\n const inputElement = this.inputRef.value;\n const fileBuffer = new DataTransfer();\n inputElement.files = fileBuffer.files;\n this._setFileList(fileBuffer.files);\n this.selectedFiles = Array.from(fileBuffer.files);\n }\n\n /**\n * fileupload requries a custom _mixinResetFormControl for clearing files\n */\n private _mixinResetFormControl() {\n this._clearAllFiles();\n this._mixinResetValidity(this.input);\n }\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n }\n protected _renderLabel() {\n const labelTemplate = html`\n <label for=${this._controlId} id=${this._labelId} class=\"form-label\"> ${this.label} </label>\n `;\n return this.label && labelTemplate;\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n\n protected _renderFeedback() {\n return html`\n <div class=\"invalid-feedback-container\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `;\n }\n render() {\n const getCheckedIcon = () => {\n return html`<sgds-icon name=\"check-circle-fill\" class=\"${this.invalid ? \"invalid\" : \"valid\"}\"></sgds-icon>`;\n };\n\n const listItems = this.selectedFiles.map(\n (file, index) => html`\n <li key=${index} class=\"file-upload-list-item\">\n ${getCheckedIcon()}\n <span class=\"filename\">${file.name}</span>\n <sgds-close-button\n aria-label=\"remove the file\"\n @click=${() => this._removeFileHandler(index)}\n ></sgds-close-button>\n </li>\n `\n );\n\n return html`\n <div class=\"file-upload\">\n <input\n ${ref(this.inputRef)}\n type=\"file\"\n @change=${this._handleChange}\n ?multiple=${this.multiple}\n accept=${this.accept}\n id=${this._controlId}\n ?required=${this.required}\n ?disabled=${this.disabled}\n />\n <div class=\"file-upload-container\">\n ${this._renderLabel()}\n <sgds-button variant=\"outline\" ?disabled=${this.disabled} @click=${this._handleClick}>\n <label for=${this._controlId}><slot></slot></label>\n <sgds-icon slot=\"rightIcon\" name=\"upload\"></sgds-icon>\n </sgds-button>\n ${this.hasFeedback && this.invalid ? this._renderFeedback() : this._renderHintText()}\n </div>\n <ul class=\"file-upload-list\">\n ${listItems}\n </ul>\n </div>\n `;\n }\n}\n\nexport default SgdsFileUpload;\n"],"names":["fileUploadStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-file-upload.js","sources":["../../../../src/components/FileUpload/sgds-file-upload.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport fileUploadStyles from \"./file-upload.css\";\n\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/**\n * @summary Allows users to upload files of various sizes and formats\n *\n * @slot default - Label for file upload button\n *\n * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail\n */\n\nexport class SgdsFileUpload extends SgdsFormValidatorMixin(FormControlElement) {\n static styles = [...FormControlElement.styles, fileUploadStyles];\n /**@internal */\n static dependencies = {\n \"sgds-button\": SgdsButton,\n \"sgds-close-button\": SgdsCloseButton,\n \"sgds-icon\": SgdsIcon\n };\n\n /** Allows multiple files to be listed for uploading */\n @property({ type: Boolean, reflect: true }) multiple = false;\n\n /** Specify the acceptable file type */\n @property({ type: String, reflect: true }) accept = \"\";\n\n /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n /**Feedback text for error state when validated */\n @property({ type: String, reflect: true }) invalidFeedback: string;\n\n /** Makes the input as a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n @state()\n private selectedFiles: File[] = [];\n\n /**\n * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n */\n public reportValidity(): boolean {\n return this._mixinReportValidity();\n }\n /**\n * Checks for validity without any native error popup message\n */\n public checkValidity(): boolean {\n return this._mixinCheckValidity();\n }\n /**\n * Returns the ValidityState object\n */\n public get validity(): ValidityState {\n return this._mixinGetValidity();\n }\n /**\n * Returns the validation message based on the ValidityState\n */\n public get validationMessage(): string {\n return this._mixinGetValidationMessage();\n }\n /**\n * Returns files selected for upload\n */\n public get files(): File[] {\n return this.selectedFiles;\n }\n\n private _setFileList(files: FileList) {\n this.emit(\"sgds-files-selected\", { detail: files });\n }\n\n private inputRef = createRef<HTMLInputElement>();\n\n private _handleClick(event: Event) {\n event.preventDefault();\n if (!this.disabled) {\n // Get a reference to the input element using the inputRef\n const inputElement = this.inputRef.value;\n // Do something with the input element\n inputElement.click();\n }\n }\n\n private _handleChange(event: Event) {\n const inputElement = event.target as HTMLInputElement;\n const files = inputElement.files as FileList;\n\n if (files.length > 0) {\n this.selectedFiles = Array.from(files);\n }\n // Trigger a re-render of the component to update the list of selected files\n this._setFileList(files);\n this.requestUpdate();\n super._mixinHandleChange(event);\n }\n\n private _removeFileHandler(index: number) {\n const inputElement = this.inputRef.value;\n const attachments = inputElement.files;\n\n const fileBuffer = new DataTransfer();\n for (let i = 0; i < attachments.length; i++) {\n if (index !== i) fileBuffer.items.add(attachments[i]);\n }\n\n // Assign buffer to file input\n inputElement.files = fileBuffer.files;\n // Re-populate selected files to the lists\n this._setFileList(fileBuffer.files);\n this.selectedFiles = Array.from(fileBuffer.files);\n\n // Trigger a re-render of the component to update the list of selected files\n this.requestUpdate();\n this._mixinValidate(this.input);\n }\n\n private _clearAllFiles() {\n const inputElement = this.inputRef.value;\n const fileBuffer = new DataTransfer();\n inputElement.files = fileBuffer.files;\n this._setFileList(fileBuffer.files);\n this.selectedFiles = Array.from(fileBuffer.files);\n }\n\n /**\n * fileupload requries a custom _mixinResetFormControl for clearing files\n */\n private _mixinResetFormControl() {\n this._clearAllFiles();\n this._mixinResetValidity(this.input);\n }\n @watch(\"disabled\", { waitUntilFirstUpdate: true })\n _handleDisabledChange() {\n // Disabled form controls are always valid, so we need to recheck validity when the state changes\n this.setInvalid(false);\n }\n protected _renderLabel() {\n const labelTemplate = html`\n <label for=${this._controlId} id=${this._labelId} class=\"form-label\"> ${this.label} </label>\n `;\n return this.label && labelTemplate;\n }\n\n protected _renderHintText() {\n const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n return this.hintText && hintTextTemplate;\n }\n\n protected _renderFeedback() {\n return html`\n <div class=\"invalid-feedback-container\">\n <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n </div>\n </div>\n `;\n }\n render() {\n const getCheckedIcon = () => {\n return html`<sgds-icon name=\"check-circle-fill\" class=\"${this.invalid ? \"invalid\" : \"valid\"}\"></sgds-icon>`;\n };\n\n const listItems = this.selectedFiles.map(\n (file, index) => html`\n <li key=${index} class=\"file-upload-list-item\">\n ${getCheckedIcon()}\n <span class=\"filename\">${file.name}</span>\n <sgds-close-button\n aria-label=\"remove the file\"\n @click=${() => this._removeFileHandler(index)}\n ></sgds-close-button>\n </li>\n `\n );\n\n return html`\n <div class=\"file-upload\">\n <input\n ${ref(this.inputRef)}\n type=\"file\"\n @change=${this._handleChange}\n ?multiple=${this.multiple}\n accept=${this.accept}\n id=${this._controlId}\n ?required=${this.required}\n ?disabled=${this.disabled}\n />\n <div class=\"file-upload-container\">\n ${this._renderLabel()}\n <sgds-button variant=\"outline\" ?disabled=${this.disabled} @click=${this._handleClick}>\n <label for=${this._controlId}><slot></slot></label>\n <sgds-icon slot=\"rightIcon\" name=\"upload\"></sgds-icon>\n </sgds-button>\n ${this.hasFeedback && this.invalid ? this._renderFeedback() : this._renderHintText()}\n </div>\n <ul class=\"file-upload-list\">\n ${listItems}\n </ul>\n </div>\n `;\n }\n}\n\nexport default SgdsFileUpload;\n"],"names":["fileUploadStyles"],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
|
|
6
6
|
var lit = require('lit');
|
|
7
7
|
|
|
8
|
-
var css_248z = lit.css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-color-fixed-light);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-fixed-light);
|
|
8
|
+
var css_248z = lit.css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-color-fixed-light);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-fixed-light);width:fit-content}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible),slot::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}.links slot::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
|
|
9
9
|
|
|
10
10
|
exports["default"] = css_248z;
|
|
11
11
|
//# sourceMappingURL=footer-item.cjs.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { css } from 'lit';
|
|
3
3
|
|
|
4
|
-
var css_248z = css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-color-fixed-light);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-fixed-light);
|
|
4
|
+
var css_248z = css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-color-fixed-light);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-fixed-light);width:fit-content}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible),slot::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}.links slot::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
7
7
|
//# sourceMappingURL=footer-item.js.map
|