@roadtrip/components 3.48.0 → 3.49.0

package/dist/roadtrip/p-7dae0270.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as o,H as i,a as s}from"./p-d7aae05d.js";const r=":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);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){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}: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)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";const a=r;const n=class{constructor(o){t(this,o);this.roadcardclick=e(this,"roadcardclick",7);this.roadCardClick=e(this,"roadCardClick",7);this.elevation="none";this.button=false;this.selected=false;this.disabled=false;this.type="button";this.onClick=t=>{var e,o;const i=this.button&&this.href===undefined;if(i&&this.disabled){t.preventDefault();t.stopPropagation();return}this.selected=!this.selected;if(this.value!==undefined){this.roadcardclick.emit({value:this.value,label:(e=this.el.querySelector("road-label"))===null||e===void 0?void 0:e.textContent});this.roadCardClick.emit({value:this.value,label:(o=this.el.querySelector("road-label"))===null||o===void 0?void 0:o.textContent})}}}isClickable(){return this.href!==undefined||this.button}renderCard(){const t=this.isClickable();if(!t){return[o("slot",null)]}const{href:e}=this;const i=t?e===undefined?"button":"a":"div";const s=this.button&&e===undefined;const r=i==="button"?{type:this.type,disabled:s&&this.disabled,"aria-disabled":s&&this.disabled?"true":undefined}:{download:this.download,href:this.href,rel:this.rel,target:this.target};return o(i,Object.assign({},r,{class:"card-native",part:"native",onClick:this.onClick}),o("slot",null))}render(){const{elevation:t}=this;const e=this.button&&this.href===undefined;const s=this.elevation?`card-elevation-${t}`:``;const r=this.selected?"selected":"";const a=e?"is-button":"";const n=e&&this.disabled?"is-disabled":"";return o(i,{key:"44026953c66e6ee3421d5bbc03c92e60710feb94",class:`${s} ${r} ${a} ${n}`},this.renderCard())}get el(){return s(this)}};n.style=a;export{n as road_card};
-//# sourceMappingURL=p-7dae0270.entry.js.map

package/dist/roadtrip/p-7dae0270.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["cardCss","RoadCardStyle0","Card","constructor","hostRef","this","elevation","button","selected","disabled","type","onClick","e","isButtonMode","href","undefined","preventDefault","stopPropagation","value","roadcardclick","emit","label","_a","el","querySelector","textContent","roadCardClick","_b","isClickable","renderCard","clickable","h","TagType","attrs","download","rel","target","Object","assign","class","part","render","elevationClass","selectedClass","isButtonClass","disabledClass","Host","key"],"sources":["src/components/card/card.css?tag=road-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/*\n * Card\n *\n * Index\n * - Card\n * - Native\n * - Icon\n */\n\n/* CARD\n -------------------- */\n\n:host {\n  position: relative;\n  box-sizing: border-box;\n  display: block;\n  margin-bottom: var(--margin-bottom, 1rem);\n  background: var(--road-surface);\n  border: 1px solid var(--road-outline-weak);\n  border-radius: var(--road-spacing-02);\n  padding: var(--road-spacing-03);\n}\n\n:host(.card-elevation-none) {\n  box-shadow: none;\n}\n\n:host(.card-elevation-lowest) {\n  box-shadow: var(--road-elevation-lowest);\n}\n\n:host(.card-elevation-average) {\n  box-shadow: var(--road-elevation-average);\n}\n\n/*\n* Card as a button (interactivity in Figma)\n*/\n\n:host(.is-button) {\n  border: 1px solid var(--road-outline);\n}\n\n:host(.is-button:hover) {\n  border: 1px solid var(--road-outline-variant);\n  outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button:focus-visible),\n:host(.is-button:focus) {\n  border: 1px solid var(--road-outline);\n  outline-offset: 1px;\n  outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.is-disabled) {\n  cursor: not-allowed;\n  pointer-events: none;\n  border: 1px solid var(--road-surface-disabled);\n  background: var(--road-surface-disabled);\n}\n\n:host(.is-button.is-disabled) .card-native,\n:host(.is-button.selected.is-disabled) .card-native {\n  background: none;\n}\n\n:host(.is-button.selected) {\n  border: 2px solid var(--road-primary);\n  outline: none;\n}\n\n:host(.is-button.selected:hover) {\n  border: 2px solid var(--road-outline-variant);\n  outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button.selected:focus-visible),\n:host(.is-button.selected:focus) {\n  border: 2px solid var(--road-outline-variant);\n  outline-offset: 1px;\n  outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.selected.is-disabled) {\n  cursor: not-allowed;\n  pointer-events: none;\n  outline: none;\n  background: var(--road-surface-disabled);\n  border: 2px solid var(--road-surface-disabled);\n}\n\n/* NATIVE\n -------------------- */\n\n.card-native {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 100%;\n  padding: var(--road-spacing-06);\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: center;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  background: var(--road-surface);\n  border: 0;\n  border-radius: 0.25rem;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\na,\nbutton {\n  cursor: pointer;\n  -webkit-user-select: none;\n          user-select: none;\n  -webkit-user-drag: none;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  text-align: center;\n}\n","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"],"mappings":"gEAAA,MAAMA,EAAU,spEAChB,MAAAC,EAAeD,E,MCoBFE,EAAI,MALjB,WAAAC,CAAAC,G,oGAWUC,KAAAC,UAA4C,OAK5CD,KAAAE,OAAkB,MAWDF,KAAAG,SAAoB,MAMpBH,KAAAI,SAAoB,MAKrCJ,KAAAK,KAAsC,SA8CtCL,KAAAM,QAAWC,I,QAEjB,MAAMC,EAAeR,KAAKE,QAAUF,KAAKS,OAASC,UAClD,GAAIF,GAAgBR,KAAKI,SAAU,CACjCG,EAAEI,iBACFJ,EAAEK,kBACF,M,CAIFZ,KAAKG,UAAYH,KAAKG,SAEtB,GAAIH,KAAKa,QAAUH,UAAW,CAC5BV,KAAKc,cAAcC,KAAK,CACtBF,MAAOb,KAAKa,MACZG,OAAOC,EAAAjB,KAAKkB,GAAGC,cAAc,iBAAa,MAAAF,SAAA,SAAAA,EAAEG,cAE9CpB,KAAKqB,cAAcN,KAAK,CACtBF,MAAOb,KAAKa,MACZG,OAAOM,EAAAtB,KAAKkB,GAAGC,cAAc,iBAAa,MAAAG,SAAA,SAAAA,EAAEF,a,GAvB1C,WAAAG,GACN,OAAOvB,KAAKS,OAASC,WAAaV,KAAKE,M,CA2BjC,UAAAsB,GACN,MAAMC,EAAYzB,KAAKuB,cAEvB,IAAKE,EAAW,CACd,MAAO,CAACC,EAAA,a,CAEV,MAAMjB,KAAEA,GAAST,KACjB,MAAM2B,EAAUF,EACZhB,IAASC,UACP,SACA,IACD,MACL,MAAMF,EAAeR,KAAKE,QAAUO,IAASC,UAC7C,MAAMkB,EACJD,IAAY,SACR,CACEtB,KAAML,KAAKK,KACXD,SAAUI,GAAgBR,KAAKI,SAC/B,gBAAiBI,GAAgBR,KAAKI,SAAW,OAASM,WAE5D,CACEmB,SAAU7B,KAAK6B,SACfpB,KAAMT,KAAKS,KACXqB,IAAK9B,KAAK8B,IACVC,OAAQ/B,KAAK+B,QAGrB,OACEL,EAACC,EAAOK,OAAAC,OAAA,GACFL,EAAK,CACTM,MAAM,cACNC,KAAK,SACL7B,QAASN,KAAKM,UAEdoB,EAAA,a,CAKN,MAAAU,GACE,MAAMnC,UAAEA,GAAcD,KACtB,MAAMQ,EAAeR,KAAKE,QAAUF,KAAKS,OAASC,UAClD,MAAM2B,EAAiBrC,KAAKC,UAAY,kBAAkBA,IAAc,GACxE,MAAMqC,EAAgBtC,KAAKG,SAAW,WAAa,GACnD,MAAMoC,EAAgB/B,EAAe,YAAc,GACnD,MAAMgC,EAAgBhC,GAAgBR,KAAKI,SAAW,cAAgB,GACtE,OACEsB,EAACe,EAAI,CAAAC,IAAA,2CACHR,MAAO,GAAGG,KAAkBC,KAAiBC,KAAiBC,KAE7DxC,KAAKwB,a","ignoreList":[]}