npm - @limetech/lime-elements - Versions diffs - 37.71.0 → 37.72.1 - Mend

@limetech/lime-elements 37.71.0 → 37.72.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 (66) hide show

package/dist/collection/components/card/card.css CHANGED Viewed

@@ -88,44 +88,9 @@ section {
 :host(limel-card[orientation=landscape]) section {
   flex-direction: row;
 }
-:host(limel-card[clickable]) section {
-  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
-  cursor: pointer;
-  color: var(--mdc-theme-on-surface);
-  background-color: var(--card-background-color, rgb(var(--contrast-200)));
-}
-:host(limel-card[clickable]) section:focus {
-  outline: none;
-}
-:host(limel-card[clickable]) section:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-depth-8-focused);
-}
-:host(limel-card[clickable]) section:hover, :host(limel-card[clickable]) section:focus, :host(limel-card[clickable]) section:focus-visible {
-  will-change: color, background-color, box-shadow, transform;
-}
-:host(limel-card[clickable]) section:hover {
-  transform: translate3d(0, 0.01rem, 0);
-  color: var(--mdc-theme-on-surface);
-  background-color: var(--card-background-color--hovered, var(--card-background-color, rgb(var(--contrast-200))));
-  box-shadow: var(--button-shadow-hovered);
-}
-:host(limel-card[clickable]) section:active {
-  --limel-clickable-transform-timing-function: cubic-bezier(
-      0.83,
-      -0.15,
-      0.49,
-      1.16
-  );
-  transform: translate3d(0, 0.05rem, 0);
-  box-shadow: var(--button-shadow-pressed);
-}
-:host(limel-card[clickable]) section:hover, :host(limel-card[clickable]) section:active {
-  --limel-clickable-transition-speed: 0.2s;
-  --limel-clickable-transform-speed: 0.16s;
-}
-:host(limel-card[clickable]:hover) section {
+section:hover {
   border-color: transparent;
+  background-color: var(--card-background-color--hovered, var(--card-background-color, rgb(var(--contrast-200))));
 }
 .body {
@@ -201,4 +166,78 @@ limel-action-bar {
   --action-bar-background-color: transparent;
   padding: 0.5rem;
   margin-left: auto;
+}
+.limel-3d-hover-effect-glow {
+  transition: background 0.4s ease, opacity 0.4s ease;
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: var(--card-border-radius, 0.95rem);
+  opacity: 0.1;
+  background-image: radial-gradient(circle at var(--limel-3d-hover-effect-glow-position, 50% -20%), rgb(var(--color-white), 0.3), rgb(var(--color-white), 0));
+  mix-blend-mode: plus-lighter;
+}
+section:hover .limel-3d-hover-effect-glow {
+  opacity: 0.5;
+}
+@media (prefers-reduced-motion) {
+  section:hover .limel-3d-hover-effect-glow {
+    opacity: 0.2;
+  }
+}
+:host(limel-card) {
+  isolation: isolate;
+  transform-style: preserve-3d;
+  perspective: 1000px;
+}
+@media (prefers-reduced-motion) {
+  :host(limel-card) {
+    perspective: 2000px;
+  }
+}
+section {
+  position: relative;
+  transition-duration: 0.8s;
+  transition-property: transform, box-shadow, background-color;
+  transition-timing-function: ease-out;
+  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
+}
+section:focus {
+  outline: none;
+}
+section:hover, section:focus, section:focus-visible, section:focus-within {
+  will-change: background-color, box-shadow, transform;
+}
+section:hover, section:focus, section:focus-visible, section:active {
+  transition-duration: 0.2s;
+}
+section:hover, section:focus-visible {
+  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);
+}
+section:hover {
+  transform: scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d));
+}
+section:focus-visible {
+  outline: none;
+  transform: scale3d(1.01, 1.01, 1.01);
+}
+:host(limel-card[clickable]) section {
+  cursor: pointer;
+  box-shadow: var(--button-shadow-normal);
+}
+:host(limel-card[clickable]) section:hover, :host(limel-card[clickable]) section:focus-visible {
+  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);
+}
+:host(limel-card[clickable]) section:active {
+  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
+  box-shadow: var(--button-shadow-pressed);
+}
+:host(limel-card[clickable]) section:focus-visible {
+  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);
+}
+:host(limel-card[clickable]) section:focus-visible:active {
+  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);
 }

package/dist/collection/components/card/card.js CHANGED Viewed

@@ -1,6 +1,7 @@
-import { h } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 import { isItem } from '../action-bar/isItem';
 import { getIconName } from '../icon/get-icon-props';
+import { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';
 /**
  * Card is a component that displays content about a single topic,
  * in a structured way. It can contain a header, and some supporting media such
@@ -32,8 +33,13 @@ export class Card {
     this.clickable = false;
     this.orientation = 'portrait';
   }
+  componentWillLoad() {
+    const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
+    this.handleMouseEnter = handleMouseEnter;
+    this.handleMouseLeave = handleMouseLeave;
+  }
   render() {
-    return (h("section", { tabindex: this.clickable ? 0 : '' }, this.renderImage(), h("div", { class: "body" }, this.renderHeader(), this.renderSlot(), this.renderValue(), this.renderActionBar())));
+    return (h(Host, { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("section", { tabindex: this.clickable ? 0 : '' }, this.renderImage(), h("div", { class: "body" }, this.renderHeader(), this.renderSlot(), this.renderValue(), this.renderActionBar()), h("div", { class: "limel-3d-hover-effect-glow" }))));
   }
   renderImage() {
     if (!this.image) {
@@ -278,5 +284,6 @@ export class Card {
         }
       }];
   }
+  static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=card.js.map

package/dist/collection/components/card/card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,SAAS,~~EAAE~~,CAAC,~~EAAE~~,IAAI,~~EAAE~~,KAAK,~~EAAgB~~,MAAM,eAAe,CAAC;~~AAGxE~~,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;~~AAIrD~~;;;;;;;;;;;;;GAaG;AAMH,MAAM,OAAO,IAAI;;~~IAgJL~~,uBAAkB,GAAG,CACzB,KAAiD,EACnD,EAAE;MACA,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;QACtB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;OAC1C;IACL,CAAC,CAAC;;;;;;~~mBA/GsD~~,EAAE;qBAO9B,KAAK;uBAOc,UAAU;;~~EAQlD~~,MAAM;IACT,OAAO,CACH,eAAS,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;~~MACrC~~,IAAI,CAAC,WAAW,EAAE;~~MACnB~~,WAAK,KAAK,EAAC,MAAM;~~QACZ~~,IAAI,CAAC,YAAY,EAAE;~~QACnB~~,IAAI,CAAC,UAAU,EAAE;~~QACjB~~,IAAI,CAAC,WAAW,EAAE;~~QAClB~~,IAAI,CAAC,eAAe,EAAE,CACrB,~~CACA~~,~~CACb~~,CAAC;EACN,CAAC;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,WAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,OAAO,EAAC,MAAM,GAAG,CAAC;EAC5E,CAAC;EAEO,YAAY;IAChB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACjD,OAAO;KACV;IAED,OAAO,CACH;MACK,IAAI,CAAC,UAAU,EAAE;MAClB,WAAK,KAAK,EAAC,UAAU;QAChB,IAAI,CAAC,aAAa,EAAE;QACpB,IAAI,CAAC,gBAAgB,EAAE,CACtB,CACD,CACZ,CAAC;EACN,CAAC;EAEO,UAAU;;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACpC,MAAM,KAAK,GACP,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAEjE,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAO,CACH,kBACI,KAAK,EAAE;QACH,KAAK,EAAE,GAAG,KAAK,EAAE;OACpB,EACD,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,IAAI,GACZ,CACL,CAAC;EACN,CAAC;EAEO,aAAa;IACjB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACf,OAAO;KACV;IAED,OAAO,cAAK,IAAI,CAAC,OAAO,CAAM,CAAC;EACnC,CAAC;EAEO,gBAAgB;IACpB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MAClB,OAAO;KACV;IAED,OAAO,cAAK,IAAI,CAAC,UAAU,CAAM,CAAC;EACtC,CAAC;EAEO,UAAU;IACd,OAAO,YAAM,IAAI,EAAC,WAAW,GAAG,CAAC;EACrC,CAAC;EAEO,WAAW;IACf,OAAO,sBAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;EACjD,CAAC;EAWO,eAAe;IACnB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;MACtB,OAAO;KACV;IAED,OAAO,CACH,wBACI,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,kBAAkB,GACzC,CACL,CAAC;EACN,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACJ","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { Image } from '../../global/shared-types/image.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { isItem } from '../action-bar/isItem';\nimport { getIconName } from '../icon/get-icon-props';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { ActionBarItem } from '../action-bar/action-bar.types';\n\n/*\n Card is a component that displays content about a single topic,\n * in a structured way. It can contain a header, and some supporting media such\n * as an image or an icon, a body of text, or optional actions.\n \n @exampleComponent limel-example-card-basic\n * @exampleComponent limel-example-card-image\n * @exampleComponent limel-example-card-actions\n * @exampleComponent limel-example-card-clickable\n * @exampleComponent limel-example-card-orientation\n * @exampleComponent limel-example-card-slot\n * @exampleComponent limel-example-card-styling\n * @beta\n /\n@Component({\n tag: 'limel-card',\n shadow: true,\n styleUrl: 'card.scss',\n})\nexport class Card {\n /\n Heading of the card,\n * to provide a short title about the context.\n /\n @Prop({ reflect: true })\n public heading?: string;\n\n /\n Subheading of the card\n * to provide a short description of the context.\n /\n @Prop({ reflect: true })\n public subheading?: string;\n\n /\n A hero image to display in the card,\n * to enrich the content with visual information.\n /\n @Prop()\n public image?: Image;\n\n /\n An icon, to display along with the heading and subheading.\n /\n @Prop({ reflect: true })\n public icon?: string \| Icon;\n\n /\n The content of the card.\n * Supports markdown, to provide a rich text experience.\n /\n @Prop()\n public value?: string;\n\n /\n Actions to display in the card,\n * to provide the user with options to interact with the content.\n /\n @Prop()\n public actions?: Array<ActionBarItem \| ListSeparator> = [];\n\n /\n When true, improve the accessibility of the component and hints the user\n * that the card can be interacted width.\n /\n @Prop({ reflect: true })\n public clickable: boolean = false;\n\n /\n The orientation of the card,\n * specially useful when the card has an image.\n /\n @Prop({ reflect: true })\n public orientation: 'landscape' \| 'portrait' = 'portrait';\n\n /\n Fired when a action bar item has been clicked.\n */\n @Event()\n public actionSelected: EventEmitter<ActionBarItem>;\n\n public render() {\n return (\n <section tabindex={this.clickable ? 0 : ''}>\n {this.renderImage()}\n <div class=\"body\">\n {this.renderHeader()}\n {this.renderSlot()}\n {this.renderValue()}\n {this.renderActionBar()}\n </div>\n </section>\n );\n }\n\n private renderImage() {\n if (!this.image) {\n return;\n }\n\n return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n }\n\n private renderHeader() {\n if (!this.heading && !this.subheading && !this.icon) {\n return;\n }\n\n return (\n <header>\n {this.renderIcon()}\n <div class=\"headings\">\n {this.renderHeading()}\n {this.renderSubheading()}\n </div>\n </header>\n );\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n const color =\n typeof this.icon !== 'string' ? this.icon?.color : undefined;\n\n if (!icon) {\n return;\n }\n\n return (\n <limel-icon\n style={{\n color: `${color}`,\n }}\n badge={true}\n name={icon}\n />\n );\n }\n\n private renderHeading() {\n if (!this.heading) {\n return;\n }\n\n return <h1>{this.heading}</h1>;\n }\n\n private renderSubheading() {\n if (!this.subheading) {\n return;\n }\n\n return <h2>{this.subheading}</h2>;\n }\n\n private renderSlot() {\n return <slot name=\"component\" />;\n }\n\n private renderValue() {\n return <limel-markdown value={this.value} />;\n }\n\n private handleActionSelect = (\n event: CustomEvent<ActionBarItem \| ListSeparator>,\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.actionSelected.emit(event.detail);\n }\n };\n\n private renderActionBar() {\n if (!this.actions.length) {\n return;\n }\n\n return (\n <limel-action-bar\n actions={this.actions}\n onItemSelected={this.handleActionSelect}\n />\n );\n }\n}\n"]}
1	+ {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Host,\n} from '@stencil/core';\nimport { Image } from '../../global/shared-types/image.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { isItem } from '../action-bar/isItem';\nimport { getIconName } from '../icon/get-icon-props';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { ActionBarItem } from '../action-bar/action-bar.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/*\n Card is a component that displays content about a single topic,\n * in a structured way. It can contain a header, and some supporting media such\n * as an image or an icon, a body of text, or optional actions.\n \n @exampleComponent limel-example-card-basic\n * @exampleComponent limel-example-card-image\n * @exampleComponent limel-example-card-actions\n * @exampleComponent limel-example-card-clickable\n * @exampleComponent limel-example-card-orientation\n * @exampleComponent limel-example-card-slot\n * @exampleComponent limel-example-card-styling\n * @beta\n /\n@Component({\n tag: 'limel-card',\n shadow: true,\n styleUrl: 'card.scss',\n})\nexport class Card {\n /\n Heading of the card,\n * to provide a short title about the context.\n /\n @Prop({ reflect: true })\n public heading?: string;\n\n /\n Subheading of the card\n * to provide a short description of the context.\n /\n @Prop({ reflect: true })\n public subheading?: string;\n\n /\n A hero image to display in the card,\n * to enrich the content with visual information.\n /\n @Prop()\n public image?: Image;\n\n /\n An icon, to display along with the heading and subheading.\n /\n @Prop({ reflect: true })\n public icon?: string \| Icon;\n\n /\n The content of the card.\n * Supports markdown, to provide a rich text experience.\n /\n @Prop()\n public value?: string;\n\n /\n Actions to display in the card,\n * to provide the user with options to interact with the content.\n /\n @Prop()\n public actions?: Array<ActionBarItem \| ListSeparator> = [];\n\n /\n When true, improve the accessibility of the component and hints the user\n * that the card can be interacted width.\n /\n @Prop({ reflect: true })\n public clickable: boolean = false;\n\n /\n The orientation of the card,\n * specially useful when the card has an image.\n /\n @Prop({ reflect: true })\n public orientation: 'landscape' \| 'portrait' = 'portrait';\n\n /\n Fired when a action bar item has been clicked.\n */\n @Event()\n public actionSelected: EventEmitter<ActionBarItem>;\n\n @Element()\n private host: HTMLElement;\n\n private handleMouseEnter: () => void;\n private handleMouseLeave: () => void;\n\n public componentWillLoad() {\n const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n this.host,\n );\n this.handleMouseEnter = handleMouseEnter;\n this.handleMouseLeave = handleMouseLeave;\n }\n\n public render() {\n return (\n <Host\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <section tabindex={this.clickable ? 0 : ''}>\n {this.renderImage()}\n <div class=\"body\">\n {this.renderHeader()}\n {this.renderSlot()}\n {this.renderValue()}\n {this.renderActionBar()}\n </div>\n <div class=\"limel-3d-hover-effect-glow\" />\n </section>\n </Host>\n );\n }\n\n private renderImage() {\n if (!this.image) {\n return;\n }\n\n return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n }\n\n private renderHeader() {\n if (!this.heading && !this.subheading && !this.icon) {\n return;\n }\n\n return (\n <header>\n {this.renderIcon()}\n <div class=\"headings\">\n {this.renderHeading()}\n {this.renderSubheading()}\n </div>\n </header>\n );\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n const color =\n typeof this.icon !== 'string' ? this.icon?.color : undefined;\n\n if (!icon) {\n return;\n }\n\n return (\n <limel-icon\n style={{\n color: `${color}`,\n }}\n badge={true}\n name={icon}\n />\n );\n }\n\n private renderHeading() {\n if (!this.heading) {\n return;\n }\n\n return <h1>{this.heading}</h1>;\n }\n\n private renderSubheading() {\n if (!this.subheading) {\n return;\n }\n\n return <h2>{this.subheading}</h2>;\n }\n\n private renderSlot() {\n return <slot name=\"component\" />;\n }\n\n private renderValue() {\n return <limel-markdown value={this.value} />;\n }\n\n private handleActionSelect = (\n event: CustomEvent<ActionBarItem \| ListSeparator>,\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.actionSelected.emit(event.detail);\n }\n };\n\n private renderActionBar() {\n if (!this.actions.length) {\n return;\n }\n\n return (\n <limel-action-bar\n actions={this.actions}\n onItemSelected={this.handleActionSelect}\n />\n );\n }\n}\n"]}

package/dist/collection/components/info-tile/info-tile.css CHANGED Viewed

@@ -103,7 +103,6 @@
   --icon-min-size: 2rem;
   --icon-preferred-size: 60cqh;
   --icon-max-size: calc(100cqw - 0.5rem);
-  isolation: isolate;
   container-type: size;
   position: relative;
   display: flex;
@@ -133,43 +132,6 @@ a {
   border-radius: var(--info-tile-border-radius, 1rem);
   background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));
 }
-a.is-clickable {
-  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
-  cursor: pointer;
-  color: var(--mdc-theme-on-surface);
-  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));
-  box-shadow: var(--button-shadow-normal);
-}
-a.is-clickable:hover, a.is-clickable:focus, a.is-clickable:focus-visible {
-  will-change: color, background-color, box-shadow, transform;
-}
-a.is-clickable:hover {
-  transform: translate3d(0, -0.04rem, 0);
-  color: var(--mdc-theme-on-surface);
-  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));
-  box-shadow: var(--button-shadow-hovered);
-}
-a.is-clickable:active {
-  --limel-clickable-transform-timing-function: cubic-bezier(
-      0.83,
-      -0.15,
-      0.49,
-      1.16
-  );
-  transform: translate3d(0, 0.05rem, 0);
-  box-shadow: var(--button-shadow-pressed);
-}
-a.is-clickable:hover, a.is-clickable:active {
-  --limel-clickable-transition-speed: 0.2s;
-  --limel-clickable-transform-speed: 0.16s;
-}
-a.is-clickable:focus {
-  outline: none;
-}
-a.is-clickable:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-depth-8-focused);
-}
 .icon {
   z-index: 1;
@@ -375,4 +337,77 @@ limel-linear-progress {
     right: 0.5rem;
     --icon-max-size: 3rem;
   }
+}
+.limel-3d-hover-effect-glow {
+  transition: background 0.4s ease, opacity 0.4s ease;
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: var(--info-tile-border-radius, 1rem);
+  opacity: 0.1;
+  background-image: radial-gradient(circle at var(--limel-3d-hover-effect-glow-position, 50% -20%), rgb(var(--color-white), 0.3), rgb(var(--color-white), 0));
+  mix-blend-mode: plus-lighter;
+}
+a:hover .limel-3d-hover-effect-glow {
+  opacity: 0.5;
+}
+@media (prefers-reduced-motion) {
+  a:hover .limel-3d-hover-effect-glow {
+    opacity: 0.2;
+  }
+}
+:host(limel-info-tile) {
+  isolation: isolate;
+  transform-style: preserve-3d;
+  perspective: 1000px;
+}
+@media (prefers-reduced-motion) {
+  :host(limel-info-tile) {
+    perspective: 2000px;
+  }
+}
+a {
+  position: relative;
+  transition-duration: 0.8s;
+  transition-property: transform, box-shadow, background-color;
+  transition-timing-function: ease-out;
+  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
+}
+a:focus {
+  outline: none;
+}
+a:hover, a:focus, a:focus-visible, a:focus-within {
+  will-change: background-color, box-shadow, transform;
+}
+a:hover, a:focus, a:focus-visible, a:active {
+  transition-duration: 0.2s;
+}
+a:hover, a:focus-visible {
+  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);
+}
+a:hover {
+  transform: scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d));
+}
+a:focus-visible {
+  outline: none;
+  transform: scale3d(1.01, 1.01, 1.01);
+}
+a.is-clickable {
+  cursor: pointer;
+  box-shadow: var(--button-shadow-normal);
+}
+a.is-clickable:hover, a.is-clickable:focus-visible {
+  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);
+}
+a.is-clickable:active {
+  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
+  box-shadow: var(--button-shadow-pressed);
+}
+a.is-clickable:focus-visible {
+  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);
+}
+a.is-clickable:focus-visible:active {
+  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);
 }

package/dist/collection/components/info-tile/info-tile.js CHANGED Viewed

@@ -1,4 +1,5 @@
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
+import { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';
 /**
  * This component can be used on places such as a start page or a dashboard.
  * It offers features for visualizing aggregated data along with supplementary
@@ -76,6 +77,11 @@ export class InfoTile {
     this.link = undefined;
     this.progress = undefined;
   }
+  componentWillLoad() {
+    const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
+    this.handleMouseEnter = handleMouseEnter;
+    this.handleMouseLeave = handleMouseLeave;
+  }
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const extendedAriaLabel = this.checkProps(this === null || this === void 0 ? void 0 : this.prefix) +
@@ -89,13 +95,11 @@ export class InfoTile {
       this.checkProps((_c = this === null || this === void 0 ? void 0 : this.progress) === null || _c === void 0 ? void 0 : _c.suffix) +
       this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
     const link = !this.disabled ? (_e = this.link) === null || _e === void 0 ? void 0 : _e.href : '#';
-    return [
-      h("a", { title: (_f = this.link) === null || _f === void 0 ? void 0 : _f.title, href: link, target: (_g = this.link) === null || _g === void 0 ? void 0 : _g.target, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
-          'is-clickable': !!((_h = this.link) === null || _h === void 0 ? void 0 : _h.href) && !this.disabled,
-          'has-circular-progress': !!((_j = this.progress) === null || _j === void 0 ? void 0 : _j.value) || ((_k = this.progress) === null || _k === void 0 ? void 0 : _k.value) === 0,
-        } }, this.renderIcon(), this.renderProgress(), h("div", { class: "value-group" }, this.renderPrefix(), h("div", { class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel()),
-      this.renderNotification(),
-    ];
+    return (h(Host, { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { title: (_f = this.link) === null || _f === void 0 ? void 0 : _f.title, href: link, target: (_g = this.link) === null || _g === void 0 ? void 0 : _g.target, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
+        'is-clickable': !!((_h = this.link) === null || _h === void 0 ? void 0 : _h.href) && !this.disabled,
+        'has-circular-progress': !!((_j = this.progress) === null || _j === void 0 ? void 0 : _j.value) ||
+          ((_k = this.progress) === null || _k === void 0 ? void 0 : _k.value) === 0,
+      } }, this.renderIcon(), this.renderProgress(), h("div", { class: "value-group" }, this.renderPrefix(), h("div", { class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel()), this.renderNotification(), h("div", { class: "limel-3d-hover-effect-glow" })));
   }
   checkProps(propValue) {
     return !propValue ? '' : propValue + ' ';
@@ -295,5 +299,6 @@ export class InfoTile {
       }
     };
   }
+  static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=info-tile.js.map

package/dist/collection/components/info-tile/info-tile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"info-tile.js","sourceRoot":"","sources":["../../../src/components/info-tile/info-tile.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\n\n/*\n This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n \n If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n \n @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-styling\n /\n@Component({\n tag: 'limel-info-tile',\n shadow: true,\n styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n /\n A piece of text or number that is the main piece of information\n * which the component is intended to visualize.\n /\n @Prop({ reflect: true })\n public value: number \| string;\n\n /\n Name of icon for the info tile.\n /\n @Prop()\n public icon?: string;\n\n /\n The text to show below the info tile. Long labels will be truncated.\n /\n @Prop({ reflect: true })\n public label?: string = null;\n\n /\n A string of text that is visually placed before the value.\n /\n @Prop({ reflect: true })\n public prefix?: string;\n\n /\n A string of text that is visually placed after the value.\n /\n @Prop({ reflect: true })\n public suffix?: string;\n\n /\n Set to `true` if info tile is disabled.\n /\n @Prop({ reflect: true })\n public disabled? = false;\n\n /\n If supplied, the info tile will display a notification badge.\n /\n @Prop({ reflect: true })\n public badge?: number \| string;\n\n /\n Set to `true` to put the component in the `loading` state.\n * This does _not_ disable the link. To do so, the\n * `disabled` property should be set to `true` as well.\n /\n @Prop({ reflect: true })\n public loading? = false;\n\n /\n If supplied, the info tile will be a clickable link.\n \n Supplying a value also adds an elevated effect using a shadow,\n * as well as `cursor: pointer`, which appears on hover.\n * While we strongly recommend supplying a link whenever the\n * component should act as a link, if this is not possible, and\n * you need to provide interaction through a click handler,\n * you can still get the correct styling by supplying a `Link`\n * object with the `href` property set to `'#'`.\n /\n @Prop()\n public link?: Link;\n\n /\n Properties of the optional circular progress bar.\n \n Defaults:\n * - `maxValue`: 100\n * - `suffix`: %\n * - `displayPercentageColors`: false\n \n Colors change with intervals of 10 %.\n */\n @Prop()\n public progress?: InfoTileProgress;\n\n public render() {\n const extendedAriaLabel =\n this.checkProps(this?.prefix) +\n this.value +\n ' ' +\n this.checkProps(this?.suffix) +\n this.checkProps(this?.label) +\n '. ' +\n this.checkProps(this?.progress?.prefix) +\n this.checkProps(this?.progress?.value) +\n this.checkProps(this?.progress?.suffix) +\n this.checkProps(this?.link?.title);\n\n const link = !this.disabled ? this.link?.href : '#';\n\n return [\n <a\n title={this.link?.title}\n href={link}\n target={this.link?.target}\n tabindex=\"0\"\n aria-label={extendedAriaLabel}\n aria-disabled={this.disabled}\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n class={{\n 'is-clickable': !!this.link?.href && !this.disabled,\n 'has-circular-progress':\n !!this.progress?.value \|\| this.progress?.value === 0,\n }}\n >\n {this.renderIcon()}\n {this.renderProgress()}\n <div class=\"value-group\">\n {this.renderPrefix()}\n <div class=\"value-and-suffix\">\n {this.renderValue()}\n {this.renderSuffix()}\n </div>\n {this.renderSpinner()}\n </div>\n {this.renderLabel()}\n </a>,\n this.renderNotification(),\n ];\n }\n\n private checkProps(propValue) {\n return !propValue ? '' : propValue + ' ';\n }\n\n private renderPrefix = () => {\n if (this.prefix) {\n return <span class=\"prefix\">{this.prefix}</span>;\n }\n };\n\n private renderValue = () => {\n const characterCount = (this.value ?? '').toString().length;\n\n if (!this.value && this.loading) {\n return <span class=\"value\">···</span>;\n }\n\n if (this.value) {\n return (\n <span\n class={{\n value: true,\n [`ch-${characterCount}`]: true,\n }}\n >\n {this.value}\n </span>\n );\n }\n };\n\n private renderSuffix = () => {\n if (this.suffix) {\n return <span class=\"suffix\">{this.suffix}</span>;\n }\n };\n\n private renderIcon = () => {\n if (this.icon) {\n return <limel-icon class=\"icon\" name={this.icon} />;\n }\n };\n\n private renderProgress = () => {\n if (this.progress?.value \|\| this.progress?.value === 0) {\n return (\n <limel-circular-progress\n class=\"progress\"\n prefix={this.progress.prefix}\n value={this.progress.value}\n suffix={this.progress.suffix}\n maxValue={this.progress.maxValue}\n displayPercentageColors={\n this.progress.displayPercentageColors\n }\n />\n );\n }\n };\n\n private renderLabel = () => {\n if (this.label) {\n return <span class=\"label\">{this.label}</span>;\n }\n };\n\n private renderNotification = () => {\n if (this.badge) {\n return <limel-badge label={this.badge} />;\n }\n };\n\n private renderSpinner = () => {\n if (this.loading) {\n return <limel-linear-progress indeterminate={true} />;\n }\n };\n}\n"]}
1	+ {"version":3,"file":"info-tile.js","sourceRoot":"","sources":["../../../src/components/info-tile/info-tile.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Host } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/*\n This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n \n If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n \n @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-styling\n /\n@Component({\n tag: 'limel-info-tile',\n shadow: true,\n styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n /\n A piece of text or number that is the main piece of information\n * which the component is intended to visualize.\n /\n @Prop({ reflect: true })\n public value: number \| string;\n\n /\n Name of icon for the info tile.\n /\n @Prop()\n public icon?: string;\n\n /\n The text to show below the info tile. Long labels will be truncated.\n /\n @Prop({ reflect: true })\n public label?: string = null;\n\n /\n A string of text that is visually placed before the value.\n /\n @Prop({ reflect: true })\n public prefix?: string;\n\n /\n A string of text that is visually placed after the value.\n /\n @Prop({ reflect: true })\n public suffix?: string;\n\n /\n Set to `true` if info tile is disabled.\n /\n @Prop({ reflect: true })\n public disabled? = false;\n\n /\n If supplied, the info tile will display a notification badge.\n /\n @Prop({ reflect: true })\n public badge?: number \| string;\n\n /\n Set to `true` to put the component in the `loading` state.\n * This does _not_ disable the link. To do so, the\n * `disabled` property should be set to `true` as well.\n /\n @Prop({ reflect: true })\n public loading? = false;\n\n /\n If supplied, the info tile will be a clickable link.\n \n Supplying a value also adds an elevated effect using a shadow,\n * as well as `cursor: pointer`, which appears on hover.\n * While we strongly recommend supplying a link whenever the\n * component should act as a link, if this is not possible, and\n * you need to provide interaction through a click handler,\n * you can still get the correct styling by supplying a `Link`\n * object with the `href` property set to `'#'`.\n /\n @Prop()\n public link?: Link;\n\n /\n Properties of the optional circular progress bar.\n \n Defaults:\n * - `maxValue`: 100\n * - `suffix`: %\n * - `displayPercentageColors`: false\n \n Colors change with intervals of 10 %.\n */\n @Prop()\n public progress?: InfoTileProgress;\n\n @Element()\n private host: HTMLElement;\n\n private handleMouseEnter: () => void;\n private handleMouseLeave: () => void;\n\n public componentWillLoad() {\n const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n this.host,\n );\n this.handleMouseEnter = handleMouseEnter;\n this.handleMouseLeave = handleMouseLeave;\n }\n\n public render() {\n const extendedAriaLabel =\n this.checkProps(this?.prefix) +\n this.value +\n ' ' +\n this.checkProps(this?.suffix) +\n this.checkProps(this?.label) +\n '. ' +\n this.checkProps(this?.progress?.prefix) +\n this.checkProps(this?.progress?.value) +\n this.checkProps(this?.progress?.suffix) +\n this.checkProps(this?.link?.title);\n\n const link = !this.disabled ? this.link?.href : '#';\n\n return (\n <Host\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <a\n title={this.link?.title}\n href={link}\n target={this.link?.target}\n tabindex=\"0\"\n aria-label={extendedAriaLabel}\n aria-disabled={this.disabled}\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n class={{\n 'is-clickable': !!this.link?.href && !this.disabled,\n 'has-circular-progress':\n !!this.progress?.value \|\|\n this.progress?.value === 0,\n }}\n >\n {this.renderIcon()}\n {this.renderProgress()}\n <div class=\"value-group\">\n {this.renderPrefix()}\n <div class=\"value-and-suffix\">\n {this.renderValue()}\n {this.renderSuffix()}\n </div>\n {this.renderSpinner()}\n </div>\n {this.renderLabel()}\n </a>\n {this.renderNotification()}\n <div class=\"limel-3d-hover-effect-glow\" />\n </Host>\n );\n }\n\n private checkProps(propValue) {\n return !propValue ? '' : propValue + ' ';\n }\n\n private renderPrefix = () => {\n if (this.prefix) {\n return <span class=\"prefix\">{this.prefix}</span>;\n }\n };\n\n private renderValue = () => {\n const characterCount = (this.value ?? '').toString().length;\n\n if (!this.value && this.loading) {\n return <span class=\"value\">···</span>;\n }\n\n if (this.value) {\n return (\n <span\n class={{\n value: true,\n [`ch-${characterCount}`]: true,\n }}\n >\n {this.value}\n </span>\n );\n }\n };\n\n private renderSuffix = () => {\n if (this.suffix) {\n return <span class=\"suffix\">{this.suffix}</span>;\n }\n };\n\n private renderIcon = () => {\n if (this.icon) {\n return <limel-icon class=\"icon\" name={this.icon} />;\n }\n };\n\n private renderProgress = () => {\n if (this.progress?.value \|\| this.progress?.value === 0) {\n return (\n <limel-circular-progress\n class=\"progress\"\n prefix={this.progress.prefix}\n value={this.progress.value}\n suffix={this.progress.suffix}\n maxValue={this.progress.maxValue}\n displayPercentageColors={\n this.progress.displayPercentageColors\n }\n />\n );\n }\n };\n\n private renderLabel = () => {\n if (this.label) {\n return <span class=\"label\">{this.label}</span>;\n }\n };\n\n private renderNotification = () => {\n if (this.badge) {\n return <limel-badge label={this.badge} />;\n }\n };\n\n private renderSpinner = () => {\n if (this.loading) {\n return <limel-linear-progress indeterminate={true} />;\n }\n };\n}\n"]}

package/dist/collection/components/markdown/markdown-parser.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { unified } from 'unified';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
 import remarkGfm from 'remark-gfm';
+import rehypeParse from 'rehype-parse';
 import rehypeExternalLinks from 'rehype-external-links';
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 import rehypeStringify from 'rehype-stringify';
@@ -45,6 +46,28 @@ export async function markdownToHTML(text, options) {
     .process(text);
   return file.toString();
 }
+/**
+ * Sanitizes a given HTML string by removing dangerous tags and attributes.
+ *
+ * @param html - The string containing HTML to sanitize.
+ * @param whitelist - Optional whitelist of custom components.
+ * @returns The sanitized HTML string.
+ */
+export async function sanitizeHTML(html, whitelist) {
+  const file = await unified()
+    .use(rehypeParse)
+    .use(rehypeSanitize, Object.assign({}, getWhiteList(whitelist !== null && whitelist !== void 0 ? whitelist : [])))
+    .use(() => {
+    return (tree) => {
+      // Run the sanitizeStyle function on all elements, to sanitize
+      // the value of the `style` attribute, if there is one.
+      visit(tree, 'element', sanitizeStyle);
+    };
+  })
+    .use(rehypeStringify)
+    .process(html);
+  return file.toString();
+}
 function getWhiteList(allowedComponents) {
   var _a, _b;
   const defaultSchemaClone = [...((_a = defaultSchema.attributes['*']) !== null && _a !== void 0 ? _a : [])];

package/dist/collection/components/markdown/markdown-parser.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"markdown-parser.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown-parser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,cAAc,EAAE,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAC/C,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,KAAK,UAAU,cAAc,CAChC,IAAY,EACZ,OAA+B;;EAE/B,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,EAAE;IAC9B,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;GACnD;EAED,MAAM,IAAI,GAAG,MAAM,OAAO,EAAE;KACvB,GAAG,CAAC,WAAW,CAAC;KAChB,GAAG,CAAC,SAAS,CAAC;KACd,GAAG,CAAC,YAAY,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC;KAC/C,GAAG,CAAC,mBAAmB,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;KAC9C,GAAG,CAAC,SAAS,CAAC;KACd,GAAG,CAAC,cAAc,oBACZ,YAAY,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,mCAAI,EAAE,CAAC,EAC3C;KACD,GAAG,CAAC,GAAG,EAAE;IACN,OAAO,CAAC,IAAU,EAAE,EAAE;MAClB,8DAA8D;MAC9D,uDAAuD;MACvD,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC;IAC1C,CAAC,CAAC;EACN,CAAC,CAAC;KACD,GAAG,CAAC,eAAe,CAAC;KACpB,OAAO,CAAC,IAAI,CAAC,CAAC;EAEnB,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC3B,CAAC;AAED,SAAS,YAAY,CAAC,iBAA4C;;EAC9D,MAAM,kBAAkB,GAAG,CAAC,GAAG,CAAC,MAAA,aAAa,CAAC,UAAU,CAAC,GAAG,CAAC,mCAAI,EAAE,CAAC,CAAC,CAAC;EACtE,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;IAClE,OAAO,IAAI,KAAK,QAAQ,CAAC;EAC7B,CAAC,CAAC,CAAC;EACH,0BAA0B,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;EAEzC,MAAM,SAAS,mCACR,aAAa,KAChB,QAAQ,EAAE;MACN,GAAG,CAAC,aAAa,CAAC,QAAQ,IAAI,EAAE,CAAC;MACjC,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC;KAC7D,EACD,UAAU,kCACH,aAAa,CAAC,UAAU,KAC3B,CAAC,EAAE;QACC,GAAG,CAAC,MAAA,aAAa,CAAC,UAAU,CAAC,CAAC,mCAAI,EAAE,CAAC;QACrC,CAAC,WAAW,EAAE,WAAW,CAAC;OAC7B,EACD,GAAG,EAAE,0BAA0B,MAEtC,CAAC;EAEF,KAAK,MAAM,SAAS,IAAI,iBAAiB,EAAE;IACvC,SAAS,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC,UAAU,CAAC;GAClE;EAED,OAAO,SAAS,CAAC;AACrB,CAAC","sourcesContent":["import { unified } from 'unified';\nimport remarkParse from 'remark-parse';\nimport remarkRehype from 'remark-rehype';\nimport remarkGfm from 'remark-gfm';\nimport rehypeExternalLinks from 'rehype-external-links';\nimport rehypeSanitize, { defaultSchema } from 'rehype-sanitize';\nimport rehypeStringify from 'rehype-stringify';\nimport rehypeRaw from 'rehype-raw';\nimport { visit } from 'unist-util-visit';\nimport { sanitizeStyle } from './sanitize-style';\nimport { Node } from 'unist';\nimport { Schema } from 'rehype-sanitize/lib';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\n\n/*\n Takes a string as input and returns a new string\n * where the text has been converted to HTML.\n \n If the text is formatted with .md markdown, it will\n * be transformed to HTML.\n \n If the text already is in HTML it will be sanitized and\n * \"dangerous\" tags such as <script> will be removed.\n \n @param text - The string to convert.\n * @param options - Options for the conversions.\n * @returns The resulting HTML.\n /\nexport async function markdownToHTML(\n text: string,\n options?: markdownToHTMLOptions,\n): Promise<string> {\n if (options?.forceHardLineBreaks) {\n text = text.replace(/(?<!\\\\)([\\n\\r])/g, ' $1');\n }\n\n const file = await unified()\n .use(remarkParse)\n .use(remarkGfm)\n .use(remarkRehype, { allowDangerousHtml: true })\n .use(rehypeExternalLinks, { target: '_blank' })\n .use(rehypeRaw)\n .use(rehypeSanitize, {\n ...getWhiteList(options?.whitelist ?? []),\n })\n .use(() => {\n return (tree: Node) => {\n // Run the sanitizeStyle function on all elements, to sanitize\n // the value of the `style` attribute, if there is one.\n visit(tree, 'element', sanitizeStyle);\n };\n })\n .use(rehypeStringify)\n .process(text);\n\n return file.toString();\n}\n\nfunction getWhiteList(allowedComponents: CustomElementDefinition[]): Schema {\n const defaultSchemaClone = [...(defaultSchema.attributes[''] ?? [])];\n const asteriskAttributeWhitelist = defaultSchemaClone.filter((attr) => {\n return attr !== 'height';\n });\n asteriskAttributeWhitelist.push('style');\n\n const whitelist: Schema = {\n ...defaultSchema,\n tagNames: [\n ...(defaultSchema.tagNames \|\| []),\n ...allowedComponents.map((component) => component.tagName),\n ],\n attributes: {\n ...defaultSchema.attributes,\n p: [\n ...(defaultSchema.attributes.p ?? []),\n ['className', 'MsoNormal'],\n ], // Allow the class 'MsoNormal' on <p> elements\n '': asteriskAttributeWhitelist,\n },\n };\n\n for (const component of allowedComponents) {\n whitelist.attributes[component.tagName] = component.attributes;\n }\n\n return whitelist;\n}\n\n/\n Options for markdownToHTML.\n /\nexport interface markdownToHTMLOptions {\n /\n Set to `true` to convert all soft line breaks to hard line breaks.\n */\n forceHardLineBreaks?: boolean;\n whitelist?: CustomElementDefinition[];\n}\n"]}
1	+ {"version":3,"file":"markdown-parser.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown-parser.ts"],"names":[],"mappings":"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","sourcesContent":["import { unified } from 'unified';\nimport remarkParse from 'remark-parse';\nimport remarkRehype from 'remark-rehype';\nimport remarkGfm from 'remark-gfm';\nimport rehypeParse from 'rehype-parse';\nimport rehypeExternalLinks from 'rehype-external-links';\nimport rehypeSanitize, { defaultSchema } from 'rehype-sanitize';\nimport rehypeStringify from 'rehype-stringify';\nimport rehypeRaw from 'rehype-raw';\nimport { visit } from 'unist-util-visit';\nimport { sanitizeStyle } from './sanitize-style';\nimport { Node } from 'unist';\nimport { Schema } from 'rehype-sanitize/lib';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\n\n/*\n Takes a string as input and returns a new string\n * where the text has been converted to HTML.\n \n If the text is formatted with .md markdown, it will\n * be transformed to HTML.\n \n If the text already is in HTML it will be sanitized and\n * \"dangerous\" tags such as <script> will be removed.\n \n @param text - The string to convert.\n * @param options - Options for the conversions.\n * @returns The resulting HTML.\n /\nexport async function markdownToHTML(\n text: string,\n options?: markdownToHTMLOptions,\n): Promise<string> {\n if (options?.forceHardLineBreaks) {\n text = text.replace(/(?<!\\\\)([\\n\\r])/g, ' $1');\n }\n\n const file = await unified()\n .use(remarkParse)\n .use(remarkGfm)\n .use(remarkRehype, { allowDangerousHtml: true })\n .use(rehypeExternalLinks, { target: '_blank' })\n .use(rehypeRaw)\n .use(rehypeSanitize, {\n ...getWhiteList(options?.whitelist ?? []),\n })\n .use(() => {\n return (tree: Node) => {\n // Run the sanitizeStyle function on all elements, to sanitize\n // the value of the `style` attribute, if there is one.\n visit(tree, 'element', sanitizeStyle);\n };\n })\n .use(rehypeStringify)\n .process(text);\n\n return file.toString();\n}\n\n/\n Sanitizes a given HTML string by removing dangerous tags and attributes.\n \n @param html - The string containing HTML to sanitize.\n * @param whitelist - Optional whitelist of custom components.\n * @returns The sanitized HTML string.\n /\nexport async function sanitizeHTML(\n html: string,\n whitelist?: CustomElementDefinition[],\n): Promise<string> {\n const file = await unified()\n .use(rehypeParse)\n .use(rehypeSanitize, {\n ...getWhiteList(whitelist ?? []),\n })\n .use(() => {\n return (tree: Node) => {\n // Run the sanitizeStyle function on all elements, to sanitize\n // the value of the `style` attribute, if there is one.\n visit(tree, 'element', sanitizeStyle);\n };\n })\n .use(rehypeStringify)\n .process(html);\n\n return file.toString();\n}\n\nfunction getWhiteList(allowedComponents: CustomElementDefinition[]): Schema {\n const defaultSchemaClone = [...(defaultSchema.attributes[''] ?? [])];\n const asteriskAttributeWhitelist = defaultSchemaClone.filter((attr) => {\n return attr !== 'height';\n });\n asteriskAttributeWhitelist.push('style');\n\n const whitelist: Schema = {\n ...defaultSchema,\n tagNames: [\n ...(defaultSchema.tagNames \|\| []),\n ...allowedComponents.map((component) => component.tagName),\n ],\n attributes: {\n ...defaultSchema.attributes,\n p: [\n ...(defaultSchema.attributes.p ?? []),\n ['className', 'MsoNormal'],\n ], // Allow the class 'MsoNormal' on <p> elements\n '': asteriskAttributeWhitelist,\n },\n };\n\n for (const component of allowedComponents) {\n whitelist.attributes[component.tagName] = component.attributes;\n }\n\n return whitelist;\n}\n\n/\n Options for markdownToHTML.\n /\nexport interface markdownToHTMLOptions {\n /\n Set to `true` to convert all soft line breaks to hard line breaks.\n */\n forceHardLineBreaks?: boolean;\n whitelist?: CustomElementDefinition[];\n}\n"]}

package/dist/collection/components/text-editor/utils/html-converter.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { markdownToHTML } from '../../markdown/markdown-parser';
+import { sanitizeHTML } from '../../markdown/markdown-parser';
 /**
  * @private
  */
 export class HTMLConverter {
   constructor(plugins) {
     this.parseAsHTML = (text) => {
-      return markdownToHTML(text, { whitelist: this.customNodes });
+      return sanitizeHTML(text, this.customNodes);
     };
     this.serialize = (view) => {
       if (view.dom.textContent === '') {

package/dist/collection/components/text-editor/utils/html-converter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"html-converter.js","sourceRoot":"","sources":["../../../../src/components/text-editor/utils/html-converter.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,~~cAAc~~,EAAE,MAAM,gCAAgC,CAAC;~~AAGhE~~;;GAEG;AACH,MAAM,OAAO,aAAa;EAGtB,YAAY,OAAkC;IAIvC,gBAAW,GAAG,CAAC,IAAY,EAAmB,EAAE;MACnD,OAAO,~~cAAc~~,CAAC,IAAI,EAAE,~~EAAE,SAAS,EAAE,~~IAAI,CAAC,WAAW,~~EAAE,~~CAAC,CAAC;~~IACjE~~,CAAC,CAAC;IAEK,cAAS,GAAG,CAAC,IAAgB,EAAU,EAAE;MAC5C,IAAI,IAAI,CAAC,GAAG,CAAC,WAAW,KAAK,EAAE,EAAE;QAC7B,OAAO,EAAE,CAAC;OACb;WAAM;QACH,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC;OAC7B;IACL,CAAC,CAAC;IAbE,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;EAC/B,CAAC;CAaJ","sourcesContent":["import { ContentTypeConverter } from './content-type-converter';\nimport { EditorView } from 'prosemirror-view';\nimport { ~~markdownToHTML~~ } from '../../markdown/markdown-parser';\nimport { CustomElementDefinition } from '../../../interface';\n\n/*\n @private\n */\nexport class HTMLConverter implements ContentTypeConverter {\n private customNodes: CustomElementDefinition[];\n\n constructor(plugins: CustomElementDefinition[]) {\n this.customNodes = plugins;\n }\n\n public parseAsHTML = (text: string): Promise<string> => {\n return ~~markdownToHTML~~(text, ~~{ whitelist:~~ this.customNodes });\n };\n\n public serialize = (view: EditorView): string => {\n if (view.dom.textContent === '') {\n return '';\n } else {\n return view.dom.innerHTML;\n }\n };\n}\n"]}
1	+ {"version":3,"file":"html-converter.js","sourceRoot":"","sources":["../../../../src/components/text-editor/utils/html-converter.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAG9D;;GAEG;AACH,MAAM,OAAO,aAAa;EAGtB,YAAY,OAAkC;IAIvC,gBAAW,GAAG,CAAC,IAAY,EAAmB,EAAE;MACnD,OAAO,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAChD,CAAC,CAAC;IAEK,cAAS,GAAG,CAAC,IAAgB,EAAU,EAAE;MAC5C,IAAI,IAAI,CAAC,GAAG,CAAC,WAAW,KAAK,EAAE,EAAE;QAC7B,OAAO,EAAE,CAAC;OACb;WAAM;QACH,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC;OAC7B;IACL,CAAC,CAAC;IAbE,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;EAC/B,CAAC;CAaJ","sourcesContent":["import { ContentTypeConverter } from './content-type-converter';\nimport { EditorView } from 'prosemirror-view';\nimport { sanitizeHTML } from '../../markdown/markdown-parser';\nimport { CustomElementDefinition } from '../../../interface';\n\n/*\n @private\n */\nexport class HTMLConverter implements ContentTypeConverter {\n private customNodes: CustomElementDefinition[];\n\n constructor(plugins: CustomElementDefinition[]) {\n this.customNodes = plugins;\n }\n\n public parseAsHTML = (text: string): Promise<string> => {\n return sanitizeHTML(text, this.customNodes);\n };\n\n public serialize = (view: EditorView): string => {\n if (view.dom.textContent === '') {\n return '';\n } else {\n return view.dom.innerHTML;\n }\n };\n}\n"]}

package/dist/collection/style/mixins.scss CHANGED Viewed

@@ -456,3 +456,117 @@ $clickable-normal-state-transitions: (
     clip-path: inset(50%);
     white-space: nowrap;
 }
+// This mixin designed to enhance the visual effects,
+// when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts`
+// is implemented in a component.
+// This adds styles to a `<div class"limel-3d-hover-effect-glow" />`, needed to create
+// a glow effect on a 3D element when the parent element is hovered.
+// when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts`
+// Parts of these styles are controlled by the `titleFollowingTheCursor` function.
+@mixin limel-3d-hover-effect-glow($the3dElement, $border-radius) {
+    .limel-3d-hover-effect-glow {
+        transition:
+            background 0.4s ease,
+            opacity 0.4s ease;
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        border-radius: $border-radius;
+        opacity: 0.1;
+        #{$the3dElement}:hover & {
+            opacity: 0.5;
+            @media (prefers-reduced-motion) {
+                opacity: 0.2;
+            }
+        }
+        background-image: radial-gradient(
+            circle at var(--limel-3d-hover-effect-glow-position, 50% -20%),
+            rgb(var(--color-white), 0.3),
+            rgb(var(--color-white), 0)
+        );
+        mix-blend-mode: plus-lighter;
+    }
+}
+// These mixins below are designed to apply the necessary visual effects,
+// when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts`
+// is implemented in a component.
+@mixin parent-of-the-3d-element {
+    isolation: isolate;
+    transform-style: preserve-3d;
+    perspective: 1000px;
+    @media (prefers-reduced-motion) {
+        perspective: 2000px;
+    }
+}
+@mixin the-3d-element {
+    position: relative;
+    transition-duration: 0.8s;
+    transition-property: transform, box-shadow, background-color;
+    transition-timing-function: ease-out;
+    transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
+    &:focus {
+        outline: none;
+    }
+    &:hover,
+    &:focus,
+    &:focus-visible,
+    &:focus-within {
+        will-change: background-color, box-shadow, transform;
+    }
+    &:hover,
+    &:focus,
+    &:focus-visible,
+    &:active {
+        transition-duration: 0.2s;
+    }
+    &:hover,
+    &:focus-visible {
+        box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);
+    }
+    &:hover {
+        transform: scale3d(1.01, 1.01, 1.01)
+            rotate3d(var(--limel-3d-hover-effect-rotate3d));
+    }
+    &:focus-visible {
+        outline: none;
+        transform: scale3d(1.01, 1.01, 1.01);
+    }
+}
+@mixin the-3d-element--clickable {
+    cursor: pointer;
+    box-shadow: var(--button-shadow-normal);
+    &:hover,
+    &:focus-visible {
+        // seems repetitive. But it's required for some scenarios, like for info tiles.
+        box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);
+    }
+    &:active {
+        transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
+        box-shadow: var(--button-shadow-pressed);
+    }
+    &:focus-visible {
+        box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);
+    }
+    &:focus-visible:active {
+        box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);
+    }
+}