@htmlbricks/hb-searchbar 0.67.1 → 0.68.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -2
- package/main.iife.js +34 -10
- package/main.iife.js.map +1 -1
- package/manifest.json +44 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,8 +29,10 @@ Search field with optional dropdown `searchlist` (id, text, icons, badges, tags,
|
|
|
29
29
|
|
|
30
30
|
### Usage notes
|
|
31
31
|
|
|
32
|
-
- **
|
|
33
|
-
|
|
32
|
+
- **Browser autofill:** the search field uses `autocomplete="off"` so native address/password suggestions and similar do not target this control (browser support varies; password managers may still offer fills).
|
|
33
|
+
|
|
34
|
+
- **CSS parts:** `dropdown-menu`, `search-input`, `search-input-glass` (frosted layer under the field when the input is focused), `search-submit` (magnifier button inside the field).
|
|
35
|
+
- **Styling:** Bulma `field` with a single expanded control; the search icon sits on the right as a `search-submit` control. Dropdown and field styles live in the shadow root (`styles/bulma.scss` + `webcomponent.scss`). Prefer [Bulma CSS variables](https://bulma.io/documentation/features/css-variables/) on the host or ancestors: e.g. `--bulma-primary` (focus glow, search-button hover, suggestion row accents), `--bulma-background`, `--bulma-border`, and `--bulma-primary` (host strip: default resting/focus tints on `hb-searchbar` itself; input/textarea are transparent at rest so that shows through), `--bulma-scheme-main`, `--bulma-border-weak`, `--bulma-text`, `--bulma-text-strong`, `--bulma-input-placeholder-color`, `--bulma-danger` (clear button), `--bulma-radius`, `--bulma-radius-small`, `--bulma-dropdown-content-z`. Component-only: `--hb-searchbar-host-background`, `--hb-searchbar-host-background-focus` (:host), `--hb-searchbar-input-strip-background` (darker input row at rest), `--hb-searchbar-dropdown-panel-background` (lighter list panel), `--hb-searchbar-input-glass-blur`, `--hb-searchbar-input-glass-saturate` (frosted layer on input focus only). The primary-colored diffuse glow while the input/textarea is focused wraps the whole root (including the open dropdown) as one outline.
|
|
34
36
|
- Storybook may list `initial_value`; runtime props follow `webcomponent.type.d.ts` (`value` is required).
|
|
35
37
|
|
|
36
38
|
### Minimal HTML example
|
package/main.iife.js
CHANGED
|
@@ -359,8 +359,8 @@
|
|
|
359
359
|
|
|
360
360
|
/*!
|
|
361
361
|
* Single suggestion row (\`hb-searchbar-row\`). Loaded from parent + \`Item\` (Svelte scope).
|
|
362
|
-
*/.hb-searchbar-row.svelte-wocw98 {appearance:none;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:flex-start;gap:0.5rem;width:100%;margin:0;padding-block:0.5625rem;padding-inline:0.625rem 0.75rem;border:none;border-radius:var(--bulma-radius-small
|
|
363
|
-
</textarea>`),Si=X(`<input id="custom-search-input" part="search-input" class="input svelte-1r9sxfz" type="search" aria-label="Search" aria-describedby="search"/>`),Ci=X(`<button class="button is-ghost is-small hb-searchbar-clear svelte-1r9sxfz" type="button" aria-label="Clear search"><i class="bi bi-x-lg svelte-1r9sxfz" aria-hidden="true"></i></button>`),wi=X(`<button type="button" class="hb-searchbar-row svelte-1r9sxfz"> </button>`),Ti=X(`<p class="hb-searchbar-section-label svelte-1r9sxfz">Suggested results</p> <!>`,1),Ei=X(`<div><div><div
|
|
362
|
+
*/.hb-searchbar-row.svelte-wocw98 {appearance:none;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:flex-start;gap:0.5rem;width:100%;margin:0;padding-block:0.5625rem;padding-inline:0.625rem 0.75rem;border:none;border-radius:var(--bulma-radius-small);box-shadow:none;background:transparent;font:inherit;font-size:0.875rem;line-height:1.4;text-align:start;color:var(--bulma-text);cursor:pointer;text-decoration:none;transition:background-color 0.12s ease, color 0.12s ease;}a.hb-searchbar-row.svelte-wocw98 {color:var(--bulma-text);}.hb-searchbar-row.svelte-wocw98:hover {background-color:color-mix(in srgb, var(--bulma-primary, #00d1b2) 9%, var(--bulma-scheme-main) 91%);}.hb-searchbar-row.svelte-wocw98:focus {outline:none;}.hb-searchbar-row.svelte-wocw98:focus-visible {outline:2px solid var(--bulma-primary, #00d1b2);outline-offset:2px;}.hb-searchbar-row.svelte-wocw98:active {background-color:color-mix(in srgb, var(--bulma-primary, #00d1b2) 14%, var(--bulma-scheme-main) 86%);}.hb-searchbar-row.svelte-wocw98 .bi:where(.svelte-wocw98) {flex-shrink:0;margin-block-start:0.15em;font-size:1rem;line-height:1;opacity:0.55;color:var(--bulma-text-weak);}.hb-searchbar-row.svelte-wocw98:hover .bi:where(.svelte-wocw98) {opacity:0.85;color:var(--bulma-primary, #00d1b2);}.hb-searchbar-row.svelte-wocw98 .is-flex-grow-1:where(.svelte-wocw98) {min-width:0;word-break:break-word;}.hb-searchbar-row.svelte-wocw98 .tag:where(.svelte-wocw98) {flex-shrink:0;font-size:0.7rem;height:auto;min-height:1.75em;padding-block:0.15em;font-weight:500;}.hb-searchbar-row.svelte-wocw98 .results_number:where(.svelte-wocw98) {flex-shrink:0;margin-block-start:0.1em;font-size:0.75rem;font-style:normal;font-weight:500;opacity:0.65;white-space:nowrap;}`};function yi(e,t){Ve(t,!0),Vr(e,vi);function n(e){let t=e||`secondary`;return t===`secondary`?`is-light`:`is-${t}`}let r=$(t,`id`,7,``),i=$(t,`is_inpput`,7),a=$(t,`url`,7),o=$(t,`icon`,7),s=$(t,`text`,7),c=$(t,`number_of_results`,7),l=$(t,`badge`,7),u=$(t,`input_search`,7),d=$(t,`clicksearch`,7);var f={get id(){return r()},set id(e=``){r(e),N()},get is_inpput(){return i()},set is_inpput(e){i(e),N()},get url(){return a()},set url(e){a(e),N()},get icon(){return o()},set icon(e){o(e),N()},get text(){return s()},set text(e){s(e),N()},get number_of_results(){return c()},set number_of_results(e){c(e),N()},get badge(){return l()},set badge(e){l(e),N()},get input_search(){return u()},set input_search(e){u(e),N()},get clicksearch(){return d()},set clicksearch(e){d(e),N()}},p=vr(),m=nn(p),h=e=>{var t=fi(),u=L(t),f=e=>{var t=ci();z(()=>Wr(t,1,`bi bi-${o()?o():`dot`}`,`svelte-wocw98`)),Z(e,t)};Q(u,e=>{o()&&e(f)});var p=R(u,2),m=L(p);O(p);var h=R(p,2),g=e=>{var t=li(),n=L(t);O(t),z(()=>xr(n,`${c()??``} Results`)),Z(e,t)};Q(h,e=>{(c()||c()===0)&&e(g)});var _=R(h,2),v=e=>{var t=di(),r=L(t),i=e=>{var t=ui();z(()=>Wr(t,1,`bi bi-${l().icon}`,`svelte-wocw98`)),Z(e,t)};Q(r,e=>{l().icon&&e(i)});var a=R(r);O(t),z(e=>{Wr(t,1,e,`svelte-wocw98`),xr(a,` ${l().text??``}`)},[()=>`tag ${n(l().color)} is-flex is-align-items-center is-gap-1`]),Z(e,t)};Q(_,e=>{l()&&e(v)}),O(t),z(()=>{Yr(t,`href`,a()),xr(m,`${i()?`... `:``}${s()??``}`)}),ur(`click`,t,async()=>{await d()(s(),r())}),Z(e,t)},g=e=>{var t=_i(),a=L(t),u=e=>{var t=pi();z(()=>Wr(t,1,`bi bi-${o()?o():`dot`}`,`svelte-wocw98`)),Z(e,t)};Q(a,e=>{o()&&e(u)});var f=R(a,2),p=L(f);O(f);var m=R(f,2),h=e=>{var t=mi(),n=L(t);O(t),z(()=>xr(n,`${c()??``} Results`)),Z(e,t)};Q(m,e=>{c()&&e(h)});var g=R(m,2),_=e=>{var t=gi(),r=L(t),i=e=>{var t=hi();z(()=>Wr(t,1,`bi bi-${l().icon}`,`svelte-wocw98`)),Z(e,t)};Q(r,e=>{l().icon&&e(i)});var a=R(r);O(t),z(e=>{Wr(t,1,e,`svelte-wocw98`),xr(a,` ${l().text??``}`)},[()=>`tag ${n(l().color)} is-flex is-align-items-center is-gap-1`]),Z(e,t)};Q(g,e=>{l()&&e(_)}),O(t),z(()=>xr(p,`${i()?`... `:``}${s()??``}`)),ur(`click`,t,async()=>{await d()(s(),r())}),Z(e,t)};return Q(m,e=>{a()?e(h):e(g,-1)}),Z(e,p),He(f)}dr([`click`]),si(yi,{id:{},is_inpput:{},url:{},icon:{},text:{},number_of_results:{},badge:{},input_search:{},clicksearch:{}},[],[],{mode:`open`});var bi=X(`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@latest/font/bootstrap-icons.css" class="svelte-1r9sxfz"/>`),xi=X(`<textarea id="custom-search-input" part="search-input" class="input svelte-1r9sxfz" autocomplete="off" aria-label="Search" aria-describedby="search">
|
|
363
|
+
</textarea>`),Si=X(`<input id="custom-search-input" part="search-input" class="input svelte-1r9sxfz" type="search" autocomplete="off" aria-label="Search" aria-describedby="search"/>`),Ci=X(`<button class="button is-ghost is-small hb-searchbar-clear svelte-1r9sxfz" type="button" aria-label="Clear search"><i class="bi bi-x-lg svelte-1r9sxfz" aria-hidden="true"></i></button>`),wi=X(`<button type="button" class="hb-searchbar-row svelte-1r9sxfz"> </button>`),Ti=X(`<p class="hb-searchbar-section-label svelte-1r9sxfz">Suggested results</p> <!>`,1),Ei=X(`<div><div><div><div class="hb-searchbar-input-glass svelte-1r9sxfz" part="search-input-glass" aria-hidden="true"></div> <!> <div class="hb-searchbar-trailing-actions svelte-1r9sxfz"><!> <button type="button" class="hb-searchbar-search-trigger svelte-1r9sxfz" part="search-submit" aria-label="Search"><i class="bi bi-search svelte-1r9sxfz" aria-hidden="true"></i></button></div></div></div> <div><div class="dropdown-menu svelte-1r9sxfz" part="dropdown-menu" id="custom-search-list"><div class="dropdown-content hb-searchbar-dropdown-content svelte-1r9sxfz"><!> <!></div></div></div></div>`),Di={hash:`svelte-1r9sxfz`,code:`@charset "UTF-8";
|
|
364
364
|
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
|
|
365
365
|
/*!
|
|
366
366
|
* Bulma 1.x (Sass) for hb-searchbar — form input/textarea, dropdown, button, badge.
|
|
@@ -629,17 +629,41 @@
|
|
|
629
629
|
.field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) {margin-block-end:0;margin-bottom:0;padding-block-end:0;}
|
|
630
630
|
/*!
|
|
631
631
|
* Dropdown list shell + section label (parent \`component.wc.svelte\` only).
|
|
632
|
-
*/.hb-searchbar-dropdown-content.svelte-1r9sxfz {padding-block:0.375rem;padding-inline:0.375rem;}.hb-searchbar-section-label.svelte-1r9sxfz {margin:0;padding-block:0.5rem 0.375rem;padding-inline:0.625rem 0.75rem;font-size:0.65rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--bulma-text-weak
|
|
632
|
+
*/.hb-searchbar-dropdown-content.svelte-1r9sxfz {padding-block:0.375rem;padding-inline:0.375rem;}.hb-searchbar-section-label.svelte-1r9sxfz {margin:0;padding-block:0.5rem 0.375rem;padding-inline:0.625rem 0.75rem;font-size:0.65rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--bulma-text-weak);border-block-end:1px solid var(--bulma-border-weak);}
|
|
633
633
|
/*!
|
|
634
634
|
* Single suggestion row (\`hb-searchbar-row\`). Loaded from parent + \`Item\` (Svelte scope).
|
|
635
|
-
*/.hb-searchbar-row.svelte-1r9sxfz {appearance:none;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:flex-start;gap:0.5rem;width:100%;margin:0;padding-block:0.5625rem;padding-inline:0.625rem 0.75rem;border:none;border-radius:var(--bulma-radius-small
|
|
635
|
+
*/.hb-searchbar-row.svelte-1r9sxfz {appearance:none;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:flex-start;gap:0.5rem;width:100%;margin:0;padding-block:0.5625rem;padding-inline:0.625rem 0.75rem;border:none;border-radius:var(--bulma-radius-small);box-shadow:none;background:transparent;font:inherit;font-size:0.875rem;line-height:1.4;text-align:start;color:var(--bulma-text);cursor:pointer;text-decoration:none;transition:background-color 0.12s ease, color 0.12s ease;}.hb-searchbar-row.svelte-1r9sxfz:hover {background-color:color-mix(in srgb, var(--bulma-primary, #00d1b2) 9%, var(--bulma-scheme-main) 91%);}.hb-searchbar-row.svelte-1r9sxfz:focus {outline:none;}.hb-searchbar-row.svelte-1r9sxfz:focus-visible {outline:2px solid var(--bulma-primary, #00d1b2);outline-offset:2px;}.hb-searchbar-row.svelte-1r9sxfz:active {background-color:color-mix(in srgb, var(--bulma-primary, #00d1b2) 14%, var(--bulma-scheme-main) 86%);}
|
|
636
|
+
/*
|
|
637
|
+
* Defaults live on the custom properties themselves — not \`var(--x, color-mix(...))\`.
|
|
638
|
+
* An empty or whitespace \`--hb-searchbar-host-*\` from outside would otherwise win and
|
|
639
|
+
* invalidate \`background-color\` (fallback in var() is only used when the token is unset).
|
|
640
|
+
*/:host {--hb-searchbar-host-background: color-mix(in srgb,
|
|
641
|
+
var(--bulma-background, #f5f5f5) 88%,
|
|
642
|
+
var(--bulma-border, #dbdbdb) 12%);--hb-searchbar-host-background-focus: color-mix(in srgb,
|
|
643
|
+
var(--bulma-primary, #00d1b2) 10%,
|
|
644
|
+
var(--bulma-background, #ffffff));display:block;width:100%;max-width:100%;border-bottom:1px solid var(--bulma-border-weak);background-color:var(--hb-searchbar-host-background);transition:background-color 0.2s ease;}:host:has(#custom-search-input:focus) {border-bottom-color:transparent;background-color:var(--hb-searchbar-host-background-focus);}.hb-searchbar-root.svelte-1r9sxfz,
|
|
645
|
+
.hb-searchbar-field.svelte-1r9sxfz,
|
|
646
|
+
.hb-searchbar-field.svelte-1r9sxfz > .control:where(.svelte-1r9sxfz) {background-color:transparent;}
|
|
647
|
+
/* Single outer silhouette for the blue glow (field + in-flow dropdown when open). */.hb-searchbar-root.svelte-1r9sxfz {border-radius:var(--bulma-radius);transition:box-shadow 0.18s ease;}
|
|
648
|
+
/* Focus glow uses theme primary (override with --bulma-primary on the host or ancestors). */.hb-searchbar-root.svelte-1r9sxfz:has(#custom-search-input:where(.svelte-1r9sxfz):focus) {--_hb-searchbar-glow: var(--bulma-primary, #00d1b2);box-shadow:0 0 0 1px color-mix(in srgb, var(--_hb-searchbar-glow) 55%, transparent), 0 0 12px 2px color-mix(in srgb, var(--_hb-searchbar-glow) 42%, transparent), 0 0 28px 4px color-mix(in srgb, var(--_hb-searchbar-glow) 28%, transparent), 0 0 48px 8px color-mix(in srgb, var(--_hb-searchbar-glow) 16%, transparent);}.hb-searchbar-field.svelte-1r9sxfz {box-shadow:none;border-radius:var(--bulma-radius);overflow:visible;}
|
|
649
|
+
/* Real node + always-on opacity: backdrop on pseudo/opacity:0 layers is often not composited. */.hb-searchbar-input-wrap.svelte-1r9sxfz {position:relative;border-radius:var(--bulma-radius);}
|
|
650
|
+
/* Darker than the dropdown panel; cleared while focused (glass + host focus show through). */.hb-searchbar-input-wrap.svelte-1r9sxfz:not(:has(#custom-search-input:focus)) {background-color:var(--hb-searchbar-input-strip-background, color-mix(in srgb, var(--bulma-background, #f5f5f5) 72%, var(--bulma-border, #dbdbdb) 28%));}
|
|
651
|
+
/* Invisible until focus so the host background fills the field area. */.hb-searchbar-input-glass.svelte-1r9sxfz {position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;transform:translateZ(0);background-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border:none;}.hb-searchbar-input-wrap.svelte-1r9sxfz:has(#custom-search-input:where(.svelte-1r9sxfz):focus) .hb-searchbar-input-glass:where(.svelte-1r9sxfz) {will-change:backdrop-filter;backdrop-filter:blur(var(--hb-searchbar-input-glass-blur, 24px)) saturate(var(--hb-searchbar-input-glass-saturate, 1.45));-webkit-backdrop-filter:blur(var(--hb-searchbar-input-glass-blur, 24px)) saturate(var(--hb-searchbar-input-glass-saturate, 1.45));background-color:color-mix(in srgb, color-mix(in srgb, var(--bulma-background) 70%, var(--bulma-border) 30%) 50%, transparent);box-shadow:inset 0 1px 0 color-mix(in srgb, var(--bulma-scheme-main) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--bulma-border-weak) 40%, transparent);}.hb-searchbar-input-wrap.svelte-1r9sxfz .input:where(.svelte-1r9sxfz),
|
|
636
652
|
.hb-searchbar-input-wrap.svelte-1r9sxfz textarea.input:where(.svelte-1r9sxfz) {padding-inline-end:2.75rem;}.hb-searchbar-input-wrap--with-clear.svelte-1r9sxfz .input:where(.svelte-1r9sxfz),
|
|
637
653
|
.hb-searchbar-input-wrap--with-clear.svelte-1r9sxfz textarea.input:where(.svelte-1r9sxfz) {padding-inline-end:5rem;}.hb-searchbar-trailing-actions.svelte-1r9sxfz {position:absolute;inset-inline-end:0.35rem;top:50%;transform:translateY(-50%);z-index:5;display:inline-flex;align-items:center;justify-content:flex-end;gap:0.125rem;pointer-events:none;}.hb-searchbar-trailing-actions.svelte-1r9sxfz .hb-searchbar-clear:where(.svelte-1r9sxfz),
|
|
638
654
|
.hb-searchbar-trailing-actions.svelte-1r9sxfz .hb-searchbar-search-trigger:where(.svelte-1r9sxfz) {pointer-events:auto;}.hb-searchbar-field--textarea.svelte-1r9sxfz .hb-searchbar-trailing-actions:where(.svelte-1r9sxfz) {top:0.5rem;transform:none;align-items:flex-start;}.hb-searchbar-field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) .input:where(.svelte-1r9sxfz),
|
|
639
|
-
.hb-searchbar-field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) textarea.input:where(.svelte-1r9sxfz) {border:none !important;box-shadow:none !important;
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
655
|
+
.hb-searchbar-field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) textarea.input:where(.svelte-1r9sxfz) {position:relative;z-index:1;border:none !important;box-shadow:none !important;color:var(--bulma-text-strong, var(--bulma-text));transition:background-color 0.12s ease;}
|
|
656
|
+
/*
|
|
657
|
+
* Bulma’s .input/.textarea set background via hsl(); must beat that and stay off pure scheme-main.
|
|
658
|
+
* #custom-search-input is unique; !important covers hover/is-hovered variants.
|
|
659
|
+
*/#custom-search-input.svelte-1r9sxfz:not(:focus) {background-color:transparent !important;}.hb-searchbar-field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) .input:where(.svelte-1r9sxfz)::placeholder,
|
|
660
|
+
.hb-searchbar-field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) textarea.input:where(.svelte-1r9sxfz)::placeholder {color:var(--bulma-input-placeholder-color, var(--bulma-text-weak));opacity:1;}.hb-searchbar-field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz):first-child .input:where(.svelte-1r9sxfz):focus,
|
|
661
|
+
.hb-searchbar-field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz):first-child textarea.input:where(.svelte-1r9sxfz):focus,
|
|
662
|
+
#custom-search-input.svelte-1r9sxfz:focus {border:none !important;box-shadow:none !important;outline:none;z-index:3;
|
|
663
|
+
/* Reveals .hb-searchbar-input-glass (backdrop + tint). */background-color:transparent !important;}.hb-searchbar-field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz):first-child .input:where(.svelte-1r9sxfz):focus-visible,
|
|
664
|
+
.hb-searchbar-field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz):first-child textarea.input:where(.svelte-1r9sxfz):focus-visible {outline:2px solid var(--bulma-primary, #00d1b2);outline-offset:2px;}.hb-searchbar-search-trigger.svelte-1r9sxfz {display:inline-flex;align-items:center;justify-content:center;height:auto;min-height:unset;padding:0.35rem;border:none;box-shadow:none;background:transparent;color:var(--bulma-text-weak);cursor:pointer;border-radius:var(--bulma-radius-small);}.hb-searchbar-search-trigger.svelte-1r9sxfz .bi:where(.svelte-1r9sxfz) {font-size:1.35rem;line-height:1;}.hb-searchbar-search-trigger.svelte-1r9sxfz:hover {color:var(--bulma-primary, #00d1b2);background:color-mix(in srgb, var(--bulma-primary, #00d1b2) 8%, transparent);}.hb-searchbar-search-trigger.svelte-1r9sxfz:focus {outline:none;}.hb-searchbar-search-trigger.svelte-1r9sxfz:focus-visible {outline:2px solid var(--bulma-primary, #00d1b2);outline-offset:2px;z-index:6;}.hb-searchbar-root--open.svelte-1r9sxfz .hb-searchbar-field:where(.svelte-1r9sxfz) {box-shadow:none;border-end-start-radius:0;border-end-end-radius:0;}.hb-searchbar-root--open.svelte-1r9sxfz .hb-searchbar-field:where(.svelte-1r9sxfz) .control:where(.svelte-1r9sxfz):first-child .input:where(.svelte-1r9sxfz),
|
|
665
|
+
.hb-searchbar-root--open.svelte-1r9sxfz .hb-searchbar-field:where(.svelte-1r9sxfz) .control:where(.svelte-1r9sxfz):first-child textarea.input:where(.svelte-1r9sxfz) {border-end-start-radius:0;border-end-end-radius:0;}.hb-searchbar-root--open.svelte-1r9sxfz .hb-searchbar-input-wrap:where(.svelte-1r9sxfz):has(#custom-search-input:where(.svelte-1r9sxfz):focus) .hb-searchbar-input-glass:where(.svelte-1r9sxfz) {border-end-start-radius:0;border-end-end-radius:0;
|
|
666
|
+
/* No bottom edge on the glass so the panel meets the dropdown without a double neutral line. */box-shadow:inset 0 1px 0 color-mix(in srgb, var(--bulma-scheme-main) 55%, transparent);border:1px solid color-mix(in srgb, var(--bulma-border-weak) 40%, transparent);border-bottom:none;}textarea#custom-search-input.svelte-1r9sxfz {min-height:5rem;resize:vertical;}.hb-searchbar-trailing-actions.svelte-1r9sxfz .hb-searchbar-clear:where(.svelte-1r9sxfz) {height:auto;min-height:unset;padding:0.25rem;border:none;box-shadow:none;color:var(--bulma-text-weak);}.hb-searchbar-trailing-actions.svelte-1r9sxfz .hb-searchbar-clear:where(.svelte-1r9sxfz):hover {color:var(--bulma-danger);background:transparent;}.hb-searchbar-dropdown.svelte-1r9sxfz {position:absolute;inset-inline-start:0;top:100%;display:block;width:100%;z-index:var(--bulma-dropdown-content-z, 20);}
|
|
667
|
+
/* In-flow when open so the root wraps field + list (dropdown bottom border is on \`.dropdown-menu\`). */.hb-searchbar-root--open.svelte-1r9sxfz .hb-searchbar-dropdown:where(.svelte-1r9sxfz) {position:static;z-index:auto;}.hb-searchbar-root--open.svelte-1r9sxfz .hb-searchbar-dropdown.dropdown:where(.svelte-1r9sxfz) {display:block;width:100%;}.hb-searchbar-dropdown.svelte-1r9sxfz .dropdown-menu:where(.svelte-1r9sxfz) {min-width:100%;width:100%;padding-block-start:0;inset-inline-start:0;inset-inline-end:0;box-shadow:none;border:none;border-radius:0 0 var(--bulma-radius) var(--bulma-radius);
|
|
668
|
+
/* Muted vs pure scheme-main: less contrast with the input strip and host. */background-color:var(--hb-searchbar-dropdown-panel-background, color-mix(in srgb, var(--bulma-scheme-main, #ffffff) 40%, var(--bulma-background, #f5f5f5) 20%));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}.hb-searchbar-root--open.svelte-1r9sxfz .hb-searchbar-dropdown:where(.svelte-1r9sxfz) .dropdown-menu:where(.svelte-1r9sxfz) {position:static;top:auto;}.hb-searchbar-dropdown.svelte-1r9sxfz .dropdown-menu:where(.svelte-1r9sxfz) .dropdown-content:where(.svelte-1r9sxfz) {background-color:transparent;box-shadow:none;}.hb-searchbar-dropdown-content.svelte-1r9sxfz {margin:0;border-block-start-width:0;border-radius:0 0 var(--bulma-radius) var(--bulma-radius);max-height:12.5rem;overflow-y:auto;}#custom-search-list.svelte-1r9sxfz {position:static;}`};function Oi(e,t){Ve(t,!0),Vr(e,Di);let n=$(t,`id`,7,``),r=$(t,`style`,7),i=$(t,`value`,7,``),a=$(t,`input_info`,7),o=$(t,`searchlabel`,7,`Search`),s=$(t,`searchlist`,7),c=$(t,`minlength`,7,0),l=$(t,`disable_preview`,7,`no`),u=$(t,`textarea`,7),d=Ut(!1),f=jt(()=>s()?.filter?.(e=>e?.fixed||e?.text?.toLowerCase?.().includes?.(i()?.toLowerCase?.()))),p=jt(()=>l()!==`yes`&&l()!==`true`&&l()!==`on`&&i()?.length>Number(c())&&Y(d));vn(()=>{if(n()||n(``),s()||s([]),typeof s()==`string`)try{s(JSON.parse(s()))}catch(e){console.error(`error parsing searchlist`,e)}if(typeof a()==`string`)try{a(JSON.parse(a()))}catch(e){console.error(`error parsing input_info`,e)}console.log(i(),`value`)});async function m(e,t){if(!i())return;console.log(`searching`,e,i());let n;t?(n=s()?.find(e=>e.id===t),n&&b(`search`,{input:i(),by:e,item:n})):b(`search`,{input:i(),by:e}),e!==`input`&&P(d,!1)}let h=Ut(void 0);function g(e){P(d,!0),e.key!==`Enter`&&(console.log(`debouncing`,i()),Y(h)&&clearTimeout(Y(h)),P(h,setTimeout(()=>{i()&&i().length>Number(c())&&m(`input`)},500),!0))}function _(e){e&&e.preventDefault?.(),console.log(`clicked searching`),m(`button`)}function v(){i(``),b(`clear`,{id:n()}),P(d,!1)}function y(e){let n=t.$$host,r=typeof e.composedPath==`function`?e.composedPath():[];(r.length>0?r.includes(n):e.target instanceof Node&&n.contains(e.target))||Y(d)&&P(d,!1)}kr(()=>(console.log(`mounting searchbar`),window.addEventListener(`click`,y),()=>{console.log(`unmounting searchbar`),window.removeEventListener(`click`,y)}));function b(e,n){t.$$host.dispatchEvent(new CustomEvent(e,{detail:n}))}var x={get id(){return n()},set id(e=``){n(e),N()},get style(){return r()},set style(e){r(e),N()},get value(){return i()},set value(e=``){i(e),N()},get input_info(){return a()},set input_info(e){a(e),N()},get searchlabel(){return o()},set searchlabel(e=`Search`){o(e),N()},get searchlist(){return s()},set searchlist(e){s(e),N()},get minlength(){return c()},set minlength(e=0){c(e),N()},get disable_preview(){return l()},set disable_preview(e=`no`){l(e),N()},get textarea(){return u()},set textarea(e){u(e),N()}},S=Ei();Br(`1r9sxfz`,e=>{Z(e,bi())});let ee;var C=L(S);let te;var ne=L(C);let re;var ie=R(L(ne),2),ae=e=>{var t=xi();cn(t),z(()=>Yr(t,`placeholder`,o())),ur(`input`,t,g),lr(`keypress`,t,e=>{e.key===`Enter`&&(e.preventDefault(),m(`button`))}),$r(t,i),Z(e,t)},oe=e=>{var t=Si();Jr(t),z(()=>Yr(t,`placeholder`,o())),ur(`input`,t,g),lr(`keypress`,t,e=>{e.key===`Enter`&&(e.preventDefault(),m(`button`))}),lr(`search`,t,e=>{console.log(`SEEEEEEEEE`,e.target.value),e.target?.value===``&&(b(`clear`,{id:n()}),P(d,!1))}),$r(t,i),Z(e,t)};Q(ie,e=>{u()===`yes`||u()===`true`||u()===``?e(ae):e(oe,-1)});var se=R(ie,2),ce=L(se),le=e=>{var t=Ci();ur(`click`,t,v),Z(e,t)};Q(ce,e=>{i()&&(u()===`yes`||u()===`true`||u()===``)&&e(le)});var ue=R(ce,2);O(se),O(ne),O(C);var de=R(C,2);let fe;var pe=L(de),me=L(pe),he=L(me),ge=e=>{yi(e,{clicksearch:async(e,t)=>{t?(i(e),m(`searchlist`,t)):m(`button`)},get id(){return a().id},is_inpput:!0,get icon(){return a().icon},get badge(){return a().badge},get text(){return a().text},get input_search(){return i()},get url(){return a().url},get number_of_results(){return a().number_of_results}})},_e=e=>{var t=wi(),n=L(t);O(t),z(()=>xr(n,`... ${i()??``}`)),ur(`click`,t,()=>{m(`button`)}),Z(e,t)};Q(he,e=>{a()&&a().text===i()?e(ge):e(_e,-1)});var ve=R(he,2),ye=e=>{var t=Ti();Pr(R(nn(t),2),17,()=>Y(f),e=>e.id,(e,t)=>{yi(e,{clicksearch:async(e,t)=>{t?(i(e),m(`searchlist`,t)):m(`button`)},get id(){return Y(t).id},is_inpput:!1,get icon(){return Y(t).icon},get badge(){return Y(t).badge},get text(){return Y(t).text},get input_search(){return i()},get url(){return Y(t).url},get number_of_results(){return Y(t).number_of_results}})}),Z(e,t)};return Q(ve,e=>{Y(f)?.length&&e(ye)}),O(me),O(pe),O(de),O(S),z(()=>{ee=Wr(S,1,`hb-searchbar-root is-relative svelte-1r9sxfz`,null,ee,{"hb-searchbar-root--open":Y(p)}),te=Wr(C,1,`field mb-0 hb-searchbar-field svelte-1r9sxfz`,null,te,{"hb-searchbar-field--textarea":u()===`yes`||u()===`true`||u()===``}),re=Wr(ne,1,`control is-expanded hb-searchbar-input-wrap svelte-1r9sxfz`,null,re,{"hb-searchbar-input-wrap--with-clear":!!i()&&(u()===`yes`||u()===`true`||u()===``)}),fe=Wr(de,1,`dropdown hb-searchbar-dropdown svelte-1r9sxfz`,null,fe,{"is-active":Y(p)})}),ur(`click`,ue,_),Z(e,S),He(x)}dr([`input`,`click`]),customElements.define(`hb-searchbar`,si(Oi,{id:{},style:{},value:{},input_info:{},searchlabel:{},searchlist:{},minlength:{},disable_preview:{},textarea:{}},[],[],{mode:`open`})),e.Component=Oi})(this.searchbar=this.searchbar||{});
|
|
645
669
|
//# sourceMappingURL=main.iife.js.map
|