@operato/input 9.0.0-beta.29 → 9.0.0-beta.35

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 (15) hide show
  1. package/CHANGELOG.md +48 -0
  2. package/dist/src/ox-input-color.d.ts +3 -2
  3. package/dist/src/ox-input-color.js +85 -75
  4. package/dist/src/ox-input-color.js.map +1 -1
  5. package/dist/src/ox-input-multiple-colors.js +2 -2
  6. package/dist/src/ox-input-multiple-colors.js.map +1 -1
  7. package/dist/src/ox-input-table.d.ts +2 -3
  8. package/dist/src/ox-input-table.js +11 -14
  9. package/dist/src/ox-input-table.js.map +1 -1
  10. package/dist/stories/ox-input-table.stories.d.ts +1 -1
  11. package/dist/stories/ox-input-table.stories.js +2 -2
  12. package/dist/stories/ox-input-table.stories.js.map +1 -1
  13. package/dist/tsconfig.tsbuildinfo +1 -1
  14. package/package.json +7 -7
  15. package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,54 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [9.0.0-beta.35](https://github.com/hatiolab/operato/compare/v9.0.0-beta.34...v9.0.0-beta.35) (2025-02-01)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * change tap => click event (due to polymer library being removed) ([2f1add0](https://github.com/hatiolab/operato/commit/2f1add0ed89214b63acb127de34f65caf3bec9b5))
12
+
13
+
14
+
15
+ ## [9.0.0-beta.34](https://github.com/hatiolab/operato/compare/v9.0.0-beta.33...v9.0.0-beta.34) (2025-01-31)
16
+
17
+ **Note:** Version bump only for package @operato/input
18
+
19
+
20
+
21
+
22
+
23
+ ## [9.0.0-beta.33](https://github.com/hatiolab/operato/compare/v9.0.0-beta.32...v9.0.0-beta.33) (2025-01-31)
24
+
25
+ **Note:** Version bump only for package @operato/input
26
+
27
+
28
+
29
+
30
+
31
+ ## [9.0.0-beta.32](https://github.com/hatiolab/operato/compare/v9.0.0-beta.31...v9.0.0-beta.32) (2025-01-31)
32
+
33
+ **Note:** Version bump only for package @operato/input
34
+
35
+
36
+
37
+
38
+
39
+ ## [9.0.0-beta.31](https://github.com/hatiolab/operato/compare/v9.0.0-beta.30...v9.0.0-beta.31) (2025-01-31)
40
+
41
+
42
+ ### :rocket: New Features
43
+
44
+ * add @operato/pickr ([ab5acaa](https://github.com/hatiolab/operato/commit/ab5acaad73d9a9af236dc4efaf612d7065b69725))
45
+
46
+
47
+ ### :bug: Bug Fix
48
+
49
+ * incorrect path - ox-input-table.stories.ts ([f19fb74](https://github.com/hatiolab/operato/commit/f19fb74bd50ef74ff212ec12311c96010e331996))
50
+ * missing table border styling event ([d5b7556](https://github.com/hatiolab/operato/commit/d5b7556ddc66a4b3ca24f45c025652d26211cb08))
51
+
52
+
53
+
6
54
  ## [9.0.0-beta.29](https://github.com/hatiolab/operato/compare/v9.0.0-beta.28...v9.0.0-beta.29) (2025-01-30)
7
55
 
8
56
 
package/dist/src/ox-input-color.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  /**
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
- import '@simonwep/pickr/dist/themes/classic.min.css';
5
4
  import { PropertyValues } from 'lit';
6
5
  import { OxFormField } from './ox-form-field.js';
7
6
  /**
@@ -163,13 +162,15 @@ Example:
163
162
  </ox-input-color>
164
163
  */
165
164
  export declare class OxInputColor extends OxFormField {
166
- static styles: import("lit").CSSResult;
165
+ static styles: import("lit").CSSResult[];
167
166
  value?: string;
168
167
  properties: any;
169
168
  defaultColor: string;
170
169
  pickrElement: HTMLAnchorElement;
171
170
  pickrButton?: HTMLButtonElement;
172
171
  private pickr;
172
+ constructor();
173
+ ensureStyles(): void;
173
174
  render(): import("lit-html").TemplateResult<1>;
174
175
  disconnectedCallback(): void;
175
176
  connectedCallback(): void;
package/dist/src/ox-input-color.js CHANGED
@@ -2,11 +2,10 @@ import { __decorate } from "tslib";
2
2
  /**
3
3
  * @license Copyright © HatioLab Inc. All rights reserved.
4
4
  */
5
- import '@simonwep/pickr/dist/themes/classic.min.css'; // important!
6
5
  import { css, html } from 'lit';
7
6
  import { customElement, property, query } from 'lit/decorators.js';
8
7
  import tinycolor from 'tinycolor2';
9
- import Pickr from '@simonwep/pickr';
8
+ import { Pickr } from '@operato/pickr';
10
9
  import { OxFormField } from './ox-form-field.js';
11
10
  /**
12
11
  색상을 입력하는데 사용되는 입력 컴포넌트이다.
@@ -167,84 +166,97 @@ Example:
167
166
  </ox-input-color>
168
167
  */
169
168
  let OxInputColor = class OxInputColor extends OxFormField {
170
- constructor() {
171
- super(...arguments);
172
- this.value = undefined;
173
- this.defaultColor = 'black';
174
- this.pickr = null;
175
- }
176
- static { this.styles = css `
177
- :host {
178
- position: relative;
179
- display: inline-flex;
180
- align-items: center;
181
- justify-content: flex-end;
182
- }
169
+ static { this.styles = [
170
+ css `
171
+ :host {
172
+ position: relative;
173
+ display: inline-flex;
174
+ align-items: center;
175
+ justify-content: flex-end;
176
+ }
183
177
 
184
- input[type='text'] {
185
- box-sizing: border-box;
186
- width: 100%;
187
- height: 100%;
188
- border: 0;
189
- font: var(--input-font);
190
- color: var(--md-sys-color-on-primary-container);
191
- padding-right: 26px;
192
- border-radius: inherit;
193
- background-color: inherit;
194
- }
178
+ input[type='text'] {
179
+ box-sizing: border-box;
180
+ width: 100%;
181
+ height: 100%;
182
+ border: 0;
183
+ font: var(--input-font);
184
+ color: var(--md-sys-color-on-primary-container);
185
+ padding-right: 26px;
186
+ border-radius: inherit;
187
+ background-color: inherit;
188
+ }
195
189
 
196
- input:focus {
197
- outline: var(--input-focus-outline, inherit);
198
- border-color: var(--md-sys-color-secondary-fixed-dim);
199
- }
190
+ input:focus {
191
+ outline: var(--input-focus-outline, inherit);
192
+ border-color: var(--md-sys-color-secondary-fixed-dim);
193
+ }
200
194
 
201
- div {
202
- -webkit-appearance: none;
203
- display: flex;
204
- position: absolute;
205
- width: 26px;
206
- height: 100%;
207
- box-sizing: border-box;
208
- align-items: center;
209
- justify-content: center;
210
- }
195
+ div {
196
+ -webkit-appearance: none;
197
+ display: flex;
198
+ position: absolute;
199
+ width: 26px;
200
+ height: 100%;
201
+ box-sizing: border-box;
202
+ align-items: center;
203
+ justify-content: center;
204
+ }
211
205
 
212
- div > button {
213
- position: relative;
214
- width: 60%;
215
- height: 60%;
216
- border: 0.5px solid rgba(0, 0, 0, 0.3);
217
- padding: 0;
218
- color: white;
219
- outline: none;
220
- cursor: pointer;
221
- }
206
+ div > button {
207
+ position: relative;
208
+ width: 60%;
209
+ height: 60%;
210
+ border: 0.5px solid rgba(0, 0, 0, 0.3);
211
+ padding: 0;
212
+ color: white;
213
+ outline: none;
214
+ cursor: pointer;
215
+ }
222
216
 
223
- div > button::before {
224
- position: absolute;
225
- top: 0;
226
- left: 0;
227
- width: 100%;
228
- height: 100%;
229
- background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
230
- content: '';
231
- background-size: 0.5em;
232
- border-radius: 0.15em;
233
- z-index: -1;
234
- }
217
+ div > button::before {
218
+ position: absolute;
219
+ top: 0;
220
+ left: 0;
221
+ width: 100%;
222
+ height: 100%;
223
+ background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
224
+ content: '';
225
+ background-size: 0.5em;
226
+ border-radius: 0.15em;
227
+ z-index: -1;
228
+ }
235
229
 
236
- div > button::after {
237
- position: absolute;
238
- content: '';
239
- top: 0;
240
- left: 0;
241
- height: 100%;
242
- width: 100%;
243
- transition: background 0.3s;
244
- background: var(--pcr-color);
245
- border-radius: 0.15em;
230
+ div > button::after {
231
+ position: absolute;
232
+ content: '';
233
+ top: 0;
234
+ left: 0;
235
+ height: 100%;
236
+ width: 100%;
237
+ transition: background 0.3s;
238
+ background: var(--pcr-color);
239
+ border-radius: 0.15em;
240
+ }
241
+ `
242
+ ]; }
243
+ constructor() {
244
+ super();
245
+ this.value = undefined;
246
+ this.defaultColor = 'black';
247
+ this.pickr = null;
248
+ this.ensureStyles();
249
+ }
250
+ ensureStyles() {
251
+ /* important! */
252
+ const CssUrl = new URL('@operato/pickr/dist/themes/classic.min.css', import.meta.url).href;
253
+ if (!document.querySelector(`link[href="${CssUrl}"]`)) {
254
+ const link = document.createElement('link');
255
+ link.rel = 'stylesheet';
256
+ link.href = CssUrl;
257
+ document.head.appendChild(link);
258
+ }
246
259
  }
247
- `; }
248
260
  render() {
249
261
  return html `
250
262
  <input
@@ -312,8 +324,6 @@ let OxInputColor = class OxInputColor extends OxFormField {
312
324
  }
313
325
  updated(changed) {
314
326
  if (changed.has('value')) {
315
- // var color = tinycolor(this.value || this.defaultColor)
316
- // this.pickr?.setColor(color.toRgbString() || null, true)
317
327
  this.pickr?.setColor(this.value || this.defaultColor, true);
318
328
  this.pickrButton?.style.setProperty('--pcr-color', this.value || this.defaultColor);
319
329
  }
package/dist/src/ox-input-color.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-color.js","sourceRoot":"","sources":["../../src/ox-input-color.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\nimport '@simonwep/pickr/dist/themes/classic.min.css' // important!\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport tinycolor from 'tinycolor2'\nimport Pickr from '@simonwep/pickr'\n\nimport { OxFormField } from './ox-form-field.js'\n\n/**\n색상을 입력하는데 사용되는 입력 컴포넌트이다.\n화면상에는 두개의 입력 필드가 보이며, 하나는 색상값을 키보드로 직접 입력하는 입력 픽드이며,\n다른 하나는 마우스로 클릭하여 컬러 파레트를 팝업 시키는 입력 필드이다.\n컬러 파레트를 팝업시키는 입력필드는 현재 입력된 색상으로 표시된다.\n\n색상값을 직접 입력하는 필드에서는 'white', 'red', 'yellow' 등 색상의미 단어를 사용할 수도 있고,\n#fff, #123456 와 같이 스타일에서 지정하는 방식의 3자리 및 6자리 숫자 표현도 가능하다.\n컬러 파레트를 팝업시키는 입력 필드에서 색상을 지정하게되면, 모두 6자리 숫자 표현방식만을 사용한다.\n\n의미 단어를 지원하는 색상은 다음과 같다.\n\naliceblue : #f0f8ff<br>\nantiquewhite : #faebd7<br>\naqua : #00ffff<br>\naquamarine : #7fffd4<br>\nazure : #f0ffff<br>\nbeige : #f5f5dc<br>\nbisque : #ffe4c4<br>\nblack : #000000<br>\nblanchedalmond : #ffebcd<br>\nblue : #0000ff<br>\nblueviolet : #8a2be2<br>\nbrown : #a52a2a<br>\nburlywood : #deb887<br>\ncadetblue : #5f9ea0<br>\nchartreuse : #7fff00<br>\nchocolate : #d2691e<br>\ncoral : #ff7f50<br>\ncornflowerblue : #6495ed<br>\ncornsilk : #fff8dc<br>\ncrimson : #dc143c<br>\ncyan : #00ffff<br>\ndarkblue : #00008b<br>\ndarkcyan : #008b8b<br>\ndarkgoldenrod : #b8860b<br>\ndarkgray : #a9a9a9<br>\ndarkgreen : #006400<br>\ndarkkhaki : #bdb76b<br>\ndarkmagenta : #8b008b<br>\ndarkolivegreen : #556b2f<br>\ndarkorange : #ff8c00<br>\ndarkorchid : #9932cc<br>\ndarkred : #8b0000<br>\ndarksalmon : #e9967a<br>\ndarkseagreen : #8fbc8f<br>\ndarkslateblue : #483d8b<br>\ndarkslategray : #2f4f4f<br>\ndarkturquoise : #00ced1<br>\ndarkviolet : #9400d3<br>\ndeeppink : #ff1493<br>\ndeepskyblue : #00bfff<br>\ndimgray : #696969<br>\ndodgerblue : #1e90ff<br>\nfirebrick : #b22222<br>\nfloralwhite : #fffaf0<br>\nforestgreen : #228b22<br>\nfuchsia : #ff00ff<br>\ngainsboro : #dcdcdc<br>\nghostwhite : #f8f8ff<br>\ngold : #ffd700<br>\ngoldenrod : #daa520<br>\ngray : #808080<br>\ngreen : #008000<br>\ngreenyellow : #adff2f<br>\nhoneydew : #f0fff0<br>\nhotpink : #ff69b4<br>\nindianred : #cd5c5c<br>\nindigo : #4b0082<br>\nivory : #fffff0<br>\nkhaki : #f0e68c<br>\nlavender : #e6e6fa<br>\nlavenderblush : #fff0f5<br>\nlawngreen : #7cfc00<br>\nlemonchiffon : #fffacd<br>\nlightblue : #add8e6<br>\nlightcoral : #f08080<br>\nlightcyan : #e0ffff<br>\nlightgoldenrodyellow : #fafad2<br>\nlightgrey : #d3d3d3<br>\nlightgreen : #90ee90<br>\nlightpink : #ffb6c1<br>\nlightsalmon : #ffa07a<br>\nlightseagreen : #20b2aa<br>\nlightskyblue : #87cefa<br>\nlightslategray : #778899<br>\nlightsteelblue : #b0c4de<br>\nlightyellow : #ffffe0<br>\nlime : #00ff00<br>\nlimegreen : #32cd32<br>\nlinen : #faf0e6<br>\nmagenta : #ff00ff<br>\nmaroon : #800000<br>\nmediumaquamarine : #66cdaa<br>\nmediumblue : #0000cd<br>\nmediumorchid : #ba55d3<br>\nmediumpurple : #9370d8<br>\nmediumseagreen : #3cb371<br>\nmediumslateblue : #7b68ee<br>\nmediumspringgreen : #00fa9a<br>\nmediumturquoise : #48d1cc<br>\nmediumvioletred : #c71585<br>\nmidnightblue : #191970<br>\nmintcream : #f5fffa<br>\nmistyrose : #ffe4e1<br>\nmoccasin : #ffe4b5<br>\nnavajowhite : #ffdead<br>\nnavy : #000080<br>\noldlace : #fdf5e6<br>\nolive : #808000<br>\nolivedrab : #6b8e23<br>\norange : #ffa500<br>\norangered : #ff4500<br>\norchid : #da70d6<br>\npalegoldenrod : #eee8aa<br>\npalegreen : #98fb98<br>\npaleturquoise : #afeeee<br>\npalevioletred : #d87093<br>\npapayawhip : #ffefd5<br>\npeachpuff : #ffdab9<br>\nperu : #cd853f<br>\npink : #ffc0cb<br>\nplum : #dda0dd<br>\npowderblue : #b0e0e6<br>\npurple : #800080<br>\nred : #ff0000<br>\nrosybrown : #bc8f8f<br>\nroyalblue : #4169e1<br>\nsaddlebrown : #8b4513<br>\nsalmon : #fa8072<br>\nsandybrown : #f4a460<br>\nseagreen : #2e8b57<br>\nseashell : #fff5ee<br>\nsienna : #a0522d<br>\nsilver : #c0c0c0<br>\nskyblue : #87ceeb<br>\nslateblue : #6a5acd<br>\nslategray : #708090<br>\nsnow : #fffafa<br>\nspringgreen : #00ff7f<br>\nsteelblue : #4682b4<br>\ntan : #d2b48c<br>\nteal : #008080<br>\nthistle : #d8bfd8<br>\ntomato : #ff6347<br>\nturquoise : #40e0d0<br>\nviolet : #ee82ee<br>\nwheat : #f5deb3<br>\nwhite : #ffffff<br>\nwhitesmoke : #f5f5f5<br>\nyellow : #ffff00<br>\nyellowgreen : #9acd32<br>\n\nExample:\n\n <ox-input-color .value=${color}>\n </ox-input-color>\n*/\n\n@customElement('ox-input-color')\nexport class OxInputColor extends OxFormField {\n static styles = css`\n :host {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: flex-end;\n }\n\n input[type='text'] {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border: 0;\n font: var(--input-font);\n color: var(--md-sys-color-on-primary-container);\n padding-right: 26px;\n border-radius: inherit;\n background-color: inherit;\n }\n\n input:focus {\n outline: var(--input-focus-outline, inherit);\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n\n div {\n -webkit-appearance: none;\n display: flex;\n position: absolute;\n width: 26px;\n height: 100%;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n }\n\n div > button {\n position: relative;\n width: 60%;\n height: 60%;\n border: 0.5px solid rgba(0, 0, 0, 0.3);\n padding: 0;\n color: white;\n outline: none;\n cursor: pointer;\n }\n\n div > button::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>');\n content: '';\n background-size: 0.5em;\n border-radius: 0.15em;\n z-index: -1;\n }\n\n div > button::after {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n transition: background 0.3s;\n background: var(--pcr-color);\n border-radius: 0.15em;\n }\n `\n\n @property({ type: String }) value?: string = undefined\n @property({ type: Object }) properties: any\n @property({ type: String, attribute: 'default-color' }) defaultColor: string = 'black'\n\n @query('.pickr') pickrElement!: HTMLAnchorElement\n @query('div > button') pickrButton?: HTMLButtonElement\n\n private pickr: Pickr | null = null\n\n render() {\n return html`\n <input\n id=\"text\"\n type=\"text\"\n .value=${this.value || ''}\n @change=${(e: Event) => this.onInputChanged(e)}\n .placeholder=${this.getAttribute('placeholder') || ''}\n ?disabled=${this.disabled}\n />\n\n <div class=\"pickr\"></div>\n `\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n this.pickr?.destroyAndRemove()\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n setTimeout(() => {\n var color = tinycolor(this.value || this.defaultColor, {})\n\n const pickr = Pickr.create({\n el: this.pickrElement,\n theme: 'classic',\n default: color.toRgbString(),\n swatches: [\n 'rgba(244, 67, 54, 1)',\n 'rgba(233, 30, 99, 0.95)',\n 'rgba(156, 39, 176, 0.9)',\n 'rgba(103, 58, 183, 0.85)',\n 'rgba(63, 81, 181, 0.8)',\n 'rgba(33, 150, 243, 0.75)',\n 'rgba(3, 169, 244, 0.7)',\n 'rgba(0, 188, 212, 0.7)',\n 'rgba(0, 150, 136, 0.75)',\n 'rgba(76, 175, 80, 0.8)',\n 'rgba(139, 195, 74, 0.85)',\n 'rgba(205, 220, 57, 0.9)',\n 'rgba(255, 235, 59, 0.95)',\n 'rgba(255, 193, 7, 1)'\n ],\n components: {\n preview: true,\n opacity: true,\n hue: true,\n\n interaction: {\n hex: true,\n rgba: true,\n hsla: true,\n hsva: true,\n cmyk: true,\n input: true,\n clear: true,\n save: true\n }\n }\n })\n\n pickr.on('save', (color: any) => {\n this.setColorString(color ? color.toRGBA().toString() : '')\n pickr.hide()\n })\n\n this.pickr = pickr\n })\n }\n\n updated(changed: PropertyValues<this>) {\n if (changed.has('value')) {\n // var color = tinycolor(this.value || this.defaultColor)\n\n // this.pickr?.setColor(color.toRgbString() || null, true)\n\n this.pickr?.setColor(this.value || this.defaultColor, true)\n this.pickrButton?.style.setProperty('--pcr-color', this.value || this.defaultColor)\n }\n }\n\n private setColorString(colorString: string) {\n if (!colorString) {\n this.value = ''\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n return\n }\n\n var color = tinycolor(colorString || this.defaultColor, {})\n var { withoutAlpha, valueType } = this.properties || {}\n\n if (color.isValid()) {\n if (valueType == 'hex' || withoutAlpha) {\n this.value = color.toHexString()\n } else this.value = color.toRgbString()\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n }\n\n private onInputChanged(e: Event) {\n e.stopPropagation()\n this.value = (e.target as HTMLInputElement).value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n /**\n * 외부에서 호출 가능한 메쏘드임.\n */\n showPicker() {\n if (this.disabled) {\n return\n }\n\n if (this.pickr) {\n this.pickr.show()\n }\n }\n}\n"]}
1
+ {"version":3,"file":"ox-input-color.js","sourceRoot":"","sources":["../../src/ox-input-color.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport tinycolor from 'tinycolor2'\nimport { Pickr } from '@operato/pickr'\n\nimport { OxFormField } from './ox-form-field.js'\n\n/**\n색상을 입력하는데 사용되는 입력 컴포넌트이다.\n화면상에는 두개의 입력 필드가 보이며, 하나는 색상값을 키보드로 직접 입력하는 입력 픽드이며,\n다른 하나는 마우스로 클릭하여 컬러 파레트를 팝업 시키는 입력 필드이다.\n컬러 파레트를 팝업시키는 입력필드는 현재 입력된 색상으로 표시된다.\n\n색상값을 직접 입력하는 필드에서는 'white', 'red', 'yellow' 등 색상의미 단어를 사용할 수도 있고,\n#fff, #123456 와 같이 스타일에서 지정하는 방식의 3자리 및 6자리 숫자 표현도 가능하다.\n컬러 파레트를 팝업시키는 입력 필드에서 색상을 지정하게되면, 모두 6자리 숫자 표현방식만을 사용한다.\n\n의미 단어를 지원하는 색상은 다음과 같다.\n\naliceblue : #f0f8ff<br>\nantiquewhite : #faebd7<br>\naqua : #00ffff<br>\naquamarine : #7fffd4<br>\nazure : #f0ffff<br>\nbeige : #f5f5dc<br>\nbisque : #ffe4c4<br>\nblack : #000000<br>\nblanchedalmond : #ffebcd<br>\nblue : #0000ff<br>\nblueviolet : #8a2be2<br>\nbrown : #a52a2a<br>\nburlywood : #deb887<br>\ncadetblue : #5f9ea0<br>\nchartreuse : #7fff00<br>\nchocolate : #d2691e<br>\ncoral : #ff7f50<br>\ncornflowerblue : #6495ed<br>\ncornsilk : #fff8dc<br>\ncrimson : #dc143c<br>\ncyan : #00ffff<br>\ndarkblue : #00008b<br>\ndarkcyan : #008b8b<br>\ndarkgoldenrod : #b8860b<br>\ndarkgray : #a9a9a9<br>\ndarkgreen : #006400<br>\ndarkkhaki : #bdb76b<br>\ndarkmagenta : #8b008b<br>\ndarkolivegreen : #556b2f<br>\ndarkorange : #ff8c00<br>\ndarkorchid : #9932cc<br>\ndarkred : #8b0000<br>\ndarksalmon : #e9967a<br>\ndarkseagreen : #8fbc8f<br>\ndarkslateblue : #483d8b<br>\ndarkslategray : #2f4f4f<br>\ndarkturquoise : #00ced1<br>\ndarkviolet : #9400d3<br>\ndeeppink : #ff1493<br>\ndeepskyblue : #00bfff<br>\ndimgray : #696969<br>\ndodgerblue : #1e90ff<br>\nfirebrick : #b22222<br>\nfloralwhite : #fffaf0<br>\nforestgreen : #228b22<br>\nfuchsia : #ff00ff<br>\ngainsboro : #dcdcdc<br>\nghostwhite : #f8f8ff<br>\ngold : #ffd700<br>\ngoldenrod : #daa520<br>\ngray : #808080<br>\ngreen : #008000<br>\ngreenyellow : #adff2f<br>\nhoneydew : #f0fff0<br>\nhotpink : #ff69b4<br>\nindianred : #cd5c5c<br>\nindigo : #4b0082<br>\nivory : #fffff0<br>\nkhaki : #f0e68c<br>\nlavender : #e6e6fa<br>\nlavenderblush : #fff0f5<br>\nlawngreen : #7cfc00<br>\nlemonchiffon : #fffacd<br>\nlightblue : #add8e6<br>\nlightcoral : #f08080<br>\nlightcyan : #e0ffff<br>\nlightgoldenrodyellow : #fafad2<br>\nlightgrey : #d3d3d3<br>\nlightgreen : #90ee90<br>\nlightpink : #ffb6c1<br>\nlightsalmon : #ffa07a<br>\nlightseagreen : #20b2aa<br>\nlightskyblue : #87cefa<br>\nlightslategray : #778899<br>\nlightsteelblue : #b0c4de<br>\nlightyellow : #ffffe0<br>\nlime : #00ff00<br>\nlimegreen : #32cd32<br>\nlinen : #faf0e6<br>\nmagenta : #ff00ff<br>\nmaroon : #800000<br>\nmediumaquamarine : #66cdaa<br>\nmediumblue : #0000cd<br>\nmediumorchid : #ba55d3<br>\nmediumpurple : #9370d8<br>\nmediumseagreen : #3cb371<br>\nmediumslateblue : #7b68ee<br>\nmediumspringgreen : #00fa9a<br>\nmediumturquoise : #48d1cc<br>\nmediumvioletred : #c71585<br>\nmidnightblue : #191970<br>\nmintcream : #f5fffa<br>\nmistyrose : #ffe4e1<br>\nmoccasin : #ffe4b5<br>\nnavajowhite : #ffdead<br>\nnavy : #000080<br>\noldlace : #fdf5e6<br>\nolive : #808000<br>\nolivedrab : #6b8e23<br>\norange : #ffa500<br>\norangered : #ff4500<br>\norchid : #da70d6<br>\npalegoldenrod : #eee8aa<br>\npalegreen : #98fb98<br>\npaleturquoise : #afeeee<br>\npalevioletred : #d87093<br>\npapayawhip : #ffefd5<br>\npeachpuff : #ffdab9<br>\nperu : #cd853f<br>\npink : #ffc0cb<br>\nplum : #dda0dd<br>\npowderblue : #b0e0e6<br>\npurple : #800080<br>\nred : #ff0000<br>\nrosybrown : #bc8f8f<br>\nroyalblue : #4169e1<br>\nsaddlebrown : #8b4513<br>\nsalmon : #fa8072<br>\nsandybrown : #f4a460<br>\nseagreen : #2e8b57<br>\nseashell : #fff5ee<br>\nsienna : #a0522d<br>\nsilver : #c0c0c0<br>\nskyblue : #87ceeb<br>\nslateblue : #6a5acd<br>\nslategray : #708090<br>\nsnow : #fffafa<br>\nspringgreen : #00ff7f<br>\nsteelblue : #4682b4<br>\ntan : #d2b48c<br>\nteal : #008080<br>\nthistle : #d8bfd8<br>\ntomato : #ff6347<br>\nturquoise : #40e0d0<br>\nviolet : #ee82ee<br>\nwheat : #f5deb3<br>\nwhite : #ffffff<br>\nwhitesmoke : #f5f5f5<br>\nyellow : #ffff00<br>\nyellowgreen : #9acd32<br>\n\nExample:\n\n <ox-input-color .value=${color}>\n </ox-input-color>\n*/\n\n@customElement('ox-input-color')\nexport class OxInputColor extends OxFormField {\n static styles = [\n css`\n :host {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: flex-end;\n }\n\n input[type='text'] {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border: 0;\n font: var(--input-font);\n color: var(--md-sys-color-on-primary-container);\n padding-right: 26px;\n border-radius: inherit;\n background-color: inherit;\n }\n\n input:focus {\n outline: var(--input-focus-outline, inherit);\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n\n div {\n -webkit-appearance: none;\n display: flex;\n position: absolute;\n width: 26px;\n height: 100%;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n }\n\n div > button {\n position: relative;\n width: 60%;\n height: 60%;\n border: 0.5px solid rgba(0, 0, 0, 0.3);\n padding: 0;\n color: white;\n outline: none;\n cursor: pointer;\n }\n\n div > button::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>');\n content: '';\n background-size: 0.5em;\n border-radius: 0.15em;\n z-index: -1;\n }\n\n div > button::after {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n transition: background 0.3s;\n background: var(--pcr-color);\n border-radius: 0.15em;\n }\n `\n ]\n\n @property({ type: String }) value?: string = undefined\n @property({ type: Object }) properties: any\n @property({ type: String, attribute: 'default-color' }) defaultColor: string = 'black'\n\n @query('.pickr') pickrElement!: HTMLAnchorElement\n @query('div > button') pickrButton?: HTMLButtonElement\n\n private pickr: Pickr | null = null\n\n constructor() {\n super()\n this.ensureStyles()\n }\n\n ensureStyles() {\n /* important! */\n const CssUrl = new URL('@operato/pickr/dist/themes/classic.min.css', import.meta.url).href\n\n if (!document.querySelector(`link[href=\"${CssUrl}\"]`)) {\n const link = document.createElement('link')\n link.rel = 'stylesheet'\n link.href = CssUrl\n document.head.appendChild(link)\n }\n }\n\n render() {\n return html`\n <input\n id=\"text\"\n type=\"text\"\n .value=${this.value || ''}\n @change=${(e: Event) => this.onInputChanged(e)}\n .placeholder=${this.getAttribute('placeholder') || ''}\n ?disabled=${this.disabled}\n />\n\n <div class=\"pickr\"></div>\n `\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n this.pickr?.destroyAndRemove()\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n setTimeout(() => {\n var color = tinycolor(this.value || this.defaultColor, {})\n\n const pickr = Pickr.create({\n el: this.pickrElement,\n theme: 'classic',\n default: color.toRgbString(),\n swatches: [\n 'rgba(244, 67, 54, 1)',\n 'rgba(233, 30, 99, 0.95)',\n 'rgba(156, 39, 176, 0.9)',\n 'rgba(103, 58, 183, 0.85)',\n 'rgba(63, 81, 181, 0.8)',\n 'rgba(33, 150, 243, 0.75)',\n 'rgba(3, 169, 244, 0.7)',\n 'rgba(0, 188, 212, 0.7)',\n 'rgba(0, 150, 136, 0.75)',\n 'rgba(76, 175, 80, 0.8)',\n 'rgba(139, 195, 74, 0.85)',\n 'rgba(205, 220, 57, 0.9)',\n 'rgba(255, 235, 59, 0.95)',\n 'rgba(255, 193, 7, 1)'\n ],\n components: {\n preview: true,\n opacity: true,\n hue: true,\n\n interaction: {\n hex: true,\n rgba: true,\n hsla: true,\n hsva: true,\n cmyk: true,\n input: true,\n clear: true,\n save: true\n }\n }\n })\n\n pickr.on('save', (color: any) => {\n this.setColorString(color ? color.toRGBA().toString() : '')\n pickr.hide()\n })\n\n this.pickr = pickr\n })\n }\n\n updated(changed: PropertyValues<this>) {\n if (changed.has('value')) {\n this.pickr?.setColor(this.value || this.defaultColor, true)\n this.pickrButton?.style.setProperty('--pcr-color', this.value || this.defaultColor)\n }\n }\n\n private setColorString(colorString: string) {\n if (!colorString) {\n this.value = ''\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n return\n }\n\n var color = tinycolor(colorString || this.defaultColor, {})\n var { withoutAlpha, valueType } = this.properties || {}\n\n if (color.isValid()) {\n if (valueType == 'hex' || withoutAlpha) {\n this.value = color.toHexString()\n } else this.value = color.toRgbString()\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n }\n\n private onInputChanged(e: Event) {\n e.stopPropagation()\n this.value = (e.target as HTMLInputElement).value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n /**\n * 외부에서 호출 가능한 메쏘드임.\n */\n showPicker() {\n if (this.disabled) {\n return\n }\n\n if (this.pickr) {\n this.pickr.show()\n }\n }\n}\n"]}
package/dist/src/ox-input-multiple-colors.js CHANGED
@@ -73,7 +73,7 @@ let OxInputMultipleColors = class OxInputMultipleColors extends OxFormField {
73
73
  <div id="colors-container">
74
74
  ${(this.value || []).map((item, index) => html `
75
75
  <div>
76
- <button @tap=${(e) => this._appendEditorColor(e)} data-index=${index} ?disabled=${this.disabled}>
76
+ <button @click=${(e) => this._appendEditorColor(e)} data-index=${index} ?disabled=${this.disabled}>
77
77
  <md-icon>add</md-icon>
78
78
  </button>
79
79
  <ox-input-color .value=${item} ?disabled=${this.disabled}> </ox-input-color>
@@ -81,7 +81,7 @@ let OxInputMultipleColors = class OxInputMultipleColors extends OxFormField {
81
81
  ${(this.value || []).length > 1
82
82
  ? html `
83
83
  <button
84
- @tap=${(e) => this._removeEditorColor(e)}
84
+ @click=${(e) => this._removeEditorColor(e)}
85
85
  data-index=${index}
86
86
  ?disabled=${this.disabled}
87
87
  >
package/dist/src/ox-input-multiple-colors.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-multiple-colors.js","sourceRoot":"","sources":["../../src/ox-input-multiple-colors.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,qBAAqB,CAAA;AAC5B,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAa,MAAM,iBAAiB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD;;;;;;;;;;EAUE;AAGK,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,WAAW;IAA/C;;QA2CsB,UAAK,GAAa,EAAE,CAAA;IAgEjD,CAAC;aA1GQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwClB,AAxCY,CAwCZ;IAOD,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC7E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CACtB,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;6BAEF,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,eAAe,KAAK,cAAc,IAAI,CAAC,QAAQ;;;uCAG7E,IAAI,cAAc,IAAI,CAAC,QAAQ;;gBAEtD,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC;YAC7B,CAAC,CAAC,IAAI,CAAA;;6BAEO,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;mCAClC,KAAK;kCACN,IAAI,CAAC,QAAQ;;;;mBAI5B;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;WAEb,CACF;;KAEJ,CAAA;IACH,CAAC;IAED,eAAe;QACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAM,CAAC,CAAA;IACjE,CAAC;IAED,kBAAkB,CAAC,CAAQ;QACzB,MAAM,GAAG,GAAG,MAAM,CAAE,CAAC,CAAC,MAAsB,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAA;QACxE,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,MAAM,CAAA;QACrC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAA;QACjE,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAA;QAE5B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,kBAAkB,CAAC,CAAQ;QACzB,IAAI,MAAM,GAAG,EAAE,CAAA;QACf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC3C,IAAI,CAAC,IAAI,MAAM,CAAE,CAAC,CAAC,MAAsB,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC;gBACtE,SAAQ;YACV,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;YAC5B,CAAC;QACH,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AA/D0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAAqB;AAEnB;IAA3B,KAAK,CAAC,mBAAmB,CAAC;8DAAiC;AAChC;IAA3B,QAAQ,CAAC,gBAAgB,CAAC;qDAAkC;AA9ClD,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CA2GjC","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-color.js'\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\nimport { random as randomColor, TinyColor } from '@ctrl/tinycolor'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputColor } from './ox-input-color.js'\n\n/**\n색상 배열을 편집하는 컴포넌트이다.\n\n새로운 색상을 추가하고자 할 때는 `+` 버튼을 클릭한다.<br />\n색상을 제거하고자 할 때는 `-` 버튼을 클릭한다.<br />\n\nExample:\n\n <ox-input-multiple-colors values=${values}>\n </ox-input-multiple-colors>\n*/\n\n@customElement('ox-input-multiple-colors')\nexport class OxInputMultipleColors extends OxFormField {\n static styles = css`\n :host {\n display: inline-block;\n\n --md-icon-size: var(--fontsize-default, 14px);\n }\n\n #colors-container > div {\n display: grid;\n grid-template-columns: 34px 1fr 34px;\n grid-gap: var(--spacing-medium);\n align-items: center;\n justify-content: left;\n margin-bottom: var(--spacing-tiny, 2px);\n }\n\n ox-input-color {\n width: 100%;\n }\n\n md-icon {\n pointer-events: none;\n }\n\n button {\n height: 100%;\n border: var(--button-border);\n border-radius: 0;\n background-color: transparent;\n line-height: 0.8;\n color: var(--md-sys-color-on-surface);\n cursor: pointer;\n }\n\n button:hover,\n button:active {\n border: var(--button-activ-border);\n background-color: var(--md-sys-color-on-primary);\n color: var(--md-sys-color-primary);\n }\n `\n\n @property({ type: Array }) value: string[] = []\n\n @query('#colors-container') colorsContainer!: HTMLDivElement\n @queryAll('ox-input-color') colors!: NodeListOf<OxInputColor>\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChanged.bind(this))\n }\n\n render() {\n return html`\n <div id=\"colors-container\">\n ${(this.value || []).map(\n (item, index) => html`\n <div>\n <button @tap=${(e: Event) => this._appendEditorColor(e)} data-index=${index} ?disabled=${this.disabled}>\n <md-icon>add</md-icon>\n </button>\n <ox-input-color .value=${item} ?disabled=${this.disabled}> </ox-input-color>\n\n ${(this.value || []).length > 1\n ? html`\n <button\n @tap=${(e: Event) => this._removeEditorColor(e)}\n data-index=${index}\n ?disabled=${this.disabled}\n >\n <md-icon>remove</md-icon>\n </button>\n `\n : html``}\n </div>\n `\n )}\n </div>\n `\n }\n\n _onValueChanged() {\n this.value = Array.from(this.colors).map(color => color.value!)\n }\n\n _appendEditorColor(e: Event) {\n const idx = Number((e.target as HTMLElement).getAttribute('data-index'))\n const hue = this.value[idx] || '#fff'\n this.value.splice(idx + 1, 0, randomColor({ hue }).toRgbString())\n this.value = [...this.value]\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _removeEditorColor(e: Event) {\n var values = []\n for (var i = 0; i < this.value.length; i++) {\n if (i == Number((e.target as HTMLElement).getAttribute('data-index'))) {\n continue\n } else {\n values.push(this.value[i])\n }\n }\n\n this.value = values\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
1
+ {"version":3,"file":"ox-input-multiple-colors.js","sourceRoot":"","sources":["../../src/ox-input-multiple-colors.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-color.js'\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\nimport { random as randomColor, TinyColor } from '@ctrl/tinycolor'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputColor } from './ox-input-color.js'\n\n/**\n색상 배열을 편집하는 컴포넌트이다.\n\n새로운 색상을 추가하고자 할 때는 `+` 버튼을 클릭한다.<br />\n색상을 제거하고자 할 때는 `-` 버튼을 클릭한다.<br />\n\nExample:\n\n <ox-input-multiple-colors values=${values}>\n </ox-input-multiple-colors>\n*/\n\n@customElement('ox-input-multiple-colors')\nexport class OxInputMultipleColors extends OxFormField {\n static styles = css`\n :host {\n display: inline-block;\n\n --md-icon-size: var(--fontsize-default, 14px);\n }\n\n #colors-container > div {\n display: grid;\n grid-template-columns: 34px 1fr 34px;\n grid-gap: var(--spacing-medium);\n align-items: center;\n justify-content: left;\n margin-bottom: var(--spacing-tiny, 2px);\n }\n\n ox-input-color {\n width: 100%;\n }\n\n md-icon {\n pointer-events: none;\n }\n\n button {\n height: 100%;\n border: var(--button-border);\n border-radius: 0;\n background-color: transparent;\n line-height: 0.8;\n color: var(--md-sys-color-on-surface);\n cursor: pointer;\n }\n\n button:hover,\n button:active {\n border: var(--button-activ-border);\n background-color: var(--md-sys-color-on-primary);\n color: var(--md-sys-color-primary);\n }\n `\n\n @property({ type: Array }) value: string[] = []\n\n @query('#colors-container') colorsContainer!: HTMLDivElement\n @queryAll('ox-input-color') colors!: NodeListOf<OxInputColor>\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChanged.bind(this))\n }\n\n render() {\n return html`\n <div id=\"colors-container\">\n ${(this.value || []).map(\n (item, index) => html`\n <div>\n <button @click=${(e: Event) => this._appendEditorColor(e)} data-index=${index} ?disabled=${this.disabled}>\n <md-icon>add</md-icon>\n </button>\n <ox-input-color .value=${item} ?disabled=${this.disabled}> </ox-input-color>\n\n ${(this.value || []).length > 1\n ? html`\n <button\n @click=${(e: Event) => this._removeEditorColor(e)}\n data-index=${index}\n ?disabled=${this.disabled}\n >\n <md-icon>remove</md-icon>\n </button>\n `\n : html``}\n </div>\n `\n )}\n </div>\n `\n }\n\n _onValueChanged() {\n this.value = Array.from(this.colors).map(color => color.value!)\n }\n\n _appendEditorColor(e: Event) {\n const idx = Number((e.target as HTMLElement).getAttribute('data-index'))\n const hue = this.value[idx] || '#fff'\n this.value.splice(idx + 1, 0, randomColor({ hue }).toRgbString())\n this.value = [...this.value]\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _removeEditorColor(e: Event) {\n var values = []\n for (var i = 0; i < this.value.length; i++) {\n if (i == Number((e.target as HTMLElement).getAttribute('data-index'))) {\n continue\n } else {\n values.push(this.value[i])\n }\n }\n\n this.value = values\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
package/dist/src/ox-input-table.d.ts CHANGED
@@ -19,9 +19,8 @@ export declare class OxInputTable extends OxFormField {
19
19
  borderStyle: BorderStyle;
20
20
  value: any;
21
21
  borderFieldSet: HTMLElement;
22
- firstUpdated(): void;
23
22
  render(): import("lit-html").TemplateResult<1>;
24
- _onClickCell(e: Event): void;
25
- _onClickType(e: Event): void;
23
+ private onClickCell;
24
+ private onClickType;
26
25
  }
27
26
  export {};
package/dist/src/ox-input-table.js CHANGED
@@ -94,19 +94,12 @@ let OxInputTable = class OxInputTable extends OxFormField {
94
94
  `
95
95
  ];
96
96
  }
97
- firstUpdated() {
98
- this.borderFieldSet.addEventListener('change', this._onClickType.bind(this));
99
- }
100
97
  render() {
101
98
  return html `
102
99
  <fieldset id="border-fieldset">
103
100
  <legend><ox-i18n msgid="label.border-style">border style</ox-i18n></legend>
104
101
 
105
- <div
106
- id="border-set"
107
- border-style-btn"
108
- @click=${(e) => this._onClickType(e)}
109
- >
102
+ <div id="border-set" border-style-btn @click=${(e) => this.onClickType(e)}>
110
103
  <md-icon data-value="out">border_outer</md-icon>
111
104
  <md-icon data-value="in">border_inner</md-icon>
112
105
  <md-icon data-value="all">border_all</md-icon>
@@ -120,9 +113,13 @@ let OxInputTable = class OxInputTable extends OxFormField {
120
113
  </div>
121
114
 
122
115
  <div class="property-grid">
123
-
124
- <label> <ox-i18n msgid="label.border-type">border type</ox-i18n> </label>
125
- <ox-select value-key="lineDash" .value=${this.borderStyle} class="custom-editor">
116
+ <label> <ox-i18n msgid="label.border-type">border type</ox-i18n> </label>
117
+ <ox-select
118
+ value-key="lineDash"
119
+ .value=${this.borderStyle}
120
+ class="custom-editor"
121
+ @change=${(e) => (this.borderStyle = e.target.value)}
122
+ >
126
123
  <div class="line-type ${this.borderStyle}" slot="label"></div>
127
124
  <ox-popup-list align-left nowrap>
128
125
  <style>
@@ -159,7 +156,7 @@ let OxInputTable = class OxInputTable extends OxFormField {
159
156
  </div>
160
157
  </fieldset>
161
158
 
162
- <fieldset id="cell-fieldset" @click=${(e) => this._onClickCell(e)}>
159
+ <fieldset id="cell-fieldset" @click=${(e) => this.onClickCell(e)}>
163
160
  <div id="table-event">
164
161
  <div name="merge-cells" class="table-event"><span>merge cells</span></div>
165
162
  <div name="split-cells" class="table-event"><span>split cells</span></div>
@@ -175,7 +172,7 @@ let OxInputTable = class OxInputTable extends OxFormField {
175
172
  </fieldset>
176
173
  `;
177
174
  }
178
- _onClickCell(e) {
175
+ onClickCell(e) {
179
176
  var target = e.target;
180
177
  const event = target?.closest('[table-event]')?.getAttribute('name');
181
178
  if (!event) {
@@ -234,7 +231,7 @@ let OxInputTable = class OxInputTable extends OxFormField {
234
231
  }));
235
232
  e.stopPropagation();
236
233
  }
237
- _onClickType(e) {
234
+ onClickType(e) {
238
235
  var target = e.target;
239
236
  const where = target?.closest('[data-value]')?.getAttribute('data-value');
240
237
  if (!where) {
package/dist/src/ox-input-table.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-table.js","sourceRoot":"","sources":["../../src/ox-input-table.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport './ox-input-color.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { TableEventStyles } from '@operato/styles/table-event-styles.js'\nimport { LineStyles } from '@operato/styles/line-styles.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\ntype BorderStyle =\n | 'solid'\n | 'round-dot'\n | 'square-dot'\n | 'dash'\n | 'dash-dot'\n | 'long-dash'\n | 'long-dash-dot'\n | 'long-dash-dot-dot'\n\n/**\n * 테이블 셀의 좌,우,상,하 경계선의 스타일을 편집하는 컴포넌트이다.\n * Example:\n * <ox-input-table value=${border}>\n * </ox-input-table>\n */\n\n@customElement('ox-input-table')\nexport class OxInputTable extends OxFormField {\n static get styles() {\n return [\n PropertyGridStyles,\n LineStyles,\n TableEventStyles,\n css`\n :host {\n display: block;\n }\n\n fieldset {\n border: none;\n border-bottom: 1px solid #cfd8dc;\n color: var(--md-sys-color-on-primary-container);\n font-size: 12px;\n padding: 0 0 10px 0;\n margin: 0 0 10px 0;\n }\n\n fieldset legend {\n padding: 5px 0 0 5px;\n font-size: 11px;\n color: #e46c2e;\n font-weight: bold;\n text-transform: capitalize;\n }\n\n #border-set {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n grid-gap: 5px;\n margin: 5px 0;\n place-items: center;\n }\n\n #border-set > md-icon {\n margin: 0 0 0 8px;\n width: 32px;\n height: 32px;\n }\n\n #table-event {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n grid-gap: 5px;\n margin: 5px 0;\n place-items: center;\n }\n\n .table-event {\n position: relative;\n width: 100%;\n min-height: 65px;\n place-items: center;\n }\n\n .table-event span {\n position: absolute;\n bottom: 0;\n width: 100%;\n font-size: 0.9em;\n line-height: 1.2;\n text-transform: capitalize;\n text-align: center;\n vertical-align: bottom;\n }\n `\n ]\n }\n\n @property({ type: Number }) borderWidth: number = 1\n @property({ type: String }) borderColor: string = 'black'\n @property({ type: String }) borderStyle: BorderStyle = 'solid'\n @property({ type: Object }) value: any = null\n\n @query('#border-fieldset') borderFieldSet!: HTMLElement\n\n firstUpdated() {\n this.borderFieldSet.addEventListener('change', this._onClickType.bind(this))\n }\n\n render() {\n return html`\n <fieldset id=\"border-fieldset\">\n <legend><ox-i18n msgid=\"label.border-style\">border style</ox-i18n></legend>\n\n <div\n id=\"border-set\"\n border-style-btn\"\n @click=${(e: Event) => this._onClickType(e)}\n >\n <md-icon data-value=\"out\">border_outer</md-icon>\n <md-icon data-value=\"in\">border_inner</md-icon>\n <md-icon data-value=\"all\">border_all</md-icon>\n <md-icon data-value=\"left\">border_left</md-icon>\n <md-icon data-value=\"center\">border_vertical</md-icon>\n <md-icon data-value=\"right\">border_right</md-icon>\n <md-icon data-value=\"top\">border_top</md-icon>\n <md-icon data-value=\"middle\">border_horizontal</md-icon>\n <md-icon data-value=\"bottom\">border_bottom</md-icon>\n <md-icon data-value=\"clear\">border_clear</md-icon>\n </div>\n\n <div class=\"property-grid\">\n\n <label> <ox-i18n msgid=\"label.border-type\">border type</ox-i18n> </label>\n <ox-select value-key=\"lineDash\" .value=${this.borderStyle} class=\"custom-editor\">\n <div class=\"line-type ${this.borderStyle}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"line-type solid\" value=\"solid\" option></div>\n <div class=\"line-type round-dot\" value=\"round-dot\" option></div>\n <div class=\"line-type square-dot\" value=\"square-dot\" option></div>\n <div class=\"line-type dash\" value=\"dash\" option></div>\n <div class=\"line-type dash-dot\" value=\"dash-dot\" option></div>\n <div class=\"line-type long-dash\" value=\"long-dash\" option></div>\n <div class=\"line-type long-dash-dot\" value=\"long-dash-dot\" option></div>\n <div class=\"line-type long-dash-dot-dot\" value=\"long-dash-dot-dot\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label class=\"half-label\"> <md-icon>line_weight</md-icon></label>\n <input\n type=\"number\"\n id=\"border-width\"\n class=\"half-editor\"\n @change=${(e: Event) => (this.borderWidth = Number((e.target as HTMLInputElement).value))}\n .value=${String(this.borderWidth || '')}\n />\n\n <label class=\"half-label\"> <md-icon>border_color</md-icon></label>\n <ox-input-color\n id=\"border-color\"\n class=\"half-editor\"\n @change=${(e: Event) => (this.borderColor = (e.target as any).value)}\n .value=${this.borderColor}\n >\n </ox-input-color>\n </div>\n </fieldset>\n\n <fieldset id=\"cell-fieldset\" @click=${(e: Event) => this._onClickCell(e)}>\n <div id=\"table-event\">\n <div name=\"merge-cells\" class=\"table-event\"><span>merge cells</span></div>\n <div name=\"split-cells\" class=\"table-event\"><span>split cells</span></div>\n <div name=\"delete-row\" class=\"table-event\"><span>delete row</span></div>\n <div name=\"delete-column\" class=\"table-event\"><span>delete column</span></div>\n <div name=\"insert-above\" class=\"table-event\"><span>insert above</span></div>\n <div name=\"insert-below\" class=\"table-event\"><span>insert below</span></div>\n <div name=\"insert-left\" class=\"table-event\"><span>insert left</span></div>\n <div name=\"insert-right\" class=\"table-event\"><span>insert right</span></div>\n <div name=\"distribute-horizontal\" class=\"table-event\"><span>distribute horizontal</span></div>\n <div name=\"distribute-vertical\" class=\"table-event\"><span>distribute vertical</span></div>\n </div>\n </fieldset>\n `\n }\n\n _onClickCell(e: Event) {\n var target = e.target as HTMLElement\n\n const event = target?.closest('[table-event]')?.getAttribute('name')\n if (!event) {\n return\n }\n\n this.dispatchEvent(\n new CustomEvent('i-need-selected', {\n bubbles: true,\n composed: true,\n detail: {\n callback: (selected: any[]) => {\n const table = selected[0].parent\n\n switch (event) {\n case 'delete-row':\n table.deleteRows(selected)\n break\n case 'delete-column':\n table.deleteColumns(selected)\n break\n case 'insert-above':\n table.insertCellsAbove(selected)\n break\n case 'insert-below':\n table.insertCellsBelow(selected)\n break\n case 'insert-left':\n table.insertCellsLeft(selected)\n break\n case 'insert-right':\n table.insertCellsRight(selected)\n break\n case 'merge-cells':\n table.mergeCells(selected)\n break\n case 'split-cells':\n table.splitCells(selected)\n break\n case 'distribute-horizontal':\n table.distributeHorizontal(selected)\n break\n case 'distribute-vertical':\n table.distributeVertical(selected)\n break\n }\n }\n }\n })\n )\n\n this.value = {\n borderWidth: this.borderWidth,\n borderColor: this.borderColor,\n borderStyle: this.borderStyle\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value,\n bubbles: true,\n composed: true\n })\n )\n\n e.stopPropagation()\n }\n\n _onClickType(e: Event) {\n var target = e.target as HTMLElement\n\n const where = target?.closest('[data-value]')?.getAttribute('data-value')\n if (!where) {\n return\n }\n\n this.dispatchEvent(\n new CustomEvent('i-need-selected', {\n bubbles: true,\n composed: true,\n detail: {\n callback: (selected: any[]) => {\n const table = selected[0].parent\n\n table.setCellsStyle(\n selected,\n {\n strokeStyle: this.borderColor,\n lineDash: this.borderStyle,\n lineWidth: this.borderWidth\n },\n where\n )\n }\n }\n })\n )\n\n this.value = {\n borderWidth: this.borderWidth,\n borderColor: this.borderColor,\n borderStyle: this.borderStyle\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value,\n bubbles: true,\n composed: true\n })\n )\n\n e.stopPropagation()\n }\n}\n"]}
1
+ {"version":3,"file":"ox-input-table.js","sourceRoot":"","sources":["../../src/ox-input-table.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport './ox-input-color.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { TableEventStyles } from '@operato/styles/table-event-styles.js'\nimport { LineStyles } from '@operato/styles/line-styles.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxSelect } from './ox-select.js'\n\ntype BorderStyle =\n | 'solid'\n | 'round-dot'\n | 'square-dot'\n | 'dash'\n | 'dash-dot'\n | 'long-dash'\n | 'long-dash-dot'\n | 'long-dash-dot-dot'\n\n/**\n * 테이블 셀의 좌,우,상,하 경계선의 스타일을 편집하는 컴포넌트이다.\n * Example:\n * <ox-input-table value=${border}>\n * </ox-input-table>\n */\n\n@customElement('ox-input-table')\nexport class OxInputTable extends OxFormField {\n static get styles() {\n return [\n PropertyGridStyles,\n LineStyles,\n TableEventStyles,\n css`\n :host {\n display: block;\n }\n\n fieldset {\n border: none;\n border-bottom: 1px solid #cfd8dc;\n color: var(--md-sys-color-on-primary-container);\n font-size: 12px;\n padding: 0 0 10px 0;\n margin: 0 0 10px 0;\n }\n\n fieldset legend {\n padding: 5px 0 0 5px;\n font-size: 11px;\n color: #e46c2e;\n font-weight: bold;\n text-transform: capitalize;\n }\n\n #border-set {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n grid-gap: 5px;\n margin: 5px 0;\n place-items: center;\n }\n\n #border-set > md-icon {\n margin: 0 0 0 8px;\n width: 32px;\n height: 32px;\n }\n\n #table-event {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n grid-gap: 5px;\n margin: 5px 0;\n place-items: center;\n }\n\n .table-event {\n position: relative;\n width: 100%;\n min-height: 65px;\n place-items: center;\n }\n\n .table-event span {\n position: absolute;\n bottom: 0;\n width: 100%;\n font-size: 0.9em;\n line-height: 1.2;\n text-transform: capitalize;\n text-align: center;\n vertical-align: bottom;\n }\n `\n ]\n }\n\n @property({ type: Number }) borderWidth: number = 1\n @property({ type: String }) borderColor: string = 'black'\n @property({ type: String }) borderStyle: BorderStyle = 'solid'\n @property({ type: Object }) value: any = null\n\n @query('#border-fieldset') borderFieldSet!: HTMLElement\n\n render() {\n return html`\n <fieldset id=\"border-fieldset\">\n <legend><ox-i18n msgid=\"label.border-style\">border style</ox-i18n></legend>\n\n <div id=\"border-set\" border-style-btn @click=${(e: Event) => this.onClickType(e)}>\n <md-icon data-value=\"out\">border_outer</md-icon>\n <md-icon data-value=\"in\">border_inner</md-icon>\n <md-icon data-value=\"all\">border_all</md-icon>\n <md-icon data-value=\"left\">border_left</md-icon>\n <md-icon data-value=\"center\">border_vertical</md-icon>\n <md-icon data-value=\"right\">border_right</md-icon>\n <md-icon data-value=\"top\">border_top</md-icon>\n <md-icon data-value=\"middle\">border_horizontal</md-icon>\n <md-icon data-value=\"bottom\">border_bottom</md-icon>\n <md-icon data-value=\"clear\">border_clear</md-icon>\n </div>\n\n <div class=\"property-grid\">\n <label> <ox-i18n msgid=\"label.border-type\">border type</ox-i18n> </label>\n <ox-select\n value-key=\"lineDash\"\n .value=${this.borderStyle}\n class=\"custom-editor\"\n @change=${(e: CustomEvent) => (this.borderStyle = (e.target as OxSelect).value)}\n >\n <div class=\"line-type ${this.borderStyle}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"line-type solid\" value=\"solid\" option></div>\n <div class=\"line-type round-dot\" value=\"round-dot\" option></div>\n <div class=\"line-type square-dot\" value=\"square-dot\" option></div>\n <div class=\"line-type dash\" value=\"dash\" option></div>\n <div class=\"line-type dash-dot\" value=\"dash-dot\" option></div>\n <div class=\"line-type long-dash\" value=\"long-dash\" option></div>\n <div class=\"line-type long-dash-dot\" value=\"long-dash-dot\" option></div>\n <div class=\"line-type long-dash-dot-dot\" value=\"long-dash-dot-dot\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label class=\"half-label\"> <md-icon>line_weight</md-icon></label>\n <input\n type=\"number\"\n id=\"border-width\"\n class=\"half-editor\"\n @change=${(e: Event) => (this.borderWidth = Number((e.target as HTMLInputElement).value))}\n .value=${String(this.borderWidth || '')}\n />\n\n <label class=\"half-label\"> <md-icon>border_color</md-icon></label>\n <ox-input-color\n id=\"border-color\"\n class=\"half-editor\"\n @change=${(e: Event) => (this.borderColor = (e.target as any).value)}\n .value=${this.borderColor}\n >\n </ox-input-color>\n </div>\n </fieldset>\n\n <fieldset id=\"cell-fieldset\" @click=${(e: Event) => this.onClickCell(e)}>\n <div id=\"table-event\">\n <div name=\"merge-cells\" class=\"table-event\"><span>merge cells</span></div>\n <div name=\"split-cells\" class=\"table-event\"><span>split cells</span></div>\n <div name=\"delete-row\" class=\"table-event\"><span>delete row</span></div>\n <div name=\"delete-column\" class=\"table-event\"><span>delete column</span></div>\n <div name=\"insert-above\" class=\"table-event\"><span>insert above</span></div>\n <div name=\"insert-below\" class=\"table-event\"><span>insert below</span></div>\n <div name=\"insert-left\" class=\"table-event\"><span>insert left</span></div>\n <div name=\"insert-right\" class=\"table-event\"><span>insert right</span></div>\n <div name=\"distribute-horizontal\" class=\"table-event\"><span>distribute horizontal</span></div>\n <div name=\"distribute-vertical\" class=\"table-event\"><span>distribute vertical</span></div>\n </div>\n </fieldset>\n `\n }\n\n private onClickCell(e: Event) {\n var target = e.target as HTMLElement\n\n const event = target?.closest('[table-event]')?.getAttribute('name')\n if (!event) {\n return\n }\n\n this.dispatchEvent(\n new CustomEvent('i-need-selected', {\n bubbles: true,\n composed: true,\n detail: {\n callback: (selected: any[]) => {\n const table = selected[0].parent\n\n switch (event) {\n case 'delete-row':\n table.deleteRows(selected)\n break\n case 'delete-column':\n table.deleteColumns(selected)\n break\n case 'insert-above':\n table.insertCellsAbove(selected)\n break\n case 'insert-below':\n table.insertCellsBelow(selected)\n break\n case 'insert-left':\n table.insertCellsLeft(selected)\n break\n case 'insert-right':\n table.insertCellsRight(selected)\n break\n case 'merge-cells':\n table.mergeCells(selected)\n break\n case 'split-cells':\n table.splitCells(selected)\n break\n case 'distribute-horizontal':\n table.distributeHorizontal(selected)\n break\n case 'distribute-vertical':\n table.distributeVertical(selected)\n break\n }\n }\n }\n })\n )\n\n this.value = {\n borderWidth: this.borderWidth,\n borderColor: this.borderColor,\n borderStyle: this.borderStyle\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value,\n bubbles: true,\n composed: true\n })\n )\n\n e.stopPropagation()\n }\n\n private onClickType(e: Event) {\n var target = e.target as HTMLElement\n\n const where = target?.closest('[data-value]')?.getAttribute('data-value')\n if (!where) {\n return\n }\n\n this.dispatchEvent(\n new CustomEvent('i-need-selected', {\n bubbles: true,\n composed: true,\n detail: {\n callback: (selected: any[]) => {\n const table = selected[0].parent\n\n table.setCellsStyle(\n selected,\n {\n strokeStyle: this.borderColor,\n lineDash: this.borderStyle,\n lineWidth: this.borderWidth\n },\n where\n )\n }\n }\n })\n )\n\n this.value = {\n borderWidth: this.borderWidth,\n borderColor: this.borderColor,\n borderStyle: this.borderStyle\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value,\n bubbles: true,\n composed: true\n })\n )\n\n e.stopPropagation()\n }\n}\n"]}
package/dist/stories/ox-input-table.stories.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { TemplateResult } from 'lit';
2
- import '../src/input/ox-input-table.js';
2
+ import '../src/ox-input-table.js';
3
3
  declare const _default: {
4
4
  title: string;
5
5
  component: string;
package/dist/stories/ox-input-table.stories.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { html } from 'lit';
2
- import '../src/input/ox-input-table.js';
3
2
  import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
3
+ import '../src/ox-input-table.js';
4
4
  export default {
5
- title: 'OxInputTable',
5
+ title: 'ox-input-table',
6
6
  component: 'ox-input-table',
7
7
  argTypes: {
8
8
  value: { control: 'object' }
package/dist/stories/ox-input-table.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-table.stories.js","sourceRoot":"","sources":["../../stories/ox-input-table.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,gCAAgC,CAAA;AACvC,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;MAsBzD,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;2BAcJ,KAAK;CAC/B,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE;QACL,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,kBAAkB;QACxB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,iBAAiB;QACxB,MAAM,EAAE,iBAAiB;QACzB,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE;YACN,GAAG,EAAE;gBACH,WAAW,EAAE,MAAM;gBACnB,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,CAAC;aACb;YACD,IAAI,EAAE;gBACJ,WAAW,EAAE,MAAM;gBACnB,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,CAAC;aACb;YACD,MAAM,EAAE;gBACN,WAAW,EAAE,MAAM;gBACnB,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,CAAC;aACb;YACD,KAAK,EAAE;gBACL,WAAW,EAAE,MAAM;gBACnB,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,CAAC;aACb;SACF;QACD,KAAK,EAAE,EAAE;QACT,SAAS,EAAE,CAAC;KACb;CACF,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport '../src/input/ox-input-table.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n title: 'OxInputTable',\n component: 'ox-input-table',\n argTypes: {\n value: { control: 'object' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n value?: any\n}\n\nconst Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/help-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n #place {\n width: 100%;\n height: 500px;\n text-align: center;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <ox-input-table .value=${value}> </ox-input-table>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n value: {\n type: 'table-cell',\n left: 290.42944785276075,\n top: 0,\n width: 96.80981595092024,\n height: 62.02453987730057,\n textWrap: true,\n border: {\n top: {\n strokeStyle: '#999',\n lineDash: 'solid',\n lineWidth: 1\n },\n left: {\n strokeStyle: '#999',\n lineDash: 'solid',\n lineWidth: 1\n },\n bottom: {\n strokeStyle: '#999',\n lineDash: 'solid',\n lineWidth: 1\n },\n right: {\n strokeStyle: '#999',\n lineDash: 'solid',\n lineWidth: 1\n }\n },\n refid: 12,\n dataIndex: 0\n }\n}\n"]}
1
+ {"version":3,"file":"ox-input-table.stories.js","sourceRoot":"","sources":["../../stories/ox-input-table.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAC7F,OAAO,0BAA0B,CAAA;AAEjC,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;MAsBzD,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;2BAcJ,KAAK;CAC/B,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE;QACL,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,kBAAkB;QACxB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,iBAAiB;QACxB,MAAM,EAAE,iBAAiB;QACzB,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE;YACN,GAAG,EAAE;gBACH,WAAW,EAAE,MAAM;gBACnB,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,CAAC;aACb;YACD,IAAI,EAAE;gBACJ,WAAW,EAAE,MAAM;gBACnB,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,CAAC;aACb;YACD,MAAM,EAAE;gBACN,WAAW,EAAE,MAAM;gBACnB,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,CAAC;aACb;YACD,KAAK,EAAE;gBACL,WAAW,EAAE,MAAM;gBACnB,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,CAAC;aACb;SACF;QACD,KAAK,EAAE,EAAE;QACT,SAAS,EAAE,CAAC;KACb;CACF,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\nimport '../src/ox-input-table.js'\n\nexport default {\n title: 'ox-input-table',\n component: 'ox-input-table',\n argTypes: {\n value: { control: 'object' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n value?: any\n}\n\nconst Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/help-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n #place {\n width: 100%;\n height: 500px;\n text-align: center;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <ox-input-table .value=${value}> </ox-input-table>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n value: {\n type: 'table-cell',\n left: 290.42944785276075,\n top: 0,\n width: 96.80981595092024,\n height: 62.02453987730057,\n textWrap: true,\n border: {\n top: {\n strokeStyle: '#999',\n lineDash: 'solid',\n lineWidth: 1\n },\n left: {\n strokeStyle: '#999',\n lineDash: 'solid',\n lineWidth: 1\n },\n bottom: {\n strokeStyle: '#999',\n lineDash: 'solid',\n lineWidth: 1\n },\n right: {\n strokeStyle: '#999',\n lineDash: 'solid',\n lineWidth: 1\n }\n },\n refid: 12,\n dataIndex: 0\n }\n}\n"]}