@roadtrip/components 3.41.1 → 3.42.0

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

@@ -18,6 +18,7 @@
   background: var(--road-surface);
   border: 1px solid var(--road-outline-weak);
   border-radius: var(--road-spacing-02);
+  padding: var(--road-spacing-03);
 }
 
 :host(.card-elevation-none) {
@@ -32,6 +33,63 @@
   box-shadow: var(--road-elevation-average);
 }
 
+/*
+* Card as a button (interactivity in Figma)
+*/
+
+:host(.is-button) {
+  border: 1px solid var(--road-outline);
+}
+
+:host(.is-button:hover) {
+  border: 1px solid var(--road-outline-variant);
+  outline: 2px solid var(--road-button-ghost-variant);
+}
+
+:host(.is-button:focus-visible),
+:host(.is-button:focus) {
+  border: 1px solid var(--road-outline);
+  outline-offset: 1px;
+  outline: 2px solid var(--road-outline-variant);
+}
+
+:host(.is-button.is-disabled) {
+  cursor: not-allowed;
+  pointer-events: none;
+  border: 1px solid var(--road-surface-disabled);
+  background: var(--road-surface-disabled);
+}
+
+:host(.is-button.is-disabled) .card-native,
+:host(.is-button.selected.is-disabled) .card-native {
+  background: none;
+}
+
+:host(.is-button.selected) {
+  border: 2px solid var(--road-primary);
+  outline: none;
+}
+
+:host(.is-button.selected:hover) {
+  border: 2px solid var(--road-outline-variant);
+  outline: 2px solid var(--road-button-ghost-variant);
+}
+
+:host(.is-button.selected:focus-visible),
+:host(.is-button.selected:focus) {
+  border: 2px solid var(--road-outline-variant);
+  outline-offset: 1px;
+  outline: 2px solid var(--road-outline-variant);
+}
+
+:host(.is-button.selected.is-disabled) {
+  cursor: not-allowed;
+  pointer-events: none;
+  outline: none;
+  background: var(--road-surface-disabled);
+  border: 2px solid var(--road-surface-disabled);
+}
+
 /* NATIVE
  -------------------- */
 
@@ -61,17 +119,6 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-.card-native:focus{
-  border: 1px solid var(--road-primary);
-}
-
-/* @media (min-width: 768px) {
-
-  .card-native {
-    padding: var(--road-spacing-06);
-  }
-} */
-
 a,
 button {
   cursor: pointer;

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

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 /**
  * @slot  - Content of the card.
  *
@@ -7,45 +7,71 @@ import { h, Host } from "@stencil/core";
 export class Card {
     constructor() {
         /**
-       * The elevation.
-       */
-        this.elevation = 'none';
+         * The elevation.
+         */
+        this.elevation = "none";
         /**
          * If `true`, a button tag will be rendered and the card will be tappable.
          */
         this.button = false;
+        /**
+         * If `true`, the card has the `selected` state and the `selected` class is applied on the host.
+         * Toggled automatically when the card is clicked (when clickable).
+         */
+        this.selected = false;
+        /**
+         * If `true`, the card is disabled and cannot be clicked.
+         * Only applies when in button mode (button=true and no href).
+         */
+        this.disabled = false;
         /**
          * The type of the button. Only used when an `onclick` or `button` property is present.
          */
-        this.type = 'button';
-        this.onClick = () => {
+        this.type = "button";
+        this.onClick = (e) => {
             var _a, _b;
+            // If disabled in button mode, prevent all interactions
+            const isButtonMode = this.button && this.href === undefined;
+            if (isButtonMode && this.disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            // Toggle selected state on click for clickable cards
+            this.selected = !this.selected;
             if (this.value !== undefined) {
                 this.roadcardclick.emit({
                     value: this.value,
-                    label: (_a = this.el.querySelector('road-label')) === null || _a === void 0 ? void 0 : _a.textContent,
+                    label: (_a = this.el.querySelector("road-label")) === null || _a === void 0 ? void 0 : _a.textContent,
                 });
                 this.roadCardClick.emit({
                     value: this.value,
-                    label: (_b = this.el.querySelector('road-label')) === null || _b === void 0 ? void 0 : _b.textContent,
+                    label: (_b = this.el.querySelector("road-label")) === null || _b === void 0 ? void 0 : _b.textContent,
                 });
             }
         };
     }
     isClickable() {
-        return (this.href !== undefined || this.button);
+        return this.href !== undefined || this.button;
     }
     renderCard() {
         const clickable = this.isClickable();
         if (!clickable) {
-            return [
-                h("slot", null)
-            ];
+            return [h("slot", null)];
         }
         const { href } = this;
-        const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
-        const attrs = (TagType === 'button')
-            ? { type: this.type }
+        const TagType = clickable
+            ? href === undefined
+                ? "button"
+                : "a"
+            : "div";
+        const isButtonMode = this.button && href === undefined;
+        const attrs = TagType === "button"
+            ? {
+                type: this.type,
+                disabled: isButtonMode && this.disabled,
+                "aria-disabled": isButtonMode && this.disabled ? "true" : undefined,
+            }
             : {
                 download: this.download,
                 href: this.href,
@@ -56,8 +82,12 @@ export class Card {
     }
     render() {
         const { elevation } = this;
+        const isButtonMode = this.button && this.href === undefined;
         const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;
-        return (h(Host, { key: 'f5bd5b9245b805dbd174a96b76b349af87e4e938', class: `${elevationClass}` }, this.renderCard()));
+        const selectedClass = this.selected ? "selected" : "";
+        const isButtonClass = isButtonMode ? "is-button" : "";
+        const disabledClass = isButtonMode && this.disabled ? "is-disabled" : "";
+        return (h(Host, { key: '5ef381ca3d9d8028cc1e3a10cc06511602964437', class: `${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass}` }, this.renderCard()));
     }
     static get is() { return "road-card"; }
     static get encapsulation() { return "shadow"; }
@@ -77,7 +107,7 @@ export class Card {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'none' | 'lowest' | 'average'",
+                    "original": "\"none\" | \"lowest\" | \"average\"",
                     "resolved": "\"average\" | \"lowest\" | \"none\" | undefined",
                     "references": {}
                 },
@@ -91,7 +121,7 @@ export class Card {
                 "setter": false,
                 "attribute": "elevation",
                 "reflect": false,
-                "defaultValue": "'none'"
+                "defaultValue": "\"none\""
             },
             "button": {
                 "type": "boolean",
@@ -132,11 +162,51 @@ export class Card {
                 "attribute": "value",
                 "reflect": false
             },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the card has the `selected` state and the `selected` class is applied on the host.\nToggled automatically when the card is clicked (when clickable)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selected",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the card is disabled and cannot be clicked.\nOnly applies when in button mode (button=true and no href)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'submit' | 'reset' | 'button'",
+                    "original": "\"submit\" | \"reset\" | \"button\"",
                     "resolved": "\"button\" | \"reset\" | \"submit\"",
                     "references": {}
                 },
@@ -150,7 +220,7 @@ export class Card {
                 "setter": false,
                 "attribute": "type",
                 "reflect": false,
-                "defaultValue": "'button'"
+                "defaultValue": "\"button\""
             },
             "download": {
                 "type": "string",

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEvF;;;;GAIG;AAOH,MAAM,OAAO,IAAI;IALjB;QASI;;SAEC;QACO,cAAS,GAAmC,MAAM,CAAC;QAE7D;;WAEG;QACK,WAAM,GAAY,KAAK,CAAC;QAOhC;;WAEG;QACK,SAAI,GAAkC,QAAQ,CAAC;QA8C/C,YAAO,GAAG,GAAG,EAAE;;YACrB,IAAG,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;gBAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;oBACtB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;iBACxD,CAAC,CAAC;gBACH,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;oBACtB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;iBACxD,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;KA+CH;IA9DS,WAAW;QACjB,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;IAClD,CAAC;IAeO,UAAU;QAChB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAErC,IAAI,CAAC,SAAS,EAAE,CAAC;YAGf,OAAO;gBACL,eAAO;aACR,CAAC;QAEJ,CAAC;QACD,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACtB,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAY,CAAC;QACjF,MAAM,KAAK,GAAG,CAAC,OAAO,KAAK,QAAQ,CAAC;YAClC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;YACrB,CAAC,CAAC;gBACA,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB,CAAC;QAEJ,OAAO,CAEL,EAAC,OAAO,oBACF,KAAK,IACT,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO;YAErB,eAAO,CACC,CACX,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3B,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3E,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,GAAG,cAAc,EAAE,IAC/B,IAAI,CAAC,UAAU,EAAE,CACX,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Element, Host } from '@stencil/core';\n\n/**\n * @slot  - Content of the card.\n *\n * @part native - The native HTML button, anchor, or div element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-card',\n  styleUrl: 'card.css',\n  shadow: true,\n})\nexport class Card {\n\n  @Element() el!: HTMLRoadCardElement;\n\n    /**\n   * The elevation.\n   */\n    @Prop() elevation?: 'none' | 'lowest' | 'average' = 'none';\n\n  /**\n   * If `true`, a button tag will be rendered and the card will be tappable.\n   */\n  @Prop() button: boolean = false;\n\n  /**\n   * value of the card\n   */\n  @Prop() value?: string;\n\n  /**\n   * The type of the button. Only used when an `onclick` or `button` property is present.\n   */\n  @Prop() type: 'submit' | 'reset' | 'button' = 'button';\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download?: string;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href?: string;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target?: string;\n\n  /**\n   * Emitted when the card is clicked and send the `value` of the card\n   */\n  @Event() roadcardclick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadCardClick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n\n  private isClickable(): boolean {\n    return (this.href !== undefined || this.button);\n  }\n\n  private onClick = () => {\n    if(this.value !== undefined) {\n      this.roadcardclick.emit({\n        value: this.value,\n        label: this.el.querySelector('road-label')?.textContent,\n      });\n      this.roadCardClick.emit({\n        value: this.value,\n        label: this.el.querySelector('road-label')?.textContent,\n      });\n    }\n  };\n\n  private renderCard() {\n    const clickable = this.isClickable();\n\n    if (!clickable) {\n     \n      \n      return [\n        <slot/>\n      ];\n      \n    }\n    const { href } = this;\n    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;\n    const attrs = (TagType === 'button')\n      ? { type: this.type }\n      : {\n        download: this.download,\n        href: this.href,\n        rel: this.rel,\n        target: this.target,\n      };\n\n    return (\n      \n      <TagType\n        {...attrs}\n        class=\"card-native\"\n        part=\"native\"\n        onClick={this.onClick}\n      >\n        <slot/>\n      </TagType>\n    );\n  }\n\n  render() {\n    const { elevation } = this;\n    const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n    return (\n      <Host class={`${elevationClass}`}>\n      {this.renderCard()}\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Host,\n} from \"@stencil/core\";\n\n/**\n * @slot  - Content of the card.\n *\n * @part native - The native HTML button, anchor, or div element that wraps all child elements.\n */\n\n@Component({\n  tag: \"road-card\",\n  styleUrl: \"card.css\",\n  shadow: true,\n})\nexport class Card {\n  @Element() el!: HTMLRoadCardElement;\n\n  /**\n   * The elevation.\n   */\n  @Prop() elevation?: \"none\" | \"lowest\" | \"average\" = \"none\";\n\n  /**\n   * If `true`, a button tag will be rendered and the card will be tappable.\n   */\n  @Prop() button: boolean = false;\n\n  /**\n   * value of the card\n   */\n  @Prop() value?: string;\n\n  /**\n   * If `true`, the card has the `selected` state and the `selected` class is applied on the host.\n   * Toggled automatically when the card is clicked (when clickable).\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * If `true`, the card is disabled and cannot be clicked.\n   * Only applies when in button mode (button=true and no href).\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The type of the button. Only used when an `onclick` or `button` property is present.\n   */\n  @Prop() type: \"submit\" | \"reset\" | \"button\" = \"button\";\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download?: string;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href?: string;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target?: string;\n\n  /**\n   * Emitted when the card is clicked and send the `value` of the card\n   */\n  @Event() roadcardclick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadCardClick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n\n  private isClickable(): boolean {\n    return this.href !== undefined || this.button;\n  }\n\n  private onClick = (e: Event) => {\n    // If disabled in button mode, prevent all interactions\n    const isButtonMode = this.button && this.href === undefined;\n    if (isButtonMode && this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    // Toggle selected state on click for clickable cards\n    this.selected = !this.selected;\n\n    if (this.value !== undefined) {\n      this.roadcardclick.emit({\n        value: this.value,\n        label: this.el.querySelector(\"road-label\")?.textContent,\n      });\n      this.roadCardClick.emit({\n        value: this.value,\n        label: this.el.querySelector(\"road-label\")?.textContent,\n      });\n    }\n  };\n\n  private renderCard() {\n    const clickable = this.isClickable();\n\n    if (!clickable) {\n      return [<slot />];\n    }\n    const { href } = this;\n    const TagType = clickable\n      ? href === undefined\n        ? \"button\"\n        : \"a\"\n      : (\"div\" as any);\n    const isButtonMode = this.button && href === undefined;\n    const attrs =\n      TagType === \"button\"\n        ? {\n            type: this.type,\n            disabled: isButtonMode && this.disabled,\n            \"aria-disabled\": isButtonMode && this.disabled ? \"true\" : undefined,\n          }\n        : {\n            download: this.download,\n            href: this.href,\n            rel: this.rel,\n            target: this.target,\n          };\n\n    return (\n      <TagType\n        {...attrs}\n        class=\"card-native\"\n        part=\"native\"\n        onClick={this.onClick}\n      >\n        <slot />\n      </TagType>\n    );\n  }\n\n  render() {\n    const { elevation } = this;\n    const isButtonMode = this.button && this.href === undefined;\n    const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n    const selectedClass = this.selected ? \"selected\" : \"\";\n    const isButtonClass = isButtonMode ? \"is-button\" : \"\";\n    const disabledClass = isButtonMode && this.disabled ? \"is-disabled\" : \"\";\n    return (\n      <Host\n        class={`${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass}`}\n      >\n        {this.renderCard()}\n      </Host>\n    );\n  }\n}\n"]}