@limetech/lime-elements 37.64.0 → 37.64.2
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/CHANGELOG.md +17 -0
- package/dist/cjs/limel-action-bar_4.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-dialog.cjs.entry.js +2 -6
- package/dist/cjs/limel-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-markdown.cjs.entry.js +1 -1
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js +1 -1
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-text-editor.cjs.entry.js.map +1 -1
- package/dist/cjs/{markdown-parser-4b5e23e2.js → markdown-parser-ba7cc71e.js} +8 -3
- package/dist/cjs/{markdown-parser-4b5e23e2.js.map → markdown-parser-ba7cc71e.js.map} +1 -1
- package/dist/collection/components/action-bar/action-bar.js +1 -1
- package/dist/collection/components/action-bar/action-bar.js.map +1 -1
- package/dist/collection/components/dialog/dialog.css +5 -0
- package/dist/collection/components/dialog/dialog.js +1 -5
- package/dist/collection/components/dialog/dialog.js.map +1 -1
- package/dist/collection/components/markdown/markdown-parser.js +7 -2
- package/dist/collection/components/markdown/markdown-parser.js.map +1 -1
- package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.js +5 -2
- package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.js.map +1 -1
- package/dist/collection/components/text-editor/text-editor.js +5 -2
- package/dist/collection/components/text-editor/text-editor.js.map +1 -1
- package/dist/esm/limel-action-bar_4.entry.js.map +1 -1
- package/dist/esm/limel-dialog.entry.js +2 -6
- package/dist/esm/limel-dialog.entry.js.map +1 -1
- package/dist/esm/limel-markdown.entry.js +1 -1
- package/dist/esm/limel-prosemirror-adapter.entry.js +1 -1
- package/dist/esm/limel-prosemirror-adapter.entry.js.map +1 -1
- package/dist/esm/limel-text-editor.entry.js.map +1 -1
- package/dist/esm/{markdown-parser-18863266.js → markdown-parser-3c0af898.js} +8 -3
- package/dist/esm/{markdown-parser-18863266.js.map → markdown-parser-3c0af898.js.map} +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-ca3ddffb.js → p-086509a5.js} +2 -2
- package/dist/lime-elements/p-086509a5.js.map +1 -0
- package/dist/lime-elements/{p-65ddae59.entry.js → p-2ab02bd9.entry.js} +2 -2
- package/dist/lime-elements/{p-65ddae59.entry.js.map → p-2ab02bd9.entry.js.map} +1 -1
- package/dist/lime-elements/{p-02e9b8ce.entry.js → p-4b7ea1b9.entry.js} +2 -2
- package/dist/lime-elements/p-4b7ea1b9.entry.js.map +1 -0
- package/dist/lime-elements/p-6c1c51bd.entry.js.map +1 -1
- package/dist/lime-elements/p-d9b7a208.entry.js.map +1 -1
- package/dist/lime-elements/{p-6b5743be.entry.js → p-da20ff72.entry.js} +2 -2
- package/dist/types/components/action-bar/action-bar.d.ts +1 -1
- package/dist/types/components/dialog/dialog.d.ts +0 -1
- package/dist/types/components/text-editor/prosemirror-adapter/prosemirror-adapter.d.ts +3 -1
- package/dist/types/components/text-editor/text-editor.d.ts +3 -1
- package/dist/types/components.d.ts +16 -8
- package/package.json +2 -2
- package/dist/lime-elements/p-02e9b8ce.entry.js.map +0 -1
- package/dist/lime-elements/p-ca3ddffb.js.map +0 -1
- /package/dist/lime-elements/{p-6b5743be.entry.js.map → p-da20ff72.entry.js.map} +0 -0
|
@@ -108,5 +108,5 @@ import{r as i,c as t,h as e,g as o}from"./p-443111b3.js";import{d as n}from"./p-
|
|
|
108
108
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
109
109
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
110
110
|
* THE SOFTWARE.
|
|
111
|
-
*/var S=O.strings;var A=function(i){d(t,i);function t(){return i!==null&&i.apply(this,arguments)||this}Object.defineProperty(t.prototype,"isOpen",{get:function(){return this.foundation.isOpen()},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"escapeKeyAction",{get:function(){return this.foundation.getEscapeKeyAction()},set:function(i){this.foundation.setEscapeKeyAction(i)},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"scrimClickAction",{get:function(){return this.foundation.getScrimClickAction()},set:function(i){this.foundation.setScrimClickAction(i)},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"autoStackButtons",{get:function(){return this.foundation.getAutoStackButtons()},set:function(i){this.foundation.setAutoStackButtons(i)},enumerable:false,configurable:true});t.attachTo=function(i){return new t(i)};t.prototype.initialize=function(i){var t,e;if(i===void 0){i=function(i,t){return new w(i,t)}}var o=this.root.querySelector(S.CONTAINER_SELECTOR);if(!o){throw new Error("Dialog component requires a "+S.CONTAINER_SELECTOR+" container element")}this.container=o;this.content=this.root.querySelector(S.CONTENT_SELECTOR);this.buttons=[].slice.call(this.root.querySelectorAll(S.BUTTON_SELECTOR));this.defaultButton=this.root.querySelector("["+S.BUTTON_DEFAULT_ATTRIBUTE+"]");this.focusTrapFactory=i;this.buttonRipples=[];try{for(var n=l(this.buttons),a=n.next();!a.done;a=n.next()){var d=a.value;this.buttonRipples.push(new h(d))}}catch(i){t={error:i}}finally{try{if(a&&!a.done&&(e=n.return))e.call(n)}finally{if(t)throw t.error}}};t.prototype.initialSyncWithDOM=function(){var i=this;this.focusTrap=p(this.container,this.focusTrapFactory,this.getInitialFocusEl()||undefined);this.handleClick=this.foundation.handleClick.bind(this.foundation);this.handleKeydown=this.foundation.handleKeydown.bind(this.foundation);this.handleDocumentKeydown=this.foundation.handleDocumentKeydown.bind(this.foundation);this.handleOpening=function(){document.addEventListener("keydown",i.handleDocumentKeydown)};this.handleClosing=function(){document.removeEventListener("keydown",i.handleDocumentKeydown)};this.listen("click",this.handleClick);this.listen("keydown",this.handleKeydown);this.listen(S.OPENING_EVENT,this.handleOpening);this.listen(S.CLOSING_EVENT,this.handleClosing)};t.prototype.destroy=function(){this.unlisten("click",this.handleClick);this.unlisten("keydown",this.handleKeydown);this.unlisten(S.OPENING_EVENT,this.handleOpening);this.unlisten(S.CLOSING_EVENT,this.handleClosing);this.handleClosing();this.buttonRipples.forEach((function(i){i.destroy()}));i.prototype.destroy.call(this)};t.prototype.layout=function(){this.foundation.layout()};t.prototype.open=function(){this.foundation.open()};t.prototype.close=function(i){if(i===void 0){i=""}this.foundation.close(i)};t.prototype.getDefaultFoundation=function(){var i=this;var t={addBodyClass:function(i){return document.body.classList.add(i)},addClass:function(t){return i.root.classList.add(t)},areButtonsStacked:function(){return v(i.buttons)},clickDefaultButton:function(){if(i.defaultButton&&!i.defaultButton.disabled){i.defaultButton.click()}},eventTargetMatches:function(i,t){return i?m(i,t):false},getActionFromEvent:function(i){if(!i.target){return""}var t=g(i.target,"["+S.ACTION_ATTRIBUTE+"]");return t&&t.getAttribute(S.ACTION_ATTRIBUTE)},getInitialFocusEl:function(){return i.getInitialFocusEl()},hasClass:function(t){return i.root.classList.contains(t)},isContentScrollable:function(){return _(i.content)},notifyClosed:function(t){return i.emit(S.CLOSED_EVENT,t?{action:t}:{})},notifyClosing:function(t){return i.emit(S.CLOSING_EVENT,t?{action:t}:{})},notifyOpened:function(){return i.emit(S.OPENED_EVENT,{})},notifyOpening:function(){return i.emit(S.OPENING_EVENT,{})},releaseFocus:function(){i.focusTrap.releaseFocus()},removeBodyClass:function(i){return document.body.classList.remove(i)},removeClass:function(t){return i.root.classList.remove(t)},reverseButtons:function(){i.buttons.reverse();i.buttons.forEach((function(i){i.parentElement.appendChild(i)}))},trapFocus:function(){i.focusTrap.trapFocus()},registerContentEventHandler:function(t,e){if(i.content instanceof HTMLElement){i.content.addEventListener(t,e)}},deregisterContentEventHandler:function(t,e){if(i.content instanceof HTMLElement){i.content.removeEventListener(t,e)}},isScrollableContentAtTop:function(){return b(i.content)},isScrollableContentAtBottom:function(){return x(i.content)},registerWindowEventHandler:function(i,t){window.addEventListener(i,t)},deregisterWindowEventHandler:function(i,t){window.removeEventListener(i,t)}};return new O(t)};t.prototype.getInitialFocusEl=function(){return this.root.querySelector("["+S.INITIAL_FOCUS_ATTRIBUTE+"]")};return t}(s);const D='@charset "UTF-8";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}:host{--dialog-background-color:var(--lime-elevated-surface-background-color);--header-heading-color:var(--dialog-heading-title-color);--header-subheading-color:var(--dialog-heading-subtitle-color);--header-supporting-text-color:var(--dialog-heading-supporting-text-color);--header-icon-color:var(--dialog-heading-icon-color);--header-icon-background-color:var(--dialog-heading-icon-background-color)}.mdc-dialog .mdc-dialog__surface{background-color:#fff;background-color:var(--mdc-theme-surface, #fff)}.mdc-dialog .mdc-dialog__scrim{background-color:rgba(0, 0, 0, 0.32)}.mdc-dialog .mdc-dialog__surface-scrim{background-color:rgba(0, 0, 0, 0.32)}.mdc-dialog .mdc-dialog__title{color:rgba(0, 0, 0, 0.87)}.mdc-dialog .mdc-dialog__content{color:rgba(0, 0, 0, 0.6)}.mdc-dialog .mdc-dialog__close{color:#000;color:var(--mdc-theme-on-surface, #000)}.mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple::before,.mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple::after{background-color:#000;background-color:var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000))}.mdc-dialog .mdc-dialog__close:hover .mdc-icon-button__ripple::before,.mdc-dialog .mdc-dialog__close.mdc-ripple-surface--hover .mdc-icon-button__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before,.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after{transition:opacity 150ms linear}.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title,.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__actions,.mdc-dialog.mdc-dialog--scrollable.mdc-dialog-scroll-divider-footer .mdc-dialog__actions{border-color:rgba(0, 0, 0, 0.12)}.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title{border-bottom:1px solid rgba(0, 0, 0, 0.12);margin-bottom:0}.mdc-dialog.mdc-dialog-scroll-divider-header.mdc-dialog--fullscreen .mdc-dialog__header{box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)}.mdc-dialog .mdc-dialog__surface{border-radius:4px;border-radius:var(--mdc-shape-medium, 4px)}.mdc-dialog__surface{box-shadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)}.mdc-dialog__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-headline6-font-size, 0.875rem);line-height:0.875rem;line-height:var(--mdc-typography-headline6-line-height, 0.875rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight, 500);letter-spacing:0.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing, 0.0125em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline6-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform, inherit)}.mdc-dialog__content{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, inherit));font-size:0.8125rem;font-size:var(--mdc-typography-body1-font-size, 0.8125rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height, 1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight, 400);letter-spacing:0.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, 0.03125em);text-decoration:inherit;text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform, inherit)}.mdc-dialog__title-icon{}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color, #fff)}.mdc-dialog,.mdc-dialog__scrim{position:fixed;top:0;left:0;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%}.mdc-dialog{display:none;z-index:7;z-index:var(--mdc-dialog-z-index, 7)}.mdc-dialog .mdc-dialog__content{padding:20px 24px 20px 24px}.mdc-dialog .mdc-dialog__surface{min-width:280px}@media (max-width: 592px){.mdc-dialog .mdc-dialog__surface{max-width:calc(100vw - 32px)}}@media (min-width: 592px){.mdc-dialog .mdc-dialog__surface{max-width:560px}}.mdc-dialog .mdc-dialog__surface{max-height:calc(100% - 32px)}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){.mdc-dialog .mdc-dialog__container{}}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-width:none}@media (max-width: 960px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:560px;width:560px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}@media (max-width: 720px) and (max-width: 672px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{width:calc(100vw - 112px)}}@media (max-width: 720px) and (min-width: 672px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{width:560px}}@media (max-width: 720px) and (max-height: 720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:calc(100vh - 160px)}}@media (max-width: 720px) and (min-height: 720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:560px}}@media (max-width: 720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}@media (max-width: 720px) and (max-height: 400px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{height:100%;max-height:100vh;max-width:100vw;width:100vw;border-radius:0}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{order:-1;left:-12px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header{padding:0 16px 9px;justify-content:flex-start}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title{margin-left:calc(16px - 2 * 12px)}}@media (max-width: 600px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{height:100%;max-height:100vh;max-width:100vw;width:100vw;border-radius:0}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{order:-1;left:-12px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header{padding:0 16px 9px;justify-content:flex-start}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title{margin-left:calc(16px - 2 * 12px)}}@media (min-width: 960px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{width:calc(100vw - 400px)}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}.mdc-dialog.mdc-dialog__scrim--hidden .mdc-dialog__scrim{opacity:0}.mdc-dialog__scrim{opacity:0;z-index:-1}.mdc-dialog__container{display:flex;flex-direction:row;align-items:center;justify-content:space-around;box-sizing:border-box;height:100%;transform:scale(0.8);opacity:0;pointer-events:none}.mdc-dialog__surface{position:relative;display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;box-sizing:border-box;max-width:100%;max-height:100%;pointer-events:auto;overflow-y:auto}.mdc-dialog__surface .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}[dir=rtl] .mdc-dialog__surface,.mdc-dialog__surface[dir=rtl]{text-align:right;}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-dialog__surface{outline:2px solid windowText}}.mdc-dialog__surface::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:2px solid transparent;border-radius:inherit;content:"";pointer-events:none}@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none){.mdc-dialog__surface::before{content:none}}.mdc-dialog__title{display:block;margin-top:0;position:relative;flex-shrink:0;box-sizing:border-box;margin:0 0 1px;padding:0 24px 9px}.mdc-dialog__title::before{display:inline-block;width:0;height:40px;content:"";vertical-align:0}[dir=rtl] .mdc-dialog__title,.mdc-dialog__title[dir=rtl]{text-align:right;}.mdc-dialog--scrollable .mdc-dialog__title{margin-bottom:1px;padding-bottom:15px}.mdc-dialog--fullscreen .mdc-dialog__header{align-items:baseline;border-bottom:1px solid transparent;display:inline-flex;justify-content:space-between;padding:0 24px 9px;z-index:1}.mdc-dialog--fullscreen .mdc-dialog__header .mdc-dialog__close{right:-12px}.mdc-dialog--fullscreen .mdc-dialog__title{margin-bottom:0;padding:0;border-bottom:0}.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__title{border-bottom:0;margin-bottom:0}.mdc-dialog--fullscreen .mdc-dialog__close{top:5px}.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__actions{border-top:1px solid transparent}.mdc-dialog__content{flex-grow:1;box-sizing:border-box;margin:0;overflow:auto;-webkit-overflow-scrolling:touch}.mdc-dialog__content>:first-child{margin-top:0}.mdc-dialog__content>:last-child{margin-bottom:0}.mdc-dialog__title+.mdc-dialog__content,.mdc-dialog__header+.mdc-dialog__content{padding-top:0}.mdc-dialog--scrollable .mdc-dialog__title+.mdc-dialog__content{padding-top:8px;padding-bottom:8px}.mdc-dialog__content .mdc-deprecated-list:first-child:last-child{padding:6px 0 0}.mdc-dialog--scrollable .mdc-dialog__content .mdc-deprecated-list:first-child:last-child{padding:0}.mdc-dialog__actions{display:flex;position:relative;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;box-sizing:border-box;min-height:52px;margin:0;padding:8px;border-top:1px solid transparent}.mdc-dialog--stacked .mdc-dialog__actions{flex-direction:column;align-items:flex-end}.mdc-dialog__button{margin-left:8px;margin-right:0;max-width:100%;text-align:right}[dir=rtl] .mdc-dialog__button,.mdc-dialog__button[dir=rtl]{margin-left:0;margin-right:8px;}.mdc-dialog__button:first-child{margin-left:0;margin-right:0}[dir=rtl] .mdc-dialog__button:first-child,.mdc-dialog__button:first-child[dir=rtl]{margin-left:0;margin-right:0;}[dir=rtl] .mdc-dialog__button,.mdc-dialog__button[dir=rtl]{text-align:left;}.mdc-dialog--stacked .mdc-dialog__button:not(:first-child){margin-top:12px}.mdc-dialog--open,.mdc-dialog--opening,.mdc-dialog--closing{display:flex}.mdc-dialog--opening .mdc-dialog__scrim{transition:opacity 150ms linear}.mdc-dialog--opening .mdc-dialog__container{transition:opacity 75ms linear, transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1)}.mdc-dialog--closing .mdc-dialog__scrim,.mdc-dialog--closing .mdc-dialog__container{transition:opacity 75ms linear}.mdc-dialog--closing .mdc-dialog__container{transform:none}.mdc-dialog--open .mdc-dialog__scrim{opacity:1}.mdc-dialog--open .mdc-dialog__container{transform:none;opacity:1}.mdc-dialog--open.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim{opacity:1;z-index:1}.mdc-dialog--open.mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim{transition:opacity 75ms linear}.mdc-dialog--open.mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim{transition:opacity 150ms linear}.mdc-dialog__surface-scrim{display:none;opacity:0;position:absolute;width:100%;height:100%}.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim,.mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim,.mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim{display:block}.mdc-dialog-scroll-lock{overflow:hidden}.mdc-dialog__content{font-family:inherit}.mdc-dialog{z-index:var(--dialog-z-index, 7);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}@media (max-width: 16032px){.mdc-dialog .mdc-dialog__surface{max-width:calc(100vw - 32px)}}@media (min-width: 16032px){.mdc-dialog .mdc-dialog__surface{max-width:16000px}}@media (max-height: 16032px){.mdc-dialog.full-screen .mdc-dialog__surface{max-height:calc(100% - 32px)}}@media (min-height: 16032px){.mdc-dialog.full-screen .mdc-dialog__surface{max-height:16000px}}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){.mdc-dialog.full-screen .mdc-dialog__container{}}@media (-ms-high-contrast: none) and (min-height: 16032px), (-ms-high-contrast: active) and (min-height: 16032px){.mdc-dialog.full-screen .mdc-dialog__container{align-items:stretch;height:auto}}.mdc-dialog.full-screen .mdc-dialog__container{height:100%;width:100%}.mdc-dialog.full-screen .mdc-dialog__container .mdc-dialog__surface{height:100%;width:100%}.mdc-dialog .mdc-dialog__scrim{background-color:rgba(var(--color-black), 0.4)}.mdc-dialog .mdc-dialog__container{height:100%;width:var(--dialog-width, auto)}.mdc-dialog .mdc-dialog__surface{width:var(--dialog-width, auto);height:var(--dialog-height, auto);background-color:var(--dialog-background-color);box-shadow:var(--shadow-depth-64);max-width:var(--dialog-max-width, calc(100vw - 2rem));max-height:var(--dialog-max-height, calc(100% - 2rem));border-radius:0.75rem}.mdc-dialog .mdc-dialog__content{--limel-top-edge-fade-height:var(--dialog-padding-top-bottom, 1.5rem);--limel-bottom-edge-fade-height:var(\n --dialog-padding-top-bottom,\n 1.5rem\n );--limel-overflow-mask-vertical:linear-gradient(\n to bottom,\n transparent 0%,\n black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n transparent 100%\n );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);color:var(--mdc-theme-on-surface);padding-left:var(--dialog-padding-left-right, min(1.25rem, 3vw));padding-right:var(--dialog-padding-left-right, min(1.25rem, 3vw))}#initialFocusElement{position:absolute;opacity:0;pointer-events:none;z-index:-1}slot[name=header]{display:none}slot[name=button]{display:flex;gap:0.5rem;width:100%;justify-content:flex-end}@media screen and (max-width: 760px){slot[name=button]{flex-direction:column-reverse}.mdc-dialog__actions{padding:min(1.5rem, 3vw);padding-top:1rem}}';const I=class{constructor(e){i(this,e);this.close=t(this,"close",7);this.closing=t(this,"closing",7);this.showFooter=true;this.heading=undefined;this.fullscreen=false;this.open=false;this.closingActions={escapeKey:true,scrimClick:true};this.handleMdcOpened=this.handleMdcOpened.bind(this);this.handleMdcClosed=this.handleMdcClosed.bind(this);this.handleMdcClosing=this.handleMdcClosing.bind(this)}connectedCallback(){this.initialize()}componentWillLoad(){this.id=a();this.showFooter=!!this.host.querySelector('[slot="button"]')}componentDidLoad(){this.initialize()}initialize(){const i=this.host.shadowRoot.querySelector(".mdc-dialog");if(!i){return}this.mdcDialog=new A(i);if(this.open){this.mdcDialog.open()}this.mdcDialog.listen("MDCDialog:opened",this.handleMdcOpened);this.mdcDialog.listen("MDCDialog:closed",this.handleMdcClosed);this.mdcDialog.listen("MDCDialog:closing",this.handleMdcClosing);this.setClosingActions()}disconnectedCallback(){this.mdcDialog.unlisten("MDCDialog:opened",this.handleMdcOpened);this.mdcDialog.unlisten("MDCDialog:closed",this.handleMdcClosed);this.mdcDialog.unlisten("MDCDialog:closing",this.handleMdcClosing);this.mdcDialog.destroy()}render(){return e("div",{class:{"mdc-dialog":true,"full-screen":!!this.fullscreen},role:"alertdialog","aria-modal":"true","aria-labelledby":"limel-dialog-title-"+this.id,"aria-describedby":"limel-dialog-content-"+this.id},e("input",{hidden:true,id:"initialFocusEl"}),e("div",{class:"mdc-dialog__container"},e("div",{class:"mdc-dialog__surface"},e("input",{type:"button",id:"initialFocusElement"}),this.renderHeading(),e("div",{class:"mdc-dialog__content",id:"limel-dialog-content-"+this.id},e("slot",null)),this.renderFooter())),e("div",{class:"mdc-dialog__scrim"}))}watchHandler(i,t){if(t===i){return}if(!this.mdcDialog){return}if(i){this.mdcDialog.open()}else{this.mdcDialog.close()}}closingActionsChanged(i,t){if(f(i,t)){return}this.setClosingActions()}handleMdcOpened(){const i=100;setTimeout(n,i)}handleMdcClosed(){if(this.open){this.close.emit()}this.open=false}handleMdcClosing(){this.closing.emit()}isBadgeHeading(i){return typeof i==="object"&&!!i.title&&!!i.icon}renderHeading(){if(this.isBadgeHeading(this.heading)){const{title:i,subtitle:t,supportingText:o,icon:n}=this.heading;return e("limel-header",{icon:n,heading:i,subheading:t,supportingText:o},e("slot",{name:"header-actions",slot:"actions"}))}else if(typeof this.heading==="string"){return e("limel-header",{heading:this.heading})}return null}renderFooter(){if(this.showFooter){return e("footer",{class:"mdc-dialog__actions"},e("slot",{name:"button"}))}}setClosingActions(){this.mdcDialog.scrimClickAction="";if(this.closingActions.scrimClick){this.mdcDialog.scrimClickAction="close"}this.mdcDialog.escapeKeyAction="";if(this.closingActions.escapeKey){this.mdcDialog.escapeKeyAction="close"}}get host(){return o(this)}static get watchers(){return{open:["watchHandler"],closingActions:["closingActionsChanged"]}}};I.style=D;export{I as limel_dialog};
|
|
112
|
-
//# sourceMappingURL=p-
|
|
111
|
+
*/var S=O.strings;var A=function(i){d(t,i);function t(){return i!==null&&i.apply(this,arguments)||this}Object.defineProperty(t.prototype,"isOpen",{get:function(){return this.foundation.isOpen()},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"escapeKeyAction",{get:function(){return this.foundation.getEscapeKeyAction()},set:function(i){this.foundation.setEscapeKeyAction(i)},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"scrimClickAction",{get:function(){return this.foundation.getScrimClickAction()},set:function(i){this.foundation.setScrimClickAction(i)},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"autoStackButtons",{get:function(){return this.foundation.getAutoStackButtons()},set:function(i){this.foundation.setAutoStackButtons(i)},enumerable:false,configurable:true});t.attachTo=function(i){return new t(i)};t.prototype.initialize=function(i){var t,e;if(i===void 0){i=function(i,t){return new w(i,t)}}var o=this.root.querySelector(S.CONTAINER_SELECTOR);if(!o){throw new Error("Dialog component requires a "+S.CONTAINER_SELECTOR+" container element")}this.container=o;this.content=this.root.querySelector(S.CONTENT_SELECTOR);this.buttons=[].slice.call(this.root.querySelectorAll(S.BUTTON_SELECTOR));this.defaultButton=this.root.querySelector("["+S.BUTTON_DEFAULT_ATTRIBUTE+"]");this.focusTrapFactory=i;this.buttonRipples=[];try{for(var n=l(this.buttons),a=n.next();!a.done;a=n.next()){var d=a.value;this.buttonRipples.push(new h(d))}}catch(i){t={error:i}}finally{try{if(a&&!a.done&&(e=n.return))e.call(n)}finally{if(t)throw t.error}}};t.prototype.initialSyncWithDOM=function(){var i=this;this.focusTrap=p(this.container,this.focusTrapFactory,this.getInitialFocusEl()||undefined);this.handleClick=this.foundation.handleClick.bind(this.foundation);this.handleKeydown=this.foundation.handleKeydown.bind(this.foundation);this.handleDocumentKeydown=this.foundation.handleDocumentKeydown.bind(this.foundation);this.handleOpening=function(){document.addEventListener("keydown",i.handleDocumentKeydown)};this.handleClosing=function(){document.removeEventListener("keydown",i.handleDocumentKeydown)};this.listen("click",this.handleClick);this.listen("keydown",this.handleKeydown);this.listen(S.OPENING_EVENT,this.handleOpening);this.listen(S.CLOSING_EVENT,this.handleClosing)};t.prototype.destroy=function(){this.unlisten("click",this.handleClick);this.unlisten("keydown",this.handleKeydown);this.unlisten(S.OPENING_EVENT,this.handleOpening);this.unlisten(S.CLOSING_EVENT,this.handleClosing);this.handleClosing();this.buttonRipples.forEach((function(i){i.destroy()}));i.prototype.destroy.call(this)};t.prototype.layout=function(){this.foundation.layout()};t.prototype.open=function(){this.foundation.open()};t.prototype.close=function(i){if(i===void 0){i=""}this.foundation.close(i)};t.prototype.getDefaultFoundation=function(){var i=this;var t={addBodyClass:function(i){return document.body.classList.add(i)},addClass:function(t){return i.root.classList.add(t)},areButtonsStacked:function(){return v(i.buttons)},clickDefaultButton:function(){if(i.defaultButton&&!i.defaultButton.disabled){i.defaultButton.click()}},eventTargetMatches:function(i,t){return i?m(i,t):false},getActionFromEvent:function(i){if(!i.target){return""}var t=g(i.target,"["+S.ACTION_ATTRIBUTE+"]");return t&&t.getAttribute(S.ACTION_ATTRIBUTE)},getInitialFocusEl:function(){return i.getInitialFocusEl()},hasClass:function(t){return i.root.classList.contains(t)},isContentScrollable:function(){return _(i.content)},notifyClosed:function(t){return i.emit(S.CLOSED_EVENT,t?{action:t}:{})},notifyClosing:function(t){return i.emit(S.CLOSING_EVENT,t?{action:t}:{})},notifyOpened:function(){return i.emit(S.OPENED_EVENT,{})},notifyOpening:function(){return i.emit(S.OPENING_EVENT,{})},releaseFocus:function(){i.focusTrap.releaseFocus()},removeBodyClass:function(i){return document.body.classList.remove(i)},removeClass:function(t){return i.root.classList.remove(t)},reverseButtons:function(){i.buttons.reverse();i.buttons.forEach((function(i){i.parentElement.appendChild(i)}))},trapFocus:function(){i.focusTrap.trapFocus()},registerContentEventHandler:function(t,e){if(i.content instanceof HTMLElement){i.content.addEventListener(t,e)}},deregisterContentEventHandler:function(t,e){if(i.content instanceof HTMLElement){i.content.removeEventListener(t,e)}},isScrollableContentAtTop:function(){return b(i.content)},isScrollableContentAtBottom:function(){return x(i.content)},registerWindowEventHandler:function(i,t){window.addEventListener(i,t)},deregisterWindowEventHandler:function(i,t){window.removeEventListener(i,t)}};return new O(t)};t.prototype.getInitialFocusEl=function(){return this.root.querySelector("["+S.INITIAL_FOCUS_ATTRIBUTE+"]")};return t}(s);const D='@charset "UTF-8";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}:host{--dialog-background-color:var(--lime-elevated-surface-background-color);--header-heading-color:var(--dialog-heading-title-color);--header-subheading-color:var(--dialog-heading-subtitle-color);--header-supporting-text-color:var(--dialog-heading-supporting-text-color);--header-icon-color:var(--dialog-heading-icon-color);--header-icon-background-color:var(--dialog-heading-icon-background-color)}.mdc-dialog .mdc-dialog__surface{background-color:#fff;background-color:var(--mdc-theme-surface, #fff)}.mdc-dialog .mdc-dialog__scrim{background-color:rgba(0, 0, 0, 0.32)}.mdc-dialog .mdc-dialog__surface-scrim{background-color:rgba(0, 0, 0, 0.32)}.mdc-dialog .mdc-dialog__title{color:rgba(0, 0, 0, 0.87)}.mdc-dialog .mdc-dialog__content{color:rgba(0, 0, 0, 0.6)}.mdc-dialog .mdc-dialog__close{color:#000;color:var(--mdc-theme-on-surface, #000)}.mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple::before,.mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple::after{background-color:#000;background-color:var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000))}.mdc-dialog .mdc-dialog__close:hover .mdc-icon-button__ripple::before,.mdc-dialog .mdc-dialog__close.mdc-ripple-surface--hover .mdc-icon-button__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before,.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after{transition:opacity 150ms linear}.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title,.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__actions,.mdc-dialog.mdc-dialog--scrollable.mdc-dialog-scroll-divider-footer .mdc-dialog__actions{border-color:rgba(0, 0, 0, 0.12)}.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title{border-bottom:1px solid rgba(0, 0, 0, 0.12);margin-bottom:0}.mdc-dialog.mdc-dialog-scroll-divider-header.mdc-dialog--fullscreen .mdc-dialog__header{box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)}.mdc-dialog .mdc-dialog__surface{border-radius:4px;border-radius:var(--mdc-shape-medium, 4px)}.mdc-dialog__surface{box-shadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)}.mdc-dialog__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-headline6-font-size, 0.875rem);line-height:0.875rem;line-height:var(--mdc-typography-headline6-line-height, 0.875rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight, 500);letter-spacing:0.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing, 0.0125em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline6-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform, inherit)}.mdc-dialog__content{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, inherit));font-size:0.8125rem;font-size:var(--mdc-typography-body1-font-size, 0.8125rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height, 1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight, 400);letter-spacing:0.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, 0.03125em);text-decoration:inherit;text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform, inherit)}.mdc-dialog__title-icon{}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color, #fff)}.mdc-dialog,.mdc-dialog__scrim{position:fixed;top:0;left:0;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%}.mdc-dialog{display:none;z-index:7;z-index:var(--mdc-dialog-z-index, 7)}.mdc-dialog .mdc-dialog__content{padding:20px 24px 20px 24px}.mdc-dialog .mdc-dialog__surface{min-width:280px}@media (max-width: 592px){.mdc-dialog .mdc-dialog__surface{max-width:calc(100vw - 32px)}}@media (min-width: 592px){.mdc-dialog .mdc-dialog__surface{max-width:560px}}.mdc-dialog .mdc-dialog__surface{max-height:calc(100% - 32px)}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){.mdc-dialog .mdc-dialog__container{}}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-width:none}@media (max-width: 960px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:560px;width:560px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}@media (max-width: 720px) and (max-width: 672px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{width:calc(100vw - 112px)}}@media (max-width: 720px) and (min-width: 672px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{width:560px}}@media (max-width: 720px) and (max-height: 720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:calc(100vh - 160px)}}@media (max-width: 720px) and (min-height: 720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:560px}}@media (max-width: 720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}@media (max-width: 720px) and (max-height: 400px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{height:100%;max-height:100vh;max-width:100vw;width:100vw;border-radius:0}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{order:-1;left:-12px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header{padding:0 16px 9px;justify-content:flex-start}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title{margin-left:calc(16px - 2 * 12px)}}@media (max-width: 600px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{height:100%;max-height:100vh;max-width:100vw;width:100vw;border-radius:0}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{order:-1;left:-12px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header{padding:0 16px 9px;justify-content:flex-start}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title{margin-left:calc(16px - 2 * 12px)}}@media (min-width: 960px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{width:calc(100vw - 400px)}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}.mdc-dialog.mdc-dialog__scrim--hidden .mdc-dialog__scrim{opacity:0}.mdc-dialog__scrim{opacity:0;z-index:-1}.mdc-dialog__container{display:flex;flex-direction:row;align-items:center;justify-content:space-around;box-sizing:border-box;height:100%;transform:scale(0.8);opacity:0;pointer-events:none}.mdc-dialog__surface{position:relative;display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;box-sizing:border-box;max-width:100%;max-height:100%;pointer-events:auto;overflow-y:auto}.mdc-dialog__surface .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}[dir=rtl] .mdc-dialog__surface,.mdc-dialog__surface[dir=rtl]{text-align:right;}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-dialog__surface{outline:2px solid windowText}}.mdc-dialog__surface::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:2px solid transparent;border-radius:inherit;content:"";pointer-events:none}@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none){.mdc-dialog__surface::before{content:none}}.mdc-dialog__title{display:block;margin-top:0;position:relative;flex-shrink:0;box-sizing:border-box;margin:0 0 1px;padding:0 24px 9px}.mdc-dialog__title::before{display:inline-block;width:0;height:40px;content:"";vertical-align:0}[dir=rtl] .mdc-dialog__title,.mdc-dialog__title[dir=rtl]{text-align:right;}.mdc-dialog--scrollable .mdc-dialog__title{margin-bottom:1px;padding-bottom:15px}.mdc-dialog--fullscreen .mdc-dialog__header{align-items:baseline;border-bottom:1px solid transparent;display:inline-flex;justify-content:space-between;padding:0 24px 9px;z-index:1}.mdc-dialog--fullscreen .mdc-dialog__header .mdc-dialog__close{right:-12px}.mdc-dialog--fullscreen .mdc-dialog__title{margin-bottom:0;padding:0;border-bottom:0}.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__title{border-bottom:0;margin-bottom:0}.mdc-dialog--fullscreen .mdc-dialog__close{top:5px}.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__actions{border-top:1px solid transparent}.mdc-dialog__content{flex-grow:1;box-sizing:border-box;margin:0;overflow:auto;-webkit-overflow-scrolling:touch}.mdc-dialog__content>:first-child{margin-top:0}.mdc-dialog__content>:last-child{margin-bottom:0}.mdc-dialog__title+.mdc-dialog__content,.mdc-dialog__header+.mdc-dialog__content{padding-top:0}.mdc-dialog--scrollable .mdc-dialog__title+.mdc-dialog__content{padding-top:8px;padding-bottom:8px}.mdc-dialog__content .mdc-deprecated-list:first-child:last-child{padding:6px 0 0}.mdc-dialog--scrollable .mdc-dialog__content .mdc-deprecated-list:first-child:last-child{padding:0}.mdc-dialog__actions{display:flex;position:relative;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;box-sizing:border-box;min-height:52px;margin:0;padding:8px;border-top:1px solid transparent}.mdc-dialog--stacked .mdc-dialog__actions{flex-direction:column;align-items:flex-end}.mdc-dialog__button{margin-left:8px;margin-right:0;max-width:100%;text-align:right}[dir=rtl] .mdc-dialog__button,.mdc-dialog__button[dir=rtl]{margin-left:0;margin-right:8px;}.mdc-dialog__button:first-child{margin-left:0;margin-right:0}[dir=rtl] .mdc-dialog__button:first-child,.mdc-dialog__button:first-child[dir=rtl]{margin-left:0;margin-right:0;}[dir=rtl] .mdc-dialog__button,.mdc-dialog__button[dir=rtl]{text-align:left;}.mdc-dialog--stacked .mdc-dialog__button:not(:first-child){margin-top:12px}.mdc-dialog--open,.mdc-dialog--opening,.mdc-dialog--closing{display:flex}.mdc-dialog--opening .mdc-dialog__scrim{transition:opacity 150ms linear}.mdc-dialog--opening .mdc-dialog__container{transition:opacity 75ms linear, transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1)}.mdc-dialog--closing .mdc-dialog__scrim,.mdc-dialog--closing .mdc-dialog__container{transition:opacity 75ms linear}.mdc-dialog--closing .mdc-dialog__container{transform:none}.mdc-dialog--open .mdc-dialog__scrim{opacity:1}.mdc-dialog--open .mdc-dialog__container{transform:none;opacity:1}.mdc-dialog--open.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim{opacity:1;z-index:1}.mdc-dialog--open.mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim{transition:opacity 75ms linear}.mdc-dialog--open.mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim{transition:opacity 150ms linear}.mdc-dialog__surface-scrim{display:none;opacity:0;position:absolute;width:100%;height:100%}.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim,.mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim,.mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim{display:block}.mdc-dialog-scroll-lock{overflow:hidden}.mdc-dialog__content{font-family:inherit}.mdc-dialog{z-index:var(--dialog-z-index, 7);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}@media (max-width: 16032px){.mdc-dialog .mdc-dialog__surface{max-width:calc(100vw - 32px)}}@media (min-width: 16032px){.mdc-dialog .mdc-dialog__surface{max-width:16000px}}@media (max-height: 16032px){.mdc-dialog.full-screen .mdc-dialog__surface{max-height:calc(100% - 32px)}}@media (min-height: 16032px){.mdc-dialog.full-screen .mdc-dialog__surface{max-height:16000px}}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){.mdc-dialog.full-screen .mdc-dialog__container{}}@media (-ms-high-contrast: none) and (min-height: 16032px), (-ms-high-contrast: active) and (min-height: 16032px){.mdc-dialog.full-screen .mdc-dialog__container{align-items:stretch;height:auto}}.mdc-dialog.full-screen .mdc-dialog__container{height:100%;width:100%}.mdc-dialog.full-screen .mdc-dialog__container .mdc-dialog__surface{height:100%;width:100%}.mdc-dialog .mdc-dialog__scrim{background-color:rgba(var(--color-black), 0.4)}.mdc-dialog .mdc-dialog__container{height:100%;width:var(--dialog-width, auto)}.mdc-dialog .mdc-dialog__surface{width:var(--dialog-width, auto);height:var(--dialog-height, auto);background-color:var(--dialog-background-color);box-shadow:var(--shadow-depth-64);max-width:var(--dialog-max-width, calc(100vw - 2rem));max-height:var(--dialog-max-height, calc(100% - 2rem));border-radius:0.75rem}.mdc-dialog .mdc-dialog__content{--limel-top-edge-fade-height:var(--dialog-padding-top-bottom, 1.5rem);--limel-bottom-edge-fade-height:var(\n --dialog-padding-top-bottom,\n 1.5rem\n );--limel-overflow-mask-vertical:linear-gradient(\n to bottom,\n transparent 0%,\n black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n transparent 100%\n );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);color:var(--mdc-theme-on-surface);padding-left:var(--dialog-padding-left-right, min(1.25rem, 3vw));padding-right:var(--dialog-padding-left-right, min(1.25rem, 3vw))}#initialFocusElement{position:absolute;opacity:0;pointer-events:none;z-index:-1}slot[name=header]{display:none}slot[name=button]{display:flex;gap:0.5rem;width:100%;justify-content:flex-end}footer.mdc-dialog__actions{min-height:unset;padding:0.375rem}@media screen and (max-width: 760px){slot[name=button]{flex-direction:column-reverse}.mdc-dialog__actions{padding:min(1.5rem, 3vw);padding-top:1rem}}';const I=class{constructor(e){i(this,e);this.close=t(this,"close",7);this.closing=t(this,"closing",7);this.heading=undefined;this.fullscreen=false;this.open=false;this.closingActions={escapeKey:true,scrimClick:true};this.handleMdcOpened=this.handleMdcOpened.bind(this);this.handleMdcClosed=this.handleMdcClosed.bind(this);this.handleMdcClosing=this.handleMdcClosing.bind(this)}connectedCallback(){this.initialize()}componentWillLoad(){this.id=a()}componentDidLoad(){this.initialize()}initialize(){const i=this.host.shadowRoot.querySelector(".mdc-dialog");if(!i){return}this.mdcDialog=new A(i);if(this.open){this.mdcDialog.open()}this.mdcDialog.listen("MDCDialog:opened",this.handleMdcOpened);this.mdcDialog.listen("MDCDialog:closed",this.handleMdcClosed);this.mdcDialog.listen("MDCDialog:closing",this.handleMdcClosing);this.setClosingActions()}disconnectedCallback(){this.mdcDialog.unlisten("MDCDialog:opened",this.handleMdcOpened);this.mdcDialog.unlisten("MDCDialog:closed",this.handleMdcClosed);this.mdcDialog.unlisten("MDCDialog:closing",this.handleMdcClosing);this.mdcDialog.destroy()}render(){return e("div",{class:{"mdc-dialog":true,"full-screen":!!this.fullscreen},role:"alertdialog","aria-modal":"true","aria-labelledby":"limel-dialog-title-"+this.id,"aria-describedby":"limel-dialog-content-"+this.id},e("input",{hidden:true,id:"initialFocusEl"}),e("div",{class:"mdc-dialog__container"},e("div",{class:"mdc-dialog__surface"},e("input",{type:"button",id:"initialFocusElement"}),this.renderHeading(),e("div",{class:"mdc-dialog__content",id:"limel-dialog-content-"+this.id},e("slot",null)),this.renderFooter())),e("div",{class:"mdc-dialog__scrim"}))}watchHandler(i,t){if(t===i){return}if(!this.mdcDialog){return}if(i){this.mdcDialog.open()}else{this.mdcDialog.close()}}closingActionsChanged(i,t){if(f(i,t)){return}this.setClosingActions()}handleMdcOpened(){const i=100;setTimeout(n,i)}handleMdcClosed(){if(this.open){this.close.emit()}this.open=false}handleMdcClosing(){this.closing.emit()}isBadgeHeading(i){return typeof i==="object"&&!!i.title&&!!i.icon}renderHeading(){if(this.isBadgeHeading(this.heading)){const{title:i,subtitle:t,supportingText:o,icon:n}=this.heading;return e("limel-header",{icon:n,heading:i,subheading:t,supportingText:o},e("slot",{name:"header-actions",slot:"actions"}))}else if(typeof this.heading==="string"){return e("limel-header",{heading:this.heading})}return null}renderFooter(){return e("footer",{class:"mdc-dialog__actions"},e("slot",{name:"button"}))}setClosingActions(){this.mdcDialog.scrimClickAction="";if(this.closingActions.scrimClick){this.mdcDialog.scrimClickAction="close"}this.mdcDialog.escapeKeyAction="";if(this.closingActions.escapeKey){this.mdcDialog.escapeKeyAction="close"}}get host(){return o(this)}static get watchers(){return{open:["watchHandler"],closingActions:["closingActionsChanged"]}}};I.style=D;export{I as limel_dialog};
|
|
112
|
+
//# sourceMappingURL=p-4b7ea1b9.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createFocusTrapInstance","surfaceEl","focusTrapFactory","initialFocusEl","isScrollable","el","scrollHeight","offsetHeight","isScrollAtTop","scrollTop","isScrollAtBottom","Math","ceil","clientHeight","areTopsMisaligned","els","tops","Set","forEach","call","add","offsetTop","size","FOCUS_SENTINEL_CLASS","FocusTrap","root","options","this","elFocusedBeforeTrapFocus","prototype","trapFocus","focusableEls","getFocusableElements","length","Error","document","activeElement","HTMLElement","wrapTabFocus","skipInitialFocus","focusInitialElement","releaseFocus","slice","querySelectorAll","sentinelEl","parentElement","removeChild","skipRestoreFocus","focus","_this","sentinelStart","createSentinel","sentinelEnd","addEventListener","insertBefore","children","appendChild","focusIndex","max","indexOf","filter","isDisabledOrHidden","getAttribute","isTabbableAndVisible","tabIndex","getBoundingClientRect","width","classList","contains","isProgrammaticallyHidden","style","getComputedStyle","display","visibility","sentinel","createElement","setAttribute","cssClasses","CLOSING","OPEN","OPENING","SCROLLABLE","SCROLL_LOCK","STACKED","FULLSCREEN","SCROLL_DIVIDER_HEADER","SCROLL_DIVIDER_FOOTER","SURFACE_SCRIM_SHOWN","SURFACE_SCRIM_SHOWING","SURFACE_SCRIM_HIDING","SCRIM_HIDDEN","strings","ACTION_ATTRIBUTE","BUTTON_DEFAULT_ATTRIBUTE","BUTTON_SELECTOR","CLOSED_EVENT","CLOSE_ACTION","CLOSING_EVENT","CONTAINER_SELECTOR","CONTENT_SELECTOR","DESTROY_ACTION","INITIAL_FOCUS_ATTRIBUTE","OPENED_EVENT","OPENING_EVENT","SCRIM_SELECTOR","SUPPRESS_DEFAULT_PRESS_SELECTOR","join","SURFACE_SELECTOR","numbers","DIALOG_ANIMATION_CLOSE_TIME_MS","DIALOG_ANIMATION_OPEN_TIME_MS","AnimationKeys","MDCDialogFoundation","_super","__extends","adapter","__assign","defaultAdapter","dialogOpen","isFullscreen","animationFrame","animationTimer","escapeKeyAction","scrimClickAction","autoStackButtons","areButtonsStacked","suppressDefaultPressSelector","animFrame","AnimationFrame","contentScrollHandler","handleScrollEvent","windowResizeHandler","layout","windowOrientationChangeHandler","Object","defineProperty","get","enumerable","configurable","addBodyClass","undefined","addClass","clickDefaultButton","eventTargetMatches","getActionFromEvent","getInitialFocusEl","hasClass","isContentScrollable","notifyClosed","notifyClosing","notifyOpened","notifyOpening","removeBodyClass","removeClass","reverseButtons","registerContentEventHandler","deregisterContentEventHandler","isScrollableContentAtTop","isScrollableContentAtBottom","registerWindowEventHandler","deregisterWindowEventHandler","init","setAutoStackButtons","destroy","clearTimeout","handleAnimationTimerEnd","cancelAll","open","dialogOptions","isAboveFullscreenDialog","runNextAnimationFrame","setTimeout","close","action","cancelAnimationFrame","showSurfaceScrim","hideSurfaceScrim","handleSurfaceScrimTransitionEnd","isOpen","getEscapeKeyAction","setEscapeKeyAction","getScrimClickAction","setScrimClickAction","getAutoStackButtons","autoStack","getSuppressDefaultPressSelector","setSuppressDefaultPressSelector","selector","request","POLL_LAYOUT_CHANGE","layoutInternal","handleClick","evt","isScrim","target","handleKeydown","isEnter","key","keyCode","composedPath","isDefault","handleDocumentKeydown","isEscape","POLL_SCROLL_POS","toggleScrollDividerHeader","toggleScrollDividerFooter","detectStackedButtons","toggleScrollableClasses","callback","requestAnimationFrame","MDCFoundation","MDCDialog","apply","arguments","foundation","set","attachTo","initialize","e_1","_a","focusOptions","container","querySelector","content","buttons","defaultButton","buttonRipples","_b","__values","_c","next","done","buttonEl","value","push","MDCRipple","e_1_1","error","return","initialSyncWithDOM","focusTrap","util.createFocusTrapInstance","bind","handleOpening","handleClosing","removeEventListener","listen","unlisten","ripple","getDefaultFoundation","className","body","util.areTopsMisaligned","disabled","click","matches","element","closest","util.isScrollable","emit","remove","reverse","button","handler","util.isScrollAtTop","util.isScrollAtBottom","window","MDCComponent","dialogCss","Dialog","constructor","hostRef","escapeKey","scrimClick","handleMdcOpened","handleMdcClosed","handleMdcClosing","connectedCallback","componentWillLoad","id","createRandomString","componentDidLoad","host","shadowRoot","mdcDialog","setClosingActions","disconnectedCallback","render","h","class","fullscreen","role","hidden","type","renderHeading","renderFooter","watchHandler","newValue","oldValue","closingActionsChanged","isEqual","waitForUiToRender","dispatchResizeEvent","closing","isBadgeHeading","heading","title","icon","subtitle","supportingText","subheading","name","slot","closingActions"],"sources":["./node_modules/@material/dialog/util.js","./node_modules/@material/dom/focus-trap.js","./node_modules/@material/dialog/constants.js","./node_modules/@material/dialog/foundation.js","./node_modules/@material/dialog/component.js","./src/components/dialog/dialog.scss?tag=limel-dialog&encapsulation=shadow","./src/components/dialog/dialog.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nexport function createFocusTrapInstance(surfaceEl, focusTrapFactory, initialFocusEl) {\n return focusTrapFactory(surfaceEl, { initialFocusEl: initialFocusEl });\n}\nexport function isScrollable(el) {\n return el ? el.scrollHeight > el.offsetHeight : false;\n}\n/**\n * For scrollable content, returns true if the content has not been scrolled\n * (that is, the scroll content is as the \"top\"). This is used in full-screen\n * dialogs, where the scroll divider is expected only to appear once the\n * content has been scrolled \"underneath\" the header bar.\n */\nexport function isScrollAtTop(el) {\n return el ? el.scrollTop === 0 : false;\n}\n/**\n * For scrollable content, returns true if the content has been scrolled all the\n * way to the bottom. This is used in full-screen dialogs, where the footer\n * scroll divider is expected only to appear when the content is \"cut-off\" by\n * the footer bar.\n */\nexport function isScrollAtBottom(el) {\n return el ? Math.ceil(el.scrollHeight - el.scrollTop) === el.clientHeight :\n false;\n}\nexport function areTopsMisaligned(els) {\n var tops = new Set();\n [].forEach.call(els, function (el) { return tops.add(el.offsetTop); });\n return tops.size > 1;\n}\n//# sourceMappingURL=util.js.map","/**\n * @license\n * Copyright 2020 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nvar FOCUS_SENTINEL_CLASS = 'mdc-dom-focus-sentinel';\n/**\n * Utility to trap focus in a given root element, e.g. for modal components such\n * as dialogs. The root should have at least one focusable child element,\n * for setting initial focus when trapping focus.\n * Also tracks the previously focused element, and restores focus to that\n * element when releasing focus.\n */\nvar FocusTrap = /** @class */ (function () {\n function FocusTrap(root, options) {\n if (options === void 0) { options = {}; }\n this.root = root;\n this.options = options;\n // Previously focused element before trapping focus.\n this.elFocusedBeforeTrapFocus = null;\n }\n /**\n * Traps focus in `root`. Also focuses on either `initialFocusEl` if set;\n * otherwises sets initial focus to the first focusable child element.\n */\n FocusTrap.prototype.trapFocus = function () {\n var focusableEls = this.getFocusableElements(this.root);\n if (focusableEls.length === 0) {\n throw new Error('FocusTrap: Element must have at least one focusable child.');\n }\n this.elFocusedBeforeTrapFocus =\n document.activeElement instanceof HTMLElement ? document.activeElement :\n null;\n this.wrapTabFocus(this.root);\n if (!this.options.skipInitialFocus) {\n this.focusInitialElement(focusableEls, this.options.initialFocusEl);\n }\n };\n /**\n * Releases focus from `root`. Also restores focus to the previously focused\n * element.\n */\n FocusTrap.prototype.releaseFocus = function () {\n [].slice.call(this.root.querySelectorAll(\".\" + FOCUS_SENTINEL_CLASS))\n .forEach(function (sentinelEl) {\n sentinelEl.parentElement.removeChild(sentinelEl);\n });\n if (!this.options.skipRestoreFocus && this.elFocusedBeforeTrapFocus) {\n this.elFocusedBeforeTrapFocus.focus();\n }\n };\n /**\n * Wraps tab focus within `el` by adding two hidden sentinel divs which are\n * used to mark the beginning and the end of the tabbable region. When\n * focused, these sentinel elements redirect focus to the first/last\n * children elements of the tabbable region, ensuring that focus is trapped\n * within that region.\n */\n FocusTrap.prototype.wrapTabFocus = function (el) {\n var _this = this;\n var sentinelStart = this.createSentinel();\n var sentinelEnd = this.createSentinel();\n sentinelStart.addEventListener('focus', function () {\n var focusableEls = _this.getFocusableElements(el);\n if (focusableEls.length > 0) {\n focusableEls[focusableEls.length - 1].focus();\n }\n });\n sentinelEnd.addEventListener('focus', function () {\n var focusableEls = _this.getFocusableElements(el);\n if (focusableEls.length > 0) {\n focusableEls[0].focus();\n }\n });\n el.insertBefore(sentinelStart, el.children[0]);\n el.appendChild(sentinelEnd);\n };\n /**\n * Focuses on `initialFocusEl` if defined and a child of the root element.\n * Otherwise, focuses on the first focusable child element of the root.\n */\n FocusTrap.prototype.focusInitialElement = function (focusableEls, initialFocusEl) {\n var focusIndex = 0;\n if (initialFocusEl) {\n focusIndex = Math.max(focusableEls.indexOf(initialFocusEl), 0);\n }\n focusableEls[focusIndex].focus();\n };\n FocusTrap.prototype.getFocusableElements = function (root) {\n var focusableEls = [].slice.call(root.querySelectorAll('[autofocus], [tabindex], a, input, textarea, select, button'));\n return focusableEls.filter(function (el) {\n var isDisabledOrHidden = el.getAttribute('aria-disabled') === 'true' ||\n el.getAttribute('disabled') != null ||\n el.getAttribute('hidden') != null ||\n el.getAttribute('aria-hidden') === 'true';\n var isTabbableAndVisible = el.tabIndex >= 0 &&\n el.getBoundingClientRect().width > 0 &&\n !el.classList.contains(FOCUS_SENTINEL_CLASS) && !isDisabledOrHidden;\n var isProgrammaticallyHidden = false;\n if (isTabbableAndVisible) {\n var style = getComputedStyle(el);\n isProgrammaticallyHidden =\n style.display === 'none' || style.visibility === 'hidden';\n }\n return isTabbableAndVisible && !isProgrammaticallyHidden;\n });\n };\n FocusTrap.prototype.createSentinel = function () {\n var sentinel = document.createElement('div');\n sentinel.setAttribute('tabindex', '0');\n // Don't announce in screen readers.\n sentinel.setAttribute('aria-hidden', 'true');\n sentinel.classList.add(FOCUS_SENTINEL_CLASS);\n return sentinel;\n };\n return FocusTrap;\n}());\nexport { FocusTrap };\n//# sourceMappingURL=focus-trap.js.map","/**\n * @license\n * Copyright 2016 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nexport var cssClasses = {\n CLOSING: 'mdc-dialog--closing',\n OPEN: 'mdc-dialog--open',\n OPENING: 'mdc-dialog--opening',\n SCROLLABLE: 'mdc-dialog--scrollable',\n SCROLL_LOCK: 'mdc-dialog-scroll-lock',\n STACKED: 'mdc-dialog--stacked',\n FULLSCREEN: 'mdc-dialog--fullscreen',\n // Class for showing a scroll divider on full-screen dialog header element.\n // Should only be displayed on scrollable content, when the dialog content is\n // scrolled \"underneath\" the header.\n SCROLL_DIVIDER_HEADER: 'mdc-dialog-scroll-divider-header',\n // Class for showing a scroll divider on a full-screen dialog footer element.\n // Should only be displayed on scrolalble content, when the dialog content is\n // obscured \"underneath\" the footer.\n SCROLL_DIVIDER_FOOTER: 'mdc-dialog-scroll-divider-footer',\n // The \"surface scrim\" is a scrim covering only the surface of a dialog. This\n // is used in situations where a confirmation dialog is shown over an already\n // opened full-screen dialog. On larger screen-sizes, the full-screen dialog\n // is sized as a modal and so in these situations we display a \"surface scrim\"\n // to prevent a \"double scrim\" (where the scrim from the secondary\n // confirmation dialog would overlap with the scrim from the full-screen\n // dialog).\n SURFACE_SCRIM_SHOWN: 'mdc-dialog__surface-scrim--shown',\n // \"Showing\" animating class for the surface-scrim.\n SURFACE_SCRIM_SHOWING: 'mdc-dialog__surface-scrim--showing',\n // \"Hiding\" animating class for the surface-scrim.\n SURFACE_SCRIM_HIDING: 'mdc-dialog__surface-scrim--hiding',\n // Class to hide a dialog's scrim (used in conjunction with a surface-scrim).\n // Note that we only hide the original scrim rather than removing it entirely\n // to prevent interactions with the content behind this scrim, and to capture\n // scrim clicks.\n SCRIM_HIDDEN: 'mdc-dialog__scrim--hidden',\n};\nexport var strings = {\n ACTION_ATTRIBUTE: 'data-mdc-dialog-action',\n BUTTON_DEFAULT_ATTRIBUTE: 'data-mdc-dialog-button-default',\n BUTTON_SELECTOR: '.mdc-dialog__button',\n CLOSED_EVENT: 'MDCDialog:closed',\n CLOSE_ACTION: 'close',\n CLOSING_EVENT: 'MDCDialog:closing',\n CONTAINER_SELECTOR: '.mdc-dialog__container',\n CONTENT_SELECTOR: '.mdc-dialog__content',\n DESTROY_ACTION: 'destroy',\n INITIAL_FOCUS_ATTRIBUTE: 'data-mdc-dialog-initial-focus',\n OPENED_EVENT: 'MDCDialog:opened',\n OPENING_EVENT: 'MDCDialog:opening',\n SCRIM_SELECTOR: '.mdc-dialog__scrim',\n SUPPRESS_DEFAULT_PRESS_SELECTOR: [\n 'textarea',\n '.mdc-menu .mdc-list-item',\n '.mdc-menu .mdc-deprecated-list-item',\n ].join(', '),\n SURFACE_SELECTOR: '.mdc-dialog__surface',\n};\nexport var numbers = {\n DIALOG_ANIMATION_CLOSE_TIME_MS: 75,\n DIALOG_ANIMATION_OPEN_TIME_MS: 150,\n};\n//# sourceMappingURL=constants.js.map","/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nimport { __assign, __extends } from \"tslib\";\nimport { AnimationFrame } from '@material/animation/animationframe';\nimport { MDCFoundation } from '@material/base/foundation';\nimport { cssClasses, numbers, strings } from './constants';\nvar AnimationKeys;\n(function (AnimationKeys) {\n AnimationKeys[\"POLL_SCROLL_POS\"] = \"poll_scroll_position\";\n AnimationKeys[\"POLL_LAYOUT_CHANGE\"] = \"poll_layout_change\";\n})(AnimationKeys || (AnimationKeys = {}));\nvar MDCDialogFoundation = /** @class */ (function (_super) {\n __extends(MDCDialogFoundation, _super);\n function MDCDialogFoundation(adapter) {\n var _this = _super.call(this, __assign(__assign({}, MDCDialogFoundation.defaultAdapter), adapter)) || this;\n _this.dialogOpen = false;\n _this.isFullscreen = false;\n _this.animationFrame = 0;\n _this.animationTimer = 0;\n _this.escapeKeyAction = strings.CLOSE_ACTION;\n _this.scrimClickAction = strings.CLOSE_ACTION;\n _this.autoStackButtons = true;\n _this.areButtonsStacked = false;\n _this.suppressDefaultPressSelector = strings.SUPPRESS_DEFAULT_PRESS_SELECTOR;\n _this.animFrame = new AnimationFrame();\n _this.contentScrollHandler = function () {\n _this.handleScrollEvent();\n };\n _this.windowResizeHandler = function () {\n _this.layout();\n };\n _this.windowOrientationChangeHandler = function () {\n _this.layout();\n };\n return _this;\n }\n Object.defineProperty(MDCDialogFoundation, \"cssClasses\", {\n get: function () {\n return cssClasses;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(MDCDialogFoundation, \"strings\", {\n get: function () {\n return strings;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(MDCDialogFoundation, \"numbers\", {\n get: function () {\n return numbers;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(MDCDialogFoundation, \"defaultAdapter\", {\n get: function () {\n return {\n addBodyClass: function () { return undefined; },\n addClass: function () { return undefined; },\n areButtonsStacked: function () { return false; },\n clickDefaultButton: function () { return undefined; },\n eventTargetMatches: function () { return false; },\n getActionFromEvent: function () { return ''; },\n getInitialFocusEl: function () { return null; },\n hasClass: function () { return false; },\n isContentScrollable: function () { return false; },\n notifyClosed: function () { return undefined; },\n notifyClosing: function () { return undefined; },\n notifyOpened: function () { return undefined; },\n notifyOpening: function () { return undefined; },\n releaseFocus: function () { return undefined; },\n removeBodyClass: function () { return undefined; },\n removeClass: function () { return undefined; },\n reverseButtons: function () { return undefined; },\n trapFocus: function () { return undefined; },\n registerContentEventHandler: function () { return undefined; },\n deregisterContentEventHandler: function () { return undefined; },\n isScrollableContentAtTop: function () { return false; },\n isScrollableContentAtBottom: function () { return false; },\n registerWindowEventHandler: function () { return undefined; },\n deregisterWindowEventHandler: function () { return undefined; },\n };\n },\n enumerable: false,\n configurable: true\n });\n MDCDialogFoundation.prototype.init = function () {\n if (this.adapter.hasClass(cssClasses.STACKED)) {\n this.setAutoStackButtons(false);\n }\n this.isFullscreen = this.adapter.hasClass(cssClasses.FULLSCREEN);\n };\n MDCDialogFoundation.prototype.destroy = function () {\n if (this.animationTimer) {\n clearTimeout(this.animationTimer);\n this.handleAnimationTimerEnd();\n }\n if (this.isFullscreen) {\n this.adapter.deregisterContentEventHandler('scroll', this.contentScrollHandler);\n }\n this.animFrame.cancelAll();\n this.adapter.deregisterWindowEventHandler('resize', this.windowResizeHandler);\n this.adapter.deregisterWindowEventHandler('orientationchange', this.windowOrientationChangeHandler);\n };\n MDCDialogFoundation.prototype.open = function (dialogOptions) {\n var _this = this;\n this.dialogOpen = true;\n this.adapter.notifyOpening();\n this.adapter.addClass(cssClasses.OPENING);\n if (this.isFullscreen) {\n // A scroll event listener is registered even if the dialog is not\n // scrollable on open, since the window resize event, or orientation\n // change may make the dialog scrollable after it is opened.\n this.adapter.registerContentEventHandler('scroll', this.contentScrollHandler);\n }\n if (dialogOptions && dialogOptions.isAboveFullscreenDialog) {\n this.adapter.addClass(cssClasses.SCRIM_HIDDEN);\n }\n this.adapter.registerWindowEventHandler('resize', this.windowResizeHandler);\n this.adapter.registerWindowEventHandler('orientationchange', this.windowOrientationChangeHandler);\n // Wait a frame once display is no longer \"none\", to establish basis for\n // animation\n this.runNextAnimationFrame(function () {\n _this.adapter.addClass(cssClasses.OPEN);\n _this.adapter.addBodyClass(cssClasses.SCROLL_LOCK);\n _this.layout();\n _this.animationTimer = setTimeout(function () {\n _this.handleAnimationTimerEnd();\n _this.adapter.trapFocus(_this.adapter.getInitialFocusEl());\n _this.adapter.notifyOpened();\n }, numbers.DIALOG_ANIMATION_OPEN_TIME_MS);\n });\n };\n MDCDialogFoundation.prototype.close = function (action) {\n var _this = this;\n if (action === void 0) { action = ''; }\n if (!this.dialogOpen) {\n // Avoid redundant close calls (and events), e.g. from keydown on elements\n // that inherently emit click\n return;\n }\n this.dialogOpen = false;\n this.adapter.notifyClosing(action);\n this.adapter.addClass(cssClasses.CLOSING);\n this.adapter.removeClass(cssClasses.OPEN);\n this.adapter.removeBodyClass(cssClasses.SCROLL_LOCK);\n if (this.isFullscreen) {\n this.adapter.deregisterContentEventHandler('scroll', this.contentScrollHandler);\n }\n this.adapter.deregisterWindowEventHandler('resize', this.windowResizeHandler);\n this.adapter.deregisterWindowEventHandler('orientationchange', this.windowOrientationChangeHandler);\n cancelAnimationFrame(this.animationFrame);\n this.animationFrame = 0;\n clearTimeout(this.animationTimer);\n this.animationTimer = setTimeout(function () {\n _this.adapter.releaseFocus();\n _this.handleAnimationTimerEnd();\n _this.adapter.notifyClosed(action);\n }, numbers.DIALOG_ANIMATION_CLOSE_TIME_MS);\n };\n /**\n * Used only in instances of showing a secondary dialog over a full-screen\n * dialog. Shows the \"surface scrim\" displayed over the full-screen dialog.\n */\n MDCDialogFoundation.prototype.showSurfaceScrim = function () {\n var _this = this;\n this.adapter.addClass(cssClasses.SURFACE_SCRIM_SHOWING);\n this.runNextAnimationFrame(function () {\n _this.adapter.addClass(cssClasses.SURFACE_SCRIM_SHOWN);\n });\n };\n /**\n * Used only in instances of showing a secondary dialog over a full-screen\n * dialog. Hides the \"surface scrim\" displayed over the full-screen dialog.\n */\n MDCDialogFoundation.prototype.hideSurfaceScrim = function () {\n this.adapter.removeClass(cssClasses.SURFACE_SCRIM_SHOWN);\n this.adapter.addClass(cssClasses.SURFACE_SCRIM_HIDING);\n };\n /**\n * Handles `transitionend` event triggered when surface scrim animation is\n * finished.\n */\n MDCDialogFoundation.prototype.handleSurfaceScrimTransitionEnd = function () {\n this.adapter.removeClass(cssClasses.SURFACE_SCRIM_HIDING);\n this.adapter.removeClass(cssClasses.SURFACE_SCRIM_SHOWING);\n };\n MDCDialogFoundation.prototype.isOpen = function () {\n return this.dialogOpen;\n };\n MDCDialogFoundation.prototype.getEscapeKeyAction = function () {\n return this.escapeKeyAction;\n };\n MDCDialogFoundation.prototype.setEscapeKeyAction = function (action) {\n this.escapeKeyAction = action;\n };\n MDCDialogFoundation.prototype.getScrimClickAction = function () {\n return this.scrimClickAction;\n };\n MDCDialogFoundation.prototype.setScrimClickAction = function (action) {\n this.scrimClickAction = action;\n };\n MDCDialogFoundation.prototype.getAutoStackButtons = function () {\n return this.autoStackButtons;\n };\n MDCDialogFoundation.prototype.setAutoStackButtons = function (autoStack) {\n this.autoStackButtons = autoStack;\n };\n MDCDialogFoundation.prototype.getSuppressDefaultPressSelector = function () {\n return this.suppressDefaultPressSelector;\n };\n MDCDialogFoundation.prototype.setSuppressDefaultPressSelector = function (selector) {\n this.suppressDefaultPressSelector = selector;\n };\n MDCDialogFoundation.prototype.layout = function () {\n var _this = this;\n this.animFrame.request(AnimationKeys.POLL_LAYOUT_CHANGE, function () {\n _this.layoutInternal();\n });\n };\n /** Handles click on the dialog root element. */\n MDCDialogFoundation.prototype.handleClick = function (evt) {\n var isScrim = this.adapter.eventTargetMatches(evt.target, strings.SCRIM_SELECTOR);\n // Check for scrim click first since it doesn't require querying ancestors.\n if (isScrim && this.scrimClickAction !== '') {\n this.close(this.scrimClickAction);\n }\n else {\n var action = this.adapter.getActionFromEvent(evt);\n if (action) {\n this.close(action);\n }\n }\n };\n /** Handles keydown on the dialog root element. */\n MDCDialogFoundation.prototype.handleKeydown = function (evt) {\n var isEnter = evt.key === 'Enter' || evt.keyCode === 13;\n if (!isEnter) {\n return;\n }\n var action = this.adapter.getActionFromEvent(evt);\n if (action) {\n // Action button callback is handled in `handleClick`,\n // since space/enter keydowns on buttons trigger click events.\n return;\n }\n // `composedPath` is used here, when available, to account for use cases\n // where a target meant to suppress the default press behaviour\n // may exist in a shadow root.\n // For example, a textarea inside a web component:\n // <mwc-dialog>\n // <horizontal-layout>\n // #shadow-root (open)\n // <mwc-textarea>\n // #shadow-root (open)\n // <textarea></textarea>\n // </mwc-textarea>\n // </horizontal-layout>\n // </mwc-dialog>\n var target = evt.composedPath ? evt.composedPath()[0] : evt.target;\n var isDefault = this.suppressDefaultPressSelector ?\n !this.adapter.eventTargetMatches(target, this.suppressDefaultPressSelector) :\n true;\n if (isEnter && isDefault) {\n this.adapter.clickDefaultButton();\n }\n };\n /** Handles keydown on the document. */\n MDCDialogFoundation.prototype.handleDocumentKeydown = function (evt) {\n var isEscape = evt.key === 'Escape' || evt.keyCode === 27;\n if (isEscape && this.escapeKeyAction !== '') {\n this.close(this.escapeKeyAction);\n }\n };\n /**\n * Handles scroll event on the dialog's content element -- showing a scroll\n * divider on the header or footer based on the scroll position. This handler\n * should only be registered on full-screen dialogs with scrollable content.\n */\n MDCDialogFoundation.prototype.handleScrollEvent = function () {\n var _this = this;\n // Since scroll events can fire at a high rate, we throttle these events by\n // using requestAnimationFrame.\n this.animFrame.request(AnimationKeys.POLL_SCROLL_POS, function () {\n _this.toggleScrollDividerHeader();\n _this.toggleScrollDividerFooter();\n });\n };\n MDCDialogFoundation.prototype.layoutInternal = function () {\n if (this.autoStackButtons) {\n this.detectStackedButtons();\n }\n this.toggleScrollableClasses();\n };\n MDCDialogFoundation.prototype.handleAnimationTimerEnd = function () {\n this.animationTimer = 0;\n this.adapter.removeClass(cssClasses.OPENING);\n this.adapter.removeClass(cssClasses.CLOSING);\n };\n /**\n * Runs the given logic on the next animation frame, using setTimeout to\n * factor in Firefox reflow behavior.\n */\n MDCDialogFoundation.prototype.runNextAnimationFrame = function (callback) {\n var _this = this;\n cancelAnimationFrame(this.animationFrame);\n this.animationFrame = requestAnimationFrame(function () {\n _this.animationFrame = 0;\n clearTimeout(_this.animationTimer);\n _this.animationTimer = setTimeout(callback, 0);\n });\n };\n MDCDialogFoundation.prototype.detectStackedButtons = function () {\n // Remove the class first to let us measure the buttons' natural positions.\n this.adapter.removeClass(cssClasses.STACKED);\n var areButtonsStacked = this.adapter.areButtonsStacked();\n if (areButtonsStacked) {\n this.adapter.addClass(cssClasses.STACKED);\n }\n if (areButtonsStacked !== this.areButtonsStacked) {\n this.adapter.reverseButtons();\n this.areButtonsStacked = areButtonsStacked;\n }\n };\n MDCDialogFoundation.prototype.toggleScrollableClasses = function () {\n // Remove the class first to let us measure the natural height of the\n // content.\n this.adapter.removeClass(cssClasses.SCROLLABLE);\n if (this.adapter.isContentScrollable()) {\n this.adapter.addClass(cssClasses.SCROLLABLE);\n if (this.isFullscreen) {\n // If dialog is full-screen and scrollable, check if a scroll divider\n // should be shown.\n this.toggleScrollDividerHeader();\n this.toggleScrollDividerFooter();\n }\n }\n };\n MDCDialogFoundation.prototype.toggleScrollDividerHeader = function () {\n if (!this.adapter.isScrollableContentAtTop()) {\n this.adapter.addClass(cssClasses.SCROLL_DIVIDER_HEADER);\n }\n else if (this.adapter.hasClass(cssClasses.SCROLL_DIVIDER_HEADER)) {\n this.adapter.removeClass(cssClasses.SCROLL_DIVIDER_HEADER);\n }\n };\n MDCDialogFoundation.prototype.toggleScrollDividerFooter = function () {\n if (!this.adapter.isScrollableContentAtBottom()) {\n this.adapter.addClass(cssClasses.SCROLL_DIVIDER_FOOTER);\n }\n else if (this.adapter.hasClass(cssClasses.SCROLL_DIVIDER_FOOTER)) {\n this.adapter.removeClass(cssClasses.SCROLL_DIVIDER_FOOTER);\n }\n };\n return MDCDialogFoundation;\n}(MDCFoundation));\nexport { MDCDialogFoundation };\n// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.\nexport default MDCDialogFoundation;\n//# sourceMappingURL=foundation.js.map","/**\n * @license\n * Copyright 2017 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nimport { __extends, __values } from \"tslib\";\nimport { MDCComponent } from '@material/base/component';\nimport { FocusTrap } from '@material/dom/focus-trap';\nimport { closest, matches } from '@material/dom/ponyfill';\nimport { MDCRipple } from '@material/ripple/component';\nimport { MDCDialogFoundation } from './foundation';\nimport * as util from './util';\nvar strings = MDCDialogFoundation.strings;\nvar MDCDialog = /** @class */ (function (_super) {\n __extends(MDCDialog, _super);\n function MDCDialog() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n Object.defineProperty(MDCDialog.prototype, \"isOpen\", {\n get: function () {\n return this.foundation.isOpen();\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(MDCDialog.prototype, \"escapeKeyAction\", {\n get: function () {\n return this.foundation.getEscapeKeyAction();\n },\n set: function (action) {\n this.foundation.setEscapeKeyAction(action);\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(MDCDialog.prototype, \"scrimClickAction\", {\n get: function () {\n return this.foundation.getScrimClickAction();\n },\n set: function (action) {\n this.foundation.setScrimClickAction(action);\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(MDCDialog.prototype, \"autoStackButtons\", {\n get: function () {\n return this.foundation.getAutoStackButtons();\n },\n set: function (autoStack) {\n this.foundation.setAutoStackButtons(autoStack);\n },\n enumerable: false,\n configurable: true\n });\n MDCDialog.attachTo = function (root) {\n return new MDCDialog(root);\n };\n MDCDialog.prototype.initialize = function (focusTrapFactory) {\n var e_1, _a;\n if (focusTrapFactory === void 0) { focusTrapFactory = function (el, focusOptions) {\n return new FocusTrap(el, focusOptions);\n }; }\n var container = this.root.querySelector(strings.CONTAINER_SELECTOR);\n if (!container) {\n throw new Error(\"Dialog component requires a \" + strings.CONTAINER_SELECTOR + \" container element\");\n }\n this.container = container;\n this.content =\n this.root.querySelector(strings.CONTENT_SELECTOR);\n this.buttons = [].slice.call(this.root.querySelectorAll(strings.BUTTON_SELECTOR));\n this.defaultButton = this.root.querySelector(\"[\" + strings.BUTTON_DEFAULT_ATTRIBUTE + \"]\");\n this.focusTrapFactory = focusTrapFactory;\n this.buttonRipples = [];\n try {\n for (var _b = __values(this.buttons), _c = _b.next(); !_c.done; _c = _b.next()) {\n var buttonEl = _c.value;\n this.buttonRipples.push(new MDCRipple(buttonEl));\n }\n }\n catch (e_1_1) { e_1 = { error: e_1_1 }; }\n finally {\n try {\n if (_c && !_c.done && (_a = _b.return)) _a.call(_b);\n }\n finally { if (e_1) throw e_1.error; }\n }\n };\n MDCDialog.prototype.initialSyncWithDOM = function () {\n var _this = this;\n this.focusTrap = util.createFocusTrapInstance(this.container, this.focusTrapFactory, this.getInitialFocusEl() || undefined);\n this.handleClick = this.foundation.handleClick.bind(this.foundation);\n this.handleKeydown = this.foundation.handleKeydown.bind(this.foundation);\n this.handleDocumentKeydown =\n this.foundation.handleDocumentKeydown.bind(this.foundation);\n // this.handleLayout = this.layout.bind(this);\n this.handleOpening = function () {\n document.addEventListener('keydown', _this.handleDocumentKeydown);\n };\n this.handleClosing = function () {\n document.removeEventListener('keydown', _this.handleDocumentKeydown);\n };\n this.listen('click', this.handleClick);\n this.listen('keydown', this.handleKeydown);\n this.listen(strings.OPENING_EVENT, this.handleOpening);\n this.listen(strings.CLOSING_EVENT, this.handleClosing);\n };\n MDCDialog.prototype.destroy = function () {\n this.unlisten('click', this.handleClick);\n this.unlisten('keydown', this.handleKeydown);\n this.unlisten(strings.OPENING_EVENT, this.handleOpening);\n this.unlisten(strings.CLOSING_EVENT, this.handleClosing);\n this.handleClosing();\n this.buttonRipples.forEach(function (ripple) {\n ripple.destroy();\n });\n _super.prototype.destroy.call(this);\n };\n MDCDialog.prototype.layout = function () {\n this.foundation.layout();\n };\n MDCDialog.prototype.open = function () {\n this.foundation.open();\n };\n MDCDialog.prototype.close = function (action) {\n if (action === void 0) { action = ''; }\n this.foundation.close(action);\n };\n MDCDialog.prototype.getDefaultFoundation = function () {\n var _this = this;\n // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.\n // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.\n var adapter = {\n addBodyClass: function (className) { return document.body.classList.add(className); },\n addClass: function (className) { return _this.root.classList.add(className); },\n areButtonsStacked: function () { return util.areTopsMisaligned(_this.buttons); },\n clickDefaultButton: function () {\n if (_this.defaultButton && !_this.defaultButton.disabled) {\n _this.defaultButton.click();\n }\n },\n eventTargetMatches: function (target, selector) {\n return target ? matches(target, selector) : false;\n },\n getActionFromEvent: function (evt) {\n if (!evt.target) {\n return '';\n }\n var element = closest(evt.target, \"[\" + strings.ACTION_ATTRIBUTE + \"]\");\n return element && element.getAttribute(strings.ACTION_ATTRIBUTE);\n },\n getInitialFocusEl: function () { return _this.getInitialFocusEl(); },\n hasClass: function (className) { return _this.root.classList.contains(className); },\n isContentScrollable: function () { return util.isScrollable(_this.content); },\n notifyClosed: function (action) { return _this.emit(strings.CLOSED_EVENT, action ? { action: action } : {}); },\n notifyClosing: function (action) { return _this.emit(strings.CLOSING_EVENT, action ? { action: action } : {}); },\n notifyOpened: function () { return _this.emit(strings.OPENED_EVENT, {}); },\n notifyOpening: function () { return _this.emit(strings.OPENING_EVENT, {}); },\n releaseFocus: function () {\n _this.focusTrap.releaseFocus();\n },\n removeBodyClass: function (className) { return document.body.classList.remove(className); },\n removeClass: function (className) { return _this.root.classList.remove(className); },\n reverseButtons: function () {\n _this.buttons.reverse();\n _this.buttons.forEach(function (button) {\n button.parentElement.appendChild(button);\n });\n },\n trapFocus: function () {\n _this.focusTrap.trapFocus();\n },\n registerContentEventHandler: function (evt, handler) {\n if (_this.content instanceof HTMLElement) {\n _this.content.addEventListener(evt, handler);\n }\n },\n deregisterContentEventHandler: function (evt, handler) {\n if (_this.content instanceof HTMLElement) {\n _this.content.removeEventListener(evt, handler);\n }\n },\n isScrollableContentAtTop: function () {\n return util.isScrollAtTop(_this.content);\n },\n isScrollableContentAtBottom: function () {\n return util.isScrollAtBottom(_this.content);\n },\n registerWindowEventHandler: function (evt, handler) {\n window.addEventListener(evt, handler);\n },\n deregisterWindowEventHandler: function (evt, handler) {\n window.removeEventListener(evt, handler);\n },\n };\n return new MDCDialogFoundation(adapter);\n };\n MDCDialog.prototype.getInitialFocusEl = function () {\n return this.root.querySelector(\"[\" + strings.INITIAL_FOCUS_ATTRIBUTE + \"]\");\n };\n return MDCDialog;\n}(MDCComponent));\nexport { MDCDialog };\n//# sourceMappingURL=component.js.map","@use '../../style/functions';\n@use '../../style/mixins';\n\n@use '../../style/internal/lime-theme';\n\n@use '@material/dialog';\n\n/**\n * @prop --dialog-width: Width of the dialog.\n * @prop --dialog-height: Height of the dialog.\n * @prop --dialog-z-index: z-index of the dialog container, including the scrim.\n * @prop --dialog-heading-title-color: Color of the title.\n * @prop --dialog-heading-subtitle-color: Color of the subtitle.\n * @prop --dialog-heading-supporting-text-color: Color of the supporting text.\n * @prop --dialog-heading-icon-color: Color of the icon.\n * @prop --dialog-heading-icon-background-color: Background color of the icon when displayed as a badge.\n * @prop --dialog-max-width: Max width of the dialog.\n * @prop --dialog-max-height: Max height of the dialog.\n * @prop --dialog-padding-top-bottom: Padding on top and bottom of dialog content. Affects the height of fade-out effects on top and bottom edges when the content is scrollable and has overflowed out of the content area. Defaults to `1.5rem`. Note that if you use this variable and set it to numbers smaller than 1rem, you will loose the fade-out effects on the edges. If you have set these paddings to `0`, losing the fade out effects should be however fine for your use case! Because in such a case your intention is to handle the `overflow` internally in the component that is displayed in the dialog's content.\n * @prop --dialog-padding-left-right: Padding on the sides of dialog content. Defaults to `1.25rem`.\n */\n\n:host {\n --dialog-background-color: var(--lime-elevated-surface-background-color);\n --header-heading-color: var(--dialog-heading-title-color);\n --header-subheading-color: var(--dialog-heading-subtitle-color);\n --header-supporting-text-color: var(--dialog-heading-supporting-text-color);\n --header-icon-color: var(--dialog-heading-icon-color);\n --header-icon-background-color: var(--dialog-heading-icon-background-color);\n}\n\n$responsive-body-padding: 3vw; // 3% of viewport's width\n\n@include dialog.core-styles;\n\n.mdc-dialog__content {\n // As long as this component is depended on MDC,\n // we need to force it to be font-agnostic.\n // When MDC-dependency is removed, this block can also be removed.\n // However, on removal of MDC-dependency, we should also make sure to check\n // other font-related styles that might be set by MDC,\n // such as `letter-spacing` or `font-size`.\n font-family: inherit;\n}\n\n.mdc-dialog {\n @include dialog.max-width(16000px, dialog.$margin);\n\n z-index: var(--dialog-z-index, dialog.$z-index);\n padding: env(safe-area-inset-top) env(safe-area-inset-right)\n env(safe-area-inset-bottom) env(safe-area-inset-left);\n\n &.full-screen {\n @include dialog.max-height(16000px, dialog.$margin);\n .mdc-dialog__container {\n height: 100%;\n width: 100%;\n\n .mdc-dialog__surface {\n height: 100%;\n width: 100%;\n }\n }\n }\n\n .mdc-dialog__scrim {\n background-color: rgba(var(--color-black), 0.4);\n }\n\n .mdc-dialog__container {\n height: 100%;\n width: var(--dialog-width, auto);\n }\n\n .mdc-dialog__surface {\n width: var(--dialog-width, auto);\n height: var(--dialog-height, auto);\n background-color: var(--dialog-background-color);\n box-shadow: var(--shadow-depth-64);\n\n max-width: var(--dialog-max-width, calc(100vw - 2rem));\n max-height: var(--dialog-max-height, calc(100% - 2rem));\n border-radius: 0.75rem;\n }\n\n .mdc-dialog__content {\n --limel-top-edge-fade-height: var(--dialog-padding-top-bottom, 1.5rem);\n --limel-bottom-edge-fade-height: var(\n --dialog-padding-top-bottom,\n 1.5rem\n );\n @include mixins.fade-out-overflowed-content-on-edges(vertically);\n\n color: var(--mdc-theme-on-surface);\n padding-left: var(\n --dialog-padding-left-right,\n min(1.25rem, $responsive-body-padding)\n );\n padding-right: var(\n --dialog-padding-left-right,\n min(1.25rem, $responsive-body-padding)\n );\n }\n}\n\n#initialFocusElement {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n z-index: -1;\n}\n\nslot[name='header'] {\n display: none;\n}\n\nslot[name='button'] {\n display: flex;\n gap: 0.5rem; // Makes sure buttons get some default distance\n width: 100%;\n justify-content: flex-end;\n}\n\nfooter.mdc-dialog__actions {\n min-height: unset;\n padding: 0.375rem; // 6px\n}\n\n@media screen and (max-width: 760px) {\n slot[name='button'] {\n flex-direction: column-reverse;\n }\n .mdc-dialog__actions {\n padding: min(1.5rem, $responsive-body-padding);\n padding-top: 1rem;\n }\n}\n","import { DialogHeading, ClosingActions } from './dialog.types';\nimport { MDCDialog } from '@material/dialog';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { isEqual } from 'lodash-es';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * :::note\n * Regarding the `close` event: When putting other elements that emit `close`\n * events inside a dialog, those events must be caught and stopped inside the\n * dialog. If not, they will bubble to the event handler listening for `close`\n * events on the dialog, which will close the dialog too.\n *\n * See the example _Nested `close` events_.\n * :::\n *\n * :::important\n * Are you developing for\n * [Lime CRM](https://www.lime-technologies.com/en/lime-crm/)? Please note that\n * you should use the [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)\n * from Lime Web Components to open dialogs in Lime CRM.\n * :::\n *\n * @exampleComponent limel-example-dialog\n * @exampleComponent limel-example-dialog-nested-close-events\n * @exampleComponent limel-example-dialog-heading\n * @exampleComponent limel-example-dialog-heading-actions\n * @exampleComponent limel-example-dialog-form\n * @exampleComponent limel-example-dialog-size\n * @exampleComponent limel-example-dialog-fullscreen\n * @exampleComponent limel-example-dialog-closing-actions\n * @exampleComponent limel-example-dialog-action-buttons\n * @slot - Content to put inside the dialog\n * @slot header-actions - The dialog header buttons\n * @slot button - The dialog buttons\n */\n@Component({\n tag: 'limel-dialog',\n shadow: true,\n styleUrl: 'dialog.scss',\n})\nexport class Dialog {\n /**\n * The heading for the dialog, if any.\n */\n @Prop()\n public heading: string | DialogHeading;\n\n /**\n * Set to `true` to make the dialog \"fullscreen\".\n */\n @Prop({ reflect: true })\n public fullscreen = false;\n\n /**\n * `true` if the dialog is open, `false` otherwise.\n */\n @Prop({ mutable: true, reflect: true })\n public open = false;\n\n /**\n * Defines which action triggers a close-event.\n */\n @Prop({ reflect: true })\n public closingActions: ClosingActions = {\n escapeKey: true,\n scrimClick: true,\n };\n /**\n * Emitted when the dialog is closed from inside the component.\n * (*Not* emitted when the consumer sets the `open`-property to `false`.)\n */\n @Event()\n private close: EventEmitter<void>;\n\n /**\n * Emitted when the dialog is in the process of being closed.\n */\n @Event()\n private closing: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelDialogElement;\n\n private mdcDialog: MDCDialog;\n\n private id: string;\n\n constructor() {\n this.handleMdcOpened = this.handleMdcOpened.bind(this);\n this.handleMdcClosed = this.handleMdcClosed.bind(this);\n this.handleMdcClosing = this.handleMdcClosing.bind(this);\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n this.id = createRandomString();\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private initialize() {\n const element = this.host.shadowRoot.querySelector('.mdc-dialog');\n if (!element) {\n return;\n }\n\n this.mdcDialog = new MDCDialog(element);\n if (this.open) {\n this.mdcDialog.open();\n }\n\n this.mdcDialog.listen('MDCDialog:opened', this.handleMdcOpened);\n this.mdcDialog.listen('MDCDialog:closed', this.handleMdcClosed);\n this.mdcDialog.listen('MDCDialog:closing', this.handleMdcClosing);\n\n this.setClosingActions();\n }\n\n public disconnectedCallback() {\n this.mdcDialog.unlisten('MDCDialog:opened', this.handleMdcOpened);\n this.mdcDialog.unlisten('MDCDialog:closed', this.handleMdcClosed);\n this.mdcDialog.unlisten('MDCDialog:closing', this.handleMdcClosing);\n this.mdcDialog.destroy();\n }\n\n public render() {\n return (\n <div\n class={{\n 'mdc-dialog': true,\n 'full-screen': !!this.fullscreen,\n }}\n role=\"alertdialog\"\n aria-modal=\"true\"\n aria-labelledby={'limel-dialog-title-' + this.id}\n aria-describedby={'limel-dialog-content-' + this.id}\n >\n <input hidden={true} id=\"initialFocusEl\" />\n <div class=\"mdc-dialog__container\">\n <div class=\"mdc-dialog__surface\">\n {/*\n The `initialFocusElement` below is needed to make\n focus trapping work. At the time of writing, the\n focusable elements inside the slots are not\n detected, so we supply our own hidden element for\n the focus trap to use. Read more here:\n https://github.com/material-components/material-components-web/tree/v11.0.0/packages/mdc-dialog#handling-focus-trapping\n */}\n <input type=\"button\" id=\"initialFocusElement\" />\n {this.renderHeading()}\n <div\n class=\"mdc-dialog__content\"\n id={'limel-dialog-content-' + this.id}\n >\n <slot />\n </div>\n {this.renderFooter()}\n </div>\n </div>\n <div class=\"mdc-dialog__scrim\" />\n </div>\n );\n }\n\n @Watch('open')\n protected watchHandler(newValue: boolean, oldValue: boolean) {\n if (oldValue === newValue) {\n return;\n }\n\n if (!this.mdcDialog) {\n return;\n }\n\n if (newValue) {\n this.mdcDialog.open();\n } else {\n this.mdcDialog.close();\n }\n }\n\n @Watch('closingActions')\n protected closingActionsChanged(\n newValue: ClosingActions,\n oldValue: ClosingActions,\n ) {\n if (isEqual(newValue, oldValue)) {\n return;\n }\n\n this.setClosingActions();\n }\n\n private handleMdcOpened() {\n // When the opening-animation has completed, dispatch a\n // resize-event so that any content that depends on\n // javascript for layout has a chance to update to the\n // final layout of the dialog. /Ads\n const waitForUiToRender = 100;\n setTimeout(dispatchResizeEvent, waitForUiToRender);\n }\n\n private handleMdcClosed() {\n if (this.open) {\n this.close.emit();\n }\n\n this.open = false;\n }\n\n private handleMdcClosing() {\n this.closing.emit();\n }\n\n private isBadgeHeading(\n heading: string | DialogHeading,\n ): heading is DialogHeading {\n return typeof heading === 'object' && !!heading.title && !!heading.icon;\n }\n\n private renderHeading() {\n if (this.isBadgeHeading(this.heading)) {\n const { title, subtitle, supportingText, icon } = this.heading;\n\n return (\n <limel-header\n icon={icon}\n heading={title}\n subheading={subtitle}\n supportingText={supportingText}\n >\n <slot name=\"header-actions\" slot=\"actions\" />\n </limel-header>\n );\n } else if (typeof this.heading === 'string') {\n return <limel-header heading={this.heading}></limel-header>;\n }\n\n return null;\n }\n\n private renderFooter() {\n return (\n <footer class=\"mdc-dialog__actions\">\n <slot name=\"button\" />\n </footer>\n );\n }\n\n private setClosingActions() {\n this.mdcDialog.scrimClickAction = '';\n if (this.closingActions.scrimClick) {\n this.mdcDialog.scrimClickAction = 'close';\n }\n\n this.mdcDialog.escapeKeyAction = '';\n if (this.closingActions.escapeKey) {\n this.mdcDialog.escapeKeyAction = 'close';\n }\n }\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["textEditorCss","TextEditor","constructor","hostRef","this","renderHelperLine","helperText","h","helperTextId","invalid","isInvalid","readonly","handleChange","event","stopPropagation","change","emit","detail","createRandomString","editorId","render","Host","class","renderLabel","renderEditor","value","id","renderPlaceholder","placeholder","contentType","onChange","plugins","tabindex","disabled","undefined","language","label","htmlFor"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins.scss';\n\n/**\n * @prop --text-editor-max-height: the tallest height the text editor can become when auto-resizing itself. Defaults to `calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem)`.\n * @prop --text-editor-fade-out-background-color: the color of the fade-out effect at the top and bottom of the text editor, when the text-editor is in readonly state. Defaults to rgb(var(--contrast-100)).\n */\n\n@include shared_input-select-picker.lime-looks-like-input-value;\n.lime-looks-like-input-value {\n padding: var(--limel-text-editor-padding);\n}\n\n* {\n box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\n --limel-prosemirror-adapter-toolbar-opacity: 0.6;\n --limel-text-editor-padding: 0.25rem 1rem 0.75rem 1rem;\n --limel-prosemirror-adapter-toolbar-grid-template-rows: 1fr;\n --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration: 0.3s;\n --limel-prosemirror-adapter-toolbar-transition-timing-function: cubic-bezier(\n 0.19,\n 0.23,\n 0.26,\n 0.89\n );\n\n position: relative;\n isolation: isolate;\n display: flex;\n flex-direction: column;\n\n width: 100%;\n min-width: 5rem;\n min-height: 5rem;\n height: 100%;\n max-height: var(\n --text-editor-max-height,\n calc(\n 100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) -\n 4rem\n )\n );\n padding: 1px; // prevents visual defects that can appear due to the backdrop-filter and closeness to borders\n}\n\n:host(limel-text-editor:focus-within),\n:host(limel-text-editor:not([ui='minimal']):hover) {\n --limel-prosemirror-adapter-toolbar-opacity: 1;\n}\n\n:host(limel-text-editor[ui='minimal']:not(:focus-within)) {\n --limel-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;\n --limel-prosemirror-adapter-toolbar-grid-template-rows: 0fr;\n --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration: 0.46s;\n --limel-prosemirror-adapter-action-bar-padding-top-bottom: 0;\n --limel-prosemirror-adapter-toolbar-opacity: 0;\n --limel-text-editor-placeholder-top: 0;\n min-height: 2.5rem;\n}\n\n:host(limel-text-editor:hover) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};\n}\n\n:host(limel-text-editor:focus-within) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};\n}\n\n:host(limel-text-editor[disabled]:not([disabled='false'])) {\n @include shared_input-select-picker.looks-disabled;\n\n limel-prosemirror-adapter {\n pointer-events: none;\n }\n}\n\n:host(limel-text-editor[invalid]:not([invalid='false'])) {\n --limel-text-editor-outline-color: var(--lime-error-text-color);\n}\n\n:host(limel-text-editor[readonly]:not([readonly='false'])) {\n --limel-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;\n --limel-text-editor-placeholder-top: 0;\n --limel-text-editor-outline-color: transparent;\n --limel-text-editor-background-color: transparent;\n\n limel-markdown {\n // displayed when `readonly` instead of the adapter\n display: block;\n padding: var(--limel-text-editor-padding);\n overflow-y: auto;\n\n &:before,\n &:after {\n z-index: 1;\n pointer-events: none;\n content: '';\n display: block;\n position: absolute;\n width: 100%;\n }\n &:after {\n height: 1.75rem;\n top: 0;\n background: linear-gradient(\n var(\n --text-editor-fade-out-background-color,\n rgb(var(--contrast-100))\n ),\n transparent\n );\n }\n\n &:before {\n height: 2rem;\n bottom: -0.25rem;\n background: linear-gradient(\n transparent,\n var(\n --text-editor-fade-out-background-color,\n rgb(var(--contrast-100))\n )\n );\n }\n }\n}\n\n.notched-outline {\n transition: bottom\n var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n cubic-bezier(1, 0.09, 0, 0.89);\n pointer-events: none;\n position: absolute;\n inset: 0;\n bottom: var(--limel-text-editor-notched-outline-bottom, 0);\n\n display: flex;\n background-color: var(--limel-text-editor-background-color);\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n transition: border-color 0.2s ease;\n border-width: 1px;\n border-style: solid;\n border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n flex-shrink: 0;\n width: 0.75rem;\n border-right-width: 0;\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n flex-shrink: 0;\n\n position: relative;\n z-index: 2;\n\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n\n max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n flex-grow: 1;\n border-left-width: 0;\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n transform: translateY(-50%);\n\n @include mixins.truncate-text;\n display: block;\n padding: 0 0.25rem;\n\n color: var(--limel-text-editor-label-color);\n font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n\n :host(limel-text-editor[required]) & {\n &::after {\n content: '*';\n }\n }\n}\n\n.placeholder {\n transition-property: top, padding;\n transition-duration: var(\n --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration\n );\n transition-timing-function: var(\n --limel-prosemirror-adapter-toolbar-transition-timing-function\n );\n @include mixins.truncate-text;\n pointer-events: none;\n position: absolute;\n top: var(--limel-text-editor-placeholder-top, 2.25rem);\n left: 0;\n right: 0;\n\n padding: var(--limel-text-editor-padding);\n font-style: italic;\n font-size: 0.875rem;\n color: shared_input-select-picker.$input-placeholder-color;\n}\n\nlimel-prosemirror-adapter {\n flex-grow: 1;\n\n min-width: 0;\n min-height: 0;\n height: 100%;\n overflow: hidden auto;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n:host(limel-text-editor.has-helper-text:focus-within),\n:host(limel-text-editor.has-helper-text[invalid]:not([invalid='false'])) {\n .notched-outline {\n --limel-text-editor-notched-outline-bottom: 1rem;\n }\n}\n\n:host(limel-text-editor[allow-resize]) {\n limel-prosemirror-adapter {\n resize: vertical;\n }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { Languages } from '../date-picker/date.types';\nimport { createRandomString } from '../../util/random-string';\nimport { CustomElement } from '../../global/shared-types/custom-element.types';\n\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-ui\n * @exampleComponent limel-example-text-editor-composite\n * @exampleComponent limel-example-text-editor-custom-element\n * @beta\n */\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /** The type of content that the editor should handle and emit, defaults to `markdown`\n *\n * Assumed to be set only once, so not reactive to changes\n */\n @Prop()\n public contentType: 'markdown' | 'html' = 'markdown';\n\n /**\n * Defines the language for translations.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled?: boolean = false;\n\n /**\n * Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n */\n @Prop({ reflect: true })\n public readonly?: boolean = false;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText?: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is empty.\n */\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /**\n * The label of the editor\n */\n @Prop({ reflect: true })\n public label?: string;\n\n /**\n * Set to `true` to indicate that the current value of the editor is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /**\n * Description of the text inside the editor as markdown\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * @private\n * set to private to avoid usage while under development\n */\n @Prop()\n public plugins: CustomElement[] = [];\n\n /**\n * Set to `true` to indicate that the field is required.\n *\n * :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n */\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /**\n * Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n */\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /**\n * Specifies the visual appearance of the editor.\n *\n * - `standard`: The default editor appearance with a full toolbar and\n * standard layout.\n * - `minimal`: A compact editor appearance, ideal for limited space\n * scenarios such as mobile devices. In this mode, the toolbar is hidden\n * until the editor is focused.\n */\n @Prop({ reflect: true })\n public ui?: 'standard' | 'minimal' = 'standard';\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n private helperTextId: string;\n private editorId: string;\n\n public constructor() {\n this.helperTextId = createRandomString();\n this.editorId = createRandomString();\n }\n\n public render() {\n return (\n <Host\n class={{\n 'has-helper-text': !!this.helperText,\n }}\n >\n <span class=\"notched-outline\">\n <span class=\"leading-outline\" />\n {this.renderLabel()}\n <span class=\"trailing-outline\" />\n </span>\n {this.renderEditor()}\n </Host>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return [\n <span class=\"lime-looks-like-input-value\">–</span>,\n this.renderHelperLine(),\n ];\n }\n\n if (this.readonly) {\n return [\n <limel-markdown\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n return [\n <limel-prosemirror-adapter\n aria-placeholder={this.placeholder}\n contentType={this.contentType}\n onChange={this.handleChange}\n plugins={this.plugins}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n tabindex={this.disabled ? -1 : undefined}\n aria-disabled={this.disabled}\n language={this.language}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return (\n <span class=\"notch\">\n <label htmlFor={this.editorId}>{this.label}</label>\n </span>\n );\n }\n\n private renderPlaceholder() {\n if (!this.placeholder || this.value) {\n return;\n }\n\n return (\n <span class=\"placeholder\" aria-hidden=\"true\">\n {this.placeholder}\n </span>\n );\n }\n\n private renderHelperLine = () => {\n if (!this.helperText) {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private isInvalid = () => {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"],"mappings":"6FAAA,MAAMA,EAAgB,qlO,MC+BTC,EAAU,MAkHnBC,YAAAC,G,yCAoFQC,KAAAC,iBAAmB,KACvB,IAAKD,KAAKE,WAAY,CAClB,M,CAGJ,OACIC,EAAA,qBACID,WAAYF,KAAKE,WACjBE,aAAcJ,KAAKI,aACnBC,QAASL,KAAKM,aAChB,EAIFN,KAAAM,UAAY,KAChB,GAAIN,KAAKO,SAAU,CAEf,OAAO,K,CAGX,GAAIP,KAAKK,QAAS,CACd,OAAO,I,GAIPL,KAAAQ,aAAgBC,IACpBA,EAAMC,kBACNV,KAAKW,OAAOC,KAAKH,EAAMI,OAAO,E,iBA3NQ,W,cAMb,K,cASD,M,cAYA,M,uFA0BD,M,kCAaO,G,cAYN,M,iBAOE,K,QAYO,WAYjCb,KAAKI,aAAeU,IACpBd,KAAKe,SAAWD,G,CAGbE,SACH,OACIb,EAACc,EAAI,CACDC,MAAO,CACH,oBAAqBlB,KAAKE,aAG9BC,EAAA,QAAMe,MAAM,mBACRf,EAAA,QAAMe,MAAM,oBACXlB,KAAKmB,cACNhB,EAAA,QAAMe,MAAM,sBAEflB,KAAKoB,e,CAKVA,eACJ,GAAIpB,KAAKO,WAAaP,KAAKqB,MAAO,CAC9B,MAAO,CACHlB,EAAA,QAAMe,MAAM,+BAA6B,KACzClB,KAAKC,mB,CAIb,GAAID,KAAKO,SAAU,CACf,MAAO,CACHJ,EAAA,kBACIkB,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,WAEbf,KAAKuB,oBACLvB,KAAKC,mB,CAIb,MAAO,CACHE,EAAA,gDACsBH,KAAKwB,YACvBC,YAAazB,KAAKyB,YAClBC,SAAU1B,KAAKQ,aACfmB,QAAS3B,KAAK2B,QACdN,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,SACTa,SAAU5B,KAAK6B,UAAY,EAAIC,UAAS,gBACzB9B,KAAK6B,SACpBE,SAAU/B,KAAK+B,WAEnB/B,KAAKuB,oBACLvB,KAAKC,mB,CAILkB,cACJ,IAAKnB,KAAKgC,MAAO,CACb,M,CAGJ,OACI7B,EAAA,QAAMe,MAAM,SACRf,EAAA,SAAO8B,QAASjC,KAAKe,UAAWf,KAAKgC,O,CAKzCT,oBACJ,IAAKvB,KAAKwB,aAAexB,KAAKqB,MAAO,CACjC,M,CAGJ,OACIlB,EAAA,QAAMe,MAAM,cAAa,cAAa,QACjClB,KAAKwB,Y"}
|
|
1
|
+
{"version":3,"names":["textEditorCss","TextEditor","constructor","hostRef","this","renderHelperLine","helperText","h","helperTextId","invalid","isInvalid","readonly","handleChange","event","stopPropagation","change","emit","detail","createRandomString","editorId","render","Host","class","renderLabel","renderEditor","value","id","renderPlaceholder","placeholder","contentType","onChange","plugins","tabindex","disabled","undefined","language","label","htmlFor"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins.scss';\n\n/**\n * @prop --text-editor-max-height: the tallest height the text editor can become when auto-resizing itself. Defaults to `calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem)`.\n * @prop --text-editor-fade-out-background-color: the color of the fade-out effect at the top and bottom of the text editor, when the text-editor is in readonly state. Defaults to rgb(var(--contrast-100)).\n */\n\n@include shared_input-select-picker.lime-looks-like-input-value;\n.lime-looks-like-input-value {\n padding: var(--limel-text-editor-padding);\n}\n\n* {\n box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\n --limel-prosemirror-adapter-toolbar-opacity: 0.6;\n --limel-text-editor-padding: 0.25rem 1rem 0.75rem 1rem;\n --limel-prosemirror-adapter-toolbar-grid-template-rows: 1fr;\n --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration: 0.3s;\n --limel-prosemirror-adapter-toolbar-transition-timing-function: cubic-bezier(\n 0.19,\n 0.23,\n 0.26,\n 0.89\n );\n\n position: relative;\n isolation: isolate;\n display: flex;\n flex-direction: column;\n\n width: 100%;\n min-width: 5rem;\n min-height: 5rem;\n height: 100%;\n max-height: var(\n --text-editor-max-height,\n calc(\n 100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) -\n 4rem\n )\n );\n padding: 1px; // prevents visual defects that can appear due to the backdrop-filter and closeness to borders\n}\n\n:host(limel-text-editor:focus-within),\n:host(limel-text-editor:not([ui='minimal']):hover) {\n --limel-prosemirror-adapter-toolbar-opacity: 1;\n}\n\n:host(limel-text-editor[ui='minimal']:not(:focus-within)) {\n --limel-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;\n --limel-prosemirror-adapter-toolbar-grid-template-rows: 0fr;\n --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration: 0.46s;\n --limel-prosemirror-adapter-action-bar-padding-top-bottom: 0;\n --limel-prosemirror-adapter-toolbar-opacity: 0;\n --limel-text-editor-placeholder-top: 0;\n min-height: 2.5rem;\n}\n\n:host(limel-text-editor:hover) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};\n}\n\n:host(limel-text-editor:focus-within) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};\n}\n\n:host(limel-text-editor[disabled]:not([disabled='false'])) {\n @include shared_input-select-picker.looks-disabled;\n\n limel-prosemirror-adapter {\n pointer-events: none;\n }\n}\n\n:host(limel-text-editor[invalid]:not([invalid='false'])) {\n --limel-text-editor-outline-color: var(--lime-error-text-color);\n}\n\n:host(limel-text-editor[readonly]:not([readonly='false'])) {\n --limel-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;\n --limel-text-editor-placeholder-top: 0;\n --limel-text-editor-outline-color: transparent;\n --limel-text-editor-background-color: transparent;\n\n limel-markdown {\n // displayed when `readonly` instead of the adapter\n display: block;\n padding: var(--limel-text-editor-padding);\n overflow-y: auto;\n\n &:before,\n &:after {\n z-index: 1;\n pointer-events: none;\n content: '';\n display: block;\n position: absolute;\n width: 100%;\n }\n &:after {\n height: 1.75rem;\n top: 0;\n background: linear-gradient(\n var(\n --text-editor-fade-out-background-color,\n rgb(var(--contrast-100))\n ),\n transparent\n );\n }\n\n &:before {\n height: 2rem;\n bottom: -0.25rem;\n background: linear-gradient(\n transparent,\n var(\n --text-editor-fade-out-background-color,\n rgb(var(--contrast-100))\n )\n );\n }\n }\n}\n\n.notched-outline {\n transition: bottom\n var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n cubic-bezier(1, 0.09, 0, 0.89);\n pointer-events: none;\n position: absolute;\n inset: 0;\n bottom: var(--limel-text-editor-notched-outline-bottom, 0);\n\n display: flex;\n background-color: var(--limel-text-editor-background-color);\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n transition: border-color 0.2s ease;\n border-width: 1px;\n border-style: solid;\n border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n flex-shrink: 0;\n width: 0.75rem;\n border-right-width: 0;\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n flex-shrink: 0;\n\n position: relative;\n z-index: 2;\n\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n\n max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n flex-grow: 1;\n border-left-width: 0;\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n transform: translateY(-50%);\n\n @include mixins.truncate-text;\n display: block;\n padding: 0 0.25rem;\n\n color: var(--limel-text-editor-label-color);\n font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n\n :host(limel-text-editor[required]) & {\n &::after {\n content: '*';\n }\n }\n}\n\n.placeholder {\n transition-property: top, padding;\n transition-duration: var(\n --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration\n );\n transition-timing-function: var(\n --limel-prosemirror-adapter-toolbar-transition-timing-function\n );\n @include mixins.truncate-text;\n pointer-events: none;\n position: absolute;\n top: var(--limel-text-editor-placeholder-top, 2.25rem);\n left: 0;\n right: 0;\n\n padding: var(--limel-text-editor-padding);\n font-style: italic;\n font-size: 0.875rem;\n color: shared_input-select-picker.$input-placeholder-color;\n}\n\nlimel-prosemirror-adapter {\n flex-grow: 1;\n\n min-width: 0;\n min-height: 0;\n height: 100%;\n overflow: hidden auto;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n:host(limel-text-editor.has-helper-text:focus-within),\n:host(limel-text-editor.has-helper-text[invalid]:not([invalid='false'])) {\n .notched-outline {\n --limel-text-editor-notched-outline-bottom: 1rem;\n }\n}\n\n:host(limel-text-editor[allow-resize]) {\n limel-prosemirror-adapter {\n resize: vertical;\n }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { Languages } from '../date-picker/date.types';\nimport { createRandomString } from '../../util/random-string';\nimport { CustomElement } from '../../global/shared-types/custom-element.types';\n\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-ui\n * @exampleComponent limel-example-text-editor-composite\n * @exampleComponent limel-example-text-editor-custom-element\n * @beta\n */\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /** The type of content that the editor should handle and emit, defaults to `markdown`\n *\n * Assumed to be set only once, so not reactive to changes\n */\n @Prop()\n public contentType: 'markdown' | 'html' = 'markdown';\n\n /**\n * Defines the language for translations.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled?: boolean = false;\n\n /**\n * Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n */\n @Prop({ reflect: true })\n public readonly?: boolean = false;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText?: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is empty.\n */\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /**\n * The label of the editor\n */\n @Prop({ reflect: true })\n public label?: string;\n\n /**\n * Set to `true` to indicate that the current value of the editor is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /**\n * Description of the text inside the editor as markdown\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * set to private to avoid usage while under development\n *\n * @private\n * @alpha\n */\n @Prop()\n public plugins: CustomElement[] = [];\n\n /**\n * Set to `true` to indicate that the field is required.\n *\n * :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n */\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /**\n * Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n */\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /**\n * Specifies the visual appearance of the editor.\n *\n * - `standard`: The default editor appearance with a full toolbar and\n * standard layout.\n * - `minimal`: A compact editor appearance, ideal for limited space\n * scenarios such as mobile devices. In this mode, the toolbar is hidden\n * until the editor is focused.\n */\n @Prop({ reflect: true })\n public ui?: 'standard' | 'minimal' = 'standard';\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n private helperTextId: string;\n private editorId: string;\n\n public constructor() {\n this.helperTextId = createRandomString();\n this.editorId = createRandomString();\n }\n\n public render() {\n return (\n <Host\n class={{\n 'has-helper-text': !!this.helperText,\n }}\n >\n <span class=\"notched-outline\">\n <span class=\"leading-outline\" />\n {this.renderLabel()}\n <span class=\"trailing-outline\" />\n </span>\n {this.renderEditor()}\n </Host>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return [\n <span class=\"lime-looks-like-input-value\">–</span>,\n this.renderHelperLine(),\n ];\n }\n\n if (this.readonly) {\n return [\n <limel-markdown\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n return [\n <limel-prosemirror-adapter\n aria-placeholder={this.placeholder}\n contentType={this.contentType}\n onChange={this.handleChange}\n plugins={this.plugins}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n tabindex={this.disabled ? -1 : undefined}\n aria-disabled={this.disabled}\n language={this.language}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return (\n <span class=\"notch\">\n <label htmlFor={this.editorId}>{this.label}</label>\n </span>\n );\n }\n\n private renderPlaceholder() {\n if (!this.placeholder || this.value) {\n return;\n }\n\n return (\n <span class=\"placeholder\" aria-hidden=\"true\">\n {this.placeholder}\n </span>\n );\n }\n\n private renderHelperLine = () => {\n if (!this.helperText) {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private isInvalid = () => {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"],"mappings":"6FAAA,MAAMA,EAAgB,qlO,MC+BTC,EAAU,MAoHnBC,YAAAC,G,yCAoFQC,KAAAC,iBAAmB,KACvB,IAAKD,KAAKE,WAAY,CAClB,M,CAGJ,OACIC,EAAA,qBACID,WAAYF,KAAKE,WACjBE,aAAcJ,KAAKI,aACnBC,QAASL,KAAKM,aAChB,EAIFN,KAAAM,UAAY,KAChB,GAAIN,KAAKO,SAAU,CAEf,OAAO,K,CAGX,GAAIP,KAAKK,QAAS,CACd,OAAO,I,GAIPL,KAAAQ,aAAgBC,IACpBA,EAAMC,kBACNV,KAAKW,OAAOC,KAAKH,EAAMI,OAAO,E,iBA7NQ,W,cAMb,K,cASD,M,cAYA,M,uFA0BD,M,kCAeO,G,cAYN,M,iBAOE,K,QAYO,WAYjCb,KAAKI,aAAeU,IACpBd,KAAKe,SAAWD,G,CAGbE,SACH,OACIb,EAACc,EAAI,CACDC,MAAO,CACH,oBAAqBlB,KAAKE,aAG9BC,EAAA,QAAMe,MAAM,mBACRf,EAAA,QAAMe,MAAM,oBACXlB,KAAKmB,cACNhB,EAAA,QAAMe,MAAM,sBAEflB,KAAKoB,e,CAKVA,eACJ,GAAIpB,KAAKO,WAAaP,KAAKqB,MAAO,CAC9B,MAAO,CACHlB,EAAA,QAAMe,MAAM,+BAA6B,KACzClB,KAAKC,mB,CAIb,GAAID,KAAKO,SAAU,CACf,MAAO,CACHJ,EAAA,kBACIkB,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,WAEbf,KAAKuB,oBACLvB,KAAKC,mB,CAIb,MAAO,CACHE,EAAA,gDACsBH,KAAKwB,YACvBC,YAAazB,KAAKyB,YAClBC,SAAU1B,KAAKQ,aACfmB,QAAS3B,KAAK2B,QACdN,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,SACTa,SAAU5B,KAAK6B,UAAY,EAAIC,UAAS,gBACzB9B,KAAK6B,SACpBE,SAAU/B,KAAK+B,WAEnB/B,KAAKuB,oBACLvB,KAAKC,mB,CAILkB,cACJ,IAAKnB,KAAKgC,MAAO,CACb,M,CAGJ,OACI7B,EAAA,QAAMe,MAAM,SACRf,EAAA,SAAO8B,QAASjC,KAAKe,UAAWf,KAAKgC,O,CAKzCT,oBACJ,IAAKvB,KAAKwB,aAAexB,KAAKqB,MAAO,CACjC,M,CAGJ,OACIlB,EAAA,QAAMe,MAAM,cAAa,cAAa,QACjClB,KAAKwB,Y"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["actionBarCss","ActionBar","this","firstRender","actionBarItems","renderActionBarItem","item","index","h","onSelect","handleSelect","isVisible","role","renderOverflowMenu","items","actions","length","overflowCutoff","openDirection","event","stopPropagation","isItem","detail","itemSelected","emit","handleIntersection","entries","intersectingItems","filter","entry","isIntersecting","notIntersectingItems","render","overflowActions","slice","Host","accessibleLabel","class","layout","map","connectedCallback","componentDidRender","haveItemsChanged","_a","intersectionObserver","disconnect","createIntersectionObserver","disconnectedCallback","undefined","options","root","host","shadowRoot","querySelector","rootMargin","threshold","IntersectionObserver","querySelectorAll","forEach","actionBarItem","observe","push","someItemRemoved","some","contains","someItemAdded","Array","from","includes","actionBarItemCss","ActionBarButton","constructor","hostRef","handleClick","select","tooltipId","createRandomString","componentWillLoad","makeEnterClickable","componentDidLoad","triggerIconColorWarning","removeEnterClickable","separator","id","type","onClick","disabled","isDisabled","selected","renderIcon","renderLabel","renderTooltip","icon","name","getIconName","color","getIconColor","iconColor","style","iconOnly","text","elementId","label","helperLabel","commandText","console","warn","ActionBarOverflowMenu","countOverflowedItems","numberOfMenuItems","slot","isMenuItem","editorLinkMenuCss","TextEditorLinkMenu","getTranslation","key","translate","get","language","validateLink","href","hasKnownProtocol","formattedLink","prependProtocol","getHref","handleKeyDown","ENTER","saveButton","focus","preventDefault","link","invalidLink","handleSave","handleCancel","KeyboardEvent","ESCAPE","cancel","save","handleLinkInputAction","window","open","handleLinkTitleChange","emitLinkChange","handleLinkValueChange","isValid","newLink","linkChange","setupGlobalHandlers","teardownGlobalHandlers","isOpen","document","addEventListener","removeEventListener","focusOnTextInput","textInput","inputField","requestAnimationFrame","value","leadingIcon","onChange","onKeyDown","ref","el","_b","trailingIcon","invalid","onAction","primary","_c"],"sources":["./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx","./src/components/text-editor/link-menu/editor-link-menu.scss?tag=limel-text-editor-link-menu&encapsulation=shadow","./src/components/text-editor/link-menu/editor-link-menu.tsx"],"sourcesContent":["/**\n* @prop --action-bar-item-text-color: Text color of action bar items, defaults to `--contrast-1100`.\n* @prop --action-bar-item-icon-color: Color of the icons displayed on each action bar item. Defaults to the text color. To specify a color for an individual item, use the `iconColor` prop instead.\n* @prop --action-bar-item-max-width: Maximum width of a button in the action bar. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n* @prop --action-bar-border-radius: Defines the roundness of the corners of the action bar. Defaults to `0`.\n* @prop --action-bar-background-color: Background color of the whole component. Defaults to `--contrast-100`.\n*/\n\n:host(limel-action-bar) {\n --action-bar-item-height: 2rem;\n\n --limel-action-bar-item-text-color: var(\n --action-bar-item-text-color,\n rgb(var(--contrast-1100))\n );\n\n box-sizing: border-box;\n\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.25rem;\n max-width: 100%;\n border-radius: var(--action-bar-border-radius);\n\n background-color: var(\n --action-bar-background-color,\n rgb(var(--contrast-100))\n );\n}\n\n:host(limel-action-bar),\n.items {\n gap: 0.25rem;\n @media (pointer: coarse) {\n gap: 0.5rem;\n }\n}\n\n.items {\n display: inline-flex;\n max-width: 100%;\n min-width: 0;\n}\n\n:host(limel-action-bar.is-full-width) {\n width: 100%;\n}\n\n:host(limel-action-bar.is-floating) {\n --action-bar-border-radius: 100vw;\n border: 1px solid rgb(var(--contrast-400));\n\n padding-right: 0.125rem;\n padding-left: 0.125rem;\n\n max-width: calc(100% - 2rem);\n box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { isItem } from './isItem';\n\n/**\n * An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n *\n * The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n *\n * The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n *\n * The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n *\n * @exampleComponent limel-example-action-bar\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n */\n@Component({\n tag: 'limel-action-bar',\n shadow: true,\n styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n /**\n * Items that are placed in the action bar.\n * These represent primary actions.\n */\n @Prop()\n public actions: Array<ActionBarItem | ListSeparator> = [];\n\n /**\n * A label used to describe the purpose of the element to users\n * of assistive technologies, like screen readers.\n * Example value: \"toolbar\"\n */\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /**\n * - When set to `fullWidth`, the component will take the\n * entire width of its container.\n * - When set to `floating`, the component will get basic stylings\n * to visualize the floating state.\n * :::note\n * You should still properly position the component\n * according to the structure of your user interface.\n * For example, use an `absolute` or `fixed` position.\n * :::\n */\n @Prop({ reflect: true })\n public layout?: 'fullWidth' | 'floating';\n\n /**\n * Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /**\n * Fired when a action bar item has been clicked.\n * @public\n */\n @Event()\n public itemSelected: EventEmitter<ActionBarItem>;\n\n @Element()\n private host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n private intersectionObserver: IntersectionObserver;\n private firstRender = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public render() {\n let overflowActions: Array<MenuItem | ListSeparator> = [];\n if (this.actions.length) {\n overflowActions = this.actions.slice(this.overflowCutoff);\n }\n\n return (\n <Host\n aria-label={this.accessibleLabel}\n class={{\n 'is-full-width': this.layout === 'fullWidth',\n 'is-floating': this.layout === 'floating',\n }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n </Host>\n );\n }\n\n public connectedCallback() {}\n\n public componentDidRender() {\n if (this.haveItemsChanged()) {\n this.intersectionObserver?.disconnect();\n this.createIntersectionObserver();\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n this.actionBarItems = [];\n this.connectedCallback = () => this.createIntersectionObserver();\n }\n\n private renderActionBarItem = (item: ActionBarItem, index: number) => {\n return (\n <limel-action-bar-item\n item={item}\n onSelect={this.handleSelect}\n isVisible={this.isVisible(index)}\n role=\"gridcell\"\n />\n );\n };\n\n private renderOverflowMenu = (items: Array<MenuItem | ListSeparator>) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\n }\n\n return (\n <limel-action-bar-overflow-menu\n openDirection={this.openDirection}\n items={items}\n onSelect={this.handleSelect}\n role=\"gridcell\"\n />\n );\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private handleSelect = (\n event: CustomEvent<ActionBarItem | ListSeparator>,\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.itemSelected.emit(event.detail);\n }\n };\n\n private handleIntersection = (entries: IntersectionObserverEntry[]) => {\n const intersectingItems = entries.filter(\n (entry) => entry.isIntersecting,\n );\n\n const notIntersectingItems = entries.filter(\n (entry) => !entry.isIntersecting,\n );\n\n if (this.firstRender) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.firstRender = false;\n };\n\n private createIntersectionObserver() {\n const options = {\n root: this.host.shadowRoot.querySelector('.items'),\n rootMargin: '0px',\n threshold: 1.0,\n };\n\n this.overflowCutoff = this.actions.length;\n this.firstRender = true;\n\n this.actionBarItems = [];\n\n this.intersectionObserver = new IntersectionObserver(\n this.handleIntersection,\n options,\n );\n\n this.host.shadowRoot\n .querySelectorAll('limel-action-bar-item')\n .forEach((actionBarItem) => {\n this.observe(actionBarItem);\n });\n }\n\n private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n this.intersectionObserver.observe(actionBarItem);\n this.actionBarItems.push(actionBarItem);\n }\n\n private haveItemsChanged() {\n const someItemRemoved = this.actionBarItems.some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.host.shadowRoot.contains(actionBarItem),\n );\n\n const someItemAdded = Array.from(\n this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n ).some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.actionBarItems.includes(actionBarItem),\n );\n\n return someItemRemoved || someItemAdded;\n }\n}\n","@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n transition: opacity 0.2s ease-in-out;\n position: relative;\n display: flex;\n align-items: center;\n\n &:not([is-visible]) {\n opacity: 0;\n pointer-events: none;\n }\n}\n\nbutton {\n all: unset;\n\n &:not([disabled]) {\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-action-bar-item-text-color),\n $color--hovered: var(--limel-action-bar-item-text-color),\n $background-color: var(--action-bar-background-color),\n $background-color--hovered: var(--action-bar-background-color),\n $background-color--inset: var(--action-bar-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n width: 100%;\n min-width: var(--action-bar-item-height);\n max-width: var(--action-bar-item-max-width, 10rem);\n height: var(--action-bar-item-height);\n color: var(--limel-action-bar-item-text-color);\n\n border-radius: var(--action-bar-item-height);\n font-size: functions.pxToRem(14);\n padding: 0 0.25rem;\n\n &:has(.text) {\n padding: 0 0.5rem;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n\n &.is-selected {\n &:not(:hover) {\n box-shadow: var(--button-shadow-inset);\n }\n color: var(--mdc-theme-primary) !important;\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding: 0 0.25rem;\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--action-bar-item-height) - 0.75rem);\n height: calc(var(--action-bar-item-height) - 0.75rem);\n color: var(\n --action-bar-item-icon-color,\n var(--limel-action-bar-item-text-color)\n );\n}\n\ndiv[role='separator'] {\n width: 1px;\n height: 1.5rem;\n border-radius: var(--action-bar-item-height);\n background-color: var(--limel-action-bar-item-text-color);\n opacity: 0.2;\n\n @media (pointer: fine) {\n margin-right: 0.5rem;\n margin-left: 0.5rem;\n }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n --notification-badge-background-color: rgb(var(--contrast-600));\n --notification-badge-text-color: rgb(var(--contrast-1200));\n\n &[open] {\n button {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\nbutton[slot='trigger'] {\n animation: fade-in ease-out 0.25s;\n font-size: 0.75rem;\n font-weight: bold;\n transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n 0% {\n scale: 0.8;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /**\n * Item that is placed in the action bar.\n */\n @Prop()\n public item!: ActionBarItem | ListSeparator;\n\n /**\n * Fired when a action bar item has been clicked.\n * @public\n */\n @Event()\n public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n /**\n * When the item is displayed in the available width,\n * this will be `false`.\n */\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n /**\n * When the item is selected, this will be `true`.\n */\n @Prop({ reflect: true })\n public selected: boolean = false;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /**\n * Used to attach the right tooltip to the right button\n */\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.triggerIconColorWarning();\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n class={{\n 'is-selected': this.isItem(this.item) && this.item.selected,\n }}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n const name = getIconName(this.item.icon);\n const color = getIconColor(this.item.icon, this.item.iconColor);\n\n return (\n <limel-icon\n name={name}\n style={{\n '--action-bar-item-icon-color': `${color}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) || this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n\n private triggerIconColorWarning() {\n if (this.isItem(this.item) && this.item.iconColor) {\n /* eslint-disable-next-line no-console */\n console.warn(\n \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n );\n }\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /**\n * List of the items that should be rendered in the overflow menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator>;\n\n /**\n * Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n /**\n * Fired when an item in the action bar overflow menu has been clicked.\n * @public\n */\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return [\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n </limel-menu>,\n ];\n }\n\n private countOverflowedItems = () => {\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n",":host(limel-text-editor-link-menu) {\n animation: fade 0.2s ease forwards;\n animation-delay: 0.1s; // prevents the visual glitch when the link opens\n opacity: 0;\n\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.5rem;\n max-width: calc(100vw - 2rem);\n border-radius: 0.5rem;\n background-color: var(--lime-elevated-surface-background-color);\n box-shadow: var(--shadow-depth-16);\n}\n\n.actions {\n display: flex;\n justify-content: end;\n gap: 0.5rem;\n}\n\n@keyframes fade {\n 0% {\n scale: 0.86;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\nimport { EditorTextLink } from '../prosemirror-adapter/menu/types';\nimport { Languages } from '../../date-picker/date.types';\nimport translate from '../../../global/translations';\nimport {\n getHref,\n hasKnownProtocol,\n prependProtocol,\n} from '../../../util/link-helper';\nimport { LimelInputFieldCustomEvent } from '../../../components';\nimport { ENTER, ESCAPE } from '../../../util/keycodes';\n\n/**\n * This component is a menu for editing a link in the text editor.\n * It allows the user to input the text and url for the link.\n * @beta\n * @private\n */\n@Component({\n tag: 'limel-text-editor-link-menu',\n shadow: true,\n styleUrl: 'editor-link-menu.scss',\n})\nexport class TextEditorLinkMenu {\n /**\n * The link\n */\n @Prop({ reflect: true })\n public link: EditorTextLink;\n\n /**\n * Defines the language for translations.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Open state of the link-menu dialog\n */\n @Prop({ reflect: true })\n public isOpen: boolean = false;\n\n /**\n * Emitted when the menu is closed from inside the component.\n * (*Not* emitted when the consumer sets the `open`-property to `false`.)\n */\n @Event()\n private cancel: EventEmitter<void>;\n\n /**\n * Emitted when the menu is saved from inside the component.\n */\n @Event()\n private save: EventEmitter<void>;\n\n /**\n * Emitted when the user inputs new values for the link\n */\n @Event()\n private linkChange: EventEmitter<EditorTextLink>;\n\n @State()\n private invalidLink: boolean = false;\n\n private textInput: HTMLLimelInputFieldElement;\n private saveButton: HTMLLimelButtonElement;\n\n public connectedCallback() {\n this.setupGlobalHandlers();\n }\n\n public disconnectedCallback() {\n this.teardownGlobalHandlers();\n }\n\n private setupGlobalHandlers() {\n if (this.isOpen) {\n document.addEventListener('keyup', this.handleCancel);\n }\n }\n\n private teardownGlobalHandlers() {\n document.removeEventListener('keyup', this.handleCancel);\n }\n\n public componentDidLoad() {\n this.focusOnTextInput();\n }\n\n private focusOnTextInput() {\n if (this.textInput) {\n const inputField = this.textInput.shadowRoot.querySelector('input');\n if (inputField) {\n requestAnimationFrame(() => {\n inputField.focus();\n });\n }\n }\n }\n\n public render() {\n return [\n <limel-input-field\n label={this.getTranslation('editor-link-menu.text')}\n value={this.link?.text || ''}\n leadingIcon=\"text_cursor\"\n onChange={this.handleLinkTitleChange}\n onKeyDown={this.handleKeyDown}\n ref={(el) =>\n (this.textInput = el as HTMLLimelInputFieldElement)\n }\n />,\n <limel-input-field\n label={this.getTranslation('editor-link-menu.link')}\n value={this.link?.href || ''}\n type=\"text\"\n leadingIcon=\"-lime-text-link\"\n trailingIcon=\"external_link\"\n invalid={this.invalidLink}\n onChange={this.handleLinkValueChange}\n onAction={this.handleLinkInputAction}\n onKeyDown={this.handleKeyDown}\n />,\n <div class=\"actions\">\n <limel-button\n label={this.getTranslation('cancel')}\n onClick={this.handleCancel}\n />\n <limel-button\n primary={true}\n label={this.getTranslation('save')}\n disabled={!this.link?.href || this.invalidLink}\n onClick={this.handleSave}\n ref={(el) =>\n (this.saveButton = el as HTMLLimelButtonElement)\n }\n slot=\"button\"\n />\n </div>,\n ];\n }\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private validateLink = (href: string): boolean => {\n if (!hasKnownProtocol(href)) {\n const formattedLink = prependProtocol(href);\n\n return !!getHref(formattedLink);\n }\n\n return !!getHref(href);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== ENTER) {\n return;\n }\n\n if (this.saveButton) {\n this.saveButton.focus();\n }\n\n event.preventDefault();\n if (this.link?.href && !this.invalidLink) {\n this.handleSave(event);\n }\n };\n\n private handleCancel = (event: MouseEvent | KeyboardEvent) => {\n if (event instanceof KeyboardEvent && event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.cancel.emit();\n };\n\n private handleSave = (event: MouseEvent | KeyboardEvent) => {\n event.stopPropagation();\n\n this.save.emit();\n };\n\n private handleLinkInputAction = (\n event: LimelInputFieldCustomEvent<void>,\n ) => {\n window.open(this.link.href, '_blank');\n event.stopPropagation();\n };\n\n private handleLinkTitleChange = (event: CustomEvent<string>) => {\n this.emitLinkChange(event.detail, this.link?.href);\n };\n\n private handleLinkValueChange = (event: CustomEvent<string>) => {\n const href = event.detail;\n const isValid = this.validateLink(href);\n\n this.invalidLink = !isValid;\n this.emitLinkChange(this.link?.text, href);\n };\n\n private emitLinkChange = (text: string, href: string) => {\n const newLink: EditorTextLink = {\n text: text,\n href: href,\n };\n\n this.linkChange.emit(newLink);\n };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["actionBarCss","ActionBar","this","firstRender","actionBarItems","renderActionBarItem","item","index","h","onSelect","handleSelect","isVisible","role","renderOverflowMenu","items","actions","length","overflowCutoff","openDirection","event","stopPropagation","isItem","detail","itemSelected","emit","handleIntersection","entries","intersectingItems","filter","entry","isIntersecting","notIntersectingItems","render","overflowActions","slice","Host","accessibleLabel","class","layout","map","connectedCallback","componentDidRender","haveItemsChanged","_a","intersectionObserver","disconnect","createIntersectionObserver","disconnectedCallback","undefined","options","root","host","shadowRoot","querySelector","rootMargin","threshold","IntersectionObserver","querySelectorAll","forEach","actionBarItem","observe","push","someItemRemoved","some","contains","someItemAdded","Array","from","includes","actionBarItemCss","ActionBarButton","constructor","hostRef","handleClick","select","tooltipId","createRandomString","componentWillLoad","makeEnterClickable","componentDidLoad","triggerIconColorWarning","removeEnterClickable","separator","id","type","onClick","disabled","isDisabled","selected","renderIcon","renderLabel","renderTooltip","icon","name","getIconName","color","getIconColor","iconColor","style","iconOnly","text","elementId","label","helperLabel","commandText","console","warn","ActionBarOverflowMenu","countOverflowedItems","numberOfMenuItems","slot","isMenuItem","editorLinkMenuCss","TextEditorLinkMenu","getTranslation","key","translate","get","language","validateLink","href","hasKnownProtocol","formattedLink","prependProtocol","getHref","handleKeyDown","ENTER","saveButton","focus","preventDefault","link","invalidLink","handleSave","handleCancel","KeyboardEvent","ESCAPE","cancel","save","handleLinkInputAction","window","open","handleLinkTitleChange","emitLinkChange","handleLinkValueChange","isValid","newLink","linkChange","setupGlobalHandlers","teardownGlobalHandlers","isOpen","document","addEventListener","removeEventListener","focusOnTextInput","textInput","inputField","requestAnimationFrame","value","leadingIcon","onChange","onKeyDown","ref","el","_b","trailingIcon","invalid","onAction","primary","_c"],"sources":["./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx","./src/components/text-editor/link-menu/editor-link-menu.scss?tag=limel-text-editor-link-menu&encapsulation=shadow","./src/components/text-editor/link-menu/editor-link-menu.tsx"],"sourcesContent":["/**\n* @prop --action-bar-item-text-color: Text color of action bar items, defaults to `--contrast-1100`.\n* @prop --action-bar-item-icon-color: Color of the icons displayed on each action bar item. Defaults to the text color. To specify a color for an individual item, use the `iconColor` prop instead.\n* @prop --action-bar-item-max-width: Maximum width of a button in the action bar. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n* @prop --action-bar-border-radius: Defines the roundness of the corners of the action bar. Defaults to `0`.\n* @prop --action-bar-background-color: Background color of the whole component. Defaults to `--contrast-100`.\n*/\n\n:host(limel-action-bar) {\n --action-bar-item-height: 2rem;\n\n --limel-action-bar-item-text-color: var(\n --action-bar-item-text-color,\n rgb(var(--contrast-1100))\n );\n\n box-sizing: border-box;\n\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.25rem;\n max-width: 100%;\n border-radius: var(--action-bar-border-radius);\n\n background-color: var(\n --action-bar-background-color,\n rgb(var(--contrast-100))\n );\n}\n\n:host(limel-action-bar),\n.items {\n gap: 0.25rem;\n @media (pointer: coarse) {\n gap: 0.5rem;\n }\n}\n\n.items {\n display: inline-flex;\n max-width: 100%;\n min-width: 0;\n}\n\n:host(limel-action-bar.is-full-width) {\n width: 100%;\n}\n\n:host(limel-action-bar.is-floating) {\n --action-bar-border-radius: 100vw;\n border: 1px solid rgb(var(--contrast-400));\n\n padding-right: 0.125rem;\n padding-left: 0.125rem;\n\n max-width: calc(100% - 2rem);\n box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { isItem } from './isItem';\n\n/**\n * An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n *\n * The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n *\n * The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n *\n * The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n *\n * @exampleComponent limel-example-action-bar-basic\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n */\n@Component({\n tag: 'limel-action-bar',\n shadow: true,\n styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n /**\n * Items that are placed in the action bar.\n * These represent primary actions.\n */\n @Prop()\n public actions: Array<ActionBarItem | ListSeparator> = [];\n\n /**\n * A label used to describe the purpose of the element to users\n * of assistive technologies, like screen readers.\n * Example value: \"toolbar\"\n */\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /**\n * - When set to `fullWidth`, the component will take the\n * entire width of its container.\n * - When set to `floating`, the component will get basic stylings\n * to visualize the floating state.\n * :::note\n * You should still properly position the component\n * according to the structure of your user interface.\n * For example, use an `absolute` or `fixed` position.\n * :::\n */\n @Prop({ reflect: true })\n public layout?: 'fullWidth' | 'floating';\n\n /**\n * Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /**\n * Fired when a action bar item has been clicked.\n * @public\n */\n @Event()\n public itemSelected: EventEmitter<ActionBarItem>;\n\n @Element()\n private host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n private intersectionObserver: IntersectionObserver;\n private firstRender = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public render() {\n let overflowActions: Array<MenuItem | ListSeparator> = [];\n if (this.actions.length) {\n overflowActions = this.actions.slice(this.overflowCutoff);\n }\n\n return (\n <Host\n aria-label={this.accessibleLabel}\n class={{\n 'is-full-width': this.layout === 'fullWidth',\n 'is-floating': this.layout === 'floating',\n }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n </Host>\n );\n }\n\n public connectedCallback() {}\n\n public componentDidRender() {\n if (this.haveItemsChanged()) {\n this.intersectionObserver?.disconnect();\n this.createIntersectionObserver();\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n this.actionBarItems = [];\n this.connectedCallback = () => this.createIntersectionObserver();\n }\n\n private renderActionBarItem = (item: ActionBarItem, index: number) => {\n return (\n <limel-action-bar-item\n item={item}\n onSelect={this.handleSelect}\n isVisible={this.isVisible(index)}\n role=\"gridcell\"\n />\n );\n };\n\n private renderOverflowMenu = (items: Array<MenuItem | ListSeparator>) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\n }\n\n return (\n <limel-action-bar-overflow-menu\n openDirection={this.openDirection}\n items={items}\n onSelect={this.handleSelect}\n role=\"gridcell\"\n />\n );\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private handleSelect = (\n event: CustomEvent<ActionBarItem | ListSeparator>,\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.itemSelected.emit(event.detail);\n }\n };\n\n private handleIntersection = (entries: IntersectionObserverEntry[]) => {\n const intersectingItems = entries.filter(\n (entry) => entry.isIntersecting,\n );\n\n const notIntersectingItems = entries.filter(\n (entry) => !entry.isIntersecting,\n );\n\n if (this.firstRender) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.firstRender = false;\n };\n\n private createIntersectionObserver() {\n const options = {\n root: this.host.shadowRoot.querySelector('.items'),\n rootMargin: '0px',\n threshold: 1.0,\n };\n\n this.overflowCutoff = this.actions.length;\n this.firstRender = true;\n\n this.actionBarItems = [];\n\n this.intersectionObserver = new IntersectionObserver(\n this.handleIntersection,\n options,\n );\n\n this.host.shadowRoot\n .querySelectorAll('limel-action-bar-item')\n .forEach((actionBarItem) => {\n this.observe(actionBarItem);\n });\n }\n\n private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n this.intersectionObserver.observe(actionBarItem);\n this.actionBarItems.push(actionBarItem);\n }\n\n private haveItemsChanged() {\n const someItemRemoved = this.actionBarItems.some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.host.shadowRoot.contains(actionBarItem),\n );\n\n const someItemAdded = Array.from(\n this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n ).some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.actionBarItems.includes(actionBarItem),\n );\n\n return someItemRemoved || someItemAdded;\n }\n}\n","@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n transition: opacity 0.2s ease-in-out;\n position: relative;\n display: flex;\n align-items: center;\n\n &:not([is-visible]) {\n opacity: 0;\n pointer-events: none;\n }\n}\n\nbutton {\n all: unset;\n\n &:not([disabled]) {\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-action-bar-item-text-color),\n $color--hovered: var(--limel-action-bar-item-text-color),\n $background-color: var(--action-bar-background-color),\n $background-color--hovered: var(--action-bar-background-color),\n $background-color--inset: var(--action-bar-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n width: 100%;\n min-width: var(--action-bar-item-height);\n max-width: var(--action-bar-item-max-width, 10rem);\n height: var(--action-bar-item-height);\n color: var(--limel-action-bar-item-text-color);\n\n border-radius: var(--action-bar-item-height);\n font-size: functions.pxToRem(14);\n padding: 0 0.25rem;\n\n &:has(.text) {\n padding: 0 0.5rem;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n\n &.is-selected {\n &:not(:hover) {\n box-shadow: var(--button-shadow-inset);\n }\n color: var(--mdc-theme-primary) !important;\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding: 0 0.25rem;\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--action-bar-item-height) - 0.75rem);\n height: calc(var(--action-bar-item-height) - 0.75rem);\n color: var(\n --action-bar-item-icon-color,\n var(--limel-action-bar-item-text-color)\n );\n}\n\ndiv[role='separator'] {\n width: 1px;\n height: 1.5rem;\n border-radius: var(--action-bar-item-height);\n background-color: var(--limel-action-bar-item-text-color);\n opacity: 0.2;\n\n @media (pointer: fine) {\n margin-right: 0.5rem;\n margin-left: 0.5rem;\n }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n --notification-badge-background-color: rgb(var(--contrast-600));\n --notification-badge-text-color: rgb(var(--contrast-1200));\n\n &[open] {\n button {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\nbutton[slot='trigger'] {\n animation: fade-in ease-out 0.25s;\n font-size: 0.75rem;\n font-weight: bold;\n transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n 0% {\n scale: 0.8;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /**\n * Item that is placed in the action bar.\n */\n @Prop()\n public item!: ActionBarItem | ListSeparator;\n\n /**\n * Fired when a action bar item has been clicked.\n * @public\n */\n @Event()\n public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n /**\n * When the item is displayed in the available width,\n * this will be `false`.\n */\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n /**\n * When the item is selected, this will be `true`.\n */\n @Prop({ reflect: true })\n public selected: boolean = false;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /**\n * Used to attach the right tooltip to the right button\n */\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.triggerIconColorWarning();\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n class={{\n 'is-selected': this.isItem(this.item) && this.item.selected,\n }}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n const name = getIconName(this.item.icon);\n const color = getIconColor(this.item.icon, this.item.iconColor);\n\n return (\n <limel-icon\n name={name}\n style={{\n '--action-bar-item-icon-color': `${color}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) || this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n\n private triggerIconColorWarning() {\n if (this.isItem(this.item) && this.item.iconColor) {\n /* eslint-disable-next-line no-console */\n console.warn(\n \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n );\n }\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /**\n * List of the items that should be rendered in the overflow menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator>;\n\n /**\n * Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n /**\n * Fired when an item in the action bar overflow menu has been clicked.\n * @public\n */\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return [\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n </limel-menu>,\n ];\n }\n\n private countOverflowedItems = () => {\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n",":host(limel-text-editor-link-menu) {\n animation: fade 0.2s ease forwards;\n animation-delay: 0.1s; // prevents the visual glitch when the link opens\n opacity: 0;\n\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.5rem;\n max-width: calc(100vw - 2rem);\n border-radius: 0.5rem;\n background-color: var(--lime-elevated-surface-background-color);\n box-shadow: var(--shadow-depth-16);\n}\n\n.actions {\n display: flex;\n justify-content: end;\n gap: 0.5rem;\n}\n\n@keyframes fade {\n 0% {\n scale: 0.86;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\nimport { EditorTextLink } from '../prosemirror-adapter/menu/types';\nimport { Languages } from '../../date-picker/date.types';\nimport translate from '../../../global/translations';\nimport {\n getHref,\n hasKnownProtocol,\n prependProtocol,\n} from '../../../util/link-helper';\nimport { LimelInputFieldCustomEvent } from '../../../components';\nimport { ENTER, ESCAPE } from '../../../util/keycodes';\n\n/**\n * This component is a menu for editing a link in the text editor.\n * It allows the user to input the text and url for the link.\n * @beta\n * @private\n */\n@Component({\n tag: 'limel-text-editor-link-menu',\n shadow: true,\n styleUrl: 'editor-link-menu.scss',\n})\nexport class TextEditorLinkMenu {\n /**\n * The link\n */\n @Prop({ reflect: true })\n public link: EditorTextLink;\n\n /**\n * Defines the language for translations.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Open state of the link-menu dialog\n */\n @Prop({ reflect: true })\n public isOpen: boolean = false;\n\n /**\n * Emitted when the menu is closed from inside the component.\n * (*Not* emitted when the consumer sets the `open`-property to `false`.)\n */\n @Event()\n private cancel: EventEmitter<void>;\n\n /**\n * Emitted when the menu is saved from inside the component.\n */\n @Event()\n private save: EventEmitter<void>;\n\n /**\n * Emitted when the user inputs new values for the link\n */\n @Event()\n private linkChange: EventEmitter<EditorTextLink>;\n\n @State()\n private invalidLink: boolean = false;\n\n private textInput: HTMLLimelInputFieldElement;\n private saveButton: HTMLLimelButtonElement;\n\n public connectedCallback() {\n this.setupGlobalHandlers();\n }\n\n public disconnectedCallback() {\n this.teardownGlobalHandlers();\n }\n\n private setupGlobalHandlers() {\n if (this.isOpen) {\n document.addEventListener('keyup', this.handleCancel);\n }\n }\n\n private teardownGlobalHandlers() {\n document.removeEventListener('keyup', this.handleCancel);\n }\n\n public componentDidLoad() {\n this.focusOnTextInput();\n }\n\n private focusOnTextInput() {\n if (this.textInput) {\n const inputField = this.textInput.shadowRoot.querySelector('input');\n if (inputField) {\n requestAnimationFrame(() => {\n inputField.focus();\n });\n }\n }\n }\n\n public render() {\n return [\n <limel-input-field\n label={this.getTranslation('editor-link-menu.text')}\n value={this.link?.text || ''}\n leadingIcon=\"text_cursor\"\n onChange={this.handleLinkTitleChange}\n onKeyDown={this.handleKeyDown}\n ref={(el) =>\n (this.textInput = el as HTMLLimelInputFieldElement)\n }\n />,\n <limel-input-field\n label={this.getTranslation('editor-link-menu.link')}\n value={this.link?.href || ''}\n type=\"text\"\n leadingIcon=\"-lime-text-link\"\n trailingIcon=\"external_link\"\n invalid={this.invalidLink}\n onChange={this.handleLinkValueChange}\n onAction={this.handleLinkInputAction}\n onKeyDown={this.handleKeyDown}\n />,\n <div class=\"actions\">\n <limel-button\n label={this.getTranslation('cancel')}\n onClick={this.handleCancel}\n />\n <limel-button\n primary={true}\n label={this.getTranslation('save')}\n disabled={!this.link?.href || this.invalidLink}\n onClick={this.handleSave}\n ref={(el) =>\n (this.saveButton = el as HTMLLimelButtonElement)\n }\n slot=\"button\"\n />\n </div>,\n ];\n }\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private validateLink = (href: string): boolean => {\n if (!hasKnownProtocol(href)) {\n const formattedLink = prependProtocol(href);\n\n return !!getHref(formattedLink);\n }\n\n return !!getHref(href);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== ENTER) {\n return;\n }\n\n if (this.saveButton) {\n this.saveButton.focus();\n }\n\n event.preventDefault();\n if (this.link?.href && !this.invalidLink) {\n this.handleSave(event);\n }\n };\n\n private handleCancel = (event: MouseEvent | KeyboardEvent) => {\n if (event instanceof KeyboardEvent && event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.cancel.emit();\n };\n\n private handleSave = (event: MouseEvent | KeyboardEvent) => {\n event.stopPropagation();\n\n this.save.emit();\n };\n\n private handleLinkInputAction = (\n event: LimelInputFieldCustomEvent<void>,\n ) => {\n window.open(this.link.href, '_blank');\n event.stopPropagation();\n };\n\n private handleLinkTitleChange = (event: CustomEvent<string>) => {\n this.emitLinkChange(event.detail, this.link?.href);\n };\n\n private handleLinkValueChange = (event: CustomEvent<string>) => {\n const href = event.detail;\n const isValid = this.validateLink(href);\n\n this.invalidLink = !isValid;\n this.emitLinkChange(this.link?.text, href);\n };\n\n private emitLinkChange = (text: string, href: string) => {\n const newLink: EditorTextLink = {\n text: text,\n href: href,\n };\n\n this.linkChange.emit(newLink);\n };\n}\n"],"mappings":"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"}
|