npm - @limetech/lime-elements - Versions diffs - 37.75.4 → 37.76.1 - Mend

@limetech/lime-elements 37.75.4 → 37.76.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

package/dist/cjs/limel-popover_2.cjs.entry.js CHANGED Viewed

@@ -119,6 +119,7 @@ const Popover = class {
       '--popover-surface-width',
       '--popover-body-background-color',
       '--popover-border-radius',
+      '--popover-box-shadow',
     ];
     const style = getComputedStyle(this.host);
     const values = propertyNames.map((property) => {
@@ -133,7 +134,7 @@ const Popover = class {
 };
 Popover.style = popoverCss;
-const popoverSurfaceCss = "@charset \"UTF-8\";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--shadow-depth-16);backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.95;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}";
+const popoverSurfaceCss = "@charset \"UTF-8\";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--popover-box-shadow, var(--shadow-depth-16));backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.95;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}";
 const PopoverSurface = class {
   constructor(hostRef) {

package/dist/cjs/limel-popover_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-popover.limel-popover-surface.entry.cjs.js","mappings":"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","names":["ESCAPE","createRandomString","h","zipObject"],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/*\n Check if an element is a descendant of another\n \n If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n \n @param element - the parent element\n * @param child - the child element to check\n * @returns `true` if child is a descendant of element, taking\n * portals into account\n /\nexport function portalContains(\n element: HTMLElement,\n child: HTMLElement,\n): boolean {\n if (element.contains(child) \|\| element.shadowRoot?.contains(child)) {\n return true;\n }\n\n const parent = findParent(child);\n if (!parent) {\n return false;\n }\n\n return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n const portal: any = element.closest('.limel-portal--container');\n if (portal) {\n return portal.portalSource;\n }\n\n const rootNode = element.getRootNode() as ShadowRoot;\n\n return rootNode.host;\n}\n","/\n @prop --popover-surface-width: Width of the popover surface. defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body, defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover, defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n /\n\n.trigger-anchor {\n display: inline-block;\n position: relative;\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\n\n/\n A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n \n Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n \n ## Usage\n * Use a popover to show options or information related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n \n Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n \n When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n \n \n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n \n :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n \n However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n \n :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n \n @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover-basic\n * @exampleComponent limel-example-popover-trigger-interaction\n /\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /\n True if the content within the popover should be visible\n /\n @Prop()\n public open = false;\n\n /\n Decides the popover's location in relation to its trigger\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Emits an event when the component is closing\n /\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\" />\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n 'aria-controls': this.portalId,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n isolation: isolate;\n\n position: relative;\n display: flex;\n\n width: var(--popover-surface-width, auto);\n max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n max-width: calc(100vw - 2rem);\n margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n flex: 1;\n min-width: 0;\n min-height: 0;\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n box-shadow: var(--shadow-depth-16);\n\n backdrop-filter: blur(functions.pxToRem(5));\n -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n &:after {\n // allows using `--popover-body-background-color` while\n // getting the blurred backdrop effect\n transition: opacity 0.4s ease;\n pointer-events: none;\n\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n\n opacity: 0.95; //temperary change due to not supporting `backdrop-filter` in Chromium browsers\n\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n background-color: var(\n --popover-body-background-color,\n var(--lime-elevated-surface-background-color)\n );\n }\n\n @include mixins.visualize-keyboard-focus;\n\n &:focus,\n &:focus-within {\n &:after {\n opacity: 1;\n }\n }\n\n & > {\n // this fixes some unwanted layout issues\n // which might be very hard for consumers to realize\n // and fix by themselves. Without this code,\n // if the consumer sets for example paddings in\n // what they send to the popover, their element\n // can grow larger than the popover surface\n box-sizing: border-box;\n }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/*\n @slot - Content to put inside the surface\n * @private\n /\n\n@Component({\n tag: 'limel-popover-surface',\n shadow: true,\n styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n /\n Content to render\n */\n @Prop()\n public contentCollection: HTMLCollection;\n\n @Element()\n private host: HTMLLimelPopoverSurfaceElement;\n\n public componentDidLoad() {\n this.appendElement();\n }\n\n public render() {\n return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n }\n\n private appendElement() {\n const portalContainer = this.host.shadowRoot.querySelector(\n '.limel-popover-surface',\n );\n\n Array.from(this.contentCollection).forEach((child) => {\n if (child.slot === 'trigger') {\n return;\n }\n\n portalContainer.appendChild(child);\n });\n }\n}\n"],"version":3}
1	+ {"file":"limel-popover.limel-popover-surface.entry.cjs.js","mappings":"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","names":["ESCAPE","createRandomString","h","zipObject"],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/*\n Check if an element is a descendant of another\n \n If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n \n @param element - the parent element\n * @param child - the child element to check\n * @returns `true` if child is a descendant of element, taking\n * portals into account\n /\nexport function portalContains(\n element: HTMLElement,\n child: HTMLElement,\n): boolean {\n if (element.contains(child) \|\| element.shadowRoot?.contains(child)) {\n return true;\n }\n\n const parent = findParent(child);\n if (!parent) {\n return false;\n }\n\n return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n const portal: any = element.closest('.limel-portal--container');\n if (portal) {\n return portal.portalSource;\n }\n\n const rootNode = element.getRootNode() as ShadowRoot;\n\n return rootNode.host;\n}\n","/\n @prop --popover-surface-width: Width of the popover surface. Defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body. Defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover. Defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n * @prop --popover-box-shadow: Defines the shadow of the popover surface. Defaults to `--shadow-depth-16`.\n /\n\n.trigger-anchor {\n display: inline-block;\n position: relative;\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\n\n/\n A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n \n Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n \n ## Usage\n * Use a popover to show options or information related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n \n Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n \n When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n \n \n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n \n :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n \n However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n \n :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n \n @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover-basic\n * @exampleComponent limel-example-popover-trigger-interaction\n * @exampleComponent limel-example-popover-styling\n /\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /\n True if the content within the popover should be visible\n /\n @Prop()\n public open = false;\n\n /\n Decides the popover's location in relation to its trigger\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Emits an event when the component is closing\n /\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\" />\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n '--popover-box-shadow',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n 'aria-controls': this.portalId,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n isolation: isolate;\n\n position: relative;\n display: flex;\n\n width: var(--popover-surface-width, auto);\n max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n max-width: calc(100vw - 2rem);\n margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n flex: 1;\n min-width: 0;\n min-height: 0;\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n box-shadow: var(--popover-box-shadow, var(--shadow-depth-16));\n\n backdrop-filter: blur(functions.pxToRem(5));\n -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n &:after {\n // allows using `--popover-body-background-color` while\n // getting the blurred backdrop effect\n transition: opacity 0.4s ease;\n pointer-events: none;\n\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n\n opacity: 0.95; //temperary change due to not supporting `backdrop-filter` in Chromium browsers\n\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n background-color: var(\n --popover-body-background-color,\n var(--lime-elevated-surface-background-color)\n );\n }\n\n @include mixins.visualize-keyboard-focus;\n\n &:focus,\n &:focus-within {\n &:after {\n opacity: 1;\n }\n }\n\n & > {\n // this fixes some unwanted layout issues\n // which might be very hard for consumers to realize\n // and fix by themselves. Without this code,\n // if the consumer sets for example paddings in\n // what they send to the popover, their element\n // can grow larger than the popover surface\n box-sizing: border-box;\n }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/*\n @slot - Content to put inside the surface\n * @private\n /\n\n@Component({\n tag: 'limel-popover-surface',\n shadow: true,\n styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n /\n Content to render\n */\n @Prop()\n public contentCollection: HTMLCollection;\n\n @Element()\n private host: HTMLLimelPopoverSurfaceElement;\n\n public componentDidLoad() {\n this.appendElement();\n }\n\n public render() {\n return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n }\n\n private appendElement() {\n const portalContainer = this.host.shadowRoot.querySelector(\n '.limel-popover-surface',\n );\n\n Array.from(this.contentCollection).forEach((child) => {\n if (child.slot === 'trigger') {\n return;\n }\n\n portalContainer.appendChild(child);\n });\n }\n}\n"],"version":3}

package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js CHANGED Viewed

@@ -28050,6 +28050,7 @@ const ProsemirrorAdapter = class {
     this.view.dispatch(tr);
     this.suppressChangeEvent = false;
   }
+  static get delegatesFocus() { return true; }
   get host() { return index.getElement(this); }
   static get watchers() { return {
     "value": ["watchValue"]