1/*! For license information please see button-selection-group-fields-descope-button-selection-group-item-index-js.js.LICENSE.txt */ 2"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[1837,5087],{19624(t,e,o){o.d(e,{J:()=>p,T:()=>l});var r=o(63200),n=o(25964),i=o(88961),a=o(98538),s=o(10767);const l=(0,n.xE)("button"),{host:c,label:d,slottedIcon:h}={host:{selector:()=>":host"},label:{selector:"::part(label)"},slottedIcon:{selector:()=>"::slotted(descope-icon)"}};let u;const p=(0,r.Zz)((0,i.DM)({triggers:[{attr:"full-width",value:"true"}]}),(0,i.RF)({mappings:{hostWidth:{property:"width"},hostMaxWidth:{...c,property:"max-width"},hostHeight:{property:"height"},hostDirection:{...c,property:"direction"},fontSize:{},fontFamily:{},fontWeight:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-right",fallback:"0.875em"},{property:"padding-left",fallback:"0.875em"}],labelTextColor:{property:"color"},iconColor:{selector:()=>"::slotted(*)",property:a.S.cssVarList.fill},labelTextDecoration:{...d,property:"text-decoration"},labelSpacing:{...d,property:"gap"},textAlign:{...d,property:"justify-content",fallback:"center"},iconSize:[{...h,property:"width"},{...h,property:"height"}]}}),s.G,i.VO,i.tQ)((0,i.tz)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n width: 100%;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t\t\t${u}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${p.cssVarList.outlineWidth}) + var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n :host([full-width="true"]) {\n width: var(${p.cssVarList.hostWidth});\n }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${p.cssVarList.hostHeight}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${p.cssVarList.hostWidth}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex","class","style"],componentName:l})),{color:m,fontSize:b}=p.cssVarList;u=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${m});\n\t\ttop: calc(50% - (var(${b}) / 2));\n\t\tleft: calc(50% - (var(${b}) / 2));\n\t\tborder-width: calc(var(${b}) / 10);\n\t\twidth: var(${b});\n\t\theight: var(${b});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"]) ::part(prefix),\n\t:host([loading="true"]) ::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},10767(t,e,o){o.d(e,{G:()=>r});const r=t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}},30576(t,e,o){o.r(e),o.d(e,{ButtonClass:()=>r.J,componentName:()=>r.T});var r=o(19624);o(83799),customElements.define(r.T,r.J)},98538(t,e,o){o.d(e,{S:()=>l,T:()=>s});var r=o(88961),n=o(25964),i=o(8512),a=o(63200);const s=(0,n.xE)("icon"),l=(0,a.Zz)((0,r.RF)({mappings:{fill:[{},{property:i.q.cssVarList.fill}],height:{selector:()=>":host"},width:{selector:()=>":host"}}}),r.VO,r.tQ)((0,r.tz)({slots:[],wrappedEleName:"descope-image",style:()=>"\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n max-height: 100%;\n }\n ",excludeAttrsSync:["tabindex","class","style","st-height","st-width"],componentName:s}))},8512(t,e,o){o.d(e,{T:()=>l,q:()=>h});var r=o(88961),n=o(72270),i=o(63200),a=o(25964),s=o(18782);const l=(0,a.xE)("image"),c=["src","src-dark"];class d extends((0,n.qu)({componentName:l,baseSelector:"slot"})){static get observedAttributes(){return c}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,a.fz)("\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n :host > slot {\n width: 100%;\n height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n ::slotted(*) {\n width: 100%;\n\t\t\t}\n\n .hidden {\n display: none;\n }\n ",this)}init(){super.init?.(),this.toggleVisibility(this.getSrc)}onThemeChange(){this.renderImage()}toggleVisibility(t){t?this.classList.remove("hidden"):this.classList.add("hidden")}get altText(){return this.getAttribute("alt")||""}get legacySrc(){return this.getAttribute("src")}get themeSrc(){return this.getAttribute(`src-${this.currentThemeName}`)}get getSrc(){return this.themeSrc||this.legacySrc}
2updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach(t=>{t.setAttribute("fill",`var(${h.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)})}renderImage(){this.toggleVisibility(this.getSrc),(0,s.m)(this.getSrc,this.altText).then(t=>{this.innerHTML="",t&&(this.updateFillColor(t),this.appendChild(t))})}shouldRender(t){const e=this.getAttribute(t);return this.getSrc===e}attributeChangedCallback(t,e,o){super.attributeChangedCallback?.(t,e,o),e!==o&&this.shouldRender(t)&&this.renderImage()}}const h=(0,i.Zz)((0,r.RF)({mappings:{fill:{},height:{selector:()=>":host"},width:{selector:()=>":host"}}}),r.VO,r.tQ)(d)},18782(t,e,o){o.d(e,{m:()=>i});var r=o(25414);const n=t=>{const e=r.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0},ADD_TAGS:["image"],FORBID_TAGS:["defs"]});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},i=async(t,e)=>{try{let o;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const e=atob(t.slice(26));o=n(e)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const e=await fetch(t),r=await e.text();o=n(r)}else o=((t,e)=>{const o=document.createElement("img");return o.setAttribute("src",t),o.setAttribute("alt",e),o})(t,e);return o.style.setProperty("max-width","100%"),o.style.setProperty("max-height","100%"),o}catch{return null}}},15450(t,e,o){o.r(e),o.d(e,{ButtonSelectionGroupItemClass:()=>h});var r=o(19624),n=o(25964),i=o(79365),a=o(81365),s=o(9696),l=o(97810);const c=(0,l.xE)("button-selection-group-item");class d extends((0,a.q)({componentName:c,baseSelector:":host > descope-button"})){get size(){return this.getAttribute("size")||"md"}get variant(){return this.getAttribute("variant")||"contained"}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t)}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n <descope-button variant="${this.variant}" size="${this.size}" mode="primary">\n <slot></slot>\n </descope-button>\n\t`,(0,n.fz)("\n descope-button {\n max-width: 100%;\n }\n\t\t\tdescope-button > slot {\n\t\t\t\twidth: 100%;\n\t\t\t\toverflow: hidden;\n text-overflow: ellipsis;\n display: inline-block;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n max-width: 100%\n\t\t\t}\n ",this),(0,l.EA)(this,this.baseElement,{includeAttrs:["size","variant"]}),(0,l.EA)(this.baseElement,this,{includeAttrs:["focused","active"]})}handleFocus(){this.shadowRoot.querySelector("descope-button")?.focus()}focus(){this.handleFocus()}init(){super.init(),this.addEventListener("focus",t=>{t.isTrusted&&this.handleFocus()})}}const h=(0,s.Zz)((0,i.RF)({mappings:{hostDirection:{selector:()=>r.J.componentName,property:r.J.cssVarList.hostDirection},backgroundColor:{selector:()=>r.J.componentName,property:r.J.cssVarList.backgroundColor},labelTextColor:{selector:()=>r.J.componentName,property:r.J.cssVarList.labelTextColor},borderColor:{selector:()=>r.J.componentName,property:r.J.cssVarList.borderColor},borderWidth:{selector:()=>r.J.componentName,property:r.J.cssVarList.borderWidth},borderStyle:{selector:()=>r.J.componentName,property:r.J.cssVarList.borderStyle},borderRadius:{selector:()=>r.J.componentName,property:r.J.cssVarList.borderRadius},outlineColor:{selector:()=>r.J.componentName,property:r.J.cssVarList.outlineColor}}}),i.VO,i.tQ)(d);o(30576),customElements.define(c,h)},89389(t,e,o){o.d(e,{$:()=>m});var r=o(13256),n=o(55774),i=o(82901),a=o(72562),s=o(81488),l=o(87550);const c=o(51450).AH` 3 :host { 4 display: inline-block; 5 position: relative; 6 outline: none; 7 white-space: nowrap; 8 -webkit-user-select: none; 9 -moz-user-select: none; 10 user-select: none; 11 } 12 13 :host([hidden]) { 14 display: none !important; 15 } 16 17 /* Aligns the button with form fields when placed on the same line. 18 Note, to make it work, the form fields should have the same "::before" pseudo-element. */ 19 .vaadin-button-container::before { 20 content: '\\2003'; 21 display: inline-block; 22 width: 0; 23 max-height: 100%; 24 } 25 26 .vaadin-button-container { 27 display: inline-flex; 28 align-items: center; 29 justify-content: center; 30 text-align: center; 31 width: 100%; 32 height: 100%; 33 min-height: inherit; 34 text-shadow: inherit; 35 } 36 37 [part='prefix'], 38 [part='suffix'] { 39 flex: none; 40 } 41 42 [part='label'] { 43 white-space: nowrap; 44 overflow: hidden; 45 text-overflow: ellipsis; 46 } 47 48 @media (forced-colors: active) { 49 :host { 50 outline: 1px solid; 51 outline-offset: -1px; 52 } 53 54 :host([focused]) { 55 outline-width: 2px; 56 } 57 58 :host([disabled]) { 59 outline-color: GrayText; 60 } 61 } 62`;var d=o(84467),h=o(53149),u=o(36176);const p=t=>class extends((0,d.e)((0,u.l)((0,h.y)(t)))){static get properties(){return{tabindex:{type:Number,value:0,reflectToAttribute:!0}}}get _activeKeys(){return["Enter"," "]}ready(){super.ready(),this.hasAttribute("role")||this.setAttribute("role","button")}_onKeyDown(t){super._onKeyDown(t),t.altKey||t.shiftKey||t.ctrlKey||t.metaKey||this._activeKeys.includes(t.key)&&(t.preventDefault(),this.click())}};(0,l.SF)("vaadin-button",c,{moduleId:"vaadin-button-styles"});class m extends(p((0,a.q)((0,l.cp)((0,n.w)(r.Pu))))){static get is(){return"vaadin-button"}static get template(){return r.qy` 63 <div class="vaadin-button-container"> 64 <span part="prefix" aria-hidden="true"> 65 <slot name="prefix"></slot> 66 </span> 67 <span part="label"> 68 <slot></slot> 69 </span> 70 <span part="suffix" aria-hidden="true"> 71 <slot name="suffix"></slot> 72 </span> 73 </div> 74 <slot name="tooltip"></slot> 75`}ready(){super.ready(),this._tooltipController=new s.I(this),this.addController(this._tooltipController)}}(0,i.X)(m)},93555(t,e,o){o.d(e,{x:()=>n}),o(64511),o(42068),o(9433),o(3241),o(83315);var r=o(87550);const n=r.AH` 76 :host { 77 /* Sizing */ 78 --lumo-button-size: var(--lumo-size-m); 79 min-width: var(--vaadin-button-min-width, calc(var(--_button-size) * 2)); 80 height: var(--_button-size); 81 padding: var(--vaadin-button-padding, 0 calc(var(--_button-size) / 3 + var(--lumo-border-radius-m) / 2)); 82 margin: var(--vaadin-button-margin, var(--lumo-space-xs) 0); 83 box-sizing: border-box; 84 /* Style */ 85 font-family: var(--lumo-font-family); 86 font-size: var(--vaadin-button-font-size, var(--lumo-font-size-m)); 87 font-weight: var(--vaadin-button-font-weight, 500); 88 color: var(--_lumo-button-text-color); 89 background: var(--_lumo-button-background); 90 border: var(--vaadin-button-border, none); 91 border-radius: var(--vaadin-button-border-radius, var(--lumo-border-radius-m)); 92 cursor: var(--lumo-clickable-cursor); 93 -webkit-tap-highlight-color: transparent; 94 -webkit-font-smoothing: antialiased; 95 -moz-osx-font-smoothing: grayscale; 96 flex-shrink: 0; 97 --_button-size: var(--vaadin-button-height, var(--lumo-button-size)); 98 --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)); 99 --_focus-ring-width: var(--vaadin-focus-ring-width, 2px); 100 /* Used by notification */ 101 --_lumo-button-background: var(--vaadin-button-background, var(--lumo-contrast-5pct)); 102 --_lumo-button-text-color: var(--vaadin-button-text-color, var(--lumo-primary-text-color)); 103 --_lumo-button-primary-background: var(--vaadin-button-primary-background, var(--lumo-primary-color)); 104 --_lumo-button-primary-text-color: var(--vaadin-button-primary-text-color, var(--lumo-primary-contrast-color)); 105 } 106 107 /* Set only for the internal parts so we don't affect the host vertical alignment */ 108 [part='label'], 109 [part='prefix'], 110 [part='suffix'] { 111 line-height: var(--lumo-line-height-xs); 112 } 113 114 [part='label'] { 115 padding: calc(var(--lumo-button-size) / 6) 0; 116 } 117 118 :host([theme~='small']) { 119 font-size: var(--lumo-font-size-s); 120 --lumo-button-size: var(--lumo-size-s); 121 } 122 123 :host([theme~='large']) { 124 font-size: var(--lumo-font-size-l); 125 --lumo-button-size: var(--lumo-size-l); 126 } 127 128 /* For interaction states */ 129 :host::before, 130 :host::after { 131 content: ''; 132 /* We rely on the host always being relative */ 133 position: absolute; 134 z-index: 1; 135 inset: 0; 136 background-color: currentColor; 137 border-radius: inherit; 138 opacity: 0; 139 pointer-events: none; 140 } 141 142 /* Hover */ 143 144 @media (any-hover: hover) { 145 :host(:hover)::before { 146 opacity: 0.02; 147 } 148 } 149 150 /* Active */ 151 152 :host::after { 153 transition: opacity 1.4s, transform 0.1s; 154 filter: blur(8px); 155 } 156 157 :host([active])::before { 158 opacity: 0.05; 159 transition-duration: 0s; 160 } 161 162 :host([active])::after { 163 opacity: 0.1; 164 transition-duration: 0s, 0s; 165 transform: scale(0); 166 } 167 168 /* Keyboard focus */ 169 170 :host([focus-ring]) { 171 box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); 172 } 173 174 :host([theme~='primary'][focus-ring]) { 175 box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct); 176 } 177 178 /* Types (primary, tertiary, tertiary-inline */ 179 180 :host([theme~='tertiary']), 181 :host([theme~='tertiary-inline']) { 182 --_background: transparent !important; 183 background: var(--vaadin-button-tertiary-background, var(--_background)); 184 min-width: 0; 185 } 186 187 :host([theme~='tertiary']) { 188 border: var(--vaadin-button-tertiary-border, none); 189 color: var(--vaadin-button-tertiary-text-color, var(--lumo-primary-text-color)); 190 font-weight: var(--vaadin-button-tertiary-font-weight, 500); 191 padding: var(--vaadin-button-tertiary-padding, 0 calc(var(--_button-size) / 6)); 192 } 193 194 :host([theme~='tertiary-inline'])::before { 195 display: none; 196 } 197 198 :host([theme~='tertiary-inline']) { 199 margin: 0; 200 height: auto; 201 padding: 0; 202 line-height: inherit; 203 font-size: inherit; 204 } 205 206 :host([theme~='tertiary-inline']) [part='label'] { 207 padding: 0; 208 overflow: visible; 209 line-height: inherit; 210 } 211 212 :host([theme~='primary']) { 213 background: var(--_lumo-button-primary-background); 214 border: var(--vaadin-button-primary-border, none); 215 color: var(--_lumo-button-primary-text-color); 216 font-weight: var(--vaadin-button-primary-font-weight, 600); 217 min-width: calc(var(--lumo-button-size) * 2.5); 218 } 219 220 :host([theme~='primary'])::before { 221 background-color: black; 222 } 223 224 @media (any-hover: hover) { 225 :host([theme~='primary']:hover)::before { 226 opacity: 0.05; 227 } 228 } 229 230 :host([theme~='primary'][active])::before { 231 opacity: 0.1; 232 } 233 234 :host([theme~='primary'][active])::after { 235 opacity: 0.2; 236 } 237 238 /* Colors (success, error, contrast) */ 239 240 :host([theme~='success']) { 241 color: var(--lumo-success-text-color); 242 } 243 244 :host([theme~='success'][theme~='primary']) { 245 background-color: var(--lumo-success-color); 246 color: var(--lumo-success-contrast-color); 247 } 248 249 :host([theme~='error']) { 250 color: var(--lumo-error-text-color); 251 } 252 253 :host([theme~='error'][theme~='primary']) { 254 background-color: var(--lumo-error-color); 255 color: var(--lumo-error-contrast-color); 256 } 257 258 :host([theme~='contrast']) { 259 color: var(--lumo-contrast); 260 } 261 262 :host([theme~='contrast'][theme~='primary']) { 263 background-color: var(--lumo-contrast); 264 color: var(--lumo-base-color); 265 } 266 267 /* Disabled state. Keep selectors after other color variants. */ 268 269 :host([disabled]) { 270 pointer-events: none; 271 color: var(--lumo-disabled-text-color); 272 } 273 274 :host([theme~='primary'][disabled]) { 275 background-color: var(--lumo-contrast-30pct); 276 color: var(--lumo-base-color); 277 } 278 279 :host([theme~='primary'][disabled]) [part] { 280 opacity: 0.7; 281 } 282 283 /* Icons */ 284 285 [part] ::slotted(vaadin-icon) { 286 display: inline-block; 287 width: var(--lumo-icon-size-m); 288 height: var(--lumo-icon-size-m); 289 } 290 291 /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */ 292 [part] ::slotted(vaadin-icon[icon^='vaadin:']) { 293 padding: 0.25em; 294 box-sizing: border-box !important; 295 } 296 297 [part='prefix'] { 298 margin-left: -0.25em; 299 margin-right: 0.25em; 300 } 301 302 [part='suffix'] { 303 margin-left: 0.25em; 304 margin-right: -0.25em; 305 } 306 307 /* Icon-only */ 308 309 :host([theme~='icon']:not([theme~='tertiary-inline'])) { 310 min-width: var(--lumo-button-size); 311 padding-left: calc(var(--lumo-button-size) / 4); 312 padding-right: calc(var(--lumo-button-size) / 4); 313 } 314 315 :host([theme~='icon']) [part='prefix'], 316 :host([theme~='icon']) [part='suffix'] { 317 margin-left: 0; 318 margin-right: 0; 319 } 320 321 /* RTL specific styles */ 322 323 :host([dir='rtl']) [part='prefix'] { 324 margin-left: 0.25em; 325 margin-right: -0.25em; 326 } 327 328 :host([dir='rtl']) [part='suffix'] { 329 margin-left: -0.25em; 330 margin-right: 0.25em; 331 } 332 333 :host([dir='rtl'][theme~='icon']) [part='prefix'], 334 :host([dir='rtl'][theme~='icon']) [part='suffix'] { 335 margin-left: 0; 336 margin-right: 0; 337 } 338`;(0,r.SF)("vaadin-button",n,{moduleId:"lumo-button"})},83799(t,e,o){o(93555),o(89389)}}]); 339//# sourceMappingURL=button-selection-group-fields-descope-button-selection-group-item-index-js.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.