xv-webcomponents 0.1.12 → 0.1.13

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 (17) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/xv-accordion_10.cjs.entry.js +4 -4
  3. package/dist/cjs/xv-accordion_10.cjs.entry.js.map +1 -1
  4. package/dist/cjs/xv-webcomponents.cjs.js +1 -1
  5. package/dist/collection/components/xv-card/xv-card.js +2 -2
  6. package/dist/collection/components/xv-card/xv-card.js.map +1 -1
  7. package/dist/esm/loader.js +1 -1
  8. package/dist/esm/xv-accordion_10.entry.js +4 -4
  9. package/dist/esm/xv-accordion_10.entry.js.map +1 -1
  10. package/dist/esm/xv-webcomponents.js +1 -1
  11. package/dist/types/components.d.ts +9 -9
  12. package/dist/xv-webcomponents/{p-6f058b7f.entry.js → p-948b7ef5.entry.js} +2 -2
  13. package/dist/xv-webcomponents/p-948b7ef5.entry.js.map +1 -0
  14. package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -1
  15. package/dist/xv-webcomponents/xv-webcomponents.esm.js.map +1 -1
  16. package/package.json +1 -1
  17. package/dist/xv-webcomponents/p-6f058b7f.entry.js.map +0 -1
package/dist/cjs/loader.cjs.js CHANGED
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
8
8
  const defineCustomElements = async (win, options) => {
9
9
  if (typeof window === 'undefined') return undefined;
10
10
  await appGlobals.globalScripts();
11
- return index.bootstrapLazy([["xv-accordion_10.cjs",[[1,"xv-accordion",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[1,"xv-accordion-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-button-v2",{"label":[1],"variant":[1],"disabled":[4]}],[1,"xv-card",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[1,"xv-checkbox-v2"],[1,"xv-link",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[1,"xv-progress-indicator",{"progress":[2]},null,{"progress":["updateChildItems"]}],[1,"xv-progress-indicator-item",{"done":[4]}],[1,"xv-tag",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[1,"xv-tooltip",{"message":[1],"position":[1]}]]],["xv-breadcrumbs.cjs",[[1,"xv-breadcrumbs"]]]], options);
11
+ return index.bootstrapLazy([["xv-accordion_10.cjs",[[1,"xv-accordion",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[1,"xv-accordion-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-button-v2",{"label":[1],"variant":[1],"disabled":[4]}],[1,"xv-card-v2",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[1,"xv-checkbox-v2"],[1,"xv-link",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[1,"xv-progress-indicator",{"progress":[2]},null,{"progress":["updateChildItems"]}],[1,"xv-progress-indicator-item",{"done":[4]}],[1,"xv-tag",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[1,"xv-tooltip",{"message":[1],"position":[1]}]]],["xv-breadcrumbs.cjs",[[1,"xv-breadcrumbs"]]]], options);
12
12
  };
13
13
 
14
14
  exports.setNonce = index.setNonce;
package/dist/cjs/xv-accordion_10.cjs.entry.js CHANGED
@@ -99,7 +99,7 @@ const XvButton = class {
99
99
  XvButton.style = XvButtonV2Style0;
100
100
 
101
101
  const xvCardCss = ":host{display:flex;flex-direction:column;border-radius:10px;border:1px solid var(--border-subtle-00);background:var(--layer-layer-02);box-shadow:0 1px 3px 1px rgba(39, 52, 53, 0.15), 0 1px 2px 0 rgba(39, 52, 53, 0.3);font-family:var(--ff-body, inherit);overflow:visible !important}:host(.xv-card_vertical){width:100% !important}:host(.xv-card_horizontal){flex-direction:row;display:flex;width:max-content}:host(.xv-card_horizontal) .xv-card_media__content,:host(.xv-card_horizontal) .xv-card_media ::slotted([slot=media]){min-height:100%;max-height:100%;max-width:160px;min-width:160px}.xv-card_content{padding:16px;display:flex;flex-direction:column;flex:1;text-align:left}.xv-card_media__content,.xv-card_media ::slotted([slot=media]){max-width:100%;min-width:100%;min-height:199px;max-height:199px;object-fit:cover;object-position:center}.xv-card_header__content,.xv-card_header ::slotted([slot=header]){margin:0 0 8px;color:var(--text-primary);font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:-0.6px}.xv-card_body{flex:1}.xv-card_body__content,.xv-card_body ::slotted([slot=body]){margin:0 0 8px;color:var(--text-secondary);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:-0.1px}";
102
- const XvCardStyle0 = xvCardCss;
102
+ const XvCardV2Style0 = xvCardCss;
103
103
 
104
104
  const XvCard = class {
105
105
  constructor(hostRef) {
@@ -107,10 +107,10 @@ const XvCard = class {
107
107
  this.variant = 'vertical';
108
108
  }
109
109
  render() {
110
- return (index.h(index.Host, { key: 'c8ec1bfefb9a6cb92b316eab36d3a4e8a08e1a78', class: `xv-card xv-card_${this.variant}`, part: this.variant }, index.h("div", { key: 'f6274c858ce8333fd2de700b8f0b20921eb7ba09', class: "xv-card_media" }, index.h("slot", { key: '91105c9e61b8dfe46411bf095dd196f969e9fc02', name: "media" }, this.media && index.h("img", { key: '2101315142f14a478bf2dd2eb72f7ce3922dfa44', class: "xv-card_media__content", src: this.media, alt: this.header }))), index.h("div", { key: '58c284ccd7cde840c1808aa14185eb1c70de4751', class: "xv-card_content" }, index.h("div", { key: 'fb72c62a0d7b5bfedb9a14b7fd8cc4750cfac434', class: "xv-card_header" }, index.h("slot", { key: 'a8ef5cc27eb4b691e5f8fae2544fe96ccc202fdf', name: "header" }, this.header && index.h("p", { key: '01fc1daadbb56f4a2f92bd704db06e08a747cd77', class: "xv-card_header__content" }, this.header))), index.h("div", { key: '2950f470bd305143908ba1bb170da068d6d598f6', class: "xv-card_body" }, index.h("slot", { key: 'ef9fe6d7daaced77c27483b66c8b01dacfc6713a', name: "body" }, this.body && index.h("p", { key: '8afd1196e2a45176b503c6be29fdd85ac0e93a83', class: "xv-card_body__content" }, this.header))), index.h("div", { key: '42e791cfadf951a1e0d99a5a500f52f1553bedfd', class: "xv-card_footer" }, index.h("slot", { key: 'ac81fb8b06bba6a1851afb344c325ea3a521fceb', name: "footer" }, this.footer)))));
110
+ return (index.h(index.Host, { key: '954936e5ea5014bb4c58fed8946ebba8598e6f3d', class: `xv-card xv-card_${this.variant}`, part: this.variant }, index.h("div", { key: '357b2524c23b8af0730892c90db84dda20990070', class: "xv-card_media" }, index.h("slot", { key: '02f2e73b4aed200833751e60bdfdc7151477576b', name: "media" }, this.media && index.h("img", { key: 'b27510aae0d35583fa7ccf75396289751611780a', class: "xv-card_media__content", src: this.media, alt: this.header }))), index.h("div", { key: '61c711fcf6e82d6da9761411c0ceef7d0407caca', class: "xv-card_content" }, index.h("div", { key: '7b476457734b9a03e525a409b839284846845189', class: "xv-card_header" }, index.h("slot", { key: 'c5c068a0b6d61ab1255276e4c2c72e039f5f9909', name: "header" }, this.header && index.h("p", { key: 'dde81bf7813870b4dd3514a027d02518d31acffe', class: "xv-card_header__content" }, this.header))), index.h("div", { key: '7fda70bb56b9313d868463bfee51a68bfb8e65c8', class: "xv-card_body" }, index.h("slot", { key: '3acbfa548e594f01cd9d514b0f7d7596b13900a6', name: "body" }, this.body && index.h("p", { key: '1a399d0a0351c4a0f1d166009f9467fed8a7e2dc', class: "xv-card_body__content" }, this.header))), index.h("div", { key: '7458f3c1612205f50ba2692b864089b4ef87e7f2', class: "xv-card_footer" }, index.h("slot", { key: '3e83fe4bfcda18cf9f46c304603f0a6ed0df4361', name: "footer" }, this.footer)))));
111
111
  }
112
112
  };
113
- XvCard.style = XvCardStyle0;
113
+ XvCard.style = XvCardV2Style0;
114
114
 
115
115
  const XvCheckbox = class {
116
116
  constructor(hostRef) {
@@ -252,7 +252,7 @@ XvTooltip.style = XvTooltipStyle0;
252
252
  exports.xv_accordion = XvAccordion;
253
253
  exports.xv_accordion_item = XvAccordionItem;
254
254
  exports.xv_button_v2 = XvButton;
255
- exports.xv_card = XvCard;
255
+ exports.xv_card_v2 = XvCard;
256
256
  exports.xv_checkbox_v2 = XvCheckbox;
257
257
  exports.xv_link = XvLink;
258
258
  exports.xv_progress_indicator = XvProgressIndicator;
package/dist/cjs/xv-accordion_10.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"xv-accordion.xv-accordion-item.xv-button-v2.xv-card.xv-checkbox-v2.xv-link.xv-progress-indicator.xv-progress-indicator-item.xv-tag.xv-tooltip.entry.cjs.js","mappings":"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","names":["uidGenerator","h","Host"],"sources":["src/components/xv-accordion/xv-accordion.scss?tag=xv-accordion&encapsulation=shadow","src/components/xv-accordion/xv-accordion.tsx","src/components/xv-accordion-item/xv-accordion-item.scss?tag=xv-accordion-item&encapsulation=shadow","src/components/xv-accordion-item/xv-accordion-item.tsx","src/components/xv-button/xv-button-v2.scss?tag=xv-button-v2&encapsulation=shadow","src/components/xv-button/xv-button.tsx","src/components/xv-card/xv-card.scss?tag=xv-card&encapsulation=shadow","src/components/xv-card/xv-card.tsx","src/components/xv-checkbox/xv-checkbox.tsx","src/components/xv-link/xv-link.scss?tag=xv-link&encapsulation=shadow","src/components/xv-link/xv-link.tsx","src/components/xv-progress-indicator/xv-progress-indicator.scss?tag=xv-progress-indicator&encapsulation=shadow","src/components/xv-progress-indicator/xv-progress-indicator.tsx","src/components/xv-progress-indicator-item/xv-progress-indicator-item.scss?tag=xv-progress-indicator-item&encapsulation=shadow","src/components/xv-progress-indicator-item/xv-progress-indicator-item.tsx","src/components/xv-tag/xv-tag.scss?tag=xv-tag&encapsulation=shadow","src/components/xv-tag/xv-tag.tsx","src/components/xv-tooltip/xv-tooltip.scss?tag=xv-tooltip&encapsulation=shadow","src/components/xv-tooltip/xv-tooltip.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}\r\n","import { Component, Host, h, Event, EventEmitter, Method, State, Prop } from '@stencil/core';\r\nimport { uidGenerator } from '../../utils/utils';\r\n\r\n@Component({\r\n tag: 'xv-accordion',\r\n styleUrl: 'xv-accordion.scss',\r\n shadow: true,\r\n})\r\nexport class XvAccordion {\r\n @Prop() multiple: boolean = false;\r\n @Prop() xvId: string = uidGenerator();\r\n @Prop({ mutable: true }) value: string;\r\n @State() opened: Set<string> = new Set();\r\n @Event() accordionChange: EventEmitter<{ opened: Set<string>, id: string }>;\r\n\r\n @Method()\r\n async toggleItem(value: string) {\r\n if (this.opened.has(value)) {\r\n this.opened.delete(value);\r\n } else {\r\n if (!this.multiple) this.opened.clear();\r\n this.value = value;\r\n this.opened.add(this.value);\r\n }\r\n\r\n this.accordionChange.emit({ opened: this.opened, id: this.xvId });\r\n\r\n return { opened: this.opened, id: this.xvId };\r\n }\r\n\r\n componentWillLoad() {\r\n if (this.value) {\r\n return this.toggleItem(this.value);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class=\"xv-accordion\" data-id={this.xvId}>\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n border-top: 1px solid var(--border-subtle-01);\r\n display: flex;\r\n flex-direction: column;\r\n font-family: var(--ff-body, inherit);\r\n}\r\n\r\n:host(.disabled) {\r\n .label {\r\n color: var(--text-disabled);\r\n &:hover {\r\n cursor: initial;\r\n background-color: transparent;\r\n }\r\n }\r\n}\r\n\r\n.label {\r\n padding: 14px 16px;\r\n display: inline-flex;\r\n align-items: center;\r\n column-gap: 20px;\r\n justify-content: space-between;\r\n text-align: left;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n letter-spacing: 0.16px;\r\n background-color: transparent;\r\n transition: background-color 200ms ease-in-out;\r\n &>span {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 1;\r\n -webkit-box-orient: vertical;\r\n }\r\n\r\n &:hover {\r\n cursor: pointer;\r\n background-color: var(--layer-hover-01);\r\n }\r\n\r\n &:after {\r\n content: '';\r\n border: solid black;\r\n border-width: 0 2px 2px 0;\r\n display: inline-block;\r\n padding: 4.66px;\r\n transition: transform 100ms ease-in-out;\r\n transform: rotate(45deg);\r\n }\r\n\r\n &.opened:after {\r\n transform: rotate(-135deg);\r\n }\r\n}\r\n\r\n.content {\r\n padding: 0 16px;\r\n text-align: left;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n overflow: hidden;\r\n max-height: 0;\r\n transition: max-height 300ms ease-in-out, padding 250ms ease 50ms;\r\n &.opened {\r\n padding: 14px 16px;\r\n max-height: 500px;\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop, State, Listen, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-accordion-item',\r\n styleUrl: 'xv-accordion-item.scss',\r\n shadow: true,\r\n})\r\nexport class XvAccordionItem {\r\n @Element() el: HTMLElement;\r\n @Prop() disabled: boolean = false;\r\n @Prop() label: string;\r\n @Prop() value: string;\r\n @State() isOpen: boolean = false;\r\n @Event() itemToggle: EventEmitter;\r\n\r\n @Listen('accordionChange', { target: 'body' })\r\n handleAccordionChange(event: CustomEvent<{ opened: Set<string>, id: string }>) {\r\n const parentAccordionId = this.el.closest('[data-id]')?.getAttribute('data-id');\r\n if (event.detail.id !== parentAccordionId) return;\r\n this.isOpen = event.detail.opened.has(this.value);\r\n }\r\n\r\n toggle() {\r\n if (this.disabled) return;\r\n this.isOpen = !this.isOpen;\r\n this.el.closest('xv-accordion')?.toggleItem?.(this.value);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class={`${this.disabled ? 'disabled' : ''}`}>\r\n <label class={`label ${this.isOpen ? 'opened' : 'closed'}`} onClick={this.toggle.bind(this)}>\r\n <span>{this.label}</span>\r\n </label>\r\n <div class={`content ${this.isOpen ? 'opened' : 'closed'}`}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n --focus-border-width: 2px;\r\n --focus-border-style: solid;\r\n --button-ghost: tarnsparent;\r\n --text-disabled-opacity: 0.25;\r\n --button-border-radius: 3px;\r\n --button-border-width: 1px;\r\n --button-border-style: solid;\r\n --button-border-color-accent: #97BF0D;\r\n --button-border-color-primary: #273435;\r\n --button-border-color-secondary: #D1D1D1;\r\n --button-border-color-ghost: tarnsparent;\r\n --button-ghost-hover: tarnsparent;\r\n --button-ghost-active: rgba(139, 139, 139, 0.5);\r\n --button-accent-disabled: #D1D1D1;\r\n --button-primary-disabled: #D1D1D1;\r\n --button-secondary-disabled: #D1D1D1;\r\n --button-tertiary-disabled: tarnsparent;\r\n --button-ghost-disabled: tarnsparent;\r\n\r\n button {\r\n font-family: inherit;\r\n font-size: 16px;\r\n font-weight: 700;\r\n padding: 0 20px;\r\n height: 40px;\r\n line-height: 40px;\r\n cursor: pointer;\r\n box-sizing: border-box;\r\n transition:\r\n background-color 0.2s ease-in-out,\r\n filter 0.2s ease-in-out,\r\n transform 0.1s ease-in-out,\r\n border-color 0.2s ease-in-out,\r\n border-width 0.2s ease-in-out,\r\n box-shadow 0.2s ease-in-out;\r\n }\r\n}\r\n\r\n.xv-button {\r\n /* ✅ Accent Button */\r\n &.accent {\r\n background-color: var(--button-accent);\r\n color: var(--text-on-color);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-accent);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-accent-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-accent-active);\r\n color: var(--text-on-color);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-accent-disabled);\r\n color: var(--text-on-color-disabled);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-accent-disabled);\r\n }\r\n\r\n }\r\n\r\n /* ✅ Primary Button */\r\n &.primary {\r\n background-color: var(--button-primary);\r\n color: var(--text-on-color);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-primary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-primary-hover)\r\n }\r\n &:active {\r\n background-color: var(--button-primary-active)\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-primary-disabled);\r\n color: var(--text-on-color-disabled);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-primary-disabled);\r\n }\r\n }\r\n\r\n /* ✅ Secondary Button */\r\n &.secondary {\r\n background-color: var(--button-secondary);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-secondary-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-secondary-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-secondary-disabled);\r\n color: var(--text-on-color-disabled);\r\n }\r\n }\r\n\r\n /* ✅ Tertiary Button */\r\n &.tertiary {\r\n background-color: var(--button-ghost);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-tertiary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-tertiary-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-tertiary-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-tertiary-disabled);\r\n color: var(--text-disabled);\r\n opacity: var(--text-disabled-opacity);\r\n }\r\n }\r\n\r\n /* ✅ Ghost Button */\r\n &.ghost {\r\n background-color: var(--button-ghost);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-ghost);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-ghost-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-ghost-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-ghost-disabled);\r\n color: var(--text-disabled);\r\n opacity: var(--text-disabled-opacity);\r\n }\r\n }\r\n}\r\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\r\n\r\n\r\n@Component({\r\n tag: 'xv-button-v2',\r\n styleUrl: 'xv-button-v2.scss',\r\n shadow: true,\r\n})\r\nexport class XvButton {\r\n /** Button label */\r\n @Prop() label: string = '';\r\n\r\n /** Variant */\r\n @Prop() variant: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost' = 'primary';\r\n\r\n /** Disabled state */\r\n @Prop() disabled: boolean = false;\r\n\r\n /** Emits when the button is clicked */\r\n @Event() buttonClick!: EventEmitter<void>;\r\n\r\n /** Handle click only if not disabled */\r\n private handleClick = () => {\r\n if (this.disabled) {\r\n return;\r\n }\r\n this.buttonClick.emit();\r\n };\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n class={`xv-button ${this.variant}`}\r\n disabled={this.disabled}\r\n onClick={this.handleClick}\r\n >\r\n <slot name=\"icon-left\"></slot>\r\n\r\n <slot>\r\n {this.label}\r\n </slot>\r\n\r\n <slot name=\"icon-right\"></slot>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n border: 1px solid var(--border-subtle-00);\r\n background: var(--layer-layer-02);\r\n box-shadow: 0 1px 3px 1px rgba(39, 52, 53, 0.15), 0 1px 2px 0 rgba(39, 52, 53, 0.30);\r\n font-family: var(--ff-body, inherit);\r\n overflow: visible !important;\r\n}\r\n\r\n:host(.xv-card_vertical) {\r\n //max-width: 298px;\r\n // TODO: wright down correct styling for card size\r\n width: 100%!important;\r\n}\r\n\r\n:host(.xv-card_horizontal) {\r\n flex-direction: row;\r\n display: flex;\r\n width: max-content;\r\n\r\n .xv-card_media {\r\n &__content, ::slotted([slot=\"media\"]) {\r\n min-height: 100%;\r\n max-height: 100%;\r\n max-width: 160px;\r\n min-width: 160px;\r\n }\r\n }\r\n}\r\n\r\n.xv-card {\r\n &_content {\r\n padding: 16px;\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n text-align: left;\r\n }\r\n\r\n &_media {\r\n &__content, ::slotted([slot=\"media\"]) {\r\n max-width: 100%;\r\n min-width: 100%;\r\n min-height: 199px;\r\n max-height: 199px;\r\n object-fit: cover;\r\n object-position: center;\r\n }\r\n }\r\n\r\n &_header {\r\n &__content, ::slotted([slot=\"header\"]) {\r\n margin: 0 0 8px;\r\n color: var(--text-primary);\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n line-height: 24px;\r\n letter-spacing: -0.6px;\r\n }\r\n }\r\n\r\n &_body {\r\n flex: 1;\r\n &__content, ::slotted([slot=\"body\"]) {\r\n margin: 0 0 8px;\r\n color: var(--text-secondary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n letter-spacing: -0.1px;\r\n }\r\n }\r\n\r\n &_footer {}\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-card',\r\n styleUrl: 'xv-card.scss',\r\n shadow: true,\r\n})\r\nexport class XvCard {\r\n @Prop() variant: 'horizontal' | 'vertical' = 'vertical';\r\n @Prop() media: string;\r\n @Prop() header: string;\r\n @Prop() body: string;\r\n @Prop() footer: string;\r\n render() {\r\n return (\r\n <Host class={`xv-card xv-card_${this.variant}`} part={this.variant}>\r\n <div class=\"xv-card_media\">\r\n <slot name=\"media\">\r\n {this.media && <img class=\"xv-card_media__content\" src={this.media} alt={this.header} />}\r\n </slot>\r\n </div>\r\n\r\n <div class=\"xv-card_content\">\r\n <div class=\"xv-card_header\">\r\n <slot name=\"header\">\r\n {this.header && <p class=\"xv-card_header__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_body\">\r\n <slot name=\"body\">\r\n {this.body && <p class=\"xv-card_body__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_footer\">\r\n <slot name=\"footer\">{this.footer}</slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'xv-checkbox-v2',\n shadow: true, // ✅ Shadow DOM aktiviert\n})\nexport class XvCheckbox {\n @Element() el!: HTMLElement;\n\n private applyGlobalStyles() {\n const globalStyle = document.getElementById(\"brand-style\") as HTMLLinkElement;\n if (globalStyle) {\n const styleClone = document.createElement(\"style\");\n styleClone.innerHTML = `@import url('${globalStyle.href}');`;\n this.el.shadowRoot?.appendChild(styleClone);\n }\n }\n\n componentWillLoad() {\n this.applyGlobalStyles();\n }\n\n render() {\n return (\n <label class=\"checkbox-container\">\n <input type=\"checkbox\" />\n <span class=\"checkmark\"></span>\n <slot></slot>\n </label>\n );\n }\n}\n",":host {\r\n font-family: var(--ff-body, inherit);\r\n}\r\n\r\n:host(.xv-link_inline) {\r\n display: inline-block;\r\n .xv-link {\r\n text-decoration-line: underline;\r\n text-decoration-style: solid;\r\n text-decoration-skip-ink: none;\r\n text-decoration-thickness: auto;\r\n text-underline-offset: auto;\r\n text-underline-position: from-font;\r\n }\r\n}\r\n\r\n:host(.xv-link_standalone) {\r\n display: block;\r\n .xv-link {\r\n text-decoration-line: none;\r\n }\r\n}\r\n\r\n.xv-link {\r\n display: inline-flex;\r\n gap: 8px;\r\n align-items: center;\r\n color: var(--link-primary);\r\n font-family: var(--ff-body);\r\n font-style: normal;\r\n font-weight: 400;\r\n transition: color 200ms ease-in-out;\r\n\r\n &:active {\r\n color: var(--text-primary);\r\n }\r\n\r\n &:visited {\r\n color: var(--link-visted);\r\n }\r\n\r\n &:hover {\r\n color: var(--link-primary-hover);\r\n cursor: pointer;\r\n }\r\n\r\n &:disabled, &_disabled, &::part(disabled) {\r\n color: var(--text-disabled);\r\n pointer-events: none;\r\n cursor: initial;\r\n }\r\n\r\n &.sm {\r\n font-size: var(--fz-sm);\r\n line-height: 137.5%;\r\n }\r\n\r\n &.md {\r\n font-size: var(--fz-md);\r\n line-height: 128.571%;\r\n }\r\n\r\n &.lg {\r\n font-size: var(--fz-lg);\r\n line-height: 133.333%;\r\n }\r\n}\r\n","import { Component, h, Host, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-link',\r\n styleUrl: 'xv-link.scss',\r\n shadow: true,\r\n})\r\nexport class XvLink {\r\n @Prop() href: string;\r\n @Prop() target: '_self' | '_blank' | '_parent' | '_top';\r\n @Prop() disabled: boolean = false;\r\n @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n @Prop() variant: 'standalone' | 'inline' = 'inline';\r\n\r\n preventLinkHandler(e: PointerEvent) {\r\n if (!this.disabled) return;\r\n\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class={`xv-link_${this.variant}`}>\r\n <a\r\n href={this.href}\r\n onClick={this.preventLinkHandler.bind(this)}\r\n class={`xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`}\r\n target={this.target}\r\n >\r\n <slot name=\"icon-left\"></slot>\r\n\r\n <slot></slot>\r\n\r\n <slot name=\"icon-right\"></slot>\r\n </a>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n font-family: var(--ff-body, inherit);\r\n}\r\n","import { Component, Host, h, Prop, Watch, Element } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-progress-indicator',\r\n styleUrl: 'xv-progress-indicator.scss',\r\n shadow: true,\r\n})\r\nexport class XvProgressIndicator {\r\n @Element() el: HTMLElement;\r\n @Prop() progress: number = 0;\r\n\r\n // Update 'xv-progress-indicator-item' done status\r\n @Watch('progress')\r\n updateChildItems() {\r\n const items = this.el.children;\r\n const itemsCount = this.el.childElementCount;\r\n const progressPerItem = 100 / itemsCount;\r\n\r\n if (!items.length || !itemsCount) return;\r\n\r\n Array.from(items).forEach((item, index) => {\r\n const itemProgress = (index + 1) * progressPerItem;\r\n const done = this.progress >= itemProgress;\r\n (item as HTMLElement).setAttribute('done', done ? 'true' : 'false');\r\n });\r\n }\r\n\r\n // Load initial done status\r\n componentDidLoad() {\r\n this.updateChildItems()\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class=\"xv-progress-indicator\">\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host(.xv-progress-indicator-item) {\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n padding: 10px 16px;\r\n &:before {\r\n width: 100%;\r\n }\r\n\r\n &:before, .line {\r\n content: '';\r\n z-index: 1;\r\n display: inline-block;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n color: inherit;\r\n background-color: var(--border-subtle-01, grey);\r\n }\r\n\r\n .line {\r\n width: 0;\r\n color: inherit;\r\n transition: width 250ms ease;\r\n background-color: var(--background-brand, currentColor);\r\n }\r\n\r\n .icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 22px;\r\n height: 22px;\r\n max-width: 22px;\r\n max-height: 22px;\r\n border: 2px dashed var(--border-subtle-01, currentColor);\r\n border-radius: 50%;\r\n svg {\r\n opacity: 0;\r\n transition: opacity 500ms ease-in-out;\r\n }\r\n }\r\n\r\n .label {\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 18px;\r\n letter-spacing: 0.16px;\r\n }\r\n}\r\n\r\n:host(.done) {\r\n .icon {\r\n border-color: var(--background-brand, currentColor);\r\n color: var(--background-brand, inherit);\r\n border-style: solid;\r\n svg {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .line {\r\n width: 100% !important;\r\n background-color: var(--background-brand, currentColor);\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-progress-indicator-item',\r\n styleUrl: 'xv-progress-indicator-item.scss',\r\n shadow: true,\r\n})\r\nexport class XvProgressIndicatorItem {\r\n @Element() el: HTMLElement;\r\n @Prop({ reflect: false }) done: boolean = false;\r\n\r\n render() {\r\n return (\r\n <Host class={`xv-progress-indicator-item ${this.done ? 'done' : ''}`}>\r\n <span class=\"line\"/>\r\n <span class=\"icon\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 448 512\"\r\n width={14}\r\n height={14}\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"\r\n />\r\n </svg>\r\n </span>\r\n <p class=\"label\"><slot/></p>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n border-radius: 1000px;\r\n background-color: var(--background);\r\n color: var(--text-primary);\r\n font-family: var(--ff-body, inherit);\r\n\r\n .xv-tag_content {\r\n padding-left: 8px;\r\n padding-right: 8px;\r\n color: inherit;\r\n font-family: var(--ff-body);\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px;\r\n letter-spacing: 0.32px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .xv-tag_close {\r\n box-sizing: border-box;\r\n text-decoration: none;\r\n border: none;\r\n background-color: inherit;\r\n outline: none;\r\n border-spacing: 0;\r\n list-style: none outside none;\r\n margin: 0;\r\n padding: 0;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 62px;\r\n width: 15px;\r\n height: 15px;\r\n text-align: left;\r\n color: inherit;\r\n text-indent: 0;\r\n transition: opacity 300ms ease-in-out, filter 300ms ease-in-out;\r\n &:hover {\r\n cursor: pointer;\r\n filter: brightness(80%);\r\n }\r\n\r\n &:active {\r\n opacity: 0.7;\r\n }\r\n\r\n &:focus {\r\n outline: 1px solid currentColor;\r\n }\r\n\r\n &:after {\r\n overflow: hidden;\r\n width: inherit;\r\n height: inherit;\r\n color: inherit;\r\n font-size: 16px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n content: \"\\00d7\";\r\n }\r\n }\r\n}\r\n\r\n:host(.sm) {\r\n font-size: var(--fz-sm);\r\n}\r\n\r\n:host(.md) {\r\n font-size: var(--fz-md);\r\n .xv-tag_content {\r\n line-height: 24px;\r\n }\r\n\r\n .xv-tag_close {\r\n height: 24px;\r\n width: 24px;\r\n }\r\n}\r\n\r\n:host(.lg) {\r\n font-size: var(--fz-lg);\r\n .xv-tag_content {\r\n line-height: 26px;\r\n }\r\n\r\n .xv-tag_close {\r\n height: 26px;\r\n width: 26px;\r\n }\r\n}\r\n\r\n:host(.disabled) {\r\n pointer-events: none;\r\n background-color: var(--layer-01);\r\n color: var(--text-disabled);\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-tag',\r\n styleUrl: 'xv-tag.scss',\r\n shadow: true,\r\n})\r\nexport class XvTag {\r\n @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n @Prop() color: string = '';\r\n @Prop() bg: string = '';\r\n @Prop() disabled: boolean = false;\r\n @Prop() closeable: boolean = false;\r\n @Event() closeClick: EventEmitter<PointerEvent>;\r\n\r\n closeHandler(e: PointerEvent) {\r\n if (this.disabled) return;\r\n\r\n this.closeClick.emit(e);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n style={{ color: this.color, background: this.bg }}\r\n class={`xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}`}\r\n >\r\n <div class=\"xv-tag_content\">\r\n <slot></slot>\r\n </div>\r\n {this.closeable && (\r\n <button onClick={this.closeHandler.bind(this)} class=\"xv-tag_close\"></button>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n position: relative;\r\n display: inline-block;\r\n cursor: pointer;\r\n}\r\n\r\n/* General styles for tooltip */\r\n:host::before,\r\n:host::after {\r\n position: absolute;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\r\n z-index: 10;\r\n}\r\n\r\n/* Tooltip */\r\n:host::before {\r\n content: attr(tooltip);\r\n background: var(--background-inverse, #333);\r\n color: var(--icon-inverse, #fff);\r\n padding: var(--gap-sm, 5px) var(--gap-md, 16px);\r\n border-radius: 2px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-width: max(70vw);\r\n font-family: var(--fz-body, Tahoma);\r\n font-size: var(fz-md, 14px);\r\n font-weight: 400;\r\n line-height: 18px;\r\n letter-spacing: 0.16px;\r\n}\r\n\r\n/* Arrow */\r\n:host::after {\r\n content: \"\";\r\n border: 6px solid transparent;\r\n}\r\n\r\n/* Show Tooltip and arrow */\r\n:host(:hover)::before,\r\n:host(:hover)::after,\r\n:host(:focus)::before,\r\n:host(:focus)::after {\r\n opacity: 1;\r\n visibility: visible;\r\n}\r\n\r\n/* Tooltip positions */\r\n:host(.xv-tooltip_top)::before {\r\n bottom: 100%;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top)::after {\r\n bottom: 100%;\r\n left: 50%;\r\n border-top-color: var(--background-inverse, #333);\r\n transform: translateX(-50%) translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_top-left)::before {\r\n bottom: 100%;\r\n left: 0;\r\n transform: translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top-left)::after {\r\n bottom: 100%;\r\n left: 10px;\r\n border-top-color: black;\r\n transform: translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_top-right)::before {\r\n bottom: 100%;\r\n right: 0;\r\n transform: translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top-right)::after {\r\n bottom: 100%;\r\n right: 10px;\r\n border-top-color: var(--background-inverse, #333);\r\n transform: translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom)::before {\r\n top: 100%;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom)::after {\r\n top: 100%;\r\n left: 50%;\r\n border-bottom-color: black;\r\n transform: translateX(-50%) translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom-left)::before {\r\n top: 100%;\r\n left: 0;\r\n transform: translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom-left)::after {\r\n top: 100%;\r\n left: 10px;\r\n border-bottom-color: var(--background-inverse, #333);\r\n transform: translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom-right)::before {\r\n top: 100%;\r\n right: 0;\r\n transform: translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom-right)::after {\r\n top: 100%;\r\n right: 10px;\r\n border-bottom-color: var(--background-inverse, #333);\r\n transform: translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_left)::before {\r\n right: 100%;\r\n top: 50%;\r\n transform: translateY(-50%) translateX(-5px);\r\n}\r\n:host(.xv-tooltip_left)::after {\r\n right: 100%;\r\n top: 50%;\r\n border-left-color: var(--background-inverse, #333);\r\n transform: translateY(-50%) translateX(5px);\r\n}\r\n\r\n:host(.xv-tooltip_right)::before {\r\n left: 100%;\r\n top: 50%;\r\n transform: translateY(-50%) translateX(5px);\r\n}\r\n:host(.xv-tooltip_right)::after {\r\n left: 100%;\r\n top: 50%;\r\n border-right-color: var(--background-inverse, #333);\r\n transform: translateY(-50%) translateX(-5px);\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-tooltip',\r\n styleUrl: 'xv-tooltip.scss',\r\n shadow: true,\r\n})\r\nexport class XvTooltip {\r\n /** Message what will be shown for tooltip **/\r\n @Prop() message: string;\r\n /**\r\n * Tooltip and arrow position related to element\r\n * possible options: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'.\r\n * By default, \"top\"\r\n */\r\n @Prop() position: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right' = 'top';\r\n\r\n render() {\r\n return (\r\n <Host tooltip={this.message} class={`xv-tooltip_${this.position}`}>\r\n <slot>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width={16} height={16}>\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"\r\n />\r\n </svg>\r\n </slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"xv-accordion.xv-accordion-item.xv-button-v2.xv-card-v2.xv-checkbox-v2.xv-link.xv-progress-indicator.xv-progress-indicator-item.xv-tag.xv-tooltip.entry.cjs.js","mappings":"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","names":["uidGenerator","h","Host"],"sources":["src/components/xv-accordion/xv-accordion.scss?tag=xv-accordion&encapsulation=shadow","src/components/xv-accordion/xv-accordion.tsx","src/components/xv-accordion-item/xv-accordion-item.scss?tag=xv-accordion-item&encapsulation=shadow","src/components/xv-accordion-item/xv-accordion-item.tsx","src/components/xv-button/xv-button-v2.scss?tag=xv-button-v2&encapsulation=shadow","src/components/xv-button/xv-button.tsx","src/components/xv-card/xv-card.scss?tag=xv-card-v2&encapsulation=shadow","src/components/xv-card/xv-card.tsx","src/components/xv-checkbox/xv-checkbox.tsx","src/components/xv-link/xv-link.scss?tag=xv-link&encapsulation=shadow","src/components/xv-link/xv-link.tsx","src/components/xv-progress-indicator/xv-progress-indicator.scss?tag=xv-progress-indicator&encapsulation=shadow","src/components/xv-progress-indicator/xv-progress-indicator.tsx","src/components/xv-progress-indicator-item/xv-progress-indicator-item.scss?tag=xv-progress-indicator-item&encapsulation=shadow","src/components/xv-progress-indicator-item/xv-progress-indicator-item.tsx","src/components/xv-tag/xv-tag.scss?tag=xv-tag&encapsulation=shadow","src/components/xv-tag/xv-tag.tsx","src/components/xv-tooltip/xv-tooltip.scss?tag=xv-tooltip&encapsulation=shadow","src/components/xv-tooltip/xv-tooltip.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}\r\n","import { Component, Host, h, Event, EventEmitter, Method, State, Prop } from '@stencil/core';\r\nimport { uidGenerator } from '../../utils/utils';\r\n\r\n@Component({\r\n tag: 'xv-accordion',\r\n styleUrl: 'xv-accordion.scss',\r\n shadow: true,\r\n})\r\nexport class XvAccordion {\r\n @Prop() multiple: boolean = false;\r\n @Prop() xvId: string = uidGenerator();\r\n @Prop({ mutable: true }) value: string;\r\n @State() opened: Set<string> = new Set();\r\n @Event() accordionChange: EventEmitter<{ opened: Set<string>, id: string }>;\r\n\r\n @Method()\r\n async toggleItem(value: string) {\r\n if (this.opened.has(value)) {\r\n this.opened.delete(value);\r\n } else {\r\n if (!this.multiple) this.opened.clear();\r\n this.value = value;\r\n this.opened.add(this.value);\r\n }\r\n\r\n this.accordionChange.emit({ opened: this.opened, id: this.xvId });\r\n\r\n return { opened: this.opened, id: this.xvId };\r\n }\r\n\r\n componentWillLoad() {\r\n if (this.value) {\r\n return this.toggleItem(this.value);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class=\"xv-accordion\" data-id={this.xvId}>\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n border-top: 1px solid var(--border-subtle-01);\r\n display: flex;\r\n flex-direction: column;\r\n font-family: var(--ff-body, inherit);\r\n}\r\n\r\n:host(.disabled) {\r\n .label {\r\n color: var(--text-disabled);\r\n &:hover {\r\n cursor: initial;\r\n background-color: transparent;\r\n }\r\n }\r\n}\r\n\r\n.label {\r\n padding: 14px 16px;\r\n display: inline-flex;\r\n align-items: center;\r\n column-gap: 20px;\r\n justify-content: space-between;\r\n text-align: left;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n letter-spacing: 0.16px;\r\n background-color: transparent;\r\n transition: background-color 200ms ease-in-out;\r\n &>span {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 1;\r\n -webkit-box-orient: vertical;\r\n }\r\n\r\n &:hover {\r\n cursor: pointer;\r\n background-color: var(--layer-hover-01);\r\n }\r\n\r\n &:after {\r\n content: '';\r\n border: solid black;\r\n border-width: 0 2px 2px 0;\r\n display: inline-block;\r\n padding: 4.66px;\r\n transition: transform 100ms ease-in-out;\r\n transform: rotate(45deg);\r\n }\r\n\r\n &.opened:after {\r\n transform: rotate(-135deg);\r\n }\r\n}\r\n\r\n.content {\r\n padding: 0 16px;\r\n text-align: left;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n overflow: hidden;\r\n max-height: 0;\r\n transition: max-height 300ms ease-in-out, padding 250ms ease 50ms;\r\n &.opened {\r\n padding: 14px 16px;\r\n max-height: 500px;\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop, State, Listen, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-accordion-item',\r\n styleUrl: 'xv-accordion-item.scss',\r\n shadow: true,\r\n})\r\nexport class XvAccordionItem {\r\n @Element() el: HTMLElement;\r\n @Prop() disabled: boolean = false;\r\n @Prop() label: string;\r\n @Prop() value: string;\r\n @State() isOpen: boolean = false;\r\n @Event() itemToggle: EventEmitter;\r\n\r\n @Listen('accordionChange', { target: 'body' })\r\n handleAccordionChange(event: CustomEvent<{ opened: Set<string>, id: string }>) {\r\n const parentAccordionId = this.el.closest('[data-id]')?.getAttribute('data-id');\r\n if (event.detail.id !== parentAccordionId) return;\r\n this.isOpen = event.detail.opened.has(this.value);\r\n }\r\n\r\n toggle() {\r\n if (this.disabled) return;\r\n this.isOpen = !this.isOpen;\r\n this.el.closest('xv-accordion')?.toggleItem?.(this.value);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class={`${this.disabled ? 'disabled' : ''}`}>\r\n <label class={`label ${this.isOpen ? 'opened' : 'closed'}`} onClick={this.toggle.bind(this)}>\r\n <span>{this.label}</span>\r\n </label>\r\n <div class={`content ${this.isOpen ? 'opened' : 'closed'}`}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n --focus-border-width: 2px;\r\n --focus-border-style: solid;\r\n --button-ghost: tarnsparent;\r\n --text-disabled-opacity: 0.25;\r\n --button-border-radius: 3px;\r\n --button-border-width: 1px;\r\n --button-border-style: solid;\r\n --button-border-color-accent: #97BF0D;\r\n --button-border-color-primary: #273435;\r\n --button-border-color-secondary: #D1D1D1;\r\n --button-border-color-ghost: tarnsparent;\r\n --button-ghost-hover: tarnsparent;\r\n --button-ghost-active: rgba(139, 139, 139, 0.5);\r\n --button-accent-disabled: #D1D1D1;\r\n --button-primary-disabled: #D1D1D1;\r\n --button-secondary-disabled: #D1D1D1;\r\n --button-tertiary-disabled: tarnsparent;\r\n --button-ghost-disabled: tarnsparent;\r\n\r\n button {\r\n font-family: inherit;\r\n font-size: 16px;\r\n font-weight: 700;\r\n padding: 0 20px;\r\n height: 40px;\r\n line-height: 40px;\r\n cursor: pointer;\r\n box-sizing: border-box;\r\n transition:\r\n background-color 0.2s ease-in-out,\r\n filter 0.2s ease-in-out,\r\n transform 0.1s ease-in-out,\r\n border-color 0.2s ease-in-out,\r\n border-width 0.2s ease-in-out,\r\n box-shadow 0.2s ease-in-out;\r\n }\r\n}\r\n\r\n.xv-button {\r\n /* ✅ Accent Button */\r\n &.accent {\r\n background-color: var(--button-accent);\r\n color: var(--text-on-color);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-accent);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-accent-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-accent-active);\r\n color: var(--text-on-color);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-accent-disabled);\r\n color: var(--text-on-color-disabled);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-accent-disabled);\r\n }\r\n\r\n }\r\n\r\n /* ✅ Primary Button */\r\n &.primary {\r\n background-color: var(--button-primary);\r\n color: var(--text-on-color);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-primary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-primary-hover)\r\n }\r\n &:active {\r\n background-color: var(--button-primary-active)\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-primary-disabled);\r\n color: var(--text-on-color-disabled);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-primary-disabled);\r\n }\r\n }\r\n\r\n /* ✅ Secondary Button */\r\n &.secondary {\r\n background-color: var(--button-secondary);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-secondary-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-secondary-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-secondary-disabled);\r\n color: var(--text-on-color-disabled);\r\n }\r\n }\r\n\r\n /* ✅ Tertiary Button */\r\n &.tertiary {\r\n background-color: var(--button-ghost);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-tertiary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-tertiary-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-tertiary-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-tertiary-disabled);\r\n color: var(--text-disabled);\r\n opacity: var(--text-disabled-opacity);\r\n }\r\n }\r\n\r\n /* ✅ Ghost Button */\r\n &.ghost {\r\n background-color: var(--button-ghost);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-ghost);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-ghost-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-ghost-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-ghost-disabled);\r\n color: var(--text-disabled);\r\n opacity: var(--text-disabled-opacity);\r\n }\r\n }\r\n}\r\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\r\n\r\n\r\n@Component({\r\n tag: 'xv-button-v2',\r\n styleUrl: 'xv-button-v2.scss',\r\n shadow: true,\r\n})\r\nexport class XvButton {\r\n /** Button label */\r\n @Prop() label: string = '';\r\n\r\n /** Variant */\r\n @Prop() variant: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost' = 'primary';\r\n\r\n /** Disabled state */\r\n @Prop() disabled: boolean = false;\r\n\r\n /** Emits when the button is clicked */\r\n @Event() buttonClick!: EventEmitter<void>;\r\n\r\n /** Handle click only if not disabled */\r\n private handleClick = () => {\r\n if (this.disabled) {\r\n return;\r\n }\r\n this.buttonClick.emit();\r\n };\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n class={`xv-button ${this.variant}`}\r\n disabled={this.disabled}\r\n onClick={this.handleClick}\r\n >\r\n <slot name=\"icon-left\"></slot>\r\n\r\n <slot>\r\n {this.label}\r\n </slot>\r\n\r\n <slot name=\"icon-right\"></slot>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n border: 1px solid var(--border-subtle-00);\r\n background: var(--layer-layer-02);\r\n box-shadow: 0 1px 3px 1px rgba(39, 52, 53, 0.15), 0 1px 2px 0 rgba(39, 52, 53, 0.30);\r\n font-family: var(--ff-body, inherit);\r\n overflow: visible !important;\r\n}\r\n\r\n:host(.xv-card_vertical) {\r\n //max-width: 298px;\r\n // TODO: wright down correct styling for card size\r\n width: 100%!important;\r\n}\r\n\r\n:host(.xv-card_horizontal) {\r\n flex-direction: row;\r\n display: flex;\r\n width: max-content;\r\n\r\n .xv-card_media {\r\n &__content, ::slotted([slot=\"media\"]) {\r\n min-height: 100%;\r\n max-height: 100%;\r\n max-width: 160px;\r\n min-width: 160px;\r\n }\r\n }\r\n}\r\n\r\n.xv-card {\r\n &_content {\r\n padding: 16px;\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n text-align: left;\r\n }\r\n\r\n &_media {\r\n &__content, ::slotted([slot=\"media\"]) {\r\n max-width: 100%;\r\n min-width: 100%;\r\n min-height: 199px;\r\n max-height: 199px;\r\n object-fit: cover;\r\n object-position: center;\r\n }\r\n }\r\n\r\n &_header {\r\n &__content, ::slotted([slot=\"header\"]) {\r\n margin: 0 0 8px;\r\n color: var(--text-primary);\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n line-height: 24px;\r\n letter-spacing: -0.6px;\r\n }\r\n }\r\n\r\n &_body {\r\n flex: 1;\r\n &__content, ::slotted([slot=\"body\"]) {\r\n margin: 0 0 8px;\r\n color: var(--text-secondary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n letter-spacing: -0.1px;\r\n }\r\n }\r\n\r\n &_footer {}\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-card-v2',\r\n styleUrl: 'xv-card.scss',\r\n shadow: true,\r\n})\r\nexport class XvCard {\r\n @Prop() variant: 'horizontal' | 'vertical' = 'vertical';\r\n @Prop() media: string;\r\n @Prop() header: string;\r\n @Prop() body: string;\r\n @Prop() footer: string;\r\n render() {\r\n return (\r\n <Host class={`xv-card xv-card_${this.variant}`} part={this.variant}>\r\n <div class=\"xv-card_media\">\r\n <slot name=\"media\">\r\n {this.media && <img class=\"xv-card_media__content\" src={this.media} alt={this.header} />}\r\n </slot>\r\n </div>\r\n\r\n <div class=\"xv-card_content\">\r\n <div class=\"xv-card_header\">\r\n <slot name=\"header\">\r\n {this.header && <p class=\"xv-card_header__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_body\">\r\n <slot name=\"body\">\r\n {this.body && <p class=\"xv-card_body__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_footer\">\r\n <slot name=\"footer\">{this.footer}</slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'xv-checkbox-v2',\n shadow: true, // ✅ Shadow DOM aktiviert\n})\nexport class XvCheckbox {\n @Element() el!: HTMLElement;\n\n private applyGlobalStyles() {\n const globalStyle = document.getElementById(\"brand-style\") as HTMLLinkElement;\n if (globalStyle) {\n const styleClone = document.createElement(\"style\");\n styleClone.innerHTML = `@import url('${globalStyle.href}');`;\n this.el.shadowRoot?.appendChild(styleClone);\n }\n }\n\n componentWillLoad() {\n this.applyGlobalStyles();\n }\n\n render() {\n return (\n <label class=\"checkbox-container\">\n <input type=\"checkbox\" />\n <span class=\"checkmark\"></span>\n <slot></slot>\n </label>\n );\n }\n}\n",":host {\r\n font-family: var(--ff-body, inherit);\r\n}\r\n\r\n:host(.xv-link_inline) {\r\n display: inline-block;\r\n .xv-link {\r\n text-decoration-line: underline;\r\n text-decoration-style: solid;\r\n text-decoration-skip-ink: none;\r\n text-decoration-thickness: auto;\r\n text-underline-offset: auto;\r\n text-underline-position: from-font;\r\n }\r\n}\r\n\r\n:host(.xv-link_standalone) {\r\n display: block;\r\n .xv-link {\r\n text-decoration-line: none;\r\n }\r\n}\r\n\r\n.xv-link {\r\n display: inline-flex;\r\n gap: 8px;\r\n align-items: center;\r\n color: var(--link-primary);\r\n font-family: var(--ff-body);\r\n font-style: normal;\r\n font-weight: 400;\r\n transition: color 200ms ease-in-out;\r\n\r\n &:active {\r\n color: var(--text-primary);\r\n }\r\n\r\n &:visited {\r\n color: var(--link-visted);\r\n }\r\n\r\n &:hover {\r\n color: var(--link-primary-hover);\r\n cursor: pointer;\r\n }\r\n\r\n &:disabled, &_disabled, &::part(disabled) {\r\n color: var(--text-disabled);\r\n pointer-events: none;\r\n cursor: initial;\r\n }\r\n\r\n &.sm {\r\n font-size: var(--fz-sm);\r\n line-height: 137.5%;\r\n }\r\n\r\n &.md {\r\n font-size: var(--fz-md);\r\n line-height: 128.571%;\r\n }\r\n\r\n &.lg {\r\n font-size: var(--fz-lg);\r\n line-height: 133.333%;\r\n }\r\n}\r\n","import { Component, h, Host, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-link',\r\n styleUrl: 'xv-link.scss',\r\n shadow: true,\r\n})\r\nexport class XvLink {\r\n @Prop() href: string;\r\n @Prop() target: '_self' | '_blank' | '_parent' | '_top';\r\n @Prop() disabled: boolean = false;\r\n @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n @Prop() variant: 'standalone' | 'inline' = 'inline';\r\n\r\n preventLinkHandler(e: PointerEvent) {\r\n if (!this.disabled) return;\r\n\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class={`xv-link_${this.variant}`}>\r\n <a\r\n href={this.href}\r\n onClick={this.preventLinkHandler.bind(this)}\r\n class={`xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`}\r\n target={this.target}\r\n >\r\n <slot name=\"icon-left\"></slot>\r\n\r\n <slot></slot>\r\n\r\n <slot name=\"icon-right\"></slot>\r\n </a>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n font-family: var(--ff-body, inherit);\r\n}\r\n","import { Component, Host, h, Prop, Watch, Element } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-progress-indicator',\r\n styleUrl: 'xv-progress-indicator.scss',\r\n shadow: true,\r\n})\r\nexport class XvProgressIndicator {\r\n @Element() el: HTMLElement;\r\n @Prop() progress: number = 0;\r\n\r\n // Update 'xv-progress-indicator-item' done status\r\n @Watch('progress')\r\n updateChildItems() {\r\n const items = this.el.children;\r\n const itemsCount = this.el.childElementCount;\r\n const progressPerItem = 100 / itemsCount;\r\n\r\n if (!items.length || !itemsCount) return;\r\n\r\n Array.from(items).forEach((item, index) => {\r\n const itemProgress = (index + 1) * progressPerItem;\r\n const done = this.progress >= itemProgress;\r\n (item as HTMLElement).setAttribute('done', done ? 'true' : 'false');\r\n });\r\n }\r\n\r\n // Load initial done status\r\n componentDidLoad() {\r\n this.updateChildItems()\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class=\"xv-progress-indicator\">\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host(.xv-progress-indicator-item) {\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n padding: 10px 16px;\r\n &:before {\r\n width: 100%;\r\n }\r\n\r\n &:before, .line {\r\n content: '';\r\n z-index: 1;\r\n display: inline-block;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n color: inherit;\r\n background-color: var(--border-subtle-01, grey);\r\n }\r\n\r\n .line {\r\n width: 0;\r\n color: inherit;\r\n transition: width 250ms ease;\r\n background-color: var(--background-brand, currentColor);\r\n }\r\n\r\n .icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 22px;\r\n height: 22px;\r\n max-width: 22px;\r\n max-height: 22px;\r\n border: 2px dashed var(--border-subtle-01, currentColor);\r\n border-radius: 50%;\r\n svg {\r\n opacity: 0;\r\n transition: opacity 500ms ease-in-out;\r\n }\r\n }\r\n\r\n .label {\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 18px;\r\n letter-spacing: 0.16px;\r\n }\r\n}\r\n\r\n:host(.done) {\r\n .icon {\r\n border-color: var(--background-brand, currentColor);\r\n color: var(--background-brand, inherit);\r\n border-style: solid;\r\n svg {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .line {\r\n width: 100% !important;\r\n background-color: var(--background-brand, currentColor);\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-progress-indicator-item',\r\n styleUrl: 'xv-progress-indicator-item.scss',\r\n shadow: true,\r\n})\r\nexport class XvProgressIndicatorItem {\r\n @Element() el: HTMLElement;\r\n @Prop({ reflect: false }) done: boolean = false;\r\n\r\n render() {\r\n return (\r\n <Host class={`xv-progress-indicator-item ${this.done ? 'done' : ''}`}>\r\n <span class=\"line\"/>\r\n <span class=\"icon\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 448 512\"\r\n width={14}\r\n height={14}\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"\r\n />\r\n </svg>\r\n </span>\r\n <p class=\"label\"><slot/></p>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n border-radius: 1000px;\r\n background-color: var(--background);\r\n color: var(--text-primary);\r\n font-family: var(--ff-body, inherit);\r\n\r\n .xv-tag_content {\r\n padding-left: 8px;\r\n padding-right: 8px;\r\n color: inherit;\r\n font-family: var(--ff-body);\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px;\r\n letter-spacing: 0.32px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .xv-tag_close {\r\n box-sizing: border-box;\r\n text-decoration: none;\r\n border: none;\r\n background-color: inherit;\r\n outline: none;\r\n border-spacing: 0;\r\n list-style: none outside none;\r\n margin: 0;\r\n padding: 0;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 62px;\r\n width: 15px;\r\n height: 15px;\r\n text-align: left;\r\n color: inherit;\r\n text-indent: 0;\r\n transition: opacity 300ms ease-in-out, filter 300ms ease-in-out;\r\n &:hover {\r\n cursor: pointer;\r\n filter: brightness(80%);\r\n }\r\n\r\n &:active {\r\n opacity: 0.7;\r\n }\r\n\r\n &:focus {\r\n outline: 1px solid currentColor;\r\n }\r\n\r\n &:after {\r\n overflow: hidden;\r\n width: inherit;\r\n height: inherit;\r\n color: inherit;\r\n font-size: 16px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n content: \"\\00d7\";\r\n }\r\n }\r\n}\r\n\r\n:host(.sm) {\r\n font-size: var(--fz-sm);\r\n}\r\n\r\n:host(.md) {\r\n font-size: var(--fz-md);\r\n .xv-tag_content {\r\n line-height: 24px;\r\n }\r\n\r\n .xv-tag_close {\r\n height: 24px;\r\n width: 24px;\r\n }\r\n}\r\n\r\n:host(.lg) {\r\n font-size: var(--fz-lg);\r\n .xv-tag_content {\r\n line-height: 26px;\r\n }\r\n\r\n .xv-tag_close {\r\n height: 26px;\r\n width: 26px;\r\n }\r\n}\r\n\r\n:host(.disabled) {\r\n pointer-events: none;\r\n background-color: var(--layer-01);\r\n color: var(--text-disabled);\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-tag',\r\n styleUrl: 'xv-tag.scss',\r\n shadow: true,\r\n})\r\nexport class XvTag {\r\n @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n @Prop() color: string = '';\r\n @Prop() bg: string = '';\r\n @Prop() disabled: boolean = false;\r\n @Prop() closeable: boolean = false;\r\n @Event() closeClick: EventEmitter<PointerEvent>;\r\n\r\n closeHandler(e: PointerEvent) {\r\n if (this.disabled) return;\r\n\r\n this.closeClick.emit(e);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n style={{ color: this.color, background: this.bg }}\r\n class={`xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}`}\r\n >\r\n <div class=\"xv-tag_content\">\r\n <slot></slot>\r\n </div>\r\n {this.closeable && (\r\n <button onClick={this.closeHandler.bind(this)} class=\"xv-tag_close\"></button>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n position: relative;\r\n display: inline-block;\r\n cursor: pointer;\r\n}\r\n\r\n/* General styles for tooltip */\r\n:host::before,\r\n:host::after {\r\n position: absolute;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\r\n z-index: 10;\r\n}\r\n\r\n/* Tooltip */\r\n:host::before {\r\n content: attr(tooltip);\r\n background: var(--background-inverse, #333);\r\n color: var(--icon-inverse, #fff);\r\n padding: var(--gap-sm, 5px) var(--gap-md, 16px);\r\n border-radius: 2px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-width: max(70vw);\r\n font-family: var(--fz-body, Tahoma);\r\n font-size: var(fz-md, 14px);\r\n font-weight: 400;\r\n line-height: 18px;\r\n letter-spacing: 0.16px;\r\n}\r\n\r\n/* Arrow */\r\n:host::after {\r\n content: \"\";\r\n border: 6px solid transparent;\r\n}\r\n\r\n/* Show Tooltip and arrow */\r\n:host(:hover)::before,\r\n:host(:hover)::after,\r\n:host(:focus)::before,\r\n:host(:focus)::after {\r\n opacity: 1;\r\n visibility: visible;\r\n}\r\n\r\n/* Tooltip positions */\r\n:host(.xv-tooltip_top)::before {\r\n bottom: 100%;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top)::after {\r\n bottom: 100%;\r\n left: 50%;\r\n border-top-color: var(--background-inverse, #333);\r\n transform: translateX(-50%) translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_top-left)::before {\r\n bottom: 100%;\r\n left: 0;\r\n transform: translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top-left)::after {\r\n bottom: 100%;\r\n left: 10px;\r\n border-top-color: black;\r\n transform: translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_top-right)::before {\r\n bottom: 100%;\r\n right: 0;\r\n transform: translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top-right)::after {\r\n bottom: 100%;\r\n right: 10px;\r\n border-top-color: var(--background-inverse, #333);\r\n transform: translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom)::before {\r\n top: 100%;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom)::after {\r\n top: 100%;\r\n left: 50%;\r\n border-bottom-color: black;\r\n transform: translateX(-50%) translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom-left)::before {\r\n top: 100%;\r\n left: 0;\r\n transform: translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom-left)::after {\r\n top: 100%;\r\n left: 10px;\r\n border-bottom-color: var(--background-inverse, #333);\r\n transform: translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom-right)::before {\r\n top: 100%;\r\n right: 0;\r\n transform: translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom-right)::after {\r\n top: 100%;\r\n right: 10px;\r\n border-bottom-color: var(--background-inverse, #333);\r\n transform: translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_left)::before {\r\n right: 100%;\r\n top: 50%;\r\n transform: translateY(-50%) translateX(-5px);\r\n}\r\n:host(.xv-tooltip_left)::after {\r\n right: 100%;\r\n top: 50%;\r\n border-left-color: var(--background-inverse, #333);\r\n transform: translateY(-50%) translateX(5px);\r\n}\r\n\r\n:host(.xv-tooltip_right)::before {\r\n left: 100%;\r\n top: 50%;\r\n transform: translateY(-50%) translateX(5px);\r\n}\r\n:host(.xv-tooltip_right)::after {\r\n left: 100%;\r\n top: 50%;\r\n border-right-color: var(--background-inverse, #333);\r\n transform: translateY(-50%) translateX(-5px);\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-tooltip',\r\n styleUrl: 'xv-tooltip.scss',\r\n shadow: true,\r\n})\r\nexport class XvTooltip {\r\n /** Message what will be shown for tooltip **/\r\n @Prop() message: string;\r\n /**\r\n * Tooltip and arrow position related to element\r\n * possible options: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'.\r\n * By default, \"top\"\r\n */\r\n @Prop() position: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right' = 'top';\r\n\r\n render() {\r\n return (\r\n <Host tooltip={this.message} class={`xv-tooltip_${this.position}`}>\r\n <slot>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width={16} height={16}>\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"\r\n />\r\n </svg>\r\n </slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
package/dist/cjs/xv-webcomponents.cjs.js CHANGED
@@ -19,7 +19,7 @@ var patchBrowser = () => {
19
19
 
20
20
  patchBrowser().then(async (options) => {
21
21
  await appGlobals.globalScripts();
22
- return index.bootstrapLazy([["xv-accordion_10.cjs",[[1,"xv-accordion",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[1,"xv-accordion-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-button-v2",{"label":[1],"variant":[1],"disabled":[4]}],[1,"xv-card",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[1,"xv-checkbox-v2"],[1,"xv-link",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[1,"xv-progress-indicator",{"progress":[2]},null,{"progress":["updateChildItems"]}],[1,"xv-progress-indicator-item",{"done":[4]}],[1,"xv-tag",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[1,"xv-tooltip",{"message":[1],"position":[1]}]]],["xv-breadcrumbs.cjs",[[1,"xv-breadcrumbs"]]]], options);
22
+ return index.bootstrapLazy([["xv-accordion_10.cjs",[[1,"xv-accordion",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[1,"xv-accordion-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-button-v2",{"label":[1],"variant":[1],"disabled":[4]}],[1,"xv-card-v2",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[1,"xv-checkbox-v2"],[1,"xv-link",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[1,"xv-progress-indicator",{"progress":[2]},null,{"progress":["updateChildItems"]}],[1,"xv-progress-indicator-item",{"done":[4]}],[1,"xv-tag",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[1,"xv-tooltip",{"message":[1],"position":[1]}]]],["xv-breadcrumbs.cjs",[[1,"xv-breadcrumbs"]]]], options);
23
23
  });
24
24
 
25
25
  exports.setNonce = index.setNonce;
package/dist/collection/components/xv-card/xv-card.js CHANGED
@@ -4,9 +4,9 @@ export class XvCard {
4
4
  this.variant = 'vertical';
5
5
  }
6
6
  render() {
7
- return (h(Host, { key: 'c8ec1bfefb9a6cb92b316eab36d3a4e8a08e1a78', class: `xv-card xv-card_${this.variant}`, part: this.variant }, h("div", { key: 'f6274c858ce8333fd2de700b8f0b20921eb7ba09', class: "xv-card_media" }, h("slot", { key: '91105c9e61b8dfe46411bf095dd196f969e9fc02', name: "media" }, this.media && h("img", { key: '2101315142f14a478bf2dd2eb72f7ce3922dfa44', class: "xv-card_media__content", src: this.media, alt: this.header }))), h("div", { key: '58c284ccd7cde840c1808aa14185eb1c70de4751', class: "xv-card_content" }, h("div", { key: 'fb72c62a0d7b5bfedb9a14b7fd8cc4750cfac434', class: "xv-card_header" }, h("slot", { key: 'a8ef5cc27eb4b691e5f8fae2544fe96ccc202fdf', name: "header" }, this.header && h("p", { key: '01fc1daadbb56f4a2f92bd704db06e08a747cd77', class: "xv-card_header__content" }, this.header))), h("div", { key: '2950f470bd305143908ba1bb170da068d6d598f6', class: "xv-card_body" }, h("slot", { key: 'ef9fe6d7daaced77c27483b66c8b01dacfc6713a', name: "body" }, this.body && h("p", { key: '8afd1196e2a45176b503c6be29fdd85ac0e93a83', class: "xv-card_body__content" }, this.header))), h("div", { key: '42e791cfadf951a1e0d99a5a500f52f1553bedfd', class: "xv-card_footer" }, h("slot", { key: 'ac81fb8b06bba6a1851afb344c325ea3a521fceb', name: "footer" }, this.footer)))));
7
+ return (h(Host, { key: '954936e5ea5014bb4c58fed8946ebba8598e6f3d', class: `xv-card xv-card_${this.variant}`, part: this.variant }, h("div", { key: '357b2524c23b8af0730892c90db84dda20990070', class: "xv-card_media" }, h("slot", { key: '02f2e73b4aed200833751e60bdfdc7151477576b', name: "media" }, this.media && h("img", { key: 'b27510aae0d35583fa7ccf75396289751611780a', class: "xv-card_media__content", src: this.media, alt: this.header }))), h("div", { key: '61c711fcf6e82d6da9761411c0ceef7d0407caca', class: "xv-card_content" }, h("div", { key: '7b476457734b9a03e525a409b839284846845189', class: "xv-card_header" }, h("slot", { key: 'c5c068a0b6d61ab1255276e4c2c72e039f5f9909', name: "header" }, this.header && h("p", { key: 'dde81bf7813870b4dd3514a027d02518d31acffe', class: "xv-card_header__content" }, this.header))), h("div", { key: '7fda70bb56b9313d868463bfee51a68bfb8e65c8', class: "xv-card_body" }, h("slot", { key: '3acbfa548e594f01cd9d514b0f7d7596b13900a6', name: "body" }, this.body && h("p", { key: '1a399d0a0351c4a0f1d166009f9467fed8a7e2dc', class: "xv-card_body__content" }, this.header))), h("div", { key: '7458f3c1612205f50ba2692b864089b4ef87e7f2', class: "xv-card_footer" }, h("slot", { key: '3e83fe4bfcda18cf9f46c304603f0a6ed0df4361', name: "footer" }, this.footer)))));
8
8
  }
9
- static get is() { return "xv-card"; }
9
+ static get is() { return "xv-card-v2"; }
10
10
  static get encapsulation() { return "shadow"; }
11
11
  static get originalStyleUrls() {
12
12
  return {
package/dist/collection/components/xv-card/xv-card.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"xv-card.js","sourceRoot":"","sources":["../../../src/components/xv-card/xv-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,MAAM;IALnB;QAMU,YAAO,GAA8B,UAAU,CAAC;KAgCzD;IA3BC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO;YAChE,4DAAK,KAAK,EAAC,eAAe;gBACxB,6DAAM,IAAI,EAAC,OAAO,IACf,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,wBAAwB,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAI,CACnF,CACH;YAEN,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,MAAM,IAAI,0DAAG,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,MAAM,CAAK,CAC/D,CACH;gBACN,4DAAK,KAAK,EAAC,cAAc;oBACvB,6DAAM,IAAI,EAAC,MAAM,IACd,IAAI,CAAC,IAAI,IAAI,0DAAG,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,MAAM,CAAK,CAC3D,CACH;gBACN,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,6DAAM,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CACpC,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-card',\r\n styleUrl: 'xv-card.scss',\r\n shadow: true,\r\n})\r\nexport class XvCard {\r\n @Prop() variant: 'horizontal' | 'vertical' = 'vertical';\r\n @Prop() media: string;\r\n @Prop() header: string;\r\n @Prop() body: string;\r\n @Prop() footer: string;\r\n render() {\r\n return (\r\n <Host class={`xv-card xv-card_${this.variant}`} part={this.variant}>\r\n <div class=\"xv-card_media\">\r\n <slot name=\"media\">\r\n {this.media && <img class=\"xv-card_media__content\" src={this.media} alt={this.header} />}\r\n </slot>\r\n </div>\r\n\r\n <div class=\"xv-card_content\">\r\n <div class=\"xv-card_header\">\r\n <slot name=\"header\">\r\n {this.header && <p class=\"xv-card_header__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_body\">\r\n <slot name=\"body\">\r\n {this.body && <p class=\"xv-card_body__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_footer\">\r\n <slot name=\"footer\">{this.footer}</slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"xv-card.js","sourceRoot":"","sources":["../../../src/components/xv-card/xv-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,MAAM;IALnB;QAMU,YAAO,GAA8B,UAAU,CAAC;KAgCzD;IA3BC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO;YAChE,4DAAK,KAAK,EAAC,eAAe;gBACxB,6DAAM,IAAI,EAAC,OAAO,IACf,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,wBAAwB,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAI,CACnF,CACH;YAEN,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,MAAM,IAAI,0DAAG,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,MAAM,CAAK,CAC/D,CACH;gBACN,4DAAK,KAAK,EAAC,cAAc;oBACvB,6DAAM,IAAI,EAAC,MAAM,IACd,IAAI,CAAC,IAAI,IAAI,0DAAG,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,MAAM,CAAK,CAC3D,CACH;gBACN,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,6DAAM,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CACpC,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-card-v2',\r\n styleUrl: 'xv-card.scss',\r\n shadow: true,\r\n})\r\nexport class XvCard {\r\n @Prop() variant: 'horizontal' | 'vertical' = 'vertical';\r\n @Prop() media: string;\r\n @Prop() header: string;\r\n @Prop() body: string;\r\n @Prop() footer: string;\r\n render() {\r\n return (\r\n <Host class={`xv-card xv-card_${this.variant}`} part={this.variant}>\r\n <div class=\"xv-card_media\">\r\n <slot name=\"media\">\r\n {this.media && <img class=\"xv-card_media__content\" src={this.media} alt={this.header} />}\r\n </slot>\r\n </div>\r\n\r\n <div class=\"xv-card_content\">\r\n <div class=\"xv-card_header\">\r\n <slot name=\"header\">\r\n {this.header && <p class=\"xv-card_header__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_body\">\r\n <slot name=\"body\">\r\n {this.body && <p class=\"xv-card_body__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_footer\">\r\n <slot name=\"footer\">{this.footer}</slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
package/dist/esm/loader.js CHANGED
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
5
5
  const defineCustomElements = async (win, options) => {
6
6
  if (typeof window === 'undefined') return undefined;
7
7
  await globalScripts();
8
- return bootstrapLazy([["xv-accordion_10",[[1,"xv-accordion",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[1,"xv-accordion-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-button-v2",{"label":[1],"variant":[1],"disabled":[4]}],[1,"xv-card",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[1,"xv-checkbox-v2"],[1,"xv-link",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[1,"xv-progress-indicator",{"progress":[2]},null,{"progress":["updateChildItems"]}],[1,"xv-progress-indicator-item",{"done":[4]}],[1,"xv-tag",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[1,"xv-tooltip",{"message":[1],"position":[1]}]]],["xv-breadcrumbs",[[1,"xv-breadcrumbs"]]]], options);
8
+ return bootstrapLazy([["xv-accordion_10",[[1,"xv-accordion",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[1,"xv-accordion-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-button-v2",{"label":[1],"variant":[1],"disabled":[4]}],[1,"xv-card-v2",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[1,"xv-checkbox-v2"],[1,"xv-link",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[1,"xv-progress-indicator",{"progress":[2]},null,{"progress":["updateChildItems"]}],[1,"xv-progress-indicator-item",{"done":[4]}],[1,"xv-tag",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[1,"xv-tooltip",{"message":[1],"position":[1]}]]],["xv-breadcrumbs",[[1,"xv-breadcrumbs"]]]], options);
9
9
  };
10
10
 
11
11
  export { defineCustomElements };
package/dist/esm/xv-accordion_10.entry.js CHANGED
@@ -95,7 +95,7 @@ const XvButton = class {
95
95
  XvButton.style = XvButtonV2Style0;
96
96
 
97
97
  const xvCardCss = ":host{display:flex;flex-direction:column;border-radius:10px;border:1px solid var(--border-subtle-00);background:var(--layer-layer-02);box-shadow:0 1px 3px 1px rgba(39, 52, 53, 0.15), 0 1px 2px 0 rgba(39, 52, 53, 0.3);font-family:var(--ff-body, inherit);overflow:visible !important}:host(.xv-card_vertical){width:100% !important}:host(.xv-card_horizontal){flex-direction:row;display:flex;width:max-content}:host(.xv-card_horizontal) .xv-card_media__content,:host(.xv-card_horizontal) .xv-card_media ::slotted([slot=media]){min-height:100%;max-height:100%;max-width:160px;min-width:160px}.xv-card_content{padding:16px;display:flex;flex-direction:column;flex:1;text-align:left}.xv-card_media__content,.xv-card_media ::slotted([slot=media]){max-width:100%;min-width:100%;min-height:199px;max-height:199px;object-fit:cover;object-position:center}.xv-card_header__content,.xv-card_header ::slotted([slot=header]){margin:0 0 8px;color:var(--text-primary);font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:-0.6px}.xv-card_body{flex:1}.xv-card_body__content,.xv-card_body ::slotted([slot=body]){margin:0 0 8px;color:var(--text-secondary);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:-0.1px}";
98
- const XvCardStyle0 = xvCardCss;
98
+ const XvCardV2Style0 = xvCardCss;
99
99
 
100
100
  const XvCard = class {
101
101
  constructor(hostRef) {
@@ -103,10 +103,10 @@ const XvCard = class {
103
103
  this.variant = 'vertical';
104
104
  }
105
105
  render() {
106
- return (h(Host, { key: 'c8ec1bfefb9a6cb92b316eab36d3a4e8a08e1a78', class: `xv-card xv-card_${this.variant}`, part: this.variant }, h("div", { key: 'f6274c858ce8333fd2de700b8f0b20921eb7ba09', class: "xv-card_media" }, h("slot", { key: '91105c9e61b8dfe46411bf095dd196f969e9fc02', name: "media" }, this.media && h("img", { key: '2101315142f14a478bf2dd2eb72f7ce3922dfa44', class: "xv-card_media__content", src: this.media, alt: this.header }))), h("div", { key: '58c284ccd7cde840c1808aa14185eb1c70de4751', class: "xv-card_content" }, h("div", { key: 'fb72c62a0d7b5bfedb9a14b7fd8cc4750cfac434', class: "xv-card_header" }, h("slot", { key: 'a8ef5cc27eb4b691e5f8fae2544fe96ccc202fdf', name: "header" }, this.header && h("p", { key: '01fc1daadbb56f4a2f92bd704db06e08a747cd77', class: "xv-card_header__content" }, this.header))), h("div", { key: '2950f470bd305143908ba1bb170da068d6d598f6', class: "xv-card_body" }, h("slot", { key: 'ef9fe6d7daaced77c27483b66c8b01dacfc6713a', name: "body" }, this.body && h("p", { key: '8afd1196e2a45176b503c6be29fdd85ac0e93a83', class: "xv-card_body__content" }, this.header))), h("div", { key: '42e791cfadf951a1e0d99a5a500f52f1553bedfd', class: "xv-card_footer" }, h("slot", { key: 'ac81fb8b06bba6a1851afb344c325ea3a521fceb', name: "footer" }, this.footer)))));
106
+ return (h(Host, { key: '954936e5ea5014bb4c58fed8946ebba8598e6f3d', class: `xv-card xv-card_${this.variant}`, part: this.variant }, h("div", { key: '357b2524c23b8af0730892c90db84dda20990070', class: "xv-card_media" }, h("slot", { key: '02f2e73b4aed200833751e60bdfdc7151477576b', name: "media" }, this.media && h("img", { key: 'b27510aae0d35583fa7ccf75396289751611780a', class: "xv-card_media__content", src: this.media, alt: this.header }))), h("div", { key: '61c711fcf6e82d6da9761411c0ceef7d0407caca', class: "xv-card_content" }, h("div", { key: '7b476457734b9a03e525a409b839284846845189', class: "xv-card_header" }, h("slot", { key: 'c5c068a0b6d61ab1255276e4c2c72e039f5f9909', name: "header" }, this.header && h("p", { key: 'dde81bf7813870b4dd3514a027d02518d31acffe', class: "xv-card_header__content" }, this.header))), h("div", { key: '7fda70bb56b9313d868463bfee51a68bfb8e65c8', class: "xv-card_body" }, h("slot", { key: '3acbfa548e594f01cd9d514b0f7d7596b13900a6', name: "body" }, this.body && h("p", { key: '1a399d0a0351c4a0f1d166009f9467fed8a7e2dc', class: "xv-card_body__content" }, this.header))), h("div", { key: '7458f3c1612205f50ba2692b864089b4ef87e7f2', class: "xv-card_footer" }, h("slot", { key: '3e83fe4bfcda18cf9f46c304603f0a6ed0df4361', name: "footer" }, this.footer)))));
107
107
  }
108
108
  };
109
- XvCard.style = XvCardStyle0;
109
+ XvCard.style = XvCardV2Style0;
110
110
 
111
111
  const XvCheckbox = class {
112
112
  constructor(hostRef) {
@@ -245,6 +245,6 @@ const XvTooltip = class {
245
245
  };
246
246
  XvTooltip.style = XvTooltipStyle0;
247
247
 
248
- export { XvAccordion as xv_accordion, XvAccordionItem as xv_accordion_item, XvButton as xv_button_v2, XvCard as xv_card, XvCheckbox as xv_checkbox_v2, XvLink as xv_link, XvProgressIndicator as xv_progress_indicator, XvProgressIndicatorItem as xv_progress_indicator_item, XvTag as xv_tag, XvTooltip as xv_tooltip };
248
+ export { XvAccordion as xv_accordion, XvAccordionItem as xv_accordion_item, XvButton as xv_button_v2, XvCard as xv_card_v2, XvCheckbox as xv_checkbox_v2, XvLink as xv_link, XvProgressIndicator as xv_progress_indicator, XvProgressIndicatorItem as xv_progress_indicator_item, XvTag as xv_tag, XvTooltip as xv_tooltip };
249
249
 
250
250
  //# sourceMappingURL=xv-accordion_10.entry.js.map
package/dist/esm/xv-accordion_10.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"xv-accordion.xv-accordion-item.xv-button-v2.xv-card.xv-checkbox-v2.xv-link.xv-progress-indicator.xv-progress-indicator-item.xv-tag.xv-tooltip.entry.js","mappings":"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","names":[],"sources":["src/components/xv-accordion/xv-accordion.scss?tag=xv-accordion&encapsulation=shadow","src/components/xv-accordion/xv-accordion.tsx","src/components/xv-accordion-item/xv-accordion-item.scss?tag=xv-accordion-item&encapsulation=shadow","src/components/xv-accordion-item/xv-accordion-item.tsx","src/components/xv-button/xv-button-v2.scss?tag=xv-button-v2&encapsulation=shadow","src/components/xv-button/xv-button.tsx","src/components/xv-card/xv-card.scss?tag=xv-card&encapsulation=shadow","src/components/xv-card/xv-card.tsx","src/components/xv-checkbox/xv-checkbox.tsx","src/components/xv-link/xv-link.scss?tag=xv-link&encapsulation=shadow","src/components/xv-link/xv-link.tsx","src/components/xv-progress-indicator/xv-progress-indicator.scss?tag=xv-progress-indicator&encapsulation=shadow","src/components/xv-progress-indicator/xv-progress-indicator.tsx","src/components/xv-progress-indicator-item/xv-progress-indicator-item.scss?tag=xv-progress-indicator-item&encapsulation=shadow","src/components/xv-progress-indicator-item/xv-progress-indicator-item.tsx","src/components/xv-tag/xv-tag.scss?tag=xv-tag&encapsulation=shadow","src/components/xv-tag/xv-tag.tsx","src/components/xv-tooltip/xv-tooltip.scss?tag=xv-tooltip&encapsulation=shadow","src/components/xv-tooltip/xv-tooltip.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}\r\n","import { Component, Host, h, Event, EventEmitter, Method, State, Prop } from '@stencil/core';\r\nimport { uidGenerator } from '../../utils/utils';\r\n\r\n@Component({\r\n tag: 'xv-accordion',\r\n styleUrl: 'xv-accordion.scss',\r\n shadow: true,\r\n})\r\nexport class XvAccordion {\r\n @Prop() multiple: boolean = false;\r\n @Prop() xvId: string = uidGenerator();\r\n @Prop({ mutable: true }) value: string;\r\n @State() opened: Set<string> = new Set();\r\n @Event() accordionChange: EventEmitter<{ opened: Set<string>, id: string }>;\r\n\r\n @Method()\r\n async toggleItem(value: string) {\r\n if (this.opened.has(value)) {\r\n this.opened.delete(value);\r\n } else {\r\n if (!this.multiple) this.opened.clear();\r\n this.value = value;\r\n this.opened.add(this.value);\r\n }\r\n\r\n this.accordionChange.emit({ opened: this.opened, id: this.xvId });\r\n\r\n return { opened: this.opened, id: this.xvId };\r\n }\r\n\r\n componentWillLoad() {\r\n if (this.value) {\r\n return this.toggleItem(this.value);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class=\"xv-accordion\" data-id={this.xvId}>\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n border-top: 1px solid var(--border-subtle-01);\r\n display: flex;\r\n flex-direction: column;\r\n font-family: var(--ff-body, inherit);\r\n}\r\n\r\n:host(.disabled) {\r\n .label {\r\n color: var(--text-disabled);\r\n &:hover {\r\n cursor: initial;\r\n background-color: transparent;\r\n }\r\n }\r\n}\r\n\r\n.label {\r\n padding: 14px 16px;\r\n display: inline-flex;\r\n align-items: center;\r\n column-gap: 20px;\r\n justify-content: space-between;\r\n text-align: left;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n letter-spacing: 0.16px;\r\n background-color: transparent;\r\n transition: background-color 200ms ease-in-out;\r\n &>span {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 1;\r\n -webkit-box-orient: vertical;\r\n }\r\n\r\n &:hover {\r\n cursor: pointer;\r\n background-color: var(--layer-hover-01);\r\n }\r\n\r\n &:after {\r\n content: '';\r\n border: solid black;\r\n border-width: 0 2px 2px 0;\r\n display: inline-block;\r\n padding: 4.66px;\r\n transition: transform 100ms ease-in-out;\r\n transform: rotate(45deg);\r\n }\r\n\r\n &.opened:after {\r\n transform: rotate(-135deg);\r\n }\r\n}\r\n\r\n.content {\r\n padding: 0 16px;\r\n text-align: left;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n overflow: hidden;\r\n max-height: 0;\r\n transition: max-height 300ms ease-in-out, padding 250ms ease 50ms;\r\n &.opened {\r\n padding: 14px 16px;\r\n max-height: 500px;\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop, State, Listen, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-accordion-item',\r\n styleUrl: 'xv-accordion-item.scss',\r\n shadow: true,\r\n})\r\nexport class XvAccordionItem {\r\n @Element() el: HTMLElement;\r\n @Prop() disabled: boolean = false;\r\n @Prop() label: string;\r\n @Prop() value: string;\r\n @State() isOpen: boolean = false;\r\n @Event() itemToggle: EventEmitter;\r\n\r\n @Listen('accordionChange', { target: 'body' })\r\n handleAccordionChange(event: CustomEvent<{ opened: Set<string>, id: string }>) {\r\n const parentAccordionId = this.el.closest('[data-id]')?.getAttribute('data-id');\r\n if (event.detail.id !== parentAccordionId) return;\r\n this.isOpen = event.detail.opened.has(this.value);\r\n }\r\n\r\n toggle() {\r\n if (this.disabled) return;\r\n this.isOpen = !this.isOpen;\r\n this.el.closest('xv-accordion')?.toggleItem?.(this.value);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class={`${this.disabled ? 'disabled' : ''}`}>\r\n <label class={`label ${this.isOpen ? 'opened' : 'closed'}`} onClick={this.toggle.bind(this)}>\r\n <span>{this.label}</span>\r\n </label>\r\n <div class={`content ${this.isOpen ? 'opened' : 'closed'}`}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n --focus-border-width: 2px;\r\n --focus-border-style: solid;\r\n --button-ghost: tarnsparent;\r\n --text-disabled-opacity: 0.25;\r\n --button-border-radius: 3px;\r\n --button-border-width: 1px;\r\n --button-border-style: solid;\r\n --button-border-color-accent: #97BF0D;\r\n --button-border-color-primary: #273435;\r\n --button-border-color-secondary: #D1D1D1;\r\n --button-border-color-ghost: tarnsparent;\r\n --button-ghost-hover: tarnsparent;\r\n --button-ghost-active: rgba(139, 139, 139, 0.5);\r\n --button-accent-disabled: #D1D1D1;\r\n --button-primary-disabled: #D1D1D1;\r\n --button-secondary-disabled: #D1D1D1;\r\n --button-tertiary-disabled: tarnsparent;\r\n --button-ghost-disabled: tarnsparent;\r\n\r\n button {\r\n font-family: inherit;\r\n font-size: 16px;\r\n font-weight: 700;\r\n padding: 0 20px;\r\n height: 40px;\r\n line-height: 40px;\r\n cursor: pointer;\r\n box-sizing: border-box;\r\n transition:\r\n background-color 0.2s ease-in-out,\r\n filter 0.2s ease-in-out,\r\n transform 0.1s ease-in-out,\r\n border-color 0.2s ease-in-out,\r\n border-width 0.2s ease-in-out,\r\n box-shadow 0.2s ease-in-out;\r\n }\r\n}\r\n\r\n.xv-button {\r\n /* ✅ Accent Button */\r\n &.accent {\r\n background-color: var(--button-accent);\r\n color: var(--text-on-color);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-accent);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-accent-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-accent-active);\r\n color: var(--text-on-color);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-accent-disabled);\r\n color: var(--text-on-color-disabled);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-accent-disabled);\r\n }\r\n\r\n }\r\n\r\n /* ✅ Primary Button */\r\n &.primary {\r\n background-color: var(--button-primary);\r\n color: var(--text-on-color);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-primary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-primary-hover)\r\n }\r\n &:active {\r\n background-color: var(--button-primary-active)\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-primary-disabled);\r\n color: var(--text-on-color-disabled);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-primary-disabled);\r\n }\r\n }\r\n\r\n /* ✅ Secondary Button */\r\n &.secondary {\r\n background-color: var(--button-secondary);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-secondary-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-secondary-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-secondary-disabled);\r\n color: var(--text-on-color-disabled);\r\n }\r\n }\r\n\r\n /* ✅ Tertiary Button */\r\n &.tertiary {\r\n background-color: var(--button-ghost);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-tertiary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-tertiary-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-tertiary-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-tertiary-disabled);\r\n color: var(--text-disabled);\r\n opacity: var(--text-disabled-opacity);\r\n }\r\n }\r\n\r\n /* ✅ Ghost Button */\r\n &.ghost {\r\n background-color: var(--button-ghost);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-ghost);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-ghost-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-ghost-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-ghost-disabled);\r\n color: var(--text-disabled);\r\n opacity: var(--text-disabled-opacity);\r\n }\r\n }\r\n}\r\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\r\n\r\n\r\n@Component({\r\n tag: 'xv-button-v2',\r\n styleUrl: 'xv-button-v2.scss',\r\n shadow: true,\r\n})\r\nexport class XvButton {\r\n /** Button label */\r\n @Prop() label: string = '';\r\n\r\n /** Variant */\r\n @Prop() variant: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost' = 'primary';\r\n\r\n /** Disabled state */\r\n @Prop() disabled: boolean = false;\r\n\r\n /** Emits when the button is clicked */\r\n @Event() buttonClick!: EventEmitter<void>;\r\n\r\n /** Handle click only if not disabled */\r\n private handleClick = () => {\r\n if (this.disabled) {\r\n return;\r\n }\r\n this.buttonClick.emit();\r\n };\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n class={`xv-button ${this.variant}`}\r\n disabled={this.disabled}\r\n onClick={this.handleClick}\r\n >\r\n <slot name=\"icon-left\"></slot>\r\n\r\n <slot>\r\n {this.label}\r\n </slot>\r\n\r\n <slot name=\"icon-right\"></slot>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n border: 1px solid var(--border-subtle-00);\r\n background: var(--layer-layer-02);\r\n box-shadow: 0 1px 3px 1px rgba(39, 52, 53, 0.15), 0 1px 2px 0 rgba(39, 52, 53, 0.30);\r\n font-family: var(--ff-body, inherit);\r\n overflow: visible !important;\r\n}\r\n\r\n:host(.xv-card_vertical) {\r\n //max-width: 298px;\r\n // TODO: wright down correct styling for card size\r\n width: 100%!important;\r\n}\r\n\r\n:host(.xv-card_horizontal) {\r\n flex-direction: row;\r\n display: flex;\r\n width: max-content;\r\n\r\n .xv-card_media {\r\n &__content, ::slotted([slot=\"media\"]) {\r\n min-height: 100%;\r\n max-height: 100%;\r\n max-width: 160px;\r\n min-width: 160px;\r\n }\r\n }\r\n}\r\n\r\n.xv-card {\r\n &_content {\r\n padding: 16px;\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n text-align: left;\r\n }\r\n\r\n &_media {\r\n &__content, ::slotted([slot=\"media\"]) {\r\n max-width: 100%;\r\n min-width: 100%;\r\n min-height: 199px;\r\n max-height: 199px;\r\n object-fit: cover;\r\n object-position: center;\r\n }\r\n }\r\n\r\n &_header {\r\n &__content, ::slotted([slot=\"header\"]) {\r\n margin: 0 0 8px;\r\n color: var(--text-primary);\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n line-height: 24px;\r\n letter-spacing: -0.6px;\r\n }\r\n }\r\n\r\n &_body {\r\n flex: 1;\r\n &__content, ::slotted([slot=\"body\"]) {\r\n margin: 0 0 8px;\r\n color: var(--text-secondary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n letter-spacing: -0.1px;\r\n }\r\n }\r\n\r\n &_footer {}\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-card',\r\n styleUrl: 'xv-card.scss',\r\n shadow: true,\r\n})\r\nexport class XvCard {\r\n @Prop() variant: 'horizontal' | 'vertical' = 'vertical';\r\n @Prop() media: string;\r\n @Prop() header: string;\r\n @Prop() body: string;\r\n @Prop() footer: string;\r\n render() {\r\n return (\r\n <Host class={`xv-card xv-card_${this.variant}`} part={this.variant}>\r\n <div class=\"xv-card_media\">\r\n <slot name=\"media\">\r\n {this.media && <img class=\"xv-card_media__content\" src={this.media} alt={this.header} />}\r\n </slot>\r\n </div>\r\n\r\n <div class=\"xv-card_content\">\r\n <div class=\"xv-card_header\">\r\n <slot name=\"header\">\r\n {this.header && <p class=\"xv-card_header__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_body\">\r\n <slot name=\"body\">\r\n {this.body && <p class=\"xv-card_body__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_footer\">\r\n <slot name=\"footer\">{this.footer}</slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'xv-checkbox-v2',\n shadow: true, // ✅ Shadow DOM aktiviert\n})\nexport class XvCheckbox {\n @Element() el!: HTMLElement;\n\n private applyGlobalStyles() {\n const globalStyle = document.getElementById(\"brand-style\") as HTMLLinkElement;\n if (globalStyle) {\n const styleClone = document.createElement(\"style\");\n styleClone.innerHTML = `@import url('${globalStyle.href}');`;\n this.el.shadowRoot?.appendChild(styleClone);\n }\n }\n\n componentWillLoad() {\n this.applyGlobalStyles();\n }\n\n render() {\n return (\n <label class=\"checkbox-container\">\n <input type=\"checkbox\" />\n <span class=\"checkmark\"></span>\n <slot></slot>\n </label>\n );\n }\n}\n",":host {\r\n font-family: var(--ff-body, inherit);\r\n}\r\n\r\n:host(.xv-link_inline) {\r\n display: inline-block;\r\n .xv-link {\r\n text-decoration-line: underline;\r\n text-decoration-style: solid;\r\n text-decoration-skip-ink: none;\r\n text-decoration-thickness: auto;\r\n text-underline-offset: auto;\r\n text-underline-position: from-font;\r\n }\r\n}\r\n\r\n:host(.xv-link_standalone) {\r\n display: block;\r\n .xv-link {\r\n text-decoration-line: none;\r\n }\r\n}\r\n\r\n.xv-link {\r\n display: inline-flex;\r\n gap: 8px;\r\n align-items: center;\r\n color: var(--link-primary);\r\n font-family: var(--ff-body);\r\n font-style: normal;\r\n font-weight: 400;\r\n transition: color 200ms ease-in-out;\r\n\r\n &:active {\r\n color: var(--text-primary);\r\n }\r\n\r\n &:visited {\r\n color: var(--link-visted);\r\n }\r\n\r\n &:hover {\r\n color: var(--link-primary-hover);\r\n cursor: pointer;\r\n }\r\n\r\n &:disabled, &_disabled, &::part(disabled) {\r\n color: var(--text-disabled);\r\n pointer-events: none;\r\n cursor: initial;\r\n }\r\n\r\n &.sm {\r\n font-size: var(--fz-sm);\r\n line-height: 137.5%;\r\n }\r\n\r\n &.md {\r\n font-size: var(--fz-md);\r\n line-height: 128.571%;\r\n }\r\n\r\n &.lg {\r\n font-size: var(--fz-lg);\r\n line-height: 133.333%;\r\n }\r\n}\r\n","import { Component, h, Host, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-link',\r\n styleUrl: 'xv-link.scss',\r\n shadow: true,\r\n})\r\nexport class XvLink {\r\n @Prop() href: string;\r\n @Prop() target: '_self' | '_blank' | '_parent' | '_top';\r\n @Prop() disabled: boolean = false;\r\n @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n @Prop() variant: 'standalone' | 'inline' = 'inline';\r\n\r\n preventLinkHandler(e: PointerEvent) {\r\n if (!this.disabled) return;\r\n\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class={`xv-link_${this.variant}`}>\r\n <a\r\n href={this.href}\r\n onClick={this.preventLinkHandler.bind(this)}\r\n class={`xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`}\r\n target={this.target}\r\n >\r\n <slot name=\"icon-left\"></slot>\r\n\r\n <slot></slot>\r\n\r\n <slot name=\"icon-right\"></slot>\r\n </a>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n font-family: var(--ff-body, inherit);\r\n}\r\n","import { Component, Host, h, Prop, Watch, Element } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-progress-indicator',\r\n styleUrl: 'xv-progress-indicator.scss',\r\n shadow: true,\r\n})\r\nexport class XvProgressIndicator {\r\n @Element() el: HTMLElement;\r\n @Prop() progress: number = 0;\r\n\r\n // Update 'xv-progress-indicator-item' done status\r\n @Watch('progress')\r\n updateChildItems() {\r\n const items = this.el.children;\r\n const itemsCount = this.el.childElementCount;\r\n const progressPerItem = 100 / itemsCount;\r\n\r\n if (!items.length || !itemsCount) return;\r\n\r\n Array.from(items).forEach((item, index) => {\r\n const itemProgress = (index + 1) * progressPerItem;\r\n const done = this.progress >= itemProgress;\r\n (item as HTMLElement).setAttribute('done', done ? 'true' : 'false');\r\n });\r\n }\r\n\r\n // Load initial done status\r\n componentDidLoad() {\r\n this.updateChildItems()\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class=\"xv-progress-indicator\">\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host(.xv-progress-indicator-item) {\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n padding: 10px 16px;\r\n &:before {\r\n width: 100%;\r\n }\r\n\r\n &:before, .line {\r\n content: '';\r\n z-index: 1;\r\n display: inline-block;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n color: inherit;\r\n background-color: var(--border-subtle-01, grey);\r\n }\r\n\r\n .line {\r\n width: 0;\r\n color: inherit;\r\n transition: width 250ms ease;\r\n background-color: var(--background-brand, currentColor);\r\n }\r\n\r\n .icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 22px;\r\n height: 22px;\r\n max-width: 22px;\r\n max-height: 22px;\r\n border: 2px dashed var(--border-subtle-01, currentColor);\r\n border-radius: 50%;\r\n svg {\r\n opacity: 0;\r\n transition: opacity 500ms ease-in-out;\r\n }\r\n }\r\n\r\n .label {\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 18px;\r\n letter-spacing: 0.16px;\r\n }\r\n}\r\n\r\n:host(.done) {\r\n .icon {\r\n border-color: var(--background-brand, currentColor);\r\n color: var(--background-brand, inherit);\r\n border-style: solid;\r\n svg {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .line {\r\n width: 100% !important;\r\n background-color: var(--background-brand, currentColor);\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-progress-indicator-item',\r\n styleUrl: 'xv-progress-indicator-item.scss',\r\n shadow: true,\r\n})\r\nexport class XvProgressIndicatorItem {\r\n @Element() el: HTMLElement;\r\n @Prop({ reflect: false }) done: boolean = false;\r\n\r\n render() {\r\n return (\r\n <Host class={`xv-progress-indicator-item ${this.done ? 'done' : ''}`}>\r\n <span class=\"line\"/>\r\n <span class=\"icon\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 448 512\"\r\n width={14}\r\n height={14}\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"\r\n />\r\n </svg>\r\n </span>\r\n <p class=\"label\"><slot/></p>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n border-radius: 1000px;\r\n background-color: var(--background);\r\n color: var(--text-primary);\r\n font-family: var(--ff-body, inherit);\r\n\r\n .xv-tag_content {\r\n padding-left: 8px;\r\n padding-right: 8px;\r\n color: inherit;\r\n font-family: var(--ff-body);\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px;\r\n letter-spacing: 0.32px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .xv-tag_close {\r\n box-sizing: border-box;\r\n text-decoration: none;\r\n border: none;\r\n background-color: inherit;\r\n outline: none;\r\n border-spacing: 0;\r\n list-style: none outside none;\r\n margin: 0;\r\n padding: 0;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 62px;\r\n width: 15px;\r\n height: 15px;\r\n text-align: left;\r\n color: inherit;\r\n text-indent: 0;\r\n transition: opacity 300ms ease-in-out, filter 300ms ease-in-out;\r\n &:hover {\r\n cursor: pointer;\r\n filter: brightness(80%);\r\n }\r\n\r\n &:active {\r\n opacity: 0.7;\r\n }\r\n\r\n &:focus {\r\n outline: 1px solid currentColor;\r\n }\r\n\r\n &:after {\r\n overflow: hidden;\r\n width: inherit;\r\n height: inherit;\r\n color: inherit;\r\n font-size: 16px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n content: \"\\00d7\";\r\n }\r\n }\r\n}\r\n\r\n:host(.sm) {\r\n font-size: var(--fz-sm);\r\n}\r\n\r\n:host(.md) {\r\n font-size: var(--fz-md);\r\n .xv-tag_content {\r\n line-height: 24px;\r\n }\r\n\r\n .xv-tag_close {\r\n height: 24px;\r\n width: 24px;\r\n }\r\n}\r\n\r\n:host(.lg) {\r\n font-size: var(--fz-lg);\r\n .xv-tag_content {\r\n line-height: 26px;\r\n }\r\n\r\n .xv-tag_close {\r\n height: 26px;\r\n width: 26px;\r\n }\r\n}\r\n\r\n:host(.disabled) {\r\n pointer-events: none;\r\n background-color: var(--layer-01);\r\n color: var(--text-disabled);\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-tag',\r\n styleUrl: 'xv-tag.scss',\r\n shadow: true,\r\n})\r\nexport class XvTag {\r\n @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n @Prop() color: string = '';\r\n @Prop() bg: string = '';\r\n @Prop() disabled: boolean = false;\r\n @Prop() closeable: boolean = false;\r\n @Event() closeClick: EventEmitter<PointerEvent>;\r\n\r\n closeHandler(e: PointerEvent) {\r\n if (this.disabled) return;\r\n\r\n this.closeClick.emit(e);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n style={{ color: this.color, background: this.bg }}\r\n class={`xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}`}\r\n >\r\n <div class=\"xv-tag_content\">\r\n <slot></slot>\r\n </div>\r\n {this.closeable && (\r\n <button onClick={this.closeHandler.bind(this)} class=\"xv-tag_close\"></button>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n position: relative;\r\n display: inline-block;\r\n cursor: pointer;\r\n}\r\n\r\n/* General styles for tooltip */\r\n:host::before,\r\n:host::after {\r\n position: absolute;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\r\n z-index: 10;\r\n}\r\n\r\n/* Tooltip */\r\n:host::before {\r\n content: attr(tooltip);\r\n background: var(--background-inverse, #333);\r\n color: var(--icon-inverse, #fff);\r\n padding: var(--gap-sm, 5px) var(--gap-md, 16px);\r\n border-radius: 2px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-width: max(70vw);\r\n font-family: var(--fz-body, Tahoma);\r\n font-size: var(fz-md, 14px);\r\n font-weight: 400;\r\n line-height: 18px;\r\n letter-spacing: 0.16px;\r\n}\r\n\r\n/* Arrow */\r\n:host::after {\r\n content: \"\";\r\n border: 6px solid transparent;\r\n}\r\n\r\n/* Show Tooltip and arrow */\r\n:host(:hover)::before,\r\n:host(:hover)::after,\r\n:host(:focus)::before,\r\n:host(:focus)::after {\r\n opacity: 1;\r\n visibility: visible;\r\n}\r\n\r\n/* Tooltip positions */\r\n:host(.xv-tooltip_top)::before {\r\n bottom: 100%;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top)::after {\r\n bottom: 100%;\r\n left: 50%;\r\n border-top-color: var(--background-inverse, #333);\r\n transform: translateX(-50%) translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_top-left)::before {\r\n bottom: 100%;\r\n left: 0;\r\n transform: translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top-left)::after {\r\n bottom: 100%;\r\n left: 10px;\r\n border-top-color: black;\r\n transform: translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_top-right)::before {\r\n bottom: 100%;\r\n right: 0;\r\n transform: translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top-right)::after {\r\n bottom: 100%;\r\n right: 10px;\r\n border-top-color: var(--background-inverse, #333);\r\n transform: translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom)::before {\r\n top: 100%;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom)::after {\r\n top: 100%;\r\n left: 50%;\r\n border-bottom-color: black;\r\n transform: translateX(-50%) translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom-left)::before {\r\n top: 100%;\r\n left: 0;\r\n transform: translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom-left)::after {\r\n top: 100%;\r\n left: 10px;\r\n border-bottom-color: var(--background-inverse, #333);\r\n transform: translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom-right)::before {\r\n top: 100%;\r\n right: 0;\r\n transform: translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom-right)::after {\r\n top: 100%;\r\n right: 10px;\r\n border-bottom-color: var(--background-inverse, #333);\r\n transform: translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_left)::before {\r\n right: 100%;\r\n top: 50%;\r\n transform: translateY(-50%) translateX(-5px);\r\n}\r\n:host(.xv-tooltip_left)::after {\r\n right: 100%;\r\n top: 50%;\r\n border-left-color: var(--background-inverse, #333);\r\n transform: translateY(-50%) translateX(5px);\r\n}\r\n\r\n:host(.xv-tooltip_right)::before {\r\n left: 100%;\r\n top: 50%;\r\n transform: translateY(-50%) translateX(5px);\r\n}\r\n:host(.xv-tooltip_right)::after {\r\n left: 100%;\r\n top: 50%;\r\n border-right-color: var(--background-inverse, #333);\r\n transform: translateY(-50%) translateX(-5px);\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-tooltip',\r\n styleUrl: 'xv-tooltip.scss',\r\n shadow: true,\r\n})\r\nexport class XvTooltip {\r\n /** Message what will be shown for tooltip **/\r\n @Prop() message: string;\r\n /**\r\n * Tooltip and arrow position related to element\r\n * possible options: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'.\r\n * By default, \"top\"\r\n */\r\n @Prop() position: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right' = 'top';\r\n\r\n render() {\r\n return (\r\n <Host tooltip={this.message} class={`xv-tooltip_${this.position}`}>\r\n <slot>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width={16} height={16}>\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"\r\n />\r\n </svg>\r\n </slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"xv-accordion.xv-accordion-item.xv-button-v2.xv-card-v2.xv-checkbox-v2.xv-link.xv-progress-indicator.xv-progress-indicator-item.xv-tag.xv-tooltip.entry.js","mappings":"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","names":[],"sources":["src/components/xv-accordion/xv-accordion.scss?tag=xv-accordion&encapsulation=shadow","src/components/xv-accordion/xv-accordion.tsx","src/components/xv-accordion-item/xv-accordion-item.scss?tag=xv-accordion-item&encapsulation=shadow","src/components/xv-accordion-item/xv-accordion-item.tsx","src/components/xv-button/xv-button-v2.scss?tag=xv-button-v2&encapsulation=shadow","src/components/xv-button/xv-button.tsx","src/components/xv-card/xv-card.scss?tag=xv-card-v2&encapsulation=shadow","src/components/xv-card/xv-card.tsx","src/components/xv-checkbox/xv-checkbox.tsx","src/components/xv-link/xv-link.scss?tag=xv-link&encapsulation=shadow","src/components/xv-link/xv-link.tsx","src/components/xv-progress-indicator/xv-progress-indicator.scss?tag=xv-progress-indicator&encapsulation=shadow","src/components/xv-progress-indicator/xv-progress-indicator.tsx","src/components/xv-progress-indicator-item/xv-progress-indicator-item.scss?tag=xv-progress-indicator-item&encapsulation=shadow","src/components/xv-progress-indicator-item/xv-progress-indicator-item.tsx","src/components/xv-tag/xv-tag.scss?tag=xv-tag&encapsulation=shadow","src/components/xv-tag/xv-tag.tsx","src/components/xv-tooltip/xv-tooltip.scss?tag=xv-tooltip&encapsulation=shadow","src/components/xv-tooltip/xv-tooltip.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}\r\n","import { Component, Host, h, Event, EventEmitter, Method, State, Prop } from '@stencil/core';\r\nimport { uidGenerator } from '../../utils/utils';\r\n\r\n@Component({\r\n tag: 'xv-accordion',\r\n styleUrl: 'xv-accordion.scss',\r\n shadow: true,\r\n})\r\nexport class XvAccordion {\r\n @Prop() multiple: boolean = false;\r\n @Prop() xvId: string = uidGenerator();\r\n @Prop({ mutable: true }) value: string;\r\n @State() opened: Set<string> = new Set();\r\n @Event() accordionChange: EventEmitter<{ opened: Set<string>, id: string }>;\r\n\r\n @Method()\r\n async toggleItem(value: string) {\r\n if (this.opened.has(value)) {\r\n this.opened.delete(value);\r\n } else {\r\n if (!this.multiple) this.opened.clear();\r\n this.value = value;\r\n this.opened.add(this.value);\r\n }\r\n\r\n this.accordionChange.emit({ opened: this.opened, id: this.xvId });\r\n\r\n return { opened: this.opened, id: this.xvId };\r\n }\r\n\r\n componentWillLoad() {\r\n if (this.value) {\r\n return this.toggleItem(this.value);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class=\"xv-accordion\" data-id={this.xvId}>\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n border-top: 1px solid var(--border-subtle-01);\r\n display: flex;\r\n flex-direction: column;\r\n font-family: var(--ff-body, inherit);\r\n}\r\n\r\n:host(.disabled) {\r\n .label {\r\n color: var(--text-disabled);\r\n &:hover {\r\n cursor: initial;\r\n background-color: transparent;\r\n }\r\n }\r\n}\r\n\r\n.label {\r\n padding: 14px 16px;\r\n display: inline-flex;\r\n align-items: center;\r\n column-gap: 20px;\r\n justify-content: space-between;\r\n text-align: left;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n letter-spacing: 0.16px;\r\n background-color: transparent;\r\n transition: background-color 200ms ease-in-out;\r\n &>span {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 1;\r\n -webkit-box-orient: vertical;\r\n }\r\n\r\n &:hover {\r\n cursor: pointer;\r\n background-color: var(--layer-hover-01);\r\n }\r\n\r\n &:after {\r\n content: '';\r\n border: solid black;\r\n border-width: 0 2px 2px 0;\r\n display: inline-block;\r\n padding: 4.66px;\r\n transition: transform 100ms ease-in-out;\r\n transform: rotate(45deg);\r\n }\r\n\r\n &.opened:after {\r\n transform: rotate(-135deg);\r\n }\r\n}\r\n\r\n.content {\r\n padding: 0 16px;\r\n text-align: left;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n overflow: hidden;\r\n max-height: 0;\r\n transition: max-height 300ms ease-in-out, padding 250ms ease 50ms;\r\n &.opened {\r\n padding: 14px 16px;\r\n max-height: 500px;\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop, State, Listen, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-accordion-item',\r\n styleUrl: 'xv-accordion-item.scss',\r\n shadow: true,\r\n})\r\nexport class XvAccordionItem {\r\n @Element() el: HTMLElement;\r\n @Prop() disabled: boolean = false;\r\n @Prop() label: string;\r\n @Prop() value: string;\r\n @State() isOpen: boolean = false;\r\n @Event() itemToggle: EventEmitter;\r\n\r\n @Listen('accordionChange', { target: 'body' })\r\n handleAccordionChange(event: CustomEvent<{ opened: Set<string>, id: string }>) {\r\n const parentAccordionId = this.el.closest('[data-id]')?.getAttribute('data-id');\r\n if (event.detail.id !== parentAccordionId) return;\r\n this.isOpen = event.detail.opened.has(this.value);\r\n }\r\n\r\n toggle() {\r\n if (this.disabled) return;\r\n this.isOpen = !this.isOpen;\r\n this.el.closest('xv-accordion')?.toggleItem?.(this.value);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class={`${this.disabled ? 'disabled' : ''}`}>\r\n <label class={`label ${this.isOpen ? 'opened' : 'closed'}`} onClick={this.toggle.bind(this)}>\r\n <span>{this.label}</span>\r\n </label>\r\n <div class={`content ${this.isOpen ? 'opened' : 'closed'}`}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n --focus-border-width: 2px;\r\n --focus-border-style: solid;\r\n --button-ghost: tarnsparent;\r\n --text-disabled-opacity: 0.25;\r\n --button-border-radius: 3px;\r\n --button-border-width: 1px;\r\n --button-border-style: solid;\r\n --button-border-color-accent: #97BF0D;\r\n --button-border-color-primary: #273435;\r\n --button-border-color-secondary: #D1D1D1;\r\n --button-border-color-ghost: tarnsparent;\r\n --button-ghost-hover: tarnsparent;\r\n --button-ghost-active: rgba(139, 139, 139, 0.5);\r\n --button-accent-disabled: #D1D1D1;\r\n --button-primary-disabled: #D1D1D1;\r\n --button-secondary-disabled: #D1D1D1;\r\n --button-tertiary-disabled: tarnsparent;\r\n --button-ghost-disabled: tarnsparent;\r\n\r\n button {\r\n font-family: inherit;\r\n font-size: 16px;\r\n font-weight: 700;\r\n padding: 0 20px;\r\n height: 40px;\r\n line-height: 40px;\r\n cursor: pointer;\r\n box-sizing: border-box;\r\n transition:\r\n background-color 0.2s ease-in-out,\r\n filter 0.2s ease-in-out,\r\n transform 0.1s ease-in-out,\r\n border-color 0.2s ease-in-out,\r\n border-width 0.2s ease-in-out,\r\n box-shadow 0.2s ease-in-out;\r\n }\r\n}\r\n\r\n.xv-button {\r\n /* ✅ Accent Button */\r\n &.accent {\r\n background-color: var(--button-accent);\r\n color: var(--text-on-color);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-accent);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-accent-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-accent-active);\r\n color: var(--text-on-color);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-accent-disabled);\r\n color: var(--text-on-color-disabled);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-accent-disabled);\r\n }\r\n\r\n }\r\n\r\n /* ✅ Primary Button */\r\n &.primary {\r\n background-color: var(--button-primary);\r\n color: var(--text-on-color);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-primary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-primary-hover)\r\n }\r\n &:active {\r\n background-color: var(--button-primary-active)\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-primary-disabled);\r\n color: var(--text-on-color-disabled);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-primary-disabled);\r\n }\r\n }\r\n\r\n /* ✅ Secondary Button */\r\n &.secondary {\r\n background-color: var(--button-secondary);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-secondary-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-secondary-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-secondary-disabled);\r\n color: var(--text-on-color-disabled);\r\n }\r\n }\r\n\r\n /* ✅ Tertiary Button */\r\n &.tertiary {\r\n background-color: var(--button-ghost);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-tertiary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-tertiary-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-tertiary-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-tertiary-disabled);\r\n color: var(--text-disabled);\r\n opacity: var(--text-disabled-opacity);\r\n }\r\n }\r\n\r\n /* ✅ Ghost Button */\r\n &.ghost {\r\n background-color: var(--button-ghost);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-ghost);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-ghost-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-ghost-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-ghost-disabled);\r\n color: var(--text-disabled);\r\n opacity: var(--text-disabled-opacity);\r\n }\r\n }\r\n}\r\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\r\n\r\n\r\n@Component({\r\n tag: 'xv-button-v2',\r\n styleUrl: 'xv-button-v2.scss',\r\n shadow: true,\r\n})\r\nexport class XvButton {\r\n /** Button label */\r\n @Prop() label: string = '';\r\n\r\n /** Variant */\r\n @Prop() variant: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost' = 'primary';\r\n\r\n /** Disabled state */\r\n @Prop() disabled: boolean = false;\r\n\r\n /** Emits when the button is clicked */\r\n @Event() buttonClick!: EventEmitter<void>;\r\n\r\n /** Handle click only if not disabled */\r\n private handleClick = () => {\r\n if (this.disabled) {\r\n return;\r\n }\r\n this.buttonClick.emit();\r\n };\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n class={`xv-button ${this.variant}`}\r\n disabled={this.disabled}\r\n onClick={this.handleClick}\r\n >\r\n <slot name=\"icon-left\"></slot>\r\n\r\n <slot>\r\n {this.label}\r\n </slot>\r\n\r\n <slot name=\"icon-right\"></slot>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n border: 1px solid var(--border-subtle-00);\r\n background: var(--layer-layer-02);\r\n box-shadow: 0 1px 3px 1px rgba(39, 52, 53, 0.15), 0 1px 2px 0 rgba(39, 52, 53, 0.30);\r\n font-family: var(--ff-body, inherit);\r\n overflow: visible !important;\r\n}\r\n\r\n:host(.xv-card_vertical) {\r\n //max-width: 298px;\r\n // TODO: wright down correct styling for card size\r\n width: 100%!important;\r\n}\r\n\r\n:host(.xv-card_horizontal) {\r\n flex-direction: row;\r\n display: flex;\r\n width: max-content;\r\n\r\n .xv-card_media {\r\n &__content, ::slotted([slot=\"media\"]) {\r\n min-height: 100%;\r\n max-height: 100%;\r\n max-width: 160px;\r\n min-width: 160px;\r\n }\r\n }\r\n}\r\n\r\n.xv-card {\r\n &_content {\r\n padding: 16px;\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n text-align: left;\r\n }\r\n\r\n &_media {\r\n &__content, ::slotted([slot=\"media\"]) {\r\n max-width: 100%;\r\n min-width: 100%;\r\n min-height: 199px;\r\n max-height: 199px;\r\n object-fit: cover;\r\n object-position: center;\r\n }\r\n }\r\n\r\n &_header {\r\n &__content, ::slotted([slot=\"header\"]) {\r\n margin: 0 0 8px;\r\n color: var(--text-primary);\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n line-height: 24px;\r\n letter-spacing: -0.6px;\r\n }\r\n }\r\n\r\n &_body {\r\n flex: 1;\r\n &__content, ::slotted([slot=\"body\"]) {\r\n margin: 0 0 8px;\r\n color: var(--text-secondary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n letter-spacing: -0.1px;\r\n }\r\n }\r\n\r\n &_footer {}\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-card-v2',\r\n styleUrl: 'xv-card.scss',\r\n shadow: true,\r\n})\r\nexport class XvCard {\r\n @Prop() variant: 'horizontal' | 'vertical' = 'vertical';\r\n @Prop() media: string;\r\n @Prop() header: string;\r\n @Prop() body: string;\r\n @Prop() footer: string;\r\n render() {\r\n return (\r\n <Host class={`xv-card xv-card_${this.variant}`} part={this.variant}>\r\n <div class=\"xv-card_media\">\r\n <slot name=\"media\">\r\n {this.media && <img class=\"xv-card_media__content\" src={this.media} alt={this.header} />}\r\n </slot>\r\n </div>\r\n\r\n <div class=\"xv-card_content\">\r\n <div class=\"xv-card_header\">\r\n <slot name=\"header\">\r\n {this.header && <p class=\"xv-card_header__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_body\">\r\n <slot name=\"body\">\r\n {this.body && <p class=\"xv-card_body__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_footer\">\r\n <slot name=\"footer\">{this.footer}</slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'xv-checkbox-v2',\n shadow: true, // ✅ Shadow DOM aktiviert\n})\nexport class XvCheckbox {\n @Element() el!: HTMLElement;\n\n private applyGlobalStyles() {\n const globalStyle = document.getElementById(\"brand-style\") as HTMLLinkElement;\n if (globalStyle) {\n const styleClone = document.createElement(\"style\");\n styleClone.innerHTML = `@import url('${globalStyle.href}');`;\n this.el.shadowRoot?.appendChild(styleClone);\n }\n }\n\n componentWillLoad() {\n this.applyGlobalStyles();\n }\n\n render() {\n return (\n <label class=\"checkbox-container\">\n <input type=\"checkbox\" />\n <span class=\"checkmark\"></span>\n <slot></slot>\n </label>\n );\n }\n}\n",":host {\r\n font-family: var(--ff-body, inherit);\r\n}\r\n\r\n:host(.xv-link_inline) {\r\n display: inline-block;\r\n .xv-link {\r\n text-decoration-line: underline;\r\n text-decoration-style: solid;\r\n text-decoration-skip-ink: none;\r\n text-decoration-thickness: auto;\r\n text-underline-offset: auto;\r\n text-underline-position: from-font;\r\n }\r\n}\r\n\r\n:host(.xv-link_standalone) {\r\n display: block;\r\n .xv-link {\r\n text-decoration-line: none;\r\n }\r\n}\r\n\r\n.xv-link {\r\n display: inline-flex;\r\n gap: 8px;\r\n align-items: center;\r\n color: var(--link-primary);\r\n font-family: var(--ff-body);\r\n font-style: normal;\r\n font-weight: 400;\r\n transition: color 200ms ease-in-out;\r\n\r\n &:active {\r\n color: var(--text-primary);\r\n }\r\n\r\n &:visited {\r\n color: var(--link-visted);\r\n }\r\n\r\n &:hover {\r\n color: var(--link-primary-hover);\r\n cursor: pointer;\r\n }\r\n\r\n &:disabled, &_disabled, &::part(disabled) {\r\n color: var(--text-disabled);\r\n pointer-events: none;\r\n cursor: initial;\r\n }\r\n\r\n &.sm {\r\n font-size: var(--fz-sm);\r\n line-height: 137.5%;\r\n }\r\n\r\n &.md {\r\n font-size: var(--fz-md);\r\n line-height: 128.571%;\r\n }\r\n\r\n &.lg {\r\n font-size: var(--fz-lg);\r\n line-height: 133.333%;\r\n }\r\n}\r\n","import { Component, h, Host, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-link',\r\n styleUrl: 'xv-link.scss',\r\n shadow: true,\r\n})\r\nexport class XvLink {\r\n @Prop() href: string;\r\n @Prop() target: '_self' | '_blank' | '_parent' | '_top';\r\n @Prop() disabled: boolean = false;\r\n @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n @Prop() variant: 'standalone' | 'inline' = 'inline';\r\n\r\n preventLinkHandler(e: PointerEvent) {\r\n if (!this.disabled) return;\r\n\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class={`xv-link_${this.variant}`}>\r\n <a\r\n href={this.href}\r\n onClick={this.preventLinkHandler.bind(this)}\r\n class={`xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`}\r\n target={this.target}\r\n >\r\n <slot name=\"icon-left\"></slot>\r\n\r\n <slot></slot>\r\n\r\n <slot name=\"icon-right\"></slot>\r\n </a>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n font-family: var(--ff-body, inherit);\r\n}\r\n","import { Component, Host, h, Prop, Watch, Element } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-progress-indicator',\r\n styleUrl: 'xv-progress-indicator.scss',\r\n shadow: true,\r\n})\r\nexport class XvProgressIndicator {\r\n @Element() el: HTMLElement;\r\n @Prop() progress: number = 0;\r\n\r\n // Update 'xv-progress-indicator-item' done status\r\n @Watch('progress')\r\n updateChildItems() {\r\n const items = this.el.children;\r\n const itemsCount = this.el.childElementCount;\r\n const progressPerItem = 100 / itemsCount;\r\n\r\n if (!items.length || !itemsCount) return;\r\n\r\n Array.from(items).forEach((item, index) => {\r\n const itemProgress = (index + 1) * progressPerItem;\r\n const done = this.progress >= itemProgress;\r\n (item as HTMLElement).setAttribute('done', done ? 'true' : 'false');\r\n });\r\n }\r\n\r\n // Load initial done status\r\n componentDidLoad() {\r\n this.updateChildItems()\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class=\"xv-progress-indicator\">\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host(.xv-progress-indicator-item) {\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n padding: 10px 16px;\r\n &:before {\r\n width: 100%;\r\n }\r\n\r\n &:before, .line {\r\n content: '';\r\n z-index: 1;\r\n display: inline-block;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n color: inherit;\r\n background-color: var(--border-subtle-01, grey);\r\n }\r\n\r\n .line {\r\n width: 0;\r\n color: inherit;\r\n transition: width 250ms ease;\r\n background-color: var(--background-brand, currentColor);\r\n }\r\n\r\n .icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 22px;\r\n height: 22px;\r\n max-width: 22px;\r\n max-height: 22px;\r\n border: 2px dashed var(--border-subtle-01, currentColor);\r\n border-radius: 50%;\r\n svg {\r\n opacity: 0;\r\n transition: opacity 500ms ease-in-out;\r\n }\r\n }\r\n\r\n .label {\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 18px;\r\n letter-spacing: 0.16px;\r\n }\r\n}\r\n\r\n:host(.done) {\r\n .icon {\r\n border-color: var(--background-brand, currentColor);\r\n color: var(--background-brand, inherit);\r\n border-style: solid;\r\n svg {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .line {\r\n width: 100% !important;\r\n background-color: var(--background-brand, currentColor);\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-progress-indicator-item',\r\n styleUrl: 'xv-progress-indicator-item.scss',\r\n shadow: true,\r\n})\r\nexport class XvProgressIndicatorItem {\r\n @Element() el: HTMLElement;\r\n @Prop({ reflect: false }) done: boolean = false;\r\n\r\n render() {\r\n return (\r\n <Host class={`xv-progress-indicator-item ${this.done ? 'done' : ''}`}>\r\n <span class=\"line\"/>\r\n <span class=\"icon\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 448 512\"\r\n width={14}\r\n height={14}\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"\r\n />\r\n </svg>\r\n </span>\r\n <p class=\"label\"><slot/></p>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n border-radius: 1000px;\r\n background-color: var(--background);\r\n color: var(--text-primary);\r\n font-family: var(--ff-body, inherit);\r\n\r\n .xv-tag_content {\r\n padding-left: 8px;\r\n padding-right: 8px;\r\n color: inherit;\r\n font-family: var(--ff-body);\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px;\r\n letter-spacing: 0.32px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .xv-tag_close {\r\n box-sizing: border-box;\r\n text-decoration: none;\r\n border: none;\r\n background-color: inherit;\r\n outline: none;\r\n border-spacing: 0;\r\n list-style: none outside none;\r\n margin: 0;\r\n padding: 0;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 62px;\r\n width: 15px;\r\n height: 15px;\r\n text-align: left;\r\n color: inherit;\r\n text-indent: 0;\r\n transition: opacity 300ms ease-in-out, filter 300ms ease-in-out;\r\n &:hover {\r\n cursor: pointer;\r\n filter: brightness(80%);\r\n }\r\n\r\n &:active {\r\n opacity: 0.7;\r\n }\r\n\r\n &:focus {\r\n outline: 1px solid currentColor;\r\n }\r\n\r\n &:after {\r\n overflow: hidden;\r\n width: inherit;\r\n height: inherit;\r\n color: inherit;\r\n font-size: 16px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n content: \"\\00d7\";\r\n }\r\n }\r\n}\r\n\r\n:host(.sm) {\r\n font-size: var(--fz-sm);\r\n}\r\n\r\n:host(.md) {\r\n font-size: var(--fz-md);\r\n .xv-tag_content {\r\n line-height: 24px;\r\n }\r\n\r\n .xv-tag_close {\r\n height: 24px;\r\n width: 24px;\r\n }\r\n}\r\n\r\n:host(.lg) {\r\n font-size: var(--fz-lg);\r\n .xv-tag_content {\r\n line-height: 26px;\r\n }\r\n\r\n .xv-tag_close {\r\n height: 26px;\r\n width: 26px;\r\n }\r\n}\r\n\r\n:host(.disabled) {\r\n pointer-events: none;\r\n background-color: var(--layer-01);\r\n color: var(--text-disabled);\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-tag',\r\n styleUrl: 'xv-tag.scss',\r\n shadow: true,\r\n})\r\nexport class XvTag {\r\n @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n @Prop() color: string = '';\r\n @Prop() bg: string = '';\r\n @Prop() disabled: boolean = false;\r\n @Prop() closeable: boolean = false;\r\n @Event() closeClick: EventEmitter<PointerEvent>;\r\n\r\n closeHandler(e: PointerEvent) {\r\n if (this.disabled) return;\r\n\r\n this.closeClick.emit(e);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n style={{ color: this.color, background: this.bg }}\r\n class={`xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}`}\r\n >\r\n <div class=\"xv-tag_content\">\r\n <slot></slot>\r\n </div>\r\n {this.closeable && (\r\n <button onClick={this.closeHandler.bind(this)} class=\"xv-tag_close\"></button>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n position: relative;\r\n display: inline-block;\r\n cursor: pointer;\r\n}\r\n\r\n/* General styles for tooltip */\r\n:host::before,\r\n:host::after {\r\n position: absolute;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\r\n z-index: 10;\r\n}\r\n\r\n/* Tooltip */\r\n:host::before {\r\n content: attr(tooltip);\r\n background: var(--background-inverse, #333);\r\n color: var(--icon-inverse, #fff);\r\n padding: var(--gap-sm, 5px) var(--gap-md, 16px);\r\n border-radius: 2px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-width: max(70vw);\r\n font-family: var(--fz-body, Tahoma);\r\n font-size: var(fz-md, 14px);\r\n font-weight: 400;\r\n line-height: 18px;\r\n letter-spacing: 0.16px;\r\n}\r\n\r\n/* Arrow */\r\n:host::after {\r\n content: \"\";\r\n border: 6px solid transparent;\r\n}\r\n\r\n/* Show Tooltip and arrow */\r\n:host(:hover)::before,\r\n:host(:hover)::after,\r\n:host(:focus)::before,\r\n:host(:focus)::after {\r\n opacity: 1;\r\n visibility: visible;\r\n}\r\n\r\n/* Tooltip positions */\r\n:host(.xv-tooltip_top)::before {\r\n bottom: 100%;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top)::after {\r\n bottom: 100%;\r\n left: 50%;\r\n border-top-color: var(--background-inverse, #333);\r\n transform: translateX(-50%) translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_top-left)::before {\r\n bottom: 100%;\r\n left: 0;\r\n transform: translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top-left)::after {\r\n bottom: 100%;\r\n left: 10px;\r\n border-top-color: black;\r\n transform: translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_top-right)::before {\r\n bottom: 100%;\r\n right: 0;\r\n transform: translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top-right)::after {\r\n bottom: 100%;\r\n right: 10px;\r\n border-top-color: var(--background-inverse, #333);\r\n transform: translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom)::before {\r\n top: 100%;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom)::after {\r\n top: 100%;\r\n left: 50%;\r\n border-bottom-color: black;\r\n transform: translateX(-50%) translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom-left)::before {\r\n top: 100%;\r\n left: 0;\r\n transform: translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom-left)::after {\r\n top: 100%;\r\n left: 10px;\r\n border-bottom-color: var(--background-inverse, #333);\r\n transform: translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom-right)::before {\r\n top: 100%;\r\n right: 0;\r\n transform: translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom-right)::after {\r\n top: 100%;\r\n right: 10px;\r\n border-bottom-color: var(--background-inverse, #333);\r\n transform: translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_left)::before {\r\n right: 100%;\r\n top: 50%;\r\n transform: translateY(-50%) translateX(-5px);\r\n}\r\n:host(.xv-tooltip_left)::after {\r\n right: 100%;\r\n top: 50%;\r\n border-left-color: var(--background-inverse, #333);\r\n transform: translateY(-50%) translateX(5px);\r\n}\r\n\r\n:host(.xv-tooltip_right)::before {\r\n left: 100%;\r\n top: 50%;\r\n transform: translateY(-50%) translateX(5px);\r\n}\r\n:host(.xv-tooltip_right)::after {\r\n left: 100%;\r\n top: 50%;\r\n border-right-color: var(--background-inverse, #333);\r\n transform: translateY(-50%) translateX(-5px);\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-tooltip',\r\n styleUrl: 'xv-tooltip.scss',\r\n shadow: true,\r\n})\r\nexport class XvTooltip {\r\n /** Message what will be shown for tooltip **/\r\n @Prop() message: string;\r\n /**\r\n * Tooltip and arrow position related to element\r\n * possible options: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'.\r\n * By default, \"top\"\r\n */\r\n @Prop() position: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right' = 'top';\r\n\r\n render() {\r\n return (\r\n <Host tooltip={this.message} class={`xv-tooltip_${this.position}`}>\r\n <slot>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width={16} height={16}>\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"\r\n />\r\n </svg>\r\n </slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
package/dist/esm/xv-webcomponents.js CHANGED
@@ -16,7 +16,7 @@ var patchBrowser = () => {
16
16
 
17
17
  patchBrowser().then(async (options) => {
18
18
  await globalScripts();
19
- return bootstrapLazy([["xv-accordion_10",[[1,"xv-accordion",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[1,"xv-accordion-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-button-v2",{"label":[1],"variant":[1],"disabled":[4]}],[1,"xv-card",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[1,"xv-checkbox-v2"],[1,"xv-link",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[1,"xv-progress-indicator",{"progress":[2]},null,{"progress":["updateChildItems"]}],[1,"xv-progress-indicator-item",{"done":[4]}],[1,"xv-tag",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[1,"xv-tooltip",{"message":[1],"position":[1]}]]],["xv-breadcrumbs",[[1,"xv-breadcrumbs"]]]], options);
19
+ return bootstrapLazy([["xv-accordion_10",[[1,"xv-accordion",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[1,"xv-accordion-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-button-v2",{"label":[1],"variant":[1],"disabled":[4]}],[1,"xv-card-v2",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[1,"xv-checkbox-v2"],[1,"xv-link",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[1,"xv-progress-indicator",{"progress":[2]},null,{"progress":["updateChildItems"]}],[1,"xv-progress-indicator-item",{"done":[4]}],[1,"xv-tag",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[1,"xv-tooltip",{"message":[1],"position":[1]}]]],["xv-breadcrumbs",[[1,"xv-breadcrumbs"]]]], options);
20
20
  });
21
21
 
22
22
  //# sourceMappingURL=xv-webcomponents.js.map
package/dist/types/components.d.ts CHANGED
@@ -37,7 +37,7 @@ export namespace Components {
37
37
  */
38
38
  "variant": 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost';
39
39
  }
40
- interface XvCard {
40
+ interface XvCardV2 {
41
41
  "body": string;
42
42
  "footer": string;
43
43
  "header": string;
@@ -151,11 +151,11 @@ declare global {
151
151
  prototype: HTMLXvButtonV2Element;
152
152
  new (): HTMLXvButtonV2Element;
153
153
  };
154
- interface HTMLXvCardElement extends Components.XvCard, HTMLStencilElement {
154
+ interface HTMLXvCardV2Element extends Components.XvCardV2, HTMLStencilElement {
155
155
  }
156
- var HTMLXvCardElement: {
157
- prototype: HTMLXvCardElement;
158
- new (): HTMLXvCardElement;
156
+ var HTMLXvCardV2Element: {
157
+ prototype: HTMLXvCardV2Element;
158
+ new (): HTMLXvCardV2Element;
159
159
  };
160
160
  interface HTMLXvCheckboxV2Element extends Components.XvCheckboxV2, HTMLStencilElement {
161
161
  }
@@ -209,7 +209,7 @@ declare global {
209
209
  "xv-accordion-item": HTMLXvAccordionItemElement;
210
210
  "xv-breadcrumbs": HTMLXvBreadcrumbsElement;
211
211
  "xv-button-v2": HTMLXvButtonV2Element;
212
- "xv-card": HTMLXvCardElement;
212
+ "xv-card-v2": HTMLXvCardV2Element;
213
213
  "xv-checkbox-v2": HTMLXvCheckboxV2Element;
214
214
  "xv-link": HTMLXvLinkElement;
215
215
  "xv-progress-indicator": HTMLXvProgressIndicatorElement;
@@ -255,7 +255,7 @@ declare namespace LocalJSX {
255
255
  */
256
256
  "variant"?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost';
257
257
  }
258
- interface XvCard {
258
+ interface XvCardV2 {
259
259
  "body"?: string;
260
260
  "footer"?: string;
261
261
  "header"?: string;
@@ -300,7 +300,7 @@ declare namespace LocalJSX {
300
300
  "xv-accordion-item": XvAccordionItem;
301
301
  "xv-breadcrumbs": XvBreadcrumbs;
302
302
  "xv-button-v2": XvButtonV2;
303
- "xv-card": XvCard;
303
+ "xv-card-v2": XvCardV2;
304
304
  "xv-checkbox-v2": XvCheckboxV2;
305
305
  "xv-link": XvLink;
306
306
  "xv-progress-indicator": XvProgressIndicator;
@@ -317,7 +317,7 @@ declare module "@stencil/core" {
317
317
  "xv-accordion-item": LocalJSX.XvAccordionItem & JSXBase.HTMLAttributes<HTMLXvAccordionItemElement>;
318
318
  "xv-breadcrumbs": LocalJSX.XvBreadcrumbs & JSXBase.HTMLAttributes<HTMLXvBreadcrumbsElement>;
319
319
  "xv-button-v2": LocalJSX.XvButtonV2 & JSXBase.HTMLAttributes<HTMLXvButtonV2Element>;
320
- "xv-card": LocalJSX.XvCard & JSXBase.HTMLAttributes<HTMLXvCardElement>;
320
+ "xv-card-v2": LocalJSX.XvCardV2 & JSXBase.HTMLAttributes<HTMLXvCardV2Element>;
321
321
  "xv-checkbox-v2": LocalJSX.XvCheckboxV2 & JSXBase.HTMLAttributes<HTMLXvCheckboxV2Element>;
322
322
  "xv-link": LocalJSX.XvLink & JSXBase.HTMLAttributes<HTMLXvLinkElement>;
323
323
  "xv-progress-indicator": LocalJSX.XvProgressIndicator & JSXBase.HTMLAttributes<HTMLXvProgressIndicatorElement>;
package/dist/xv-webcomponents/{p-6f058b7f.entry.js → p-948b7ef5.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{r as t,c as o,h as e,H as r,g as a}from"./p-543fe755.js";import{u as i}from"./p-a0b74d3c.js";const s=":host{display:block}";const n=s;const d=class{constructor(e){t(this,e);this.accordionChange=o(this,"accordionChange",7);this.multiple=false;this.xvId=i();this.opened=new Set}async toggleItem(t){if(this.opened.has(t)){this.opened.delete(t)}else{if(!this.multiple)this.opened.clear();this.value=t;this.opened.add(this.value)}this.accordionChange.emit({opened:this.opened,id:this.xvId});return{opened:this.opened,id:this.xvId}}componentWillLoad(){if(this.value){return this.toggleItem(this.value)}}render(){return e(r,{key:"a46169f8e281ddf85ac7bd535dfba7006f3ea879",class:"xv-accordion","data-id":this.xvId},e("slot",{key:"f09576542905cb8d28e911553ab81dfe97823a25"}))}};d.style=n;const c=':host{border-top:1px solid var(--border-subtle-01);display:flex;flex-direction:column;font-family:var(--ff-body, inherit)}:host(.disabled) .label{color:var(--text-disabled)}:host(.disabled) .label:hover{cursor:initial;background-color:transparent}.label{padding:14px 16px;display:inline-flex;align-items:center;column-gap:20px;justify-content:space-between;text-align:left;color:var(--text-primary);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:0.16px;background-color:transparent;transition:background-color 200ms ease-in-out}.label>span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.label:hover{cursor:pointer;background-color:var(--layer-hover-01)}.label:after{content:"";border:solid black;border-width:0 2px 2px 0;display:inline-block;padding:4.66px;transition:transform 100ms ease-in-out;transform:rotate(45deg)}.label.opened:after{transform:rotate(-135deg)}.content{padding:0 16px;text-align:left;color:var(--text-primary);font-size:14px;overflow:hidden;max-height:0;transition:max-height 300ms ease-in-out, padding 250ms ease 50ms}.content.opened{padding:14px 16px;max-height:500px}';const l=c;const b=class{constructor(e){t(this,e);this.itemToggle=o(this,"itemToggle",7);this.disabled=false;this.isOpen=false}handleAccordionChange(t){var o;const e=(o=this.el.closest("[data-id]"))===null||o===void 0?void 0:o.getAttribute("data-id");if(t.detail.id!==e)return;this.isOpen=t.detail.opened.has(this.value)}toggle(){var t,o;if(this.disabled)return;this.isOpen=!this.isOpen;(o=(t=this.el.closest("xv-accordion"))===null||t===void 0?void 0:t.toggleItem)===null||o===void 0?void 0:o.call(t,this.value)}render(){return e(r,{key:"8b245355a1f6782ca3fd1669b752499150da5f17",class:`${this.disabled?"disabled":""}`},e("label",{key:"999fc39c0e58f6805b3d58f5f36e0f36a18ab888",class:`label ${this.isOpen?"opened":"closed"}`,onClick:this.toggle.bind(this)},e("span",{key:"0f3f72f620001f6ea19de0532deab6991b67c93b"},this.label)),e("div",{key:"fc27c4239c8b51690627678983882b65c4d94f4a",class:`content ${this.isOpen?"opened":"closed"}`},e("slot",{key:"6643838a58f16d568654f5dc366b812b446f9625"})))}get el(){return a(this)}};b.style=l;const h='@charset "UTF-8";:host{--focus-border-width:2px;--focus-border-style:solid;--button-ghost:tarnsparent;--text-disabled-opacity:0.25;--button-border-radius:3px;--button-border-width:1px;--button-border-style:solid;--button-border-color-accent:#97BF0D;--button-border-color-primary:#273435;--button-border-color-secondary:#D1D1D1;--button-border-color-ghost:tarnsparent;--button-ghost-hover:tarnsparent;--button-ghost-active:rgba(139, 139, 139, 0.5);--button-accent-disabled:#D1D1D1;--button-primary-disabled:#D1D1D1;--button-secondary-disabled:#D1D1D1;--button-tertiary-disabled:tarnsparent;--button-ghost-disabled:tarnsparent}:host button{font-family:inherit;font-size:16px;font-weight:700;padding:0 20px;height:40px;line-height:40px;cursor:pointer;box-sizing:border-box;transition:background-color 0.2s ease-in-out, filter 0.2s ease-in-out, transform 0.1s ease-in-out, border-color 0.2s ease-in-out, border-width 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button{}.xv-button.accent{background-color:var(--button-accent);color:var(--text-on-color);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-accent);border-radius:var(--button-border-radius)}.xv-button.accent:hover{background-color:var(--button-accent-hover)}.xv-button.accent:active{background-color:var(--button-accent-active);color:var(--text-on-color)}.xv-button.accent:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.accent:disabled{background-color:var(--button-accent-disabled);color:var(--text-on-color-disabled);border:var(--button-border-width) var(--button-border-style) var(--button-accent-disabled)}.xv-button.primary{background-color:var(--button-primary);color:var(--text-on-color);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-primary);border-radius:var(--button-border-radius)}.xv-button.primary:hover{background-color:var(--button-primary-hover)}.xv-button.primary:active{background-color:var(--button-primary-active)}.xv-button.primary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.primary:disabled{background-color:var(--button-primary-disabled);color:var(--text-on-color-disabled);border:var(--button-border-width) var(--button-border-style) var(--button-primary-disabled)}.xv-button.secondary{background-color:var(--button-secondary);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);border-radius:var(--button-border-radius)}.xv-button.secondary:hover{background-color:var(--button-secondary-hover)}.xv-button.secondary:active{background-color:var(--button-secondary-active)}.xv-button.secondary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.secondary:disabled{background-color:var(--button-secondary-disabled);color:var(--text-on-color-disabled)}.xv-button.tertiary{background-color:var(--button-ghost);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-tertiary);border-radius:var(--button-border-radius)}.xv-button.tertiary:hover{background-color:var(--button-tertiary-hover)}.xv-button.tertiary:active{background-color:var(--button-tertiary-active)}.xv-button.tertiary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.tertiary:disabled{background-color:var(--button-tertiary-disabled);color:var(--text-disabled);opacity:var(--text-disabled-opacity)}.xv-button.ghost{background-color:var(--button-ghost);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-ghost);border-radius:var(--button-border-radius)}.xv-button.ghost:hover{background-color:var(--button-ghost-hover)}.xv-button.ghost:active{background-color:var(--button-ghost-active)}.xv-button.ghost:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out}.xv-button.ghost:disabled{background-color:var(--button-ghost-disabled);color:var(--text-disabled);opacity:var(--text-disabled-opacity)}';const f=h;const v=class{constructor(e){t(this,e);this.buttonClick=o(this,"buttonClick",7);this.label="";this.variant="primary";this.disabled=false;this.handleClick=()=>{if(this.disabled){return}this.buttonClick.emit()}}render(){return e(r,{key:"5f34d72138394e7b99fd2df0307baf92f7c9d1ca"},e("button",{key:"de80a89aa9daf5fcf4cca25efc2188062547a3d1",class:`xv-button ${this.variant}`,disabled:this.disabled,onClick:this.handleClick},e("slot",{key:"c9223d17a19e0c7289f7598256ed324f4c338d19",name:"icon-left"}),e("slot",{key:"fb264cb3bef9c91b9b9a97ceab270ae056b1795b"},this.label),e("slot",{key:"b837dfb923f982af430921a134595ab63ab5bfee",name:"icon-right"})))}};v.style=f;const x=":host{display:flex;flex-direction:column;border-radius:10px;border:1px solid var(--border-subtle-00);background:var(--layer-layer-02);box-shadow:0 1px 3px 1px rgba(39, 52, 53, 0.15), 0 1px 2px 0 rgba(39, 52, 53, 0.3);font-family:var(--ff-body, inherit);overflow:visible !important}:host(.xv-card_vertical){width:100% !important}:host(.xv-card_horizontal){flex-direction:row;display:flex;width:max-content}:host(.xv-card_horizontal) .xv-card_media__content,:host(.xv-card_horizontal) .xv-card_media ::slotted([slot=media]){min-height:100%;max-height:100%;max-width:160px;min-width:160px}.xv-card_content{padding:16px;display:flex;flex-direction:column;flex:1;text-align:left}.xv-card_media__content,.xv-card_media ::slotted([slot=media]){max-width:100%;min-width:100%;min-height:199px;max-height:199px;object-fit:cover;object-position:center}.xv-card_header__content,.xv-card_header ::slotted([slot=header]){margin:0 0 8px;color:var(--text-primary);font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:-0.6px}.xv-card_body{flex:1}.xv-card_body__content,.xv-card_body ::slotted([slot=body]){margin:0 0 8px;color:var(--text-secondary);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:-0.1px}";const p=x;const u=class{constructor(o){t(this,o);this.variant="vertical"}render(){return e(r,{key:"c8ec1bfefb9a6cb92b316eab36d3a4e8a08e1a78",class:`xv-card xv-card_${this.variant}`,part:this.variant},e("div",{key:"f6274c858ce8333fd2de700b8f0b20921eb7ba09",class:"xv-card_media"},e("slot",{key:"91105c9e61b8dfe46411bf095dd196f969e9fc02",name:"media"},this.media&&e("img",{key:"2101315142f14a478bf2dd2eb72f7ce3922dfa44",class:"xv-card_media__content",src:this.media,alt:this.header}))),e("div",{key:"58c284ccd7cde840c1808aa14185eb1c70de4751",class:"xv-card_content"},e("div",{key:"fb72c62a0d7b5bfedb9a14b7fd8cc4750cfac434",class:"xv-card_header"},e("slot",{key:"a8ef5cc27eb4b691e5f8fae2544fe96ccc202fdf",name:"header"},this.header&&e("p",{key:"01fc1daadbb56f4a2f92bd704db06e08a747cd77",class:"xv-card_header__content"},this.header))),e("div",{key:"2950f470bd305143908ba1bb170da068d6d598f6",class:"xv-card_body"},e("slot",{key:"ef9fe6d7daaced77c27483b66c8b01dacfc6713a",name:"body"},this.body&&e("p",{key:"8afd1196e2a45176b503c6be29fdd85ac0e93a83",class:"xv-card_body__content"},this.header))),e("div",{key:"42e791cfadf951a1e0d99a5a500f52f1553bedfd",class:"xv-card_footer"},e("slot",{key:"ac81fb8b06bba6a1851afb344c325ea3a521fceb",name:"footer"},this.footer))))}};u.style=p;const g=class{constructor(o){t(this,o)}applyGlobalStyles(){var t;const o=document.getElementById("brand-style");if(o){const e=document.createElement("style");e.innerHTML=`@import url('${o.href}');`;(t=this.el.shadowRoot)===null||t===void 0?void 0:t.appendChild(e)}}componentWillLoad(){this.applyGlobalStyles()}render(){return e("label",{key:"76ab7573da75f52db73a267122eede98d03d30a0",class:"checkbox-container"},e("input",{key:"fe56dd9781f8ab06d32d1d986d0e04d53b7f56e5",type:"checkbox"}),e("span",{key:"2265baa2f2f06749de8dc9de91ae375178627a5b",class:"checkmark"}),e("slot",{key:"953369ee5f0f656bcc339ca3030256dbaadec4fb"}))}get el(){return a(this)}};const y=":host{font-family:var(--ff-body, inherit)}:host(.xv-link_inline){display:inline-block}:host(.xv-link_inline) .xv-link{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}:host(.xv-link_standalone){display:block}:host(.xv-link_standalone) .xv-link{text-decoration-line:none}.xv-link{display:inline-flex;gap:8px;align-items:center;color:var(--link-primary);font-family:var(--ff-body);font-style:normal;font-weight:400;transition:color 200ms ease-in-out}.xv-link:active{color:var(--text-primary)}.xv-link:visited{color:var(--link-visted)}.xv-link:hover{color:var(--link-primary-hover);cursor:pointer}.xv-link:disabled,.xv-link_disabled,.xv-link::part(disabled){color:var(--text-disabled);pointer-events:none;cursor:initial}.xv-link.sm{font-size:var(--fz-sm);line-height:137.5%}.xv-link.md{font-size:var(--fz-md);line-height:128.571%}.xv-link.lg{font-size:var(--fz-lg);line-height:133.333%}";const m=y;const k=class{constructor(o){t(this,o);this.disabled=false;this.size="md";this.variant="inline"}preventLinkHandler(t){if(!this.disabled)return;t.preventDefault();t.stopPropagation()}render(){return e(r,{key:"f3434063788d5b6ffda532cb527661104df3ce38",class:`xv-link_${this.variant}`},e("a",{key:"2482f18ac929497b2f27b3da16d12414b24e3046",href:this.href,onClick:this.preventLinkHandler.bind(this),class:`xv-link ${this.disabled?"xv-link_disabled":""} ${this.size}`,target:this.target},e("slot",{key:"1ba29bc9189583d78808e9641588da27bdebc445",name:"icon-left"}),e("slot",{key:"f4cfc7d01a286f74e1ed1536622a097367d47d49"}),e("slot",{key:"a33ae557aaa112dc88c291273bce04d9425f937d",name:"icon-right"})))}};k.style=m;const _=":host{display:flex;align-items:flex-start;justify-content:space-between;font-family:var(--ff-body, inherit)}";const w=_;const z=class{constructor(o){t(this,o);this.progress=0}updateChildItems(){const t=this.el.children;const o=this.el.childElementCount;const e=100/o;if(!t.length||!o)return;Array.from(t).forEach(((t,o)=>{const r=(o+1)*e;const a=this.progress>=r;t.setAttribute("done",a?"true":"false")}))}componentDidLoad(){this.updateChildItems()}render(){return e(r,{key:"ce7e68173d7ec806832282ada99ade50ecc54f92",class:"xv-progress-indicator"},e("slot",{key:"5ebad467a8d1463d4e4e3fe014135cffe5e59c8b"}))}get el(){return a(this)}static get watchers(){return{progress:["updateChildItems"]}}};z.style=w;const C=':host(.xv-progress-indicator-item){display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:10px 16px}:host(.xv-progress-indicator-item):before{width:100%}:host(.xv-progress-indicator-item):before,:host(.xv-progress-indicator-item) .line{content:"";z-index:1;display:inline-block;position:absolute;top:0;left:0;right:0;height:2px;color:inherit;background-color:var(--border-subtle-01, grey)}:host(.xv-progress-indicator-item) .line{width:0;color:inherit;transition:width 250ms ease;background-color:var(--background-brand, currentColor)}:host(.xv-progress-indicator-item) .icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px;border:2px dashed var(--border-subtle-01, currentColor);border-radius:50%}:host(.xv-progress-indicator-item) .icon svg{opacity:0;transition:opacity 500ms ease-in-out}:host(.xv-progress-indicator-item) .label{color:var(--text-primary);font-size:14px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:0.16px}:host(.done) .icon{border-color:var(--background-brand, currentColor);color:var(--background-brand, inherit);border-style:solid}:host(.done) .icon svg{opacity:1}:host(.done) .line{width:100% !important;background-color:var(--background-brand, currentColor)}';const Y=C;const D=class{constructor(o){t(this,o);this.done=false}render(){return e(r,{key:"c26fd7f411c7eb2111c74011ba1217289541919b",class:`xv-progress-indicator-item ${this.done?"done":""}`},e("span",{key:"dbc80d2176c9ce9ba8e685888f44c5081af9d92c",class:"line"}),e("span",{key:"57937d7d83193248ac110257b01e548e7da850da",class:"icon"},e("svg",{key:"83691b60f9f5c1521e8ee2abeafe716c2713fefe",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:14,height:14},e("path",{key:"7e4f043bb9e81434f448efa6e95683870952760c",fill:"currentColor",d:"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"}))),e("p",{key:"4b0daea5e910474dd1167c5ed70159169c317b63",class:"label"},e("slot",{key:"2a2afe80a3070f53d6d6d9a71a6ea7c4869cd4cd"})))}get el(){return a(this)}};D.style=Y;const $='@charset "UTF-8";:host{display:inline-flex;align-items:center;justify-content:space-between;border-radius:1000px;background-color:var(--background);color:var(--text-primary);font-family:var(--ff-body, inherit)}:host .xv-tag_content{padding-left:8px;padding-right:8px;color:inherit;font-family:var(--ff-body);font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .xv-tag_close{box-sizing:border-box;text-decoration:none;border:none;background-color:inherit;outline:none;border-spacing:0;list-style:none outside none;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:62px;width:15px;height:15px;text-align:left;color:inherit;text-indent:0;transition:opacity 300ms ease-in-out, filter 300ms ease-in-out}:host .xv-tag_close:hover{cursor:pointer;filter:brightness(80%)}:host .xv-tag_close:active{opacity:0.7}:host .xv-tag_close:focus{outline:1px solid currentColor}:host .xv-tag_close:after{overflow:hidden;width:inherit;height:inherit;color:inherit;font-size:16px;display:inline-flex;align-items:center;justify-content:center;content:"×"}:host(.sm){font-size:var(--fz-sm)}:host(.md){font-size:var(--fz-md)}:host(.md) .xv-tag_content{line-height:24px}:host(.md) .xv-tag_close{height:24px;width:24px}:host(.lg){font-size:var(--fz-lg)}:host(.lg) .xv-tag_content{line-height:26px}:host(.lg) .xv-tag_close{height:26px;width:26px}:host(.disabled){pointer-events:none;background-color:var(--layer-01);color:var(--text-disabled)}';const j=$;const X=class{constructor(e){t(this,e);this.closeClick=o(this,"closeClick",7);this.size="md";this.color="";this.bg="";this.disabled=false;this.closeable=false}closeHandler(t){if(this.disabled)return;this.closeClick.emit(t)}render(){return e(r,{key:"a80efe5ce83faee34abb8f23956e0a5dad597734",style:{color:this.color,background:this.bg},class:`xv-tag ${this.disabled?"disabled":""} ${this.size}`},e("div",{key:"def67b2d9a6638de4941b071e529c41daf8150b0",class:"xv-tag_content"},e("slot",{key:"0489ac38e1eea6a1ba186b78b2e17637650c4c2d"})),this.closeable&&e("button",{key:"be5108f430f4f4d11d76a4b88a69ca2997a2c939",onClick:this.closeHandler.bind(this),class:"xv-tag_close"}))}};X.style=j;const L=':host{position:relative;display:inline-block;cursor:pointer}:host::before,:host::after{position:absolute;opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;z-index:10}:host::before{content:attr(tooltip);background:var(--background-inverse, #333);color:var(--icon-inverse, #fff);padding:var(--gap-sm, 5px) var(--gap-md, 16px);border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw;font-family:var(--fz-body, Tahoma);font-size:var(fz-md, 14px);font-weight:400;line-height:18px;letter-spacing:0.16px}:host::after{content:"";border:6px solid transparent}:host(:hover)::before,:host(:hover)::after,:host(:focus)::before,:host(:focus)::after{opacity:1;visibility:visible}:host(.xv-tooltip_top)::before{bottom:100%;left:50%;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_top)::after{bottom:100%;left:50%;border-top-color:var(--background-inverse, #333);transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_top-left)::before{bottom:100%;left:0;transform:translateY(-5px)}:host(.xv-tooltip_top-left)::after{bottom:100%;left:10px;border-top-color:black;transform:translateY(5px)}:host(.xv-tooltip_top-right)::before{bottom:100%;right:0;transform:translateY(-5px)}:host(.xv-tooltip_top-right)::after{bottom:100%;right:10px;border-top-color:var(--background-inverse, #333);transform:translateY(5px)}:host(.xv-tooltip_bottom)::before{top:100%;left:50%;transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_bottom)::after{top:100%;left:50%;border-bottom-color:black;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_bottom-left)::before{top:100%;left:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-left)::after{top:100%;left:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_bottom-right)::before{top:100%;right:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-right)::after{top:100%;right:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_left)::before{right:100%;top:50%;transform:translateY(-50%) translateX(-5px)}:host(.xv-tooltip_left)::after{right:100%;top:50%;border-left-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::before{left:100%;top:50%;transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::after{left:100%;top:50%;border-right-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(-5px)}';const T=L;const A=class{constructor(o){t(this,o);this.position="top"}render(){return e(r,{key:"d91cba6a2425ac5188d0c3908d670887849ddf9b",tooltip:this.message,class:`xv-tooltip_${this.position}`},e("slot",{key:"f8b284b78d72f5a1e53880173e9df9a286e4ab59"},e("svg",{key:"2b3dc074585eff9515c3383dd1415f7655425c0e",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",width:16,height:16},e("path",{key:"d2d1e7eb69b531ae9212ee6da186628f57482317",fill:"currentColor",d:"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"}))))}};A.style=T;export{d as xv_accordion,b as xv_accordion_item,v as xv_button_v2,u as xv_card,g as xv_checkbox_v2,k as xv_link,z as xv_progress_indicator,D as xv_progress_indicator_item,X as xv_tag,A as xv_tooltip};
2
- //# sourceMappingURL=p-6f058b7f.entry.js.map
1
+ import{r as t,c as o,h as e,H as r,g as a}from"./p-543fe755.js";import{u as i}from"./p-a0b74d3c.js";const s=":host{display:block}";const n=s;const d=class{constructor(e){t(this,e);this.accordionChange=o(this,"accordionChange",7);this.multiple=false;this.xvId=i();this.opened=new Set}async toggleItem(t){if(this.opened.has(t)){this.opened.delete(t)}else{if(!this.multiple)this.opened.clear();this.value=t;this.opened.add(this.value)}this.accordionChange.emit({opened:this.opened,id:this.xvId});return{opened:this.opened,id:this.xvId}}componentWillLoad(){if(this.value){return this.toggleItem(this.value)}}render(){return e(r,{key:"a46169f8e281ddf85ac7bd535dfba7006f3ea879",class:"xv-accordion","data-id":this.xvId},e("slot",{key:"f09576542905cb8d28e911553ab81dfe97823a25"}))}};d.style=n;const c=':host{border-top:1px solid var(--border-subtle-01);display:flex;flex-direction:column;font-family:var(--ff-body, inherit)}:host(.disabled) .label{color:var(--text-disabled)}:host(.disabled) .label:hover{cursor:initial;background-color:transparent}.label{padding:14px 16px;display:inline-flex;align-items:center;column-gap:20px;justify-content:space-between;text-align:left;color:var(--text-primary);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:0.16px;background-color:transparent;transition:background-color 200ms ease-in-out}.label>span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.label:hover{cursor:pointer;background-color:var(--layer-hover-01)}.label:after{content:"";border:solid black;border-width:0 2px 2px 0;display:inline-block;padding:4.66px;transition:transform 100ms ease-in-out;transform:rotate(45deg)}.label.opened:after{transform:rotate(-135deg)}.content{padding:0 16px;text-align:left;color:var(--text-primary);font-size:14px;overflow:hidden;max-height:0;transition:max-height 300ms ease-in-out, padding 250ms ease 50ms}.content.opened{padding:14px 16px;max-height:500px}';const l=c;const b=class{constructor(e){t(this,e);this.itemToggle=o(this,"itemToggle",7);this.disabled=false;this.isOpen=false}handleAccordionChange(t){var o;const e=(o=this.el.closest("[data-id]"))===null||o===void 0?void 0:o.getAttribute("data-id");if(t.detail.id!==e)return;this.isOpen=t.detail.opened.has(this.value)}toggle(){var t,o;if(this.disabled)return;this.isOpen=!this.isOpen;(o=(t=this.el.closest("xv-accordion"))===null||t===void 0?void 0:t.toggleItem)===null||o===void 0?void 0:o.call(t,this.value)}render(){return e(r,{key:"8b245355a1f6782ca3fd1669b752499150da5f17",class:`${this.disabled?"disabled":""}`},e("label",{key:"999fc39c0e58f6805b3d58f5f36e0f36a18ab888",class:`label ${this.isOpen?"opened":"closed"}`,onClick:this.toggle.bind(this)},e("span",{key:"0f3f72f620001f6ea19de0532deab6991b67c93b"},this.label)),e("div",{key:"fc27c4239c8b51690627678983882b65c4d94f4a",class:`content ${this.isOpen?"opened":"closed"}`},e("slot",{key:"6643838a58f16d568654f5dc366b812b446f9625"})))}get el(){return a(this)}};b.style=l;const h='@charset "UTF-8";:host{--focus-border-width:2px;--focus-border-style:solid;--button-ghost:tarnsparent;--text-disabled-opacity:0.25;--button-border-radius:3px;--button-border-width:1px;--button-border-style:solid;--button-border-color-accent:#97BF0D;--button-border-color-primary:#273435;--button-border-color-secondary:#D1D1D1;--button-border-color-ghost:tarnsparent;--button-ghost-hover:tarnsparent;--button-ghost-active:rgba(139, 139, 139, 0.5);--button-accent-disabled:#D1D1D1;--button-primary-disabled:#D1D1D1;--button-secondary-disabled:#D1D1D1;--button-tertiary-disabled:tarnsparent;--button-ghost-disabled:tarnsparent}:host button{font-family:inherit;font-size:16px;font-weight:700;padding:0 20px;height:40px;line-height:40px;cursor:pointer;box-sizing:border-box;transition:background-color 0.2s ease-in-out, filter 0.2s ease-in-out, transform 0.1s ease-in-out, border-color 0.2s ease-in-out, border-width 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button{}.xv-button.accent{background-color:var(--button-accent);color:var(--text-on-color);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-accent);border-radius:var(--button-border-radius)}.xv-button.accent:hover{background-color:var(--button-accent-hover)}.xv-button.accent:active{background-color:var(--button-accent-active);color:var(--text-on-color)}.xv-button.accent:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.accent:disabled{background-color:var(--button-accent-disabled);color:var(--text-on-color-disabled);border:var(--button-border-width) var(--button-border-style) var(--button-accent-disabled)}.xv-button.primary{background-color:var(--button-primary);color:var(--text-on-color);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-primary);border-radius:var(--button-border-radius)}.xv-button.primary:hover{background-color:var(--button-primary-hover)}.xv-button.primary:active{background-color:var(--button-primary-active)}.xv-button.primary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.primary:disabled{background-color:var(--button-primary-disabled);color:var(--text-on-color-disabled);border:var(--button-border-width) var(--button-border-style) var(--button-primary-disabled)}.xv-button.secondary{background-color:var(--button-secondary);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);border-radius:var(--button-border-radius)}.xv-button.secondary:hover{background-color:var(--button-secondary-hover)}.xv-button.secondary:active{background-color:var(--button-secondary-active)}.xv-button.secondary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.secondary:disabled{background-color:var(--button-secondary-disabled);color:var(--text-on-color-disabled)}.xv-button.tertiary{background-color:var(--button-ghost);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-tertiary);border-radius:var(--button-border-radius)}.xv-button.tertiary:hover{background-color:var(--button-tertiary-hover)}.xv-button.tertiary:active{background-color:var(--button-tertiary-active)}.xv-button.tertiary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.tertiary:disabled{background-color:var(--button-tertiary-disabled);color:var(--text-disabled);opacity:var(--text-disabled-opacity)}.xv-button.ghost{background-color:var(--button-ghost);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-ghost);border-radius:var(--button-border-radius)}.xv-button.ghost:hover{background-color:var(--button-ghost-hover)}.xv-button.ghost:active{background-color:var(--button-ghost-active)}.xv-button.ghost:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out}.xv-button.ghost:disabled{background-color:var(--button-ghost-disabled);color:var(--text-disabled);opacity:var(--text-disabled-opacity)}';const f=h;const v=class{constructor(e){t(this,e);this.buttonClick=o(this,"buttonClick",7);this.label="";this.variant="primary";this.disabled=false;this.handleClick=()=>{if(this.disabled){return}this.buttonClick.emit()}}render(){return e(r,{key:"5f34d72138394e7b99fd2df0307baf92f7c9d1ca"},e("button",{key:"de80a89aa9daf5fcf4cca25efc2188062547a3d1",class:`xv-button ${this.variant}`,disabled:this.disabled,onClick:this.handleClick},e("slot",{key:"c9223d17a19e0c7289f7598256ed324f4c338d19",name:"icon-left"}),e("slot",{key:"fb264cb3bef9c91b9b9a97ceab270ae056b1795b"},this.label),e("slot",{key:"b837dfb923f982af430921a134595ab63ab5bfee",name:"icon-right"})))}};v.style=f;const x=":host{display:flex;flex-direction:column;border-radius:10px;border:1px solid var(--border-subtle-00);background:var(--layer-layer-02);box-shadow:0 1px 3px 1px rgba(39, 52, 53, 0.15), 0 1px 2px 0 rgba(39, 52, 53, 0.3);font-family:var(--ff-body, inherit);overflow:visible !important}:host(.xv-card_vertical){width:100% !important}:host(.xv-card_horizontal){flex-direction:row;display:flex;width:max-content}:host(.xv-card_horizontal) .xv-card_media__content,:host(.xv-card_horizontal) .xv-card_media ::slotted([slot=media]){min-height:100%;max-height:100%;max-width:160px;min-width:160px}.xv-card_content{padding:16px;display:flex;flex-direction:column;flex:1;text-align:left}.xv-card_media__content,.xv-card_media ::slotted([slot=media]){max-width:100%;min-width:100%;min-height:199px;max-height:199px;object-fit:cover;object-position:center}.xv-card_header__content,.xv-card_header ::slotted([slot=header]){margin:0 0 8px;color:var(--text-primary);font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:-0.6px}.xv-card_body{flex:1}.xv-card_body__content,.xv-card_body ::slotted([slot=body]){margin:0 0 8px;color:var(--text-secondary);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:-0.1px}";const p=x;const u=class{constructor(o){t(this,o);this.variant="vertical"}render(){return e(r,{key:"954936e5ea5014bb4c58fed8946ebba8598e6f3d",class:`xv-card xv-card_${this.variant}`,part:this.variant},e("div",{key:"357b2524c23b8af0730892c90db84dda20990070",class:"xv-card_media"},e("slot",{key:"02f2e73b4aed200833751e60bdfdc7151477576b",name:"media"},this.media&&e("img",{key:"b27510aae0d35583fa7ccf75396289751611780a",class:"xv-card_media__content",src:this.media,alt:this.header}))),e("div",{key:"61c711fcf6e82d6da9761411c0ceef7d0407caca",class:"xv-card_content"},e("div",{key:"7b476457734b9a03e525a409b839284846845189",class:"xv-card_header"},e("slot",{key:"c5c068a0b6d61ab1255276e4c2c72e039f5f9909",name:"header"},this.header&&e("p",{key:"dde81bf7813870b4dd3514a027d02518d31acffe",class:"xv-card_header__content"},this.header))),e("div",{key:"7fda70bb56b9313d868463bfee51a68bfb8e65c8",class:"xv-card_body"},e("slot",{key:"3acbfa548e594f01cd9d514b0f7d7596b13900a6",name:"body"},this.body&&e("p",{key:"1a399d0a0351c4a0f1d166009f9467fed8a7e2dc",class:"xv-card_body__content"},this.header))),e("div",{key:"7458f3c1612205f50ba2692b864089b4ef87e7f2",class:"xv-card_footer"},e("slot",{key:"3e83fe4bfcda18cf9f46c304603f0a6ed0df4361",name:"footer"},this.footer))))}};u.style=p;const g=class{constructor(o){t(this,o)}applyGlobalStyles(){var t;const o=document.getElementById("brand-style");if(o){const e=document.createElement("style");e.innerHTML=`@import url('${o.href}');`;(t=this.el.shadowRoot)===null||t===void 0?void 0:t.appendChild(e)}}componentWillLoad(){this.applyGlobalStyles()}render(){return e("label",{key:"76ab7573da75f52db73a267122eede98d03d30a0",class:"checkbox-container"},e("input",{key:"fe56dd9781f8ab06d32d1d986d0e04d53b7f56e5",type:"checkbox"}),e("span",{key:"2265baa2f2f06749de8dc9de91ae375178627a5b",class:"checkmark"}),e("slot",{key:"953369ee5f0f656bcc339ca3030256dbaadec4fb"}))}get el(){return a(this)}};const y=":host{font-family:var(--ff-body, inherit)}:host(.xv-link_inline){display:inline-block}:host(.xv-link_inline) .xv-link{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}:host(.xv-link_standalone){display:block}:host(.xv-link_standalone) .xv-link{text-decoration-line:none}.xv-link{display:inline-flex;gap:8px;align-items:center;color:var(--link-primary);font-family:var(--ff-body);font-style:normal;font-weight:400;transition:color 200ms ease-in-out}.xv-link:active{color:var(--text-primary)}.xv-link:visited{color:var(--link-visted)}.xv-link:hover{color:var(--link-primary-hover);cursor:pointer}.xv-link:disabled,.xv-link_disabled,.xv-link::part(disabled){color:var(--text-disabled);pointer-events:none;cursor:initial}.xv-link.sm{font-size:var(--fz-sm);line-height:137.5%}.xv-link.md{font-size:var(--fz-md);line-height:128.571%}.xv-link.lg{font-size:var(--fz-lg);line-height:133.333%}";const m=y;const k=class{constructor(o){t(this,o);this.disabled=false;this.size="md";this.variant="inline"}preventLinkHandler(t){if(!this.disabled)return;t.preventDefault();t.stopPropagation()}render(){return e(r,{key:"f3434063788d5b6ffda532cb527661104df3ce38",class:`xv-link_${this.variant}`},e("a",{key:"2482f18ac929497b2f27b3da16d12414b24e3046",href:this.href,onClick:this.preventLinkHandler.bind(this),class:`xv-link ${this.disabled?"xv-link_disabled":""} ${this.size}`,target:this.target},e("slot",{key:"1ba29bc9189583d78808e9641588da27bdebc445",name:"icon-left"}),e("slot",{key:"f4cfc7d01a286f74e1ed1536622a097367d47d49"}),e("slot",{key:"a33ae557aaa112dc88c291273bce04d9425f937d",name:"icon-right"})))}};k.style=m;const _=":host{display:flex;align-items:flex-start;justify-content:space-between;font-family:var(--ff-body, inherit)}";const w=_;const z=class{constructor(o){t(this,o);this.progress=0}updateChildItems(){const t=this.el.children;const o=this.el.childElementCount;const e=100/o;if(!t.length||!o)return;Array.from(t).forEach(((t,o)=>{const r=(o+1)*e;const a=this.progress>=r;t.setAttribute("done",a?"true":"false")}))}componentDidLoad(){this.updateChildItems()}render(){return e(r,{key:"ce7e68173d7ec806832282ada99ade50ecc54f92",class:"xv-progress-indicator"},e("slot",{key:"5ebad467a8d1463d4e4e3fe014135cffe5e59c8b"}))}get el(){return a(this)}static get watchers(){return{progress:["updateChildItems"]}}};z.style=w;const C=':host(.xv-progress-indicator-item){display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:10px 16px}:host(.xv-progress-indicator-item):before{width:100%}:host(.xv-progress-indicator-item):before,:host(.xv-progress-indicator-item) .line{content:"";z-index:1;display:inline-block;position:absolute;top:0;left:0;right:0;height:2px;color:inherit;background-color:var(--border-subtle-01, grey)}:host(.xv-progress-indicator-item) .line{width:0;color:inherit;transition:width 250ms ease;background-color:var(--background-brand, currentColor)}:host(.xv-progress-indicator-item) .icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px;border:2px dashed var(--border-subtle-01, currentColor);border-radius:50%}:host(.xv-progress-indicator-item) .icon svg{opacity:0;transition:opacity 500ms ease-in-out}:host(.xv-progress-indicator-item) .label{color:var(--text-primary);font-size:14px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:0.16px}:host(.done) .icon{border-color:var(--background-brand, currentColor);color:var(--background-brand, inherit);border-style:solid}:host(.done) .icon svg{opacity:1}:host(.done) .line{width:100% !important;background-color:var(--background-brand, currentColor)}';const Y=C;const D=class{constructor(o){t(this,o);this.done=false}render(){return e(r,{key:"c26fd7f411c7eb2111c74011ba1217289541919b",class:`xv-progress-indicator-item ${this.done?"done":""}`},e("span",{key:"dbc80d2176c9ce9ba8e685888f44c5081af9d92c",class:"line"}),e("span",{key:"57937d7d83193248ac110257b01e548e7da850da",class:"icon"},e("svg",{key:"83691b60f9f5c1521e8ee2abeafe716c2713fefe",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:14,height:14},e("path",{key:"7e4f043bb9e81434f448efa6e95683870952760c",fill:"currentColor",d:"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"}))),e("p",{key:"4b0daea5e910474dd1167c5ed70159169c317b63",class:"label"},e("slot",{key:"2a2afe80a3070f53d6d6d9a71a6ea7c4869cd4cd"})))}get el(){return a(this)}};D.style=Y;const $='@charset "UTF-8";:host{display:inline-flex;align-items:center;justify-content:space-between;border-radius:1000px;background-color:var(--background);color:var(--text-primary);font-family:var(--ff-body, inherit)}:host .xv-tag_content{padding-left:8px;padding-right:8px;color:inherit;font-family:var(--ff-body);font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .xv-tag_close{box-sizing:border-box;text-decoration:none;border:none;background-color:inherit;outline:none;border-spacing:0;list-style:none outside none;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:62px;width:15px;height:15px;text-align:left;color:inherit;text-indent:0;transition:opacity 300ms ease-in-out, filter 300ms ease-in-out}:host .xv-tag_close:hover{cursor:pointer;filter:brightness(80%)}:host .xv-tag_close:active{opacity:0.7}:host .xv-tag_close:focus{outline:1px solid currentColor}:host .xv-tag_close:after{overflow:hidden;width:inherit;height:inherit;color:inherit;font-size:16px;display:inline-flex;align-items:center;justify-content:center;content:"×"}:host(.sm){font-size:var(--fz-sm)}:host(.md){font-size:var(--fz-md)}:host(.md) .xv-tag_content{line-height:24px}:host(.md) .xv-tag_close{height:24px;width:24px}:host(.lg){font-size:var(--fz-lg)}:host(.lg) .xv-tag_content{line-height:26px}:host(.lg) .xv-tag_close{height:26px;width:26px}:host(.disabled){pointer-events:none;background-color:var(--layer-01);color:var(--text-disabled)}';const j=$;const X=class{constructor(e){t(this,e);this.closeClick=o(this,"closeClick",7);this.size="md";this.color="";this.bg="";this.disabled=false;this.closeable=false}closeHandler(t){if(this.disabled)return;this.closeClick.emit(t)}render(){return e(r,{key:"a80efe5ce83faee34abb8f23956e0a5dad597734",style:{color:this.color,background:this.bg},class:`xv-tag ${this.disabled?"disabled":""} ${this.size}`},e("div",{key:"def67b2d9a6638de4941b071e529c41daf8150b0",class:"xv-tag_content"},e("slot",{key:"0489ac38e1eea6a1ba186b78b2e17637650c4c2d"})),this.closeable&&e("button",{key:"be5108f430f4f4d11d76a4b88a69ca2997a2c939",onClick:this.closeHandler.bind(this),class:"xv-tag_close"}))}};X.style=j;const L=':host{position:relative;display:inline-block;cursor:pointer}:host::before,:host::after{position:absolute;opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;z-index:10}:host::before{content:attr(tooltip);background:var(--background-inverse, #333);color:var(--icon-inverse, #fff);padding:var(--gap-sm, 5px) var(--gap-md, 16px);border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw;font-family:var(--fz-body, Tahoma);font-size:var(fz-md, 14px);font-weight:400;line-height:18px;letter-spacing:0.16px}:host::after{content:"";border:6px solid transparent}:host(:hover)::before,:host(:hover)::after,:host(:focus)::before,:host(:focus)::after{opacity:1;visibility:visible}:host(.xv-tooltip_top)::before{bottom:100%;left:50%;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_top)::after{bottom:100%;left:50%;border-top-color:var(--background-inverse, #333);transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_top-left)::before{bottom:100%;left:0;transform:translateY(-5px)}:host(.xv-tooltip_top-left)::after{bottom:100%;left:10px;border-top-color:black;transform:translateY(5px)}:host(.xv-tooltip_top-right)::before{bottom:100%;right:0;transform:translateY(-5px)}:host(.xv-tooltip_top-right)::after{bottom:100%;right:10px;border-top-color:var(--background-inverse, #333);transform:translateY(5px)}:host(.xv-tooltip_bottom)::before{top:100%;left:50%;transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_bottom)::after{top:100%;left:50%;border-bottom-color:black;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_bottom-left)::before{top:100%;left:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-left)::after{top:100%;left:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_bottom-right)::before{top:100%;right:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-right)::after{top:100%;right:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_left)::before{right:100%;top:50%;transform:translateY(-50%) translateX(-5px)}:host(.xv-tooltip_left)::after{right:100%;top:50%;border-left-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::before{left:100%;top:50%;transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::after{left:100%;top:50%;border-right-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(-5px)}';const T=L;const A=class{constructor(o){t(this,o);this.position="top"}render(){return e(r,{key:"d91cba6a2425ac5188d0c3908d670887849ddf9b",tooltip:this.message,class:`xv-tooltip_${this.position}`},e("slot",{key:"f8b284b78d72f5a1e53880173e9df9a286e4ab59"},e("svg",{key:"2b3dc074585eff9515c3383dd1415f7655425c0e",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",width:16,height:16},e("path",{key:"d2d1e7eb69b531ae9212ee6da186628f57482317",fill:"currentColor",d:"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"}))))}};A.style=T;export{d as xv_accordion,b as xv_accordion_item,v as xv_button_v2,u as xv_card_v2,g as xv_checkbox_v2,k as xv_link,z as xv_progress_indicator,D as xv_progress_indicator_item,X as xv_tag,A as xv_tooltip};
2
+ //# sourceMappingURL=p-948b7ef5.entry.js.map
package/dist/xv-webcomponents/p-948b7ef5.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["xvAccordionCss","XvAccordionStyle0","XvAccordion","constructor","hostRef","this","multiple","xvId","uidGenerator","opened","Set","toggleItem","value","has","delete","clear","add","accordionChange","emit","id","componentWillLoad","render","h","Host","key","class","xvAccordionItemCss","XvAccordionItemStyle0","XvAccordionItem","disabled","isOpen","handleAccordionChange","event","parentAccordionId","_a","el","closest","getAttribute","detail","toggle","_b","call","onClick","bind","label","xvButtonV2Css","XvButtonV2Style0","XvButton","variant","handleClick","buttonClick","name","xvCardCss","XvCardV2Style0","XvCard","part","media","src","alt","header","body","footer","XvCheckbox","applyGlobalStyles","globalStyle","document","getElementById","styleClone","createElement","innerHTML","href","shadowRoot","appendChild","type","xvLinkCss","XvLinkStyle0","XvLink","size","preventLinkHandler","e","preventDefault","stopPropagation","target","xvProgressIndicatorCss","XvProgressIndicatorStyle0","XvProgressIndicator","progress","updateChildItems","items","children","itemsCount","childElementCount","progressPerItem","length","Array","from","forEach","item","index","itemProgress","done","setAttribute","componentDidLoad","xvProgressIndicatorItemCss","XvProgressIndicatorItemStyle0","XvProgressIndicatorItem","xmlns","viewBox","width","height","fill","d","xvTagCss","XvTagStyle0","XvTag","color","bg","closeable","closeHandler","closeClick","style","background","xvTooltipCss","XvTooltipStyle0","XvTooltip","position","tooltip","message"],"sources":["src/components/xv-accordion/xv-accordion.scss?tag=xv-accordion&encapsulation=shadow","src/components/xv-accordion/xv-accordion.tsx","src/components/xv-accordion-item/xv-accordion-item.scss?tag=xv-accordion-item&encapsulation=shadow","src/components/xv-accordion-item/xv-accordion-item.tsx","src/components/xv-button/xv-button-v2.scss?tag=xv-button-v2&encapsulation=shadow","src/components/xv-button/xv-button.tsx","src/components/xv-card/xv-card.scss?tag=xv-card-v2&encapsulation=shadow","src/components/xv-card/xv-card.tsx","src/components/xv-checkbox/xv-checkbox.tsx","src/components/xv-link/xv-link.scss?tag=xv-link&encapsulation=shadow","src/components/xv-link/xv-link.tsx","src/components/xv-progress-indicator/xv-progress-indicator.scss?tag=xv-progress-indicator&encapsulation=shadow","src/components/xv-progress-indicator/xv-progress-indicator.tsx","src/components/xv-progress-indicator-item/xv-progress-indicator-item.scss?tag=xv-progress-indicator-item&encapsulation=shadow","src/components/xv-progress-indicator-item/xv-progress-indicator-item.tsx","src/components/xv-tag/xv-tag.scss?tag=xv-tag&encapsulation=shadow","src/components/xv-tag/xv-tag.tsx","src/components/xv-tooltip/xv-tooltip.scss?tag=xv-tooltip&encapsulation=shadow","src/components/xv-tooltip/xv-tooltip.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}\r\n","import { Component, Host, h, Event, EventEmitter, Method, State, Prop } from '@stencil/core';\r\nimport { uidGenerator } from '../../utils/utils';\r\n\r\n@Component({\r\n tag: 'xv-accordion',\r\n styleUrl: 'xv-accordion.scss',\r\n shadow: true,\r\n})\r\nexport class XvAccordion {\r\n @Prop() multiple: boolean = false;\r\n @Prop() xvId: string = uidGenerator();\r\n @Prop({ mutable: true }) value: string;\r\n @State() opened: Set<string> = new Set();\r\n @Event() accordionChange: EventEmitter<{ opened: Set<string>, id: string }>;\r\n\r\n @Method()\r\n async toggleItem(value: string) {\r\n if (this.opened.has(value)) {\r\n this.opened.delete(value);\r\n } else {\r\n if (!this.multiple) this.opened.clear();\r\n this.value = value;\r\n this.opened.add(this.value);\r\n }\r\n\r\n this.accordionChange.emit({ opened: this.opened, id: this.xvId });\r\n\r\n return { opened: this.opened, id: this.xvId };\r\n }\r\n\r\n componentWillLoad() {\r\n if (this.value) {\r\n return this.toggleItem(this.value);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class=\"xv-accordion\" data-id={this.xvId}>\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n border-top: 1px solid var(--border-subtle-01);\r\n display: flex;\r\n flex-direction: column;\r\n font-family: var(--ff-body, inherit);\r\n}\r\n\r\n:host(.disabled) {\r\n .label {\r\n color: var(--text-disabled);\r\n &:hover {\r\n cursor: initial;\r\n background-color: transparent;\r\n }\r\n }\r\n}\r\n\r\n.label {\r\n padding: 14px 16px;\r\n display: inline-flex;\r\n align-items: center;\r\n column-gap: 20px;\r\n justify-content: space-between;\r\n text-align: left;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n letter-spacing: 0.16px;\r\n background-color: transparent;\r\n transition: background-color 200ms ease-in-out;\r\n &>span {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 1;\r\n -webkit-box-orient: vertical;\r\n }\r\n\r\n &:hover {\r\n cursor: pointer;\r\n background-color: var(--layer-hover-01);\r\n }\r\n\r\n &:after {\r\n content: '';\r\n border: solid black;\r\n border-width: 0 2px 2px 0;\r\n display: inline-block;\r\n padding: 4.66px;\r\n transition: transform 100ms ease-in-out;\r\n transform: rotate(45deg);\r\n }\r\n\r\n &.opened:after {\r\n transform: rotate(-135deg);\r\n }\r\n}\r\n\r\n.content {\r\n padding: 0 16px;\r\n text-align: left;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n overflow: hidden;\r\n max-height: 0;\r\n transition: max-height 300ms ease-in-out, padding 250ms ease 50ms;\r\n &.opened {\r\n padding: 14px 16px;\r\n max-height: 500px;\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop, State, Listen, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-accordion-item',\r\n styleUrl: 'xv-accordion-item.scss',\r\n shadow: true,\r\n})\r\nexport class XvAccordionItem {\r\n @Element() el: HTMLElement;\r\n @Prop() disabled: boolean = false;\r\n @Prop() label: string;\r\n @Prop() value: string;\r\n @State() isOpen: boolean = false;\r\n @Event() itemToggle: EventEmitter;\r\n\r\n @Listen('accordionChange', { target: 'body' })\r\n handleAccordionChange(event: CustomEvent<{ opened: Set<string>, id: string }>) {\r\n const parentAccordionId = this.el.closest('[data-id]')?.getAttribute('data-id');\r\n if (event.detail.id !== parentAccordionId) return;\r\n this.isOpen = event.detail.opened.has(this.value);\r\n }\r\n\r\n toggle() {\r\n if (this.disabled) return;\r\n this.isOpen = !this.isOpen;\r\n this.el.closest('xv-accordion')?.toggleItem?.(this.value);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class={`${this.disabled ? 'disabled' : ''}`}>\r\n <label class={`label ${this.isOpen ? 'opened' : 'closed'}`} onClick={this.toggle.bind(this)}>\r\n <span>{this.label}</span>\r\n </label>\r\n <div class={`content ${this.isOpen ? 'opened' : 'closed'}`}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n --focus-border-width: 2px;\r\n --focus-border-style: solid;\r\n --button-ghost: tarnsparent;\r\n --text-disabled-opacity: 0.25;\r\n --button-border-radius: 3px;\r\n --button-border-width: 1px;\r\n --button-border-style: solid;\r\n --button-border-color-accent: #97BF0D;\r\n --button-border-color-primary: #273435;\r\n --button-border-color-secondary: #D1D1D1;\r\n --button-border-color-ghost: tarnsparent;\r\n --button-ghost-hover: tarnsparent;\r\n --button-ghost-active: rgba(139, 139, 139, 0.5);\r\n --button-accent-disabled: #D1D1D1;\r\n --button-primary-disabled: #D1D1D1;\r\n --button-secondary-disabled: #D1D1D1;\r\n --button-tertiary-disabled: tarnsparent;\r\n --button-ghost-disabled: tarnsparent;\r\n\r\n button {\r\n font-family: inherit;\r\n font-size: 16px;\r\n font-weight: 700;\r\n padding: 0 20px;\r\n height: 40px;\r\n line-height: 40px;\r\n cursor: pointer;\r\n box-sizing: border-box;\r\n transition:\r\n background-color 0.2s ease-in-out,\r\n filter 0.2s ease-in-out,\r\n transform 0.1s ease-in-out,\r\n border-color 0.2s ease-in-out,\r\n border-width 0.2s ease-in-out,\r\n box-shadow 0.2s ease-in-out;\r\n }\r\n}\r\n\r\n.xv-button {\r\n /* ✅ Accent Button */\r\n &.accent {\r\n background-color: var(--button-accent);\r\n color: var(--text-on-color);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-accent);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-accent-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-accent-active);\r\n color: var(--text-on-color);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-accent-disabled);\r\n color: var(--text-on-color-disabled);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-accent-disabled);\r\n }\r\n\r\n }\r\n\r\n /* ✅ Primary Button */\r\n &.primary {\r\n background-color: var(--button-primary);\r\n color: var(--text-on-color);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-primary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-primary-hover)\r\n }\r\n &:active {\r\n background-color: var(--button-primary-active)\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-primary-disabled);\r\n color: var(--text-on-color-disabled);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-primary-disabled);\r\n }\r\n }\r\n\r\n /* ✅ Secondary Button */\r\n &.secondary {\r\n background-color: var(--button-secondary);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-secondary-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-secondary-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-secondary-disabled);\r\n color: var(--text-on-color-disabled);\r\n }\r\n }\r\n\r\n /* ✅ Tertiary Button */\r\n &.tertiary {\r\n background-color: var(--button-ghost);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-tertiary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-tertiary-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-tertiary-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-tertiary-disabled);\r\n color: var(--text-disabled);\r\n opacity: var(--text-disabled-opacity);\r\n }\r\n }\r\n\r\n /* ✅ Ghost Button */\r\n &.ghost {\r\n background-color: var(--button-ghost);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-ghost);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-ghost-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-ghost-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-ghost-disabled);\r\n color: var(--text-disabled);\r\n opacity: var(--text-disabled-opacity);\r\n }\r\n }\r\n}\r\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\r\n\r\n\r\n@Component({\r\n tag: 'xv-button-v2',\r\n styleUrl: 'xv-button-v2.scss',\r\n shadow: true,\r\n})\r\nexport class XvButton {\r\n /** Button label */\r\n @Prop() label: string = '';\r\n\r\n /** Variant */\r\n @Prop() variant: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost' = 'primary';\r\n\r\n /** Disabled state */\r\n @Prop() disabled: boolean = false;\r\n\r\n /** Emits when the button is clicked */\r\n @Event() buttonClick!: EventEmitter<void>;\r\n\r\n /** Handle click only if not disabled */\r\n private handleClick = () => {\r\n if (this.disabled) {\r\n return;\r\n }\r\n this.buttonClick.emit();\r\n };\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n class={`xv-button ${this.variant}`}\r\n disabled={this.disabled}\r\n onClick={this.handleClick}\r\n >\r\n <slot name=\"icon-left\"></slot>\r\n\r\n <slot>\r\n {this.label}\r\n </slot>\r\n\r\n <slot name=\"icon-right\"></slot>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n border: 1px solid var(--border-subtle-00);\r\n background: var(--layer-layer-02);\r\n box-shadow: 0 1px 3px 1px rgba(39, 52, 53, 0.15), 0 1px 2px 0 rgba(39, 52, 53, 0.30);\r\n font-family: var(--ff-body, inherit);\r\n overflow: visible !important;\r\n}\r\n\r\n:host(.xv-card_vertical) {\r\n //max-width: 298px;\r\n // TODO: wright down correct styling for card size\r\n width: 100%!important;\r\n}\r\n\r\n:host(.xv-card_horizontal) {\r\n flex-direction: row;\r\n display: flex;\r\n width: max-content;\r\n\r\n .xv-card_media {\r\n &__content, ::slotted([slot=\"media\"]) {\r\n min-height: 100%;\r\n max-height: 100%;\r\n max-width: 160px;\r\n min-width: 160px;\r\n }\r\n }\r\n}\r\n\r\n.xv-card {\r\n &_content {\r\n padding: 16px;\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n text-align: left;\r\n }\r\n\r\n &_media {\r\n &__content, ::slotted([slot=\"media\"]) {\r\n max-width: 100%;\r\n min-width: 100%;\r\n min-height: 199px;\r\n max-height: 199px;\r\n object-fit: cover;\r\n object-position: center;\r\n }\r\n }\r\n\r\n &_header {\r\n &__content, ::slotted([slot=\"header\"]) {\r\n margin: 0 0 8px;\r\n color: var(--text-primary);\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n line-height: 24px;\r\n letter-spacing: -0.6px;\r\n }\r\n }\r\n\r\n &_body {\r\n flex: 1;\r\n &__content, ::slotted([slot=\"body\"]) {\r\n margin: 0 0 8px;\r\n color: var(--text-secondary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n letter-spacing: -0.1px;\r\n }\r\n }\r\n\r\n &_footer {}\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-card-v2',\r\n styleUrl: 'xv-card.scss',\r\n shadow: true,\r\n})\r\nexport class XvCard {\r\n @Prop() variant: 'horizontal' | 'vertical' = 'vertical';\r\n @Prop() media: string;\r\n @Prop() header: string;\r\n @Prop() body: string;\r\n @Prop() footer: string;\r\n render() {\r\n return (\r\n <Host class={`xv-card xv-card_${this.variant}`} part={this.variant}>\r\n <div class=\"xv-card_media\">\r\n <slot name=\"media\">\r\n {this.media && <img class=\"xv-card_media__content\" src={this.media} alt={this.header} />}\r\n </slot>\r\n </div>\r\n\r\n <div class=\"xv-card_content\">\r\n <div class=\"xv-card_header\">\r\n <slot name=\"header\">\r\n {this.header && <p class=\"xv-card_header__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_body\">\r\n <slot name=\"body\">\r\n {this.body && <p class=\"xv-card_body__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_footer\">\r\n <slot name=\"footer\">{this.footer}</slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'xv-checkbox-v2',\n shadow: true, // ✅ Shadow DOM aktiviert\n})\nexport class XvCheckbox {\n @Element() el!: HTMLElement;\n\n private applyGlobalStyles() {\n const globalStyle = document.getElementById(\"brand-style\") as HTMLLinkElement;\n if (globalStyle) {\n const styleClone = document.createElement(\"style\");\n styleClone.innerHTML = `@import url('${globalStyle.href}');`;\n this.el.shadowRoot?.appendChild(styleClone);\n }\n }\n\n componentWillLoad() {\n this.applyGlobalStyles();\n }\n\n render() {\n return (\n <label class=\"checkbox-container\">\n <input type=\"checkbox\" />\n <span class=\"checkmark\"></span>\n <slot></slot>\n </label>\n );\n }\n}\n",":host {\r\n font-family: var(--ff-body, inherit);\r\n}\r\n\r\n:host(.xv-link_inline) {\r\n display: inline-block;\r\n .xv-link {\r\n text-decoration-line: underline;\r\n text-decoration-style: solid;\r\n text-decoration-skip-ink: none;\r\n text-decoration-thickness: auto;\r\n text-underline-offset: auto;\r\n text-underline-position: from-font;\r\n }\r\n}\r\n\r\n:host(.xv-link_standalone) {\r\n display: block;\r\n .xv-link {\r\n text-decoration-line: none;\r\n }\r\n}\r\n\r\n.xv-link {\r\n display: inline-flex;\r\n gap: 8px;\r\n align-items: center;\r\n color: var(--link-primary);\r\n font-family: var(--ff-body);\r\n font-style: normal;\r\n font-weight: 400;\r\n transition: color 200ms ease-in-out;\r\n\r\n &:active {\r\n color: var(--text-primary);\r\n }\r\n\r\n &:visited {\r\n color: var(--link-visted);\r\n }\r\n\r\n &:hover {\r\n color: var(--link-primary-hover);\r\n cursor: pointer;\r\n }\r\n\r\n &:disabled, &_disabled, &::part(disabled) {\r\n color: var(--text-disabled);\r\n pointer-events: none;\r\n cursor: initial;\r\n }\r\n\r\n &.sm {\r\n font-size: var(--fz-sm);\r\n line-height: 137.5%;\r\n }\r\n\r\n &.md {\r\n font-size: var(--fz-md);\r\n line-height: 128.571%;\r\n }\r\n\r\n &.lg {\r\n font-size: var(--fz-lg);\r\n line-height: 133.333%;\r\n }\r\n}\r\n","import { Component, h, Host, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-link',\r\n styleUrl: 'xv-link.scss',\r\n shadow: true,\r\n})\r\nexport class XvLink {\r\n @Prop() href: string;\r\n @Prop() target: '_self' | '_blank' | '_parent' | '_top';\r\n @Prop() disabled: boolean = false;\r\n @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n @Prop() variant: 'standalone' | 'inline' = 'inline';\r\n\r\n preventLinkHandler(e: PointerEvent) {\r\n if (!this.disabled) return;\r\n\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class={`xv-link_${this.variant}`}>\r\n <a\r\n href={this.href}\r\n onClick={this.preventLinkHandler.bind(this)}\r\n class={`xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`}\r\n target={this.target}\r\n >\r\n <slot name=\"icon-left\"></slot>\r\n\r\n <slot></slot>\r\n\r\n <slot name=\"icon-right\"></slot>\r\n </a>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n font-family: var(--ff-body, inherit);\r\n}\r\n","import { Component, Host, h, Prop, Watch, Element } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-progress-indicator',\r\n styleUrl: 'xv-progress-indicator.scss',\r\n shadow: true,\r\n})\r\nexport class XvProgressIndicator {\r\n @Element() el: HTMLElement;\r\n @Prop() progress: number = 0;\r\n\r\n // Update 'xv-progress-indicator-item' done status\r\n @Watch('progress')\r\n updateChildItems() {\r\n const items = this.el.children;\r\n const itemsCount = this.el.childElementCount;\r\n const progressPerItem = 100 / itemsCount;\r\n\r\n if (!items.length || !itemsCount) return;\r\n\r\n Array.from(items).forEach((item, index) => {\r\n const itemProgress = (index + 1) * progressPerItem;\r\n const done = this.progress >= itemProgress;\r\n (item as HTMLElement).setAttribute('done', done ? 'true' : 'false');\r\n });\r\n }\r\n\r\n // Load initial done status\r\n componentDidLoad() {\r\n this.updateChildItems()\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class=\"xv-progress-indicator\">\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host(.xv-progress-indicator-item) {\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n padding: 10px 16px;\r\n &:before {\r\n width: 100%;\r\n }\r\n\r\n &:before, .line {\r\n content: '';\r\n z-index: 1;\r\n display: inline-block;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n color: inherit;\r\n background-color: var(--border-subtle-01, grey);\r\n }\r\n\r\n .line {\r\n width: 0;\r\n color: inherit;\r\n transition: width 250ms ease;\r\n background-color: var(--background-brand, currentColor);\r\n }\r\n\r\n .icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 22px;\r\n height: 22px;\r\n max-width: 22px;\r\n max-height: 22px;\r\n border: 2px dashed var(--border-subtle-01, currentColor);\r\n border-radius: 50%;\r\n svg {\r\n opacity: 0;\r\n transition: opacity 500ms ease-in-out;\r\n }\r\n }\r\n\r\n .label {\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 18px;\r\n letter-spacing: 0.16px;\r\n }\r\n}\r\n\r\n:host(.done) {\r\n .icon {\r\n border-color: var(--background-brand, currentColor);\r\n color: var(--background-brand, inherit);\r\n border-style: solid;\r\n svg {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .line {\r\n width: 100% !important;\r\n background-color: var(--background-brand, currentColor);\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-progress-indicator-item',\r\n styleUrl: 'xv-progress-indicator-item.scss',\r\n shadow: true,\r\n})\r\nexport class XvProgressIndicatorItem {\r\n @Element() el: HTMLElement;\r\n @Prop({ reflect: false }) done: boolean = false;\r\n\r\n render() {\r\n return (\r\n <Host class={`xv-progress-indicator-item ${this.done ? 'done' : ''}`}>\r\n <span class=\"line\"/>\r\n <span class=\"icon\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 448 512\"\r\n width={14}\r\n height={14}\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"\r\n />\r\n </svg>\r\n </span>\r\n <p class=\"label\"><slot/></p>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n border-radius: 1000px;\r\n background-color: var(--background);\r\n color: var(--text-primary);\r\n font-family: var(--ff-body, inherit);\r\n\r\n .xv-tag_content {\r\n padding-left: 8px;\r\n padding-right: 8px;\r\n color: inherit;\r\n font-family: var(--ff-body);\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px;\r\n letter-spacing: 0.32px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .xv-tag_close {\r\n box-sizing: border-box;\r\n text-decoration: none;\r\n border: none;\r\n background-color: inherit;\r\n outline: none;\r\n border-spacing: 0;\r\n list-style: none outside none;\r\n margin: 0;\r\n padding: 0;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 62px;\r\n width: 15px;\r\n height: 15px;\r\n text-align: left;\r\n color: inherit;\r\n text-indent: 0;\r\n transition: opacity 300ms ease-in-out, filter 300ms ease-in-out;\r\n &:hover {\r\n cursor: pointer;\r\n filter: brightness(80%);\r\n }\r\n\r\n &:active {\r\n opacity: 0.7;\r\n }\r\n\r\n &:focus {\r\n outline: 1px solid currentColor;\r\n }\r\n\r\n &:after {\r\n overflow: hidden;\r\n width: inherit;\r\n height: inherit;\r\n color: inherit;\r\n font-size: 16px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n content: \"\\00d7\";\r\n }\r\n }\r\n}\r\n\r\n:host(.sm) {\r\n font-size: var(--fz-sm);\r\n}\r\n\r\n:host(.md) {\r\n font-size: var(--fz-md);\r\n .xv-tag_content {\r\n line-height: 24px;\r\n }\r\n\r\n .xv-tag_close {\r\n height: 24px;\r\n width: 24px;\r\n }\r\n}\r\n\r\n:host(.lg) {\r\n font-size: var(--fz-lg);\r\n .xv-tag_content {\r\n line-height: 26px;\r\n }\r\n\r\n .xv-tag_close {\r\n height: 26px;\r\n width: 26px;\r\n }\r\n}\r\n\r\n:host(.disabled) {\r\n pointer-events: none;\r\n background-color: var(--layer-01);\r\n color: var(--text-disabled);\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-tag',\r\n styleUrl: 'xv-tag.scss',\r\n shadow: true,\r\n})\r\nexport class XvTag {\r\n @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n @Prop() color: string = '';\r\n @Prop() bg: string = '';\r\n @Prop() disabled: boolean = false;\r\n @Prop() closeable: boolean = false;\r\n @Event() closeClick: EventEmitter<PointerEvent>;\r\n\r\n closeHandler(e: PointerEvent) {\r\n if (this.disabled) return;\r\n\r\n this.closeClick.emit(e);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n style={{ color: this.color, background: this.bg }}\r\n class={`xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}`}\r\n >\r\n <div class=\"xv-tag_content\">\r\n <slot></slot>\r\n </div>\r\n {this.closeable && (\r\n <button onClick={this.closeHandler.bind(this)} class=\"xv-tag_close\"></button>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n position: relative;\r\n display: inline-block;\r\n cursor: pointer;\r\n}\r\n\r\n/* General styles for tooltip */\r\n:host::before,\r\n:host::after {\r\n position: absolute;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\r\n z-index: 10;\r\n}\r\n\r\n/* Tooltip */\r\n:host::before {\r\n content: attr(tooltip);\r\n background: var(--background-inverse, #333);\r\n color: var(--icon-inverse, #fff);\r\n padding: var(--gap-sm, 5px) var(--gap-md, 16px);\r\n border-radius: 2px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-width: max(70vw);\r\n font-family: var(--fz-body, Tahoma);\r\n font-size: var(fz-md, 14px);\r\n font-weight: 400;\r\n line-height: 18px;\r\n letter-spacing: 0.16px;\r\n}\r\n\r\n/* Arrow */\r\n:host::after {\r\n content: \"\";\r\n border: 6px solid transparent;\r\n}\r\n\r\n/* Show Tooltip and arrow */\r\n:host(:hover)::before,\r\n:host(:hover)::after,\r\n:host(:focus)::before,\r\n:host(:focus)::after {\r\n opacity: 1;\r\n visibility: visible;\r\n}\r\n\r\n/* Tooltip positions */\r\n:host(.xv-tooltip_top)::before {\r\n bottom: 100%;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top)::after {\r\n bottom: 100%;\r\n left: 50%;\r\n border-top-color: var(--background-inverse, #333);\r\n transform: translateX(-50%) translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_top-left)::before {\r\n bottom: 100%;\r\n left: 0;\r\n transform: translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top-left)::after {\r\n bottom: 100%;\r\n left: 10px;\r\n border-top-color: black;\r\n transform: translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_top-right)::before {\r\n bottom: 100%;\r\n right: 0;\r\n transform: translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top-right)::after {\r\n bottom: 100%;\r\n right: 10px;\r\n border-top-color: var(--background-inverse, #333);\r\n transform: translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom)::before {\r\n top: 100%;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom)::after {\r\n top: 100%;\r\n left: 50%;\r\n border-bottom-color: black;\r\n transform: translateX(-50%) translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom-left)::before {\r\n top: 100%;\r\n left: 0;\r\n transform: translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom-left)::after {\r\n top: 100%;\r\n left: 10px;\r\n border-bottom-color: var(--background-inverse, #333);\r\n transform: translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom-right)::before {\r\n top: 100%;\r\n right: 0;\r\n transform: translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom-right)::after {\r\n top: 100%;\r\n right: 10px;\r\n border-bottom-color: var(--background-inverse, #333);\r\n transform: translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_left)::before {\r\n right: 100%;\r\n top: 50%;\r\n transform: translateY(-50%) translateX(-5px);\r\n}\r\n:host(.xv-tooltip_left)::after {\r\n right: 100%;\r\n top: 50%;\r\n border-left-color: var(--background-inverse, #333);\r\n transform: translateY(-50%) translateX(5px);\r\n}\r\n\r\n:host(.xv-tooltip_right)::before {\r\n left: 100%;\r\n top: 50%;\r\n transform: translateY(-50%) translateX(5px);\r\n}\r\n:host(.xv-tooltip_right)::after {\r\n left: 100%;\r\n top: 50%;\r\n border-right-color: var(--background-inverse, #333);\r\n transform: translateY(-50%) translateX(-5px);\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-tooltip',\r\n styleUrl: 'xv-tooltip.scss',\r\n shadow: true,\r\n})\r\nexport class XvTooltip {\r\n /** Message what will be shown for tooltip **/\r\n @Prop() message: string;\r\n /**\r\n * Tooltip and arrow position related to element\r\n * possible options: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'.\r\n * By default, \"top\"\r\n */\r\n @Prop() position: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right' = 'top';\r\n\r\n render() {\r\n return (\r\n <Host tooltip={this.message} class={`xv-tooltip_${this.position}`}>\r\n <slot>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width={16} height={16}>\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"\r\n />\r\n </svg>\r\n </slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}
package/dist/xv-webcomponents/xv-webcomponents.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,b as a}from"./p-543fe755.js";export{s as setNonce}from"./p-543fe755.js";import{g as o}from"./p-e1255160.js";var r=()=>{const a=import.meta.url;const o={};if(a!==""){o.resourcesUrl=new URL(".",a).href}return e(o)};r().then((async e=>{await o();return a([["p-6f058b7f",[[1,"xv-accordion",{multiple:[4],xvId:[1,"xv-id"],value:[1025],opened:[32],toggleItem:[64]}],[1,"xv-accordion-item",{disabled:[4],label:[1],value:[1],isOpen:[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-button-v2",{label:[1],variant:[1],disabled:[4]}],[1,"xv-card",{variant:[1],media:[1],header:[1],body:[1],footer:[1]}],[1,"xv-checkbox-v2"],[1,"xv-link",{href:[1],target:[1],disabled:[4],size:[1],variant:[1]}],[1,"xv-progress-indicator",{progress:[2]},null,{progress:["updateChildItems"]}],[1,"xv-progress-indicator-item",{done:[4]}],[1,"xv-tag",{size:[1],color:[1],bg:[1],disabled:[4],closeable:[4]}],[1,"xv-tooltip",{message:[1],position:[1]}]]],["p-41bd284c",[[1,"xv-breadcrumbs"]]]],e)}));
1
+ import{p as e,b as a}from"./p-543fe755.js";export{s as setNonce}from"./p-543fe755.js";import{g as o}from"./p-e1255160.js";var r=()=>{const a=import.meta.url;const o={};if(a!==""){o.resourcesUrl=new URL(".",a).href}return e(o)};r().then((async e=>{await o();return a([["p-948b7ef5",[[1,"xv-accordion",{multiple:[4],xvId:[1,"xv-id"],value:[1025],opened:[32],toggleItem:[64]}],[1,"xv-accordion-item",{disabled:[4],label:[1],value:[1],isOpen:[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-button-v2",{label:[1],variant:[1],disabled:[4]}],[1,"xv-card-v2",{variant:[1],media:[1],header:[1],body:[1],footer:[1]}],[1,"xv-checkbox-v2"],[1,"xv-link",{href:[1],target:[1],disabled:[4],size:[1],variant:[1]}],[1,"xv-progress-indicator",{progress:[2]},null,{progress:["updateChildItems"]}],[1,"xv-progress-indicator-item",{done:[4]}],[1,"xv-tag",{size:[1],color:[1],bg:[1],disabled:[4],closeable:[4]}],[1,"xv-tooltip",{message:[1],position:[1]}]]],["p-41bd284c",[[1,"xv-breadcrumbs"]]]],e)}));
2
2
  //# sourceMappingURL=xv-webcomponents.esm.js.map
package/dist/xv-webcomponents/xv-webcomponents.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","multiple","xvId","value","opened","toggleItem","disabled","label","isOpen","variant","media","header","body","footer","target","size","progress","done","color","bg","closeable","message","position"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.27.1 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"0HAOA,IAAIA,EAAe,KAUjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EClB7BH,IAAeQ,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAc,kCAA8B,CAAAC,SAAS,IAAAC,KAAA,YAAAC,MAAA,OAAAC,OAAA,KAAAC,WAAA,+BAAAC,SAAA,IAAAC,MAAA,IAAAJ,MAAA,IAAAK,OAAA,2EAAAD,MAAA,IAAAE,QAAA,IAAAH,SAAA,oBAAAG,QAAA,IAAAC,MAAA,IAAAC,OAAA,IAAAC,KAAA,IAAAC,OAAA,yCAAAnB,KAAA,IAAAoB,OAAA,IAAAR,SAAA,IAAAS,KAAA,IAAAN,QAAA,kCAAAO,SAAA,WAAAA,SAAA,wDAAAC,KAAA,mBAAAF,KAAA,IAAAG,MAAA,IAAAC,GAAA,IAAAb,SAAA,IAAAc,UAAA,uBAAAC,QAAA,IAAAC,SAAA,+CAAAxB,EAAA","ignoreList":[]}
1
+ {"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","multiple","xvId","value","opened","toggleItem","disabled","label","isOpen","variant","media","header","body","footer","target","size","progress","done","color","bg","closeable","message","position"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.27.1 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"0HAOA,IAAIA,EAAe,KAUjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EClB7BH,IAAeQ,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAc,kCAA8B,CAAAC,SAAS,IAAAC,KAAA,YAAAC,MAAA,OAAAC,OAAA,KAAAC,WAAA,+BAAAC,SAAA,IAAAC,MAAA,IAAAJ,MAAA,IAAAK,OAAA,2EAAAD,MAAA,IAAAE,QAAA,IAAAH,SAAA,uBAAAG,QAAA,IAAAC,MAAA,IAAAC,OAAA,IAAAC,KAAA,IAAAC,OAAA,yCAAAnB,KAAA,IAAAoB,OAAA,IAAAR,SAAA,IAAAS,KAAA,IAAAN,QAAA,kCAAAO,SAAA,WAAAA,SAAA,wDAAAC,KAAA,mBAAAF,KAAA,IAAAG,MAAA,IAAAC,GAAA,IAAAb,SAAA,IAAAc,UAAA,uBAAAC,QAAA,IAAAC,SAAA,+CAAAxB,EAAA","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "xv-webcomponents",
3
- "version": "0.1.12",
3
+ "version": "0.1.13",
4
4
  "description": "Reusable Web Components for XV Applications",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
package/dist/xv-webcomponents/p-6f058b7f.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["xvAccordionCss","XvAccordionStyle0","XvAccordion","constructor","hostRef","this","multiple","xvId","uidGenerator","opened","Set","toggleItem","value","has","delete","clear","add","accordionChange","emit","id","componentWillLoad","render","h","Host","key","class","xvAccordionItemCss","XvAccordionItemStyle0","XvAccordionItem","disabled","isOpen","handleAccordionChange","event","parentAccordionId","_a","el","closest","getAttribute","detail","toggle","_b","call","onClick","bind","label","xvButtonV2Css","XvButtonV2Style0","XvButton","variant","handleClick","buttonClick","name","xvCardCss","XvCardStyle0","XvCard","part","media","src","alt","header","body","footer","XvCheckbox","applyGlobalStyles","globalStyle","document","getElementById","styleClone","createElement","innerHTML","href","shadowRoot","appendChild","type","xvLinkCss","XvLinkStyle0","XvLink","size","preventLinkHandler","e","preventDefault","stopPropagation","target","xvProgressIndicatorCss","XvProgressIndicatorStyle0","XvProgressIndicator","progress","updateChildItems","items","children","itemsCount","childElementCount","progressPerItem","length","Array","from","forEach","item","index","itemProgress","done","setAttribute","componentDidLoad","xvProgressIndicatorItemCss","XvProgressIndicatorItemStyle0","XvProgressIndicatorItem","xmlns","viewBox","width","height","fill","d","xvTagCss","XvTagStyle0","XvTag","color","bg","closeable","closeHandler","closeClick","style","background","xvTooltipCss","XvTooltipStyle0","XvTooltip","position","tooltip","message"],"sources":["src/components/xv-accordion/xv-accordion.scss?tag=xv-accordion&encapsulation=shadow","src/components/xv-accordion/xv-accordion.tsx","src/components/xv-accordion-item/xv-accordion-item.scss?tag=xv-accordion-item&encapsulation=shadow","src/components/xv-accordion-item/xv-accordion-item.tsx","src/components/xv-button/xv-button-v2.scss?tag=xv-button-v2&encapsulation=shadow","src/components/xv-button/xv-button.tsx","src/components/xv-card/xv-card.scss?tag=xv-card&encapsulation=shadow","src/components/xv-card/xv-card.tsx","src/components/xv-checkbox/xv-checkbox.tsx","src/components/xv-link/xv-link.scss?tag=xv-link&encapsulation=shadow","src/components/xv-link/xv-link.tsx","src/components/xv-progress-indicator/xv-progress-indicator.scss?tag=xv-progress-indicator&encapsulation=shadow","src/components/xv-progress-indicator/xv-progress-indicator.tsx","src/components/xv-progress-indicator-item/xv-progress-indicator-item.scss?tag=xv-progress-indicator-item&encapsulation=shadow","src/components/xv-progress-indicator-item/xv-progress-indicator-item.tsx","src/components/xv-tag/xv-tag.scss?tag=xv-tag&encapsulation=shadow","src/components/xv-tag/xv-tag.tsx","src/components/xv-tooltip/xv-tooltip.scss?tag=xv-tooltip&encapsulation=shadow","src/components/xv-tooltip/xv-tooltip.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}\r\n","import { Component, Host, h, Event, EventEmitter, Method, State, Prop } from '@stencil/core';\r\nimport { uidGenerator } from '../../utils/utils';\r\n\r\n@Component({\r\n tag: 'xv-accordion',\r\n styleUrl: 'xv-accordion.scss',\r\n shadow: true,\r\n})\r\nexport class XvAccordion {\r\n @Prop() multiple: boolean = false;\r\n @Prop() xvId: string = uidGenerator();\r\n @Prop({ mutable: true }) value: string;\r\n @State() opened: Set<string> = new Set();\r\n @Event() accordionChange: EventEmitter<{ opened: Set<string>, id: string }>;\r\n\r\n @Method()\r\n async toggleItem(value: string) {\r\n if (this.opened.has(value)) {\r\n this.opened.delete(value);\r\n } else {\r\n if (!this.multiple) this.opened.clear();\r\n this.value = value;\r\n this.opened.add(this.value);\r\n }\r\n\r\n this.accordionChange.emit({ opened: this.opened, id: this.xvId });\r\n\r\n return { opened: this.opened, id: this.xvId };\r\n }\r\n\r\n componentWillLoad() {\r\n if (this.value) {\r\n return this.toggleItem(this.value);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class=\"xv-accordion\" data-id={this.xvId}>\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n border-top: 1px solid var(--border-subtle-01);\r\n display: flex;\r\n flex-direction: column;\r\n font-family: var(--ff-body, inherit);\r\n}\r\n\r\n:host(.disabled) {\r\n .label {\r\n color: var(--text-disabled);\r\n &:hover {\r\n cursor: initial;\r\n background-color: transparent;\r\n }\r\n }\r\n}\r\n\r\n.label {\r\n padding: 14px 16px;\r\n display: inline-flex;\r\n align-items: center;\r\n column-gap: 20px;\r\n justify-content: space-between;\r\n text-align: left;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n letter-spacing: 0.16px;\r\n background-color: transparent;\r\n transition: background-color 200ms ease-in-out;\r\n &>span {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 1;\r\n -webkit-box-orient: vertical;\r\n }\r\n\r\n &:hover {\r\n cursor: pointer;\r\n background-color: var(--layer-hover-01);\r\n }\r\n\r\n &:after {\r\n content: '';\r\n border: solid black;\r\n border-width: 0 2px 2px 0;\r\n display: inline-block;\r\n padding: 4.66px;\r\n transition: transform 100ms ease-in-out;\r\n transform: rotate(45deg);\r\n }\r\n\r\n &.opened:after {\r\n transform: rotate(-135deg);\r\n }\r\n}\r\n\r\n.content {\r\n padding: 0 16px;\r\n text-align: left;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n overflow: hidden;\r\n max-height: 0;\r\n transition: max-height 300ms ease-in-out, padding 250ms ease 50ms;\r\n &.opened {\r\n padding: 14px 16px;\r\n max-height: 500px;\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop, State, Listen, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-accordion-item',\r\n styleUrl: 'xv-accordion-item.scss',\r\n shadow: true,\r\n})\r\nexport class XvAccordionItem {\r\n @Element() el: HTMLElement;\r\n @Prop() disabled: boolean = false;\r\n @Prop() label: string;\r\n @Prop() value: string;\r\n @State() isOpen: boolean = false;\r\n @Event() itemToggle: EventEmitter;\r\n\r\n @Listen('accordionChange', { target: 'body' })\r\n handleAccordionChange(event: CustomEvent<{ opened: Set<string>, id: string }>) {\r\n const parentAccordionId = this.el.closest('[data-id]')?.getAttribute('data-id');\r\n if (event.detail.id !== parentAccordionId) return;\r\n this.isOpen = event.detail.opened.has(this.value);\r\n }\r\n\r\n toggle() {\r\n if (this.disabled) return;\r\n this.isOpen = !this.isOpen;\r\n this.el.closest('xv-accordion')?.toggleItem?.(this.value);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class={`${this.disabled ? 'disabled' : ''}`}>\r\n <label class={`label ${this.isOpen ? 'opened' : 'closed'}`} onClick={this.toggle.bind(this)}>\r\n <span>{this.label}</span>\r\n </label>\r\n <div class={`content ${this.isOpen ? 'opened' : 'closed'}`}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n --focus-border-width: 2px;\r\n --focus-border-style: solid;\r\n --button-ghost: tarnsparent;\r\n --text-disabled-opacity: 0.25;\r\n --button-border-radius: 3px;\r\n --button-border-width: 1px;\r\n --button-border-style: solid;\r\n --button-border-color-accent: #97BF0D;\r\n --button-border-color-primary: #273435;\r\n --button-border-color-secondary: #D1D1D1;\r\n --button-border-color-ghost: tarnsparent;\r\n --button-ghost-hover: tarnsparent;\r\n --button-ghost-active: rgba(139, 139, 139, 0.5);\r\n --button-accent-disabled: #D1D1D1;\r\n --button-primary-disabled: #D1D1D1;\r\n --button-secondary-disabled: #D1D1D1;\r\n --button-tertiary-disabled: tarnsparent;\r\n --button-ghost-disabled: tarnsparent;\r\n\r\n button {\r\n font-family: inherit;\r\n font-size: 16px;\r\n font-weight: 700;\r\n padding: 0 20px;\r\n height: 40px;\r\n line-height: 40px;\r\n cursor: pointer;\r\n box-sizing: border-box;\r\n transition:\r\n background-color 0.2s ease-in-out,\r\n filter 0.2s ease-in-out,\r\n transform 0.1s ease-in-out,\r\n border-color 0.2s ease-in-out,\r\n border-width 0.2s ease-in-out,\r\n box-shadow 0.2s ease-in-out;\r\n }\r\n}\r\n\r\n.xv-button {\r\n /* ✅ Accent Button */\r\n &.accent {\r\n background-color: var(--button-accent);\r\n color: var(--text-on-color);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-accent);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-accent-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-accent-active);\r\n color: var(--text-on-color);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-accent-disabled);\r\n color: var(--text-on-color-disabled);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-accent-disabled);\r\n }\r\n\r\n }\r\n\r\n /* ✅ Primary Button */\r\n &.primary {\r\n background-color: var(--button-primary);\r\n color: var(--text-on-color);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-primary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-primary-hover)\r\n }\r\n &:active {\r\n background-color: var(--button-primary-active)\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-primary-disabled);\r\n color: var(--text-on-color-disabled);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-primary-disabled);\r\n }\r\n }\r\n\r\n /* ✅ Secondary Button */\r\n &.secondary {\r\n background-color: var(--button-secondary);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-secondary-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-secondary-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-secondary-disabled);\r\n color: var(--text-on-color-disabled);\r\n }\r\n }\r\n\r\n /* ✅ Tertiary Button */\r\n &.tertiary {\r\n background-color: var(--button-ghost);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-tertiary);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-tertiary-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-tertiary-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-tertiary-disabled);\r\n color: var(--text-disabled);\r\n opacity: var(--text-disabled-opacity);\r\n }\r\n }\r\n\r\n /* ✅ Ghost Button */\r\n &.ghost {\r\n background-color: var(--button-ghost);\r\n color: var(--text-primary);\r\n border: var(--button-border-width) var(--button-border-style) var(--button-border-color-ghost);\r\n border-radius: var(--button-border-radius);\r\n &:hover {\r\n background-color: var(--button-ghost-hover);\r\n }\r\n &:active {\r\n background-color: var(--button-ghost-active);\r\n }\r\n &:focus {\r\n outline: none;\r\n border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n transition: border-color 0.2s ease-in-out;\r\n }\r\n &:disabled {\r\n background-color: var(--button-ghost-disabled);\r\n color: var(--text-disabled);\r\n opacity: var(--text-disabled-opacity);\r\n }\r\n }\r\n}\r\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\r\n\r\n\r\n@Component({\r\n tag: 'xv-button-v2',\r\n styleUrl: 'xv-button-v2.scss',\r\n shadow: true,\r\n})\r\nexport class XvButton {\r\n /** Button label */\r\n @Prop() label: string = '';\r\n\r\n /** Variant */\r\n @Prop() variant: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost' = 'primary';\r\n\r\n /** Disabled state */\r\n @Prop() disabled: boolean = false;\r\n\r\n /** Emits when the button is clicked */\r\n @Event() buttonClick!: EventEmitter<void>;\r\n\r\n /** Handle click only if not disabled */\r\n private handleClick = () => {\r\n if (this.disabled) {\r\n return;\r\n }\r\n this.buttonClick.emit();\r\n };\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n class={`xv-button ${this.variant}`}\r\n disabled={this.disabled}\r\n onClick={this.handleClick}\r\n >\r\n <slot name=\"icon-left\"></slot>\r\n\r\n <slot>\r\n {this.label}\r\n </slot>\r\n\r\n <slot name=\"icon-right\"></slot>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n border: 1px solid var(--border-subtle-00);\r\n background: var(--layer-layer-02);\r\n box-shadow: 0 1px 3px 1px rgba(39, 52, 53, 0.15), 0 1px 2px 0 rgba(39, 52, 53, 0.30);\r\n font-family: var(--ff-body, inherit);\r\n overflow: visible !important;\r\n}\r\n\r\n:host(.xv-card_vertical) {\r\n //max-width: 298px;\r\n // TODO: wright down correct styling for card size\r\n width: 100%!important;\r\n}\r\n\r\n:host(.xv-card_horizontal) {\r\n flex-direction: row;\r\n display: flex;\r\n width: max-content;\r\n\r\n .xv-card_media {\r\n &__content, ::slotted([slot=\"media\"]) {\r\n min-height: 100%;\r\n max-height: 100%;\r\n max-width: 160px;\r\n min-width: 160px;\r\n }\r\n }\r\n}\r\n\r\n.xv-card {\r\n &_content {\r\n padding: 16px;\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n text-align: left;\r\n }\r\n\r\n &_media {\r\n &__content, ::slotted([slot=\"media\"]) {\r\n max-width: 100%;\r\n min-width: 100%;\r\n min-height: 199px;\r\n max-height: 199px;\r\n object-fit: cover;\r\n object-position: center;\r\n }\r\n }\r\n\r\n &_header {\r\n &__content, ::slotted([slot=\"header\"]) {\r\n margin: 0 0 8px;\r\n color: var(--text-primary);\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n line-height: 24px;\r\n letter-spacing: -0.6px;\r\n }\r\n }\r\n\r\n &_body {\r\n flex: 1;\r\n &__content, ::slotted([slot=\"body\"]) {\r\n margin: 0 0 8px;\r\n color: var(--text-secondary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n letter-spacing: -0.1px;\r\n }\r\n }\r\n\r\n &_footer {}\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-card',\r\n styleUrl: 'xv-card.scss',\r\n shadow: true,\r\n})\r\nexport class XvCard {\r\n @Prop() variant: 'horizontal' | 'vertical' = 'vertical';\r\n @Prop() media: string;\r\n @Prop() header: string;\r\n @Prop() body: string;\r\n @Prop() footer: string;\r\n render() {\r\n return (\r\n <Host class={`xv-card xv-card_${this.variant}`} part={this.variant}>\r\n <div class=\"xv-card_media\">\r\n <slot name=\"media\">\r\n {this.media && <img class=\"xv-card_media__content\" src={this.media} alt={this.header} />}\r\n </slot>\r\n </div>\r\n\r\n <div class=\"xv-card_content\">\r\n <div class=\"xv-card_header\">\r\n <slot name=\"header\">\r\n {this.header && <p class=\"xv-card_header__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_body\">\r\n <slot name=\"body\">\r\n {this.body && <p class=\"xv-card_body__content\">{this.header}</p>}\r\n </slot>\r\n </div>\r\n <div class=\"xv-card_footer\">\r\n <slot name=\"footer\">{this.footer}</slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'xv-checkbox-v2',\n shadow: true, // ✅ Shadow DOM aktiviert\n})\nexport class XvCheckbox {\n @Element() el!: HTMLElement;\n\n private applyGlobalStyles() {\n const globalStyle = document.getElementById(\"brand-style\") as HTMLLinkElement;\n if (globalStyle) {\n const styleClone = document.createElement(\"style\");\n styleClone.innerHTML = `@import url('${globalStyle.href}');`;\n this.el.shadowRoot?.appendChild(styleClone);\n }\n }\n\n componentWillLoad() {\n this.applyGlobalStyles();\n }\n\n render() {\n return (\n <label class=\"checkbox-container\">\n <input type=\"checkbox\" />\n <span class=\"checkmark\"></span>\n <slot></slot>\n </label>\n );\n }\n}\n",":host {\r\n font-family: var(--ff-body, inherit);\r\n}\r\n\r\n:host(.xv-link_inline) {\r\n display: inline-block;\r\n .xv-link {\r\n text-decoration-line: underline;\r\n text-decoration-style: solid;\r\n text-decoration-skip-ink: none;\r\n text-decoration-thickness: auto;\r\n text-underline-offset: auto;\r\n text-underline-position: from-font;\r\n }\r\n}\r\n\r\n:host(.xv-link_standalone) {\r\n display: block;\r\n .xv-link {\r\n text-decoration-line: none;\r\n }\r\n}\r\n\r\n.xv-link {\r\n display: inline-flex;\r\n gap: 8px;\r\n align-items: center;\r\n color: var(--link-primary);\r\n font-family: var(--ff-body);\r\n font-style: normal;\r\n font-weight: 400;\r\n transition: color 200ms ease-in-out;\r\n\r\n &:active {\r\n color: var(--text-primary);\r\n }\r\n\r\n &:visited {\r\n color: var(--link-visted);\r\n }\r\n\r\n &:hover {\r\n color: var(--link-primary-hover);\r\n cursor: pointer;\r\n }\r\n\r\n &:disabled, &_disabled, &::part(disabled) {\r\n color: var(--text-disabled);\r\n pointer-events: none;\r\n cursor: initial;\r\n }\r\n\r\n &.sm {\r\n font-size: var(--fz-sm);\r\n line-height: 137.5%;\r\n }\r\n\r\n &.md {\r\n font-size: var(--fz-md);\r\n line-height: 128.571%;\r\n }\r\n\r\n &.lg {\r\n font-size: var(--fz-lg);\r\n line-height: 133.333%;\r\n }\r\n}\r\n","import { Component, h, Host, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-link',\r\n styleUrl: 'xv-link.scss',\r\n shadow: true,\r\n})\r\nexport class XvLink {\r\n @Prop() href: string;\r\n @Prop() target: '_self' | '_blank' | '_parent' | '_top';\r\n @Prop() disabled: boolean = false;\r\n @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n @Prop() variant: 'standalone' | 'inline' = 'inline';\r\n\r\n preventLinkHandler(e: PointerEvent) {\r\n if (!this.disabled) return;\r\n\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class={`xv-link_${this.variant}`}>\r\n <a\r\n href={this.href}\r\n onClick={this.preventLinkHandler.bind(this)}\r\n class={`xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`}\r\n target={this.target}\r\n >\r\n <slot name=\"icon-left\"></slot>\r\n\r\n <slot></slot>\r\n\r\n <slot name=\"icon-right\"></slot>\r\n </a>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n font-family: var(--ff-body, inherit);\r\n}\r\n","import { Component, Host, h, Prop, Watch, Element } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-progress-indicator',\r\n styleUrl: 'xv-progress-indicator.scss',\r\n shadow: true,\r\n})\r\nexport class XvProgressIndicator {\r\n @Element() el: HTMLElement;\r\n @Prop() progress: number = 0;\r\n\r\n // Update 'xv-progress-indicator-item' done status\r\n @Watch('progress')\r\n updateChildItems() {\r\n const items = this.el.children;\r\n const itemsCount = this.el.childElementCount;\r\n const progressPerItem = 100 / itemsCount;\r\n\r\n if (!items.length || !itemsCount) return;\r\n\r\n Array.from(items).forEach((item, index) => {\r\n const itemProgress = (index + 1) * progressPerItem;\r\n const done = this.progress >= itemProgress;\r\n (item as HTMLElement).setAttribute('done', done ? 'true' : 'false');\r\n });\r\n }\r\n\r\n // Load initial done status\r\n componentDidLoad() {\r\n this.updateChildItems()\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class=\"xv-progress-indicator\">\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host(.xv-progress-indicator-item) {\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n padding: 10px 16px;\r\n &:before {\r\n width: 100%;\r\n }\r\n\r\n &:before, .line {\r\n content: '';\r\n z-index: 1;\r\n display: inline-block;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n color: inherit;\r\n background-color: var(--border-subtle-01, grey);\r\n }\r\n\r\n .line {\r\n width: 0;\r\n color: inherit;\r\n transition: width 250ms ease;\r\n background-color: var(--background-brand, currentColor);\r\n }\r\n\r\n .icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 22px;\r\n height: 22px;\r\n max-width: 22px;\r\n max-height: 22px;\r\n border: 2px dashed var(--border-subtle-01, currentColor);\r\n border-radius: 50%;\r\n svg {\r\n opacity: 0;\r\n transition: opacity 500ms ease-in-out;\r\n }\r\n }\r\n\r\n .label {\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 18px;\r\n letter-spacing: 0.16px;\r\n }\r\n}\r\n\r\n:host(.done) {\r\n .icon {\r\n border-color: var(--background-brand, currentColor);\r\n color: var(--background-brand, inherit);\r\n border-style: solid;\r\n svg {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .line {\r\n width: 100% !important;\r\n background-color: var(--background-brand, currentColor);\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-progress-indicator-item',\r\n styleUrl: 'xv-progress-indicator-item.scss',\r\n shadow: true,\r\n})\r\nexport class XvProgressIndicatorItem {\r\n @Element() el: HTMLElement;\r\n @Prop({ reflect: false }) done: boolean = false;\r\n\r\n render() {\r\n return (\r\n <Host class={`xv-progress-indicator-item ${this.done ? 'done' : ''}`}>\r\n <span class=\"line\"/>\r\n <span class=\"icon\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 448 512\"\r\n width={14}\r\n height={14}\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"\r\n />\r\n </svg>\r\n </span>\r\n <p class=\"label\"><slot/></p>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n border-radius: 1000px;\r\n background-color: var(--background);\r\n color: var(--text-primary);\r\n font-family: var(--ff-body, inherit);\r\n\r\n .xv-tag_content {\r\n padding-left: 8px;\r\n padding-right: 8px;\r\n color: inherit;\r\n font-family: var(--ff-body);\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px;\r\n letter-spacing: 0.32px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .xv-tag_close {\r\n box-sizing: border-box;\r\n text-decoration: none;\r\n border: none;\r\n background-color: inherit;\r\n outline: none;\r\n border-spacing: 0;\r\n list-style: none outside none;\r\n margin: 0;\r\n padding: 0;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 62px;\r\n width: 15px;\r\n height: 15px;\r\n text-align: left;\r\n color: inherit;\r\n text-indent: 0;\r\n transition: opacity 300ms ease-in-out, filter 300ms ease-in-out;\r\n &:hover {\r\n cursor: pointer;\r\n filter: brightness(80%);\r\n }\r\n\r\n &:active {\r\n opacity: 0.7;\r\n }\r\n\r\n &:focus {\r\n outline: 1px solid currentColor;\r\n }\r\n\r\n &:after {\r\n overflow: hidden;\r\n width: inherit;\r\n height: inherit;\r\n color: inherit;\r\n font-size: 16px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n content: \"\\00d7\";\r\n }\r\n }\r\n}\r\n\r\n:host(.sm) {\r\n font-size: var(--fz-sm);\r\n}\r\n\r\n:host(.md) {\r\n font-size: var(--fz-md);\r\n .xv-tag_content {\r\n line-height: 24px;\r\n }\r\n\r\n .xv-tag_close {\r\n height: 24px;\r\n width: 24px;\r\n }\r\n}\r\n\r\n:host(.lg) {\r\n font-size: var(--fz-lg);\r\n .xv-tag_content {\r\n line-height: 26px;\r\n }\r\n\r\n .xv-tag_close {\r\n height: 26px;\r\n width: 26px;\r\n }\r\n}\r\n\r\n:host(.disabled) {\r\n pointer-events: none;\r\n background-color: var(--layer-01);\r\n color: var(--text-disabled);\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-tag',\r\n styleUrl: 'xv-tag.scss',\r\n shadow: true,\r\n})\r\nexport class XvTag {\r\n @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n @Prop() color: string = '';\r\n @Prop() bg: string = '';\r\n @Prop() disabled: boolean = false;\r\n @Prop() closeable: boolean = false;\r\n @Event() closeClick: EventEmitter<PointerEvent>;\r\n\r\n closeHandler(e: PointerEvent) {\r\n if (this.disabled) return;\r\n\r\n this.closeClick.emit(e);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n style={{ color: this.color, background: this.bg }}\r\n class={`xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}`}\r\n >\r\n <div class=\"xv-tag_content\">\r\n <slot></slot>\r\n </div>\r\n {this.closeable && (\r\n <button onClick={this.closeHandler.bind(this)} class=\"xv-tag_close\"></button>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n position: relative;\r\n display: inline-block;\r\n cursor: pointer;\r\n}\r\n\r\n/* General styles for tooltip */\r\n:host::before,\r\n:host::after {\r\n position: absolute;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\r\n z-index: 10;\r\n}\r\n\r\n/* Tooltip */\r\n:host::before {\r\n content: attr(tooltip);\r\n background: var(--background-inverse, #333);\r\n color: var(--icon-inverse, #fff);\r\n padding: var(--gap-sm, 5px) var(--gap-md, 16px);\r\n border-radius: 2px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-width: max(70vw);\r\n font-family: var(--fz-body, Tahoma);\r\n font-size: var(fz-md, 14px);\r\n font-weight: 400;\r\n line-height: 18px;\r\n letter-spacing: 0.16px;\r\n}\r\n\r\n/* Arrow */\r\n:host::after {\r\n content: \"\";\r\n border: 6px solid transparent;\r\n}\r\n\r\n/* Show Tooltip and arrow */\r\n:host(:hover)::before,\r\n:host(:hover)::after,\r\n:host(:focus)::before,\r\n:host(:focus)::after {\r\n opacity: 1;\r\n visibility: visible;\r\n}\r\n\r\n/* Tooltip positions */\r\n:host(.xv-tooltip_top)::before {\r\n bottom: 100%;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top)::after {\r\n bottom: 100%;\r\n left: 50%;\r\n border-top-color: var(--background-inverse, #333);\r\n transform: translateX(-50%) translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_top-left)::before {\r\n bottom: 100%;\r\n left: 0;\r\n transform: translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top-left)::after {\r\n bottom: 100%;\r\n left: 10px;\r\n border-top-color: black;\r\n transform: translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_top-right)::before {\r\n bottom: 100%;\r\n right: 0;\r\n transform: translateY(-5px);\r\n}\r\n:host(.xv-tooltip_top-right)::after {\r\n bottom: 100%;\r\n right: 10px;\r\n border-top-color: var(--background-inverse, #333);\r\n transform: translateY(5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom)::before {\r\n top: 100%;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom)::after {\r\n top: 100%;\r\n left: 50%;\r\n border-bottom-color: black;\r\n transform: translateX(-50%) translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom-left)::before {\r\n top: 100%;\r\n left: 0;\r\n transform: translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom-left)::after {\r\n top: 100%;\r\n left: 10px;\r\n border-bottom-color: var(--background-inverse, #333);\r\n transform: translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_bottom-right)::before {\r\n top: 100%;\r\n right: 0;\r\n transform: translateY(5px);\r\n}\r\n:host(.xv-tooltip_bottom-right)::after {\r\n top: 100%;\r\n right: 10px;\r\n border-bottom-color: var(--background-inverse, #333);\r\n transform: translateY(-5px);\r\n}\r\n\r\n:host(.xv-tooltip_left)::before {\r\n right: 100%;\r\n top: 50%;\r\n transform: translateY(-50%) translateX(-5px);\r\n}\r\n:host(.xv-tooltip_left)::after {\r\n right: 100%;\r\n top: 50%;\r\n border-left-color: var(--background-inverse, #333);\r\n transform: translateY(-50%) translateX(5px);\r\n}\r\n\r\n:host(.xv-tooltip_right)::before {\r\n left: 100%;\r\n top: 50%;\r\n transform: translateY(-50%) translateX(5px);\r\n}\r\n:host(.xv-tooltip_right)::after {\r\n left: 100%;\r\n top: 50%;\r\n border-right-color: var(--background-inverse, #333);\r\n transform: translateY(-50%) translateX(-5px);\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'xv-tooltip',\r\n styleUrl: 'xv-tooltip.scss',\r\n shadow: true,\r\n})\r\nexport class XvTooltip {\r\n /** Message what will be shown for tooltip **/\r\n @Prop() message: string;\r\n /**\r\n * Tooltip and arrow position related to element\r\n * possible options: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'.\r\n * By default, \"top\"\r\n */\r\n @Prop() position: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right' = 'top';\r\n\r\n render() {\r\n return (\r\n <Host tooltip={this.message} class={`xv-tooltip_${this.position}`}>\r\n <slot>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width={16} height={16}>\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"\r\n />\r\n </svg>\r\n </slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}