JezK

Edit File: sc-pill-option.entry.js.map

{"file":"sc-pill-option.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,+nFAA+nF,CAAC;AACxpF,2BAAe,eAAe;;MCOjB,YAAY;;;;;;IAKvB,MAAM;QACJ,QACE,+DACE,KAAK,EAAE;gBACL,wBAAwB,EAAE,IAAI;gBAC9B,kCAAkC,EAAE,IAAI,CAAC,aAAa;gBACtD,kCAAkC,EAAE,IAAI,CAAC,UAAU;aACpD,EACD,QAAQ,EAAC,GAAG,EACZ,IAAI,EAAC,OAAO,kBACE,IAAI,CAAC,UAAU,GAAG,MAAM,GAAG,OAAO,mBACjC,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,OAAO,IAEpD,8DAAQ,CACD,EACT;KACH;;;;;;","names":[],"sources":["src/components/ui/pill-option/sc-pill-option.scss?tag=sc-pill-option","src/components/ui/pill-option/sc-pill-option.tsx"],"sourcesContent":[".sc-pill-option {\n &__wrapper {\n display: flex;\n flex-wrap: wrap;\n gap: var(--sc-pill-option-gap, var(--sc-spacing-x-small));\n }\n\n &__button {\n display: inline-block;\n line-height: 1;\n text-align: center;\n font-size: var(--sc-pill-option-font-size, var(--sc-font-size-medium));\n font-weight: var(--sc-pill-option-font-weight, var(--sc-font-weight-semibold));\n border-color: var(--sc-pill-option-border-color, var(--sc-color-gray-300));\n border-style: var(--sc-pill-option-border-style, solid);\n border-width: var(--sc-pill-option-border-width, 1px);\n color: var(--sc-pill-option-text-color, var(--sc-color-gray-700));\n background: var(--sc-pill-option-background-color, transparent);\n border-radius: var(--sc-pill-option-border-radius, var(--sc-border-radius-medium));\n padding-top: var(--sc-pill-option-padding-top, var(--sc-spacing-small));\n padding-bottom: var(--sc-pill-option-padding-bottom, var(--sc-spacing-small));\n padding-left: var(--sc-pill-option-padding-left, var(--sc-spacing-medium));\n padding-right: var(--sc-pill-option-padding-right, var(--sc-spacing-medium));\n transition: border var(--sc-transition-medium) ease;\n cursor: pointer;\n position: relative;\n transition: var(--sc-input-transition, var(--sc-transition-medium)) background-color, var(--sc-input-transition, var(--sc-transition-medium)) color,\n var(--sc-input-transition, var(--sc-transition-medium)) border, var(--sc-input-transition, var(--sc-transition-medium)) box-shadow,\n var(--sc-input-transition, var(--sc-transition-medium)) opacity;\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &--disabled {\n text-decoration: line-through;\n }\n\n &--selected,\n &--selected:focus,\n &--selected:hover,\n &--selected:active {\n background-color: var(--sc-pill-option-active-background-color, var(--sc-color-primary-500));\n border-color: var(--sc-pill-option-active-background-color, var(--sc-color-primary-500));\n color: var(--sc-pill-option-active-text-color, white);\n box-shadow: var(--sc-shadow-small);\n }\n\n &:focus-visible {\n outline-color: var(--sc-pill-option-active-background-color, var(--sc-color-primary-500));\n outline-offset: 4px;\n outline-width: 2px;\n }\n\n &:hover:not(.sc-pill-option__button--selected),\n &:focus:not(.sc-pill-option__button--selected),\n &:active:not(.sc-pill-option__button--selected) {\n background-color: var(--sc-button-default-hover-background-color, var(--sc-pill-option-background-color, var(--sc-color-white)));\n border-color: var(--sc-pill-option-active-background-color, var(--sc-button-default-focus-border-color, var(--primary-background)));\n color: var(--sc-pill-option-text-color, var(--sc-color-gray-700));\n }\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\n\n@Component({\n tag: 'sc-pill-option',\n styleUrl: 'sc-pill-option.scss',\n shadow: false,\n})\nexport class ScPillOption {\n /** Label */\n @Prop() isSelected: boolean;\n @Prop() isUnavailable: boolean;\n\n render() {\n return (\n <button\n class={{\n 'sc-pill-option__button': true,\n 'sc-pill-option__button--disabled': this.isUnavailable,\n 'sc-pill-option__button--selected': this.isSelected,\n }}\n tabindex=\"0\"\n role=\"radio\"\n aria-checked={this.isSelected ? 'true' : 'false'}\n aria-disabled={this.isUnavailable ? 'true' : 'false'}\n >\n <slot />\n </button>\n );\n }\n}\n"],"version":3}