@logosphere-ui/core 0.0.0-alpha.11

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.
Files changed (108) hide show
  1. package/README.md +759 -0
  2. package/dist/atoms/Badge/badge.d.ts +21 -0
  3. package/dist/atoms/Badge/index.d.ts +2 -0
  4. package/dist/atoms/Button/button.d.ts +11 -0
  5. package/dist/atoms/Button/index.d.ts +1 -0
  6. package/dist/atoms/Checkbox/checkbox.d.ts +20 -0
  7. package/dist/atoms/Checkbox/index.d.ts +1 -0
  8. package/dist/atoms/FormField/formfield.d.ts +30 -0
  9. package/dist/atoms/FormField/index.d.ts +2 -0
  10. package/dist/atoms/Switch/index.d.ts +1 -0
  11. package/dist/atoms/Switch/switch.d.ts +10 -0
  12. package/dist/badge-CHWTCGQG.js +72 -0
  13. package/dist/badge-DVvdodRb.cjs +13 -0
  14. package/dist/badge.cjs +1 -0
  15. package/dist/badge.js +4 -0
  16. package/dist/breadcrumb-BB61Xt0s.js +41 -0
  17. package/dist/breadcrumb-Cop-B1J7.cjs +12 -0
  18. package/dist/breadcrumb.cjs +1 -0
  19. package/dist/breadcrumb.js +4 -0
  20. package/dist/button-BqOMevro.js +58 -0
  21. package/dist/button-CDRccsk9.cjs +10 -0
  22. package/dist/button.cjs +1 -0
  23. package/dist/button.js +4 -0
  24. package/dist/card-CNoTUaJC.js +98 -0
  25. package/dist/card-KiNHfEi2.cjs +43 -0
  26. package/dist/card.cjs +1 -0
  27. package/dist/card.js +4 -0
  28. package/dist/chatbot-BNGCxSf9.js +485 -0
  29. package/dist/chatbot-P32-Xv7e.cjs +160 -0
  30. package/dist/chatbot.cjs +1 -0
  31. package/dist/chatbot.js +4 -0
  32. package/dist/checkbox-CdDTRdKV.cjs +37 -0
  33. package/dist/checkbox-g6kl2jGR.js +119 -0
  34. package/dist/checkbox.cjs +1 -0
  35. package/dist/checkbox.js +4 -0
  36. package/dist/combobox-CeK7yW2F.cjs +99 -0
  37. package/dist/combobox-DTUSFw9V.js +270 -0
  38. package/dist/combobox.cjs +1 -0
  39. package/dist/combobox.js +4 -0
  40. package/dist/datepicker-BQOVo1Pr.cjs +115 -0
  41. package/dist/datepicker-ChdQsc_l.js +751 -0
  42. package/dist/datepicker.cjs +1 -0
  43. package/dist/datepicker.js +4 -0
  44. package/dist/download-manager-BSIMTGaK.cjs +97 -0
  45. package/dist/download-manager-a541AYhr.js +381 -0
  46. package/dist/download-manager.cjs +1 -0
  47. package/dist/download-manager.js +4 -0
  48. package/dist/formfield-BOgRugzm.js +118 -0
  49. package/dist/formfield-D_7NFFoe.cjs +27 -0
  50. package/dist/formfield.cjs +1 -0
  51. package/dist/formfield.js +4 -0
  52. package/dist/index.cjs +1 -0
  53. package/dist/index.d.ts +16 -0
  54. package/dist/index.js +34 -0
  55. package/dist/index.umd.js +840 -0
  56. package/dist/input-CoY1ZcPF.cjs +46 -0
  57. package/dist/input-CxBP0i-3.js +194 -0
  58. package/dist/input.cjs +1 -0
  59. package/dist/input.js +4 -0
  60. package/dist/modal-CnwRIdd8.js +110 -0
  61. package/dist/modal-DQ8VFL-P.cjs +39 -0
  62. package/dist/modal.cjs +1 -0
  63. package/dist/modal.js +4 -0
  64. package/dist/molecules/Breadcrumb/breadcrumb.d.ts +10 -0
  65. package/dist/molecules/Breadcrumb/index.d.ts +1 -0
  66. package/dist/molecules/Card/card.d.ts +16 -0
  67. package/dist/molecules/Card/index.d.ts +1 -0
  68. package/dist/molecules/Input/index.d.ts +2 -0
  69. package/dist/molecules/Input/input.d.ts +50 -0
  70. package/dist/molecules/Popover/index.d.ts +1 -0
  71. package/dist/molecules/Popover/popover.d.ts +33 -0
  72. package/dist/molecules/Textarea/index.d.ts +1 -0
  73. package/dist/molecules/Textarea/text-area.d.ts +49 -0
  74. package/dist/organisms/Chatbot/chatbot.d.ts +79 -0
  75. package/dist/organisms/Chatbot/index.d.ts +1 -0
  76. package/dist/organisms/Combobox/combobox.d.ts +49 -0
  77. package/dist/organisms/Combobox/index.d.ts +1 -0
  78. package/dist/organisms/DatePicker/datepicker.d.ts +79 -0
  79. package/dist/organisms/DatePicker/index.d.ts +1 -0
  80. package/dist/organisms/DownloadManager/download-manager.d.ts +52 -0
  81. package/dist/organisms/DownloadManager/index.d.ts +1 -0
  82. package/dist/organisms/Modal/index.d.ts +1 -0
  83. package/dist/organisms/Modal/modal.d.ts +21 -0
  84. package/dist/organisms/Tab/index.d.ts +1 -0
  85. package/dist/organisms/Tab/tab.d.ts +33 -0
  86. package/dist/popover-C2p5Pmts.cjs +30 -0
  87. package/dist/popover-CaVOXo_k.js +140 -0
  88. package/dist/popover.cjs +1 -0
  89. package/dist/popover.js +4 -0
  90. package/dist/shared/icons/icon-map.d.ts +1 -0
  91. package/dist/shared/icons/ui-icon.d.ts +15 -0
  92. package/dist/styles/main.css +247 -0
  93. package/dist/switch-CG4SSjTg.js +64 -0
  94. package/dist/switch-Rnnn10bn.cjs +17 -0
  95. package/dist/switch.cjs +1 -0
  96. package/dist/switch.js +4 -0
  97. package/dist/tab-BYU_XEhp.js +176 -0
  98. package/dist/tab-DcjAlXzU.cjs +40 -0
  99. package/dist/tab.cjs +1 -0
  100. package/dist/tab.js +4 -0
  101. package/dist/text-area-Dw4CUBcz.js +206 -0
  102. package/dist/text-area-eT-oCnqZ.cjs +44 -0
  103. package/dist/textarea.cjs +1 -0
  104. package/dist/textarea.js +4 -0
  105. package/dist/ui-icon-CVEyvL5D.cjs +22 -0
  106. package/dist/ui-icon-ltkJROhR.js +51 -0
  107. package/dist/vite.svg +1 -0
  108. package/package.json +184 -0
@@ -0,0 +1,46 @@
1
+ "use strict";const o=require("lit"),t=require("lit/decorators.js"),h=require("lit/directives/live.js");require("./formfield-D_7NFFoe.cjs");require("./ui-icon-CVEyvL5D.cjs");const u=".input__field{width:100%;background:transparent;border:none;outline:none;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);box-sizing:border-box;line-height:1.5}.input__field::placeholder{color:var(--color-tertiary)}.input__field:disabled{cursor:not-allowed}.input__field--default{height:16px}.input__field--large{height:24px}.input__clear-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:center;outline:none;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.input__clear-btn:hover{color:var(--color-gray-600)}";var y=Object.defineProperty,d=Object.getOwnPropertyDescriptor,r=(s,e,i,n)=>{for(var p=n>1?void 0:n?d(e,i):e,l=s.length-1,a;l>=0;l--)(a=s[l])&&(p=(n?a(e,i,p):a(p))||p);return n&&p&&y(e,i,p),p};exports.LogosphereInput=class extends o.LitElement{constructor(){super(...arguments),this.value="",this.type="text",this.placeholder="",this.name="",this.autocomplete="",this.pattern="",this.size="default",this.variant="default",this.showClear=!1,this.label="",this.helper="",this.error="",this.required=!1,this.disabled=!1,this.readonly=!1,this._internalError="",this.handleInput=e=>{const i=e.target;this.value=i.value,this._internalError&&(this._internalError="",this._inputElement.setCustomValidity("")),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:e}}))},this.handleChange=e=>{const i=e.target;this.value=i.value,i.checkValidity()||(this._internalError=i.validationMessage),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:e}}))},this.handleKeyDown=e=>{this.dispatchEvent(new CustomEvent("keydown",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleKeyUp=e=>{this.dispatchEvent(new CustomEvent("keyup",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleClear=()=>{this.value="",this._inputElement&&(this._inputElement.value=""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:"",originalEvent:null}}))}}get inputElement(){return this._inputElement}focus(){this._inputElement?.focus()}blur(){this._inputElement?.blur()}select(){this._inputElement?.select()}setSelectionRange(e,i,n){this._inputElement?.setSelectionRange(e,i,n)}checkValidity(){return this._inputElement?.checkValidity()??!0}reportValidity(){return this._inputElement?.reportValidity()??!0}setCustomValidity(e){this._inputElement?.setCustomValidity(e),this._internalError=e,this.requestUpdate()}render(){const e=this.error||this._internalError,i=this.showClear&&this.value&&!this.disabled&&!this.readonly,n=`input__field input__field--${this.size}`;return o.html`
2
+ <logosphere-formfield
3
+ .label=${this.label}
4
+ .helper=${this.helper}
5
+ .error=${e}
6
+ .required=${this.required}
7
+ .disabled=${this.disabled}
8
+ .readonly=${this.readonly}
9
+ .placeholder=${this.placeholder}
10
+ .size=${this.size}
11
+ .variant=${this.variant}
12
+ >
13
+ <input
14
+ class="${n}"
15
+ type=${this.type}
16
+ .value=${h.live(this.value)}
17
+ placeholder=${this.placeholder||o.nothing}
18
+ name=${this.name||o.nothing}
19
+ autocomplete=${this.autocomplete||o.nothing}
20
+ ?required=${this.required}
21
+ ?disabled=${this.disabled}
22
+ ?readonly=${this.readonly}
23
+ minlength=${this.minlength??o.nothing}
24
+ maxlength=${this.maxlength??o.nothing}
25
+ pattern=${this.pattern||o.nothing}
26
+ min=${this.min??o.nothing}
27
+ max=${this.max??o.nothing}
28
+ step=${this.step??o.nothing}
29
+ @input=${this.handleInput}
30
+ @change=${this.handleChange}
31
+ @keydown=${this.handleKeyDown}
32
+ @keyup=${this.handleKeyUp}
33
+ />
34
+ ${i?o.html`
35
+ <button
36
+ type="button"
37
+ slot="suffix"
38
+ class="input__clear-btn"
39
+ @click=${this.handleClear}
40
+ tabindex="-1"
41
+ >
42
+ <ui-icon name="uil-times" size="14"></ui-icon>
43
+ </button>
44
+ `:o.nothing}
45
+ </logosphere-formfield>
46
+ `}};exports.LogosphereInput.styles=[o.css`${o.unsafeCSS(u)}`];r([t.query("input")],exports.LogosphereInput.prototype,"_inputElement",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"value",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"type",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"placeholder",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"name",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"autocomplete",2);r([t.property({type:Number})],exports.LogosphereInput.prototype,"minlength",2);r([t.property({type:Number})],exports.LogosphereInput.prototype,"maxlength",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"pattern",2);r([t.property({type:Number})],exports.LogosphereInput.prototype,"min",2);r([t.property({type:Number})],exports.LogosphereInput.prototype,"max",2);r([t.property({type:Number})],exports.LogosphereInput.prototype,"step",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"size",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"variant",2);r([t.property({type:Boolean})],exports.LogosphereInput.prototype,"showClear",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"label",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"helper",2);r([t.property({type:String})],exports.LogosphereInput.prototype,"error",2);r([t.property({type:Boolean})],exports.LogosphereInput.prototype,"required",2);r([t.property({type:Boolean})],exports.LogosphereInput.prototype,"disabled",2);r([t.property({type:Boolean})],exports.LogosphereInput.prototype,"readonly",2);r([t.state()],exports.LogosphereInput.prototype,"_internalError",2);exports.LogosphereInput=r([t.customElement("logosphere-input")],exports.LogosphereInput);
@@ -0,0 +1,194 @@
1
+ import { unsafeCSS as d, css as y, LitElement as c, nothing as o, html as u } from "lit";
2
+ import { query as m, property as r, state as b, customElement as v } from "lit/decorators.js";
3
+ import { live as g } from "lit/directives/live.js";
4
+ import "./formfield-BOgRugzm.js";
5
+ import "./ui-icon-ltkJROhR.js";
6
+ const _ = ".input__field{width:100%;background:transparent;border:none;outline:none;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);box-sizing:border-box;line-height:1.5}.input__field::placeholder{color:var(--color-tertiary)}.input__field:disabled{cursor:not-allowed}.input__field--default{height:16px}.input__field--large{height:24px}.input__clear-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:center;outline:none;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.input__clear-btn:hover{color:var(--color-gray-600)}";
7
+ var f = Object.defineProperty, E = Object.getOwnPropertyDescriptor, e = (i, n, l, a) => {
8
+ for (var s = a > 1 ? void 0 : a ? E(n, l) : n, p = i.length - 1, h; p >= 0; p--)
9
+ (h = i[p]) && (s = (a ? h(n, l, s) : h(s)) || s);
10
+ return a && s && f(n, l, s), s;
11
+ };
12
+ let t = class extends c {
13
+ constructor() {
14
+ super(...arguments), this.value = "", this.type = "text", this.placeholder = "", this.name = "", this.autocomplete = "", this.pattern = "", this.size = "default", this.variant = "default", this.showClear = !1, this.label = "", this.helper = "", this.error = "", this.required = !1, this.disabled = !1, this.readonly = !1, this._internalError = "", this.handleInput = (i) => {
15
+ const n = i.target;
16
+ this.value = n.value, this._internalError && (this._internalError = "", this._inputElement.setCustomValidity("")), this.dispatchEvent(new CustomEvent("input", {
17
+ bubbles: !0,
18
+ composed: !0,
19
+ detail: { value: this.value, originalEvent: i }
20
+ }));
21
+ }, this.handleChange = (i) => {
22
+ const n = i.target;
23
+ this.value = n.value, n.checkValidity() || (this._internalError = n.validationMessage), this.dispatchEvent(new CustomEvent("change", {
24
+ bubbles: !0,
25
+ composed: !0,
26
+ detail: { value: this.value, originalEvent: i }
27
+ }));
28
+ }, this.handleKeyDown = (i) => {
29
+ this.dispatchEvent(new CustomEvent("keydown", {
30
+ bubbles: !0,
31
+ composed: !0,
32
+ detail: { key: i.key, originalEvent: i }
33
+ }));
34
+ }, this.handleKeyUp = (i) => {
35
+ this.dispatchEvent(new CustomEvent("keyup", {
36
+ bubbles: !0,
37
+ composed: !0,
38
+ detail: { key: i.key, originalEvent: i }
39
+ }));
40
+ }, this.handleClear = () => {
41
+ this.value = "", this._inputElement && (this._inputElement.value = ""), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("input", {
42
+ bubbles: !0,
43
+ composed: !0,
44
+ detail: { value: "", originalEvent: null }
45
+ }));
46
+ };
47
+ }
48
+ get inputElement() {
49
+ return this._inputElement;
50
+ }
51
+ focus() {
52
+ this._inputElement?.focus();
53
+ }
54
+ blur() {
55
+ this._inputElement?.blur();
56
+ }
57
+ select() {
58
+ this._inputElement?.select();
59
+ }
60
+ setSelectionRange(i, n, l) {
61
+ this._inputElement?.setSelectionRange(i, n, l);
62
+ }
63
+ checkValidity() {
64
+ return this._inputElement?.checkValidity() ?? !0;
65
+ }
66
+ reportValidity() {
67
+ return this._inputElement?.reportValidity() ?? !0;
68
+ }
69
+ setCustomValidity(i) {
70
+ this._inputElement?.setCustomValidity(i), this._internalError = i, this.requestUpdate();
71
+ }
72
+ render() {
73
+ const i = this.error || this._internalError, n = this.showClear && this.value && !this.disabled && !this.readonly, l = `input__field input__field--${this.size}`;
74
+ return u`
75
+ <logosphere-formfield
76
+ .label=${this.label}
77
+ .helper=${this.helper}
78
+ .error=${i}
79
+ .required=${this.required}
80
+ .disabled=${this.disabled}
81
+ .readonly=${this.readonly}
82
+ .placeholder=${this.placeholder}
83
+ .size=${this.size}
84
+ .variant=${this.variant}
85
+ >
86
+ <input
87
+ class="${l}"
88
+ type=${this.type}
89
+ .value=${g(this.value)}
90
+ placeholder=${this.placeholder || o}
91
+ name=${this.name || o}
92
+ autocomplete=${this.autocomplete || o}
93
+ ?required=${this.required}
94
+ ?disabled=${this.disabled}
95
+ ?readonly=${this.readonly}
96
+ minlength=${this.minlength ?? o}
97
+ maxlength=${this.maxlength ?? o}
98
+ pattern=${this.pattern || o}
99
+ min=${this.min ?? o}
100
+ max=${this.max ?? o}
101
+ step=${this.step ?? o}
102
+ @input=${this.handleInput}
103
+ @change=${this.handleChange}
104
+ @keydown=${this.handleKeyDown}
105
+ @keyup=${this.handleKeyUp}
106
+ />
107
+ ${n ? u`
108
+ <button
109
+ type="button"
110
+ slot="suffix"
111
+ class="input__clear-btn"
112
+ @click=${this.handleClear}
113
+ tabindex="-1"
114
+ >
115
+ <ui-icon name="uil-times" size="14"></ui-icon>
116
+ </button>
117
+ ` : o}
118
+ </logosphere-formfield>
119
+ `;
120
+ }
121
+ };
122
+ t.styles = [y`${d(_)}`];
123
+ e([
124
+ m("input")
125
+ ], t.prototype, "_inputElement", 2);
126
+ e([
127
+ r({ type: String })
128
+ ], t.prototype, "value", 2);
129
+ e([
130
+ r({ type: String })
131
+ ], t.prototype, "type", 2);
132
+ e([
133
+ r({ type: String })
134
+ ], t.prototype, "placeholder", 2);
135
+ e([
136
+ r({ type: String })
137
+ ], t.prototype, "name", 2);
138
+ e([
139
+ r({ type: String })
140
+ ], t.prototype, "autocomplete", 2);
141
+ e([
142
+ r({ type: Number })
143
+ ], t.prototype, "minlength", 2);
144
+ e([
145
+ r({ type: Number })
146
+ ], t.prototype, "maxlength", 2);
147
+ e([
148
+ r({ type: String })
149
+ ], t.prototype, "pattern", 2);
150
+ e([
151
+ r({ type: Number })
152
+ ], t.prototype, "min", 2);
153
+ e([
154
+ r({ type: Number })
155
+ ], t.prototype, "max", 2);
156
+ e([
157
+ r({ type: Number })
158
+ ], t.prototype, "step", 2);
159
+ e([
160
+ r({ type: String })
161
+ ], t.prototype, "size", 2);
162
+ e([
163
+ r({ type: String })
164
+ ], t.prototype, "variant", 2);
165
+ e([
166
+ r({ type: Boolean })
167
+ ], t.prototype, "showClear", 2);
168
+ e([
169
+ r({ type: String })
170
+ ], t.prototype, "label", 2);
171
+ e([
172
+ r({ type: String })
173
+ ], t.prototype, "helper", 2);
174
+ e([
175
+ r({ type: String })
176
+ ], t.prototype, "error", 2);
177
+ e([
178
+ r({ type: Boolean })
179
+ ], t.prototype, "required", 2);
180
+ e([
181
+ r({ type: Boolean })
182
+ ], t.prototype, "disabled", 2);
183
+ e([
184
+ r({ type: Boolean })
185
+ ], t.prototype, "readonly", 2);
186
+ e([
187
+ b()
188
+ ], t.prototype, "_internalError", 2);
189
+ t = e([
190
+ v("logosphere-input")
191
+ ], t);
192
+ export {
193
+ t as L
194
+ };
package/dist/input.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./input-CoY1ZcPF.cjs");Object.defineProperty(exports,"LogosphereInput",{enumerable:!0,get:()=>e.LogosphereInput});
package/dist/input.js ADDED
@@ -0,0 +1,4 @@
1
+ import { L as p } from "./input-CxBP0i-3.js";
2
+ export {
3
+ p as LogosphereInput
4
+ };
@@ -0,0 +1,110 @@
1
+ import { unsafeCSS as p, css as h, LitElement as m, html as r } from "lit";
2
+ import { property as n, customElement as f } from "lit/decorators.js";
3
+ const u = ".modal__backdrop{position:fixed;inset:0;z-index:var(--z-index-modal-backdrop);display:flex;align-items:center;justify-content:center;background-color:#00000080;padding:var(--spacing-4);font-family:var(--font-family-base)}.modal__dialog{width:100%;max-width:720px;border-radius:var(--radius-lg);border:1px solid var(--color-border);overflow:hidden;box-shadow:var(--shadow-xl);background-color:var(--color-body-bg);display:grid;grid-template-rows:auto 1fr auto}.modal__header{padding:var(--spacing-4) var(--spacing-4) var(--spacing-2);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--spacing-2)}.modal__header-content{flex:1;min-width:0}.modal__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-body-text);margin:0}.modal__body{padding:var(--spacing-4)}.modal__footer{padding:var(--spacing-4);display:flex;flex-wrap:wrap;gap:var(--spacing-3);justify-content:flex-end;border-top:1px solid var(--color-border)}";
4
+ var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (e, s, i, l) => {
5
+ for (var a = l > 1 ? void 0 : l ? g(s, i) : s, d = e.length - 1, c; d >= 0; d--)
6
+ (c = e[d]) && (a = (l ? c(s, i, a) : c(a)) || a);
7
+ return l && a && v(s, i, a), a;
8
+ };
9
+ let o = class extends m {
10
+ constructor() {
11
+ super(...arguments), this.open = !1, this.title = "", this.closeOnEsc = !0, this.closeOnBackdrop = !0, this.showBack = !1, this.showClose = !1, this.hasFooterContent = !1, this.onKeyDown = (e) => {
12
+ this.open && this.closeOnEsc && e.key === "Escape" && this.setOpen(!1);
13
+ }, this.onBackdropClick = (e) => {
14
+ if (!this.closeOnBackdrop) return;
15
+ const s = this.shadowRoot?.querySelector(".__modal-content");
16
+ s && !s.contains(e.target) && this.setOpen(!1);
17
+ };
18
+ }
19
+ connectedCallback() {
20
+ super.connectedCallback(), document.addEventListener("keydown", this.onKeyDown);
21
+ }
22
+ disconnectedCallback() {
23
+ super.disconnectedCallback(), document.removeEventListener("keydown", this.onKeyDown);
24
+ }
25
+ openModal() {
26
+ this.setOpen(!0);
27
+ }
28
+ closeModal() {
29
+ this.setOpen(!1);
30
+ }
31
+ setOpen(e) {
32
+ this.open !== e && (this.open = e, this.dispatchEvent(new CustomEvent(e ? "modal-open" : "modal-close", { bubbles: !0 })));
33
+ }
34
+ checkFooterContent() {
35
+ const e = this.shadowRoot?.querySelector('slot[name="footer"]');
36
+ e && (this.hasFooterContent = e.assignedNodes().length > 0);
37
+ }
38
+ updated(e) {
39
+ super.updated(e), this.checkFooterContent();
40
+ }
41
+ render() {
42
+ return this.open ? r`
43
+ <div
44
+ class="modal__backdrop"
45
+ role="presentation"
46
+ aria-hidden="false"
47
+ @mousedown=${this.onBackdropClick}
48
+ >
49
+ <div
50
+ class="__modal-content modal__dialog"
51
+ role="dialog"
52
+ aria-modal="true"
53
+ >
54
+ ${this.showBack || this.showClose ? r`
55
+ <div class="modal__header">
56
+ ${this.showBack ? r`
57
+ <logosphere-button variant="text" size="sm" @click=${() => this.setOpen(!1)}>←</logosphere-button>
58
+ ` : ""}
59
+ <div class="modal__header-content">
60
+ ${this.title ? r`<h2 class="modal__title">${this.title}</h2>` : ""}
61
+ <slot name="header"></slot>
62
+ </div>
63
+ ${this.showClose ? r`
64
+ <logosphere-button variant="text" size="sm" @click=${() => this.setOpen(!1)}>×</logosphere-button>
65
+ ` : ""}
66
+ </div>
67
+ ` : ""}
68
+
69
+ <div class="modal__body">
70
+ <slot></slot>
71
+ </div>
72
+
73
+ ${this.hasFooterContent ? r`
74
+ <div class="modal__footer">
75
+ <slot name="footer"></slot>
76
+ </div>
77
+ ` : ""}
78
+ </div>
79
+ </div>
80
+ ` : r``;
81
+ }
82
+ };
83
+ o.styles = [h`${p(u)}`];
84
+ t([
85
+ n({ type: Boolean, reflect: !0 })
86
+ ], o.prototype, "open", 2);
87
+ t([
88
+ n({ type: String })
89
+ ], o.prototype, "title", 2);
90
+ t([
91
+ n({ type: Boolean })
92
+ ], o.prototype, "closeOnEsc", 2);
93
+ t([
94
+ n({ type: Boolean })
95
+ ], o.prototype, "closeOnBackdrop", 2);
96
+ t([
97
+ n({ type: Boolean })
98
+ ], o.prototype, "showBack", 2);
99
+ t([
100
+ n({ type: Boolean })
101
+ ], o.prototype, "showClose", 2);
102
+ t([
103
+ n({ type: Boolean, state: !0 })
104
+ ], o.prototype, "hasFooterContent", 2);
105
+ o = t([
106
+ f("logosphere-modal")
107
+ ], o);
108
+ export {
109
+ o as M
110
+ };
@@ -0,0 +1,39 @@
1
+ "use strict";const e=require("lit"),t=require("lit/decorators.js"),p=".modal__backdrop{position:fixed;inset:0;z-index:var(--z-index-modal-backdrop);display:flex;align-items:center;justify-content:center;background-color:#00000080;padding:var(--spacing-4);font-family:var(--font-family-base)}.modal__dialog{width:100%;max-width:720px;border-radius:var(--radius-lg);border:1px solid var(--color-border);overflow:hidden;box-shadow:var(--shadow-xl);background-color:var(--color-body-bg);display:grid;grid-template-rows:auto 1fr auto}.modal__header{padding:var(--spacing-4) var(--spacing-4) var(--spacing-2);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--spacing-2)}.modal__header-content{flex:1;min-width:0}.modal__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-body-text);margin:0}.modal__body{padding:var(--spacing-4)}.modal__footer{padding:var(--spacing-4);display:flex;flex-wrap:wrap;gap:var(--spacing-3);justify-content:flex-end;border-top:1px solid var(--color-border)}";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,s=(n,o,r,l)=>{for(var a=l>1?void 0:l?h(o,r):o,i=n.length-1,d;i>=0;i--)(d=n[i])&&(a=(l?d(o,r,a):d(a))||a);return l&&a&&c(o,r,a),a};exports.Modal=class extends e.LitElement{constructor(){super(...arguments),this.open=!1,this.title="",this.closeOnEsc=!0,this.closeOnBackdrop=!0,this.showBack=!1,this.showClose=!1,this.hasFooterContent=!1,this.onKeyDown=o=>{this.open&&this.closeOnEsc&&o.key==="Escape"&&this.setOpen(!1)},this.onBackdropClick=o=>{if(!this.closeOnBackdrop)return;const r=this.shadowRoot?.querySelector(".__modal-content");r&&!r.contains(o.target)&&this.setOpen(!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.onKeyDown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.onKeyDown)}openModal(){this.setOpen(!0)}closeModal(){this.setOpen(!1)}setOpen(o){this.open!==o&&(this.open=o,this.dispatchEvent(new CustomEvent(o?"modal-open":"modal-close",{bubbles:!0})))}checkFooterContent(){const o=this.shadowRoot?.querySelector('slot[name="footer"]');o&&(this.hasFooterContent=o.assignedNodes().length>0)}updated(o){super.updated(o),this.checkFooterContent()}render(){return this.open?e.html`
2
+ <div
3
+ class="modal__backdrop"
4
+ role="presentation"
5
+ aria-hidden="false"
6
+ @mousedown=${this.onBackdropClick}
7
+ >
8
+ <div
9
+ class="__modal-content modal__dialog"
10
+ role="dialog"
11
+ aria-modal="true"
12
+ >
13
+ ${this.showBack||this.showClose?e.html`
14
+ <div class="modal__header">
15
+ ${this.showBack?e.html`
16
+ <logosphere-button variant="text" size="sm" @click=${()=>this.setOpen(!1)}>←</logosphere-button>
17
+ `:""}
18
+ <div class="modal__header-content">
19
+ ${this.title?e.html`<h2 class="modal__title">${this.title}</h2>`:""}
20
+ <slot name="header"></slot>
21
+ </div>
22
+ ${this.showClose?e.html`
23
+ <logosphere-button variant="text" size="sm" @click=${()=>this.setOpen(!1)}>×</logosphere-button>
24
+ `:""}
25
+ </div>
26
+ `:""}
27
+
28
+ <div class="modal__body">
29
+ <slot></slot>
30
+ </div>
31
+
32
+ ${this.hasFooterContent?e.html`
33
+ <div class="modal__footer">
34
+ <slot name="footer"></slot>
35
+ </div>
36
+ `:""}
37
+ </div>
38
+ </div>
39
+ `:e.html``}};exports.Modal.styles=[e.css`${e.unsafeCSS(p)}`];s([t.property({type:Boolean,reflect:!0})],exports.Modal.prototype,"open",2);s([t.property({type:String})],exports.Modal.prototype,"title",2);s([t.property({type:Boolean})],exports.Modal.prototype,"closeOnEsc",2);s([t.property({type:Boolean})],exports.Modal.prototype,"closeOnBackdrop",2);s([t.property({type:Boolean})],exports.Modal.prototype,"showBack",2);s([t.property({type:Boolean})],exports.Modal.prototype,"showClose",2);s([t.property({type:Boolean,state:!0})],exports.Modal.prototype,"hasFooterContent",2);exports.Modal=s([t.customElement("logosphere-modal")],exports.Modal);
package/dist/modal.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./modal-DQ8VFL-P.cjs");Object.defineProperty(exports,"Modal",{enumerable:!0,get:()=>e.Modal});
package/dist/modal.js ADDED
@@ -0,0 +1,4 @@
1
+ import { M as r } from "./modal-CnwRIdd8.js";
2
+ export {
3
+ r as Modal
4
+ };
@@ -0,0 +1,10 @@
1
+ import { LitElement } from "lit";
2
+ export declare class Breadcrumb extends LitElement {
3
+ static styles: import("lit").CSSResult[];
4
+ items: {
5
+ label: string;
6
+ href?: string;
7
+ active?: boolean;
8
+ }[];
9
+ render(): import("lit-html").TemplateResult<1>;
10
+ }
@@ -0,0 +1 @@
1
+ export * from "./breadcrumb";
@@ -0,0 +1,16 @@
1
+ import { LitElement } from "lit";
2
+ import "../../atoms/Button/button";
3
+ export declare class Card extends LitElement {
4
+ static styles: import("lit").CSSResult[];
5
+ title: string;
6
+ description: string;
7
+ header: boolean;
8
+ footer: boolean;
9
+ onOk?: () => void;
10
+ onCancel?: () => void;
11
+ okLabel: string;
12
+ cancelLabel: string;
13
+ private handleOk;
14
+ private handleCancel;
15
+ render(): import("lit-html").TemplateResult<1>;
16
+ }
@@ -0,0 +1 @@
1
+ export * from "./card";
@@ -0,0 +1,2 @@
1
+ export { LogosphereInput } from "./input.js";
2
+ export type { InputType, InputSize, InputVariant } from "./input.js";
@@ -0,0 +1,50 @@
1
+ import { LitElement } from "lit";
2
+ import "../../atoms/FormField/formfield.js";
3
+ import "../../shared/icons/ui-icon.js";
4
+ export type InputType = "text" | "password" | "email" | "number" | "tel" | "url" | "search" | "date" | "time" | "datetime-local" | "month" | "week";
5
+ export type InputSize = "default" | "large";
6
+ export type InputVariant = "default" | "subtle";
7
+ export declare class LogosphereInput extends LitElement {
8
+ static styles: import("lit").CSSResult[];
9
+ private _inputElement;
10
+ value: string;
11
+ type: InputType;
12
+ placeholder: string;
13
+ name: string;
14
+ autocomplete: string;
15
+ minlength?: number;
16
+ maxlength?: number;
17
+ pattern: string;
18
+ min?: number;
19
+ max?: number;
20
+ step?: number;
21
+ size: InputSize;
22
+ variant: InputVariant;
23
+ showClear: boolean;
24
+ label: string;
25
+ helper: string;
26
+ error: string;
27
+ required: boolean;
28
+ disabled: boolean;
29
+ readonly: boolean;
30
+ private _internalError;
31
+ get inputElement(): HTMLInputElement;
32
+ focus(): void;
33
+ blur(): void;
34
+ select(): void;
35
+ setSelectionRange(start: number, end: number, direction?: "forward" | "backward" | "none"): void;
36
+ checkValidity(): boolean;
37
+ reportValidity(): boolean;
38
+ setCustomValidity(message: string): void;
39
+ private handleInput;
40
+ private handleChange;
41
+ private handleKeyDown;
42
+ private handleKeyUp;
43
+ private handleClear;
44
+ render(): import("lit-html").TemplateResult<1>;
45
+ }
46
+ declare global {
47
+ interface HTMLElementTagNameMap {
48
+ "logosphere-input": LogosphereInput;
49
+ }
50
+ }
@@ -0,0 +1 @@
1
+ export * from "./popover";
@@ -0,0 +1,33 @@
1
+ import { LitElement } from "lit";
2
+ import { type Placement } from "@popperjs/core";
3
+ export type PopoverTrigger = "click" | "hover" | "both";
4
+ export declare class Popover extends LitElement {
5
+ static styles: import("lit").CSSResult[];
6
+ title: string;
7
+ trigger: PopoverTrigger;
8
+ placement: Placement;
9
+ offset: number;
10
+ open: boolean;
11
+ closeOnOutsideClick: boolean;
12
+ private triggerElement;
13
+ private popperElement?;
14
+ private popperArrowElement?;
15
+ private popperInstance?;
16
+ connectedCallback(): void;
17
+ disconnectedCallback(): void;
18
+ updated(changedProps: Map<string | number | symbol, unknown>): void;
19
+ private handleDocumentClick;
20
+ private setOpen;
21
+ private toggle;
22
+ private handleMouseEnter;
23
+ private handleMouseLeave;
24
+ private updatePopper;
25
+ private getPopperModifiers;
26
+ private destroyPopper;
27
+ render(): import("lit-html").TemplateResult<1>;
28
+ }
29
+ declare global {
30
+ interface HTMLElementTagNameMap {
31
+ "logosphere-popover": Popover;
32
+ }
33
+ }
@@ -0,0 +1 @@
1
+ export * from "./text-area";
@@ -0,0 +1,49 @@
1
+ import { LitElement } from "lit";
2
+ import type { PropertyValues } from "lit";
3
+ import "../../atoms/FormField/formfield.js";
4
+ import "../../shared/icons/ui-icon.js";
5
+ export type TextareaSize = "default" | "large";
6
+ export type TextareaVariant = "default" | "subtle";
7
+ export type TextareaResize = "none" | "vertical" | "horizontal" | "both";
8
+ export declare class TextArea extends LitElement {
9
+ static styles: import("lit").CSSResult[];
10
+ private _textareaElement;
11
+ value: string;
12
+ placeholder: string;
13
+ name: string;
14
+ autocomplete: string;
15
+ minlength?: number;
16
+ maxlength?: number;
17
+ rows: number;
18
+ cols?: number;
19
+ wrap: "soft" | "hard";
20
+ resize: TextareaResize;
21
+ autoResize: boolean;
22
+ size: TextareaSize;
23
+ variant: TextareaVariant;
24
+ showClear: boolean;
25
+ label: string;
26
+ helper: string;
27
+ error: string;
28
+ required: boolean;
29
+ disabled: boolean;
30
+ readonly: boolean;
31
+ private _internalError;
32
+ get textareaElement(): HTMLTextAreaElement;
33
+ focus(): void;
34
+ blur(): void;
35
+ select(): void;
36
+ setSelectionRange(start: number, end: number, direction?: "forward" | "backward" | "none"): void;
37
+ checkValidity(): boolean;
38
+ reportValidity(): boolean;
39
+ setCustomValidity(message: string): void;
40
+ private adjustHeight;
41
+ private handleInput;
42
+ private handleChange;
43
+ private handleKeyDown;
44
+ private handleKeyUp;
45
+ private handleClear;
46
+ updated(changedProperties: PropertyValues): void;
47
+ private getResizeClass;
48
+ render(): import("lit-html").TemplateResult<1>;
49
+ }