@limetech/lime-elements 37.79.7 → 37.80.0

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 (30) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/config-e7e1a299.js.map +1 -1
  3. package/dist/cjs/limel-card.cjs.entry.js +1 -1
  4. package/dist/cjs/limel-card.cjs.entry.js.map +1 -1
  5. package/dist/cjs/limel-markdown.cjs.entry.js +2 -1
  6. package/dist/cjs/limel-markdown.cjs.entry.js.map +1 -1
  7. package/dist/collection/components/card/card.css +0 -1
  8. package/dist/collection/components/config/config.js +1 -1
  9. package/dist/collection/components/markdown/markdown.js +5 -3
  10. package/dist/collection/components/markdown/markdown.js.map +1 -1
  11. package/dist/collection/global/config.js.map +1 -1
  12. package/dist/esm/config-656a588f.js.map +1 -1
  13. package/dist/esm/limel-card.entry.js +1 -1
  14. package/dist/esm/limel-card.entry.js.map +1 -1
  15. package/dist/esm/limel-markdown.entry.js +2 -1
  16. package/dist/esm/limel-markdown.entry.js.map +1 -1
  17. package/dist/lime-elements/lime-elements.esm.js +1 -1
  18. package/dist/lime-elements/p-2c35fb9d.js.map +1 -1
  19. package/dist/lime-elements/p-40e51cf9.entry.js +2 -0
  20. package/dist/lime-elements/p-40e51cf9.entry.js.map +1 -0
  21. package/dist/lime-elements/p-605a3b5e.entry.js +2 -0
  22. package/dist/lime-elements/p-605a3b5e.entry.js.map +1 -0
  23. package/dist/types/components/markdown/markdown.d.ts +2 -0
  24. package/dist/types/components.d.ts +2 -2
  25. package/dist/types/global/config.d.ts +9 -0
  26. package/package.json +6 -6
  27. package/dist/lime-elements/p-691e4e6a.entry.js +0 -2
  28. package/dist/lime-elements/p-691e4e6a.entry.js.map +0 -1
  29. package/dist/lime-elements/p-74d3b0ca.entry.js +0 -2
  30. package/dist/lime-elements/p-74d3b0ca.entry.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,19 @@
1
+ ## [37.80.0](https://github.com/Lundalogik/lime-elements/compare/v37.79.8...v37.80.0) (2025-01-28)
2
+
3
+
4
+ ### Features
5
+
6
+
7
+ * **markdown:** support global whitelist config ([ff8a507](https://github.com/Lundalogik/lime-elements/commit/ff8a507cd3f37b279879d2ef787b1bce15942f7d))
8
+
9
+ ## [37.79.8](https://github.com/Lundalogik/lime-elements/compare/v37.79.7...v37.79.8) (2025-01-22)
10
+
11
+
12
+ ### Bug Fixes
13
+
14
+
15
+ * **card:** ensure the surface's height respects the component's set height ([73b7788](https://github.com/Lundalogik/lime-elements/commit/73b77882e7a32bef38b7da92e34f09fe2d03dc75))
16
+
1
17
  ## [37.79.7](https://github.com/Lundalogik/lime-elements/compare/v37.79.6...v37.79.7) (2025-01-22)
2
18
 
3
19
 
@@ -1 +1 @@
1
- {"file":"config-e7e1a299.js","mappings":";;AAsBA,MAAM,WAAW;EAAjB;IACW,aAAQ,GAAG,EAAE,CAAC;IACd,kBAAa,GAAG,SAAS,CAAC,QAAQ,CAAC;IACnC,oBAAe,GAAQ,kBAAkB,CAAC,YAAY,CAAC,CAAC;GAClE;CAAA;AAED,SAAS,kBAAkB,CAAC,OAAgB;EACxC,MAAM,QAAQ,GAAG,EAAE,CAAC;EACpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;IACrC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC3B,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAEnC,IAAI,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;MACpC,SAAS;KACZ;IAED,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,KAAK,MAAM,CAAC;GACpC;EAED,OAAO,QAAQ,CAAC;AACpB,CAAC;AAED,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;MACpB,YAAY,GAAG,CAAC;EACzB,OAAO,MAAM,CAAC;AAClB,CAAC;;;;","names":[],"sources":["./src/global/config.ts"],"sourcesContent":["/**\n * Configuration options for limel-config.\n *\n * @public\n */\nexport type Config = {\n /**\n * The path to where the icon library used by limel-icon is located.\n */\n iconPath?: string;\n\n /**\n * The default locale to use for components that support localization.\n */\n defaultLocale?: string;\n\n /**\n * @internal\n */\n featureSwitches?: Record<string, boolean>;\n};\n\nclass ConfigClass implements Config {\n public iconPath = '';\n public defaultLocale = navigator.language;\n public featureSwitches: any = getFeatureSwitches(localStorage);\n}\n\nfunction getFeatureSwitches(storage: Storage) {\n const features = {};\n for (let i = 0; i < storage.length; i++) {\n const key = storage.key(i);\n const value = storage.getItem(key);\n\n if (!['true', 'false'].includes(value)) {\n continue;\n }\n\n features[key] = value === 'true';\n }\n\n return features;\n}\n\nconst config = new ConfigClass();\nexport const globalConfig = (() => {\n return config;\n})();\n"],"version":3}
1
+ {"file":"config-e7e1a299.js","mappings":";;AAgCA,MAAM,WAAW;EAAjB;IACW,aAAQ,GAAG,EAAE,CAAC;IACd,kBAAa,GAAG,SAAS,CAAC,QAAQ,CAAC;IAEnC,oBAAe,GAAQ,kBAAkB,CAAC,YAAY,CAAC,CAAC;GAClE;CAAA;AAED,SAAS,kBAAkB,CAAC,OAAgB;EACxC,MAAM,QAAQ,GAAG,EAAE,CAAC;EACpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;IACrC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC3B,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAEnC,IAAI,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;MACpC,SAAS;KACZ;IAED,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,KAAK,MAAM,CAAC;GACpC;EAED,OAAO,QAAQ,CAAC;AACpB,CAAC;AAED,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;MACpB,YAAY,GAAG,CAAC;EACzB,OAAO,MAAM,CAAC;AAClB,CAAC;;;;","names":[],"sources":["./src/global/config.ts"],"sourcesContent":["import { CustomElementDefinition } from './shared-types/custom-element.types';\n\n/**\n * Configuration options for limel-config.\n *\n * @public\n */\nexport type Config = {\n /**\n * The path to where the icon library used by limel-icon is located.\n */\n iconPath?: string;\n\n /**\n * The default locale to use for components that support localization.\n */\n defaultLocale?: string;\n\n /**\n * Whitelisted html elements for `limel-markdown`.\n *\n * Any custom element added here will not be sanitized and thus rendered.\n * @alpha\n */\n markdownWhitelist?: CustomElementDefinition[];\n\n /**\n * @internal\n */\n featureSwitches?: Record<string, boolean>;\n};\n\nclass ConfigClass implements Config {\n public iconPath = '';\n public defaultLocale = navigator.language;\n public markdownWhitelist?: CustomElementDefinition[];\n public featureSwitches: any = getFeatureSwitches(localStorage);\n}\n\nfunction getFeatureSwitches(storage: Storage) {\n const features = {};\n for (let i = 0; i < storage.length; i++) {\n const key = storage.key(i);\n const value = storage.getItem(key);\n\n if (!['true', 'false'].includes(value)) {\n continue;\n }\n\n features[key] = value === 'true';\n }\n\n return features;\n}\n\nconst config = new ConfigClass();\nexport const globalConfig = (() => {\n return config;\n})();\n"],"version":3}
@@ -7,7 +7,7 @@ const isItem = require('./isItem-3f8ad629.js');
7
7
  const getIconProps = require('./get-icon-props-50be7440.js');
8
8
  const _3dTiltHoverEffect = require('./3d-tilt-hover-effect-ef81ae4c.js');
9
9
 
10
- const cardCss = "@charset \"UTF-8\";*{box-sizing:border-box;min-width:0;min-height:0}:host(limel-card){display:flex;border-radius:var(--card-border-radius, 0.95rem)}section{box-sizing:border-box;display:flex;gap:0.5rem;flex-direction:column;width:100%;height:100%;border-radius:var(--card-border-radius, 0.95rem);border:1px solid rgb(var(--contrast-500));padding:0.25rem;background-color:var(--card-background-color, rgb(var(--contrast-300)))}:host(limel-card[orientation=landscape]) section{flex-direction:row}section:hover{border-color:transparent;background-color:var(--card-background-color--hovered, var(--card-background-color, rgb(var(--contrast-200))))}.body{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem}img{transition:filter 0.6s ease;object-fit:cover;border-radius:calc(var(--card-border-radius, 0.95rem) / 1.4)}:host(limel-card[orientation=portrait]) img{width:100%}:host(limel-card[orientation=landscape]) img{flex-shrink:0;max-width:40%;height:100%}section:hover img,section:focus-visible img{transition-duration:0.2s;filter:saturate(1.3)}limel-markdown{overflow-y:auto;padding:0.5rem 0.75rem}header{flex-shrink:0;display:flex;justify-content:center;gap:0.5rem;padding:0.25rem 0.75rem}:host(limel-card[orientation=landscape]) header{padding-top:0.5rem}header:has(limel-icon){padding-left:0.25rem}header .headings{flex-grow:1;display:flex;flex-direction:column;gap:0.125rem}header limel-icon{flex-shrink:0;width:2rem}header h1{font-size:1.125rem;font-weight:500;color:var(--card-heading-color, rgb(var(--contrast-1100)));letter-spacing:-0.03125rem}header h2{font-size:0.875rem;font-weight:400;color:var(--card-subheading-color, rgb(var(--contrast-1000)))}header h1,header h2{word-break:break-word;hyphens:auto;-webkit-hyphens:auto;margin:0}limel-action-bar{flex-shrink:0;--action-bar-background-color:transparent;margin-left:auto}limel-3d-hover-effect-glow{border-radius:var(--card-border-radius, 0.95rem)}: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)}section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.5}@media (prefers-reduced-motion){section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.2}}: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)}";
10
+ const cardCss = "@charset \"UTF-8\";*{box-sizing:border-box;min-width:0;min-height:0}:host(limel-card){display:flex;border-radius:var(--card-border-radius, 0.95rem)}section{box-sizing:border-box;display:flex;gap:0.5rem;flex-direction:column;width:100%;border-radius:var(--card-border-radius, 0.95rem);border:1px solid rgb(var(--contrast-500));padding:0.25rem;background-color:var(--card-background-color, rgb(var(--contrast-300)))}:host(limel-card[orientation=landscape]) section{flex-direction:row}section:hover{border-color:transparent;background-color:var(--card-background-color--hovered, var(--card-background-color, rgb(var(--contrast-200))))}.body{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem}img{transition:filter 0.6s ease;object-fit:cover;border-radius:calc(var(--card-border-radius, 0.95rem) / 1.4)}:host(limel-card[orientation=portrait]) img{width:100%}:host(limel-card[orientation=landscape]) img{flex-shrink:0;max-width:40%;height:100%}section:hover img,section:focus-visible img{transition-duration:0.2s;filter:saturate(1.3)}limel-markdown{overflow-y:auto;padding:0.5rem 0.75rem}header{flex-shrink:0;display:flex;justify-content:center;gap:0.5rem;padding:0.25rem 0.75rem}:host(limel-card[orientation=landscape]) header{padding-top:0.5rem}header:has(limel-icon){padding-left:0.25rem}header .headings{flex-grow:1;display:flex;flex-direction:column;gap:0.125rem}header limel-icon{flex-shrink:0;width:2rem}header h1{font-size:1.125rem;font-weight:500;color:var(--card-heading-color, rgb(var(--contrast-1100)));letter-spacing:-0.03125rem}header h2{font-size:0.875rem;font-weight:400;color:var(--card-subheading-color, rgb(var(--contrast-1000)))}header h1,header h2{word-break:break-word;hyphens:auto;-webkit-hyphens:auto;margin:0}limel-action-bar{flex-shrink:0;--action-bar-background-color:transparent;margin-left:auto}limel-3d-hover-effect-glow{border-radius:var(--card-border-radius, 0.95rem)}: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)}section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.5}@media (prefers-reduced-motion){section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.2}}: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)}";
11
11
 
12
12
  const Card = class {
13
13
  constructor(hostRef) {
@@ -1 +1 @@
1
- {"file":"limel-card.entry.cjs.js","mappings":"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","names":["isItem","getMouseEventHandlers","h","Host","getIconName"],"sources":["./src/components/card/card.scss?tag=limel-card&encapsulation=shadow","./src/components/card/card.tsx"],"sourcesContent":["/**\n* @prop --card-heading-color: color of the heading. Defaults to `--contrast-1100`;\n* @prop --card-subheading-color: color of the sub heading. Defaults to `--contrast-1000`;\n* @prop --card-border-radius: border radius of the card. Defaults to `0.95rem`;\n* @prop --card-background-color: background color of the card.\n* @prop --card-background-color--hovered: background color of the card, when hovered.\n*/\n\n@use '../../style/mixins';\n\n$default-border-radius: 0.95rem;\n\n* {\n box-sizing: border-box;\n min-width: 0;\n min-height: 0;\n}\n\n:host(limel-card) {\n display: flex;\n border-radius: var(--card-border-radius, $default-border-radius);\n}\n\nsection {\n box-sizing: border-box;\n\n display: flex;\n gap: 0.5rem;\n\n flex-direction: column;\n :host(limel-card[orientation='landscape']) & {\n flex-direction: row;\n }\n\n width: 100%;\n height: 100%;\n border-radius: var(--card-border-radius, $default-border-radius);\n border: 1px solid rgb(var(--contrast-500));\n\n padding: 0.25rem;\n background-color: var(--card-background-color, rgb(var(--contrast-300)));\n\n &:hover {\n border-color: transparent;\n background-color: var(\n --card-background-color--hovered,\n var(--card-background-color, rgb(var(--contrast-200)))\n );\n }\n}\n\n.body {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\nimg {\n transition: filter 0.6s ease;\n object-fit: cover;\n border-radius: calc(\n var(--card-border-radius, $default-border-radius) / 1.4\n );\n :host(limel-card[orientation='portrait']) & {\n width: 100%;\n }\n\n :host(limel-card[orientation='landscape']) & {\n flex-shrink: 0;\n\n max-width: 40%;\n height: 100%;\n }\n\n section:hover &,\n section:focus-visible & {\n transition-duration: 0.2s;\n filter: saturate(1.3);\n }\n}\n\nlimel-markdown {\n overflow-y: auto;\n padding: 0.5rem 0.75rem;\n}\n\nheader {\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n\n gap: 0.5rem;\n\n padding: 0.25rem 0.75rem;\n :host(limel-card[orientation='landscape']) & {\n padding-top: 0.5rem;\n }\n\n &:has(limel-icon) {\n padding-left: 0.25rem;\n }\n\n .headings {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n }\n\n limel-icon {\n flex-shrink: 0;\n width: 2rem;\n }\n\n h1 {\n font-size: 1.125rem;\n font-weight: 500;\n color: var(--card-heading-color, rgb(var(--contrast-1100)));\n letter-spacing: -0.03125rem; // 0.5px\n }\n\n h2 {\n font-size: 0.875rem;\n font-weight: 400;\n color: var(--card-subheading-color, rgb(var(--contrast-1000)));\n }\n\n h1,\n h2 {\n word-break: break-word;\n hyphens: auto;\n -webkit-hyphens: auto;\n margin: 0;\n }\n}\n\nlimel-action-bar {\n flex-shrink: 0;\n --action-bar-background-color: transparent;\n margin-left: auto;\n}\n\n// The 3D effect\nlimel-3d-hover-effect-glow {\n border-radius: var(--card-border-radius, $default-border-radius);\n}\n\n:host(limel-card) {\n @include mixins.parent-of-the-3d-element;\n}\n\nsection {\n @include mixins.the-3d-element;\n\n :host(limel-card[clickable]) & {\n @include mixins.the-3d-element--clickable;\n }\n}\n","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 <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"],"version":3}
1
+ {"file":"limel-card.entry.cjs.js","mappings":"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","names":["isItem","getMouseEventHandlers","h","Host","getIconName"],"sources":["./src/components/card/card.scss?tag=limel-card&encapsulation=shadow","./src/components/card/card.tsx"],"sourcesContent":["/**\n* @prop --card-heading-color: color of the heading. Defaults to `--contrast-1100`;\n* @prop --card-subheading-color: color of the sub heading. Defaults to `--contrast-1000`;\n* @prop --card-border-radius: border radius of the card. Defaults to `0.95rem`;\n* @prop --card-background-color: background color of the card.\n* @prop --card-background-color--hovered: background color of the card, when hovered.\n*/\n\n@use '../../style/mixins';\n\n$default-border-radius: 0.95rem;\n\n* {\n box-sizing: border-box;\n min-width: 0;\n min-height: 0;\n}\n\n:host(limel-card) {\n display: flex;\n border-radius: var(--card-border-radius, $default-border-radius);\n}\n\nsection {\n box-sizing: border-box;\n\n display: flex;\n gap: 0.5rem;\n\n flex-direction: column;\n :host(limel-card[orientation='landscape']) & {\n flex-direction: row;\n }\n\n width: 100%;\n border-radius: var(--card-border-radius, $default-border-radius);\n border: 1px solid rgb(var(--contrast-500));\n\n padding: 0.25rem;\n background-color: var(--card-background-color, rgb(var(--contrast-300)));\n\n &:hover {\n border-color: transparent;\n background-color: var(\n --card-background-color--hovered,\n var(--card-background-color, rgb(var(--contrast-200)))\n );\n }\n}\n\n.body {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\nimg {\n transition: filter 0.6s ease;\n object-fit: cover;\n border-radius: calc(\n var(--card-border-radius, $default-border-radius) / 1.4\n );\n :host(limel-card[orientation='portrait']) & {\n width: 100%;\n }\n\n :host(limel-card[orientation='landscape']) & {\n flex-shrink: 0;\n\n max-width: 40%;\n height: 100%;\n }\n\n section:hover &,\n section:focus-visible & {\n transition-duration: 0.2s;\n filter: saturate(1.3);\n }\n}\n\nlimel-markdown {\n overflow-y: auto;\n padding: 0.5rem 0.75rem;\n}\n\nheader {\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n\n gap: 0.5rem;\n\n padding: 0.25rem 0.75rem;\n :host(limel-card[orientation='landscape']) & {\n padding-top: 0.5rem;\n }\n\n &:has(limel-icon) {\n padding-left: 0.25rem;\n }\n\n .headings {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n }\n\n limel-icon {\n flex-shrink: 0;\n width: 2rem;\n }\n\n h1 {\n font-size: 1.125rem;\n font-weight: 500;\n color: var(--card-heading-color, rgb(var(--contrast-1100)));\n letter-spacing: -0.03125rem; // 0.5px\n }\n\n h2 {\n font-size: 0.875rem;\n font-weight: 400;\n color: var(--card-subheading-color, rgb(var(--contrast-1000)));\n }\n\n h1,\n h2 {\n word-break: break-word;\n hyphens: auto;\n -webkit-hyphens: auto;\n margin: 0;\n }\n}\n\nlimel-action-bar {\n flex-shrink: 0;\n --action-bar-background-color: transparent;\n margin-left: auto;\n}\n\n// The 3D effect\nlimel-3d-hover-effect-glow {\n border-radius: var(--card-border-radius, $default-border-radius);\n}\n\n:host(limel-card) {\n @include mixins.parent-of-the-3d-element;\n}\n\nsection {\n @include mixins.the-3d-element;\n\n :host(limel-card[clickable]) & {\n @include mixins.the-3d-element--clickable;\n }\n}\n","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 <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"],"version":3}
@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-d1052409.js');
6
6
  const markdownParser = require('./markdown-parser-d1887ec8.js');
7
+ const config = require('./config-e7e1a299.js');
7
8
  require('./_commonjsHelpers-0c557e26.js');
8
9
 
9
10
  const markdownCss = "@charset \"UTF-8\";code{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-size:0.8125rem;letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:0.875rem}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:0.875rem;word-break:break-word;hyphens:auto;-webkit-hyphens:auto}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:\"\";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0;border:1px solid rgb(var(--contrast-400))}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:\"“\";left:0;top:-0.75rem}blockquote:after{content:\"”\";right:0;bottom:-2rem}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}img{max-width:100%;border-radius:0.25rem}:host(limel-markdown.adjust-for-table-cell) img{max-height:1.25rem;vertical-align:middle}:host(limel-markdown.adjust-for-table-cell) p{display:inline}:host(limel-markdown.adjust-for-table-cell) h1,:host(limel-markdown.adjust-for-table-cell) h2,:host(limel-markdown.adjust-for-table-cell) h3,:host(limel-markdown.adjust-for-table-cell) h4,:host(limel-markdown.adjust-for-table-cell) h5,:host(limel-markdown.adjust-for-table-cell) h6{display:inline-block;vertical-align:bottom;font-size:0.875rem;margin:0 0.25rem 0 0;letter-spacing:normal;font-weight:500}:host(limel-markdown.adjust-for-table-cell) h1:before,:host(limel-markdown.adjust-for-table-cell) h2:before,:host(limel-markdown.adjust-for-table-cell) h3:before,:host(limel-markdown.adjust-for-table-cell) h4:before,:host(limel-markdown.adjust-for-table-cell) h5:before,:host(limel-markdown.adjust-for-table-cell) h6:before{opacity:0.6;vertical-align:middle;font-size:0.5rem;border-radius:0.25rem 0 0 0.25rem;padding:0.25rem;padding-right:2rem;margin-right:-1.75rem;background:linear-gradient(to right, rgb(var(--contrast-800), 0.6), rgb(var(--contrast-800), 0))}:host(limel-markdown.adjust-for-table-cell) h1:before{content:\"H1\"}:host(limel-markdown.adjust-for-table-cell) h2:before{content:\"H2\"}:host(limel-markdown.adjust-for-table-cell) h3:before{content:\"H3\"}:host(limel-markdown.adjust-for-table-cell) h4:before{content:\"H4\"}:host(limel-markdown.adjust-for-table-cell) h5:before{content:\"H5\"}:host(limel-markdown.adjust-for-table-cell) h6:before{content:\"H6\"}:host(limel-markdown.adjust-for-table-cell) pre{margin:0}:host(limel-markdown.adjust-for-table-cell) pre>code{padding:0.125rem;margin:0}:host(limel-markdown.adjust-for-table-cell) dl{margin:0}:host(limel-markdown.adjust-for-table-cell) dl dt,:host(limel-markdown.adjust-for-table-cell) dl dd{padding:0.00625rem 0.125rem}hr{border-top:1px solid rgb(var(--contrast-700))}.MsoNormal{margin:0}";
@@ -12,7 +13,7 @@ const Markdown = class {
12
13
  constructor(hostRef) {
13
14
  index.registerInstance(this, hostRef);
14
15
  this.value = undefined;
15
- this.whitelist = undefined;
16
+ this.whitelist = config.globalConfig.markdownWhitelist;
16
17
  }
17
18
  async textChanged() {
18
19
  var _a;
@@ -1 +1 @@
1
- {"file":"limel-markdown.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,WAAW,GAAG,o8LAAo8L;;MC2B38L,QAAQ;;;;;;EAmBV,MAAM,WAAW;;IACpB,IAAI;MACA,MAAM,IAAI,GAAG,MAAMA,6BAAc,CAAC,IAAI,CAAC,KAAK,EAAE;QAC1C,mBAAmB,EAAE,IAAI;QACzB,SAAS,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,EAAE;OAClC,CAAC,CAAC;MACH,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;KACrC;IAAC,OAAO,KAAK,EAAE;;MAEZ,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;GACJ;EAEM,MAAM,gBAAgB;IACzB,IAAI,CAAC,WAAW,EAAE,CAAC;GACtB;EAIM,MAAM;IACT,OAAO;MACHC,iBACI,EAAE,EAAC,UAAU,EACb,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,GACxD;KACL,CAAC;GACL;;;;;;;;;","names":["markdownToHTML","h"],"sources":["./src/components/markdown/markdown.scss?tag=limel-markdown&encapsulation=shadow","./src/components/markdown/markdown.tsx"],"sourcesContent":["/**\n* @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;\n* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;\n*/\n\n@import './partial-styles/pre-code';\n@import './partial-styles/headings';\n@import './partial-styles/body-text';\n@import './partial-styles/lists';\n@import './partial-styles/tables';\n@import './partial-styles/blockquotes';\n@import './partial-styles/definition-lists';\n@import './partial-styles/img';\n@import './partial-styles/_adjust-for-table-cell';\n\n// body-text\nhr {\n border-top: 1px solid rgb(var(--contrast-700));\n}\n\n.MsoNormal {\n margin: 0;\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-composite\n * @exampleComponent limel-example-markdown-custom-component\n */\n@Component({\n tag: 'limel-markdown',\n styleUrl: 'markdown.scss',\n shadow: true,\n})\nexport class Markdown {\n /**\n * The input text. Treated as GitHub Flavored Markdown, with the addition\n * that any included HTML will be parsed and rendered as HTML, rather than\n * as text.\n */\n @Prop()\n public value: string;\n\n /**\n * Whitelisted html elements.\n *\n * Any custom element added here will not be sanitized and thus rendered.\n * @alpha\n */\n @Prop()\n public whitelist?: CustomElementDefinition[];\n\n @Watch('value')\n public async textChanged() {\n try {\n const html = await markdownToHTML(this.value, {\n forceHardLineBreaks: true,\n whitelist: this.whitelist ?? [],\n });\n this.rootElement.innerHTML = html;\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error(error);\n }\n }\n\n public async componentDidLoad() {\n this.textChanged();\n }\n\n private rootElement: HTMLDivElement;\n\n public render() {\n return [\n <div\n id=\"markdown\"\n ref={(el) => (this.rootElement = el as HTMLDivElement)}\n />,\n ];\n }\n}\n"],"version":3}
1
+ {"file":"limel-markdown.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,WAAW,GAAG,o8LAAo8L;;MC4B38L,QAAQ;;;;qBAmBbA,mBAAY,CAAC,iBAAiB;;EAG3B,MAAM,WAAW;;IACpB,IAAI;MACA,MAAM,IAAI,GAAG,MAAMC,6BAAc,CAAC,IAAI,CAAC,KAAK,EAAE;QAC1C,mBAAmB,EAAE,IAAI;QACzB,SAAS,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,EAAE;OAClC,CAAC,CAAC;MACH,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;KACrC;IAAC,OAAO,KAAK,EAAE;;MAEZ,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;GACJ;EAEM,MAAM,gBAAgB;IACzB,IAAI,CAAC,WAAW,EAAE,CAAC;GACtB;EAIM,MAAM;IACT,OAAO;MACHC,iBACI,EAAE,EAAC,UAAU,EACb,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,GACxD;KACL,CAAC;GACL;;;;;;;;;","names":["globalConfig","markdownToHTML","h"],"sources":["./src/components/markdown/markdown.scss?tag=limel-markdown&encapsulation=shadow","./src/components/markdown/markdown.tsx"],"sourcesContent":["/**\n* @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;\n* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;\n*/\n\n@import './partial-styles/pre-code';\n@import './partial-styles/headings';\n@import './partial-styles/body-text';\n@import './partial-styles/lists';\n@import './partial-styles/tables';\n@import './partial-styles/blockquotes';\n@import './partial-styles/definition-lists';\n@import './partial-styles/img';\n@import './partial-styles/_adjust-for-table-cell';\n\n// body-text\nhr {\n border-top: 1px solid rgb(var(--contrast-700));\n}\n\n.MsoNormal {\n margin: 0;\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { globalConfig } from '../../global/config';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-composite\n * @exampleComponent limel-example-markdown-custom-component\n */\n@Component({\n tag: 'limel-markdown',\n styleUrl: 'markdown.scss',\n shadow: true,\n})\nexport class Markdown {\n /**\n * The input text. Treated as GitHub Flavored Markdown, with the addition\n * that any included HTML will be parsed and rendered as HTML, rather than\n * as text.\n */\n @Prop()\n public value: string;\n\n /**\n * Whitelisted html elements.\n *\n * Any custom element added here will not be sanitized and thus rendered.\n * Can also be set via `limel-config`. Setting this property will override\n * the global config.\n * @alpha\n */\n @Prop()\n public whitelist?: CustomElementDefinition[] =\n globalConfig.markdownWhitelist;\n\n @Watch('value')\n public async textChanged() {\n try {\n const html = await markdownToHTML(this.value, {\n forceHardLineBreaks: true,\n whitelist: this.whitelist ?? [],\n });\n this.rootElement.innerHTML = html;\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error(error);\n }\n }\n\n public async componentDidLoad() {\n this.textChanged();\n }\n\n private rootElement: HTMLDivElement;\n\n public render() {\n return [\n <div\n id=\"markdown\"\n ref={(el) => (this.rootElement = el as HTMLDivElement)}\n />,\n ];\n }\n}\n"],"version":3}
@@ -81,7 +81,6 @@ section {
81
81
  gap: 0.5rem;
82
82
  flex-direction: column;
83
83
  width: 100%;
84
- height: 100%;
85
84
  border-radius: var(--card-border-radius, 0.95rem);
86
85
  border: 1px solid rgb(var(--contrast-500));
87
86
  padding: 0.25rem;
@@ -47,7 +47,7 @@ export class ConfigComponent {
47
47
  "mutable": false,
48
48
  "complexType": {
49
49
  "original": "Config",
50
- "resolved": "{ iconPath?: string; defaultLocale?: string; featureSwitches?: Record<string, boolean>; }",
50
+ "resolved": "{ iconPath?: string; defaultLocale?: string; markdownWhitelist?: CustomElementDefinition[]; featureSwitches?: Record<string, boolean>; }",
51
51
  "references": {
52
52
  "Config": {
53
53
  "location": "import",
@@ -1,5 +1,6 @@
1
1
  import { h } from '@stencil/core';
2
2
  import { markdownToHTML } from './markdown-parser';
3
+ import { globalConfig } from '../../global/config';
3
4
  /**
4
5
  * The Markdown component receives markdown syntax
5
6
  * and renders it as HTML.
@@ -21,7 +22,7 @@ import { markdownToHTML } from './markdown-parser';
21
22
  export class Markdown {
22
23
  constructor() {
23
24
  this.value = undefined;
24
- this.whitelist = undefined;
25
+ this.whitelist = globalConfig.markdownWhitelist;
25
26
  }
26
27
  async textChanged() {
27
28
  var _a;
@@ -96,8 +97,9 @@ export class Markdown {
96
97
  "name": "alpha",
97
98
  "text": undefined
98
99
  }],
99
- "text": "Whitelisted html elements.\n\nAny custom element added here will not be sanitized and thus rendered."
100
- }
100
+ "text": "Whitelisted html elements.\n\nAny custom element added here will not be sanitized and thus rendered.\nCan also be set via `limel-config`. Setting this property will override\nthe global config."
101
+ },
102
+ "defaultValue": "globalConfig.markdownWhitelist"
101
103
  }
102
104
  };
103
105
  }
@@ -1 +1 @@
1
- {"version":3,"file":"markdown.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGnD;;;;;;;;;;;;;;;;;GAiBG;AAMH,MAAM,OAAO,QAAQ;;;;;EAmBV,KAAK,CAAC,WAAW;;IACpB,IAAI;MACA,MAAM,IAAI,GAAG,MAAM,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE;QAC1C,mBAAmB,EAAE,IAAI;QACzB,SAAS,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,EAAE;OAClC,CAAC,CAAC;MACH,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;KACrC;IAAC,OAAO,KAAK,EAAE;MACZ,sCAAsC;MACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;EACL,CAAC;EAEM,KAAK,CAAC,gBAAgB;IACzB,IAAI,CAAC,WAAW,EAAE,CAAC;EACvB,CAAC;EAIM,MAAM;IACT,OAAO;MACH,WACI,EAAE,EAAC,UAAU,EACb,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,GACxD;KACL,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-composite\n * @exampleComponent limel-example-markdown-custom-component\n */\n@Component({\n tag: 'limel-markdown',\n styleUrl: 'markdown.scss',\n shadow: true,\n})\nexport class Markdown {\n /**\n * The input text. Treated as GitHub Flavored Markdown, with the addition\n * that any included HTML will be parsed and rendered as HTML, rather than\n * as text.\n */\n @Prop()\n public value: string;\n\n /**\n * Whitelisted html elements.\n *\n * Any custom element added here will not be sanitized and thus rendered.\n * @alpha\n */\n @Prop()\n public whitelist?: CustomElementDefinition[];\n\n @Watch('value')\n public async textChanged() {\n try {\n const html = await markdownToHTML(this.value, {\n forceHardLineBreaks: true,\n whitelist: this.whitelist ?? [],\n });\n this.rootElement.innerHTML = html;\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error(error);\n }\n }\n\n public async componentDidLoad() {\n this.textChanged();\n }\n\n private rootElement: HTMLDivElement;\n\n public render() {\n return [\n <div\n id=\"markdown\"\n ref={(el) => (this.rootElement = el as HTMLDivElement)}\n />,\n ];\n }\n}\n"]}
1
+ {"version":3,"file":"markdown.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;;;;;;;GAiBG;AAMH,MAAM,OAAO,QAAQ;;;qBAmBb,YAAY,CAAC,iBAAiB;;EAG3B,KAAK,CAAC,WAAW;;IACpB,IAAI;MACA,MAAM,IAAI,GAAG,MAAM,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE;QAC1C,mBAAmB,EAAE,IAAI;QACzB,SAAS,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,EAAE;OAClC,CAAC,CAAC;MACH,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;KACrC;IAAC,OAAO,KAAK,EAAE;MACZ,sCAAsC;MACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;EACL,CAAC;EAEM,KAAK,CAAC,gBAAgB;IACzB,IAAI,CAAC,WAAW,EAAE,CAAC;EACvB,CAAC;EAIM,MAAM;IACT,OAAO;MACH,WACI,EAAE,EAAC,UAAU,EACb,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,GACxD;KACL,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { globalConfig } from '../../global/config';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-composite\n * @exampleComponent limel-example-markdown-custom-component\n */\n@Component({\n tag: 'limel-markdown',\n styleUrl: 'markdown.scss',\n shadow: true,\n})\nexport class Markdown {\n /**\n * The input text. Treated as GitHub Flavored Markdown, with the addition\n * that any included HTML will be parsed and rendered as HTML, rather than\n * as text.\n */\n @Prop()\n public value: string;\n\n /**\n * Whitelisted html elements.\n *\n * Any custom element added here will not be sanitized and thus rendered.\n * Can also be set via `limel-config`. Setting this property will override\n * the global config.\n * @alpha\n */\n @Prop()\n public whitelist?: CustomElementDefinition[] =\n globalConfig.markdownWhitelist;\n\n @Watch('value')\n public async textChanged() {\n try {\n const html = await markdownToHTML(this.value, {\n forceHardLineBreaks: true,\n whitelist: this.whitelist ?? [],\n });\n this.rootElement.innerHTML = html;\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error(error);\n }\n }\n\n public async componentDidLoad() {\n this.textChanged();\n }\n\n private rootElement: HTMLDivElement;\n\n public render() {\n return [\n <div\n id=\"markdown\"\n ref={(el) => (this.rootElement = el as HTMLDivElement)}\n />,\n ];\n }\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/global/config.ts"],"names":[],"mappings":"AAsBA,MAAM,WAAW;EAAjB;IACW,aAAQ,GAAG,EAAE,CAAC;IACd,kBAAa,GAAG,SAAS,CAAC,QAAQ,CAAC;IACnC,oBAAe,GAAQ,kBAAkB,CAAC,YAAY,CAAC,CAAC;EACnE,CAAC;CAAA;AAED,SAAS,kBAAkB,CAAC,OAAgB;EACxC,MAAM,QAAQ,GAAG,EAAE,CAAC;EACpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;IACrC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC3B,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAEnC,IAAI,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;MACpC,SAAS;KACZ;IAED,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,KAAK,MAAM,CAAC;GACpC;EAED,OAAO,QAAQ,CAAC;AACpB,CAAC;AAED,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;AACjC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE;EAC9B,OAAO,MAAM,CAAC;AAClB,CAAC,CAAC,EAAE,CAAC","sourcesContent":["/**\n * Configuration options for limel-config.\n *\n * @public\n */\nexport type Config = {\n /**\n * The path to where the icon library used by limel-icon is located.\n */\n iconPath?: string;\n\n /**\n * The default locale to use for components that support localization.\n */\n defaultLocale?: string;\n\n /**\n * @internal\n */\n featureSwitches?: Record<string, boolean>;\n};\n\nclass ConfigClass implements Config {\n public iconPath = '';\n public defaultLocale = navigator.language;\n public featureSwitches: any = getFeatureSwitches(localStorage);\n}\n\nfunction getFeatureSwitches(storage: Storage) {\n const features = {};\n for (let i = 0; i < storage.length; i++) {\n const key = storage.key(i);\n const value = storage.getItem(key);\n\n if (!['true', 'false'].includes(value)) {\n continue;\n }\n\n features[key] = value === 'true';\n }\n\n return features;\n}\n\nconst config = new ConfigClass();\nexport const globalConfig = (() => {\n return config;\n})();\n"]}
1
+ {"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/global/config.ts"],"names":[],"mappings":"AAgCA,MAAM,WAAW;EAAjB;IACW,aAAQ,GAAG,EAAE,CAAC;IACd,kBAAa,GAAG,SAAS,CAAC,QAAQ,CAAC;IAEnC,oBAAe,GAAQ,kBAAkB,CAAC,YAAY,CAAC,CAAC;EACnE,CAAC;CAAA;AAED,SAAS,kBAAkB,CAAC,OAAgB;EACxC,MAAM,QAAQ,GAAG,EAAE,CAAC;EACpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;IACrC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC3B,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAEnC,IAAI,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;MACpC,SAAS;KACZ;IAED,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,KAAK,MAAM,CAAC;GACpC;EAED,OAAO,QAAQ,CAAC;AACpB,CAAC;AAED,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;AACjC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE;EAC9B,OAAO,MAAM,CAAC;AAClB,CAAC,CAAC,EAAE,CAAC","sourcesContent":["import { CustomElementDefinition } from './shared-types/custom-element.types';\n\n/**\n * Configuration options for limel-config.\n *\n * @public\n */\nexport type Config = {\n /**\n * The path to where the icon library used by limel-icon is located.\n */\n iconPath?: string;\n\n /**\n * The default locale to use for components that support localization.\n */\n defaultLocale?: string;\n\n /**\n * Whitelisted html elements for `limel-markdown`.\n *\n * Any custom element added here will not be sanitized and thus rendered.\n * @alpha\n */\n markdownWhitelist?: CustomElementDefinition[];\n\n /**\n * @internal\n */\n featureSwitches?: Record<string, boolean>;\n};\n\nclass ConfigClass implements Config {\n public iconPath = '';\n public defaultLocale = navigator.language;\n public markdownWhitelist?: CustomElementDefinition[];\n public featureSwitches: any = getFeatureSwitches(localStorage);\n}\n\nfunction getFeatureSwitches(storage: Storage) {\n const features = {};\n for (let i = 0; i < storage.length; i++) {\n const key = storage.key(i);\n const value = storage.getItem(key);\n\n if (!['true', 'false'].includes(value)) {\n continue;\n }\n\n features[key] = value === 'true';\n }\n\n return features;\n}\n\nconst config = new ConfigClass();\nexport const globalConfig = (() => {\n return config;\n})();\n"]}
@@ -1 +1 @@
1
- {"file":"config-656a588f.js","mappings":"AAsBA,MAAM,WAAW;EAAjB;IACW,aAAQ,GAAG,EAAE,CAAC;IACd,kBAAa,GAAG,SAAS,CAAC,QAAQ,CAAC;IACnC,oBAAe,GAAQ,kBAAkB,CAAC,YAAY,CAAC,CAAC;GAClE;CAAA;AAED,SAAS,kBAAkB,CAAC,OAAgB;EACxC,MAAM,QAAQ,GAAG,EAAE,CAAC;EACpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;IACrC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC3B,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAEnC,IAAI,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;MACpC,SAAS;KACZ;IAED,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,KAAK,MAAM,CAAC;GACpC;EAED,OAAO,QAAQ,CAAC;AACpB,CAAC;AAED,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;MACpB,YAAY,GAAG,CAAC;EACzB,OAAO,MAAM,CAAC;AAClB,CAAC;;;;","names":[],"sources":["./src/global/config.ts"],"sourcesContent":["/**\n * Configuration options for limel-config.\n *\n * @public\n */\nexport type Config = {\n /**\n * The path to where the icon library used by limel-icon is located.\n */\n iconPath?: string;\n\n /**\n * The default locale to use for components that support localization.\n */\n defaultLocale?: string;\n\n /**\n * @internal\n */\n featureSwitches?: Record<string, boolean>;\n};\n\nclass ConfigClass implements Config {\n public iconPath = '';\n public defaultLocale = navigator.language;\n public featureSwitches: any = getFeatureSwitches(localStorage);\n}\n\nfunction getFeatureSwitches(storage: Storage) {\n const features = {};\n for (let i = 0; i < storage.length; i++) {\n const key = storage.key(i);\n const value = storage.getItem(key);\n\n if (!['true', 'false'].includes(value)) {\n continue;\n }\n\n features[key] = value === 'true';\n }\n\n return features;\n}\n\nconst config = new ConfigClass();\nexport const globalConfig = (() => {\n return config;\n})();\n"],"version":3}
1
+ {"file":"config-656a588f.js","mappings":"AAgCA,MAAM,WAAW;EAAjB;IACW,aAAQ,GAAG,EAAE,CAAC;IACd,kBAAa,GAAG,SAAS,CAAC,QAAQ,CAAC;IAEnC,oBAAe,GAAQ,kBAAkB,CAAC,YAAY,CAAC,CAAC;GAClE;CAAA;AAED,SAAS,kBAAkB,CAAC,OAAgB;EACxC,MAAM,QAAQ,GAAG,EAAE,CAAC;EACpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;IACrC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC3B,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAEnC,IAAI,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;MACpC,SAAS;KACZ;IAED,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,KAAK,MAAM,CAAC;GACpC;EAED,OAAO,QAAQ,CAAC;AACpB,CAAC;AAED,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;MACpB,YAAY,GAAG,CAAC;EACzB,OAAO,MAAM,CAAC;AAClB,CAAC;;;;","names":[],"sources":["./src/global/config.ts"],"sourcesContent":["import { CustomElementDefinition } from './shared-types/custom-element.types';\n\n/**\n * Configuration options for limel-config.\n *\n * @public\n */\nexport type Config = {\n /**\n * The path to where the icon library used by limel-icon is located.\n */\n iconPath?: string;\n\n /**\n * The default locale to use for components that support localization.\n */\n defaultLocale?: string;\n\n /**\n * Whitelisted html elements for `limel-markdown`.\n *\n * Any custom element added here will not be sanitized and thus rendered.\n * @alpha\n */\n markdownWhitelist?: CustomElementDefinition[];\n\n /**\n * @internal\n */\n featureSwitches?: Record<string, boolean>;\n};\n\nclass ConfigClass implements Config {\n public iconPath = '';\n public defaultLocale = navigator.language;\n public markdownWhitelist?: CustomElementDefinition[];\n public featureSwitches: any = getFeatureSwitches(localStorage);\n}\n\nfunction getFeatureSwitches(storage: Storage) {\n const features = {};\n for (let i = 0; i < storage.length; i++) {\n const key = storage.key(i);\n const value = storage.getItem(key);\n\n if (!['true', 'false'].includes(value)) {\n continue;\n }\n\n features[key] = value === 'true';\n }\n\n return features;\n}\n\nconst config = new ConfigClass();\nexport const globalConfig = (() => {\n return config;\n})();\n"],"version":3}
@@ -3,7 +3,7 @@ import { i as isItem } from './isItem-b0459122.js';
3
3
  import { g as getIconName } from './get-icon-props-0b65f85e.js';
4
4
  import { g as getMouseEventHandlers } from './3d-tilt-hover-effect-05648b3c.js';
5
5
 
6
- const cardCss = "@charset \"UTF-8\";*{box-sizing:border-box;min-width:0;min-height:0}:host(limel-card){display:flex;border-radius:var(--card-border-radius, 0.95rem)}section{box-sizing:border-box;display:flex;gap:0.5rem;flex-direction:column;width:100%;height:100%;border-radius:var(--card-border-radius, 0.95rem);border:1px solid rgb(var(--contrast-500));padding:0.25rem;background-color:var(--card-background-color, rgb(var(--contrast-300)))}:host(limel-card[orientation=landscape]) section{flex-direction:row}section:hover{border-color:transparent;background-color:var(--card-background-color--hovered, var(--card-background-color, rgb(var(--contrast-200))))}.body{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem}img{transition:filter 0.6s ease;object-fit:cover;border-radius:calc(var(--card-border-radius, 0.95rem) / 1.4)}:host(limel-card[orientation=portrait]) img{width:100%}:host(limel-card[orientation=landscape]) img{flex-shrink:0;max-width:40%;height:100%}section:hover img,section:focus-visible img{transition-duration:0.2s;filter:saturate(1.3)}limel-markdown{overflow-y:auto;padding:0.5rem 0.75rem}header{flex-shrink:0;display:flex;justify-content:center;gap:0.5rem;padding:0.25rem 0.75rem}:host(limel-card[orientation=landscape]) header{padding-top:0.5rem}header:has(limel-icon){padding-left:0.25rem}header .headings{flex-grow:1;display:flex;flex-direction:column;gap:0.125rem}header limel-icon{flex-shrink:0;width:2rem}header h1{font-size:1.125rem;font-weight:500;color:var(--card-heading-color, rgb(var(--contrast-1100)));letter-spacing:-0.03125rem}header h2{font-size:0.875rem;font-weight:400;color:var(--card-subheading-color, rgb(var(--contrast-1000)))}header h1,header h2{word-break:break-word;hyphens:auto;-webkit-hyphens:auto;margin:0}limel-action-bar{flex-shrink:0;--action-bar-background-color:transparent;margin-left:auto}limel-3d-hover-effect-glow{border-radius:var(--card-border-radius, 0.95rem)}: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)}section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.5}@media (prefers-reduced-motion){section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.2}}: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)}";
6
+ const cardCss = "@charset \"UTF-8\";*{box-sizing:border-box;min-width:0;min-height:0}:host(limel-card){display:flex;border-radius:var(--card-border-radius, 0.95rem)}section{box-sizing:border-box;display:flex;gap:0.5rem;flex-direction:column;width:100%;border-radius:var(--card-border-radius, 0.95rem);border:1px solid rgb(var(--contrast-500));padding:0.25rem;background-color:var(--card-background-color, rgb(var(--contrast-300)))}:host(limel-card[orientation=landscape]) section{flex-direction:row}section:hover{border-color:transparent;background-color:var(--card-background-color--hovered, var(--card-background-color, rgb(var(--contrast-200))))}.body{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem}img{transition:filter 0.6s ease;object-fit:cover;border-radius:calc(var(--card-border-radius, 0.95rem) / 1.4)}:host(limel-card[orientation=portrait]) img{width:100%}:host(limel-card[orientation=landscape]) img{flex-shrink:0;max-width:40%;height:100%}section:hover img,section:focus-visible img{transition-duration:0.2s;filter:saturate(1.3)}limel-markdown{overflow-y:auto;padding:0.5rem 0.75rem}header{flex-shrink:0;display:flex;justify-content:center;gap:0.5rem;padding:0.25rem 0.75rem}:host(limel-card[orientation=landscape]) header{padding-top:0.5rem}header:has(limel-icon){padding-left:0.25rem}header .headings{flex-grow:1;display:flex;flex-direction:column;gap:0.125rem}header limel-icon{flex-shrink:0;width:2rem}header h1{font-size:1.125rem;font-weight:500;color:var(--card-heading-color, rgb(var(--contrast-1100)));letter-spacing:-0.03125rem}header h2{font-size:0.875rem;font-weight:400;color:var(--card-subheading-color, rgb(var(--contrast-1000)))}header h1,header h2{word-break:break-word;hyphens:auto;-webkit-hyphens:auto;margin:0}limel-action-bar{flex-shrink:0;--action-bar-background-color:transparent;margin-left:auto}limel-3d-hover-effect-glow{border-radius:var(--card-border-radius, 0.95rem)}: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)}section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.5}@media (prefers-reduced-motion){section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.2}}: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)}";
7
7
 
8
8
  const Card = class {
9
9
  constructor(hostRef) {
@@ -1 +1 @@
1
- {"file":"limel-card.entry.js","mappings":"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","names":[],"sources":["./src/components/card/card.scss?tag=limel-card&encapsulation=shadow","./src/components/card/card.tsx"],"sourcesContent":["/**\n* @prop --card-heading-color: color of the heading. Defaults to `--contrast-1100`;\n* @prop --card-subheading-color: color of the sub heading. Defaults to `--contrast-1000`;\n* @prop --card-border-radius: border radius of the card. Defaults to `0.95rem`;\n* @prop --card-background-color: background color of the card.\n* @prop --card-background-color--hovered: background color of the card, when hovered.\n*/\n\n@use '../../style/mixins';\n\n$default-border-radius: 0.95rem;\n\n* {\n box-sizing: border-box;\n min-width: 0;\n min-height: 0;\n}\n\n:host(limel-card) {\n display: flex;\n border-radius: var(--card-border-radius, $default-border-radius);\n}\n\nsection {\n box-sizing: border-box;\n\n display: flex;\n gap: 0.5rem;\n\n flex-direction: column;\n :host(limel-card[orientation='landscape']) & {\n flex-direction: row;\n }\n\n width: 100%;\n height: 100%;\n border-radius: var(--card-border-radius, $default-border-radius);\n border: 1px solid rgb(var(--contrast-500));\n\n padding: 0.25rem;\n background-color: var(--card-background-color, rgb(var(--contrast-300)));\n\n &:hover {\n border-color: transparent;\n background-color: var(\n --card-background-color--hovered,\n var(--card-background-color, rgb(var(--contrast-200)))\n );\n }\n}\n\n.body {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\nimg {\n transition: filter 0.6s ease;\n object-fit: cover;\n border-radius: calc(\n var(--card-border-radius, $default-border-radius) / 1.4\n );\n :host(limel-card[orientation='portrait']) & {\n width: 100%;\n }\n\n :host(limel-card[orientation='landscape']) & {\n flex-shrink: 0;\n\n max-width: 40%;\n height: 100%;\n }\n\n section:hover &,\n section:focus-visible & {\n transition-duration: 0.2s;\n filter: saturate(1.3);\n }\n}\n\nlimel-markdown {\n overflow-y: auto;\n padding: 0.5rem 0.75rem;\n}\n\nheader {\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n\n gap: 0.5rem;\n\n padding: 0.25rem 0.75rem;\n :host(limel-card[orientation='landscape']) & {\n padding-top: 0.5rem;\n }\n\n &:has(limel-icon) {\n padding-left: 0.25rem;\n }\n\n .headings {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n }\n\n limel-icon {\n flex-shrink: 0;\n width: 2rem;\n }\n\n h1 {\n font-size: 1.125rem;\n font-weight: 500;\n color: var(--card-heading-color, rgb(var(--contrast-1100)));\n letter-spacing: -0.03125rem; // 0.5px\n }\n\n h2 {\n font-size: 0.875rem;\n font-weight: 400;\n color: var(--card-subheading-color, rgb(var(--contrast-1000)));\n }\n\n h1,\n h2 {\n word-break: break-word;\n hyphens: auto;\n -webkit-hyphens: auto;\n margin: 0;\n }\n}\n\nlimel-action-bar {\n flex-shrink: 0;\n --action-bar-background-color: transparent;\n margin-left: auto;\n}\n\n// The 3D effect\nlimel-3d-hover-effect-glow {\n border-radius: var(--card-border-radius, $default-border-radius);\n}\n\n:host(limel-card) {\n @include mixins.parent-of-the-3d-element;\n}\n\nsection {\n @include mixins.the-3d-element;\n\n :host(limel-card[clickable]) & {\n @include mixins.the-3d-element--clickable;\n }\n}\n","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 <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"],"version":3}
1
+ {"file":"limel-card.entry.js","mappings":"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","names":[],"sources":["./src/components/card/card.scss?tag=limel-card&encapsulation=shadow","./src/components/card/card.tsx"],"sourcesContent":["/**\n* @prop --card-heading-color: color of the heading. Defaults to `--contrast-1100`;\n* @prop --card-subheading-color: color of the sub heading. Defaults to `--contrast-1000`;\n* @prop --card-border-radius: border radius of the card. Defaults to `0.95rem`;\n* @prop --card-background-color: background color of the card.\n* @prop --card-background-color--hovered: background color of the card, when hovered.\n*/\n\n@use '../../style/mixins';\n\n$default-border-radius: 0.95rem;\n\n* {\n box-sizing: border-box;\n min-width: 0;\n min-height: 0;\n}\n\n:host(limel-card) {\n display: flex;\n border-radius: var(--card-border-radius, $default-border-radius);\n}\n\nsection {\n box-sizing: border-box;\n\n display: flex;\n gap: 0.5rem;\n\n flex-direction: column;\n :host(limel-card[orientation='landscape']) & {\n flex-direction: row;\n }\n\n width: 100%;\n border-radius: var(--card-border-radius, $default-border-radius);\n border: 1px solid rgb(var(--contrast-500));\n\n padding: 0.25rem;\n background-color: var(--card-background-color, rgb(var(--contrast-300)));\n\n &:hover {\n border-color: transparent;\n background-color: var(\n --card-background-color--hovered,\n var(--card-background-color, rgb(var(--contrast-200)))\n );\n }\n}\n\n.body {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\nimg {\n transition: filter 0.6s ease;\n object-fit: cover;\n border-radius: calc(\n var(--card-border-radius, $default-border-radius) / 1.4\n );\n :host(limel-card[orientation='portrait']) & {\n width: 100%;\n }\n\n :host(limel-card[orientation='landscape']) & {\n flex-shrink: 0;\n\n max-width: 40%;\n height: 100%;\n }\n\n section:hover &,\n section:focus-visible & {\n transition-duration: 0.2s;\n filter: saturate(1.3);\n }\n}\n\nlimel-markdown {\n overflow-y: auto;\n padding: 0.5rem 0.75rem;\n}\n\nheader {\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n\n gap: 0.5rem;\n\n padding: 0.25rem 0.75rem;\n :host(limel-card[orientation='landscape']) & {\n padding-top: 0.5rem;\n }\n\n &:has(limel-icon) {\n padding-left: 0.25rem;\n }\n\n .headings {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n }\n\n limel-icon {\n flex-shrink: 0;\n width: 2rem;\n }\n\n h1 {\n font-size: 1.125rem;\n font-weight: 500;\n color: var(--card-heading-color, rgb(var(--contrast-1100)));\n letter-spacing: -0.03125rem; // 0.5px\n }\n\n h2 {\n font-size: 0.875rem;\n font-weight: 400;\n color: var(--card-subheading-color, rgb(var(--contrast-1000)));\n }\n\n h1,\n h2 {\n word-break: break-word;\n hyphens: auto;\n -webkit-hyphens: auto;\n margin: 0;\n }\n}\n\nlimel-action-bar {\n flex-shrink: 0;\n --action-bar-background-color: transparent;\n margin-left: auto;\n}\n\n// The 3D effect\nlimel-3d-hover-effect-glow {\n border-radius: var(--card-border-radius, $default-border-radius);\n}\n\n:host(limel-card) {\n @include mixins.parent-of-the-3d-element;\n}\n\nsection {\n @include mixins.the-3d-element;\n\n :host(limel-card[clickable]) & {\n @include mixins.the-3d-element--clickable;\n }\n}\n","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 <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"],"version":3}
@@ -1,5 +1,6 @@
1
1
  import { r as registerInstance, h } from './index-6156b4fd.js';
2
2
  import { m as markdownToHTML } from './markdown-parser-90f72b15.js';
3
+ import { g as globalConfig } from './config-656a588f.js';
3
4
  import './_commonjsHelpers-5ec8f9b7.js';
4
5
 
5
6
  const markdownCss = "@charset \"UTF-8\";code{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-size:0.8125rem;letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:0.875rem}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:0.875rem;word-break:break-word;hyphens:auto;-webkit-hyphens:auto}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:\"\";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0;border:1px solid rgb(var(--contrast-400))}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:\"“\";left:0;top:-0.75rem}blockquote:after{content:\"”\";right:0;bottom:-2rem}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}img{max-width:100%;border-radius:0.25rem}:host(limel-markdown.adjust-for-table-cell) img{max-height:1.25rem;vertical-align:middle}:host(limel-markdown.adjust-for-table-cell) p{display:inline}:host(limel-markdown.adjust-for-table-cell) h1,:host(limel-markdown.adjust-for-table-cell) h2,:host(limel-markdown.adjust-for-table-cell) h3,:host(limel-markdown.adjust-for-table-cell) h4,:host(limel-markdown.adjust-for-table-cell) h5,:host(limel-markdown.adjust-for-table-cell) h6{display:inline-block;vertical-align:bottom;font-size:0.875rem;margin:0 0.25rem 0 0;letter-spacing:normal;font-weight:500}:host(limel-markdown.adjust-for-table-cell) h1:before,:host(limel-markdown.adjust-for-table-cell) h2:before,:host(limel-markdown.adjust-for-table-cell) h3:before,:host(limel-markdown.adjust-for-table-cell) h4:before,:host(limel-markdown.adjust-for-table-cell) h5:before,:host(limel-markdown.adjust-for-table-cell) h6:before{opacity:0.6;vertical-align:middle;font-size:0.5rem;border-radius:0.25rem 0 0 0.25rem;padding:0.25rem;padding-right:2rem;margin-right:-1.75rem;background:linear-gradient(to right, rgb(var(--contrast-800), 0.6), rgb(var(--contrast-800), 0))}:host(limel-markdown.adjust-for-table-cell) h1:before{content:\"H1\"}:host(limel-markdown.adjust-for-table-cell) h2:before{content:\"H2\"}:host(limel-markdown.adjust-for-table-cell) h3:before{content:\"H3\"}:host(limel-markdown.adjust-for-table-cell) h4:before{content:\"H4\"}:host(limel-markdown.adjust-for-table-cell) h5:before{content:\"H5\"}:host(limel-markdown.adjust-for-table-cell) h6:before{content:\"H6\"}:host(limel-markdown.adjust-for-table-cell) pre{margin:0}:host(limel-markdown.adjust-for-table-cell) pre>code{padding:0.125rem;margin:0}:host(limel-markdown.adjust-for-table-cell) dl{margin:0}:host(limel-markdown.adjust-for-table-cell) dl dt,:host(limel-markdown.adjust-for-table-cell) dl dd{padding:0.00625rem 0.125rem}hr{border-top:1px solid rgb(var(--contrast-700))}.MsoNormal{margin:0}";
@@ -8,7 +9,7 @@ const Markdown = class {
8
9
  constructor(hostRef) {
9
10
  registerInstance(this, hostRef);
10
11
  this.value = undefined;
11
- this.whitelist = undefined;
12
+ this.whitelist = globalConfig.markdownWhitelist;
12
13
  }
13
14
  async textChanged() {
14
15
  var _a;
@@ -1 +1 @@
1
- {"file":"limel-markdown.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,o8LAAo8L;;MC2B38L,QAAQ;;;;;;EAmBV,MAAM,WAAW;;IACpB,IAAI;MACA,MAAM,IAAI,GAAG,MAAM,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE;QAC1C,mBAAmB,EAAE,IAAI;QACzB,SAAS,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,EAAE;OAClC,CAAC,CAAC;MACH,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;KACrC;IAAC,OAAO,KAAK,EAAE;;MAEZ,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;GACJ;EAEM,MAAM,gBAAgB;IACzB,IAAI,CAAC,WAAW,EAAE,CAAC;GACtB;EAIM,MAAM;IACT,OAAO;MACH,WACI,EAAE,EAAC,UAAU,EACb,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,GACxD;KACL,CAAC;GACL;;;;;;;;;","names":[],"sources":["./src/components/markdown/markdown.scss?tag=limel-markdown&encapsulation=shadow","./src/components/markdown/markdown.tsx"],"sourcesContent":["/**\n* @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;\n* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;\n*/\n\n@import './partial-styles/pre-code';\n@import './partial-styles/headings';\n@import './partial-styles/body-text';\n@import './partial-styles/lists';\n@import './partial-styles/tables';\n@import './partial-styles/blockquotes';\n@import './partial-styles/definition-lists';\n@import './partial-styles/img';\n@import './partial-styles/_adjust-for-table-cell';\n\n// body-text\nhr {\n border-top: 1px solid rgb(var(--contrast-700));\n}\n\n.MsoNormal {\n margin: 0;\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-composite\n * @exampleComponent limel-example-markdown-custom-component\n */\n@Component({\n tag: 'limel-markdown',\n styleUrl: 'markdown.scss',\n shadow: true,\n})\nexport class Markdown {\n /**\n * The input text. Treated as GitHub Flavored Markdown, with the addition\n * that any included HTML will be parsed and rendered as HTML, rather than\n * as text.\n */\n @Prop()\n public value: string;\n\n /**\n * Whitelisted html elements.\n *\n * Any custom element added here will not be sanitized and thus rendered.\n * @alpha\n */\n @Prop()\n public whitelist?: CustomElementDefinition[];\n\n @Watch('value')\n public async textChanged() {\n try {\n const html = await markdownToHTML(this.value, {\n forceHardLineBreaks: true,\n whitelist: this.whitelist ?? [],\n });\n this.rootElement.innerHTML = html;\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error(error);\n }\n }\n\n public async componentDidLoad() {\n this.textChanged();\n }\n\n private rootElement: HTMLDivElement;\n\n public render() {\n return [\n <div\n id=\"markdown\"\n ref={(el) => (this.rootElement = el as HTMLDivElement)}\n />,\n ];\n }\n}\n"],"version":3}
1
+ {"file":"limel-markdown.entry.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,o8LAAo8L;;MC4B38L,QAAQ;;;;qBAmBb,YAAY,CAAC,iBAAiB;;EAG3B,MAAM,WAAW;;IACpB,IAAI;MACA,MAAM,IAAI,GAAG,MAAM,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE;QAC1C,mBAAmB,EAAE,IAAI;QACzB,SAAS,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,EAAE;OAClC,CAAC,CAAC;MACH,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;KACrC;IAAC,OAAO,KAAK,EAAE;;MAEZ,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;GACJ;EAEM,MAAM,gBAAgB;IACzB,IAAI,CAAC,WAAW,EAAE,CAAC;GACtB;EAIM,MAAM;IACT,OAAO;MACH,WACI,EAAE,EAAC,UAAU,EACb,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,GACxD;KACL,CAAC;GACL;;;;;;;;;","names":[],"sources":["./src/components/markdown/markdown.scss?tag=limel-markdown&encapsulation=shadow","./src/components/markdown/markdown.tsx"],"sourcesContent":["/**\n* @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;\n* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;\n*/\n\n@import './partial-styles/pre-code';\n@import './partial-styles/headings';\n@import './partial-styles/body-text';\n@import './partial-styles/lists';\n@import './partial-styles/tables';\n@import './partial-styles/blockquotes';\n@import './partial-styles/definition-lists';\n@import './partial-styles/img';\n@import './partial-styles/_adjust-for-table-cell';\n\n// body-text\nhr {\n border-top: 1px solid rgb(var(--contrast-700));\n}\n\n.MsoNormal {\n margin: 0;\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { globalConfig } from '../../global/config';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-composite\n * @exampleComponent limel-example-markdown-custom-component\n */\n@Component({\n tag: 'limel-markdown',\n styleUrl: 'markdown.scss',\n shadow: true,\n})\nexport class Markdown {\n /**\n * The input text. Treated as GitHub Flavored Markdown, with the addition\n * that any included HTML will be parsed and rendered as HTML, rather than\n * as text.\n */\n @Prop()\n public value: string;\n\n /**\n * Whitelisted html elements.\n *\n * Any custom element added here will not be sanitized and thus rendered.\n * Can also be set via `limel-config`. Setting this property will override\n * the global config.\n * @alpha\n */\n @Prop()\n public whitelist?: CustomElementDefinition[] =\n globalConfig.markdownWhitelist;\n\n @Watch('value')\n public async textChanged() {\n try {\n const html = await markdownToHTML(this.value, {\n forceHardLineBreaks: true,\n whitelist: this.whitelist ?? [],\n });\n this.rootElement.innerHTML = html;\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error(error);\n }\n }\n\n public async componentDidLoad() {\n this.textChanged();\n }\n\n private rootElement: HTMLDivElement;\n\n public render() {\n return [\n <div\n id=\"markdown\"\n ref={(el) => (this.rootElement = el as HTMLDivElement)}\n />,\n ];\n }\n}\n"],"version":3}
@@ -1,2 +1,2 @@
1
- import{p as e,b as l}from"./p-443111b3.js";export{s as setNonce}from"./p-443111b3.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-3cbe2ed9",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-74d3b0ca",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-a451cece",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-2e36887b",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"allItems":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-211456f2",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-17da2b0a",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-8f1b76df",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-bc223807",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"internalFormat":[32],"showPortal":[32]}]]],["p-6500050d",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-492f97a6",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-3d6dc7de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-20b6fddc",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-1b7d52d8",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-60570bdc",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-d6eb9c6f",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["p-fda881a3",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-c7d07d05",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["p-147db56c",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["p-8e7788a1",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-ef42256f",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-89eaca66",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-eb58b4b7",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-1bcdc70b",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-1e99b371",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-603ce062",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-28c76ae8",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-16e4ca3e",[[1,"limel-config",{"config":[16]}]]],["p-ea98795d",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-2b294a69",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-b5f723e2",[[1,"limel-grid"]]],["p-911bde1e",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-9c5f2c45",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-8579a166",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-c2f53695",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-29dd2fee",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-0fef416f",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-d6660d2a",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-97571329",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-f340d860",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-633ce371",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-c96a3f2e",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-85ffcf55",[[1,"limel-3d-hover-effect-glow"]]],["p-aad274aa",[[1,"limel-badge",{"label":[520]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["p-a2eee29e",[[17,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-691e4e6a",[[1,"limel-markdown",{"value":[1],"whitelist":[16]}]]],["p-5d08ef7d",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-d93f1964",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-9f8aa8e7",[[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-d754969f",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}],[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["p-c4503728",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"menuItems":[16]}]]],["p-493e2b10",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-0ee1d461",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-e54d3ef2",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-18b068c9",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["p-7f0b768e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]]]'),e)));
1
+ import{p as e,b as l}from"./p-443111b3.js";export{s as setNonce}from"./p-443111b3.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-3cbe2ed9",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-605a3b5e",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-a451cece",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-2e36887b",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"allItems":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-211456f2",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-17da2b0a",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-8f1b76df",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-bc223807",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"internalFormat":[32],"showPortal":[32]}]]],["p-6500050d",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-492f97a6",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-3d6dc7de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-20b6fddc",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-1b7d52d8",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-60570bdc",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-d6eb9c6f",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["p-fda881a3",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-c7d07d05",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["p-147db56c",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["p-8e7788a1",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-ef42256f",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-89eaca66",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-eb58b4b7",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-1bcdc70b",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-1e99b371",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-603ce062",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-28c76ae8",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-16e4ca3e",[[1,"limel-config",{"config":[16]}]]],["p-ea98795d",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-2b294a69",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-b5f723e2",[[1,"limel-grid"]]],["p-911bde1e",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-9c5f2c45",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-8579a166",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-c2f53695",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-29dd2fee",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-0fef416f",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-d6660d2a",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-97571329",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-f340d860",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-633ce371",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-c96a3f2e",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-85ffcf55",[[1,"limel-3d-hover-effect-glow"]]],["p-aad274aa",[[1,"limel-badge",{"label":[520]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["p-a2eee29e",[[17,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-40e51cf9",[[1,"limel-markdown",{"value":[1],"whitelist":[16]}]]],["p-5d08ef7d",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-d93f1964",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-9f8aa8e7",[[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-d754969f",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}],[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["p-c4503728",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"menuItems":[16]}]]],["p-493e2b10",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-0ee1d461",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-e54d3ef2",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-18b068c9",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["p-7f0b768e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]]]'),e)));
2
2
  //# sourceMappingURL=lime-elements.esm.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["ConfigClass","constructor","this","iconPath","defaultLocale","navigator","language","featureSwitches","getFeatureSwitches","localStorage","storage","features","i","length","key","value","getItem","includes","config","globalConfig"],"sources":["./src/global/config.ts"],"sourcesContent":["/**\n * Configuration options for limel-config.\n *\n * @public\n */\nexport type Config = {\n /**\n * The path to where the icon library used by limel-icon is located.\n */\n iconPath?: string;\n\n /**\n * The default locale to use for components that support localization.\n */\n defaultLocale?: string;\n\n /**\n * @internal\n */\n featureSwitches?: Record<string, boolean>;\n};\n\nclass ConfigClass implements Config {\n public iconPath = '';\n public defaultLocale = navigator.language;\n public featureSwitches: any = getFeatureSwitches(localStorage);\n}\n\nfunction getFeatureSwitches(storage: Storage) {\n const features = {};\n for (let i = 0; i < storage.length; i++) {\n const key = storage.key(i);\n const value = storage.getItem(key);\n\n if (!['true', 'false'].includes(value)) {\n continue;\n }\n\n features[key] = value === 'true';\n }\n\n return features;\n}\n\nconst config = new ConfigClass();\nexport const globalConfig = (() => {\n return config;\n})();\n"],"mappings":"AAsBA,MAAMA,EAANC,cACWC,KAAAC,SAAW,GACXD,KAAAE,cAAgBC,UAAUC,SAC1BJ,KAAAK,gBAAuBC,EAAmBC,a,EAGrD,SAASD,EAAmBE,GACxB,MAAMC,EAAW,GACjB,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAQG,OAAQD,IAAK,CACrC,MAAME,EAAMJ,EAAQI,IAAIF,GACxB,MAAMG,EAAQL,EAAQM,QAAQF,GAE9B,IAAK,CAAC,OAAQ,SAASG,SAASF,GAAQ,CACpC,Q,CAGJJ,EAASG,GAAOC,IAAU,M,CAG9B,OAAOJ,CACX,CAEA,MAAMO,EAAS,IAAIlB,E,MACNmB,EAAe,KACjBD,EADiB,U"}
1
+ {"version":3,"names":["ConfigClass","constructor","this","iconPath","defaultLocale","navigator","language","featureSwitches","getFeatureSwitches","localStorage","storage","features","i","length","key","value","getItem","includes","config","globalConfig"],"sources":["./src/global/config.ts"],"sourcesContent":["import { CustomElementDefinition } from './shared-types/custom-element.types';\n\n/**\n * Configuration options for limel-config.\n *\n * @public\n */\nexport type Config = {\n /**\n * The path to where the icon library used by limel-icon is located.\n */\n iconPath?: string;\n\n /**\n * The default locale to use for components that support localization.\n */\n defaultLocale?: string;\n\n /**\n * Whitelisted html elements for `limel-markdown`.\n *\n * Any custom element added here will not be sanitized and thus rendered.\n * @alpha\n */\n markdownWhitelist?: CustomElementDefinition[];\n\n /**\n * @internal\n */\n featureSwitches?: Record<string, boolean>;\n};\n\nclass ConfigClass implements Config {\n public iconPath = '';\n public defaultLocale = navigator.language;\n public markdownWhitelist?: CustomElementDefinition[];\n public featureSwitches: any = getFeatureSwitches(localStorage);\n}\n\nfunction getFeatureSwitches(storage: Storage) {\n const features = {};\n for (let i = 0; i < storage.length; i++) {\n const key = storage.key(i);\n const value = storage.getItem(key);\n\n if (!['true', 'false'].includes(value)) {\n continue;\n }\n\n features[key] = value === 'true';\n }\n\n return features;\n}\n\nconst config = new ConfigClass();\nexport const globalConfig = (() => {\n return config;\n})();\n"],"mappings":"AAgCA,MAAMA,EAANC,cACWC,KAAAC,SAAW,GACXD,KAAAE,cAAgBC,UAAUC,SAE1BJ,KAAAK,gBAAuBC,EAAmBC,a,EAGrD,SAASD,EAAmBE,GACxB,MAAMC,EAAW,GACjB,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAQG,OAAQD,IAAK,CACrC,MAAME,EAAMJ,EAAQI,IAAIF,GACxB,MAAMG,EAAQL,EAAQM,QAAQF,GAE9B,IAAK,CAAC,OAAQ,SAASG,SAASF,GAAQ,CACpC,Q,CAGJJ,EAASG,GAAOC,IAAU,M,CAG9B,OAAOJ,CACX,CAEA,MAAMO,EAAS,IAAIlB,E,MACNmB,EAAe,KACjBD,EADiB,U"}
@@ -0,0 +1,2 @@
1
+ import{r as e,h as t}from"./p-443111b3.js";import{m as r}from"./p-3e8afa19.js";import{g as o}from"./p-2c35fb9d.js";import"./p-eab67c09.js";const l='@charset "UTF-8";code{font-family:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-size:0.8125rem;letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:0.875rem}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:0.875rem;word-break:break-word;hyphens:auto;-webkit-hyphens:auto}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:"";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0;border:1px solid rgb(var(--contrast-400))}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:"“";left:0;top:-0.75rem}blockquote:after{content:"”";right:0;bottom:-2rem}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}img{max-width:100%;border-radius:0.25rem}:host(limel-markdown.adjust-for-table-cell) img{max-height:1.25rem;vertical-align:middle}:host(limel-markdown.adjust-for-table-cell) p{display:inline}:host(limel-markdown.adjust-for-table-cell) h1,:host(limel-markdown.adjust-for-table-cell) h2,:host(limel-markdown.adjust-for-table-cell) h3,:host(limel-markdown.adjust-for-table-cell) h4,:host(limel-markdown.adjust-for-table-cell) h5,:host(limel-markdown.adjust-for-table-cell) h6{display:inline-block;vertical-align:bottom;font-size:0.875rem;margin:0 0.25rem 0 0;letter-spacing:normal;font-weight:500}:host(limel-markdown.adjust-for-table-cell) h1:before,:host(limel-markdown.adjust-for-table-cell) h2:before,:host(limel-markdown.adjust-for-table-cell) h3:before,:host(limel-markdown.adjust-for-table-cell) h4:before,:host(limel-markdown.adjust-for-table-cell) h5:before,:host(limel-markdown.adjust-for-table-cell) h6:before{opacity:0.6;vertical-align:middle;font-size:0.5rem;border-radius:0.25rem 0 0 0.25rem;padding:0.25rem;padding-right:2rem;margin-right:-1.75rem;background:linear-gradient(to right, rgb(var(--contrast-800), 0.6), rgb(var(--contrast-800), 0))}:host(limel-markdown.adjust-for-table-cell) h1:before{content:"H1"}:host(limel-markdown.adjust-for-table-cell) h2:before{content:"H2"}:host(limel-markdown.adjust-for-table-cell) h3:before{content:"H3"}:host(limel-markdown.adjust-for-table-cell) h4:before{content:"H4"}:host(limel-markdown.adjust-for-table-cell) h5:before{content:"H5"}:host(limel-markdown.adjust-for-table-cell) h6:before{content:"H6"}:host(limel-markdown.adjust-for-table-cell) pre{margin:0}:host(limel-markdown.adjust-for-table-cell) pre>code{padding:0.125rem;margin:0}:host(limel-markdown.adjust-for-table-cell) dl{margin:0}:host(limel-markdown.adjust-for-table-cell) dl dt,:host(limel-markdown.adjust-for-table-cell) dl dd{padding:0.00625rem 0.125rem}hr{border-top:1px solid rgb(var(--contrast-700))}.MsoNormal{margin:0}';const a=class{constructor(t){e(this,t);this.value=undefined;this.whitelist=o.markdownWhitelist}async textChanged(){var e;try{const t=await r(this.value,{forceHardLineBreaks:true,whitelist:(e=this.whitelist)!==null&&e!==void 0?e:[]});this.rootElement.innerHTML=t}catch(e){console.error(e)}}async componentDidLoad(){this.textChanged()}render(){return[t("div",{id:"markdown",ref:e=>this.rootElement=e})]}static get watchers(){return{value:["textChanged"]}}};a.style=l;export{a as limel_markdown};
2
+ //# sourceMappingURL=p-40e51cf9.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["markdownCss","Markdown","globalConfig","markdownWhitelist","async","html","markdownToHTML","this","value","forceHardLineBreaks","whitelist","_a","rootElement","innerHTML","error","console","textChanged","render","h","id","ref","el"],"sources":["./src/components/markdown/markdown.scss?tag=limel-markdown&encapsulation=shadow","./src/components/markdown/markdown.tsx"],"sourcesContent":["/**\n* @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;\n* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;\n*/\n\n@import './partial-styles/pre-code';\n@import './partial-styles/headings';\n@import './partial-styles/body-text';\n@import './partial-styles/lists';\n@import './partial-styles/tables';\n@import './partial-styles/blockquotes';\n@import './partial-styles/definition-lists';\n@import './partial-styles/img';\n@import './partial-styles/_adjust-for-table-cell';\n\n// body-text\nhr {\n border-top: 1px solid rgb(var(--contrast-700));\n}\n\n.MsoNormal {\n margin: 0;\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { globalConfig } from '../../global/config';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-composite\n * @exampleComponent limel-example-markdown-custom-component\n */\n@Component({\n tag: 'limel-markdown',\n styleUrl: 'markdown.scss',\n shadow: true,\n})\nexport class Markdown {\n /**\n * The input text. Treated as GitHub Flavored Markdown, with the addition\n * that any included HTML will be parsed and rendered as HTML, rather than\n * as text.\n */\n @Prop()\n public value: string;\n\n /**\n * Whitelisted html elements.\n *\n * Any custom element added here will not be sanitized and thus rendered.\n * Can also be set via `limel-config`. Setting this property will override\n * the global config.\n * @alpha\n */\n @Prop()\n public whitelist?: CustomElementDefinition[] =\n globalConfig.markdownWhitelist;\n\n @Watch('value')\n public async textChanged() {\n try {\n const html = await markdownToHTML(this.value, {\n forceHardLineBreaks: true,\n whitelist: this.whitelist ?? [],\n });\n this.rootElement.innerHTML = html;\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error(error);\n }\n }\n\n public async componentDidLoad() {\n this.textChanged();\n }\n\n private rootElement: HTMLDivElement;\n\n public render() {\n return [\n <div\n id=\"markdown\"\n ref={(el) => (this.rootElement = el as HTMLDivElement)}\n />,\n ];\n }\n}\n"],"mappings":"2IAAA,MAAMA,EAAc,26L,MC4BPC,EAAQ,M,6DAmBbC,EAAaC,iB,CAGVC,oB,MACH,IACI,MAAMC,QAAaC,EAAeC,KAAKC,MAAO,CAC1CC,oBAAqB,KACrBC,WAAWC,EAAAJ,KAAKG,aAAS,MAAAC,SAAA,EAAAA,EAAI,KAEjCJ,KAAKK,YAAYC,UAAYR,C,CAC/B,MAAOS,GAELC,QAAQD,MAAMA,E,EAIfV,yBACHG,KAAKS,a,CAKFC,SACH,MAAO,CACHC,EAAA,OACIC,GAAG,WACHC,IAAMC,GAAQd,KAAKK,YAAcS,I"}
@@ -0,0 +1,2 @@
1
+ import{r as e,c as r,h as o,H as i,g as t}from"./p-443111b3.js";import{i as s}from"./p-91741e79.js";import{g as a}from"./p-2f777fdb.js";import{g as n}from"./p-e1e25236.js";const d='@charset "UTF-8";*{box-sizing:border-box;min-width:0;min-height:0}:host(limel-card){display:flex;border-radius:var(--card-border-radius, 0.95rem)}section{box-sizing:border-box;display:flex;gap:0.5rem;flex-direction:column;width:100%;border-radius:var(--card-border-radius, 0.95rem);border:1px solid rgb(var(--contrast-500));padding:0.25rem;background-color:var(--card-background-color, rgb(var(--contrast-300)))}:host(limel-card[orientation=landscape]) section{flex-direction:row}section:hover{border-color:transparent;background-color:var(--card-background-color--hovered, var(--card-background-color, rgb(var(--contrast-200))))}.body{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem}img{transition:filter 0.6s ease;object-fit:cover;border-radius:calc(var(--card-border-radius, 0.95rem) / 1.4)}:host(limel-card[orientation=portrait]) img{width:100%}:host(limel-card[orientation=landscape]) img{flex-shrink:0;max-width:40%;height:100%}section:hover img,section:focus-visible img{transition-duration:0.2s;filter:saturate(1.3)}limel-markdown{overflow-y:auto;padding:0.5rem 0.75rem}header{flex-shrink:0;display:flex;justify-content:center;gap:0.5rem;padding:0.25rem 0.75rem}:host(limel-card[orientation=landscape]) header{padding-top:0.5rem}header:has(limel-icon){padding-left:0.25rem}header .headings{flex-grow:1;display:flex;flex-direction:column;gap:0.125rem}header limel-icon{flex-shrink:0;width:2rem}header h1{font-size:1.125rem;font-weight:500;color:var(--card-heading-color, rgb(var(--contrast-1100)));letter-spacing:-0.03125rem}header h2{font-size:0.875rem;font-weight:400;color:var(--card-subheading-color, rgb(var(--contrast-1000)))}header h1,header h2{word-break:break-word;hyphens:auto;-webkit-hyphens:auto;margin:0}limel-action-bar{flex-shrink:0;--action-bar-background-color:transparent;margin-left:auto}limel-3d-hover-effect-glow{border-radius:var(--card-border-radius, 0.95rem)}: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)}section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.5}@media (prefers-reduced-motion){section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.2}}: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)}';const c=class{constructor(o){e(this,o);this.actionSelected=r(this,"actionSelected",7);this.handleActionSelect=e=>{e.stopPropagation();if(s(e.detail)){this.actionSelected.emit(e.detail)}};this.heading=undefined;this.subheading=undefined;this.image=undefined;this.icon=undefined;this.value=undefined;this.actions=[];this.clickable=false;this.orientation="portrait"}componentWillLoad(){const{handleMouseEnter:e,handleMouseLeave:r}=n(this.host);this.handleMouseEnter=e;this.handleMouseLeave=r}render(){return o(i,{onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},o("section",{tabindex:this.clickable?0:""},this.renderImage(),o("div",{class:"body"},this.renderHeader(),this.renderSlot(),this.renderValue(),this.renderActionBar()),o("limel-3d-hover-effect-glow",null)))}renderImage(){if(!this.image){return}return o("img",{src:this.image.src,alt:this.image.alt,loading:"lazy"})}renderHeader(){if(!this.heading&&!this.subheading&&!this.icon){return}return o("header",null,this.renderIcon(),o("div",{class:"headings"},this.renderHeading(),this.renderSubheading()))}renderIcon(){var e;const r=a(this.icon);const i=typeof this.icon!=="string"?(e=this.icon)===null||e===void 0?void 0:e.color:undefined;if(!r){return}return o("limel-icon",{style:{color:`${i}`},badge:true,name:r})}renderHeading(){if(!this.heading){return}return o("h1",null,this.heading)}renderSubheading(){if(!this.subheading){return}return o("h2",null,this.subheading)}renderSlot(){return o("slot",{name:"component"})}renderValue(){return o("limel-markdown",{value:this.value})}renderActionBar(){if(!this.actions.length){return}return o("limel-action-bar",{actions:this.actions,onItemSelected:this.handleActionSelect})}get host(){return t(this)}};c.style=d;export{c as limel_card};
2
+ //# sourceMappingURL=p-605a3b5e.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["cardCss","Card","this","handleActionSelect","event","stopPropagation","isItem","detail","actionSelected","emit","componentWillLoad","handleMouseEnter","handleMouseLeave","getMouseEventHandlers","host","render","h","Host","onMouseEnter","onMouseLeave","tabindex","clickable","renderImage","class","renderHeader","renderSlot","renderValue","renderActionBar","image","src","alt","loading","heading","subheading","icon","renderIcon","renderHeading","renderSubheading","getIconName","color","_a","undefined","style","badge","name","value","actions","length","onItemSelected"],"sources":["./src/components/card/card.scss?tag=limel-card&encapsulation=shadow","./src/components/card/card.tsx"],"sourcesContent":["/**\n* @prop --card-heading-color: color of the heading. Defaults to `--contrast-1100`;\n* @prop --card-subheading-color: color of the sub heading. Defaults to `--contrast-1000`;\n* @prop --card-border-radius: border radius of the card. Defaults to `0.95rem`;\n* @prop --card-background-color: background color of the card.\n* @prop --card-background-color--hovered: background color of the card, when hovered.\n*/\n\n@use '../../style/mixins';\n\n$default-border-radius: 0.95rem;\n\n* {\n box-sizing: border-box;\n min-width: 0;\n min-height: 0;\n}\n\n:host(limel-card) {\n display: flex;\n border-radius: var(--card-border-radius, $default-border-radius);\n}\n\nsection {\n box-sizing: border-box;\n\n display: flex;\n gap: 0.5rem;\n\n flex-direction: column;\n :host(limel-card[orientation='landscape']) & {\n flex-direction: row;\n }\n\n width: 100%;\n border-radius: var(--card-border-radius, $default-border-radius);\n border: 1px solid rgb(var(--contrast-500));\n\n padding: 0.25rem;\n background-color: var(--card-background-color, rgb(var(--contrast-300)));\n\n &:hover {\n border-color: transparent;\n background-color: var(\n --card-background-color--hovered,\n var(--card-background-color, rgb(var(--contrast-200)))\n );\n }\n}\n\n.body {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\nimg {\n transition: filter 0.6s ease;\n object-fit: cover;\n border-radius: calc(\n var(--card-border-radius, $default-border-radius) / 1.4\n );\n :host(limel-card[orientation='portrait']) & {\n width: 100%;\n }\n\n :host(limel-card[orientation='landscape']) & {\n flex-shrink: 0;\n\n max-width: 40%;\n height: 100%;\n }\n\n section:hover &,\n section:focus-visible & {\n transition-duration: 0.2s;\n filter: saturate(1.3);\n }\n}\n\nlimel-markdown {\n overflow-y: auto;\n padding: 0.5rem 0.75rem;\n}\n\nheader {\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n\n gap: 0.5rem;\n\n padding: 0.25rem 0.75rem;\n :host(limel-card[orientation='landscape']) & {\n padding-top: 0.5rem;\n }\n\n &:has(limel-icon) {\n padding-left: 0.25rem;\n }\n\n .headings {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n }\n\n limel-icon {\n flex-shrink: 0;\n width: 2rem;\n }\n\n h1 {\n font-size: 1.125rem;\n font-weight: 500;\n color: var(--card-heading-color, rgb(var(--contrast-1100)));\n letter-spacing: -0.03125rem; // 0.5px\n }\n\n h2 {\n font-size: 0.875rem;\n font-weight: 400;\n color: var(--card-subheading-color, rgb(var(--contrast-1000)));\n }\n\n h1,\n h2 {\n word-break: break-word;\n hyphens: auto;\n -webkit-hyphens: auto;\n margin: 0;\n }\n}\n\nlimel-action-bar {\n flex-shrink: 0;\n --action-bar-background-color: transparent;\n margin-left: auto;\n}\n\n// The 3D effect\nlimel-3d-hover-effect-glow {\n border-radius: var(--card-border-radius, $default-border-radius);\n}\n\n:host(limel-card) {\n @include mixins.parent-of-the-3d-element;\n}\n\nsection {\n @include mixins.the-3d-element;\n\n :host(limel-card[clickable]) & {\n @include mixins.the-3d-element--clickable;\n }\n}\n","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 <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"],"mappings":"4KAAA,MAAMA,EAAU,2gH,MCoCHC,EAAI,M,wEAoKLC,KAAAC,mBACJC,IAEAA,EAAMC,kBACN,GAAIC,EAAOF,EAAMG,QAAS,CACtBL,KAAKM,eAAeC,KAAKL,EAAMG,O,+HAjIiB,G,eAO5B,M,iBAOmB,U,CAcxCG,oBACH,MAAMC,iBAAEA,EAAgBC,iBAAEA,GAAqBC,EAC3CX,KAAKY,MAETZ,KAAKS,iBAAmBA,EACxBT,KAAKU,iBAAmBA,C,CAGrBG,SACH,OACIC,EAACC,EAAI,CACDC,aAAchB,KAAKS,iBACnBQ,aAAcjB,KAAKU,kBAEnBI,EAAA,WAASI,SAAUlB,KAAKmB,UAAY,EAAI,IACnCnB,KAAKoB,cACNN,EAAA,OAAKO,MAAM,QACNrB,KAAKsB,eACLtB,KAAKuB,aACLvB,KAAKwB,cACLxB,KAAKyB,mBAEVX,EAAA,oC,CAMRM,cACJ,IAAKpB,KAAK0B,MAAO,CACb,M,CAGJ,OAAOZ,EAAA,OAAKa,IAAK3B,KAAK0B,MAAMC,IAAKC,IAAK5B,KAAK0B,MAAME,IAAKC,QAAQ,Q,CAG1DP,eACJ,IAAKtB,KAAK8B,UAAY9B,KAAK+B,aAAe/B,KAAKgC,KAAM,CACjD,M,CAGJ,OACIlB,EAAA,cACKd,KAAKiC,aACNnB,EAAA,OAAKO,MAAM,YACNrB,KAAKkC,gBACLlC,KAAKmC,oB,CAMdF,a,MACJ,MAAMD,EAAOI,EAAYpC,KAAKgC,MAC9B,MAAMK,SACKrC,KAAKgC,OAAS,UAAWM,EAAAtC,KAAKgC,QAAI,MAAAM,SAAA,SAAAA,EAAED,MAAQE,UAEvD,IAAKP,EAAM,CACP,M,CAGJ,OACIlB,EAAA,cACI0B,MAAO,CACHH,MAAO,GAAGA,KAEdI,MAAO,KACPC,KAAMV,G,CAKVE,gBACJ,IAAKlC,KAAK8B,QAAS,CACf,M,CAGJ,OAAOhB,EAAA,UAAKd,KAAK8B,Q,CAGbK,mBACJ,IAAKnC,KAAK+B,WAAY,CAClB,M,CAGJ,OAAOjB,EAAA,UAAKd,KAAK+B,W,CAGbR,aACJ,OAAOT,EAAA,QAAM4B,KAAK,a,CAGdlB,cACJ,OAAOV,EAAA,kBAAgB6B,MAAO3C,KAAK2C,O,CAY/BlB,kBACJ,IAAKzB,KAAK4C,QAAQC,OAAQ,CACtB,M,CAGJ,OACI/B,EAAA,oBACI8B,QAAS5C,KAAK4C,QACdE,eAAgB9C,KAAKC,oB"}
@@ -28,6 +28,8 @@ export declare class Markdown {
28
28
  * Whitelisted html elements.
29
29
  *
30
30
  * Any custom element added here will not be sanitized and thus rendered.
31
+ * Can also be set via `limel-config`. Setting this property will override
32
+ * the global config.
31
33
  * @alpha
32
34
  */
33
35
  whitelist?: CustomElementDefinition[];
@@ -1891,7 +1891,7 @@ export namespace Components {
1891
1891
  */
1892
1892
  "value": string;
1893
1893
  /**
1894
- * Whitelisted html elements. Any custom element added here will not be sanitized and thus rendered.
1894
+ * Whitelisted html elements. Any custom element added here will not be sanitized and thus rendered. Can also be set via `limel-config`. Setting this property will override the global config.
1895
1895
  * @alpha
1896
1896
  */
1897
1897
  "whitelist"?: CustomElementDefinition[];
@@ -6527,7 +6527,7 @@ declare namespace LocalJSX {
6527
6527
  */
6528
6528
  "value"?: string;
6529
6529
  /**
6530
- * Whitelisted html elements. Any custom element added here will not be sanitized and thus rendered.
6530
+ * Whitelisted html elements. Any custom element added here will not be sanitized and thus rendered. Can also be set via `limel-config`. Setting this property will override the global config.
6531
6531
  * @alpha
6532
6532
  */
6533
6533
  "whitelist"?: CustomElementDefinition[];
@@ -1,3 +1,4 @@
1
+ import { CustomElementDefinition } from './shared-types/custom-element.types';
1
2
  /**
2
3
  * Configuration options for limel-config.
3
4
  *
@@ -12,6 +13,13 @@ export type Config = {
12
13
  * The default locale to use for components that support localization.
13
14
  */
14
15
  defaultLocale?: string;
16
+ /**
17
+ * Whitelisted html elements for `limel-markdown`.
18
+ *
19
+ * Any custom element added here will not be sanitized and thus rendered.
20
+ * @alpha
21
+ */
22
+ markdownWhitelist?: CustomElementDefinition[];
15
23
  /**
16
24
  * @internal
17
25
  */
@@ -20,6 +28,7 @@ export type Config = {
20
28
  declare class ConfigClass implements Config {
21
29
  iconPath: string;
22
30
  defaultLocale: string;
31
+ markdownWhitelist?: CustomElementDefinition[];
23
32
  featureSwitches: any;
24
33
  }
25
34
  export declare const globalConfig: ConfigClass;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@limetech/lime-elements",
3
- "version": "37.79.7",
3
+ "version": "37.80.0",
4
4
  "description": "Lime Elements",
5
5
  "author": "Lime Technologies",
6
6
  "license": "Apache-2.0",
@@ -45,7 +45,7 @@
45
45
  "devDependencies": {
46
46
  "@commitlint/config-conventional": "^19.6.0",
47
47
  "@eslint/eslintrc": "^3.2.0",
48
- "@eslint/js": "^9.16.0",
48
+ "@eslint/js": "^9.19.0",
49
49
  "@microsoft/api-extractor": "^7.49.1",
50
50
  "@popperjs/core": "^2.11.8",
51
51
  "@rjsf/core": "^2.4.2",
@@ -56,15 +56,15 @@
56
56
  "@types/html-escaper": "^3.0.2",
57
57
  "@types/jest": "^27.4.0",
58
58
  "@types/lodash-es": "^4.17.12",
59
- "@types/react": "^19.0.7",
59
+ "@types/react": "^19.0.8",
60
60
  "@types/react-dom": "^19.0.3",
61
61
  "@types/tabulator-tables": "^4.9.4",
62
- "@typescript-eslint/eslint-plugin": "^8.21.0",
63
- "@typescript-eslint/parser": "^8.21.0",
62
+ "@typescript-eslint/eslint-plugin": "^8.22.0",
63
+ "@typescript-eslint/parser": "^8.22.0",
64
64
  "codemirror": "^5.65.9",
65
65
  "cross-env": "^7.0.3",
66
66
  "dayjs": "^1.11.13",
67
- "eslint": "^9.18.0",
67
+ "eslint": "^9.19.0",
68
68
  "eslint-config-prettier": "^10.0.1",
69
69
  "eslint-plugin-ban": "^2.0.0",
70
70
  "eslint-plugin-prefer-arrow": "^1.2.3",
@@ -1,2 +0,0 @@
1
- import{r as e,h as t}from"./p-443111b3.js";import{m as r}from"./p-3e8afa19.js";import"./p-eab67c09.js";const o='@charset "UTF-8";code{font-family:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-size:0.8125rem;letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:0.875rem}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:0.875rem;word-break:break-word;hyphens:auto;-webkit-hyphens:auto}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:"";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0;border:1px solid rgb(var(--contrast-400))}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:"“";left:0;top:-0.75rem}blockquote:after{content:"”";right:0;bottom:-2rem}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}img{max-width:100%;border-radius:0.25rem}:host(limel-markdown.adjust-for-table-cell) img{max-height:1.25rem;vertical-align:middle}:host(limel-markdown.adjust-for-table-cell) p{display:inline}:host(limel-markdown.adjust-for-table-cell) h1,:host(limel-markdown.adjust-for-table-cell) h2,:host(limel-markdown.adjust-for-table-cell) h3,:host(limel-markdown.adjust-for-table-cell) h4,:host(limel-markdown.adjust-for-table-cell) h5,:host(limel-markdown.adjust-for-table-cell) h6{display:inline-block;vertical-align:bottom;font-size:0.875rem;margin:0 0.25rem 0 0;letter-spacing:normal;font-weight:500}:host(limel-markdown.adjust-for-table-cell) h1:before,:host(limel-markdown.adjust-for-table-cell) h2:before,:host(limel-markdown.adjust-for-table-cell) h3:before,:host(limel-markdown.adjust-for-table-cell) h4:before,:host(limel-markdown.adjust-for-table-cell) h5:before,:host(limel-markdown.adjust-for-table-cell) h6:before{opacity:0.6;vertical-align:middle;font-size:0.5rem;border-radius:0.25rem 0 0 0.25rem;padding:0.25rem;padding-right:2rem;margin-right:-1.75rem;background:linear-gradient(to right, rgb(var(--contrast-800), 0.6), rgb(var(--contrast-800), 0))}:host(limel-markdown.adjust-for-table-cell) h1:before{content:"H1"}:host(limel-markdown.adjust-for-table-cell) h2:before{content:"H2"}:host(limel-markdown.adjust-for-table-cell) h3:before{content:"H3"}:host(limel-markdown.adjust-for-table-cell) h4:before{content:"H4"}:host(limel-markdown.adjust-for-table-cell) h5:before{content:"H5"}:host(limel-markdown.adjust-for-table-cell) h6:before{content:"H6"}:host(limel-markdown.adjust-for-table-cell) pre{margin:0}:host(limel-markdown.adjust-for-table-cell) pre>code{padding:0.125rem;margin:0}:host(limel-markdown.adjust-for-table-cell) dl{margin:0}:host(limel-markdown.adjust-for-table-cell) dl dt,:host(limel-markdown.adjust-for-table-cell) dl dd{padding:0.00625rem 0.125rem}hr{border-top:1px solid rgb(var(--contrast-700))}.MsoNormal{margin:0}';const l=class{constructor(t){e(this,t);this.value=undefined;this.whitelist=undefined}async textChanged(){var e;try{const t=await r(this.value,{forceHardLineBreaks:true,whitelist:(e=this.whitelist)!==null&&e!==void 0?e:[]});this.rootElement.innerHTML=t}catch(e){console.error(e)}}async componentDidLoad(){this.textChanged()}render(){return[t("div",{id:"markdown",ref:e=>this.rootElement=e})]}static get watchers(){return{value:["textChanged"]}}};l.style=o;export{l as limel_markdown};
2
- //# sourceMappingURL=p-691e4e6a.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["markdownCss","Markdown","async","html","markdownToHTML","this","value","forceHardLineBreaks","whitelist","_a","rootElement","innerHTML","error","console","textChanged","render","h","id","ref","el"],"sources":["./src/components/markdown/markdown.scss?tag=limel-markdown&encapsulation=shadow","./src/components/markdown/markdown.tsx"],"sourcesContent":["/**\n* @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;\n* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;\n*/\n\n@import './partial-styles/pre-code';\n@import './partial-styles/headings';\n@import './partial-styles/body-text';\n@import './partial-styles/lists';\n@import './partial-styles/tables';\n@import './partial-styles/blockquotes';\n@import './partial-styles/definition-lists';\n@import './partial-styles/img';\n@import './partial-styles/_adjust-for-table-cell';\n\n// body-text\nhr {\n border-top: 1px solid rgb(var(--contrast-700));\n}\n\n.MsoNormal {\n margin: 0;\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-composite\n * @exampleComponent limel-example-markdown-custom-component\n */\n@Component({\n tag: 'limel-markdown',\n styleUrl: 'markdown.scss',\n shadow: true,\n})\nexport class Markdown {\n /**\n * The input text. Treated as GitHub Flavored Markdown, with the addition\n * that any included HTML will be parsed and rendered as HTML, rather than\n * as text.\n */\n @Prop()\n public value: string;\n\n /**\n * Whitelisted html elements.\n *\n * Any custom element added here will not be sanitized and thus rendered.\n * @alpha\n */\n @Prop()\n public whitelist?: CustomElementDefinition[];\n\n @Watch('value')\n public async textChanged() {\n try {\n const html = await markdownToHTML(this.value, {\n forceHardLineBreaks: true,\n whitelist: this.whitelist ?? [],\n });\n this.rootElement.innerHTML = html;\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error(error);\n }\n }\n\n public async componentDidLoad() {\n this.textChanged();\n }\n\n private rootElement: HTMLDivElement;\n\n public render() {\n return [\n <div\n id=\"markdown\"\n ref={(el) => (this.rootElement = el as HTMLDivElement)}\n />,\n ];\n }\n}\n"],"mappings":"uGAAA,MAAMA,EAAc,26L,MC2BPC,EAAQ,M,uEAmBVC,oB,MACH,IACI,MAAMC,QAAaC,EAAeC,KAAKC,MAAO,CAC1CC,oBAAqB,KACrBC,WAAWC,EAAAJ,KAAKG,aAAS,MAAAC,SAAA,EAAAA,EAAI,KAEjCJ,KAAKK,YAAYC,UAAYR,C,CAC/B,MAAOS,GAELC,QAAQD,MAAMA,E,EAIfV,yBACHG,KAAKS,a,CAKFC,SACH,MAAO,CACHC,EAAA,OACIC,GAAG,WACHC,IAAMC,GAAQd,KAAKK,YAAcS,I"}
@@ -1,2 +0,0 @@
1
- import{r as e,c as r,h as o,H as i,g as t}from"./p-443111b3.js";import{i as s}from"./p-91741e79.js";import{g as a}from"./p-2f777fdb.js";import{g as n}from"./p-e1e25236.js";const d='@charset "UTF-8";*{box-sizing:border-box;min-width:0;min-height:0}:host(limel-card){display:flex;border-radius:var(--card-border-radius, 0.95rem)}section{box-sizing:border-box;display:flex;gap:0.5rem;flex-direction:column;width:100%;height:100%;border-radius:var(--card-border-radius, 0.95rem);border:1px solid rgb(var(--contrast-500));padding:0.25rem;background-color:var(--card-background-color, rgb(var(--contrast-300)))}:host(limel-card[orientation=landscape]) section{flex-direction:row}section:hover{border-color:transparent;background-color:var(--card-background-color--hovered, var(--card-background-color, rgb(var(--contrast-200))))}.body{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem}img{transition:filter 0.6s ease;object-fit:cover;border-radius:calc(var(--card-border-radius, 0.95rem) / 1.4)}:host(limel-card[orientation=portrait]) img{width:100%}:host(limel-card[orientation=landscape]) img{flex-shrink:0;max-width:40%;height:100%}section:hover img,section:focus-visible img{transition-duration:0.2s;filter:saturate(1.3)}limel-markdown{overflow-y:auto;padding:0.5rem 0.75rem}header{flex-shrink:0;display:flex;justify-content:center;gap:0.5rem;padding:0.25rem 0.75rem}:host(limel-card[orientation=landscape]) header{padding-top:0.5rem}header:has(limel-icon){padding-left:0.25rem}header .headings{flex-grow:1;display:flex;flex-direction:column;gap:0.125rem}header limel-icon{flex-shrink:0;width:2rem}header h1{font-size:1.125rem;font-weight:500;color:var(--card-heading-color, rgb(var(--contrast-1100)));letter-spacing:-0.03125rem}header h2{font-size:0.875rem;font-weight:400;color:var(--card-subheading-color, rgb(var(--contrast-1000)))}header h1,header h2{word-break:break-word;hyphens:auto;-webkit-hyphens:auto;margin:0}limel-action-bar{flex-shrink:0;--action-bar-background-color:transparent;margin-left:auto}limel-3d-hover-effect-glow{border-radius:var(--card-border-radius, 0.95rem)}: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)}section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.5}@media (prefers-reduced-motion){section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.2}}: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)}';const c=class{constructor(o){e(this,o);this.actionSelected=r(this,"actionSelected",7);this.handleActionSelect=e=>{e.stopPropagation();if(s(e.detail)){this.actionSelected.emit(e.detail)}};this.heading=undefined;this.subheading=undefined;this.image=undefined;this.icon=undefined;this.value=undefined;this.actions=[];this.clickable=false;this.orientation="portrait"}componentWillLoad(){const{handleMouseEnter:e,handleMouseLeave:r}=n(this.host);this.handleMouseEnter=e;this.handleMouseLeave=r}render(){return o(i,{onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},o("section",{tabindex:this.clickable?0:""},this.renderImage(),o("div",{class:"body"},this.renderHeader(),this.renderSlot(),this.renderValue(),this.renderActionBar()),o("limel-3d-hover-effect-glow",null)))}renderImage(){if(!this.image){return}return o("img",{src:this.image.src,alt:this.image.alt,loading:"lazy"})}renderHeader(){if(!this.heading&&!this.subheading&&!this.icon){return}return o("header",null,this.renderIcon(),o("div",{class:"headings"},this.renderHeading(),this.renderSubheading()))}renderIcon(){var e;const r=a(this.icon);const i=typeof this.icon!=="string"?(e=this.icon)===null||e===void 0?void 0:e.color:undefined;if(!r){return}return o("limel-icon",{style:{color:`${i}`},badge:true,name:r})}renderHeading(){if(!this.heading){return}return o("h1",null,this.heading)}renderSubheading(){if(!this.subheading){return}return o("h2",null,this.subheading)}renderSlot(){return o("slot",{name:"component"})}renderValue(){return o("limel-markdown",{value:this.value})}renderActionBar(){if(!this.actions.length){return}return o("limel-action-bar",{actions:this.actions,onItemSelected:this.handleActionSelect})}get host(){return t(this)}};c.style=d;export{c as limel_card};
2
- //# sourceMappingURL=p-74d3b0ca.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["cardCss","Card","this","handleActionSelect","event","stopPropagation","isItem","detail","actionSelected","emit","componentWillLoad","handleMouseEnter","handleMouseLeave","getMouseEventHandlers","host","render","h","Host","onMouseEnter","onMouseLeave","tabindex","clickable","renderImage","class","renderHeader","renderSlot","renderValue","renderActionBar","image","src","alt","loading","heading","subheading","icon","renderIcon","renderHeading","renderSubheading","getIconName","color","_a","undefined","style","badge","name","value","actions","length","onItemSelected"],"sources":["./src/components/card/card.scss?tag=limel-card&encapsulation=shadow","./src/components/card/card.tsx"],"sourcesContent":["/**\n* @prop --card-heading-color: color of the heading. Defaults to `--contrast-1100`;\n* @prop --card-subheading-color: color of the sub heading. Defaults to `--contrast-1000`;\n* @prop --card-border-radius: border radius of the card. Defaults to `0.95rem`;\n* @prop --card-background-color: background color of the card.\n* @prop --card-background-color--hovered: background color of the card, when hovered.\n*/\n\n@use '../../style/mixins';\n\n$default-border-radius: 0.95rem;\n\n* {\n box-sizing: border-box;\n min-width: 0;\n min-height: 0;\n}\n\n:host(limel-card) {\n display: flex;\n border-radius: var(--card-border-radius, $default-border-radius);\n}\n\nsection {\n box-sizing: border-box;\n\n display: flex;\n gap: 0.5rem;\n\n flex-direction: column;\n :host(limel-card[orientation='landscape']) & {\n flex-direction: row;\n }\n\n width: 100%;\n height: 100%;\n border-radius: var(--card-border-radius, $default-border-radius);\n border: 1px solid rgb(var(--contrast-500));\n\n padding: 0.25rem;\n background-color: var(--card-background-color, rgb(var(--contrast-300)));\n\n &:hover {\n border-color: transparent;\n background-color: var(\n --card-background-color--hovered,\n var(--card-background-color, rgb(var(--contrast-200)))\n );\n }\n}\n\n.body {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\nimg {\n transition: filter 0.6s ease;\n object-fit: cover;\n border-radius: calc(\n var(--card-border-radius, $default-border-radius) / 1.4\n );\n :host(limel-card[orientation='portrait']) & {\n width: 100%;\n }\n\n :host(limel-card[orientation='landscape']) & {\n flex-shrink: 0;\n\n max-width: 40%;\n height: 100%;\n }\n\n section:hover &,\n section:focus-visible & {\n transition-duration: 0.2s;\n filter: saturate(1.3);\n }\n}\n\nlimel-markdown {\n overflow-y: auto;\n padding: 0.5rem 0.75rem;\n}\n\nheader {\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n\n gap: 0.5rem;\n\n padding: 0.25rem 0.75rem;\n :host(limel-card[orientation='landscape']) & {\n padding-top: 0.5rem;\n }\n\n &:has(limel-icon) {\n padding-left: 0.25rem;\n }\n\n .headings {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n }\n\n limel-icon {\n flex-shrink: 0;\n width: 2rem;\n }\n\n h1 {\n font-size: 1.125rem;\n font-weight: 500;\n color: var(--card-heading-color, rgb(var(--contrast-1100)));\n letter-spacing: -0.03125rem; // 0.5px\n }\n\n h2 {\n font-size: 0.875rem;\n font-weight: 400;\n color: var(--card-subheading-color, rgb(var(--contrast-1000)));\n }\n\n h1,\n h2 {\n word-break: break-word;\n hyphens: auto;\n -webkit-hyphens: auto;\n margin: 0;\n }\n}\n\nlimel-action-bar {\n flex-shrink: 0;\n --action-bar-background-color: transparent;\n margin-left: auto;\n}\n\n// The 3D effect\nlimel-3d-hover-effect-glow {\n border-radius: var(--card-border-radius, $default-border-radius);\n}\n\n:host(limel-card) {\n @include mixins.parent-of-the-3d-element;\n}\n\nsection {\n @include mixins.the-3d-element;\n\n :host(limel-card[clickable]) & {\n @include mixins.the-3d-element--clickable;\n }\n}\n","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 <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"],"mappings":"4KAAA,MAAMA,EAAU,uhH,MCoCHC,EAAI,M,wEAoKLC,KAAAC,mBACJC,IAEAA,EAAMC,kBACN,GAAIC,EAAOF,EAAMG,QAAS,CACtBL,KAAKM,eAAeC,KAAKL,EAAMG,O,+HAjIiB,G,eAO5B,M,iBAOmB,U,CAcxCG,oBACH,MAAMC,iBAAEA,EAAgBC,iBAAEA,GAAqBC,EAC3CX,KAAKY,MAETZ,KAAKS,iBAAmBA,EACxBT,KAAKU,iBAAmBA,C,CAGrBG,SACH,OACIC,EAACC,EAAI,CACDC,aAAchB,KAAKS,iBACnBQ,aAAcjB,KAAKU,kBAEnBI,EAAA,WAASI,SAAUlB,KAAKmB,UAAY,EAAI,IACnCnB,KAAKoB,cACNN,EAAA,OAAKO,MAAM,QACNrB,KAAKsB,eACLtB,KAAKuB,aACLvB,KAAKwB,cACLxB,KAAKyB,mBAEVX,EAAA,oC,CAMRM,cACJ,IAAKpB,KAAK0B,MAAO,CACb,M,CAGJ,OAAOZ,EAAA,OAAKa,IAAK3B,KAAK0B,MAAMC,IAAKC,IAAK5B,KAAK0B,MAAME,IAAKC,QAAQ,Q,CAG1DP,eACJ,IAAKtB,KAAK8B,UAAY9B,KAAK+B,aAAe/B,KAAKgC,KAAM,CACjD,M,CAGJ,OACIlB,EAAA,cACKd,KAAKiC,aACNnB,EAAA,OAAKO,MAAM,YACNrB,KAAKkC,gBACLlC,KAAKmC,oB,CAMdF,a,MACJ,MAAMD,EAAOI,EAAYpC,KAAKgC,MAC9B,MAAMK,SACKrC,KAAKgC,OAAS,UAAWM,EAAAtC,KAAKgC,QAAI,MAAAM,SAAA,SAAAA,EAAED,MAAQE,UAEvD,IAAKP,EAAM,CACP,M,CAGJ,OACIlB,EAAA,cACI0B,MAAO,CACHH,MAAO,GAAGA,KAEdI,MAAO,KACPC,KAAMV,G,CAKVE,gBACJ,IAAKlC,KAAK8B,QAAS,CACf,M,CAGJ,OAAOhB,EAAA,UAAKd,KAAK8B,Q,CAGbK,mBACJ,IAAKnC,KAAK+B,WAAY,CAClB,M,CAGJ,OAAOjB,EAAA,UAAKd,KAAK+B,W,CAGbR,aACJ,OAAOT,EAAA,QAAM4B,KAAK,a,CAGdlB,cACJ,OAAOV,EAAA,kBAAgB6B,MAAO3C,KAAK2C,O,CAY/BlB,kBACJ,IAAKzB,KAAK4C,QAAQC,OAAQ,CACtB,M,CAGJ,OACI/B,EAAA,oBACI8B,QAAS5C,KAAK4C,QACdE,eAAgB9C,KAAKC,oB"}