@cupra/ui-kit 1.0.0-canary.9 → 1.0.0

package/dist-react/components/ds-logo/ds-logo.js

@@ -0,0 +1,69 @@
+import { UiKitElement as c } from "../base/UiKitElement.js";
+import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
+import { htmlWithTokens as h } from "../../utils/htmlWithTokens.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as g } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as u, containerStyles as y } from "./styles/common.styles.js";
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (n, o, s, r) => {
+  for (var t = r > 1 ? void 0 : r ? v(o, s) : o, m = n.length - 1, i; m >= 0; m--)
+    (i = n[m]) && (t = (r ? i(o, s, t) : i(t)) || t);
+  return r && t && f(o, s, t), t;
+};
+let e = class extends c {
+  constructor() {
+    super(...arguments), this.size = "xxsmall", this.mode = "light";
+  }
+  get logoTemplate() {
+    return this.componentFactory.createIcon({
+      class: "icon-logo",
+      "icon-name": "logo"
+    });
+  }
+  get logoWordmarkTemplate() {
+    return this.componentFactory.createIcon({
+      class: "icon-wordmark",
+      "icon-name": "logo-wordmark"
+    });
+  }
+  get classes() {
+    return {
+      container: !0,
+      [this.size]: !0,
+      [this.mode]: !!this.mode
+    };
+  }
+  get styleTokens() {
+    return h`
+                <style>
+                    :host {
+                        color-scheme: ${this.mode};
+                    }
+                </style>
+        `;
+  }
+  render() {
+    return g`
+            ${this.styleTokens}
+            <div data-testid="ds-logo-container" class=${d(this.classes)}>
+                ${this.logoTemplate}
+                ${this.logoWordmarkTemplate}
+            </div>
+        `;
+  }
+};
+e.styles = [u, y];
+l([
+  a({ type: String })
+], e.prototype, "size", 2);
+l([
+  a({ type: String, reflect: !0 })
+], e.prototype, "mode", 2);
+e = l([
+  p("ds-logo")
+], e);
+export {
+  e as DsLogo
+};

package/dist-react/components/ds-logo/styles/common.styles.js

@@ -0,0 +1,18 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const r = t`
+    :host {
+        display: contents;
+    }
+`, m = t`
+    .container {
+        display: grid;
+        grid-template-columns: auto auto;
+    }
+`;
+export {
+  r as commonStyles,
+  m as containerStyles
+};

package/dist-react/components/ds-main-title/ds-main-title.d.ts

@@ -0,0 +1,10 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+declare const DsMainTitle_base: (new (...args: any[]) => import("../../mixins/ViewportMixin").ViewportInterface) & typeof UiKitElement;
+export declare class DsMainTitle extends DsMainTitle_base {
+    static styles: import("lit").CSSResult[];
+    protected get containerClasses(): {
+        container: boolean;
+    };
+    render(): import("lit").TemplateResult<1>;
+}
+export {};

package/dist-react/components/ds-main-title/ds-main-title.js

@@ -0,0 +1,35 @@
+import { UiKitElement as l } from "../base/UiKitElement.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import { ViewportMixin as p } from "../../mixins/ViewportMixin.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { classMap as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as v } from "./styles/common.styles.js";
+var u = Object.getOwnPropertyDescriptor, d = (s, o, n, i) => {
+  for (var t = i > 1 ? void 0 : i ? u(o, n) : o, e = s.length - 1, m; e >= 0; e--)
+    (m = s[e]) && (t = m(t) || t);
+  return t;
+};
+let r = class extends p(l) {
+  get containerClasses() {
+    return {
+      container: !0
+    };
+  }
+  render() {
+    return c`
+            <div class=${f(this.containerClasses)}>
+                <slot name="title"></slot>
+                <slot name="description"></slot>
+            </div>
+        `;
+  }
+};
+r.styles = [v];
+r = d([
+  a("ds-main-title")
+], r);
+export {
+  r as DsMainTitle
+};

package/dist-react/components/ds-main-title/ds-main-title.test.d.ts

@@ -0,0 +1,7 @@
+import type { DsMainTitle } from './ds-main-title';
+import './ds-main-title.ts';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-main-title': DsMainTitle;
+    }
+}

package/dist-react/components/ds-main-title/ds-main-title.types.d.ts

@@ -0,0 +1,2 @@
+import type { CommonAttrs } from '../../types/types';
+export type DsMainTitleAttrs = CommonAttrs;

package/dist-react/components/ds-main-title/styles/common.styles.d.ts

@@ -0,0 +1 @@
+export declare const commonStyles: import("lit").CSSResult;

package/dist-react/components/ds-main-title/styles/common.styles.js

@@ -0,0 +1,19 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const l = o`
+    :host {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    ::slotted([slot='title']),
+    ::slotted([slot='description']) {
+        margin: 0;
+    }
+`;
+export {
+  l as commonStyles
+};

package/dist-react/components/ds-map-pin/ds-map-pin.js

@@ -0,0 +1,116 @@
+import { UiKitElement as u } from "../base/UiKitElement.js";
+import { customUiKitElement as m } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as d } from "../../utils/booleanConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as a, html as h } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { mapPinStyles as b } from "./styles/common.styles.js";
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, e = (l, o, c, s) => {
+  for (var i = s > 1 ? void 0 : s ? v(o, c) : o, n = l.length - 1, p; n >= 0; n--)
+    (p = l[n]) && (i = (s ? p(o, c, i) : p(i)) || i);
+  return s && i && f(o, c, i), i;
+};
+let t = class extends u {
+  constructor() {
+    super(...arguments), this.width = 48, this.height = 48, this.checked = !1, this.iconSize = 24, this.iconTop = 8;
+  }
+  get iconTemplate() {
+    return this.iconName ? this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": this.iconName,
+      size: this.iconSize
+    }) : a;
+  }
+  get clusterNumberTemplate() {
+    return this.clusterCount ? h`
+            <div class='cluster-count'>
+                    ${this.clusterCount}
+            </div>
+        ` : a;
+  }
+  handleClick() {
+    this.checked = !this.checked, this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          checked: this.checked
+        }
+      })
+    );
+  }
+  get styleTokens() {
+    return h`
+            <style>
+                :host{
+                    --ds-icon-color: var(--ds-map-pin-icon-color);
+                }
+
+                .icon {
+                    top: ${this.iconTop}px;
+                }
+            </style>
+        `;
+  }
+  get classes() {
+    return {
+      container: !0,
+      checked: this.checked,
+      cluster: !!this.clusterCount
+    };
+  }
+  render() {
+    return h`
+            ${this.styleTokens}
+            <span data-testid="ds-map-pin-container" class=${y(this.classes)} @click=${this.handleClick}>
+                <svg
+                    class="marker"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width=${this.width}
+                    height=${this.height}
+                    viewBox="0 0 48 49"
+                    fill="none"
+                >
+                    <path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M24.1599 48.6467C26.4109 38.2008 41.9998 30.5848 41.9998 18.5849C41.9998 8.74991 33.9409 0.777954 23.9999 0.777954C14.059 0.777954 6 8.74991 6 18.5849C6 31.2298 21.5719 37.9948 23.5469 48.6077C23.7759 48.8277 23.8869 48.8277 24.1599 48.6467Z"
+                        fill="#1B1B1B"
+                    />
+                </svg>
+                ${this.iconTemplate}
+                ${this.clusterNumberTemplate}
+            </span>
+        `;
+  }
+};
+t.styles = [b];
+e([
+  r({ type: Number, attribute: "width" })
+], t.prototype, "width", 2);
+e([
+  r({ type: Number, attribute: "height" })
+], t.prototype, "height", 2);
+e([
+  r({ type: Boolean, converter: d, reflect: !0 })
+], t.prototype, "checked", 2);
+e([
+  r({ type: String, attribute: "icon-name" })
+], t.prototype, "iconName", 2);
+e([
+  r({ type: Number, attribute: "icon-size" })
+], t.prototype, "iconSize", 2);
+e([
+  r({ type: Number, attribute: "icon-top" })
+], t.prototype, "iconTop", 2);
+e([
+  r({ type: Number, attribute: "cluster-count" })
+], t.prototype, "clusterCount", 2);
+t = e([
+  m("ds-map-pin")
+], t);
+export {
+  t as DsMapPin
+};

package/dist-react/components/ds-map-pin/styles/common.styles.js

@@ -0,0 +1,43 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const n = t`
+    :host {
+        display: inline-block;
+    }
+
+    .container {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+    }
+
+    .icon {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .cluster-count {
+        display: flex;
+        position: absolute;
+        border-radius: var(--dg-border-radius-full);
+        background: var(--dg-color-bg-base);
+        align-items: center;
+        justify-content: center;
+        top: -8px;
+        right: -6px;
+        width: 24px;
+        height: 24px;
+        font-size: var(--dg-font-size-body-s, 12px);
+        font-style: normal;
+        font-weight: 400;
+        line-height: var(--dg-font-height-body-s, 16px); /* 133.333% */
+        letter-spacing: var(--dg-font-letter-spacing-m, 0.5px);
+        color: var(--dg-color-text-strong);
+    }
+`;
+export {
+  n as mapPinStyles
+};

package/dist-react/components/ds-modal/ds-modal.js

@@ -0,0 +1,215 @@
+import { UiKitElement as m } from "../base/UiKitElement.js";
+import { customUiKitElement as b } from "../../decorators/customUiKitElement.js";
+import { ViewportMixin as f } from "../../mixins/ViewportMixin.js";
+import { booleanConverter as a } from "../../utils/booleanConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as l, html as h } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { fullScreenStyles as v, dialogStyles as y, fitStyles as g, commonStyles as B, alignStyles as C } from "./styles/common.styles.js";
+var S = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (e, s, c, r) => {
+  for (var i = r > 1 ? void 0 : r ? w(s, c) : s, u = e.length - 1, d; u >= 0; u--)
+    (d = e[u]) && (i = (r ? d(s, c, i) : d(i)) || i);
+  return r && i && S(s, c, i), i;
+};
+let t = class extends f(m) {
+  constructor() {
+    super(...arguments), this.withCloseButton = !0, this.variant = "fullScreen", this.zIndex = 2e3, this.disableScrollLock = !1, this.fullWidth = !1, this.vAlign = "default";
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.body.style.paddingRight = "0", document.body.style.overflow = "";
+  }
+  handleScroll() {
+    const e = this.open && !this.disableScrollLock, s = window.innerWidth > document.documentElement.clientWidth;
+    document.body.style.paddingRight = e && s ? `${window.innerWidth - document.documentElement.clientWidth}px` : "0", document.body.style.overflow = e ? "hidden" : "";
+  }
+  updated(e) {
+    super.updated(e), (e.has("open") || e.has("disableScrollLock")) && this.handleScroll();
+  }
+  get backdropClasses() {
+    return {
+      backdrop: !0,
+      animate: !0,
+      open: this.open,
+      close: !this.open
+    };
+  }
+  get backdropTemplate() {
+    return this.variant === "dialog" ? h`<div class=${p(this.backdropClasses)} />` : l;
+  }
+  get buttonSize() {
+    return ["xs", "s", "m"].includes(this.viewport) ? "medium" : "large";
+  }
+  get closeButtonSize() {
+    return this.variant === "dialog" || ["xs", "s"].includes(this.viewport) ? "small" : "medium";
+  }
+  get closeButtonTemplate() {
+    return this.withCloseButton ? this.componentFactory.createIconButton({
+      class: "close-button",
+      "data-aria-label": "close-button",
+      "@click": this.handleClickCloseButton,
+      size: this.closeButtonSize,
+      "icon-name": "cross",
+      mode: "light",
+      variant: "primary"
+    }) : l;
+  }
+  get iconTemplate() {
+    return this.iconName ? this.componentFactory.createIcon({
+      class: "icon",
+      "icon-name": this.iconName,
+      size: 64
+    }) : l;
+  }
+  get cancelButtonTemplate() {
+    return this.cancelButtonText ? this.componentFactory.createButton({
+      class: "cancel-button",
+      variant: "secondary",
+      size: this.buttonSize,
+      "@click": this.handleClickCancelButton,
+      children: this.cancelButtonText
+    }) : l;
+  }
+  get confirmButtonTemplate() {
+    return this.confirmButtonText ? this.componentFactory.createButton({
+      class: "confirm-button",
+      variant: "primary",
+      size: this.buttonSize,
+      "@click": this.handleClickConfirmButton,
+      children: this.confirmButtonText
+    }) : l;
+  }
+  get modalClasses() {
+    return {
+      container: !0,
+      animate: !0,
+      open: this.open,
+      close: !this.open,
+      dialog: this.variant === "dialog",
+      "full-screen": this.variant === "fullScreen" || this.variant === "fit",
+      fit: this.variant === "fit",
+      [`v-align-${this.vAlign}`]: !!this.vAlign
+    };
+  }
+  get contentClasses() {
+    return {
+      "content-container": !0,
+      "full-width": !!this.fullWidth
+    };
+  }
+  render() {
+    return h`
+            <style>
+                :host {
+                    ${!this.open && "display: none;"}
+                }
+                .container, .backdrop {
+                    z-index: ${this.zIndex};
+                }
+            </style>
+            ${this.backdropTemplate}
+            <div
+                role="dialog"
+                aria-labelledby="ds-modal-title"
+                class=${p(this.modalClasses)}
+                @transitionend=${this.handleTransitionEnd}
+            >
+                ${this.closeButtonTemplate}
+                ${this.iconTemplate}
+                <div class=${p(this.contentClasses)}>
+                    <slot id="ds-modal-title" name="title"></slot>
+                    <slot name="content"></slot>
+                    ${this.cancelButtonTemplate}
+                    ${this.confirmButtonTemplate}
+                </div>
+            </div>
+        `;
+  }
+  handleClickCancelButton() {
+    this.open = !1, this.dispatchEvent(
+      new CustomEvent("click-cancel-button", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleClickConfirmButton() {
+    this.dispatchEvent(
+      new CustomEvent("click-confirm-button", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleClickCloseButton() {
+    this.open = !1, this.dispatchEvent(
+      new CustomEvent("click-close-button", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleTransitionEnd(e) {
+    e.propertyName === "opacity" && (this.open ? this.dispatchEvent(
+      new CustomEvent("open-transition-end", {
+        bubbles: !0,
+        composed: !0
+      })
+    ) : this.dispatchEvent(
+      new CustomEvent("close-transition-end", {
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+};
+t.styles = [v, y, g, B, C];
+o([
+  n({ type: Boolean, reflect: !0, converter: a })
+], t.prototype, "open", 2);
+o([
+  n({
+    type: Boolean,
+    attribute: "with-close-button",
+    converter: a
+  })
+], t.prototype, "withCloseButton", 2);
+o([
+  n({ type: String, attribute: "cancel-button-text" })
+], t.prototype, "cancelButtonText", 2);
+o([
+  n({ type: String, attribute: "confirm-button-text" })
+], t.prototype, "confirmButtonText", 2);
+o([
+  n({ type: String })
+], t.prototype, "variant", 2);
+o([
+  n({ type: Number, attribute: "z-index" })
+], t.prototype, "zIndex", 2);
+o([
+  n({
+    type: Boolean,
+    converter: a,
+    attribute: "disable-scroll-lock"
+  })
+], t.prototype, "disableScrollLock", 2);
+o([
+  n({ type: String, attribute: "icon-name" })
+], t.prototype, "iconName", 2);
+o([
+  n({
+    type: Boolean,
+    converter: a,
+    attribute: "full-width"
+  })
+], t.prototype, "fullWidth", 2);
+o([
+  n({ type: String, attribute: "v-align" })
+], t.prototype, "vAlign", 2);
+t = o([
+  b("ds-modal")
+], t);
+export {
+  t as DsModal
+};