1var __defProp = Object.defineProperty; 2var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 3var __publicField = (obj, key, value) => { 4 __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value); 5 return value; 6}; 7 8// src/button.js 9import { LitElement, html, css } from "@hh/global.js"; 10import { classMap } from "@hh/global.js"; 11var HHButton = class extends LitElement { 12 constructor() { 13 super(); 14 this.underline = true; 15 this.disabled = false; 16 this.newTab = false; 17 } 18 onClick(e) { 19 if (this.twoStepRedirect) { 20 if (!this.hasAttribute("selected")) { 21 e.preventDefault(); 22 } 23 } 24 if (!this.onclick) { 25 return; 26 } 27 this.dispatchEvent( 28 new CustomEvent(this.onclick, { 29 bubbles: true, 30 composed: true, 31 detail: { 32 key: this.key, 33 event: e 34 } 35 }) 36 ); 37 } 38 render() { 39 return html`${!this.href ? html`<button 40 class="${classMap({ 41 underline: this.underline 42 })}" 43 ?disabled="${this.disabled}" 44 @click="${this.onClick}" 45 type="${this.type || "button"}" 46 value="Submit" 47 > 48 <slot></slot> 49 </button>` : html`<a 50 aria-label="${this.ariaLabel}" 51 class="inline-flex justify-center ${classMap({ 52 underline: this.underline 53 })}" 54 href="${this.href}" 55 @click="${this.onClick}" 56 target="${this.newTab ? '_blank' : undefined}" 57 rel="${this.newTab ? 'noopener' : undefined}" 58 > 59 <slot></slot> 60 </a>`}`; 61 } 62}; 63__publicField(HHButton, "properties", { 64 key: {}, 65 href: { type: String }, 66 decoration: { type: String }, 67 spacing: { type: String }, 68 type: { type: String }, 69 border: { type: String }, 70 disabled: { 71 type: Boolean, 72 reflect: true 73 }, 74 underline: { 75 converter(value) { 76 return value === "true" ? true : false; 77 } 78 }, 79 fullWidth: { 80 type: Boolean, 81 reflect: true 82 }, 83 invert: { 84 type: Boolean, 85 reflect: true 86 }, 87 newTab: { 88 type: Boolean, 89 reflect: true, 90 attribute: 'new-tab', 91 converter: { 92 fromAttribute: (value) => value !== null, 93 toAttribute: (value) => value ? '' : null 94 } 95 }, 96 onclick: { 97 type: String, 98 attribute: "custom:click" 99 }, 100 twoStepRedirect: { 101 type: Boolean, 102 attribute: "two-step-redirect" 103 } 104}); 105__publicField(HHButton, "styles", css` 106 :host *, 107 :host *::before, 108 :host *::after { 109 box-sizing: border-box; 110 } 111 112 .inline-flex { 113 display: inline-flex; 114 } 115 116 .justify-center { 117 justify-content: center; 118 } 119 120 button { 121 max-width: var(--hh-max-width, 160px); 122 } 123 124 :host([full-width]) button, 125 :host([full-width]) a { 126 width: 100%; 127 max-width: none; 128 } 129 130 :host([width='full']) button { 131 width: 100%; 132 max-width: none; 133 } 134 135 :host([width='full']) a { 136 width: 100%; 137 max-width: none; 138 justify-content: center; 139 } 140 141 :host([theme='tertiary']) button { 142 max-width: none; 143 } 144 145 button, 146 a { 147 cursor: pointer; 148 color: var(--hh-color, #FDFCF8); 149 background-color: var(--hh-background, #000); 150 border: var(--hh-border-width, 0.1rem) solid var(--hh-border-color, #000); 151 transition: all var(--hh-duration-default, 300ms); 152 appearance: none; 153 font: var(--hh-font); 154 letter-spacing: var(--hh-letter-spacing); 155 text-transform: var(--hh-text-transform); 156 padding: var(--hh-padding, 1em 2em); 157 text-decoration: none; 158 min-height: var(--hh-min-height, 30px); 159 width: var(--hh-min-width, initial); 160 text-align: var(--hh-text-align, center); 161 height: 100%; 162 align-items: center; 163 } 164 165 :host([invert]) button, 166 :host([invert]) a { 167 color: var(--hh-background, #000); 168 background-color: var(--hh-color, #FDFCF8); 169 border-color: var(--hh-color, #FDFCF8); 170 } 171 172 :host([invert]) button:hover:not(:disabled), 173 :host([invert]) a:hover:not(:disabled) { 174 color: var(--hh-color, #FDFCF8); 175 background-color: var(--hh-background, #000); 176 border-color: var(--hh-color, #000); 177 } 178 179 button:hover:not(:disabled), 180 a:hover:not(:disabled) { 181 color: var(--hh-color-hover, #000); 182 background-color: var(--hh-background-hover, #FDFCF8); 183 border-color: var(--hh-border-color-hover); 184 } 185 186 :host([border='none']:not([border-mobile='true'])) button, 187 :host([border='none']:not([border-mobile='true'])) a { 188 border: none; 189 } 190 191 :host([border-mobile='true']) button, 192 :host([border-mobile='true']) a { 193 border: var(--hh-border-width, 0.1rem) solid var(--hh-border-color, #000); 194 } 195 196 button:focus-visible, 197 a:focus-visible { 198 transition: none; 199 outline: var(--hh-width-focus, 0.2rem) solid var(--hh-color-focus); 200 outline-offset: -0.1rem; 201 } 202 203 button:disabled { 204 cursor: default; 205 color: var(--hh-color-disabled); 206 background-color: var(--hh-background-disabled); 207 border-color: var(--hh-background-disabled); 208 } 209 210 :host([theme='tertiary']) button, 211 :host([theme='tertiary']) a, 212 :host([theme='quaternary']) button, 213 :host([theme='quaternary']) a { 214 position: relative; 215 background-color: var(--hh-background, transparent); 216 padding: var(--hh-padding, 0); 217 gap: var(--hh-gap, 1rem); 218 } 219 220 :host([theme='tertiary']) button.underline:after, 221 :host([theme='tertiary']) a.underline:after, 222 :host([theme='quaternary']) button.underline:after, 223 :host([theme='quaternary']) a.underline:after { 224 content: ''; 225 position: absolute; 226 left: 0; 227 bottom: var(--hh-border-bottom-offset, 0); 228 background-color: currentColor; 229 width: calc(100% - var(--hh-letter-spacing, 0px)); 230 height: var(--hh-underline-width, 1px); 231 transition: all var(--hh-duration-default, 300ms); 232 } 233 234 :host([theme='quaternary']) button:focus-visible { 235 outline: 2px solid var(--hh-color-focus); 236 } 237 238 @media screen and (min-width: 990px) { 239 :host([border='none']) button, 240 :host([border='none']) a { 241 border: none; 242 } 243 244 :host([theme='tertiary']) button:hover:not(:disabled).underline:after, 245 :host([theme='tertiary']) a:hover:not(:disabled).underline:after { 246 height: var(--hh-underline-width-hover, 2px); 247 background-color: var(--hh-underline-color-hover, currentColor); 248 } 249 250 :host([theme='tertiary']) button:focus-visible.underline:after, 251 :host([theme='tertiary']) a:focus-visible.underline:after, 252 :host([theme='quaternary']) button:focus-visible.underline:after, 253 :host([theme='quaternary']) a:focus-visible.underline:after { 254 transition: none; 255 height: var(--hh-underline-width-hover, 2px); 256 background-color: var(--hh-underline-color-focus, currentColor); 257 } 258 } 259 260 :host([theme='quaternary']) button:not(:focus-visible).underline:after, 261 :host([theme='quaternary']) a:not(:focus-visible).underline:after { 262 display: none; 263 } 264 265 :slotted() { 266 font: var(--hh-font); 267 } 268 269 :host([decoration~='rounded']) button, 270 :host([decoration~='rounded']) a { 271 border-radius: var(--hh-border-radius, 4px); 272 } 273 274 a { 275 display: inline-block; 276 } 277 `); 278customElements.define("hh-button", HHButton); 279//# sourceMappingURL=-component-button.min.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.