@esri/calcite-components 5.2.0-next.51 → 5.2.0-next.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/{4TO23BV4.js → 2BXLNQIZ.js} +1 -1
- package/dist/cdn/{THXSMECI.js → 2MV25LR7.js} +1 -1
- package/dist/cdn/{KFSZBCPH.js → 2UU4GC6J.js} +1 -1
- package/dist/cdn/{6HO77J6T.js → 2WG5KCNC.js} +1 -1
- package/dist/cdn/2YMRGSC2.js +2 -0
- package/dist/cdn/{IE5G6O52.js → 3FLYIPBS.js} +1 -1
- package/dist/cdn/{RRPA7NB4.js → 3NIXPUL3.js} +1 -1
- package/dist/cdn/{B2TNIEW3.js → 3XC5LAPA.js} +1 -1
- package/dist/cdn/{IEIIWDML.js → 4PY4DYLG.js} +1 -1
- package/dist/cdn/{76ZYXGRY.js → 4QRSP54L.js} +1 -1
- package/dist/cdn/{KHK7J6IE.js → 52QBBLJO.js} +1 -1
- package/dist/cdn/{5MDO2B37.js → 5H2UKO4C.js} +1 -1
- package/dist/cdn/{PCBDGQ4J.js → 5IY5AZID.js} +1 -1
- package/dist/cdn/{ZSAAJ4BI.js → 5KVPN6ZK.js} +1 -1
- package/dist/cdn/{XBBPDLMI.js → 5MWWANTK.js} +1 -1
- package/dist/cdn/{WVILGTYY.js → 66A37SAT.js} +1 -1
- package/dist/cdn/{S7XKI7YU.js → 6C45YMSU.js} +1 -1
- package/dist/cdn/{CKA4MFHD.js → 6CAVJUNQ.js} +1 -1
- package/dist/cdn/{P7GRG22F.js → 6DSDZW5H.js} +1 -1
- package/dist/cdn/{M7KP26CY.js → 6IGGHQTQ.js} +1 -1
- package/dist/cdn/{MJ5ROJA4.js → 6JD2UITH.js} +1 -1
- package/dist/cdn/{ODRFLVW5.js → 6RAAG5YR.js} +1 -1
- package/dist/cdn/{KULTRKZL.js → 6RY5N3R3.js} +1 -1
- package/dist/cdn/{HZPKL6NY.js → 6ZYKELKO.js} +1 -1
- package/dist/cdn/{T3LSROZR.js → 7DJSWIUP.js} +1 -1
- package/dist/cdn/{KIJX4TLZ.js → 7EPA3JVK.js} +1 -1
- package/dist/cdn/{2Y7HJHVP.js → 7MF3YSBV.js} +1 -1
- package/dist/cdn/{7XE2BKKY.js → 7VDY6654.js} +1 -1
- package/dist/cdn/{RRA4RJOO.js → A43H4ACK.js} +1 -1
- package/dist/cdn/{WXUNDUA5.js → AI3JLLET.js} +1 -1
- package/dist/cdn/{BAUPYISA.js → ANAJQLWU.js} +1 -1
- package/dist/cdn/{UZH6SGJE.js → ANJDXEZQ.js} +1 -1
- package/dist/cdn/{ZNJ2XDGO.js → ATKBKIJQ.js} +1 -1
- package/dist/cdn/{NK2I57OA.js → AUPHVCL5.js} +1 -1
- package/dist/cdn/{S7YMS5IN.js → AWNYLXEL.js} +1 -1
- package/dist/cdn/{KE25YOWC.js → BKUQTED6.js} +1 -1
- package/dist/cdn/{L224KCOI.js → BM4FIX25.js} +1 -1
- package/dist/cdn/{THNBYDTL.js → BOHDV2WG.js} +1 -1
- package/dist/cdn/{APLOAUMO.js → BYDMHOHU.js} +1 -1
- package/dist/cdn/{HRSIX6SO.js → D3KUIDF2.js} +1 -1
- package/dist/cdn/{BWM5XLRY.js → DEAZPR3O.js} +1 -1
- package/dist/cdn/{HSO4KPOQ.js → DFS62MDO.js} +1 -1
- package/dist/cdn/{PDC4QPCI.js → DGCYSGCP.js} +1 -1
- package/dist/cdn/{Q6LKF7SP.js → DTVZ6D4T.js} +1 -1
- package/dist/cdn/{Q7B2QAPN.js → E67ZD3GJ.js} +1 -1
- package/dist/cdn/{OKN43VP5.js → E7FBXTLX.js} +1 -1
- package/dist/cdn/{N7SQSMPQ.js → EAXTNNI7.js} +1 -1
- package/dist/cdn/{ZAJIXOE6.js → EFDH2OAA.js} +1 -1
- package/dist/cdn/{ZHFVBZK7.js → EFTPKAD4.js} +1 -1
- package/dist/cdn/{5QLQZ3FN.js → EHTNWRA6.js} +1 -1
- package/dist/cdn/{2HDRYG3M.js → EVRI2FZL.js} +1 -1
- package/dist/cdn/{PB3C664M.js → F6BRM2Q3.js} +1 -1
- package/dist/cdn/{G5PZE3RW.js → F6KQ2PW5.js} +1 -1
- package/dist/cdn/{FVPB7L5J.js → FA4PIP7T.js} +1 -1
- package/dist/cdn/{66YMIVMC.js → FDLVSPXR.js} +1 -1
- package/dist/cdn/{XIX56OS2.js → FJEFDFTK.js} +1 -1
- package/dist/cdn/{XOYDFWCV.js → FSWRPJLY.js} +1 -1
- package/dist/cdn/{S6WTOHBZ.js → FU7PP7EZ.js} +1 -1
- package/dist/cdn/{M75NOFQP.js → FZH24ECO.js} +1 -1
- package/dist/cdn/{MIAPUEU4.js → G5TMRI7H.js} +1 -1
- package/dist/cdn/{L5S3O4ZK.js → GBVEV7ZN.js} +1 -1
- package/dist/cdn/{4XBQEF7L.js → GFDADXBN.js} +1 -1
- package/dist/cdn/GFITUMVO.js +2 -0
- package/dist/cdn/{QWHWRQBF.js → GGDUHGLC.js} +1 -1
- package/dist/cdn/{SQGA3UND.js → GLWU3SXR.js} +1 -1
- package/dist/cdn/{YS7ZE6JF.js → GNJXEF4J.js} +1 -1
- package/dist/cdn/{NCUXUMBU.js → GTE72X6T.js} +1 -1
- package/dist/cdn/{NRLB6IFE.js → GVBK444B.js} +1 -1
- package/dist/cdn/{OGPS3PB3.js → HDG74ORI.js} +1 -1
- package/dist/cdn/{WH6UUJUP.js → HH2EQQZ3.js} +1 -1
- package/dist/cdn/HLH6INWE.js +2 -0
- package/dist/cdn/{ECLI2KIJ.js → HZLJJMO4.js} +1 -1
- package/dist/cdn/{OXBDGOJD.js → I7SS2H7N.js} +1 -1
- package/dist/cdn/{UBSPPXKG.js → IMX2HMIC.js} +1 -1
- package/dist/cdn/{HNXICR4F.js → IOHLPB7D.js} +1 -1
- package/dist/cdn/{XFISEQOY.js → IPJTEYGY.js} +1 -1
- package/dist/cdn/{RROJOJFB.js → JCZBUECQ.js} +1 -1
- package/dist/cdn/{DACOJMJV.js → JCZBYNA2.js} +1 -1
- package/dist/cdn/JHM3CANJ.js +2 -0
- package/dist/cdn/{EF36O6P6.js → JIK5ZQVP.js} +1 -1
- package/dist/cdn/{RJLZ3CSA.js → JZYK465F.js} +1 -1
- package/dist/cdn/{PESUGKR3.js → KE26D5WZ.js} +1 -1
- package/dist/cdn/{43M7T45H.js → KHKFNVS4.js} +1 -1
- package/dist/cdn/{HVNUBXM5.js → KINMWU7P.js} +1 -1
- package/dist/cdn/{P5QVNOJV.js → LA7TZ3RU.js} +1 -1
- package/dist/cdn/{YY4V6ORK.js → LKIC5Q3A.js} +1 -1
- package/dist/cdn/{2MDR3YPU.js → LTBVUWRD.js} +1 -1
- package/dist/cdn/{WOIATOWA.js → M6KSWL4Z.js} +1 -1
- package/dist/cdn/{ZEN5OHWM.js → MJB7R5GQ.js} +1 -1
- package/dist/cdn/{HOS7YXPP.js → MJQQAIHL.js} +1 -1
- package/dist/cdn/{KNTIU7B6.js → MOKVR42W.js} +1 -1
- package/dist/cdn/{NF7NM4EC.js → MSW5F7EK.js} +1 -1
- package/dist/cdn/{FNZSFQYE.js → MTCCNI5K.js} +1 -1
- package/dist/cdn/{NAHIFA4F.js → N3ZBO7ID.js} +1 -1
- package/dist/cdn/{ORQRAMY3.js → NBWVAOQC.js} +1 -1
- package/dist/cdn/{CC5SFMPC.js → NJVWU7BY.js} +1 -1
- package/dist/cdn/{VOLJFPQE.js → NMX5HV2Q.js} +1 -1
- package/dist/cdn/{4YQPK6ES.js → NPCJUFMM.js} +1 -1
- package/dist/cdn/{K7NZHQL6.js → NPZ4RBQN.js} +1 -1
- package/dist/cdn/{KN6BH5QA.js → NV6PJ5SV.js} +1 -1
- package/dist/cdn/{TJG7VOM4.js → O22MTMZA.js} +1 -1
- package/dist/cdn/OBTZFN2X.js +2 -0
- package/dist/cdn/{5RNPDMF2.js → OH4FTT72.js} +1 -1
- package/dist/cdn/{JYPFN53C.js → OJZ4M3GG.js} +1 -1
- package/dist/cdn/{LUYJUBP7.js → OOXKVN2X.js} +1 -1
- package/dist/cdn/{O46NANBE.js → OTBZJFX2.js} +1 -1
- package/dist/cdn/{KLL4S456.js → PBPDN3PE.js} +1 -1
- package/dist/cdn/{ATO5HGZN.js → PJVOJMGT.js} +1 -1
- package/dist/cdn/{YYZW4JB2.js → PNZLYX3G.js} +1 -1
- package/dist/cdn/{2KVSVGPZ.js → PVV3MFQP.js} +1 -1
- package/dist/cdn/{XMCTANRY.js → PYKCOD27.js} +1 -1
- package/dist/cdn/{H7QC5AY6.js → PZL4DLCQ.js} +1 -1
- package/dist/cdn/{KOPPGROZ.js → Q5YHMXUJ.js} +1 -1
- package/dist/cdn/{GKYUUELE.js → QABJPTQU.js} +1 -1
- package/dist/cdn/{AVPK5VBD.js → QCWY5N73.js} +1 -1
- package/dist/cdn/{7UFHHDWQ.js → QE32LPWF.js} +1 -1
- package/dist/cdn/{BQ27S7LT.js → QHQH5PTR.js} +1 -1
- package/dist/cdn/{CKSU2JN7.js → R4T7XG7V.js} +1 -1
- package/dist/cdn/{5WM2I45W.js → R73HR5QE.js} +1 -1
- package/dist/cdn/{B5DXUTFL.js → RI3HBI3T.js} +1 -1
- package/dist/cdn/{XBPQ64A6.js → RIUBPUMD.js} +1 -1
- package/dist/cdn/{OEREUZGO.js → RMUDLUVA.js} +1 -1
- package/dist/cdn/{2TEBIGRG.js → RSRMZD4B.js} +1 -1
- package/dist/cdn/{4NTWEC4C.js → RVS2N4SY.js} +1 -1
- package/dist/cdn/{EOSQONY2.js → S6DWZD7K.js} +1 -1
- package/dist/cdn/{76KVX4B7.js → SUJVRYGQ.js} +1 -1
- package/dist/cdn/{DRKLOFZZ.js → TTXTXN6Q.js} +1 -1
- package/dist/cdn/{NNRA34VX.js → U75LEECI.js} +1 -1
- package/dist/cdn/{WPMX4RRZ.js → UMXV3POK.js} +1 -1
- package/dist/cdn/{TXRTWBIB.js → V55BNPIA.js} +1 -1
- package/dist/cdn/{RCYEVVYP.js → VQYLTV7G.js} +1 -1
- package/dist/cdn/{XG567JTC.js → VSITSV3K.js} +1 -1
- package/dist/cdn/{2XRXW5WJ.js → WAAXC3ZO.js} +1 -1
- package/dist/cdn/{64YMJBZZ.js → WJ6NLHUK.js} +1 -1
- package/dist/cdn/{MFDA2OUR.js → WK6TX2CC.js} +1 -1
- package/dist/cdn/{DSF3U5QO.js → WP7GA5R2.js} +1 -1
- package/dist/cdn/{KQTLHKRN.js → WT2YX74I.js} +1 -1
- package/dist/cdn/{R36AFCES.js → WUCXAHMP.js} +1 -1
- package/dist/cdn/{73XTMYB6.js → WYHZBJSW.js} +1 -1
- package/dist/cdn/{E4RJ4R3X.js → XMEW42ZT.js} +1 -1
- package/dist/cdn/{33XIUBFW.js → XSSANQHT.js} +1 -1
- package/dist/cdn/{CSKT2575.js → XZNL6EO5.js} +1 -1
- package/dist/cdn/{X5CTWRF2.js → YJKBYNMB.js} +1 -1
- package/dist/cdn/{3HRK4SIW.js → YQG3K7RY.js} +1 -1
- package/dist/cdn/{DEM6WWUS.js → ZIBTU3RD.js} +1 -1
- package/dist/cdn/index.js +1 -1
- package/dist/chunks/resources8.js +4 -0
- package/dist/chunks/runtime.js +3 -3
- package/dist/components/calcite-dialog/customElement.d.ts +2 -0
- package/dist/components/calcite-dialog/customElement.js +3 -2
- package/dist/components/calcite-flow-item/customElement.d.ts +2 -0
- package/dist/components/calcite-flow-item/customElement.js +3 -2
- package/dist/components/calcite-panel/customElement.d.ts +2 -0
- package/dist/components/calcite-panel/customElement.js +25 -6
- package/dist/components/calcite-sheet/customElement.d.ts +8 -2
- package/dist/components/calcite-sheet/customElement.js +21 -6
- package/dist/docs/api.json +1 -1
- package/dist/docs/docs.json +1 -1
- package/dist/docs/vscode.css-custom-data.json +1 -1
- package/dist/docs/vscode.html-custom-data.json +1 -1
- package/dist/docs/web-types.json +1 -1
- package/dist/loader.js +1 -1
- package/dist/types/lumina.d.ts +1 -1
- package/dist/types/preact.d.ts +1 -1
- package/dist/types/react.d.ts +1 -1
- package/dist/types/stencil.d.ts +1 -1
- package/package.json +2 -2
- package/dist/cdn/BLWTCPBG.js +0 -2
- package/dist/cdn/TJLKYFR6.js +0 -2
- package/dist/cdn/TSQHGSFP.js +0 -2
- package/dist/cdn/XNLDUIVX.js +0 -2
- package/dist/cdn/ZR3LBIFK.js +0 -2
|
@@ -33,7 +33,7 @@ const ICONS = {
|
|
|
33
33
|
dragVertical: "drag-resize-vertical",
|
|
34
34
|
dragHorizontal: "drag-resize-horizontal"
|
|
35
35
|
};
|
|
36
|
-
const styles = css`:host{position:absolute;inset:0;display:flex;visibility:hidden!important;--calcite-sheet-scrim-background-internal: rgba(0, 0, 0, .85);--calcite-scrim-shadow-block-start-internal: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-block-end-internal: 0 -4px 8px -1px rgba(0, 0, 0, .08), 0 -2px 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-start-internal: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-end-internal: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04)}:host([embedded]){z-index:var(--calcite-z-index-overlay)}.calcite--rtl{--calcite-scrim-shadow-inline-start-internal: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-end-internal: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04)}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.container{visibility:hidden;position:fixed;box-sizing:border-box;display:flex;opacity:0;color:var(--calcite-sheet-text-color, var(--calcite-color-text-2));transition:visibility 0ms linear var(--calcite-internal-animation-timing-medium),opacity var(--calcite-internal-animation-timing-medium) ease-in-out}:host([top-layer-disabled]) .container,:host([embedded]) .container{z-index:var(--calcite-z-index-overlay)}:host([position=inline-start]) .container{justify-content:flex-start;inset-block:0;inset-inline:0 auto;--calcite-sheet-hidden-position-internal: translate3d(-1rem, 0, 0)}:host([position=inline-end]) .container{justify-content:flex-end;inset-block:0;inset-inline:auto 0;--calcite-sheet-hidden-position-internal: translate3d(1rem, 0, 0)}:host([position=block-start]) .container{align-items:flex-start;inset-block:0 auto;inset-inline:0;--calcite-sheet-hidden-position-internal: translate3d(0, -1rem, 0)}:host([position=block-end]) .container{align-items:flex-end;inset-block:auto 0;inset-inline:0;--calcite-sheet-hidden-position-internal: translate3d(0, 1rem, 0)}:host([display-mode=float]) .content{box-shadow:var(--calcite-sheet-shadow, var(--calcite-shadow-sm))}:host([display-mode=overlay][position=inline-start]) .content{box-shadow:var(--calcite-scrim-shadow-inline-start-internal)}:host([display-mode=overlay][position=inline-end]) .content{box-shadow:var(--calcite-scrim-shadow-inline-end-internal)}:host([display-mode=overlay][position=block-start]) .content{box-shadow:var(--calcite-scrim-shadow-block-start-internal)}:host([display-mode=overlay][position=block-end]) .content{box-shadow:var(--calcite-scrim-shadow-block-end-internal)}:host([position^=inline]) .content{inline-size:var(--calcite-sheet-width-internal);max-inline-size:var(--calcite-sheet-max-width-internal);min-inline-size:var(--calcite-sheet-min-width-internal)}:host([position^=block]) .content{block-size:var(--calcite-sheet-height-internal);max-block-size:var(--calcite-sheet-max-height-internal);min-block-size:var(--calcite-sheet-min-height-internal)}:host([position^=inline]) .width-s{--calcite-sheet-width-internal: var(--calcite-sheet-width, 15vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 360px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 260px)}:host([position^=inline]) .width-m{--calcite-sheet-width-internal: var(--calcite-sheet-width, 25vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 420px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 300px)}:host([position^=inline]) .width-l{--calcite-sheet-width-internal: var(--calcite-sheet-width, 45vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 680px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 340px)}:host([position^=block]) .height-s{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 160px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 30vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 30vh)}:host([position^=block]) .height-m{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 200px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 45vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 50vh)}:host([position^=block]) .height-l{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 240px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 60vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 70vh)}.scrim{--calcite-scrim-background: var(--calcite-sheet-scrim-background, var(--calcite-sheet-scrim-background-internal));position:fixed;inset:0;display:flex;overflow:hidden;z-index:calc(var(--calcite-z-index) * -1)}:host([top-layer-disabled]) .scrim{z-index:unset}[popover]{padding:0;margin:0;border:none;background-color:transparent;position:fixed;display:flex;inline-size:100%;block-size:100%}[popover]:popover-open{display:flex}:host([opened]){visibility:visible!important}.content{position:relative;box-sizing:border-box;display:flex;max-inline-size:100%;padding:0;background-color:var(--calcite-sheet-background-color, var(--calcite-color-foreground-1));max-block-size:100%;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-medium) ease-in-out,visibility 0ms linear var(--calcite-internal-animation-timing-medium),opacity var(--calcite-internal-animation-timing-medium) ease-in-out;transform:var(--calcite-sheet-hidden-position-internal)}:host([top-layer-disabled]),:host([top-layer-disabled]) .content,:host([embedded]) .content{z-index:var(--calcite-z-index-modal)}.content-container{position:relative;display:flex;max-block-size:100%;max-inline-size:100%;flex:1 1 0%;overflow:hidden}.content-container ::slotted(*){block-size:auto}.container--open .content{transform:translateZ(0)}:host([display-mode=float]) .content,:host([display-mode=float]) .container,:host([display-mode=float]) .content-container{border-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([display-mode=float]) .container{padding:var(--calcite-spacing-md)}.container--open{visibility:visible;opacity:1;transition-delay:0ms}.container--open .content{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-medium) ease-in-out,visibility 0ms linear,opacity var(--calcite-internal-animation-timing-medium) ease-in-out,max-inline-size var(--calcite-internal-animation-timing-medium) ease-in-out,max-block-size var(--calcite-internal-animation-timing-medium) ease-in-out;transition-delay:0ms}@starting-style{.container--open{opacity:0;visibility:hidden}}:host([position=inline-start]) .content,:host([position=inline-end]) .content{block-size:100%}:host([position=inline-start]) .content{flex-direction:row}:host([position=inline-end]) .content{flex-direction:row-reverse}:host([position=block-start]) .content,:host([position=block-end]) .content{inline-size:100%}:host([position=block-start]) .content{flex-direction:column}:host([position=block-end]) .content{flex-direction:column-reverse}:host([resizable][position=inline-start]) .content{padding-inline-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=inline-end]) .content{padding-inline-start:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=block-start]) .content{padding-block-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=block-end]) .content{padding-block-start:var(--calcite-size-fixed-sm-plus)}.resize-handle{position:absolute;box-sizing:border-box;display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;outline:2px solid transparent;outline-offset:2px;--calcite-internal-sheet-resize-handle-offset: calc( (var(--calcite-size-fixed-xxl) - var(--calcite-size-fixed-sm-plus)) / 2 * -1 );z-index:var(--calcite-z-index-header)}.resize-handle:active .resize-handle-bar,.resize-handle:hover .resize-handle-bar{color:var(--calcite-sheet-resize-icon-color, var(--calcite-color-text-1));background-color:var(--calcite-sheet-resize-background-color, var(--calcite-color-foreground-3))}.resize-handle-bar{pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--calcite-sheet-resize-icon-color, var(--calcite-color-border-input));background-color:var(--calcite-sheet-resize-background-color, var(--calcite-color-background))}.resize-handle:focus .resize-handle-bar{outline-color:transparent;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))}:host([position=inline-start]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-end:var(--calcite-internal-sheet-resize-handle-offset);block-size:100%}:host([position=inline-start]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=inline-start]):host([display-mode=float]) .resize-handle-bar{border-start-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));border-end-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([position=inline-end]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-start:var(--calcite-internal-sheet-resize-handle-offset);block-size:100%}:host([position=inline-end]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=inline-end]):host([display-mode=float]) .resize-handle-bar{border-start-start-radius:.25rem;border-end-start-radius:.25rem}:host([position=block-start]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-end:var(--calcite-internal-sheet-resize-handle-offset)}:host([position=block-start]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-start:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=block-start]):host([display-mode=float]) .resize-handle-bar{border-end-end-radius:.25rem;border-end-start-radius:.25rem}:host([position=block-end]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-start:var(--calcite-internal-sheet-resize-handle-offset)}:host([position=block-end]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=block-end]):host([display-mode=float]) .resize-handle-bar{border-start-start-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));border-start-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([position]) .container--embedded{pointer-events:auto;position:absolute;inline-size:100%;max-inline-size:100%;min-inline-size:100%;block-size:100%;max-block-size:100%;min-block-size:100%}:host([position]) .container--embedded calcite-scrim{position:absolute}:host([hidden]){display:none}[hidden]{display:none}`;
|
|
36
|
+
const styles = css`:host{position:absolute;inset:0;display:flex;visibility:hidden!important;--calcite-sheet-scrim-background-internal: rgba(0, 0, 0, .85);--calcite-scrim-shadow-block-start-internal: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-block-end-internal: 0 -4px 8px -1px rgba(0, 0, 0, .08), 0 -2px 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-start-internal: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-end-internal: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04)}:host([embedded]){z-index:var(--calcite-z-index-overlay)}.calcite--rtl{--calcite-scrim-shadow-inline-start-internal: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-end-internal: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04)}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.container{visibility:hidden;position:fixed;box-sizing:border-box;display:flex;opacity:0;color:var(--calcite-sheet-text-color, var(--calcite-color-text-2));transition:visibility 0ms linear var(--calcite-internal-animation-timing-medium),opacity var(--calcite-internal-animation-timing-medium) ease-in-out}:host([top-layer-disabled]) .container,:host([embedded]) .container{z-index:var(--calcite-z-index-overlay)}:host([modal-disabled]),:host([modal-disabled]) .container{pointer-events:none}:host([position=inline-start]) .container{justify-content:flex-start;inset-block:0;inset-inline:0 auto;--calcite-sheet-hidden-position-internal: translate3d(-1rem, 0, 0)}:host([position=inline-end]) .container{justify-content:flex-end;inset-block:0;inset-inline:auto 0;--calcite-sheet-hidden-position-internal: translate3d(1rem, 0, 0)}:host([position=block-start]) .container{align-items:flex-start;inset-block:0 auto;inset-inline:0;--calcite-sheet-hidden-position-internal: translate3d(0, -1rem, 0)}:host([position=block-end]) .container{align-items:flex-end;inset-block:auto 0;inset-inline:0;--calcite-sheet-hidden-position-internal: translate3d(0, 1rem, 0)}:host([display-mode=float]) .content{box-shadow:var(--calcite-sheet-shadow, var(--calcite-shadow-sm))}:host([display-mode=overlay][position=inline-start]) .content{box-shadow:var(--calcite-scrim-shadow-inline-start-internal)}:host([display-mode=overlay][position=inline-end]) .content{box-shadow:var(--calcite-scrim-shadow-inline-end-internal)}:host([display-mode=overlay][position=block-start]) .content{box-shadow:var(--calcite-scrim-shadow-block-start-internal)}:host([display-mode=overlay][position=block-end]) .content{box-shadow:var(--calcite-scrim-shadow-block-end-internal)}:host([position^=inline]) .content{inline-size:var(--calcite-sheet-width-internal);max-inline-size:var(--calcite-sheet-max-width-internal);min-inline-size:var(--calcite-sheet-min-width-internal)}:host([position^=block]) .content{block-size:var(--calcite-sheet-height-internal);max-block-size:var(--calcite-sheet-max-height-internal);min-block-size:var(--calcite-sheet-min-height-internal)}:host([position^=inline]) .width-s{--calcite-sheet-width-internal: var(--calcite-sheet-width, 15vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 360px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 260px)}:host([position^=inline]) .width-m{--calcite-sheet-width-internal: var(--calcite-sheet-width, 25vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 420px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 300px)}:host([position^=inline]) .width-l{--calcite-sheet-width-internal: var(--calcite-sheet-width, 45vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 680px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 340px)}:host([position^=block]) .height-s{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 160px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 30vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 30vh)}:host([position^=block]) .height-m{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 200px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 45vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 50vh)}:host([position^=block]) .height-l{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 240px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 60vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 70vh)}.scrim{--calcite-scrim-background: var(--calcite-sheet-scrim-background, var(--calcite-sheet-scrim-background-internal));position:fixed;inset:0;display:flex;overflow:hidden;z-index:calc(var(--calcite-z-index) * -1)}:host([top-layer-disabled]) .scrim{z-index:unset}[popover]{padding:0;margin:0;border:none;background-color:transparent;position:fixed;display:flex;inline-size:100%;block-size:100%}[popover]:popover-open{display:flex}:host([opened]){visibility:visible!important}.content{position:relative;box-sizing:border-box;display:flex;max-inline-size:100%;padding:0;background-color:var(--calcite-sheet-background-color, var(--calcite-color-foreground-1));max-block-size:100%;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-medium) ease-in-out,visibility 0ms linear var(--calcite-internal-animation-timing-medium),opacity var(--calcite-internal-animation-timing-medium) ease-in-out;transform:var(--calcite-sheet-hidden-position-internal)}:host([top-layer-disabled]),:host([top-layer-disabled]) .content,:host([embedded]) .content{z-index:var(--calcite-z-index-modal)}.content-container{position:relative;display:flex;max-block-size:100%;max-inline-size:100%;flex:1 1 0%;overflow:hidden}.content-container ::slotted(*){block-size:auto}.container--open .content{transform:translateZ(0)}:host([display-mode=float]) .content,:host([display-mode=float]) .container,:host([display-mode=float]) .content-container{border-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([display-mode=float]) .container{padding:var(--calcite-spacing-md)}.container--open{visibility:visible;opacity:1;transition-delay:0ms}.container--open .content{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-medium) ease-in-out,visibility 0ms linear,opacity var(--calcite-internal-animation-timing-medium) ease-in-out,max-inline-size var(--calcite-internal-animation-timing-medium) ease-in-out,max-block-size var(--calcite-internal-animation-timing-medium) ease-in-out;transition-delay:0ms}@starting-style{.container--open{opacity:0;visibility:hidden}}:host([position=inline-start]) .content,:host([position=inline-end]) .content{block-size:100%}:host([position=inline-start]) .content{flex-direction:row}:host([position=inline-end]) .content{flex-direction:row-reverse}:host([position=block-start]) .content,:host([position=block-end]) .content{inline-size:100%}:host([position=block-start]) .content{flex-direction:column}:host([position=block-end]) .content{flex-direction:column-reverse}:host([resizable][position=inline-start]) .content{padding-inline-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=inline-end]) .content{padding-inline-start:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=block-start]) .content{padding-block-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=block-end]) .content{padding-block-start:var(--calcite-size-fixed-sm-plus)}.resize-handle{position:absolute;box-sizing:border-box;display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;outline:2px solid transparent;outline-offset:2px;--calcite-internal-sheet-resize-handle-offset: calc( (var(--calcite-size-fixed-xxl) - var(--calcite-size-fixed-sm-plus)) / 2 * -1 );z-index:var(--calcite-z-index-header)}.resize-handle:active .resize-handle-bar,.resize-handle:hover .resize-handle-bar{color:var(--calcite-sheet-resize-icon-color, var(--calcite-color-text-1));background-color:var(--calcite-sheet-resize-background-color, var(--calcite-color-foreground-3))}.resize-handle-bar{pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--calcite-sheet-resize-icon-color, var(--calcite-color-border-input));background-color:var(--calcite-sheet-resize-background-color, var(--calcite-color-background))}.resize-handle:focus .resize-handle-bar{outline-color:transparent;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))}:host([position=inline-start]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-end:var(--calcite-internal-sheet-resize-handle-offset);block-size:100%}:host([position=inline-start]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=inline-start]):host([display-mode=float]) .resize-handle-bar{border-start-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));border-end-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([position=inline-end]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-start:var(--calcite-internal-sheet-resize-handle-offset);block-size:100%}:host([position=inline-end]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=inline-end]):host([display-mode=float]) .resize-handle-bar{border-start-start-radius:.25rem;border-end-start-radius:.25rem}:host([position=block-start]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-end:var(--calcite-internal-sheet-resize-handle-offset)}:host([position=block-start]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-start:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=block-start]):host([display-mode=float]) .resize-handle-bar{border-end-end-radius:.25rem;border-end-start-radius:.25rem}:host([position=block-end]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-start:var(--calcite-internal-sheet-resize-handle-offset)}:host([position=block-end]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=block-end]):host([display-mode=float]) .resize-handle-bar{border-start-start-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));border-start-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([position]) .container--embedded{pointer-events:auto;position:absolute;inline-size:100%;max-inline-size:100%;min-inline-size:100%;block-size:100%;max-block-size:100%;min-block-size:100%}:host([position]) .container--embedded calcite-scrim{position:absolute}:host([hidden]){display:none}[hidden]{display:none}`;
|
|
37
37
|
class Sheet extends LitElement {
|
|
38
38
|
constructor() {
|
|
39
39
|
super();
|
|
@@ -43,7 +43,7 @@ class Sheet extends LitElement {
|
|
|
43
43
|
triggerProp: "open",
|
|
44
44
|
focusTrapOptions: {
|
|
45
45
|
// scrim closes on click, so we let it take over
|
|
46
|
-
clickOutsideDeactivates: () => this.embedded,
|
|
46
|
+
clickOutsideDeactivates: () => this.modalDisabled || this.embedded,
|
|
47
47
|
escapeDeactivates: (event) => {
|
|
48
48
|
if (!event.defaultPrevented && !this.escapeDisabled) {
|
|
49
49
|
this.open = false;
|
|
@@ -56,6 +56,7 @@ class Sheet extends LitElement {
|
|
|
56
56
|
this.usePreventDocumentScroll = usePreventDocumentScroll()(this);
|
|
57
57
|
this.messages = useT9n();
|
|
58
58
|
this.mutationObserver = createObserver("mutation", () => this.handleMutationObserver());
|
|
59
|
+
this._modalDisabled = false;
|
|
59
60
|
this._open = false;
|
|
60
61
|
this.openProp = "opened";
|
|
61
62
|
this.transitionProp = "opacity";
|
|
@@ -108,13 +109,24 @@ class Sheet extends LitElement {
|
|
|
108
109
|
this.listen("keydown", this.keyDownHandler);
|
|
109
110
|
}
|
|
110
111
|
static {
|
|
111
|
-
this.properties = { resizeValues: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], embedded: [7, {}, { reflect: true, type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], heightScale: [3, {}, { reflect: true }], height: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], opened: [7, {}, { reflect: true, type: Boolean }], outsideCloseDisabled: [7, {}, { reflect: true, type: Boolean }], position: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
|
|
112
|
+
this.properties = { resizeValues: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], embedded: [7, {}, { reflect: true, type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], heightScale: [3, {}, { reflect: true }], height: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], modalDisabled: [7, {}, { reflect: true, type: Boolean }], open: [7, {}, { reflect: true, type: Boolean }], opened: [7, {}, { reflect: true, type: Boolean }], outsideCloseDisabled: [7, {}, { reflect: true, type: Boolean }], position: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
|
|
112
113
|
}
|
|
113
114
|
static {
|
|
114
115
|
this.styles = styles;
|
|
115
116
|
}
|
|
116
117
|
get preventDocumentScroll() {
|
|
117
|
-
return !this.embedded;
|
|
118
|
+
return !this.embedded && !this.modalDisabled;
|
|
119
|
+
}
|
|
120
|
+
get modalDisabled() {
|
|
121
|
+
return this._modalDisabled;
|
|
122
|
+
}
|
|
123
|
+
set modalDisabled(value) {
|
|
124
|
+
if (value === this._modalDisabled) {
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
const oldPreventDocumentScroll = this.preventDocumentScroll;
|
|
128
|
+
this._modalDisabled = value;
|
|
129
|
+
this.requestUpdate("preventDocumentScroll", oldPreventDocumentScroll);
|
|
118
130
|
}
|
|
119
131
|
get open() {
|
|
120
132
|
return this._open;
|
|
@@ -156,6 +168,9 @@ class Sheet extends LitElement {
|
|
|
156
168
|
this.embedded = false;
|
|
157
169
|
this.cleanUpInteractions();
|
|
158
170
|
}
|
|
171
|
+
focusTrapDisabledOverride() {
|
|
172
|
+
return this.modalDisabled && this.focusTrapDisabled;
|
|
173
|
+
}
|
|
159
174
|
async setOpenState(value) {
|
|
160
175
|
if (this.beforeClose && !value) {
|
|
161
176
|
try {
|
|
@@ -311,7 +326,7 @@ class Sheet extends LitElement {
|
|
|
311
326
|
const isBlockPosition = position === "block-start" || position === "block-end";
|
|
312
327
|
setAttribute(this.el, "aria-describedby", IDS.sheetContent);
|
|
313
328
|
this.el.ariaLabel = this.label;
|
|
314
|
-
this.el.ariaModal = "true";
|
|
329
|
+
this.el.ariaModal = this.modalDisabled ? "false" : "true";
|
|
315
330
|
this.el.role = "dialog";
|
|
316
331
|
return html`<div class=${safeClassMap({
|
|
317
332
|
[CSS.container]: true,
|
|
@@ -320,7 +335,7 @@ class Sheet extends LitElement {
|
|
|
320
335
|
[CSS_UTILITY.rtl]: dir === "rtl",
|
|
321
336
|
[getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale),
|
|
322
337
|
[getDimensionClass("height", this.height, this.heightScale)]: !!(this.height || this.heightScale)
|
|
323
|
-
})} .popover=${!this.embedded ? "manual" : void 0} ${ref(this.transitionRef)}
|
|
338
|
+
})} .popover=${!this.embedded ? "manual" : void 0} ${ref(this.transitionRef)}>${this.modalDisabled ? null : html`<calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim>`}<div class=${safeClassMap(CSS.content)} id=${IDS.sheetContent} ${ref(this.contentRef)}><div class=${safeClassMap(CSS.contentContainer)}><slot></slot></div>${resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resizeEnabled} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.maxBlockSize, resizeValues.maxInlineSize)} .ariaValueMin=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.minBlockSize, resizeValues.minInlineSize)} .ariaValueNow=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.blockSize, resizeValues.inlineSize)} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null}</div></div>`;
|
|
324
339
|
}
|
|
325
340
|
}
|
|
326
341
|
customElement("calcite-sheet", Sheet);
|