v4web-components
Version:
Stencil Component Starter
86 lines (82 loc) • 6.84 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './lab-ds-icon-not-selectable2.js';
import { d as defineCustomElement$1 } from './lab-ds-icon-selectable2.js';
const labDsSearchBarCss = "input{border:none;outline:none;padding:0;background-color:rgba(0, 0, 0, 0);color:var(--lab-ds-semantic-color-fg-default)}.v4-input{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-xs);color:var(--lab-ds-semantic-color-fg-default);max-width:100%}.v4-input .title-text{text-align:left;font:var(--lab-ds-semantic-typography-heading-h7)}.v4-input .input-helper{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.v4-input .helper-text{display:flex;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-xs);font:var(--lab-ds-semantic-typography-body-none-decoration-p3-regular)}.clean-visible{display:none}.input-field{width:100%}.input-icon{display:flex;align-items:center;border-style:solid;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default);padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);gap:var(--lab-ds-semantic-selectable-space-gap-xs);margin-bottom:0}.input-icon .input-field{color:var(--lab-ds-semantic-color-fg-enabled);font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular)}.input-icon .icon.right{cursor:pointer;margin-top:-0.5rem;margin-bottom:-0.5rem}.options{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);position:relative}.hints{max-height:21rem;overflow-y:auto;overflow-x:hidden;border-style:solid;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);gap:var(--lab-ds-semantic-selectable-space-gap-s);background-color:var(--lab-ds-semantic-selectable-color-bg-pure);border-color:var(--lab-ds-semantic-selectable-color-primary-press);color:var(--lab-ds-semantic-color-fg-default)}.hint-container{display:flex;align-items:center;justify-content:left;gap:var(--lab-ds-semantic-selectable-space-gap-s);cursor:pointer}.input-icon:focus-within{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.input-icon:hover{box-shadow:var(--lab-ds-semantic-selectable-shadow-s);border-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.input-icon:active{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.v4-input.disabled .input-icon{background-color:var(--lab-ds-semantic-selectable-color-bg-disabled);border-color:var(--lab-ds-semantic-selectable-color-border-disabled);color:var(--lab-ds-semantic-selectable-color-bg-dark-success);box-shadow:none}.v4-input.disabled .title-text{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .input-field{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .icon{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .input-helper{color:var(--lab-ds-semantic-color-fg-disabled)}";
const LabDsSearchBar = /*@__PURE__*/ proxyCustomElement(class LabDsSearchBar extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.changeInput = createEvent(this, "changeInput", 7);
this.value = undefined;
this.hints = undefined;
this.isHintVisible = false;
this.valueState = this.value;
this.label = '';
this.disabled = false;
}
handleChange(event) {
if (event === '') {
this.changeInput.emit('');
this.value = '';
this.valueState = '';
}
else {
this.changeInput.emit(event.value);
this.valueState = event.value;
}
}
checkForClickOutside(ev) {
if (this.el.contains(ev.target)) {
return;
}
this.isHintVisible = false;
}
render() {
var _a, _b, _c;
return (h("div", { class: `v4-input ${this.disabled && 'disabled'}` }, h("div", { onFocusin: () => (this.isHintVisible = true), class: "input-icon" }, h("lab-ds-icon-not-selectable", { class: "icon left", size: "small", icon: "search" }), h("input", { disabled: this.disabled, placeholder: this.label, class: "input-field", type: "text", value: this.value, onInput: event => this.handleChange(event.target) }), ((_a = this.valueState) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("lab-ds-icon-selectable", { onClick: () => {
this.handleChange('');
}, class: `icon right`, size: "small", icon: "close" }))), ((_b = this.hints) === null || _b === void 0 ? void 0 : _b.length) > 0 && this.isHintVisible && (h("div", { class: "options" }, h("div", { class: "hints" }, (_c = this.hints) === null || _c === void 0 ? void 0 : _c.map((hint, index) => {
if (index > 4)
return null;
return (h("div", { onClick: () => {
this.handleChange({ value: hint.name });
this.isHintVisible = false;
}, class: 'hint-container' }, h("lab-ds-icon-not-selectable", { class: 'icon', size: "small", icon: "history" }), hint.name, ' '));
}))))));
}
get el() { return this; }
static get style() { return labDsSearchBarCss; }
}, [1, "lab-ds-search-bar", {
"value": [1],
"hints": [16],
"label": [1],
"disabled": [4],
"isHintVisible": [32],
"valueState": [32]
}, [[8, "click", "checkForClickOutside"]]]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["lab-ds-search-bar", "lab-ds-icon-not-selectable", "lab-ds-icon-selectable"];
components.forEach(tagName => { switch (tagName) {
case "lab-ds-search-bar":
if (!customElements.get(tagName)) {
customElements.define(tagName, LabDsSearchBar);
}
break;
case "lab-ds-icon-not-selectable":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "lab-ds-icon-selectable":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { LabDsSearchBar as L, defineCustomElement as d };
//# sourceMappingURL=lab-ds-search-bar2.js.map