xv-webcomponents 0.1.43 → 0.1.46

package/dist/collection/components/xv-card/xv-card.css

@@ -0,0 +1,158 @@
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+
+:host {
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  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;
+}

package/dist/collection/components/xv-card/xv-card.js

@@ -0,0 +1,122 @@
+import { Host, h } from "@stencil/core";
+export class XvCard {
+    constructor() {
+        this.variant = 'vertical';
+    }
+    render() {
+        return (h(Host, { key: '7c19e1d91f9040c116dc18d6f58be859e66b0629', class: `xv-card xv-card_${this.variant}`, part: this.variant }, h("div", { key: '8ef942983bc31d278810372bfed3fe4cb8f1922a', class: "xv-card_media" }, h("slot", { key: '86bc68bcb80c563a91448c15ab1ebd89c1e5b245', name: "media" }, this.media && h("img", { key: 'c4351a7426b5b73ed37f038f1f355dcf46dae597', class: "xv-card_media__content", src: this.media, alt: this.header }))), h("div", { key: '906393c52bb7c27bfbc9527dfba34f712ec8a420', class: "xv-card_content" }, h("div", { key: 'd703353d99066a4f395f126f0ec8aa462c7a5c7b', class: "xv-card_header" }, h("slot", { key: '4fb9c65d701629dce6f99c8ad871adbd7659ecdd', name: "header" }, this.header && h("p", { key: 'e4a3f971b5dca8cdf3e44c9ba2a37baeff67fd59', class: "xv-card_header__content" }, this.header))), h("div", { key: '7029219d670fe9a94e5c50f657f5f2f2d45a2edb', class: "xv-card_body" }, h("slot", { key: '0f570bb3938b6c44e8cc3fb004ed1d7c487fb5a7', name: "body" }, this.body && h("p", { key: '02fc0abdc52c3a0bf833c0bfe24ec573f1457f21', class: "xv-card_body__content" }, this.header))), h("div", { key: '9734dca4512ace0e29e332acce27bf01c8a05e24', class: "xv-card_footer" }, h("slot", { key: '3cf0141845baf68e0149b823b921705978953ade', name: "footer" }, this.footer)))));
+    }
+    static get is() { return "xv-card-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
+            "media": {
+                "type": "string",
+                "attribute": "media",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "header": {
+                "type": "string",
+                "attribute": "header",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "body": {
+                "type": "string",
+                "attribute": "body",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "footer": {
+                "type": "string",
+                "attribute": "footer",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=xv-card.js.map

package/dist/collection/components/xv-card/xv-card.js.map

@@ -0,0 +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';\n\n@Component({\n  tag: 'xv-card-v2',\n  styleUrl: 'xv-card.scss',\n  shadow: true,\n})\nexport class XvCard {\n  @Prop() variant: 'horizontal' | 'vertical' = 'vertical';\n  @Prop() media: string;\n  @Prop() header: string;\n  @Prop() body: string;\n  @Prop() footer: string;\n  render() {\n    return (\n      <Host class={`xv-card xv-card_${this.variant}`} part={this.variant}>\n        <div class=\"xv-card_media\">\n          <slot name=\"media\">\n            {this.media && <img class=\"xv-card_media__content\" src={this.media} alt={this.header} />}\n          </slot>\n        </div>\n\n        <div class=\"xv-card_content\">\n          <div class=\"xv-card_header\">\n            <slot name=\"header\">\n              {this.header && <p class=\"xv-card_header__content\">{this.header}</p>}\n            </slot>\n          </div>\n          <div class=\"xv-card_body\">\n            <slot name=\"body\">\n              {this.body && <p class=\"xv-card_body__content\">{this.header}</p>}\n            </slot>\n          </div>\n          <div class=\"xv-card_footer\">\n            <slot name=\"footer\">{this.footer}</slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-checkbox/xv-checkbox.css

@@ -0,0 +1,233 @@
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+
+:host {
+  --checkbox-size: max(1rem, 16px);
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  overflow: visible !important;
+}
+
+:host([error]) .xv-checkbox .checkmark {
+  border-color: var(--text-error, #D62512);
+}
+
+.error,
+[name=info] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: var(--fz-sm, 12px);
+  font-family: var(--ff-body, Tahoma);
+  line-height: 133.333%;
+  letter-spacing: 0.32px;
+}
+
+.error {
+  margin-top: var(--gap-xs, 5px);
+  color: var(--text-error, #D62512);
+}
+.error::before {
+  margin-right: var(--gap-xs, 5px);
+  content: "!";
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: var(--fz-sm, 12px);
+  font-weight: bold;
+  color: white;
+  background-color: var(--text-error, #D62512);
+  border-radius: 50%;
+}
+
+.xv-checkbox {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+.xv-checkbox input[type=checkbox] {
+  position: absolute;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+.xv-checkbox .checkmark {
+  width: var(--checkbox-size);
+  min-width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  min-height: var(--checkbox-size);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 1.4px solid var(--icon-primary, #D1D1D1);
+  border-radius: 2px;
+  background-color: var(--background, #FFF);
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.xv-checkbox input:checked + .checkmark {
+  background-color: var(--background-brand, #97BF0D);
+  border-color: var(--background-brand, #97BF0D);
+}
+.xv-checkbox input:checked + .checkmark:not(.checkmark-partial)::after {
+  content: "";
+  position: absolute;
+  width: calc(var(--checkbox-size) / 4);
+  height: calc(var(--checkbox-size) / 2.5);
+  border: solid var(--background, #FFF);
+  margin-bottom: calc(var(--checkbox-size) / 10);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  display: block;
+}
+.xv-checkbox input:checked + .checkmark.checkmark-partial::after {
+  content: "";
+  position: absolute;
+  width: calc(var(--checkbox-size) / 3);
+  height: calc(var(--checkbox-size) / 10);
+  background-color: var(--background, #FFF);
+}
+.xv-checkbox input:focus + .checkmark {
+  outline: 1.4px solid var(--focus, #8B8B8B);
+}
+.xv-checkbox .label {
+  color: var(--text-primary, #333);
+  font-family: var(--ff-body, Tahoma);
+  font-size: var(--fz-md, 14px);
+  line-height: 128.571%;
+  letter-spacing: 0.16px;
+}
+.xv-checkbox .label_str,
+.xv-checkbox .label ::slotted(*) {
+  margin-left: 8px;
+}
+.xv-checkbox.readonly {
+  cursor: initial;
+}
+.xv-checkbox.readonly input:checked + .checkmark {
+  background-color: var(--background, #FFF);
+  border: 1.4px solid var(--icon-disabled, #D1D1D1);
+}
+.xv-checkbox.readonly input:checked + .checkmark:after {
+  border-color: var(--icon-primary, #131313);
+}
+.xv-checkbox.readonly input:checked + .checkmark-partial:after {
+  background-color: var(--icon-primary, #131313);
+}
+.xv-checkbox.readonly .checkmark {
+  border: 1.4px solid var(--icon-disabled, #D1D1D1);
+}
+.xv-checkbox.readonly .label {
+  color: var(--text-primary, #333);
+}
+.xv-checkbox.disabled {
+  cursor: not-allowed;
+}
+.xv-checkbox.disabled .checkmark {
+  border: 1.4px solid var(--icon-disabled, #D1D1D1);
+}
+.xv-checkbox.disabled .label {
+  color: var(--text-disabled, rgba(19, 19, 19, 0.25));
+}