npm - xv-webcomponents - Versions diffs - 0.1.9 → 0.1.11 - Mend

xv-webcomponents 0.1.9 → 0.1.11

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 (94) hide show

package/dist/xv-webcomponents/p-6f058b7f.entry.js.map ADDED Viewed

@@ -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":[]}

package/dist/xv-webcomponents/p-a0b74d3c.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ function n(n,r,t){return(n\|\|"")+(r?` ${r}`:"")+(t?` ${t}`:"")}function r(){return"10000000-1000-4000-8000-100000000000".replace(/[018]/g,(n=>(+n^crypto.getRandomValues(new Uint8Array(1))[0]&15>>+n/4).toString(16)))}export{n as f,r as u};
2	+ //# sourceMappingURL=p-a0b74d3c.js.map

package/dist/xv-webcomponents/p-a0b74d3c.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["format","first","middle","last","uidGenerator","replace","c","crypto","getRandomValues","Uint8Array","toString"],"sources":["src/utils/utils.ts"],"sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\r\n return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\r\n}\r\n\r\nexport function uidGenerator() {\r\n return \"10000000-1000-4000-8000-100000000000\".replace(/[018]/g, c =>\r\n (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)\r\n );\r\n}\r\n"],"mappings":"SAAgBA,EAAOC,EAAgBC,EAAiBC,GACtD,OAAQF,GAAS,KAAOC,EAAS,IAAIA,IAAW,KAAOC,EAAO,IAAIA,IAAS,GAC7E,C,SAEgBC,IACd,MAAO,uCAAuCC,QAAQ,UAAUC,KAC5DA,EAAIC,OAAOC,gBAAgB,IAAIC,WAAW,IAAI,GAAK,KAAOH,EAAI,GAAGI,SAAS,KAEhF,Q","ignoreList":[]}

package/dist/xv-webcomponents/xv-webcomponents.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as a,b as t}from"./p-b6c1c52d.js";export{s as setNonce}from"./p-b6c1c52d.js";import{g as r}from"./p-e1255160.js";var e=()=>{const t=import.meta.url;const r={};if(t!==""){r.resourcesUrl=new URL(".",t).href}return a(r)};e().then((async a=>{await r();return t([["p-186c04ea",[[1,"xv-button-v2",{label:[1],variant:[1],disabled:[4]}],[1,"xv-checkbox-v2"]]]],a)}));
+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)}));
 //# sourceMappingURL=xv-webcomponents.esm.js.map

package/dist/xv-webcomponents/xv-webcomponents.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","label","variant","~~disabled~~"],"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,~~MAAS~~,IAAAC,QAAA,IAAAC,SAAA,~~8BAAAL~~,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,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":[]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "xv-webcomponents",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Reusable Web Components for XV Applications",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -35,7 +35,9 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
+    "@stencil/angular-output-target": "^0.10.2",
     "@stencil/core": "^4.7.0",
+    "@stencil/sass": "^2.0.4",
     "@types/jest": "^29.5.6",
     "@types/node": "^16.18.11",
     "jest": "^29.7.0",