@aurodesignsystem-dev/auro-drawer 0.0.0-pr131.7 → 0.0.0-pr131.8
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/demo/auro-drawer.min.js
CHANGED
|
@@ -2656,6 +2656,10 @@ class AuroFloater extends i$1 {
|
|
|
2656
2656
|
|
|
2657
2657
|
if (changedProperties.has("triggerElement")) {
|
|
2658
2658
|
this.floater.configure(this, this.floaterConfig.prefix);
|
|
2659
|
+
|
|
2660
|
+
// Use bibLabel + aria-labelledby on the <dialog> instead of aria-label
|
|
2661
|
+
// directly — iOS VoiceOver does not reliably read aria-label on <dialog>.
|
|
2662
|
+
this.bib.bibLabel = this.triggerElement?.textContent.trim();
|
|
2659
2663
|
}
|
|
2660
2664
|
|
|
2661
2665
|
if (changedProperties.has("isPopoverVisible")) {
|
|
@@ -3632,10 +3636,6 @@ class AuroDrawer extends AuroFloater {
|
|
|
3632
3636
|
"aria-controls",
|
|
3633
3637
|
this.bib.getAttribute("id"),
|
|
3634
3638
|
);
|
|
3635
|
-
|
|
3636
|
-
// Use bibLabel + aria-labelledby on the <dialog> instead of aria-label
|
|
3637
|
-
// directly — iOS VoiceOver does not reliably read aria-label on <dialog>.
|
|
3638
|
-
this.bib.bibLabel = this.triggerElement.textContent.trim();
|
|
3639
3639
|
}
|
|
3640
3640
|
// role="dialog" and aria-modal are provided natively by the <dialog> element;
|
|
3641
3641
|
// do not set them manually here.
|
|
@@ -7,7 +7,7 @@ import{unsafeStatic as e,literal as t,html as o}from"lit/static-html.js";import{
|
|
|
7
7
|
<div class="backdrop" part="backdrop"></div>
|
|
8
8
|
<slot></slot>
|
|
9
9
|
</dialog>
|
|
10
|
-
`}}let Ue;function $e(){if(!Ue){const e=getComputedStyle(document.documentElement).getPropertyValue("--ds-grid-breakpoint-md");Ue=Number(e.replace("px","").trim())||768}return Ue}class Oe extends a{constructor(e){super(),this.behavior=e,this.floater=void 0;const t=`${this.floaterConfig.prefix.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}-bib`;this.floaterBibTag=c.prototype.generateTag(t,"0.0.0",De),this._savedScrollY=void 0,this._scrollLocked=!1,this._boundTouchMoveHandler=void 0,this._boundResizeHandler=void 0}get floaterConfig(){return{prefix:"auroFloater"}}static get properties(){return{isPopoverVisible:{attribute:"open",type:Boolean,reflect:!0},triggerElement:{attribute:!1}}}firstUpdated(){this.floater=new Me(this,this.behavior),this.floater.configure(this,this.floaterConfig.prefix),this.bib.addEventListener("dialog-cancel",()=>{this.modal||this.hide()}),this.bib.addEventListener("dialog-backdrop-click",()=>{this.modal||this.hide()})}disconnectedCallback(){this.floater&&this.hide("disconnect"),this._restorePageScroll(),this._unlockTouchScroll(),this._stopResizeWatch()}updated(e){this.floater.handleUpdate(e),e.has("triggerElement")&&this.floater.configure(this,this.floaterConfig.prefix),e.has("isPopoverVisible")&&(this.isPopoverVisible?this.show():this.hide())}async show(){if(this.floater.showBib(),this.bib?.dialog||await(this.bib?.updateComplete),!this.bib?.dialog)return;const e=this.nested??!1,t=this.modal??!1;e||!t?(this.bib.dialog.setAttribute("popover","manual"),this.bib.dialog.showPopover(),this._startResizeWatch()):(document.body.offsetWidth<$e()&&(this._lockTouchScroll(),this._lockPageScroll()),this.bib.dialog.showModal())}hide(e=void 0){this._restorePageScroll(),this._unlockTouchScroll(),this._stopResizeWatch(),this.bib?.dialog?.open&&setTimeout(()=>{this.bib.dialog.close()},300),this.floater.hideBib(e),"disconnect"===e&&this.floater.disconnect()}_lockPageScroll(){this._savedScrollY=window.scrollY,document.body.style.position="fixed",document.body.style.top=`-${this._savedScrollY}px`,document.body.style.width="100%",document.body.style.overflow="hidden",document.documentElement.style.overflow="hidden",this._scrollLocked=!0}_restorePageScroll(){this._scrollLocked&&(document.body.style.position="",document.body.style.top="",document.body.style.width="",document.body.style.overflow="",document.documentElement.style.overflow="",window.scrollTo(0,this._savedScrollY||0),this._savedScrollY=void 0,this._scrollLocked=!1)}_lockTouchScroll(){this._boundTouchMoveHandler||(this._boundTouchMoveHandler=e=>{e.composedPath().some(e=>e!==document&&e.scrollHeight>e.clientHeight)||e.preventDefault()},document.addEventListener("touchmove",this._boundTouchMoveHandler,{passive:!1}))}_unlockTouchScroll(){this._boundTouchMoveHandler&&(document.removeEventListener("touchmove",this._boundTouchMoveHandler,{passive:!1}),this._boundTouchMoveHandler=void 0)}_startResizeWatch(){this._boundResizeHandler||(this._boundResizeHandler=()=>{document.body.offsetWidth<$e()?this._scrollLocked||(this._lockPageScroll(),this._lockTouchScroll()):(this._restorePageScroll(),this._unlockTouchScroll())},window.addEventListener("resize",this._boundResizeHandler))}_stopResizeWatch(){this._boundResizeHandler&&(window.removeEventListener("resize",this._boundResizeHandler),this._boundResizeHandler=void 0)}render(){return o`
|
|
10
|
+
`}}let Ue;function $e(){if(!Ue){const e=getComputedStyle(document.documentElement).getPropertyValue("--ds-grid-breakpoint-md");Ue=Number(e.replace("px","").trim())||768}return Ue}class Oe extends a{constructor(e){super(),this.behavior=e,this.floater=void 0;const t=`${this.floaterConfig.prefix.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}-bib`;this.floaterBibTag=c.prototype.generateTag(t,"0.0.0",De),this._savedScrollY=void 0,this._scrollLocked=!1,this._boundTouchMoveHandler=void 0,this._boundResizeHandler=void 0}get floaterConfig(){return{prefix:"auroFloater"}}static get properties(){return{isPopoverVisible:{attribute:"open",type:Boolean,reflect:!0},triggerElement:{attribute:!1}}}firstUpdated(){this.floater=new Me(this,this.behavior),this.floater.configure(this,this.floaterConfig.prefix),this.bib.addEventListener("dialog-cancel",()=>{this.modal||this.hide()}),this.bib.addEventListener("dialog-backdrop-click",()=>{this.modal||this.hide()})}disconnectedCallback(){this.floater&&this.hide("disconnect"),this._restorePageScroll(),this._unlockTouchScroll(),this._stopResizeWatch()}updated(e){this.floater.handleUpdate(e),e.has("triggerElement")&&(this.floater.configure(this,this.floaterConfig.prefix),this.bib.bibLabel=this.triggerElement?.textContent.trim()),e.has("isPopoverVisible")&&(this.isPopoverVisible?this.show():this.hide())}async show(){if(this.floater.showBib(),this.bib?.dialog||await(this.bib?.updateComplete),!this.bib?.dialog)return;const e=this.nested??!1,t=this.modal??!1;e||!t?(this.bib.dialog.setAttribute("popover","manual"),this.bib.dialog.showPopover(),this._startResizeWatch()):(document.body.offsetWidth<$e()&&(this._lockTouchScroll(),this._lockPageScroll()),this.bib.dialog.showModal())}hide(e=void 0){this._restorePageScroll(),this._unlockTouchScroll(),this._stopResizeWatch(),this.bib?.dialog?.open&&setTimeout(()=>{this.bib.dialog.close()},300),this.floater.hideBib(e),"disconnect"===e&&this.floater.disconnect()}_lockPageScroll(){this._savedScrollY=window.scrollY,document.body.style.position="fixed",document.body.style.top=`-${this._savedScrollY}px`,document.body.style.width="100%",document.body.style.overflow="hidden",document.documentElement.style.overflow="hidden",this._scrollLocked=!0}_restorePageScroll(){this._scrollLocked&&(document.body.style.position="",document.body.style.top="",document.body.style.width="",document.body.style.overflow="",document.documentElement.style.overflow="",window.scrollTo(0,this._savedScrollY||0),this._savedScrollY=void 0,this._scrollLocked=!1)}_lockTouchScroll(){this._boundTouchMoveHandler||(this._boundTouchMoveHandler=e=>{e.composedPath().some(e=>e!==document&&e.scrollHeight>e.clientHeight)||e.preventDefault()},document.addEventListener("touchmove",this._boundTouchMoveHandler,{passive:!1}))}_unlockTouchScroll(){this._boundTouchMoveHandler&&(document.removeEventListener("touchmove",this._boundTouchMoveHandler,{passive:!1}),this._boundTouchMoveHandler=void 0)}_startResizeWatch(){this._boundResizeHandler||(this._boundResizeHandler=()=>{document.body.offsetWidth<$e()?this._scrollLocked||(this._lockPageScroll(),this._lockTouchScroll()):(this._restorePageScroll(),this._unlockTouchScroll())},window.addEventListener("resize",this._boundResizeHandler))}_stopResizeWatch(){this._boundResizeHandler&&(window.removeEventListener("resize",this._boundResizeHandler),this._boundResizeHandler=void 0)}render(){return o`
|
|
11
11
|
<${this.floaterBibTag} id="bib"
|
|
12
12
|
?data-show=${this.isPopoverVisible}
|
|
13
13
|
?onBackdrop="${this.floaterConfig.backdrop}">
|
|
@@ -130,4 +130,4 @@ import{unsafeStatic as e,literal as t,html as o}from"lit/static-html.js";import{
|
|
|
130
130
|
</div>
|
|
131
131
|
`}
|
|
132
132
|
</div>
|
|
133
|
-
`}}customElements.get("auro-drawer-content")||customElements.define("auro-drawer-content",Lt);const Ft=["lg","md","sm","xs"];function qt(e){if(!(Ft.includes(e)?e:void 0))return;return getComputedStyle(document.documentElement).getPropertyValue("--ds-grid-breakpoint-"+e)}const _t={backdrop:!0,prefix:"auroDrawer"};class Mt extends Oe{constructor(){super("drawer"),this._initializeDefaults()}_initializeDefaults(){this.closeButtonAppearance="default",this.placement="right",this.size="lg",this.fullscreenBreakpoint="sm",this.drawerBib=void 0}static get properties(){return{...Oe.properties,closeButtonAppearance:{type:String,attribute:"close-button-appearance",carryDown:!0,reflect:!0},fullscreenBreakpoint:{type:String,reflect:!0},modal:{type:Boolean,carryDown:!0,reflect:!0},nested:{type:Boolean,reflect:!0},onDark:{type:Boolean,carryDown:!0,reflect:!0},placement:{type:String,carryDown:!0},size:{type:String,carryDown:!0},unformatted:{type:Boolean,carryDown:!0,reflect:!0}}}static register(e="auro-drawer"){l.prototype.registerComponent(e,Mt)}get floaterConfig(){return{...super.floaterConfig,..._t,placement:this.placement,fullscreenBreakpoint:qt(this.fullscreenBreakpoint)}}set expanded(e){e?this.drawerBib.setAttribute("stretch",""):this.drawerBib.removeAttribute("stretch")}get expanded(){return this.drawerBib.hasAttribute("stretch")}firstUpdated(){super.firstUpdated(),l.prototype.handleComponentTagRename(this,"auro-drawer"),this.drawerBib=document.createElement("auro-drawer-content"),this.drawerBib.triggerElement=this.triggerElement,this.drawerBib.addEventListener("close-click",()=>{this.hide()}),this.append(this.drawerBib),this.bib.setAttribute("exportparts","backdrop:drawer-backdrop"),this.setupAria()}setupAria(){this.triggerElement&&(this.triggerElement.setAttribute("aria-haspopup","dialog"),this.triggerElement.setAttribute("aria-controls",this.bib.getAttribute("id"))
|
|
133
|
+
`}}customElements.get("auro-drawer-content")||customElements.define("auro-drawer-content",Lt);const Ft=["lg","md","sm","xs"];function qt(e){if(!(Ft.includes(e)?e:void 0))return;return getComputedStyle(document.documentElement).getPropertyValue("--ds-grid-breakpoint-"+e)}const _t={backdrop:!0,prefix:"auroDrawer"};class Mt extends Oe{constructor(){super("drawer"),this._initializeDefaults()}_initializeDefaults(){this.closeButtonAppearance="default",this.placement="right",this.size="lg",this.fullscreenBreakpoint="sm",this.drawerBib=void 0}static get properties(){return{...Oe.properties,closeButtonAppearance:{type:String,attribute:"close-button-appearance",carryDown:!0,reflect:!0},fullscreenBreakpoint:{type:String,reflect:!0},modal:{type:Boolean,carryDown:!0,reflect:!0},nested:{type:Boolean,reflect:!0},onDark:{type:Boolean,carryDown:!0,reflect:!0},placement:{type:String,carryDown:!0},size:{type:String,carryDown:!0},unformatted:{type:Boolean,carryDown:!0,reflect:!0}}}static register(e="auro-drawer"){l.prototype.registerComponent(e,Mt)}get floaterConfig(){return{...super.floaterConfig,..._t,placement:this.placement,fullscreenBreakpoint:qt(this.fullscreenBreakpoint)}}set expanded(e){e?this.drawerBib.setAttribute("stretch",""):this.drawerBib.removeAttribute("stretch")}get expanded(){return this.drawerBib.hasAttribute("stretch")}firstUpdated(){super.firstUpdated(),l.prototype.handleComponentTagRename(this,"auro-drawer"),this.drawerBib=document.createElement("auro-drawer-content"),this.drawerBib.triggerElement=this.triggerElement,this.drawerBib.addEventListener("close-click",()=>{this.hide()}),this.append(this.drawerBib),this.bib.setAttribute("exportparts","backdrop:drawer-backdrop"),this.setupAria()}setupAria(){this.triggerElement&&(this.triggerElement.setAttribute("aria-haspopup","dialog"),this.triggerElement.setAttribute("aria-controls",this.bib.getAttribute("id")))}updateDrawerBibAttribute(e,t){"boolean"==typeof t||void 0===t?t?this.drawerBib.setAttribute(e,""):this.drawerBib.removeAttribute(e):this.drawerBib.setAttribute(e,t)}updated(e){super.updated(e),[...this.children].forEach(e=>{e!==this.drawerBib&&this.drawerBib.append(e)}),[...e.entries()].forEach(([e])=>{Mt.properties[e].carryDown&&this.updateDrawerBibAttribute(Mt.properties[e].attribute||e,this[e])}),e.has("isPopoverVisible")&&(this.drawerBib.visible=this.isPopoverVisible,this.isPopoverVisible||(this.drawerBib.closing=!0)),e.has("triggerElement")&&(this.drawerBib&&(this.drawerBib.triggerElement=this.triggerElement),this.setupAria())}}export{Mt as A};
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroDrawer}from"./auro-drawer-
|
|
1
|
+
export{A as AuroDrawer}from"./auro-drawer-BphK1Ich.js";import"lit/static-html.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";
|
package/dist/registered.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{A as i}from"./auro-drawer-
|
|
1
|
+
import{A as i}from"./auro-drawer-BphK1Ich.js";import"lit/static-html.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";i.register();
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-drawer",
|
|
10
|
-
"version": "0.0.0-pr131.
|
|
10
|
+
"version": "0.0.0-pr131.8",
|
|
11
11
|
"description": "auro-drawer HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|