1"use strict";(self.webpackChunksvk_designsystem=self.webpackChunksvk_designsystem||[]).push([[5862,6648],{26648:function(t,n,o){o.r(n),o.d(n,{SvkChip:function(){return r}});class r extends HTMLElement{constructor(){super(),this.label=this.getAttribute("label"),this.action=this.getAttribute("action"),this.type=this.getAttribute("type"),this.href=this.getAttribute("href"),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}templateLabel(){let t=`${this.label}`;return"filter"===this.action?t=`<svk-icon name="check-300"></svk-icon> ${t}`:"input"===this.action&&(t+='<svk-icon name="close-300"></svk-icon>'),t}templateText(){return`\n\t\t\t<span class="chip ${null!==this.action?`chip--${this.action}`:""}">\n\t\t\t\t${this.templateLabel()}\n\t\t\t</span>`}templateLink(){return`\n\t\t\t<a href="${this.href}" class="chip chip--button ${null!==this.action?`chip--${this.action}`:""}">\n\t\t\t\t${this.templateLabel()}\n\t\t\t</a>`}templateButton(){return`\n\t\t\t<button class="chip chip--button ${null!==this.action?`chip--${this.action}`:""}">\n\t\t\t\t${this.templateLabel()}\n\t\t\t</button>`}render(){let t=document.createElement("template");this.classList.add("label-50"),t.innerHTML='\n\t\t\t<style>\n\t\t\t\t:host {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t}\n\n\t\t\t\t.chip {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t\tgap: var(--space-50);\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t\tcolor: var(--link-color-primary);\n\t\t\t\t\tline-height: 1;\n\t\t\t\t\tbackground: transparent;\n\t\t\t\t\tborder: 1px solid currentColor;\n\t\t\t\t\tborder-radius: 10rem;\n\t\t\t\t\tpadding: var(--space-25) var(--space-50);\n\t\t\t\t\tfont-size: inherit;\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\tcursor: default;\n\t\t\t\t}\n\n\t\t\t\t.chip--button,\n\t\t\t\t.chip--input,\n\t\t\t\t.chip--filter {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tpadding: var(--space-50) var(--space-75);\n\n\t\t\t\t\t&:after {\n\t\t\t\t\t\tcontent: "";\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\ttop: 50%;\n\t\t\t\t\t\tleft: 50%;\n\t\t\t\t\t\tmin-width: 44px;\n\t\t\t\t\t\tmin-height: 44px;\n\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.chip--button {\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t}\n\n\t\t\t\t@media (hover: hover) {\n\t\t\t\t\t.chip--button:hover {\n\t\t\t\t\t\tbackground: var(--color-opacity-brand-primary-008);\n\t\t\t\t\t\toutline: 1px solid currentColor;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.chip--button:active {\n\t\t\t\t\tbackground: var(--color-opacity-brand-primary-016);\n\t\t\t\t\toutline: 1px solid currentColor;\n\t\t\t\t}\n\n\t\t\t\t.chip--button:focus-visible {\n\t\t\t\t\tborder-color: transparent;\n\t\t\t\t\toutline: var(--support-border-focused) solid var(--support-color-focused);\n\t\t\t\t}\n\n\t\t\t\t.chip--input {\n\t\t\t\t\tcolor: var(--color-black);\n\t\t\t\t\tbackground: var(--color-white);\n\t\t\t\t}\n\t\t\t\t.chip--filter svk-icon {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\n\t\t\t\t.chip--filter {\n\t\t\t\t\tcolor: var(--color-black);\n\t\t\t\t}\n\n\t\t\t\t:host([checked]) .chip--filter {\n\t\t\t\t\tcolor: var(--color-white);\n\t\t\t\t\tborder-color: var(--color-orange-700);\n\t\t\t\t\tbackground: var(--color-orange-700);\n\t\t\t\t}\n\n\t\t\t\t:host([checked]) .chip--filter svk-icon {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t}\n\n\t\t\t\t@media (hover: hover) {\n\t\t\t\t\t:host([checked]) .chip--filter:hover {\n\t\t\t\t\t\tbackground-color: var(--color-orange-800);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t:host([checked]) .chip--filter:active {\n\t\t\t\t\tbackground-color: var(--color-orange-900);\n\t\t\t\t}\n\n\t\t\t\tsvk-icon {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t\twidth: 0.8em;\n\t\t\t\t\theight: 0.8em;\n\t\t\t\t}\n\n\t\t\t\tsvg {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t}\n\n\t\t\t\tsvg:not([fill]) {\n\t\t\t\t\tfill: currentColor;\n\t\t\t\t}\n\n\t\t\t\t:host(.chip--secondary) .chip {\n\t\t\t\t\tcolor: var(--color-black);\n\t\t\t\t}\n\n\t\t\t\t:host(.chip--primary) .chip {\n\t\t\t\t\tcolor: var(--color-white);\n\t\t\t\t\tborder-color: var(--color-orange-700);\n\t\t\t\t\tbackground: var(--color-orange-700);\n\t\t\t\t}\n\n\t\t\t\t@media (hover: hover) {\n\t\t\t\t\t:host(.chip--primary) .chip:hover {\n\t\t\t\t\t\tbackground-color: var(--color-orange-800);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t:host(.chip--primary) .chip:active {\n\t\t\t\t\tbackground-color: var(--color-orange-900);\n\t\t\t\t}\n\n\t\t\t\t:host(.chip--tertiary) .chip {\n\t\t\t\t\tcolor: var(--color-black);\n\t\t\t\t\tborder-color: var(--color-black);\n\t\t\t\t\tbackground: var(--color-opacity-brand-primary-008);\n\t\t\t\t}\n\n\t\t\t\t@media (hover: hover) {\n\t\t\t\t\t:host(.chip--tertiary) .chip:hover {\n\t\t\t\t\t\tbackground: var(--color-opacity-brand-primary-016);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t:host(.chip--tertiary) .chip:active {\n\t\t\t\t\tbackground: var(--color-opacity-brand-primary-024);\n\t\t\t\t}\n\n\t\t\t\t:host([type=info]) .chip {\n\t\t\t\t\tbackground: var(--color-white);\n\t\t\t\t\tcolor: var(--color-black);\n\t\t\t\t\tborder-color: var(--color-white);\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t',"link"===this.type?t.innerHTML+=this.templateLink():"button"===this.type?t.innerHTML+=this.templateButton():t.innerHTML+=this.templateText(),this.shadowRoot.appendChild(t.content)}}window.customElements.define("svk-chip",r)},95862:function(t,n,o){o.r(n),o.d(n,{SvkListItem:function(){return r}});o(26648);class r extends HTMLElement{constructor(){super()}}window.customElements.define("svk-list-item",r)}}]);
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.