@luzmo/lucero 1.0.3-alpha.11 → 1.0.3-alpha.13
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/components/avatar/avatar.d.ts +17 -1
- package/components/avatar/index.cjs +1 -1
- package/components/avatar/index.js +1 -1
- package/components/avatar-CCe82byP.js +98 -0
- package/components/avatar-CwAC72MX.cjs +34 -0
- package/components/color-field/index.cjs +1 -1
- package/components/color-field/index.js +1 -1
- package/components/{color-field-Bq0IEitn.js → color-field-BBUgyihj.js} +1 -1
- package/components/{color-field-IpL7Z89G.cjs → color-field-BKBpEfot.cjs} +1 -1
- package/components/color-menu/index.cjs +1 -1
- package/components/color-menu/index.js +1 -1
- package/components/{color-menu-DtYUtPee.js → color-menu-CZGDEdC4.js} +1 -1
- package/components/{color-menu-CBpuPimx.cjs → color-menu-etodAPbs.cjs} +1 -1
- package/components/color-picker/index.cjs +1 -1
- package/components/color-picker/index.js +1 -1
- package/components/{color-picker-WCIGRufq.js → color-picker-CP4_U5xq.js} +1 -1
- package/components/{color-picker-CajJUS1c.cjs → color-picker-D6k8Vmaj.cjs} +1 -1
- package/components/date-range-picker/index.cjs +1 -1
- package/components/date-range-picker/index.js +1 -1
- package/components/{date-range-picker-Cv232jtb.js → date-range-picker-C-9uvOgI.js} +1 -1
- package/components/{date-range-picker-CNoryq5v.cjs → date-range-picker-LrWdEyeh.cjs} +1 -1
- package/components/date-time-picker/index.cjs +1 -1
- package/components/date-time-picker/index.js +1 -1
- package/components/{date-time-picker-Sgv9SOT_.js → date-time-picker-Bs6_gLo3.js} +1 -1
- package/components/{date-time-picker-Cg8RdR2k.cjs → date-time-picker-DOaTFsqF.cjs} +1 -1
- package/components/index.cjs +1 -1
- package/components/index.js +12 -12
- package/components/multi-language-field/index.cjs +1 -1
- package/components/multi-language-field/index.js +1 -1
- package/components/{multi-language-field-B7dnlCK9.cjs → multi-language-field-CpDYvREK.cjs} +1 -1
- package/components/{multi-language-field-DqAlPXww.js → multi-language-field-ccoVXf52.js} +1 -1
- package/components/number-field/index.cjs +1 -1
- package/components/number-field/index.js +1 -1
- package/components/{number-field-BEBoSI-_.cjs → number-field-BiTzYPdP.cjs} +1 -1
- package/components/{number-field-B6BiDw0B.js → number-field-qoAjRq-S.js} +1 -1
- package/components/prompt-box/index.cjs +1 -1
- package/components/prompt-box/index.js +1 -1
- package/components/{prompt-box-BbLXopHV.js → prompt-box-Dpa9hHMS.js} +1 -1
- package/components/{prompt-box-Bx_iPqV_.cjs → prompt-box-TXcnvkET.cjs} +1 -1
- package/components/search/index.cjs +1 -1
- package/components/search/index.js +1 -1
- package/components/search-DkSM6A2a.cjs +47 -0
- package/components/search-ulX07eyR.js +100 -0
- package/components/text-field/index.cjs +1 -1
- package/components/text-field/index.js +2 -2
- package/components/{text-field-D0Z0K_7q.cjs → text-field-BzZ4jEr6.cjs} +1 -1
- package/components/{text-field-DItC9-FS.js → text-field-C56-sBct.js} +1 -1
- package/components/{text-field-BG6dB1fv.cjs → text-field-COHW36-x.cjs} +1 -1
- package/components/{text-field-C9_95TpH.js → text-field-nBag7DTk.js} +1 -1
- package/components/{text-field.module-BrBqDht3.js → text-field.module-BHhBReKL.js} +1 -1
- package/components/{text-field.module-DDRcQM7Y.cjs → text-field.module-l8CaTCwE.cjs} +1 -1
- package/custom-elements.json +1 -1
- package/package.json +1 -1
- package/components/avatar-79Zd9NiA.js +0 -65
- package/components/avatar-BRfwsoBh.cjs +0 -24
- package/components/search-COpGXyHi.cjs +0 -47
- package/components/search-DJa1-_UC.js +0 -100
package/package.json
CHANGED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
/*! * Lucero - The design system for Luzmo.
|
|
2
|
-
*
|
|
3
|
-
* Copyright © 2025 Luzmo
|
|
4
|
-
* All rights reserved.
|
|
5
|
-
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
|
6
|
-
* This license allows users with a current active Luzmo account to use Lucero.
|
|
7
|
-
* This license terminates automatically if a user no longer has an active Luzmo account.
|
|
8
|
-
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
|
9
|
-
*
|
|
10
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
13
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
14
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
15
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
|
-
* SOFTWARE.
|
|
17
|
-
* */
|
|
18
|
-
import { t as e } from "./decorate-CkCg3wfh.js";
|
|
19
|
-
import { n as t, t as n } from "./sized-mixin-DzQTebN-.js";
|
|
20
|
-
import { t as r } from "./focusable-DuP0-Kuy.js";
|
|
21
|
-
import { t as i } from "./like-anchor-DXCaEv7O.js";
|
|
22
|
-
import { html as a, unsafeCSS as o } from "lit";
|
|
23
|
-
import { property as s, query as c } from "lit/decorators.js";
|
|
24
|
-
import { ifDefined as l } from "lit/directives/if-defined.js";
|
|
25
|
-
//#region src/components/avatar/avatar.module.scss?inline
|
|
26
|
-
var u = "@media (forced-colors:active){:host{--highcontrast-avatar-focus-indicator-color:CanvasText}}:host{--avatar-border-radius:var(--luzmo-avatar-border-radius,var(--luzmo-avatar-size,var(--avatar-size)));inline-size:var(--luzmo-avatar-size,var(--avatar-size));block-size:var(--luzmo-avatar-size,var(--avatar-size));border-radius:var(--avatar-border-radius);-webkit-user-drag:none;-webkit-user-select:none;user-select:none;opacity:var(--luzmo-avatar-color-opacity,var(--avatar-color-opacity));border-width:0;outline:none;display:inline-block;position:relative;overflow:visible}:host([disabled]){opacity:var(--highcontrast-avatar-color-opacity-disabled,var(--luzmo-avatar-color-opacity-disabled,var(--avatar-color-opacity-disabled)))}:host(:not([disabled])) .is-focused:after,:host(:not([disabled])) .link:focus-visible:after{pointer-events:none;content:\"\";inline-size:calc(var(--luzmo-avatar-custom-size,var(--luzmo-avatar-size,var(--avatar-size))) + var(--luzmo-avatar-focus-indicator-gap,var(--avatar-focus-indicator-gap)) * 2);block-size:calc(var(--luzmo-avatar-custom-size,var(--luzmo-avatar-size,var(--avatar-size))) + var(--luzmo-avatar-focus-indicator-gap,var(--avatar-focus-indicator-gap)) * 2);border-style:solid;border-width:var(--luzmo-avatar-focus-indicator-width,var(--avatar-focus-indicator-width));border-color:var(--highcontrast-avatar-focus-indicator-color,var(--luzmo-avatar-focus-indicator-color,var(--avatar-focus-indicator-color)));border-radius:var(--avatar-border-radius);position:absolute;inset-block-start:calc((var(--luzmo-avatar-focus-indicator-gap,var(--avatar-focus-indicator-gap)) + var(--luzmo-avatar-focus-indicator-width,var(--avatar-focus-indicator-width))) * -1);inset-inline-start:calc((var(--luzmo-avatar-focus-indicator-gap,var(--avatar-focus-indicator-gap)) + var(--luzmo-avatar-focus-indicator-width,var(--avatar-focus-indicator-width))) * -1)}.link{outline:0}.image{inline-size:var(--luzmo-avatar-size,var(--avatar-size));block-size:var(--luzmo-avatar-size,var(--avatar-size));border-radius:var(--avatar-border-radius)}:host([rounding=none]),:host([rounding=none]) img{border-radius:0}:host([rounding=full]),:host([rounding=full]) img{border-radius:100%}:host([border=light]){border:var(--luzmo-avatar-border-width,var(--avatar-border-width)) solid var(--luzmo-avatar-border-color,var(--avatar-border-color))}:host([border=none]){border:0}:host{--avatar-color-opacity:1;--avatar-border-width:var(--luzmo-border-width);--avatar-border-color:var(--luzmo-border-color);--avatar-size:32px;--avatar-focus-indicator-width:var(--luzmo-indicator-width);--avatar-focus-indicator-gap:var(--luzmo-indicator-gap);--avatar-focus-indicator-color:var(--luzmo-indicator-color);--avatar-color-opacity-disabled:.3}:host([size=xxs]){--avatar-size:var(--luzmo-component-height-xxs)}:host([size=xs]){--avatar-size:var(--luzmo-component-height-xs)}:host([size=s]){--avatar-size:var(--luzmo-component-height-s)}:host{--avatar-size:var(--luzmo-component-height)}:host([size=l]){--avatar-size:var(--luzmo-component-height-l)}:host([size=xl]){--avatar-size:var(--luzmo-component-height-xl)}:host([size=xxl]){--avatar-size:var(--luzmo-component-height-xxl)}img{vertical-align:top}", d = class extends i(t(r, { validSizes: Object.values(n) })) {
|
|
27
|
-
constructor(...e) {
|
|
28
|
-
super(...e), this.src = "", this.isDecorative = !1;
|
|
29
|
-
}
|
|
30
|
-
static get styles() {
|
|
31
|
-
return [o(u)];
|
|
32
|
-
}
|
|
33
|
-
get focusElement() {
|
|
34
|
-
return this.anchorElement || this;
|
|
35
|
-
}
|
|
36
|
-
render() {
|
|
37
|
-
let e = a`
|
|
38
|
-
<img
|
|
39
|
-
class="image"
|
|
40
|
-
alt=${l(this.label || (this.isDecorative ? "" : void 0))}
|
|
41
|
-
src=${this.src}
|
|
42
|
-
/>
|
|
43
|
-
`;
|
|
44
|
-
return this.href ? this.renderAnchor({
|
|
45
|
-
id: "link",
|
|
46
|
-
className: "link",
|
|
47
|
-
anchorContent: e
|
|
48
|
-
}) : e;
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
//#endregion
|
|
52
|
-
//#region src/components/avatar/index.ts
|
|
53
|
-
e([s({
|
|
54
|
-
type: String,
|
|
55
|
-
reflect: !0
|
|
56
|
-
})], d.prototype, "border", void 0), e([s({
|
|
57
|
-
type: String,
|
|
58
|
-
reflect: !0
|
|
59
|
-
})], d.prototype, "rounding", void 0), e([c("#link")], d.prototype, "anchorElement", void 0), e([s()], d.prototype, "src", void 0), e([s({
|
|
60
|
-
type: Boolean,
|
|
61
|
-
reflect: !0,
|
|
62
|
-
attribute: "is-decorative"
|
|
63
|
-
})], d.prototype, "isDecorative", void 0), customElements.get("luzmo-avatar") || customElements.define("luzmo-avatar", d);
|
|
64
|
-
//#endregion
|
|
65
|
-
export { d as t };
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
/*! * Lucero - The design system for Luzmo.
|
|
2
|
-
*
|
|
3
|
-
* Copyright © 2025 Luzmo
|
|
4
|
-
* All rights reserved.
|
|
5
|
-
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
|
6
|
-
* This license allows users with a current active Luzmo account to use Lucero.
|
|
7
|
-
* This license terminates automatically if a user no longer has an active Luzmo account.
|
|
8
|
-
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
|
9
|
-
*
|
|
10
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
13
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
14
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
15
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
|
-
* SOFTWARE.
|
|
17
|
-
* */
|
|
18
|
-
const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./focusable-DTxxQ3yJ.cjs"),r=require("./like-anchor-BX4PSB3d.cjs");let i=require("lit"),a=require("lit/decorators.js"),o=require("lit/directives/if-defined.js");var s=`@media (forced-colors:active){:host{--highcontrast-avatar-focus-indicator-color:CanvasText}}:host{--avatar-border-radius:var(--luzmo-avatar-border-radius,var(--luzmo-avatar-size,var(--avatar-size)));inline-size:var(--luzmo-avatar-size,var(--avatar-size));block-size:var(--luzmo-avatar-size,var(--avatar-size));border-radius:var(--avatar-border-radius);-webkit-user-drag:none;-webkit-user-select:none;user-select:none;opacity:var(--luzmo-avatar-color-opacity,var(--avatar-color-opacity));border-width:0;outline:none;display:inline-block;position:relative;overflow:visible}:host([disabled]){opacity:var(--highcontrast-avatar-color-opacity-disabled,var(--luzmo-avatar-color-opacity-disabled,var(--avatar-color-opacity-disabled)))}:host(:not([disabled])) .is-focused:after,:host(:not([disabled])) .link:focus-visible:after{pointer-events:none;content:"";inline-size:calc(var(--luzmo-avatar-custom-size,var(--luzmo-avatar-size,var(--avatar-size))) + var(--luzmo-avatar-focus-indicator-gap,var(--avatar-focus-indicator-gap)) * 2);block-size:calc(var(--luzmo-avatar-custom-size,var(--luzmo-avatar-size,var(--avatar-size))) + var(--luzmo-avatar-focus-indicator-gap,var(--avatar-focus-indicator-gap)) * 2);border-style:solid;border-width:var(--luzmo-avatar-focus-indicator-width,var(--avatar-focus-indicator-width));border-color:var(--highcontrast-avatar-focus-indicator-color,var(--luzmo-avatar-focus-indicator-color,var(--avatar-focus-indicator-color)));border-radius:var(--avatar-border-radius);position:absolute;inset-block-start:calc((var(--luzmo-avatar-focus-indicator-gap,var(--avatar-focus-indicator-gap)) + var(--luzmo-avatar-focus-indicator-width,var(--avatar-focus-indicator-width))) * -1);inset-inline-start:calc((var(--luzmo-avatar-focus-indicator-gap,var(--avatar-focus-indicator-gap)) + var(--luzmo-avatar-focus-indicator-width,var(--avatar-focus-indicator-width))) * -1)}.link{outline:0}.image{inline-size:var(--luzmo-avatar-size,var(--avatar-size));block-size:var(--luzmo-avatar-size,var(--avatar-size));border-radius:var(--avatar-border-radius)}:host([rounding=none]),:host([rounding=none]) img{border-radius:0}:host([rounding=full]),:host([rounding=full]) img{border-radius:100%}:host([border=light]){border:var(--luzmo-avatar-border-width,var(--avatar-border-width)) solid var(--luzmo-avatar-border-color,var(--avatar-border-color))}:host([border=none]){border:0}:host{--avatar-color-opacity:1;--avatar-border-width:var(--luzmo-border-width);--avatar-border-color:var(--luzmo-border-color);--avatar-size:32px;--avatar-focus-indicator-width:var(--luzmo-indicator-width);--avatar-focus-indicator-gap:var(--luzmo-indicator-gap);--avatar-focus-indicator-color:var(--luzmo-indicator-color);--avatar-color-opacity-disabled:.3}:host([size=xxs]){--avatar-size:var(--luzmo-component-height-xxs)}:host([size=xs]){--avatar-size:var(--luzmo-component-height-xs)}:host([size=s]){--avatar-size:var(--luzmo-component-height-s)}:host{--avatar-size:var(--luzmo-component-height)}:host([size=l]){--avatar-size:var(--luzmo-component-height-l)}:host([size=xl]){--avatar-size:var(--luzmo-component-height-xl)}:host([size=xxl]){--avatar-size:var(--luzmo-component-height-xxl)}img{vertical-align:top}`,c=class extends r.t(t.n(n.t,{validSizes:Object.values(t.t)})){constructor(...e){super(...e),this.src=``,this.isDecorative=!1}static get styles(){return[(0,i.unsafeCSS)(s)]}get focusElement(){return this.anchorElement||this}render(){let e=i.html`
|
|
19
|
-
<img
|
|
20
|
-
class="image"
|
|
21
|
-
alt=${(0,o.ifDefined)(this.label||(this.isDecorative?``:void 0))}
|
|
22
|
-
src=${this.src}
|
|
23
|
-
/>
|
|
24
|
-
`;return this.href?this.renderAnchor({id:`link`,className:`link`,anchorContent:e}):e}};e.t([(0,a.property)({type:String,reflect:!0})],c.prototype,`border`,void 0),e.t([(0,a.property)({type:String,reflect:!0})],c.prototype,`rounding`,void 0),e.t([(0,a.query)(`#link`)],c.prototype,`anchorElement`,void 0),e.t([(0,a.property)()],c.prototype,`src`,void 0),e.t([(0,a.property)({type:Boolean,reflect:!0,attribute:`is-decorative`})],c.prototype,`isDecorative`,void 0),customElements.get(`luzmo-avatar`)||customElements.define(`luzmo-avatar`,c),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return c}});
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
/*! * Lucero - The design system for Luzmo.
|
|
2
|
-
*
|
|
3
|
-
* Copyright © 2025 Luzmo
|
|
4
|
-
* All rights reserved.
|
|
5
|
-
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
|
6
|
-
* This license allows users with a current active Luzmo account to use Lucero.
|
|
7
|
-
* This license terminates automatically if a user no longer has an active Luzmo account.
|
|
8
|
-
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
|
9
|
-
*
|
|
10
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
13
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
14
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
15
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
|
-
* SOFTWARE.
|
|
17
|
-
* */
|
|
18
|
-
const e=require("./decorate-Dq34MBGe.cjs");require("./icon-xwNfYSkj.cjs"),require("./button-D7RUI_x1.cjs");const t=require("./text-field-BG6dB1fv.cjs");let n=require("lit"),r=require("lit/decorators.js"),i=require("@luzmo/icons"),a=require("lit/directives/if-defined.js");var o=`@media (forced-colors:active){#text-field #text-field,#text-field #text-field .input{--highcontrast-search-color-default:CanvasText;--highcontrast-search-color-hover:CanvasText;--highcontrast-search-color-focus:CanvasText;--highcontrast-search-color-disabled:GrayText}#text-field #button .luzmo-ClearButton-fill{forced-color-adjust:none;background-color:initial}}#text-field{--search-button-inline-size:var(--search-block-size);--search-min-inline-size:calc(var(--search-min-inline-multiplier) * var(--search-block-size));--luzmo-text-field-font-family:var(--luzmo-search-font-family,var(--search-font-family));--luzmo-text-field-font-weight:var(--luzmo-search-font-weight,var(--search-font-weight));--luzmo-text-field-border-radius:var(--luzmo-search-border-radius,var(--search-border-radius));--luzmo-text-field-border-width:var(--luzmo-search-border-width,var(--search-border-width));--luzmo-text-field-focus-indicator-gap:var(--luzmo-search-focus-indicator-gap,var(--search-focus-indicator-gap));--luzmo-text-field-focus-indicator-width:var(--luzmo-search-focus-indicator-width,var(--search-focus-indicator-width));--luzmo-text-field-focus-indicator-color:var(--luzmo-search-focus-indicator-color,var(--search-focus-indicator-color));--luzmo-text-field-text-color-default:var(--luzmo-search-color-default,var(--search-color-default));--luzmo-text-field-text-color-hover:var(--luzmo-search-color-hover,var(--search-color-hover));--luzmo-text-field-text-color-focus:var(--luzmo-search-color-focus,var(--search-color-focus));--luzmo-text-field-text-color-focus-hover:var(--luzmo-search-color-focus-hover,var(--search-color-focus-hover));--luzmo-text-field-text-color-keyboard-focus:var(--luzmo-search-color-key-focus,var(--search-color-key-focus));--luzmo-text-field-text-color-disabled:var(--luzmo-search-color-disabled,var(--search-color-disabled));--luzmo-text-field-border-color:var(--luzmo-search-border-color-default,var(--search-border-color-default));--luzmo-text-field-border-color-hover:var(--luzmo-search-border-color-hover,var(--search-border-color-hover));--luzmo-text-field-border-color-focus:var(--luzmo-search-border-color-focus,var(--search-border-color-focus));--luzmo-text-field-border-color-focus-hover:var(--luzmo-search-border-color-focus-hover,var(--search-border-color-focus-hover));--luzmo-text-field-border-color-keyboard-focus:var(--luzmo-search-border-color-key-focus,var(--search-border-color-key-focus));--luzmo-text-field-border-color-disabled:var(--luzmo-search-border-color-disabled,var(--search-border-color-disabled));--luzmo-text-field-background-color:var(--luzmo-search-background-color,var(--search-background-color));--luzmo-text-field-background-color-disabled:var(--luzmo-search-background-color-disabled,var(--search-background-color-disabled));inline-size:var(--luzmo-search-inline-size,var(--search-inline-size));min-inline-size:var(--luzmo-search-min-inline-size,var(--search-min-inline-size));display:inline-block;position:relative}#text-field .luzmo-HelpText{margin-block-start:var(--luzmo-search-to-help-text,var(--search-to-help-text))}#button{height:var(--search-block-size);width:var(--search-block-size);position:absolute;inset-block-start:0;inset-inline-end:0}#button,#button .luzmo-ClearButton-fill{border-radius:var(--luzmo-search-border-radius,var(--search-border-radius))}#text-field.is-disabled #button{display:none}#text-field{inline-size:100%}.icon-search{--search-color:var(--highcontrast-search-color-default,var(--luzmo-search-color-default,var(--search-color-default)));color:var(--search-color);margin-block:auto;display:block;position:absolute;inset-block:0}#text-field.is-focused .icon-search{--search-color:var(--highcontrast-search-color-focus,var(--luzmo-search-color-focus,var(--search-color-focus)))}#text-field.is-disabled .icon-search{--search-color:var(--highcontrast-search-color-disabled,var(--luzmo-search-color-disabled,var(--search-color-disabled)))}@media (hover:hover){#text-field:hover .icon-search{--search-color:var(--highcontrast-search-color-hover,var(--luzmo-search-color-hover,var(--search-color-hover)))}#text-field.is-focused:hover .icon-search{--search-color:var(--highcontrast-search-color-focus,var(--luzmo-search-color-focus-hover,var(--search-color-focus-hover)))}#text-field.is-disabled:hover .icon-search{--search-color:var(--highcontrast-search-color-disabled,var(--luzmo-search-color-disabled,var(--search-color-disabled)))}}.input{appearance:none;block-size:var(--luzmo-search-block-size,var(--search-block-size));font-style:var(--luzmo-search-font-style,var(--search-font-style));line-height:var(--luzmo-search-line-height,var(--search-line-height));padding-block-start:calc(var(--luzmo-search-top-to-text,var(--search-top-to-text)) - var(--luzmo-search-border-width,var(--search-border-width)));padding-block-end:calc(var(--luzmo-search-bottom-to-text,var(--search-bottom-to-text)) - var(--luzmo-search-border-width,var(--search-border-width)))}.input::-webkit-search-cancel-button{appearance:none}.input::-webkit-search-decoration{appearance:none}:host #text-field .icon-search{inset-inline-start:var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual))}:host(:not([quiet])) #text-field .input{padding-inline-start:calc(var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual)) - var(--luzmo-search-border-width,var(--search-border-width)) + var(--luzmo-search-icon-size,var(--search-icon-size)) + var(--luzmo-search-text-to-icon,var(--search-text-to-icon)));padding-inline-end:calc(var(--luzmo-search-button-inline-size,var(--search-button-inline-size)) - var(--luzmo-search-border-width,var(--search-border-width)))}:host([hide-icon]:not([quiet])) #text-field .input{padding-inline-start:calc(var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual)) - var(--luzmo-search-border-width,var(--search-border-width)))}:host([hide-icon][quiet]) #text-field .input{padding-inline-start:var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual))}:host([quiet]){--search-quiet-button-offset:var(--luzmo-search-quiet-button-offset,calc(var(--luzmo-search-block-size,var(--search-block-size)) / 2 - var(--luzmo-search-icon-size,var(--search-icon-size)) / 2))}:host([quiet]) #button .luzmo-ClearButton-icon{transform:translateX(var(--search-quiet-button-offset))}:host([quiet]) #text-field .input{border-radius:var(--luzmo-search-border-radius,var(--search-border-radius));padding-block-start:var(--luzmo-search-top-to-text,var(--search-top-to-text));padding-inline-start:calc(var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual)) + var(--luzmo-search-icon-size,var(--search-icon-size)) + var(--luzmo-search-text-to-icon,var(--search-text-to-icon)));padding-inline-end:calc(var(--luzmo-search-button-inline-size,var(--search-button-inline-size)) - var(--search-quiet-button-offset))}:host{--search-border-color-default:var(--luzmo-border-color);--search-border-color-hover:rgba(var(--luzmo-primary-rgb), .3);--search-border-color-focus:var(--luzmo-primary);--search-border-color-focus-hover:var(--luzmo-primary);--search-border-color-key-focus:var(--luzmo-primary);--search-inline-size:192px;--search-min-inline-multiplier:3;--search-to-help-text:0px;--search-top-to-text:var(--luzmo-spacing-2);--search-bottom-to-text:var(--luzmo-spacing-2);--search-focus-indicator-width:var(--luzmo-indicator-width);--search-focus-indicator-gap:-1px;--search-focus-indicator-color:var(--luzmo-primary);--search-font-family:var(--luzmo-font-family);--search-font-weight:var(--luzmo-font-weight);--search-font-style:var(--luzmo-font-style);--search-line-height:var(--luzmo-line-height);--search-color-default:var(--luzmo-font-color);--search-color-hover:var(--luzmo-font-color-hover);--search-color-focus:var(--luzmo-font-color-focus);--search-color-focus-hover:var(--luzmo-font-focus);--search-color-key-focus:var(--luzmo-font-color-focus);--search-border-width:var(--luzmo-border-width);--search-background-color:var(--luzmo-background-color);--search-color-disabled:var(--luzmo-disabled-color);--search-background-color-disabled:var(--luzmo-background-color-disabled);--search-border-color-disabled:var(--luzmo-border-color-disabled)}:host #text-field{--search-border-radius:var(--luzmo-border-radius);--search-edge-to-visual:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--search-block-size:var(--luzmo-component-height);--search-icon-size:var(--luzmo-font-size-l);--search-text-to-icon:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=s]) #text-field{--search-border-radius:var(--luzmo-border-radius);--search-edge-to-visual:var(--luzmo-spacing-3);--search-block-size:var(--luzmo-component-height-s);--search-icon-size:var(--luzmo-font-size);--search-text-to-icon:var(--luzmo-spacing-3)}:host([size=l]) #text-field{--search-border-radius:var(--luzmo-border-radius);--search-edge-to-visual:var(--luzmo-spacing-4);--search-block-size:var(--luzmo-component-height-l);--search-icon-size:var(--luzmo-font-size-xl);--search-text-to-icon:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=xl]) #text-field{--search-border-radius:var(--luzmo-border-radius);--search-edge-to-visual:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--search-block-size:var(--luzmo-component-height-xl);--search-icon-size:var(--luzmo-font-size-xxl);--search-text-to-icon:var(--luzmo-spacing-4)}:host([quiet]) #text-field{--search-background-color:transparent;--search-background-color-disabled:transparent;--search-border-color-disabled:var(--luzmo-border-color-disabled);--search-border-radius:0;--search-edge-to-visual:0px}:host{--luzmo-text-field-spacing-inline:var(--alias-infield-button-full-height-m)}input::-webkit-search-cancel-button{display:none}@media (forced-colors:active){luzmo-clear-button{--clear-button-fill-background-color:transparent;--clear-button-fill-background-color-disabled:transparent;--clear-button-fill-background-color-down:transparent;--clear-button-fill-background-color-hover:transparent;--clear-button-fill-background-color-key-focus:transparent}}`,s=e=>e.stopPropagation(),c=e=>e===`s`?i.luzmoSearch12:e===`l`?i.luzmoSearch:i.luzmoSearch14,l=class extends t.t{constructor(...e){super(...e),this.action=``,this.label=`Search`,this.placeholder=`Search`,this.hideIcon=!1}static get styles(){return[...super.styles,(0,n.unsafeCSS)(o)]}handleSubmit(e){this.dispatchEvent(new Event(`submit`,{cancelable:!0,bubbles:!0}))||e.preventDefault()}handleKeydown(e){let{code:t}=e;t===`Escape`&&this.holdValueOnEscape||!this.value||t!==`Escape`||this.reset()}async reset(){this.value=``,await this.updateComplete,this.focusElement.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.focusElement.dispatchEvent(new InputEvent(`change`,{bubbles:!0}))}renderField(){return n.html`
|
|
19
|
-
<form
|
|
20
|
-
action=${this.action}
|
|
21
|
-
id="form"
|
|
22
|
-
method=${(0,a.ifDefined)(this.method)}
|
|
23
|
-
@submit=${this.handleSubmit}
|
|
24
|
-
@reset=${this.reset}
|
|
25
|
-
@keydown=${this.handleKeydown}
|
|
26
|
-
>
|
|
27
|
-
${this.hideIcon?n.nothing:n.html`
|
|
28
|
-
<luzmo-icon
|
|
29
|
-
block
|
|
30
|
-
.icon=${c(this.size)}
|
|
31
|
-
size=${this.size}
|
|
32
|
-
class="icon magnifier icon-workflow icon-search"
|
|
33
|
-
></luzmo-icon>
|
|
34
|
-
`}
|
|
35
|
-
${super.renderField()}
|
|
36
|
-
${this.value?n.html`
|
|
37
|
-
<luzmo-clear-button
|
|
38
|
-
id="button"
|
|
39
|
-
label="Reset"
|
|
40
|
-
tabindex="-1"
|
|
41
|
-
type="reset"
|
|
42
|
-
size=${(0,a.ifDefined)(this.size)}
|
|
43
|
-
@keydown=${s}
|
|
44
|
-
></luzmo-clear-button>
|
|
45
|
-
`:n.nothing}
|
|
46
|
-
</form>
|
|
47
|
-
`}firstUpdated(e){super.firstUpdated(e),this.hasAttribute(`holdValueOnEscape`)||this.inputElement.setAttribute(`type`,`search`)}willUpdate(){this.multiline=!1}};e.t([(0,r.property)()],l.prototype,`action`,void 0),e.t([(0,r.property)()],l.prototype,`label`,void 0),e.t([(0,r.property)({type:String,reflect:!0})],l.prototype,`border`,void 0),e.t([(0,r.property)()],l.prototype,`method`,void 0),e.t([(0,r.property)()],l.prototype,`placeholder`,void 0),e.t([(0,r.property)({type:Boolean,reflect:!0,attribute:`hide-icon`})],l.prototype,`hideIcon`,void 0),e.t([(0,r.property)({type:Boolean})],l.prototype,`holdValueOnEscape`,void 0),e.t([(0,r.query)(`#form`)],l.prototype,`form`,void 0),customElements.get(`luzmo-search`)||customElements.define(`luzmo-search`,l),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return l}});
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
/*! * Lucero - The design system for Luzmo.
|
|
2
|
-
*
|
|
3
|
-
* Copyright © 2025 Luzmo
|
|
4
|
-
* All rights reserved.
|
|
5
|
-
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
|
6
|
-
* This license allows users with a current active Luzmo account to use Lucero.
|
|
7
|
-
* This license terminates automatically if a user no longer has an active Luzmo account.
|
|
8
|
-
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
|
9
|
-
*
|
|
10
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
13
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
14
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
15
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
|
-
* SOFTWARE.
|
|
17
|
-
* */
|
|
18
|
-
import { t as e } from "./decorate-CkCg3wfh.js";
|
|
19
|
-
import "./icon-M3agnqx7.js";
|
|
20
|
-
import "./button-CPh-7eos.js";
|
|
21
|
-
import { t } from "./text-field-DItC9-FS.js";
|
|
22
|
-
import { html as n, nothing as r, unsafeCSS as i } from "lit";
|
|
23
|
-
import { property as a, query as o } from "lit/decorators.js";
|
|
24
|
-
import { luzmoSearch as s, luzmoSearch12 as c, luzmoSearch14 as l } from "@luzmo/icons";
|
|
25
|
-
import { ifDefined as u } from "lit/directives/if-defined.js";
|
|
26
|
-
//#region src/components/search/search.module.scss?inline
|
|
27
|
-
var d = "@media (forced-colors:active){#text-field #text-field,#text-field #text-field .input{--highcontrast-search-color-default:CanvasText;--highcontrast-search-color-hover:CanvasText;--highcontrast-search-color-focus:CanvasText;--highcontrast-search-color-disabled:GrayText}#text-field #button .luzmo-ClearButton-fill{forced-color-adjust:none;background-color:initial}}#text-field{--search-button-inline-size:var(--search-block-size);--search-min-inline-size:calc(var(--search-min-inline-multiplier) * var(--search-block-size));--luzmo-text-field-font-family:var(--luzmo-search-font-family,var(--search-font-family));--luzmo-text-field-font-weight:var(--luzmo-search-font-weight,var(--search-font-weight));--luzmo-text-field-border-radius:var(--luzmo-search-border-radius,var(--search-border-radius));--luzmo-text-field-border-width:var(--luzmo-search-border-width,var(--search-border-width));--luzmo-text-field-focus-indicator-gap:var(--luzmo-search-focus-indicator-gap,var(--search-focus-indicator-gap));--luzmo-text-field-focus-indicator-width:var(--luzmo-search-focus-indicator-width,var(--search-focus-indicator-width));--luzmo-text-field-focus-indicator-color:var(--luzmo-search-focus-indicator-color,var(--search-focus-indicator-color));--luzmo-text-field-text-color-default:var(--luzmo-search-color-default,var(--search-color-default));--luzmo-text-field-text-color-hover:var(--luzmo-search-color-hover,var(--search-color-hover));--luzmo-text-field-text-color-focus:var(--luzmo-search-color-focus,var(--search-color-focus));--luzmo-text-field-text-color-focus-hover:var(--luzmo-search-color-focus-hover,var(--search-color-focus-hover));--luzmo-text-field-text-color-keyboard-focus:var(--luzmo-search-color-key-focus,var(--search-color-key-focus));--luzmo-text-field-text-color-disabled:var(--luzmo-search-color-disabled,var(--search-color-disabled));--luzmo-text-field-border-color:var(--luzmo-search-border-color-default,var(--search-border-color-default));--luzmo-text-field-border-color-hover:var(--luzmo-search-border-color-hover,var(--search-border-color-hover));--luzmo-text-field-border-color-focus:var(--luzmo-search-border-color-focus,var(--search-border-color-focus));--luzmo-text-field-border-color-focus-hover:var(--luzmo-search-border-color-focus-hover,var(--search-border-color-focus-hover));--luzmo-text-field-border-color-keyboard-focus:var(--luzmo-search-border-color-key-focus,var(--search-border-color-key-focus));--luzmo-text-field-border-color-disabled:var(--luzmo-search-border-color-disabled,var(--search-border-color-disabled));--luzmo-text-field-background-color:var(--luzmo-search-background-color,var(--search-background-color));--luzmo-text-field-background-color-disabled:var(--luzmo-search-background-color-disabled,var(--search-background-color-disabled));inline-size:var(--luzmo-search-inline-size,var(--search-inline-size));min-inline-size:var(--luzmo-search-min-inline-size,var(--search-min-inline-size));display:inline-block;position:relative}#text-field .luzmo-HelpText{margin-block-start:var(--luzmo-search-to-help-text,var(--search-to-help-text))}#button{height:var(--search-block-size);width:var(--search-block-size);position:absolute;inset-block-start:0;inset-inline-end:0}#button,#button .luzmo-ClearButton-fill{border-radius:var(--luzmo-search-border-radius,var(--search-border-radius))}#text-field.is-disabled #button{display:none}#text-field{inline-size:100%}.icon-search{--search-color:var(--highcontrast-search-color-default,var(--luzmo-search-color-default,var(--search-color-default)));color:var(--search-color);margin-block:auto;display:block;position:absolute;inset-block:0}#text-field.is-focused .icon-search{--search-color:var(--highcontrast-search-color-focus,var(--luzmo-search-color-focus,var(--search-color-focus)))}#text-field.is-disabled .icon-search{--search-color:var(--highcontrast-search-color-disabled,var(--luzmo-search-color-disabled,var(--search-color-disabled)))}@media (hover:hover){#text-field:hover .icon-search{--search-color:var(--highcontrast-search-color-hover,var(--luzmo-search-color-hover,var(--search-color-hover)))}#text-field.is-focused:hover .icon-search{--search-color:var(--highcontrast-search-color-focus,var(--luzmo-search-color-focus-hover,var(--search-color-focus-hover)))}#text-field.is-disabled:hover .icon-search{--search-color:var(--highcontrast-search-color-disabled,var(--luzmo-search-color-disabled,var(--search-color-disabled)))}}.input{appearance:none;block-size:var(--luzmo-search-block-size,var(--search-block-size));font-style:var(--luzmo-search-font-style,var(--search-font-style));line-height:var(--luzmo-search-line-height,var(--search-line-height));padding-block-start:calc(var(--luzmo-search-top-to-text,var(--search-top-to-text)) - var(--luzmo-search-border-width,var(--search-border-width)));padding-block-end:calc(var(--luzmo-search-bottom-to-text,var(--search-bottom-to-text)) - var(--luzmo-search-border-width,var(--search-border-width)))}.input::-webkit-search-cancel-button{appearance:none}.input::-webkit-search-decoration{appearance:none}:host #text-field .icon-search{inset-inline-start:var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual))}:host(:not([quiet])) #text-field .input{padding-inline-start:calc(var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual)) - var(--luzmo-search-border-width,var(--search-border-width)) + var(--luzmo-search-icon-size,var(--search-icon-size)) + var(--luzmo-search-text-to-icon,var(--search-text-to-icon)));padding-inline-end:calc(var(--luzmo-search-button-inline-size,var(--search-button-inline-size)) - var(--luzmo-search-border-width,var(--search-border-width)))}:host([hide-icon]:not([quiet])) #text-field .input{padding-inline-start:calc(var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual)) - var(--luzmo-search-border-width,var(--search-border-width)))}:host([hide-icon][quiet]) #text-field .input{padding-inline-start:var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual))}:host([quiet]){--search-quiet-button-offset:var(--luzmo-search-quiet-button-offset,calc(var(--luzmo-search-block-size,var(--search-block-size)) / 2 - var(--luzmo-search-icon-size,var(--search-icon-size)) / 2))}:host([quiet]) #button .luzmo-ClearButton-icon{transform:translateX(var(--search-quiet-button-offset))}:host([quiet]) #text-field .input{border-radius:var(--luzmo-search-border-radius,var(--search-border-radius));padding-block-start:var(--luzmo-search-top-to-text,var(--search-top-to-text));padding-inline-start:calc(var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual)) + var(--luzmo-search-icon-size,var(--search-icon-size)) + var(--luzmo-search-text-to-icon,var(--search-text-to-icon)));padding-inline-end:calc(var(--luzmo-search-button-inline-size,var(--search-button-inline-size)) - var(--search-quiet-button-offset))}:host{--search-border-color-default:var(--luzmo-border-color);--search-border-color-hover:rgba(var(--luzmo-primary-rgb), .3);--search-border-color-focus:var(--luzmo-primary);--search-border-color-focus-hover:var(--luzmo-primary);--search-border-color-key-focus:var(--luzmo-primary);--search-inline-size:192px;--search-min-inline-multiplier:3;--search-to-help-text:0px;--search-top-to-text:var(--luzmo-spacing-2);--search-bottom-to-text:var(--luzmo-spacing-2);--search-focus-indicator-width:var(--luzmo-indicator-width);--search-focus-indicator-gap:-1px;--search-focus-indicator-color:var(--luzmo-primary);--search-font-family:var(--luzmo-font-family);--search-font-weight:var(--luzmo-font-weight);--search-font-style:var(--luzmo-font-style);--search-line-height:var(--luzmo-line-height);--search-color-default:var(--luzmo-font-color);--search-color-hover:var(--luzmo-font-color-hover);--search-color-focus:var(--luzmo-font-color-focus);--search-color-focus-hover:var(--luzmo-font-focus);--search-color-key-focus:var(--luzmo-font-color-focus);--search-border-width:var(--luzmo-border-width);--search-background-color:var(--luzmo-background-color);--search-color-disabled:var(--luzmo-disabled-color);--search-background-color-disabled:var(--luzmo-background-color-disabled);--search-border-color-disabled:var(--luzmo-border-color-disabled)}:host #text-field{--search-border-radius:var(--luzmo-border-radius);--search-edge-to-visual:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--search-block-size:var(--luzmo-component-height);--search-icon-size:var(--luzmo-font-size-l);--search-text-to-icon:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=s]) #text-field{--search-border-radius:var(--luzmo-border-radius);--search-edge-to-visual:var(--luzmo-spacing-3);--search-block-size:var(--luzmo-component-height-s);--search-icon-size:var(--luzmo-font-size);--search-text-to-icon:var(--luzmo-spacing-3)}:host([size=l]) #text-field{--search-border-radius:var(--luzmo-border-radius);--search-edge-to-visual:var(--luzmo-spacing-4);--search-block-size:var(--luzmo-component-height-l);--search-icon-size:var(--luzmo-font-size-xl);--search-text-to-icon:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=xl]) #text-field{--search-border-radius:var(--luzmo-border-radius);--search-edge-to-visual:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--search-block-size:var(--luzmo-component-height-xl);--search-icon-size:var(--luzmo-font-size-xxl);--search-text-to-icon:var(--luzmo-spacing-4)}:host([quiet]) #text-field{--search-background-color:transparent;--search-background-color-disabled:transparent;--search-border-color-disabled:var(--luzmo-border-color-disabled);--search-border-radius:0;--search-edge-to-visual:0px}:host{--luzmo-text-field-spacing-inline:var(--alias-infield-button-full-height-m)}input::-webkit-search-cancel-button{display:none}@media (forced-colors:active){luzmo-clear-button{--clear-button-fill-background-color:transparent;--clear-button-fill-background-color-disabled:transparent;--clear-button-fill-background-color-down:transparent;--clear-button-fill-background-color-hover:transparent;--clear-button-fill-background-color-key-focus:transparent}}", f = (e) => e.stopPropagation(), p = (e) => e === "s" ? c : e === "l" ? s : l, m = class extends t {
|
|
28
|
-
constructor(...e) {
|
|
29
|
-
super(...e), this.action = "", this.label = "Search", this.placeholder = "Search", this.hideIcon = !1;
|
|
30
|
-
}
|
|
31
|
-
static get styles() {
|
|
32
|
-
return [...super.styles, i(d)];
|
|
33
|
-
}
|
|
34
|
-
handleSubmit(e) {
|
|
35
|
-
this.dispatchEvent(new Event("submit", {
|
|
36
|
-
cancelable: !0,
|
|
37
|
-
bubbles: !0
|
|
38
|
-
})) || e.preventDefault();
|
|
39
|
-
}
|
|
40
|
-
handleKeydown(e) {
|
|
41
|
-
let { code: t } = e;
|
|
42
|
-
t === "Escape" && this.holdValueOnEscape || !this.value || t !== "Escape" || this.reset();
|
|
43
|
-
}
|
|
44
|
-
async reset() {
|
|
45
|
-
this.value = "", await this.updateComplete, this.focusElement.dispatchEvent(new InputEvent("input", {
|
|
46
|
-
bubbles: !0,
|
|
47
|
-
composed: !0
|
|
48
|
-
})), this.focusElement.dispatchEvent(new InputEvent("change", { bubbles: !0 }));
|
|
49
|
-
}
|
|
50
|
-
renderField() {
|
|
51
|
-
return n`
|
|
52
|
-
<form
|
|
53
|
-
action=${this.action}
|
|
54
|
-
id="form"
|
|
55
|
-
method=${u(this.method)}
|
|
56
|
-
@submit=${this.handleSubmit}
|
|
57
|
-
@reset=${this.reset}
|
|
58
|
-
@keydown=${this.handleKeydown}
|
|
59
|
-
>
|
|
60
|
-
${this.hideIcon ? r : n`
|
|
61
|
-
<luzmo-icon
|
|
62
|
-
block
|
|
63
|
-
.icon=${p(this.size)}
|
|
64
|
-
size=${this.size}
|
|
65
|
-
class="icon magnifier icon-workflow icon-search"
|
|
66
|
-
></luzmo-icon>
|
|
67
|
-
`}
|
|
68
|
-
${super.renderField()}
|
|
69
|
-
${this.value ? n`
|
|
70
|
-
<luzmo-clear-button
|
|
71
|
-
id="button"
|
|
72
|
-
label="Reset"
|
|
73
|
-
tabindex="-1"
|
|
74
|
-
type="reset"
|
|
75
|
-
size=${u(this.size)}
|
|
76
|
-
@keydown=${f}
|
|
77
|
-
></luzmo-clear-button>
|
|
78
|
-
` : r}
|
|
79
|
-
</form>
|
|
80
|
-
`;
|
|
81
|
-
}
|
|
82
|
-
firstUpdated(e) {
|
|
83
|
-
super.firstUpdated(e), this.hasAttribute("holdValueOnEscape") || this.inputElement.setAttribute("type", "search");
|
|
84
|
-
}
|
|
85
|
-
willUpdate() {
|
|
86
|
-
this.multiline = !1;
|
|
87
|
-
}
|
|
88
|
-
};
|
|
89
|
-
//#endregion
|
|
90
|
-
//#region src/components/search/index.ts
|
|
91
|
-
e([a()], m.prototype, "action", void 0), e([a()], m.prototype, "label", void 0), e([a({
|
|
92
|
-
type: String,
|
|
93
|
-
reflect: !0
|
|
94
|
-
})], m.prototype, "border", void 0), e([a()], m.prototype, "method", void 0), e([a()], m.prototype, "placeholder", void 0), e([a({
|
|
95
|
-
type: Boolean,
|
|
96
|
-
reflect: !0,
|
|
97
|
-
attribute: "hide-icon"
|
|
98
|
-
})], m.prototype, "hideIcon", void 0), e([a({ type: Boolean })], m.prototype, "holdValueOnEscape", void 0), e([o("#form")], m.prototype, "form", void 0), customElements.get("luzmo-search") || customElements.define("luzmo-search", m);
|
|
99
|
-
//#endregion
|
|
100
|
-
export { m as t };
|