1import { m as b, a as p, i as u, x as o, E as l, t as f } from "../performance-mixin-D7YmSeqN.mjs"; 2import { n as i } from "../property-S_Y9cb04.mjs"; 3import { f as g } from "../css-C8WrrxT-.mjs"; 4import { m as v } from "../element-internals-Dw7LndlH.mjs"; 5import { i as m } from "../icons-registry.mjs"; 6import { o as y } from "../unsafe-svg-BipL_msF.mjs"; 7import "./icon-button.mjs"; 8var x = Object.defineProperty, k = Object.getOwnPropertyDescriptor, r = (t, s, a, c) => { 9 for (var n = c > 1 ? void 0 : c ? k(s, a) : s, d = t.length - 1, h; d >= 0; d--) 10 (h = t[d]) && (n = (c ? h(s, a, n) : h(n)) || n); 11 return c && n && x(s, a, n), n; 12}; 13const $ = b(v(p)); 14let e = class extends $ { 15 constructor() { 16 super(...arguments), this.name = "", this.value = "", this.type = "", this.text = "", this.selected = !1, this.disabled = !1, this.fullwidth = !1, this.crossIconName = "cross", this.strikethroughImgName = "strikeDiagonal"; 17 } 18 handleClick(t) { 19 if (t instanceof KeyboardEvent && t.key !== "Enter" && t.key !== " ") 20 return; 21 this.selected = !this.selected; 22 const s = { selected: this.selected }, a = new CustomEvent("selected", { detail: s, bubbles: !0, composed: !0, cancelable: !0 }); 23 this.dispatchEvent(a), a.defaultPrevented && t.preventDefault(), this.selected = s.selected; 24 } 25 crossIcon() { 26 return o`<o-icon-button size="xsmall" icon="occ-close-outlined" bgstyle="none-light"></o-icon-button>`; 27 } 28 strikeThroughImg() { 29 const t = m[this.strikethroughImgName].replace( 30 "<svg", 31 '<svg aria-hidden="true" focusable="false" part="strikethrough"' 32 ).replace(/stroke=[#"'a-z1-9]*/gi, ""); 33 return y(t); 34 } 35 render() { 36 const t = this.text; 37 return o`${this.type === "link" ? o` 38 <a role="button" tabindex="0" class="button" href=${this.href} ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick} 39 aria-label=${this.ariaLabel || l} aria-pressed=${this.selected}> 40 ${t ? o` 41 ${this.text ? o`<span class="text">${this.text}</span>` : l} 42 ` : o` 43 <span class="text"><slot></slot></span>`} 44 ${this.selected ? this.crossIcon() : l} 45 </a> 46 ` : o` 47 <button type="button" class="button" ?disabled=${this.disabled} @click=${this.handleClick} 48 aria-label=${this.ariaLabel} aria-pressed=${this.selected}> 49 ${t ? o` 50 ${this.text ? o`<span class="text">${this.text}</span>` : l} 51 ` : o` 52 <span class="text"><slot></slot></span>`} 53 ${this.selected ? this.crossIcon() : l} 54 </button> 55 `} 56 ${this.disabled ? this.strikeThroughImg() : l} 57 `; 58 } 59}; 60e.styles = u` 61 :host { 62 cursor: pointer; 63 display: inline-flex; 64 position: relative; 65 --button-bg: var(--color-container-action-secondary-default); 66 --button-bg-hover: var(--color-container-action-secondary-hover); 67 --button-bg-pressed: var(--color-container-action-secondary-pressed); 68 --button-text: var(--color-content-action-secondary); 69 --button-text-hover: var(--color-content-action-secondary); 70 --button-border: var(--color-border-secondary); 71 --button-border-width: var(--border-m); 72 --button-padding: var(--spacing-m) var(--spacing-xl); 73 --button-strikethrough-stroke: var(--color-border-secondary); 74 } 75 76 :host(.a--tabfocus) { 77 outline: none !important; 78 } 79 80 :host([fullwidth]) { 81 width: 100%; 82 } 83 84 :host([selected]) { 85 --button-bg: var(--color-container-filter-default); 86 --button-bg-hover: var(--color-container-filter-hover); 87 --button-bg-pressed: var(--color-container-filter-pressed); 88 --button-text: var(--color-content-action-primary); 89 --button-text-hover: var(--color-content-action-primary); 90 --button-border: var(--color-container-filter-default); 91 --button-strikethrough-stroke: var(--color-border-light); 92 } 93 94 :host([disabled]), 95 :host([aria-disabled="true"]), 96 :host([aria-disabled="true"]:hover) { 97 --button-border: var(--color-border-secondary); 98 opacity: 0.64; 99 } 100 101 .button { 102 display: inline-flex; 103 align-items: center; 104 justify-content: center; 105 width: 100%; 106 gap: var(--spacing-s); 107 height: 100%; 108 background-color: var(--button-bg); 109 color: var(--button-text);
110 border: var(--button-border-width, var(--border-m)) solid var(--button-border); 111 border-radius: var(--radius-m); 112 font-family: var(--font-family-loccitane-sans); 113 font-size: var(--font-size-150); 114 font-weight: var(--font-weight-400); 115 line-height: var(--line-height-200); 116 min-width: 64px; 117 padding: var(--button-padding); 118 text-decoration: none; 119 cursor: inherit; 120 box-sizing: border-box; 121 } 122 123 .button span { 124 font-family: var(--font-family-loccitane-sans); 125 font-size: var(--font-size-150); 126 font-weight: var(--font-weight-400); 127 line-height: var(--line-height-200); 128 display: inline-flex; 129 align-items: center; 130 } 131 132 .button:hover:not([disabled]) { 133 background-color: var(--button-bg-hover); 134 color: var(--button-text-hover); 135 } 136 137 .button:active:not([disabled]) { 138 background-color: var(--button-bg-pressed); 139 } 140 141 .button:focus-visible { 142 ${g}; 143 } 144 145 span.text + span.text::before { 146 content: "â¢"; 147 margin-right: 8px; 148 } 149 150 .cross-icon { 151 display: inline-flex; 152 align-items: center; 153 } 154 155 .cross-icon svg { 156 width: 8px; 157 height: 8px; 158 stroke: var(--color-content-action-primary); 159 } 160 161 .button slot {
162 margin-top: 1px; 163 display: inline-flex; 164 align-items: center; 165 } 166 167 [part="strikethrough"] { 168 position: absolute; 169 width: 100%; 170 height: 100%; 171 top: 0; 172 bottom: 0; 173 left: 0; 174 right: 0; 175 padding-left: 2px; 176 padding-right: 2px; 177 box-sizing: border-box; 178 } 179 180 [part="strikethrough"] line { 181 stroke: var(--button-strikethrough-stroke); 182 stroke-width: 4px; 183 stroke-linecap: round; 184 } 185 `; 186r([ 187 i({ reflect: !0 }) 188], e.prototype, "name", 2); 189r([ 190 i({ reflect: !0 }) 191], e.prototype, "value", 2); 192r([ 193 i({ type: String, reflect: !0 }) 194], e.prototype, "type", 2); 195r([ 196 i({ type: String, reflect: !0 }) 197], e.prototype, "href", 2); 198r([ 199 i({ type: String, reflect: !0, attribute: "data-href" }) 200], e.prototype, "dataHref", 2); 201r([ 202 i({ type: String }) 203], e.prototype, "text", 2); 204r([ 205 i({ type: Boolean, reflect: !0 }) 206], e.prototype, "selected", 2); 207r([ 208 i({ type: Boolean, reflect: !0 }) 209], e.prototype, "disabled", 2); 210r([ 211 i({ type: Boolean, reflect: !0 }) 212], e.prototype, "fullwidth", 2); 213e = r([ 214 f("o-filter-chip") 215], e); 216export { 217 e as OccitaneFilterChip 218};
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.