@limetech/lime-elements 38.16.2 → 38.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -0
- package/dist/cjs/limel-breadcrumbs_8.cjs.entry.js +2 -1
- package/dist/cjs/limel-breadcrumbs_8.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-chip_2.cjs.entry.js +4 -2
- package/dist/cjs/limel-chip_2.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-info-tile.cjs.entry.js +5 -3
- package/dist/cjs/limel-info-tile.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-markdown.cjs.entry.js +1 -1
- package/dist/cjs/limel-markdown.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js +1 -1
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-shortcut.cjs.entry.js +4 -2
- package/dist/cjs/limel-shortcut.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-table.cjs.entry.js +1 -5
- package/dist/cjs/limel-table.cjs.entry.js.map +1 -1
- package/dist/cjs/{link-helper-14629490.js → link-helper-9486031c.js} +22 -1
- package/dist/cjs/link-helper-9486031c.js.map +1 -0
- package/dist/collection/components/chip/chip.js +5 -2
- package/dist/collection/components/chip/chip.js.map +1 -1
- package/dist/collection/components/info-tile/info-tile.js +5 -3
- package/dist/collection/components/info-tile/info-tile.js.map +1 -1
- package/dist/collection/components/input-field/input-field.js +2 -1
- package/dist/collection/components/input-field/input-field.js.map +1 -1
- package/dist/collection/components/markdown/markdown.css +37 -12
- package/dist/collection/components/shortcut/shortcut.js +4 -2
- package/dist/collection/components/shortcut/shortcut.js.map +1 -1
- package/dist/collection/components/table/table.js +1 -5
- package/dist/collection/components/table/table.js.map +1 -1
- package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.css +25 -12
- package/dist/collection/global/shared-types/link.types.js.map +1 -1
- package/dist/collection/util/link-helper.js +20 -0
- package/dist/collection/util/link-helper.js.map +1 -1
- package/dist/esm/limel-breadcrumbs_8.entry.js +2 -1
- package/dist/esm/limel-breadcrumbs_8.entry.js.map +1 -1
- package/dist/esm/limel-chip_2.entry.js +4 -2
- package/dist/esm/limel-chip_2.entry.js.map +1 -1
- package/dist/esm/limel-info-tile.entry.js +5 -3
- package/dist/esm/limel-info-tile.entry.js.map +1 -1
- package/dist/esm/limel-markdown.entry.js +1 -1
- package/dist/esm/limel-markdown.entry.js.map +1 -1
- package/dist/esm/limel-prosemirror-adapter.entry.js +1 -1
- package/dist/esm/limel-prosemirror-adapter.entry.js.map +1 -1
- package/dist/esm/limel-shortcut.entry.js +4 -2
- package/dist/esm/limel-shortcut.entry.js.map +1 -1
- package/dist/esm/limel-table.entry.js +1 -5
- package/dist/esm/limel-table.entry.js.map +1 -1
- package/dist/esm/{link-helper-0c4a5c2e.js → link-helper-1522032e.js} +22 -2
- package/dist/esm/link-helper-1522032e.js.map +1 -0
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-0adbd58c.entry.js +2 -0
- package/dist/lime-elements/p-0adbd58c.entry.js.map +1 -0
- package/dist/lime-elements/p-1e7cec06.entry.js +2 -0
- package/dist/lime-elements/p-1e7cec06.entry.js.map +1 -0
- package/dist/lime-elements/{p-dd056e15.entry.js → p-466bf5f4.entry.js} +2 -2
- package/dist/lime-elements/{p-dd056e15.entry.js.map → p-466bf5f4.entry.js.map} +1 -1
- package/dist/lime-elements/{p-fbc07821.entry.js → p-a0186098.entry.js} +14 -14
- package/dist/lime-elements/p-a0186098.entry.js.map +1 -0
- package/dist/lime-elements/p-b0d3099c.entry.js.map +1 -1
- package/dist/lime-elements/p-b9101ec8.entry.js +2 -0
- package/dist/lime-elements/p-b9101ec8.entry.js.map +1 -0
- package/dist/lime-elements/p-cfe06c44.js +2 -0
- package/dist/lime-elements/p-cfe06c44.js.map +1 -0
- package/dist/lime-elements/p-e50680a4.entry.js +2 -0
- package/dist/lime-elements/p-e50680a4.entry.js.map +1 -0
- package/dist/types/global/shared-types/link.types.d.ts +8 -0
- package/dist/types/util/link-helper.d.ts +12 -0
- package/package.json +1 -1
- package/dist/cjs/link-helper-14629490.js.map +0 -1
- package/dist/esm/link-helper-0c4a5c2e.js.map +0 -1
- package/dist/lime-elements/p-19c509c3.js +0 -2
- package/dist/lime-elements/p-19c509c3.js.map +0 -1
- package/dist/lime-elements/p-19e93fb0.entry.js +0 -2
- package/dist/lime-elements/p-19e93fb0.entry.js.map +0 -1
- package/dist/lime-elements/p-237f85c1.entry.js +0 -2
- package/dist/lime-elements/p-237f85c1.entry.js.map +0 -1
- package/dist/lime-elements/p-895ae176.entry.js +0 -2
- package/dist/lime-elements/p-895ae176.entry.js.map +0 -1
- package/dist/lime-elements/p-c30e11ce.entry.js +0 -2
- package/dist/lime-elements/p-c30e11ce.entry.js.map +0 -1
- package/dist/lime-elements/p-fbc07821.entry.js.map +0 -1
|
@@ -48,7 +48,27 @@ function isRelativeLink(input) {
|
|
|
48
48
|
function hasRelativeProtocol(input) {
|
|
49
49
|
return input.startsWith('//');
|
|
50
50
|
}
|
|
51
|
+
/**
|
|
52
|
+
* Returns the appropriate `rel` attribute value for a link.
|
|
53
|
+
*
|
|
54
|
+
* If an explicit `rel` value is provided, it will be used.
|
|
55
|
+
* Otherwise, when `target` is `_blank`, automatically returns
|
|
56
|
+
* `"noopener noreferrer"` for improved security.
|
|
57
|
+
*
|
|
58
|
+
* @param target - The target attribute value (e.g., "_blank", "_self")
|
|
59
|
+
* @param explicitRel - An explicitly provided rel attribute value
|
|
60
|
+
* @returns The rel attribute value to use, or undefined if none needed
|
|
61
|
+
*/
|
|
62
|
+
function getRel(target, explicitRel) {
|
|
63
|
+
if (explicitRel !== undefined) {
|
|
64
|
+
return explicitRel.trim() || undefined;
|
|
65
|
+
}
|
|
66
|
+
if ((target === null || target === void 0 ? void 0 : target.trim().toLowerCase()) === '_blank') {
|
|
67
|
+
return 'noopener noreferrer';
|
|
68
|
+
}
|
|
69
|
+
return undefined;
|
|
70
|
+
}
|
|
51
71
|
|
|
52
|
-
export {
|
|
72
|
+
export { getHref as a, getTarget as b, getRel as g };
|
|
53
73
|
|
|
54
|
-
//# sourceMappingURL=link-helper-
|
|
74
|
+
//# sourceMappingURL=link-helper-1522032e.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"link-helper-1522032e.js","mappings":"SAAgB,OAAO,CAAC,KAAa;EACjC,MAAM,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC;EAC/C,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE;IACf,OAAO,IAAI,CAAC;GACf;EAED,OAAO,eAAe,CAAC,IAAI,CAAC,CAAC;AACjC,CAAC;SAEe,SAAS,CAAC,KAAa;EACnC,MAAM,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;EAC3B,IAAI,cAAc,CAAC,GAAG,CAAC,EAAE;IACrB,OAAO,OAAO,CAAC;GAClB;EAED,OAAO,QAAQ,CAAC;AACpB,CAAC;SAEe,eAAe,CAAC,KAAa;EACzC,IAAI,CAAC,KAAK,EAAE;IACR,OAAO,KAAK,CAAC;GAChB;EAED,OAAO,UAAU,GAAG,KAAK,CAAC;AAC9B,CAAC;AAED,SAAS,OAAO,CAAC,IAAY;EACzB,QACI,gBAAgB,CAAC,IAAI,CAAC;IACtB,cAAc,CAAC,IAAI,CAAC;IACpB,mBAAmB,CAAC,IAAI,CAAC,EAC3B;AACN,CAAC;SAEe,gBAAgB,CAAC,KAAa;EAC1C,MAAM,cAAc,GAAG;IACnB,KAAK;IACL,MAAM;IACN,OAAO;IACP,MAAM;;IAGN,MAAM;;;IAIN,SAAS;GACZ,CAAC;EAEF,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC,aAAa;IACrC,OAAO,KAAK,CAAC,UAAU,CAAC,aAAa,GAAG,KAAK,CAAC,CAAC;GAClD,CAAC,CAAC;AACP,CAAC;AAED,SAAS,cAAc,CAAC,KAAa;EACjC,IAAI,mBAAmB,CAAC,KAAK,CAAC,EAAE;IAC5B,OAAO,KAAK,CAAC;GAChB;EAED,OAAO,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;AAC1D,CAAC;AAED,SAAS,mBAAmB,CAAC,KAAa;EACtC,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;AAClC,CAAC;AAED;;;;;;;;;;;SAWgB,MAAM,CAAC,MAAsB,EAAE,WAA2B;EACtE,IAAI,WAAW,KAAK,SAAS,EAAE;IAC3B,OAAO,WAAW,CAAC,IAAI,EAAE,IAAI,SAAS,CAAC;GAC1C;EAED,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,GAAG,WAAW,EAAE,MAAK,QAAQ,EAAE;IAC3C,OAAO,qBAAqB,CAAC;GAChC;EAED,OAAO,SAAS,CAAC;AACrB;;;;","names":[],"sources":["./src/util/link-helper.ts"],"sourcesContent":["export function getHref(value: string) {\n const href = value ? String(value.trim()) : '';\n if (isValid(href)) {\n return href;\n }\n\n return prependProtocol(href);\n}\n\nexport function getTarget(value: string) {\n const url = getHref(value);\n if (isRelativeLink(url)) {\n return '_self';\n }\n\n return '_blank';\n}\n\nexport function prependProtocol(input: string) {\n if (!input) {\n return input;\n }\n\n return 'https://' + input;\n}\n\nfunction isValid(href: string) {\n return (\n hasKnownProtocol(href) ||\n isRelativeLink(href) ||\n hasRelativeProtocol(href)\n );\n}\n\nexport function hasKnownProtocol(input: string) {\n const knownProtocols = [\n 'ftp',\n 'ftps',\n 'https',\n 'http',\n\n // `file` may or may not work, due to cross-origin restrictions and browser settings.\n 'file',\n\n // m-files is a protocol used by the M-Files desktop app or something.\n // It's not a web protocol, but it allows open M-Files links in their app.\n 'm-files',\n ];\n\n return knownProtocols.some((knownProtocol) => {\n return input.startsWith(knownProtocol + '://');\n });\n}\n\nfunction isRelativeLink(input: string) {\n if (hasRelativeProtocol(input)) {\n return false;\n }\n\n return input.startsWith('/') || input.startsWith('#');\n}\n\nfunction hasRelativeProtocol(input: string) {\n return input.startsWith('//');\n}\n\n/**\n * Returns the appropriate `rel` attribute value for a link.\n *\n * If an explicit `rel` value is provided, it will be used.\n * Otherwise, when `target` is `_blank`, automatically returns\n * `\"noopener noreferrer\"` for improved security.\n *\n * @param target - The target attribute value (e.g., \"_blank\", \"_self\")\n * @param explicitRel - An explicitly provided rel attribute value\n * @returns The rel attribute value to use, or undefined if none needed\n */\nexport function getRel(target?: string | null, explicitRel?: string | null) {\n if (explicitRel !== undefined) {\n return explicitRel.trim() || undefined;\n }\n\n if (target?.trim().toLowerCase() === '_blank') {\n return 'noopener noreferrer';\n }\n\n return undefined;\n}\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-288f0842.js";export{s as setNonce}from"./p-288f0842.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-641360ca",[[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-19d0a98b",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-d2272b5f",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-c0d37aa9",[[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-2c7e5deb",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-e2cf9bc3",[[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-28a6fec9",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-ad5542bd",[[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-d05ebeb1",[[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-06138e7c",[[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-45787d1c",[[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-5e325fee",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-36f6b3e1",[[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-33d3de89",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"icon":[1],"invalid":[516],"actions":[16],"language":[513]}]]],["p-02197b98",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-19e93fb0",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16],"hasPrimarySlot":[32]}]]],["p-b0d3099c",[[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-c30e11ce",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-49432af9",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-56de9524",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-4eae90f7",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-1e4ca584",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-6c2fdad7",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-455d18b1",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-76b845b0",[[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-cb7b50e6",[[1,"limel-ai-avatar",{"isThinking":[516,"is-thinking"],"language":[513]}]]],["p-36c19a79",[[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-5e68e5f7",[[1,"limel-config",{"config":[16]}]]],["p-4ed15eb7",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-d4708d14",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-69b6119b",[[1,"limel-grid"]]],["p-19688e05",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-dd056e15",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"ui":[1],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-da37b2af",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-8b61a573",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-82290560",[[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-ab6ba00d",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-21086cea",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-93d5ebeb",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-3edf0f2c",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-b10b5050",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-8347afc4",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-a0a02fb7",[[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[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-5fd7abb8",[[17,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-78d5ba18",[[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-10d1256b",[[1,"limel-3d-hover-effect-glow"]]],["p-895ae176",[[1,"limel-markdown",{"value":[1],"whitelist":[16],"lazyLoadImages":[4,"lazy-load-images"]}]]],["p-7afca725",[[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]}]]],["p-a626506d",[[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-fbc07821",[[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"],"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]}],[4,"limel-notched-outline",{"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"label":[513],"labelId":[513,"label-id"],"hasValue":[516,"has-value"],"hasLeadingIcon":[516,"has-leading-icon"],"hasFloatingLabel":[516,"has-floating-label"]}]]],["p-237f85c1",[[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-5ded9529",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-30460677",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-d47eeb6f",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"],"overFlowIcon":[16]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-4fbdc58c",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"language":[513],"accessibleLabel":[513,"accessible-label"],"layout":[513],"collapsible":[516],"openDirection":[513,"open-direction"],"overflowCutoff":[32],"actionBarIsShrunk":[32]}]]],["p-9cec73a7",[[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-288f0842.js";export{s as setNonce}from"./p-288f0842.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-641360ca",[[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-19d0a98b",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-d2272b5f",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-c0d37aa9",[[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-2c7e5deb",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-e2cf9bc3",[[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-28a6fec9",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-ad5542bd",[[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-d05ebeb1",[[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-06138e7c",[[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-45787d1c",[[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-5e325fee",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-36f6b3e1",[[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-33d3de89",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"icon":[1],"invalid":[516],"actions":[16],"language":[513]}]]],["p-02197b98",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-0adbd58c",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16],"hasPrimarySlot":[32]}]]],["p-b0d3099c",[[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-b9101ec8",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-49432af9",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-56de9524",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-4eae90f7",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-1e4ca584",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-6c2fdad7",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-455d18b1",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-76b845b0",[[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-cb7b50e6",[[1,"limel-ai-avatar",{"isThinking":[516,"is-thinking"],"language":[513]}]]],["p-36c19a79",[[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-5e68e5f7",[[1,"limel-config",{"config":[16]}]]],["p-4ed15eb7",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-d4708d14",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-69b6119b",[[1,"limel-grid"]]],["p-19688e05",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-466bf5f4",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"ui":[1],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-da37b2af",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-8b61a573",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-82290560",[[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-ab6ba00d",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-21086cea",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-93d5ebeb",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-3edf0f2c",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-b10b5050",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-8347afc4",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-a0a02fb7",[[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[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-5fd7abb8",[[17,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-78d5ba18",[[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-10d1256b",[[1,"limel-3d-hover-effect-glow"]]],["p-1e7cec06",[[1,"limel-markdown",{"value":[1],"whitelist":[16],"lazyLoadImages":[4,"lazy-load-images"]}]]],["p-7afca725",[[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]}]]],["p-a626506d",[[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-a0186098",[[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"],"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]}],[4,"limel-notched-outline",{"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"label":[513],"labelId":[513,"label-id"],"hasValue":[516,"has-value"],"hasLeadingIcon":[516,"has-leading-icon"],"hasFloatingLabel":[516,"has-floating-label"]}]]],["p-e50680a4",[[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-5ded9529",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-30460677",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-d47eeb6f",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"],"overFlowIcon":[16]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-4fbdc58c",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"language":[513],"accessibleLabel":[513,"accessible-label"],"layout":[513],"collapsible":[516],"openDirection":[513,"open-direction"],"overflowCutoff":[32],"actionBarIsShrunk":[32]}]]],["p-9cec73a7",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]]]'),e)));
|
|
2
2
|
//# sourceMappingURL=lime-elements.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as n,H as i,g as o}from"./p-288f0842.js";import{g as t}from"./p-e1e25236.js";import{g as r}from"./p-cfe06c44.js";const s="@charset \"UTF-8\";\n/**\n * Note! This file is exported to `dist/scss/` in the published\n * node module, for consumer projects to import.\n * That means this file cannot import from any file that isn't\n * also exported, keeping the same relative path.\n *\n * Or, just don't import anything, that works too.\n */\n/**\n* This can be used on a trigger element that opens a dropdown menu or a popover.\n*/\n/**\n * This mixin will mask out the content that is close to\n * the edges of a scrollable area.\n * - If the scrollable content has `overflow-y`, use `vertically`\n * as an argument for `$direction`.\n - If the scrollable content has `overflow-x`, use `horizontally`\n * as an argument for `$direction`.\n *\n * For the visual effect to work smoothly, we need to make sure that\n * the size of the fade-out edge effect is the same as the\n * internal paddings of the scrollable area. Otherwise, content of a\n * scrollable area that does not have a padding will fade out before\n * any scrolling has been done.\n * This is why this mixin already adds paddings, which automatically\n * default to the size of the fade-out effect.\n * This size defaults to `1rem`, but to override the size use\n * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`\n * when `vertically` argument is set, and use\n * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`\n * when `horizontally` argument is set.\n * Of course you can also programmatically increase and decrease the\n * size of these variables for each edge, based on the amount of\n * scrolling that has been done by the user. In this case, make sure\n * to add a custom padding where the mixin is used, to override\n * the paddings that are automatically added by the mixin in the\n * compiled CSS code.\n */\n/**\n* This mixin will add an animated underline to the bottom of an `a` elements.\n* Note that you may need to add `all: unset;` –depending on your use case–\n* before using this mixin.\n*/\n/**\n* This mixin creates a cross-browser font stack.\n* - `sans-serif` can be used for the UI of the components.\n* - `monospace` can be used for code.\n*\n* ⚠️ If we change the font stacks, we need to update\n* 1. the consumer documentation in `README.md`, and\n* 2. the CSS variables of `--kompendium-example-font-family`\n* in the `<style>` tag of `index.html`.\n*/\n/**\n* This mixin is a hack, using old CSS syntax\n* to enable you to truncate a piece of text,\n* after a certain number of lines.\n*/\n/**\n * The breakpoints below are used to create responsive designs\n * in Lime's products. Therefore, they are here to get distributed\n * to all components in other private repos, which rely on this `mixins`\n * file, to create consistent styles.\n *\n * :::important\n * In very rare cases you should used media queries!\n * Nowadays, there are many better ways of achieving responsive design\n * without media queries. For example, using CSS Grid, Flexbox, and their features.\n * :::\n */\n/**\n * Media query mixins for responsive design based on screen width.\n * Note that these mixins do not detect the device type!\n */\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n --badge-text-color: var(\n --info-tile-badge-text-color,\n rgb(var(--color-white))\n );\n --badge-background-color: var(\n --info-tile-badge-background-color,\n rgb(var(--color-red-default))\n );\n --circular-progress-text-color: var(\n --info-tile-progress-text-color,\n var(--info-tile-text-color)\n );\n --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n --circular-progress-background-color: var(\n --info-tile-progress-background-color,\n var(--info-tile-background-color)\n );\n --label-min-size: 0.75rem;\n --label-preferred-size: 6cqw;\n --label-max-size: 1rem;\n --value-min-size: 1rem;\n --value-preferred-size: 20cqw;\n --value-max-size: 4rem;\n --suffix-prefix-min-size: 0.75rem;\n --suffix-prefix-preferred-size: 8cqw;\n --suffix-prefix-max-size: 1.5rem;\n --icon-min-size: 2rem;\n --icon-preferred-size: 60cqh;\n --icon-max-size: calc(100cqw - 0.5rem);\n container-type: size;\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n}\n:host(limel-info-tile) * {\n box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\na {\n all: unset;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-start;\n height: 100%;\n width: 100%;\n flex-grow: 1;\n padding: 0.25rem 1rem 0.5rem 1rem;\n border-radius: var(--info-tile-border-radius, 1rem);\n background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\n\n:host ::slotted([slot=primary]) {\n width: 100%;\n height: 100%;\n}\n\n.icon {\n z-index: 1;\n position: absolute;\n top: 0.5rem;\n right: 0.75rem;\n padding: 0.25rem;\n aspect-ratio: 1/1;\n color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n border-radius: 0;\n height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n .icon {\n width: max(10%, 3rem);\n }\n}\n:host(.has-primary-slot-content) .icon, a:has(limel-circular-progress) .icon {\n top: unset;\n bottom: 0.5rem;\n --icon-min-size: 1.5rem;\n --icon-preferred-size: 20cqh;\n}\n\nslot[name=primary] {\n display: block;\n aspect-ratio: 1;\n width: min(var(--icon-preferred-size), var(--icon-max-size));\n}\n\n.progress,\nslot[name=primary] {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n}\n\n.progress {\n --circular-progress-size: min(\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n}\n@supports not (container-type: size) {\n .progress {\n --circular-progress-size: initial;\n }\n}\n\n.label {\n z-index: 1;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n line-height: 1.2;\n font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n .label {\n font-size: 0.875rem;\n }\n}\n\nlimel-badge {\n position: absolute;\n top: -0.25rem;\n right: -0.25rem;\n}\n\nlimel-linear-progress {\n --lime-primary-color: var(--info-tile-text-color);\n position: absolute;\n inset: auto 0 0 0;\n}\n\n.value-group {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n display: flex;\n}\n\n.prefix,\n.suffix {\n font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n opacity: 0.7;\n}\n@supports not (container-type: size) {\n .prefix,\n .suffix {\n font-size: 0.75rem;\n }\n}\n\n.prefix {\n align-self: flex-start;\n line-height: normal;\n transform: translateY(40%);\n}\n\n.value {\n transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n transform-origin: left;\n transform: translate3d(0, 0, 0) scale(1);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: bold;\n line-height: normal;\n font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n .value {\n font-size: 1.5rem;\n }\n}\n:host(limel-info-tile[loading]) .value {\n opacity: 0.3;\n transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n .progress,\n slot[name=primary] {\n top: 0.25rem;\n right: 0.25rem;\n }\n a {\n padding: 0.375rem;\n gap: 0.125rem;\n }\n}\n@container (width < 18.75rem) {\n .progress,\n slot[name=primary] {\n top: 0.5rem;\n right: 0.5rem;\n }\n .icon {\n top: 0.25rem;\n right: 0.5rem;\n }\n :host(.has-primary-slot-content) .icon, a:has(limel-circular-progress) .icon {\n right: 0.25rem;\n bottom: 0.25rem;\n }\n}\n@container (width < 40.5rem) {\n .value {\n --value-preferred-size: 13cqw;\n }\n .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n --value-preferred-size: 20cqw;\n }\n .value.ch-5 {\n --value-preferred-size: 18cqw;\n }\n .value.ch-6 {\n --value-preferred-size: 17cqw;\n }\n .value.ch-7 {\n --value-preferred-size: 16cqw;\n }\n .value.ch-8 {\n --value-preferred-size: 15cqw;\n }\n .value.ch-9 {\n --value-preferred-size: 14cqw;\n }\n}\n@container (height > 8rem) {\n a {\n padding-top: 0.75rem;\n padding-bottom: 1rem;\n }\n}\n@container (height < 8rem) and (width > 8rem) {\n .value {\n --value-preferred-size: 32cqh !important;\n }\n .suffix,\n .prefix {\n --suffix-prefix-preferred-size: 16cqh !important;\n }\n}\n@container (height > 18.75rem) {\n .progress,\n slot[name=primary],\n .icon {\n position: relative;\n top: unset;\n right: unset;\n }\n a {\n align-items: center;\n justify-content: center;\n }\n .label {\n text-align: center;\n }\n :host(.has-primary-slot-content) .icon,\n a:has(limel-circular-progress) .icon {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n --icon-max-size: 3rem;\n }\n}\nlimel-3d-hover-effect-glow {\n border-radius: var(--info-tile-border-radius, 1rem);\n}\n\n:host(limel-info-tile) {\n isolation: isolate;\n transform-style: preserve-3d;\n perspective: 1000px;\n}\n@media (prefers-reduced-motion) {\n :host(limel-info-tile) {\n perspective: 2000px;\n }\n}\n\na {\n position: relative;\n transition-duration: 0.8s;\n transition-property: transform, box-shadow, background-color;\n transition-timing-function: ease-out;\n transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n}\na:focus {\n outline: none;\n}\na:hover, a:focus, a:focus-visible, a:focus-within {\n will-change: background-color, box-shadow, transform;\n}\na:hover, a:focus, a:focus-visible, a:active {\n transition-duration: 0.2s;\n}\na:hover, a:focus-visible {\n box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na:hover {\n transform: scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d));\n}\na:focus-visible {\n outline: none;\n transform: scale3d(1.01, 1.01, 1.01);\n}\na:hover limel-3d-hover-effect-glow {\n --limel-3d-hover-effect-glow-opacity: 0.5;\n}\n@media (prefers-reduced-motion) {\n a:hover limel-3d-hover-effect-glow {\n --limel-3d-hover-effect-glow-opacity: 0.2;\n }\n}\na.is-clickable {\n cursor: pointer;\n box-shadow: var(--button-shadow-normal);\n}\na.is-clickable:hover, a.is-clickable:focus-visible {\n box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na.is-clickable:active {\n transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n box-shadow: var(--button-shadow-pressed);\n}\na.is-clickable:focus-visible {\n box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);\n}\na.is-clickable:focus-visible:active {\n box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);\n}";const a=class{constructor(i){e(this,i);this.renderPrefix=()=>{if(this.prefix){return n("span",{class:"prefix"},this.prefix)}};this.renderValue=()=>{var e;const i=((e=this.value)!==null&&e!==void 0?e:"").toString().length;if(!this.value&&this.loading){return n("span",{class:"value"},"···")}if(this.value){return n("span",{class:{value:true,[`ch-${i}`]:true}},this.value)}};this.renderSuffix=()=>{if(this.suffix){return n("span",{class:"suffix"},this.suffix)}};this.renderIcon=()=>{if(this.icon){return n("limel-icon",{class:"icon",name:this.icon})}};this.updateHasPrimarySlotContent=e=>{var n;const i=(n=e===null||e===void 0?void 0:e.target)!==null&&n!==void 0?n:this.host.shadowRoot.querySelector('slot[name="primary"]');this.hasPrimarySlot=i&&i.assignedElements().length>0};this.renderProgress=()=>{var e,i;if(this.hasPrimarySlot){return}if(!((e=this.progress)===null||e===void 0?void 0:e.value)&&((i=this.progress)===null||i===void 0?void 0:i.value)!==0){return}return n("limel-circular-progress",{class:"progress",prefix:this.progress.prefix,value:this.progress.value,suffix:this.progress.suffix,maxValue:this.progress.maxValue,displayPercentageColors:this.progress.displayPercentageColors})};this.renderLabel=()=>{if(this.label){return n("span",{class:"label"},this.label)}};this.renderNotification=()=>{if(this.badge){return n("limel-badge",{label:this.badge})}};this.renderSpinner=()=>{if(this.loading){return n("limel-linear-progress",{indeterminate:true})}};this.value=undefined;this.icon=undefined;this.label=null;this.prefix=undefined;this.suffix=undefined;this.disabled=false;this.badge=undefined;this.loading=false;this.link=undefined;this.progress=undefined;this.hasPrimarySlot=false}componentWillLoad(){const{handleMouseEnter:e,handleMouseLeave:n}=t(this.host);this.handleMouseEnter=e;this.handleMouseLeave=n;this.updateHasPrimarySlotContent()}render(){var e,o,t,s,a,l,c,h,d,f;const u=this.checkProps(this===null||this===void 0?void 0:this.prefix)+this.value+" "+this.checkProps(this===null||this===void 0?void 0:this.suffix)+this.checkProps(this===null||this===void 0?void 0:this.label)+". "+this.checkProps((e=this===null||this===void 0?void 0:this.progress)===null||e===void 0?void 0:e.prefix)+this.checkProps((o=this===null||this===void 0?void 0:this.progress)===null||o===void 0?void 0:o.value)+this.checkProps((t=this===null||this===void 0?void 0:this.progress)===null||t===void 0?void 0:t.suffix)+this.checkProps((s=this===null||this===void 0?void 0:this.link)===null||s===void 0?void 0:s.title);const p=!this.disabled?(a=this.link)===null||a===void 0?void 0:a.href:"#";const m=r((l=this.link)===null||l===void 0?void 0:l.target,(c=this.link)===null||c===void 0?void 0:c.rel);return n(i,{onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,class:{"has-primary-slot-content":this.hasPrimarySlot}},n("a",{title:(h=this.link)===null||h===void 0?void 0:h.title,href:p,target:(d=this.link)===null||d===void 0?void 0:d.target,rel:m,tabindex:"0","aria-label":u,"aria-disabled":this.disabled,"aria-busy":this.loading?"true":"false","aria-live":"polite",class:{"is-clickable":!!((f=this.link)===null||f===void 0?void 0:f.href)&&!this.disabled}},this.renderIcon(),this.renderProgress(),n("slot",{name:"primary",onSlotchange:this.updateHasPrimarySlotContent}),n("div",{class:"value-group"},this.renderPrefix(),n("div",{class:"value-and-suffix"},this.renderValue(),this.renderSuffix()),this.renderSpinner()),this.renderLabel(),n("limel-3d-hover-effect-glow",null)),this.renderNotification())}checkProps(e){return!e?"":e+" "}get host(){return o(this)}};a.style=s;export{a as limel_info_tile};
|
|
2
|
+
//# sourceMappingURL=p-0adbd58c.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["infoTileCss","InfoTile","this","renderPrefix","prefix","h","class","renderValue","characterCount","_a","value","toString","length","loading","renderSuffix","suffix","renderIcon","icon","name","updateHasPrimarySlotContent","e","slot","target","host","shadowRoot","querySelector","hasPrimarySlot","assignedElements","renderProgress","progress","_b","maxValue","displayPercentageColors","renderLabel","label","renderNotification","badge","renderSpinner","indeterminate","componentWillLoad","handleMouseEnter","handleMouseLeave","getMouseEventHandlers","render","extendedAriaLabel","checkProps","_c","_d","link","title","disabled","_e","href","rel","getRel","_f","_g","Host","onMouseEnter","onMouseLeave","_h","_j","tabindex","_k","onSlotchange","propValue"],"sources":["./src/components/info-tile/info-tile.scss?tag=limel-info-tile&encapsulation=shadow","./src/components/info-tile/info-tile.tsx"],"sourcesContent":["/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n\n@use '../../style/mixins';\n\n:host(limel-info-tile) {\n --badge-text-color: var(\n --info-tile-badge-text-color,\n rgb(var(--color-white))\n );\n --badge-background-color: var(\n --info-tile-badge-background-color,\n rgb(var(--color-red-default))\n );\n\n --circular-progress-text-color: var(\n --info-tile-progress-text-color,\n var(--info-tile-text-color)\n );\n --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n --circular-progress-background-color: var(\n --info-tile-progress-background-color,\n var(--info-tile-background-color)\n );\n\n --label-min-size: 0.75rem;\n --label-preferred-size: 6cqw;\n --label-max-size: 1rem;\n\n --value-min-size: 1rem;\n --value-preferred-size: 20cqw;\n --value-max-size: 4rem;\n\n --suffix-prefix-min-size: 0.75rem;\n --suffix-prefix-preferred-size: 8cqw;\n --suffix-prefix-max-size: 1.5rem;\n\n --icon-min-size: 2rem;\n --icon-preferred-size: 60cqh;\n --icon-max-size: calc(100cqw - 0.5rem);\n\n container-type: size;\n position: relative;\n display: flex;\n\n width: 100%;\n height: 100%;\n\n * {\n box-sizing: border-box;\n }\n}\n\n:host(limel-info-tile[disabled]) {\n a {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}\n\na {\n all: unset;\n overflow: hidden;\n\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-start;\n\n height: 100%;\n width: 100%;\n flex-grow: 1;\n\n padding: 0.25rem 1rem 0.5rem 1rem;\n border-radius: var(--info-tile-border-radius, 1rem);\n background-color: var(\n --info-tile-background-color,\n var(--lime-elevated-surface-background-color)\n );\n}\n\n:host ::slotted([slot='primary']) {\n width: 100%;\n height: 100%;\n}\n\n.icon {\n z-index: 1;\n position: absolute;\n top: 0.5rem;\n right: 0.75rem;\n padding: 0.25rem;\n\n aspect-ratio: 1/1;\n\n color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n\n border-radius: 0;\n height: clamp(\n var(--icon-min-size),\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n\n @supports not (container-type: size) {\n width: max(10%, 3rem);\n }\n\n :host(.has-primary-slot-content) &,\n a:has(limel-circular-progress) & {\n top: unset;\n bottom: 0.5rem;\n --icon-min-size: 1.5rem;\n --icon-preferred-size: 20cqh;\n }\n}\n\nslot[name='primary'] {\n display: block;\n aspect-ratio: 1;\n width: min(var(--icon-preferred-size), var(--icon-max-size));\n}\n\n.progress,\nslot[name='primary'] {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n}\n\n.progress {\n --circular-progress-size: min(\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n @supports not (container-type: size) {\n --circular-progress-size: initial;\n }\n}\n\n.label {\n z-index: 1;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n\n line-height: 1.2;\n font-size: clamp(\n var(--label-min-size),\n var(--label-preferred-size),\n var(--label-max-size)\n );\n @supports not (container-type: size) {\n font-size: 0.875rem;\n }\n}\n\nlimel-badge {\n position: absolute;\n top: -0.25rem;\n right: -0.25rem;\n}\n\nlimel-linear-progress {\n --lime-primary-color: var(--info-tile-text-color);\n position: absolute;\n inset: auto 0 0 0;\n}\n\n.value-group {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n text-shadow:\n 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))),\n 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n display: flex;\n}\n\n.prefix,\n.suffix {\n font-size: clamp(\n var(--suffix-prefix-min-size),\n var(--suffix-prefix-preferred-size),\n var(--suffix-prefix-max-size)\n );\n opacity: 0.7;\n\n @supports not (container-type: size) {\n font-size: 0.75rem;\n }\n}\n\n.prefix {\n align-self: flex-start;\n line-height: normal;\n transform: translateY(40%);\n}\n\n.value {\n transition:\n opacity 0.2s ease,\n transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n transform-origin: left;\n transform: translate3d(0, 0, 0) scale(1);\n\n @include mixins.truncate-text;\n font-weight: bold;\n line-height: normal;\n\n font-size: clamp(\n var(--value-min-size),\n var(--value-preferred-size),\n var(--value-max-size)\n );\n @supports not (container-type: size) {\n font-size: 1.5rem;\n }\n\n :host(limel-info-tile[loading]) & {\n opacity: 0.3;\n transform: translate3d(0, 0, 0) scale(0.9);\n }\n}\n\n.suffix {\n transform: translateY(10%);\n}\n\n$xs: 8rem; //128px:\n$s: 18.75rem; //300px\n$m: 40.5rem; //648px\n$l: 62.5rem; //1000px\n\n@container (width < #{$xs}) {\n .progress,\n slot[name='primary'] {\n top: 0.25rem;\n right: 0.25rem;\n }\n a {\n padding: 0.375rem;\n gap: 0.125rem;\n }\n}\n\n@container (width < #{$s}) {\n .progress,\n slot[name='primary'] {\n top: 0.5rem;\n right: 0.5rem;\n }\n .icon {\n top: 0.25rem;\n right: 0.5rem;\n\n :host(.has-primary-slot-content) &,\n a:has(limel-circular-progress) & {\n right: 0.25rem;\n bottom: 0.25rem;\n }\n }\n}\n\n@container (width < #{$m}) {\n .value {\n &.ch-1,\n &.ch-2,\n &.ch-3,\n &.ch-4 {\n --value-preferred-size: 20cqw;\n }\n &.ch-5 {\n --value-preferred-size: 18cqw;\n }\n &.ch-6 {\n --value-preferred-size: 17cqw;\n }\n &.ch-7 {\n --value-preferred-size: 16cqw;\n }\n &.ch-8 {\n --value-preferred-size: 15cqw;\n }\n &.ch-9 {\n --value-preferred-size: 14cqw;\n }\n --value-preferred-size: 13cqw;\n }\n}\n\n@container (height > #{$xs}) {\n a {\n padding-top: 0.75rem;\n padding-bottom: 1rem;\n }\n}\n\n@container (height < #{$xs}) and (width > #{$xs}) {\n .value {\n --value-preferred-size: 32cqh !important;\n }\n .suffix,\n .prefix {\n --suffix-prefix-preferred-size: 16cqh !important;\n }\n}\n\n@container (height > #{$s}) {\n .progress,\n slot[name='primary'],\n .icon {\n position: relative;\n top: unset;\n right: unset;\n }\n a {\n align-items: center;\n justify-content: center;\n }\n .label {\n text-align: center;\n // -webkit-line-clamp: 3;\n }\n\n :host(.has-primary-slot-content),\n a:has(limel-circular-progress) {\n .icon {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n --icon-max-size: 3rem;\n }\n }\n}\n\n// The 3D effect\nlimel-3d-hover-effect-glow {\n border-radius: var(--info-tile-border-radius, 1rem);\n}\n\n:host(limel-info-tile) {\n @include mixins.parent-of-the-3d-element;\n}\n\na {\n @include mixins.the-3d-element;\n\n &.is-clickable {\n @include mixins.the-3d-element--clickable;\n }\n}\n","import { Component, Prop, h, Element, Host, State } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\nimport { getRel } from '../../util/link-helper';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n *\n * If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n *\n * @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-primary-slot\n * @exampleComponent limel-example-info-tile-styling\n */\n@Component({\n tag: 'limel-info-tile',\n shadow: true,\n styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n /**\n * A piece of text or number that is the main piece of information\n * which the component is intended to visualize.\n */\n @Prop({ reflect: true })\n public value: number | string;\n\n /**\n * Name of icon for the info tile.\n */\n @Prop()\n public icon?: string;\n\n /**\n * The text to show below the info tile. Long labels will be truncated.\n */\n @Prop({ reflect: true })\n public label?: string = null;\n\n /**\n * A string of text that is visually placed before the value.\n */\n @Prop({ reflect: true })\n public prefix?: string;\n\n /**\n * A string of text that is visually placed after the value.\n */\n @Prop({ reflect: true })\n public suffix?: string;\n\n /**\n * Set to `true` if info tile is disabled.\n */\n @Prop({ reflect: true })\n public disabled? = false;\n\n /**\n * If supplied, the info tile will display a notification badge.\n */\n @Prop({ reflect: true })\n public badge?: number | string;\n\n /**\n * Set to `true` to put the component in the `loading` state.\n * This does _not_ disable the link. To do so, the\n * `disabled` property should be set to `true` as well.\n */\n @Prop({ reflect: true })\n public loading? = false;\n\n /**\n * If supplied, the info tile will be a clickable link.\n *\n * Supplying a value also adds an elevated effect using a shadow,\n * as well as `cursor: pointer`, which appears on hover.\n * While we strongly recommend supplying a link whenever the\n * component should act as a link, if this is not possible, and\n * you need to provide interaction through a click handler,\n * you can still get the correct styling by supplying a `Link`\n * object with the `href` property set to `'#'`.\n */\n @Prop()\n public link?: Link;\n\n /**\n * Properties of the optional circular progress bar.\n *\n * Defaults:\n * - `maxValue`: 100\n * - `suffix`: %\n * - `displayPercentageColors`: false\n *\n * Colors change with intervals of 10 %.\n */\n @Prop()\n public progress?: InfoTileProgress;\n\n @Element()\n private host: HTMLElement;\n\n /**\n * `true` when something is assigned to the `primary` slot\n */\n @State()\n private hasPrimarySlot = false;\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 this.updateHasPrimarySlotContent();\n }\n\n public render() {\n const extendedAriaLabel =\n this.checkProps(this?.prefix) +\n this.value +\n ' ' +\n this.checkProps(this?.suffix) +\n this.checkProps(this?.label) +\n '. ' +\n this.checkProps(this?.progress?.prefix) +\n this.checkProps(this?.progress?.value) +\n this.checkProps(this?.progress?.suffix) +\n this.checkProps(this?.link?.title);\n\n const link = !this.disabled ? this.link?.href : '#';\n const rel = getRel(this.link?.target, this.link?.rel);\n\n return (\n <Host\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n class={{ 'has-primary-slot-content': this.hasPrimarySlot }}\n >\n <a\n title={this.link?.title}\n href={link}\n target={this.link?.target}\n rel={rel}\n tabindex=\"0\"\n aria-label={extendedAriaLabel}\n aria-disabled={this.disabled}\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n class={{\n 'is-clickable': !!this.link?.href && !this.disabled,\n }}\n >\n {this.renderIcon()}\n {this.renderProgress()}\n <slot\n name=\"primary\"\n onSlotchange={this.updateHasPrimarySlotContent}\n />\n <div class=\"value-group\">\n {this.renderPrefix()}\n <div class=\"value-and-suffix\">\n {this.renderValue()}\n {this.renderSuffix()}\n </div>\n {this.renderSpinner()}\n </div>\n {this.renderLabel()}\n <limel-3d-hover-effect-glow />\n </a>\n {this.renderNotification()}\n </Host>\n );\n }\n\n private checkProps(propValue) {\n return !propValue ? '' : propValue + ' ';\n }\n\n private renderPrefix = () => {\n if (this.prefix) {\n return <span class=\"prefix\">{this.prefix}</span>;\n }\n };\n\n private renderValue = () => {\n const characterCount = (this.value ?? '').toString().length;\n\n if (!this.value && this.loading) {\n return <span class=\"value\">···</span>;\n }\n\n if (this.value) {\n return (\n <span\n class={{\n value: true,\n [`ch-${characterCount}`]: true,\n }}\n >\n {this.value}\n </span>\n );\n }\n };\n\n private renderSuffix = () => {\n if (this.suffix) {\n return <span class=\"suffix\">{this.suffix}</span>;\n }\n };\n\n private renderIcon = () => {\n if (this.icon) {\n return <limel-icon class=\"icon\" name={this.icon} />;\n }\n };\n\n private updateHasPrimarySlotContent = (e?: Event) => {\n const slot =\n (e?.target as HTMLSlotElement) ??\n this.host.shadowRoot.querySelector('slot[name=\"primary\"]');\n this.hasPrimarySlot = slot && slot.assignedElements().length > 0;\n };\n\n private renderProgress = () => {\n if (this.hasPrimarySlot) {\n return;\n }\n\n if (!this.progress?.value && this.progress?.value !== 0) {\n return;\n }\n\n return (\n <limel-circular-progress\n class=\"progress\"\n prefix={this.progress.prefix}\n value={this.progress.value}\n suffix={this.progress.suffix}\n maxValue={this.progress.maxValue}\n displayPercentageColors={this.progress.displayPercentageColors}\n />\n );\n };\n\n private renderLabel = () => {\n if (this.label) {\n return <span class=\"label\">{this.label}</span>;\n }\n };\n\n private renderNotification = () => {\n if (this.badge) {\n return <limel-badge label={this.badge} />;\n }\n };\n\n private renderSpinner = () => {\n if (this.loading) {\n return <limel-linear-progress indeterminate={true} />;\n }\n };\n}\n"],"mappings":"iIAAA,MAAMA,EAAc,mhZ,MC2BPC,EAAQ,M,yBAkKTC,KAAAC,aAAe,KACnB,GAAID,KAAKE,OAAQ,CACb,OAAOC,EAAA,QAAMC,MAAM,UAAUJ,KAAKE,O,GAIlCF,KAAAK,YAAc,K,MAClB,MAAMC,IAAkBC,EAAAP,KAAKQ,SAAK,MAAAD,SAAA,EAAAA,EAAI,IAAIE,WAAWC,OAErD,IAAKV,KAAKQ,OAASR,KAAKW,QAAS,CAC7B,OAAOR,EAAA,QAAMC,MAAM,SAAO,M,CAG9B,GAAIJ,KAAKQ,MAAO,CACZ,OACIL,EAAA,QACIC,MAAO,CACHI,MAAO,KACP,CAAC,MAAMF,KAAmB,OAG7BN,KAAKQ,M,GAMdR,KAAAY,aAAe,KACnB,GAAIZ,KAAKa,OAAQ,CACb,OAAOV,EAAA,QAAMC,MAAM,UAAUJ,KAAKa,O,GAIlCb,KAAAc,WAAa,KACjB,GAAId,KAAKe,KAAM,CACX,OAAOZ,EAAA,cAAYC,MAAM,OAAOY,KAAMhB,KAAKe,M,GAI3Cf,KAAAiB,4BAA+BC,I,MACnC,MAAMC,GACFZ,EAACW,IAAC,MAADA,SAAC,SAADA,EAAGE,UAA0B,MAAAb,SAAA,EAAAA,EAC9BP,KAAKqB,KAAKC,WAAWC,cAAc,wBACvCvB,KAAKwB,eAAiBL,GAAQA,EAAKM,mBAAmBf,OAAS,CAAC,EAG5DV,KAAA0B,eAAiB,K,QACrB,GAAI1B,KAAKwB,eAAgB,CACrB,M,CAGJ,MAAKjB,EAAAP,KAAK2B,YAAQ,MAAApB,SAAA,SAAAA,EAAEC,UAASoB,EAAA5B,KAAK2B,YAAQ,MAAAC,SAAA,SAAAA,EAAEpB,SAAU,EAAG,CACrD,M,CAGJ,OACIL,EAAA,2BACIC,MAAM,WACNF,OAAQF,KAAK2B,SAASzB,OACtBM,MAAOR,KAAK2B,SAASnB,MACrBK,OAAQb,KAAK2B,SAASd,OACtBgB,SAAU7B,KAAK2B,SAASE,SACxBC,wBAAyB9B,KAAK2B,SAASG,yBACzC,EAIF9B,KAAA+B,YAAc,KAClB,GAAI/B,KAAKgC,MAAO,CACZ,OAAO7B,EAAA,QAAMC,MAAM,SAASJ,KAAKgC,M,GAIjChC,KAAAiC,mBAAqB,KACzB,GAAIjC,KAAKkC,MAAO,CACZ,OAAO/B,EAAA,eAAa6B,MAAOhC,KAAKkC,O,GAIhClC,KAAAmC,cAAgB,KACpB,GAAInC,KAAKW,QAAS,CACd,OAAOR,EAAA,yBAAuBiC,cAAe,M,uDAjO7B,K,0DAkBL,M,kCAcD,M,gEAoCO,K,CAKlBC,oBACH,MAAMC,iBAAEA,EAAgBC,iBAAEA,GAAqBC,EAC3CxC,KAAKqB,MAETrB,KAAKsC,iBAAmBA,EACxBtC,KAAKuC,iBAAmBA,EACxBvC,KAAKiB,6B,CAGFwB,S,wBACH,MAAMC,EACF1C,KAAK2C,WAAW3C,OAAI,MAAJA,YAAI,SAAJA,KAAME,QACtBF,KAAKQ,MACL,IACAR,KAAK2C,WAAW3C,OAAI,MAAJA,YAAI,SAAJA,KAAMa,QACtBb,KAAK2C,WAAW3C,OAAI,MAAJA,YAAI,SAAJA,KAAMgC,OACtB,KACAhC,KAAK2C,YAAWpC,EAAAP,OAAI,MAAJA,YAAI,SAAJA,KAAM2B,YAAQ,MAAApB,SAAA,SAAAA,EAAEL,QAChCF,KAAK2C,YAAWf,EAAA5B,OAAI,MAAJA,YAAI,SAAJA,KAAM2B,YAAQ,MAAAC,SAAA,SAAAA,EAAEpB,OAChCR,KAAK2C,YAAWC,EAAA5C,OAAI,MAAJA,YAAI,SAAJA,KAAM2B,YAAQ,MAAAiB,SAAA,SAAAA,EAAE/B,QAChCb,KAAK2C,YAAWE,EAAA7C,OAAI,MAAJA,YAAI,SAAJA,KAAM8C,QAAI,MAAAD,SAAA,SAAAA,EAAEE,OAEhC,MAAMD,GAAQ9C,KAAKgD,UAAWC,EAAAjD,KAAK8C,QAAI,MAAAG,SAAA,SAAAA,EAAEC,KAAO,IAChD,MAAMC,EAAMC,GAAOC,EAAArD,KAAK8C,QAAI,MAAAO,SAAA,SAAAA,EAAEjC,QAAQkC,EAAAtD,KAAK8C,QAAI,MAAAQ,SAAA,SAAAA,EAAEH,KAEjD,OACIhD,EAACoD,EAAI,CACDC,aAAcxD,KAAKsC,iBACnBmB,aAAczD,KAAKuC,iBACnBnC,MAAO,CAAE,2BAA4BJ,KAAKwB,iBAE1CrB,EAAA,KACI4C,OAAOW,EAAA1D,KAAK8C,QAAI,MAAAY,SAAA,SAAAA,EAAEX,MAClBG,KAAMJ,EACN1B,QAAQuC,EAAA3D,KAAK8C,QAAI,MAAAa,SAAA,SAAAA,EAAEvC,OACnB+B,IAAKA,EACLS,SAAS,IAAG,aACAlB,EAAiB,gBACd1C,KAAKgD,SAAQ,YACjBhD,KAAKW,QAAU,OAAS,QAAO,YAChC,SACVP,MAAO,CACH,mBAAkByD,EAAA7D,KAAK8C,QAAI,MAAAe,SAAA,SAAAA,EAAEX,QAASlD,KAAKgD,WAG9ChD,KAAKc,aACLd,KAAK0B,iBACNvB,EAAA,QACIa,KAAK,UACL8C,aAAc9D,KAAKiB,8BAEvBd,EAAA,OAAKC,MAAM,eACNJ,KAAKC,eACNE,EAAA,OAAKC,MAAM,oBACNJ,KAAKK,cACLL,KAAKY,gBAETZ,KAAKmC,iBAETnC,KAAK+B,cACN5B,EAAA,oCAEHH,KAAKiC,qB,CAKVU,WAAWoB,GACf,OAAQA,EAAY,GAAKA,EAAY,G"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as t}from"./p-288f0842.js";import{m as o}from"./p-95a71e89.js";import{g as r}from"./p-2c35fb9d.js";import"./p-4e9b4087.js";class a{constructor(e){this.handleIntersection=e=>{e.forEach((e=>{if(e.isIntersecting){const t=e.target;const o=t.getAttribute("data-src");if(o){t.setAttribute("src",o);t.removeAttribute("data-src")}this.observer.unobserve(t)}}))};this.observer=new IntersectionObserver(this.handleIntersection);const t=e.querySelectorAll("img");t.forEach((e=>{this.observer.observe(e)}))}disconnect(){this.observer.disconnect()}}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}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}:host(limel-markdown:not(.no-table-styles)) tbody{border:1px solid rgb(var(--contrast-400));border-radius:0.25rem}: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))}table{display:block;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}blockquote{position:relative;max-width:100%;margin:0.75rem 0;padding:0.5rem;border-left:0.25rem solid rgb(var(--contrast-500));background-color:rgb(var(--contrast-200))}blockquote:before,blockquote:after{position:absolute;line-height:0;font-size:2rem;opacity:0.4}blockquote:before{content:"“";left:-0.5rem;top:0.5rem}blockquote:after{content:"”";right:-0.25rem;bottom:-0.25rem}blockquote blockquote{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0.25rem;border-color:rgb(var(--contrast-700));border-left-width:1px}blockquote blockquote:before,blockquote blockquote:after{display:none}blockquote:has(>blockquote){padding-left:0.25rem;padding-bottom:0}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}kbd{font-family:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-weight:600;color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-200));white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:normal;padding:0.125rem 0.5rem;margin:0 0.25rem;box-shadow:var(--button-shadow-normal), 0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset;border-radius:0.125rem;border-style:solid;border-color:rgba(var(--contrast-600), 0.8);border-width:0 1px 0.125rem 1px}: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}*,*::before,*::after{box-sizing:border-box}* :where(:not(img,video,svg,canvas,iframe)),*::before :where(:not(img,video,svg,canvas,iframe)),*::after :where(:not(img,video,svg,canvas,iframe)){min-width:0;min-height:0}hr{border-top:1px solid rgb(var(--contrast-700))}.MsoNormal{margin:0}';const n=class{constructor(t){e(this,t);this.imageIntersectionObserver=null;this.value=undefined;this.whitelist=r.markdownWhitelist;this.lazyLoadImages=false}async textChanged(){var e;try{this.cleanupImageIntersectionObserver();const t=await o(this.value,{forceHardLineBreaks:true,whitelist:(e=this.whitelist)!==null&&e!==void 0?e:[],lazyLoadImages:this.lazyLoadImages});this.rootElement.innerHTML=t;this.setupImageIntersectionObserver()}catch(e){console.error(e)}}async componentDidLoad(){this.textChanged()}disconnectedCallback(){this.cleanupImageIntersectionObserver()}render(){return[t("div",{id:"markdown",ref:e=>this.rootElement=e})]}setupImageIntersectionObserver(){if(this.lazyLoadImages){this.imageIntersectionObserver=new a(this.rootElement)}}cleanupImageIntersectionObserver(){if(this.imageIntersectionObserver){this.imageIntersectionObserver.disconnect();this.imageIntersectionObserver=null}}static get watchers(){return{value:["textChanged"]}}};n.style=l;export{n as limel_markdown};
|
|
2
|
+
//# sourceMappingURL=p-1e7cec06.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["ImageIntersectionObserver","constructor","containerElement","this","handleIntersection","entries","forEach","entry","isIntersecting","img","target","dataSrc","getAttribute","setAttribute","removeAttribute","observer","unobserve","IntersectionObserver","images","querySelectorAll","observe","disconnect","markdownCss","Markdown","imageIntersectionObserver","globalConfig","markdownWhitelist","async","cleanupImageIntersectionObserver","html","markdownToHTML","value","forceHardLineBreaks","whitelist","_a","lazyLoadImages","rootElement","innerHTML","setupImageIntersectionObserver","error","console","textChanged","disconnectedCallback","render","h","id","ref","el"],"sources":["./src/components/markdown/image-intersection-observer.ts","./src/components/markdown/markdown.scss?tag=limel-markdown&encapsulation=shadow","./src/components/markdown/markdown.tsx"],"sourcesContent":["export class ImageIntersectionObserver {\n private observer: IntersectionObserver;\n\n /**\n * @param containerElement - The element containing images to observe.\n */\n public constructor(containerElement: HTMLElement) {\n this.observer = new IntersectionObserver(this.handleIntersection);\n\n const images = containerElement.querySelectorAll('img');\n images.forEach((img) => {\n this.observer.observe(img);\n });\n }\n\n public disconnect() {\n this.observer.disconnect();\n }\n\n private readonly handleIntersection = (\n entries: IntersectionObserverEntry[],\n ) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n const dataSrc = img.getAttribute('data-src');\n\n if (dataSrc) {\n img.setAttribute('src', dataSrc);\n img.removeAttribute('data-src');\n }\n\n this.observer.unobserve(img);\n }\n });\n };\n}\n","/**\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@forward './partial-styles/pre-code';\n@forward './partial-styles/headings';\n@forward './partial-styles/body-text';\n@forward './partial-styles/lists';\n@forward './partial-styles/tables';\n@forward './partial-styles/blockquotes';\n@forward './partial-styles/definition-lists';\n@forward './partial-styles/img';\n@forward './partial-styles/kbd';\n@forward './partial-styles/_adjust-for-table-cell';\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n\n & :where(:not(img, video, svg, canvas, iframe)) {\n min-width: 0;\n min-height: 0;\n }\n}\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';\nimport { ImageIntersectionObserver } from './image-intersection-observer';\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-keys\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 /**\n * Enable lazy loading for images\n */\n @Prop()\n public lazyLoadImages = false;\n\n @Watch('value')\n public async textChanged() {\n try {\n this.cleanupImageIntersectionObserver();\n\n const html = await markdownToHTML(this.value, {\n forceHardLineBreaks: true,\n whitelist: this.whitelist ?? [],\n lazyLoadImages: this.lazyLoadImages,\n });\n\n this.rootElement.innerHTML = html;\n\n this.setupImageIntersectionObserver();\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error(error);\n }\n }\n\n private rootElement: HTMLDivElement;\n private imageIntersectionObserver: ImageIntersectionObserver | null = null;\n\n public async componentDidLoad() {\n this.textChanged();\n }\n\n public disconnectedCallback() {\n this.cleanupImageIntersectionObserver();\n }\n\n public render() {\n return [\n <div\n id=\"markdown\"\n ref={(el) => (this.rootElement = el as HTMLDivElement)}\n />,\n ];\n }\n\n private setupImageIntersectionObserver() {\n if (this.lazyLoadImages) {\n this.imageIntersectionObserver = new ImageIntersectionObserver(\n this.rootElement,\n );\n }\n }\n\n private cleanupImageIntersectionObserver() {\n if (this.imageIntersectionObserver) {\n this.imageIntersectionObserver.disconnect();\n this.imageIntersectionObserver = null;\n }\n }\n}\n"],"mappings":"iJAAaA,EAMTC,YAAmBC,GAaFC,KAAAC,mBACbC,IAEAA,EAAQC,SAASC,IACb,GAAIA,EAAMC,eAAgB,CACtB,MAAMC,EAAMF,EAAMG,OAClB,MAAMC,EAAUF,EAAIG,aAAa,YAEjC,GAAID,EAAS,CACTF,EAAII,aAAa,MAAOF,GACxBF,EAAIK,gBAAgB,W,CAGxBX,KAAKY,SAASC,UAAUP,E,IAE9B,EA3BFN,KAAKY,SAAW,IAAIE,qBAAqBd,KAAKC,oBAE9C,MAAMc,EAAShB,EAAiBiB,iBAAiB,OACjDD,EAAOZ,SAASG,IACZN,KAAKY,SAASK,QAAQX,EAAI,G,CAI3BY,aACHlB,KAAKY,SAASM,Y,EChBtB,MAAMC,EAAc,slO,MC8BPC,EAAQ,M,yBAgDTpB,KAAAqB,0BAA8D,K,oCA7BlEC,EAAaC,kB,oBAMO,K,CAGjBC,oB,MACH,IACIxB,KAAKyB,mCAEL,MAAMC,QAAaC,EAAe3B,KAAK4B,MAAO,CAC1CC,oBAAqB,KACrBC,WAAWC,EAAA/B,KAAK8B,aAAS,MAAAC,SAAA,EAAAA,EAAI,GAC7BC,eAAgBhC,KAAKgC,iBAGzBhC,KAAKiC,YAAYC,UAAYR,EAE7B1B,KAAKmC,gC,CACP,MAAOC,GAELC,QAAQD,MAAMA,E,EAOfZ,yBACHxB,KAAKsC,a,CAGFC,uBACHvC,KAAKyB,kC,CAGFe,SACH,MAAO,CACHC,EAAA,OACIC,GAAG,WACHC,IAAMC,GAAQ5C,KAAKiC,YAAcW,I,CAKrCT,iCACJ,GAAInC,KAAKgC,eAAgB,CACrBhC,KAAKqB,0BAA4B,IAAIxB,EACjCG,KAAKiC,Y,EAKTR,mCACJ,GAAIzB,KAAKqB,0BAA2B,CAChCrB,KAAKqB,0BAA0BH,aAC/BlB,KAAKqB,0BAA4B,I"}
|