@limetech/lime-elements 37.79.3 → 37.79.4

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 (12) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/limel-card.cjs.entry.js +1 -1
  3. package/dist/cjs/limel-card.cjs.entry.js.map +1 -1
  4. package/dist/collection/components/card/card.css +4 -2
  5. package/dist/esm/limel-card.entry.js +1 -1
  6. package/dist/esm/limel-card.entry.js.map +1 -1
  7. package/dist/lime-elements/lime-elements.esm.js +1 -1
  8. package/dist/lime-elements/p-de5a32ee.entry.js +2 -0
  9. package/dist/lime-elements/p-de5a32ee.entry.js.map +1 -0
  10. package/package.json +1 -1
  11. package/dist/lime-elements/p-ac69fa25.entry.js +0 -2
  12. package/dist/lime-elements/p-ac69fa25.entry.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ ## [37.79.4](https://github.com/Lundalogik/lime-elements/compare/v37.79.3...v37.79.4) (2025-01-17)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+
7
+ * **card:** make the UI more responsive ([bc2a007](https://github.com/Lundalogik/lime-elements/commit/bc2a007068bb8a9d4c5a8e411fcb2c0081b82d36))
8
+
1
9
  ## [37.79.3](https://github.com/Lundalogik/lime-elements/compare/v37.79.2...v37.79.3) (2025-01-17)
2
10
 
3
11
 
package/dist/cjs/limel-card.cjs.entry.js CHANGED
@@ -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;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{flex-shrink:0;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{max-width:40%;height:100%}section:hover img,section:focus-visible img{transition-duration:0.2s;filter:saturate(1.3)}limel-markdown{padding:0.5rem 0.75rem}header{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{--action-bar-background-color:transparent;padding:0.5rem;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;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) {
package/dist/cjs/limel-card.cjs.entry.js.map CHANGED
@@ -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 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 flex-shrink: 0;\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 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 padding: 0.5rem 0.75rem;\n}\n\nheader {\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 --action-bar-background-color: transparent;\n padding: 0.5rem;\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 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}
package/dist/collection/components/card/card.css CHANGED
@@ -101,7 +101,6 @@ section:hover {
101
101
  }
102
102
 
103
103
  img {
104
- flex-shrink: 0;
105
104
  transition: filter 0.6s ease;
106
105
  object-fit: cover;
107
106
  border-radius: calc(var(--card-border-radius, 0.95rem) / 1.4);
@@ -110,6 +109,7 @@ img {
110
109
  width: 100%;
111
110
  }
112
111
  :host(limel-card[orientation=landscape]) img {
112
+ flex-shrink: 0;
113
113
  max-width: 40%;
114
114
  height: 100%;
115
115
  }
@@ -119,10 +119,12 @@ section:hover img, section:focus-visible img {
119
119
  }
120
120
 
121
121
  limel-markdown {
122
+ overflow-y: auto;
122
123
  padding: 0.5rem 0.75rem;
123
124
  }
124
125
 
125
126
  header {
127
+ flex-shrink: 0;
126
128
  display: flex;
127
129
  justify-content: center;
128
130
  gap: 0.5rem;
@@ -164,8 +166,8 @@ header h2 {
164
166
  }
165
167
 
166
168
  limel-action-bar {
169
+ flex-shrink: 0;
167
170
  --action-bar-background-color: transparent;
168
- padding: 0.5rem;
169
171
  margin-left: auto;
170
172
  }
171
173
 
package/dist/esm/limel-card.entry.js CHANGED
@@ -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;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{flex-shrink:0;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{max-width:40%;height:100%}section:hover img,section:focus-visible img{transition-duration:0.2s;filter:saturate(1.3)}limel-markdown{padding:0.5rem 0.75rem}header{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{--action-bar-background-color:transparent;padding:0.5rem;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;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) {
package/dist/esm/limel-card.entry.js.map CHANGED
@@ -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 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 flex-shrink: 0;\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 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 padding: 0.5rem 0.75rem;\n}\n\nheader {\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 --action-bar-background-color: transparent;\n padding: 0.5rem;\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 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}
package/dist/lime-elements/lime-elements.esm.js CHANGED
@@ -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-94094c98",[[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-ac69fa25",[[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-d5da8579",[[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-4bfcb8c7",[[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-94094c98",[[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-de5a32ee",[[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-d5da8579",[[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-4bfcb8c7",[[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
package/dist/lime-elements/p-de5a32ee.entry.js ADDED
@@ -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;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-de5a32ee.entry.js.map
package/dist/lime-elements/p-de5a32ee.entry.js.map ADDED
@@ -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 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,ggH,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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@limetech/lime-elements",
3
- "version": "37.79.3",
3
+ "version": "37.79.4",
4
4
  "description": "Lime Elements",
5
5
  "author": "Lime Technologies",
6
6
  "license": "Apache-2.0",
package/dist/lime-elements/p-ac69fa25.entry.js DELETED
@@ -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;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{flex-shrink:0;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{max-width:40%;height:100%}section:hover img,section:focus-visible img{transition-duration:0.2s;filter:saturate(1.3)}limel-markdown{padding:0.5rem 0.75rem}header{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{--action-bar-background-color:transparent;padding:0.5rem;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-ac69fa25.entry.js.map
package/dist/lime-elements/p-ac69fa25.entry.js.map DELETED
@@ -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 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 flex-shrink: 0;\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 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 padding: 0.5rem 0.75rem;\n}\n\nheader {\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 --action-bar-background-color: transparent;\n padding: 0.5rem;\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,m+G,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"}