@operato/board 9.0.0-beta.5 → 9.0.0-beta.52

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 (97) hide show
  1. package/CHANGELOG.md +333 -0
  2. package/dist/src/component/etc.js +17 -0
  3. package/dist/src/component/etc.js.map +1 -1
  4. package/dist/src/modeller/component-toolbar/component-menu.d.ts +1 -1
  5. package/dist/src/modeller/component-toolbar/component-toolbar.d.ts +1 -1
  6. package/dist/src/modeller/edit-toolbar.js +21 -19
  7. package/dist/src/modeller/edit-toolbar.js.map +1 -1
  8. package/dist/src/modeller/{property-sidebar/property-sidebar.d.ts → property-sidebar.d.ts} +18 -17
  9. package/dist/src/modeller/{property-sidebar/property-sidebar.js → property-sidebar.js} +46 -31
  10. package/dist/src/modeller/property-sidebar.js.map +1 -0
  11. package/dist/src/ox-board-component-info.js +1 -1
  12. package/dist/src/ox-board-component-info.js.map +1 -1
  13. package/dist/src/ox-board-modeller.d.ts +2 -2
  14. package/dist/src/ox-board-modeller.js +1 -13
  15. package/dist/src/ox-board-modeller.js.map +1 -1
  16. package/dist/src/ox-board-viewer.js +17 -5
  17. package/dist/src/ox-board-viewer.js.map +1 -1
  18. package/dist/src/player/ox-board-wrapper.js +2 -1
  19. package/dist/src/player/ox-board-wrapper.js.map +1 -1
  20. package/dist/tsconfig.tsbuildinfo +1 -1
  21. package/icons/components/pdf-page.png +0 -0
  22. package/package.json +15 -16
  23. package/dist/src/modeller/property-sidebar/abstract-property.d.ts +0 -10
  24. package/dist/src/modeller/property-sidebar/abstract-property.js +0 -55
  25. package/dist/src/modeller/property-sidebar/abstract-property.js.map +0 -1
  26. package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.d.ts +0 -58
  27. package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js +0 -443
  28. package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js.map +0 -1
  29. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-map.d.ts +0 -6
  30. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-map.js +0 -20
  31. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-map.js.map +0 -1
  32. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-range.d.ts +0 -6
  33. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-range.js +0 -20
  34. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-range.js.map +0 -1
  35. package/dist/src/modeller/property-sidebar/data-binding/data-binding.d.ts +0 -44
  36. package/dist/src/modeller/property-sidebar/data-binding/data-binding.js +0 -458
  37. package/dist/src/modeller/property-sidebar/data-binding/data-binding.js.map +0 -1
  38. package/dist/src/modeller/property-sidebar/effects/effects-shared-style.d.ts +0 -4
  39. package/dist/src/modeller/property-sidebar/effects/effects-shared-style.js +0 -61
  40. package/dist/src/modeller/property-sidebar/effects/effects-shared-style.js.map +0 -1
  41. package/dist/src/modeller/property-sidebar/effects/effects.d.ts +0 -24
  42. package/dist/src/modeller/property-sidebar/effects/effects.js +0 -64
  43. package/dist/src/modeller/property-sidebar/effects/effects.js.map +0 -1
  44. package/dist/src/modeller/property-sidebar/effects/property-animation.d.ts +0 -23
  45. package/dist/src/modeller/property-sidebar/effects/property-animation.js +0 -138
  46. package/dist/src/modeller/property-sidebar/effects/property-animation.js.map +0 -1
  47. package/dist/src/modeller/property-sidebar/effects/property-animations.d.ts +0 -22
  48. package/dist/src/modeller/property-sidebar/effects/property-animations.js +0 -89
  49. package/dist/src/modeller/property-sidebar/effects/property-animations.js.map +0 -1
  50. package/dist/src/modeller/property-sidebar/effects/property-event-hover.d.ts +0 -21
  51. package/dist/src/modeller/property-sidebar/effects/property-event-hover.js +0 -182
  52. package/dist/src/modeller/property-sidebar/effects/property-event-hover.js.map +0 -1
  53. package/dist/src/modeller/property-sidebar/effects/property-event-tap.d.ts +0 -36
  54. package/dist/src/modeller/property-sidebar/effects/property-event-tap.js +0 -244
  55. package/dist/src/modeller/property-sidebar/effects/property-event-tap.js.map +0 -1
  56. package/dist/src/modeller/property-sidebar/effects/property-event.d.ts +0 -22
  57. package/dist/src/modeller/property-sidebar/effects/property-event.js +0 -64
  58. package/dist/src/modeller/property-sidebar/effects/property-event.js.map +0 -1
  59. package/dist/src/modeller/property-sidebar/effects/property-shadow.d.ts +0 -23
  60. package/dist/src/modeller/property-sidebar/effects/property-shadow.js +0 -103
  61. package/dist/src/modeller/property-sidebar/effects/property-shadow.js.map +0 -1
  62. package/dist/src/modeller/property-sidebar/effects/value-converter.d.ts +0 -1
  63. package/dist/src/modeller/property-sidebar/effects/value-converter.js +0 -21
  64. package/dist/src/modeller/property-sidebar/effects/value-converter.js.map +0 -1
  65. package/dist/src/modeller/property-sidebar/inspector/inspector.d.ts +0 -27
  66. package/dist/src/modeller/property-sidebar/inspector/inspector.js +0 -355
  67. package/dist/src/modeller/property-sidebar/inspector/inspector.js.map +0 -1
  68. package/dist/src/modeller/property-sidebar/property-shared-style.d.ts +0 -4
  69. package/dist/src/modeller/property-sidebar/property-shared-style.js +0 -135
  70. package/dist/src/modeller/property-sidebar/property-shared-style.js.map +0 -1
  71. package/dist/src/modeller/property-sidebar/property-sidebar.js.map +0 -1
  72. package/dist/src/modeller/property-sidebar/shapes/box-padding-editor-styles.d.ts +0 -1
  73. package/dist/src/modeller/property-sidebar/shapes/box-padding-editor-styles.js +0 -94
  74. package/dist/src/modeller/property-sidebar/shapes/box-padding-editor-styles.js.map +0 -1
  75. package/dist/src/modeller/property-sidebar/shapes/shapes.d.ts +0 -26
  76. package/dist/src/modeller/property-sidebar/shapes/shapes.js +0 -430
  77. package/dist/src/modeller/property-sidebar/shapes/shapes.js.map +0 -1
  78. package/dist/src/modeller/property-sidebar/specifics/specific-properties-builder.d.ts +0 -16
  79. package/dist/src/modeller/property-sidebar/specifics/specific-properties-builder.js +0 -138
  80. package/dist/src/modeller/property-sidebar/specifics/specific-properties-builder.js.map +0 -1
  81. package/dist/src/modeller/property-sidebar/specifics/specifics.d.ts +0 -25
  82. package/dist/src/modeller/property-sidebar/specifics/specifics.js +0 -84
  83. package/dist/src/modeller/property-sidebar/specifics/specifics.js.map +0 -1
  84. package/dist/src/modeller/property-sidebar/styles/styles.d.ts +0 -21
  85. package/dist/src/modeller/property-sidebar/styles/styles.js +0 -559
  86. package/dist/src/modeller/property-sidebar/styles/styles.js.map +0 -1
  87. package/dist/stories/property-data-binding.stories.d.ts +0 -20
  88. package/dist/stories/property-data-binding.stories.js +0 -19
  89. package/dist/stories/property-data-binding.stories.js.map +0 -1
  90. package/icons/icon-properties-arrow-type.png +0 -0
  91. package/icons/icon-properties-gradient-direction.png +0 -0
  92. package/icons/icon-properties-label.png +0 -0
  93. package/icons/icon-properties-line-type.png +0 -0
  94. package/icons/icon-properties-padding.png +0 -0
  95. package/icons/icon-properties-ratio.png +0 -0
  96. package/icons/icon-properties-table.png +0 -0
  97. package/icons/icon-shell-inspector.png +0 -0
@@ -1,6 +0,0 @@
1
- import { OxInputValueMap } from '@operato/input';
2
- import '@operato/attachment/ox-attachment-selector.js';
3
- export declare class DataBindingValueMap extends OxInputValueMap {
4
- static styles: import("lit").CSSResult;
5
- valueInputTemplate(value?: any): import("lit-html").TemplateResult<1>;
6
- }
@@ -1,20 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import { html } from 'lit';
3
- import { customElement } from 'lit/decorators.js';
4
- import { ifDefined } from 'lit/directives/if-defined.js';
5
- import { OxInputValueMap } from '@operato/input';
6
- import '@operato/attachment/ox-attachment-selector.js';
7
- let DataBindingValueMap = class DataBindingValueMap extends OxInputValueMap {
8
- valueInputTemplate(value) {
9
- if (this.valuetype == 'attachment') {
10
- return html `<ox-attachment-selector data-value value=${ifDefined(value)}></ox-attachment-selector>`;
11
- }
12
- return super.valueInputTemplate(value);
13
- }
14
- };
15
- DataBindingValueMap.styles = OxInputValueMap.styles;
16
- DataBindingValueMap = __decorate([
17
- customElement('data-binding-value-map')
18
- ], DataBindingValueMap);
19
- export { DataBindingValueMap };
20
- //# sourceMappingURL=data-binding-value-map.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"data-binding-value-map.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/data-binding/data-binding-value-map.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAEhD,OAAO,+CAA+C,CAAA;AAG/C,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,eAAe;IAGtD,kBAAkB,CAAC,KAAW;QAC5B,IAAI,IAAI,CAAC,SAAS,IAAI,YAAY,EAAE,CAAC;YACnC,OAAO,IAAI,CAAA,4CAA4C,SAAS,CAAC,KAAK,CAAC,4BAA4B,CAAA;QACrG,CAAC;QACD,OAAO,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAA;IACxC,CAAC;;AAPM,0BAAM,GAAG,eAAe,CAAC,MAAM,AAAzB,CAAyB;AAD3B,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAS/B","sourcesContent":["import { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OxInputValueMap } from '@operato/input'\n\nimport '@operato/attachment/ox-attachment-selector.js'\n\n@customElement('data-binding-value-map')\nexport class DataBindingValueMap extends OxInputValueMap {\n static styles = OxInputValueMap.styles\n\n valueInputTemplate(value?: any) {\n if (this.valuetype == 'attachment') {\n return html`<ox-attachment-selector data-value value=${ifDefined(value)}></ox-attachment-selector>`\n }\n return super.valueInputTemplate(value)\n }\n}\n"]}
@@ -1,6 +0,0 @@
1
- import { OxInputValueRange } from '@operato/input';
2
- import '@operato/attachment/ox-attachment-selector.js';
3
- export declare class DataBindingValueRange extends OxInputValueRange {
4
- static styles: import("lit").CSSResult;
5
- valueInputTemplate(value?: any): import("lit-html").TemplateResult<1>;
6
- }
@@ -1,20 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import { html } from 'lit';
3
- import { customElement } from 'lit/decorators.js';
4
- import { ifDefined } from 'lit/directives/if-defined.js';
5
- import { OxInputValueRange } from '@operato/input';
6
- import '@operato/attachment/ox-attachment-selector.js';
7
- let DataBindingValueRange = class DataBindingValueRange extends OxInputValueRange {
8
- valueInputTemplate(value) {
9
- if (this.valuetype == 'attachment') {
10
- return html `<ox-attachment-selector data-value value=${ifDefined(value)}></ox-attachment-selector>`;
11
- }
12
- return super.valueInputTemplate(value);
13
- }
14
- };
15
- DataBindingValueRange.styles = OxInputValueRange.styles;
16
- DataBindingValueRange = __decorate([
17
- customElement('data-binding-value-range')
18
- ], DataBindingValueRange);
19
- export { DataBindingValueRange };
20
- //# sourceMappingURL=data-binding-value-range.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"data-binding-value-range.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/data-binding/data-binding-value-range.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,+CAA+C,CAAA;AAG/C,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,iBAAiB;IAG1D,kBAAkB,CAAC,KAAW;QAC5B,IAAI,IAAI,CAAC,SAAS,IAAI,YAAY,EAAE,CAAC;YACnC,OAAO,IAAI,CAAA,4CAA4C,SAAS,CAAC,KAAK,CAAC,4BAA4B,CAAA;QACrG,CAAC;QACD,OAAO,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAA;IACxC,CAAC;;AAPM,4BAAM,GAAG,iBAAiB,CAAC,MAAM,AAA3B,CAA2B;AAD7B,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CASjC","sourcesContent":["import { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OxInputValueRange } from '@operato/input'\n\nimport '@operato/attachment/ox-attachment-selector.js'\n\n@customElement('data-binding-value-range')\nexport class DataBindingValueRange extends OxInputValueRange {\n static styles = OxInputValueRange.styles\n\n valueInputTemplate(value?: any) {\n if (this.valuetype == 'attachment') {\n return html`<ox-attachment-selector data-value value=${ifDefined(value)}></ox-attachment-selector>`\n }\n return super.valueInputTemplate(value)\n }\n}\n"]}
@@ -1,44 +0,0 @@
1
- /**
2
- * @license Copyright © HatioLab Inc. All rights reserved.
3
- */
4
- import '@material/web/icon/icon.js';
5
- import '@operato/help/ox-title-with-help.js';
6
- import '@operato/input/ox-buttons-radio.js';
7
- import '@operato/input/ox-input-data.js';
8
- import '@operato/i18n/ox-i18n.js';
9
- import { PropertyValues } from 'lit';
10
- import { Properties, Scene } from '@hatiolab/things-scene';
11
- import { AbstractProperty } from '../abstract-property.js';
12
- import { DataBindingMapper } from './data-binding-mapper.js';
13
- declare const PropertyDataBinding_base: typeof AbstractProperty & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types.js").ScopedElementsHost>;
14
- export declare class PropertyDataBinding extends PropertyDataBinding_base {
15
- static styles: import("lit").CSSResult[];
16
- value?: Properties;
17
- scene?: Scene;
18
- mappingIndex: number;
19
- _afterRender?: Function | null;
20
- _dataExpanded: boolean;
21
- tabs: HTMLElement;
22
- tabNavLeftButton: HTMLElement;
23
- tabNavRightButton: HTMLElement;
24
- private mapping;
25
- get mappings(): any;
26
- firstUpdated(): void;
27
- updated(changes: PropertyValues<this>): void;
28
- static get scopedElements(): {
29
- 'data-binding-mapper': typeof DataBindingMapper;
30
- };
31
- render(): import("lit-html").TemplateResult<1>;
32
- _setMappingIndex(idx: number): void;
33
- _clearDataBindingMapper(): void;
34
- _copyDataBindingMapper(): void;
35
- _pasteDataBindingMapper(): Promise<void>;
36
- _onValueChanged(): Promise<void>;
37
- _onValueChange(e: Event): void;
38
- get tabContainer(): HTMLElement;
39
- _onMappingChanged(e: CustomEvent): Promise<void>;
40
- _onTabScroll(): void;
41
- _onTabScrollNavLeft(): void;
42
- _onTabScrollNavRight(): void;
43
- }
44
- export {};
@@ -1,458 +0,0 @@
1
- /**
2
- * @license Copyright © HatioLab Inc. All rights reserved.
3
- */
4
- import { __decorate } from "tslib";
5
- import '@material/web/icon/icon.js';
6
- import '@operato/help/ox-title-with-help.js';
7
- import '@operato/input/ox-buttons-radio.js';
8
- import '@operato/input/ox-input-data.js';
9
- import '@operato/i18n/ox-i18n.js';
10
- import { css, html } from 'lit';
11
- import { property, query, state } from 'lit/decorators.js';
12
- import { ScopedElementsMixin } from '@open-wc/scoped-elements';
13
- import { AbstractProperty } from '../abstract-property.js';
14
- import { PropertySharedStyle } from '../property-shared-style.js';
15
- import { DataBindingMapper } from './data-binding-mapper.js';
16
- var clipboard = '{}';
17
- const PROPS = [
18
- '',
19
- 'text',
20
- ['fillStyle', 'fill style'],
21
- ['strokeStyle', 'stroke style'],
22
- ['fontColor', 'font color'],
23
- 'value',
24
- 'data',
25
- 'source',
26
- 'hidden',
27
- 'started',
28
- 'play',
29
- ['ref', 'reference'],
30
- 'action',
31
- 'options',
32
- 'rotate',
33
- 'dimension',
34
- 'location',
35
- 'accessor',
36
- ['tap', '(tap)'],
37
- '(action)'
38
- ].map(prop => {
39
- return typeof prop == 'string' ? { name: prop, label: prop } : { name: prop[0], label: prop[1] };
40
- });
41
- export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
42
- constructor() {
43
- super(...arguments);
44
- this.mappingIndex = 0;
45
- this._dataExpanded = false;
46
- this.mapping = {};
47
- }
48
- get mappings() {
49
- var _a;
50
- return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.mappings) || [];
51
- }
52
- firstUpdated() {
53
- this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
54
- this.tabContainer.addEventListener('scroll', () => {
55
- this._onTabScroll();
56
- });
57
- }
58
- updated(changes) {
59
- if (changes.has('value')) {
60
- this._onValueChanged();
61
- }
62
- }
63
- static get scopedElements() {
64
- return {
65
- 'data-binding-mapper': DataBindingMapper
66
- };
67
- }
68
- render() {
69
- const value = this.value || {
70
- mappings: []
71
- };
72
- return html `
73
- <fieldset>
74
- <legend>
75
- <ox-title-with-help topic="board-modeller/data-binding" msgid="label.identifier"
76
- >identifier</ox-title-with-help
77
- >
78
- </legend>
79
- <div class="property-grid">
80
- <label> <ox-i18n msgid="label.id">ID</ox-i18n> </label>
81
- <input value-key="id" .value=${value.id || ''} />
82
-
83
- <label> <ox-i18n msgid="label.class">Class</ox-i18n> </label>
84
- <input value-key="class" .value=${value.class || ''} />
85
-
86
- <label> <ox-i18n msgid="label.tag">Tag</ox-i18n> </label>
87
- <input value-key="tag" .value=${value.tag || ''} />
88
-
89
- <label> <ox-i18n msgid="label.template-prefix">Template Prefix</ox-i18n> </label>
90
- <input value-key="templatePrefix" .value=${value.templatePrefix || ''} />
91
-
92
- <div class="checkbox-row">
93
- <input id="checkbox-ndns" type="checkbox" value-key="ndns" .checked=${value.ndns} />
94
- <label for="checkbox-ndns"> <ox-i18n msgid="label.ndns">No Data No Show</ox-i18n> </label>
95
- </div>
96
-
97
- <div class="checkbox-row">
98
- <input id="checkbox-sensitive" type="checkbox" value-key="sensitive" .checked=${value.sensitive} />
99
- <label for="checkbox-sensitive">
100
- <ox-i18n msgid="label.intent-sensitive">Intent Sensitive</ox-i18n>
101
- </label>
102
- </div>
103
-
104
- <div class="checkbox-row">
105
- <input id="checkbox-persistent" type="checkbox" value-key="persistent" .checked=${value.persistent} />
106
- <label for="checkbox-persistent">
107
- <ox-i18n msgid="label.persistent-data">Persistent Data</ox-i18n>
108
- </label>
109
- </div>
110
- </div>
111
- </fieldset>
112
-
113
- <fieldset collapsable ?collapsed=${!this._dataExpanded}>
114
- <legend>
115
- <ox-title-with-help topic="board-modeller/initial-data" msgid="label.initial-data"
116
- >initial value</ox-title-with-help
117
- >
118
- <md-icon
119
- @click=${() => {
120
- this._dataExpanded = !this._dataExpanded;
121
- }}
122
- >${this._dataExpanded ? 'expand_less' : 'expand_more'}</md-icon
123
- >
124
- </legend>
125
- <ox-input-data value-key="data" .value=${value.data}> </ox-input-data>
126
- </fieldset>
127
-
128
- <fieldset>
129
- <legend>
130
- <ox-title-with-help topic="board-modeller/data-spread" msgid="label.data-spread"
131
- >Data Spread</ox-title-with-help
132
- >
133
- </legend>
134
-
135
- <div id="tab-header">
136
- <md-icon
137
- id="tab-nav-left-button"
138
- @click=${() => {
139
- this._onTabScrollNavLeft();
140
- }}
141
- disabled
142
- >chevron_left</md-icon
143
- >
144
-
145
- <ox-buttons-radio
146
- id="tabs"
147
- .value=${String(this.mappingIndex)}
148
- @change=${(e) => {
149
- e.stopPropagation();
150
- this._setMappingIndex(e.target.value);
151
- }}
152
- >
153
- ${this.mappings.map((m, i) => html ` <div data-value=${i} data-mapping>${i + 1}</div> `)}
154
- <div data-value=${this.mappings.length} data-mapping disabled>${this.mappings.length + 1}</div>
155
- </ox-buttons-radio>
156
-
157
- <md-icon
158
- id="tab-nav-right-button"
159
- @click=${(e) => {
160
- this._onTabScrollNavRight();
161
- }}
162
- disabled
163
- >chevron_right</md-icon
164
- >
165
- </div>
166
-
167
- <div binding>
168
- <md-icon style="font-size:19px" @click=${() => this._clearDataBindingMapper()} title="delete current tab"
169
- >delete_forever</md-icon
170
- >
171
- <md-icon @click=${() => this._pasteDataBindingMapper()} title="replace current tab">content_paste</md-icon>
172
- <md-icon style="font-size:17px" @click=${() => this._copyDataBindingMapper()} title="copy current tab"
173
- >content_copy</md-icon
174
- >
175
- </div>
176
-
177
- <data-binding-mapper
178
- @value-change=${(e) => this._onMappingChanged(e)}
179
- .scene=${this.scene}
180
- .mapping=${(value.mappings && value.mappings[this.mappingIndex]) || {}}
181
- .properties=${PROPS}
182
- >
183
- </data-binding-mapper>
184
- </fieldset>
185
- `;
186
- }
187
- _setMappingIndex(idx) {
188
- this.mappingIndex = isNaN(Number(idx)) ? 0 : Number(idx);
189
- this._onTabScroll();
190
- }
191
- _clearDataBindingMapper() {
192
- var _a;
193
- var mappings = [...(((_a = this.value) === null || _a === void 0 ? void 0 : _a.mappings) || [])];
194
- mappings.splice(this.mappingIndex, 1);
195
- this._onAfterValueChange('mappings', mappings.filter(m => !!m));
196
- }
197
- _copyDataBindingMapper() {
198
- clipboard = JSON.stringify(this.mappings[this.mappingIndex]);
199
- }
200
- async _pasteDataBindingMapper() {
201
- var _a;
202
- var index = this.mappingIndex;
203
- var mappings = [...(((_a = this.value) === null || _a === void 0 ? void 0 : _a.mappings) || [])];
204
- mappings[this.mappingIndex] = JSON.parse(clipboard);
205
- this._onAfterValueChange('mappings', mappings);
206
- setTimeout(() => {
207
- this._setMappingIndex(index);
208
- }, 100);
209
- }
210
- async _onValueChanged() {
211
- await this.updateComplete;
212
- if (this._afterRender) {
213
- this._afterRender();
214
- }
215
- else {
216
- this._setMappingIndex(0);
217
- }
218
- this._afterRender = null;
219
- }
220
- _onValueChange(e) {
221
- var element = e.target;
222
- var key = element.getAttribute('value-key');
223
- var value = this._getValueFromEventTarget(element);
224
- if (!key) {
225
- return;
226
- }
227
- this.value = {
228
- ...this.value,
229
- [key]: value
230
- };
231
- this._onAfterValueChange(key, value);
232
- }
233
- get tabContainer() {
234
- return this.tabs;
235
- }
236
- async _onMappingChanged(e) {
237
- var _a, _b;
238
- var mapping = e.target.mapping;
239
- /* data spread target의 변경이 있는 경우, target 컴포넌트들의 태그를 블링크 시킨다 */
240
- if (mapping && mapping.target) {
241
- this.scene &&
242
- this.scene.findAll(mapping.target, this.scene.selected && this.scene.selected[0]).forEach((c, i) => {
243
- if (i == 0)
244
- c.trigger('decotagreset');
245
- c.trigger('decotag', {});
246
- });
247
- }
248
- /* mapping의 모든 속성이 편집되면, 모델에 반영한다. */
249
- var mappings = [...(((_a = this.value) === null || _a === void 0 ? void 0 : _a.mappings) || [])];
250
- if (mapping.target && mapping.property && mapping.rule) {
251
- mappings[this.mappingIndex] = mapping;
252
- var mappingIdx = this.mappingIndex;
253
- this._afterRender = () => {
254
- this._setMappingIndex(mappingIdx);
255
- this.tabContainer.scrollLeft = this.tabContainer.scrollWidth;
256
- };
257
- this.dispatchEvent(new CustomEvent('property-change', {
258
- bubbles: true,
259
- composed: true,
260
- detail: {
261
- mappings: mappings.filter(m => !!m)
262
- }
263
- }));
264
- await this.requestUpdate();
265
- }
266
- else if (!mapping.target && !mapping.property) {
267
- const { accessor, source } = ((_b = e.detail) === null || _b === void 0 ? void 0 : _b.changed) || {};
268
- // accessor나 source를 입력중인 경우 tabIndex Change 방지
269
- if (!accessor && !source) {
270
- mappings[this.mappingIndex] = null;
271
- var nextMappingIdx = Math.max(this.mappingIndex - 1, 0);
272
- this._afterRender = () => {
273
- this._setMappingIndex(nextMappingIdx);
274
- };
275
- this.dispatchEvent(new CustomEvent('property-change', {
276
- bubbles: true,
277
- composed: true,
278
- detail: {
279
- mappings: mappings.filter(m => !!m)
280
- }
281
- }));
282
- }
283
- }
284
- }
285
- _onTabScroll() {
286
- if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {
287
- this.tabNavLeftButton.setAttribute('disabled', '');
288
- this.tabNavRightButton.setAttribute('disabled', '');
289
- }
290
- // left-end
291
- else if (this.tabContainer.scrollLeft == 0) {
292
- this.tabNavLeftButton.setAttribute('disabled', '');
293
- this.tabNavRightButton.removeAttribute('disabled');
294
- }
295
- // right-end
296
- else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {
297
- this.tabNavLeftButton.removeAttribute('disabled');
298
- this.tabNavRightButton.setAttribute('disabled', '');
299
- }
300
- else {
301
- this.tabNavLeftButton.removeAttribute('disabled');
302
- this.tabNavRightButton.removeAttribute('disabled');
303
- }
304
- }
305
- _onTabScrollNavLeft() {
306
- this.tabContainer.style.scrollBehavior = 'smooth';
307
- this.tabContainer.scrollLeft -= this.tabContainer.clientWidth;
308
- this.tabContainer.style.scrollBehavior = 'auto';
309
- }
310
- _onTabScrollNavRight() {
311
- this.tabContainer.style.scrollBehavior = 'smooth';
312
- this.tabContainer.scrollLeft += this.tabContainer.clientWidth;
313
- this.tabContainer.style.scrollBehavior = 'auto';
314
- }
315
- }
316
- PropertyDataBinding.styles = [
317
- PropertySharedStyle,
318
- css `
319
- #tab-header {
320
- display: flex;
321
- align-items: center;
322
- justify-content: space-between;
323
- }
324
-
325
- #tab-header > md-icon {
326
- padding: 0;
327
- margin: 0;
328
- width: 25px;
329
- height: 25px;
330
- font-size: x-large;
331
- border-bottom: 1px solid rgba(0, 0, 0, 0.2);
332
- }
333
-
334
- fieldset[collapsable] legend {
335
- box-sizing: border-box;
336
- width: 100%;
337
- }
338
-
339
- fieldset[collapsable] legend md-icon {
340
- float: right;
341
- font-size: medium;
342
- margin: 0;
343
- }
344
-
345
- fieldset[collapsable][collapsed] > :not(legend) {
346
- display: none;
347
- }
348
-
349
- ox-buttons-radio {
350
- flex: 1;
351
- height: 25px;
352
- border: 1px solid rgba(0, 0, 0, 0.2);
353
- border-width: 1px 1px 0 1px;
354
- text-align: center;
355
-
356
- display: flex;
357
- padding: 0;
358
- box-sizing: border-box;
359
-
360
- width: 0; /* limit width */
361
- overflow-x: hidden;
362
- }
363
-
364
- ox-buttons-radio > div {
365
- background-color: rgba(0, 0, 0, 0.2);
366
- border: 1px solid rgba(0, 0, 0, 0.07);
367
- border-width: 0 0 2px 0;
368
- padding: 0;
369
- color: #fff;
370
- font-size: 13px;
371
- max-width: 25px;
372
- min-width: 25px;
373
- }
374
-
375
- ox-buttons-radio > div[disabled] {
376
- background-color: rgba(0, 0, 0, 0.1);
377
- }
378
-
379
- ox-buttons-radio > div[active] {
380
- border-color: rgb(242, 71, 28);
381
- }
382
-
383
- ox-buttons-radio > div.iron-selected {
384
- background-color: var(--md-sys-color-surface);
385
- color: var(--md-sys-color-on-surface);
386
- }
387
-
388
- div[binding] {
389
- display: flex;
390
- flex-direction: row-reverse;
391
- background-color: var(--md-sys-color-surface);
392
- color: var(--md-sys-color-on-surface);
393
- overflow: hidden;
394
- border-style: solid;
395
- border-color: rgba(0, 0, 0, 0.2);
396
- border-image: initial;
397
- border-width: 0px 1px;
398
- padding: 7px 5px 2px 5px;
399
- }
400
-
401
- md-icon {
402
- margin-left: 5px;
403
- color: var(--md-sys-color-on-secondary-container);
404
- opacity: 0.8;
405
- cursor: pointer;
406
- --md-icon-size: 18px;
407
- }
408
-
409
- md-icon:hover {
410
- color: var(--md-sys-color-on-primary-container);
411
- opacity: 1;
412
- }
413
-
414
- md-icon[disabled] {
415
- color: rgba(0, 0, 0, 0.1);
416
- }
417
-
418
- data-binding-mapper {
419
- --things-select: {
420
- min-width: 50%;
421
- margin-bottom: 10px;
422
- padding: 3px 20px 2px 5px;
423
- -webkit-border-radius: 4px;
424
- -moz-border-radius: 4px;
425
- border-radius: 4px;
426
- border: 1px solid rgba(0, 0, 0, 0.15);
427
- font-size: 15px;
428
- font-weight: 300;
429
- -webkit-appearance: none;
430
- };
431
- }
432
- `
433
- ];
434
- __decorate([
435
- property({ type: Object })
436
- ], PropertyDataBinding.prototype, "value", void 0);
437
- __decorate([
438
- property({ type: Object })
439
- ], PropertyDataBinding.prototype, "scene", void 0);
440
- __decorate([
441
- state()
442
- ], PropertyDataBinding.prototype, "mappingIndex", void 0);
443
- __decorate([
444
- state()
445
- ], PropertyDataBinding.prototype, "_afterRender", void 0);
446
- __decorate([
447
- state()
448
- ], PropertyDataBinding.prototype, "_dataExpanded", void 0);
449
- __decorate([
450
- query('#tabs')
451
- ], PropertyDataBinding.prototype, "tabs", void 0);
452
- __decorate([
453
- query('#tab-nav-left-button')
454
- ], PropertyDataBinding.prototype, "tabNavLeftButton", void 0);
455
- __decorate([
456
- query('#tab-nav-right-button')
457
- ], PropertyDataBinding.prototype, "tabNavRightButton", void 0);
458
- //# sourceMappingURL=data-binding.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"data-binding.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/data-binding/data-binding.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/help/ox-title-with-help.js'\nimport '@operato/input/ox-buttons-radio.js'\nimport '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { AbstractProperty } from '../abstract-property.js'\nimport { PropertySharedStyle } from '../property-shared-style.js'\nimport { DataBindingMapper } from './data-binding-mapper.js'\n\nvar clipboard = '{}'\n\nconst PROPS = [\n '',\n 'text',\n ['fillStyle', 'fill style'],\n ['strokeStyle', 'stroke style'],\n ['fontColor', 'font color'],\n 'value',\n 'data',\n 'source',\n 'hidden',\n 'started',\n 'play',\n ['ref', 'reference'],\n 'action',\n 'options',\n 'rotate',\n 'dimension',\n 'location',\n 'accessor',\n ['tap', '(tap)'],\n '(action)'\n].map(prop => {\n return typeof prop == 'string' ? { name: prop, label: prop } : { name: prop[0], label: prop[1] }\n})\n\nexport class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {\n static styles = [\n PropertySharedStyle,\n css`\n #tab-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n #tab-header > md-icon {\n padding: 0;\n margin: 0;\n width: 25px;\n height: 25px;\n font-size: x-large;\n border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n }\n\n fieldset[collapsable] legend {\n box-sizing: border-box;\n width: 100%;\n }\n\n fieldset[collapsable] legend md-icon {\n float: right;\n font-size: medium;\n margin: 0;\n }\n\n fieldset[collapsable][collapsed] > :not(legend) {\n display: none;\n }\n\n ox-buttons-radio {\n flex: 1;\n height: 25px;\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-width: 1px 1px 0 1px;\n text-align: center;\n\n display: flex;\n padding: 0;\n box-sizing: border-box;\n\n width: 0; /* limit width */\n overflow-x: hidden;\n }\n\n ox-buttons-radio > div {\n background-color: rgba(0, 0, 0, 0.2);\n border: 1px solid rgba(0, 0, 0, 0.07);\n border-width: 0 0 2px 0;\n padding: 0;\n color: #fff;\n font-size: 13px;\n max-width: 25px;\n min-width: 25px;\n }\n\n ox-buttons-radio > div[disabled] {\n background-color: rgba(0, 0, 0, 0.1);\n }\n\n ox-buttons-radio > div[active] {\n border-color: rgb(242, 71, 28);\n }\n\n ox-buttons-radio > div.iron-selected {\n background-color: var(--md-sys-color-surface);\n color: var(--md-sys-color-on-surface);\n }\n\n div[binding] {\n display: flex;\n flex-direction: row-reverse;\n background-color: var(--md-sys-color-surface);\n color: var(--md-sys-color-on-surface);\n overflow: hidden;\n border-style: solid;\n border-color: rgba(0, 0, 0, 0.2);\n border-image: initial;\n border-width: 0px 1px;\n padding: 7px 5px 2px 5px;\n }\n\n md-icon {\n margin-left: 5px;\n color: var(--md-sys-color-on-secondary-container);\n opacity: 0.8;\n cursor: pointer;\n --md-icon-size: 18px;\n }\n\n md-icon:hover {\n color: var(--md-sys-color-on-primary-container);\n opacity: 1;\n }\n\n md-icon[disabled] {\n color: rgba(0, 0, 0, 0.1);\n }\n\n data-binding-mapper {\n --things-select: {\n min-width: 50%;\n margin-bottom: 10px;\n padding: 3px 20px 2px 5px;\n -webkit-border-radius: 4px;\n -moz-border-radius: 4px;\n border-radius: 4px;\n border: 1px solid rgba(0, 0, 0, 0.15);\n font-size: 15px;\n font-weight: 300;\n -webkit-appearance: none;\n };\n }\n `\n ]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) scene?: Scene\n\n @state() mappingIndex: number = 0\n @state() _afterRender?: Function | null\n @state() _dataExpanded: boolean = false\n\n @query('#tabs') tabs!: HTMLElement\n @query('#tab-nav-left-button') tabNavLeftButton!: HTMLElement\n @query('#tab-nav-right-button') tabNavRightButton!: HTMLElement\n\n private mapping: Properties = {}\n\n get mappings() {\n return this.value?.mappings || []\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n\n this.tabContainer.addEventListener('scroll', () => {\n this._onTabScroll()\n })\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n this._onValueChanged()\n }\n }\n\n static get scopedElements() {\n return {\n 'data-binding-mapper': DataBindingMapper\n }\n }\n\n render() {\n const value = this.value || {\n mappings: []\n }\n\n return html`\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/data-binding\" msgid=\"label.identifier\"\n >identifier</ox-title-with-help\n >\n </legend>\n <div class=\"property-grid\">\n <label> <ox-i18n msgid=\"label.id\">ID</ox-i18n> </label>\n <input value-key=\"id\" .value=${value.id || ''} />\n\n <label> <ox-i18n msgid=\"label.class\">Class</ox-i18n> </label>\n <input value-key=\"class\" .value=${value.class || ''} />\n\n <label> <ox-i18n msgid=\"label.tag\">Tag</ox-i18n> </label>\n <input value-key=\"tag\" .value=${value.tag || ''} />\n\n <label> <ox-i18n msgid=\"label.template-prefix\">Template Prefix</ox-i18n> </label>\n <input value-key=\"templatePrefix\" .value=${value.templatePrefix || ''} />\n\n <div class=\"checkbox-row\">\n <input id=\"checkbox-ndns\" type=\"checkbox\" value-key=\"ndns\" .checked=${value.ndns} />\n <label for=\"checkbox-ndns\"> <ox-i18n msgid=\"label.ndns\">No Data No Show</ox-i18n> </label>\n </div>\n\n <div class=\"checkbox-row\">\n <input id=\"checkbox-sensitive\" type=\"checkbox\" value-key=\"sensitive\" .checked=${value.sensitive} />\n <label for=\"checkbox-sensitive\">\n <ox-i18n msgid=\"label.intent-sensitive\">Intent Sensitive</ox-i18n>\n </label>\n </div>\n\n <div class=\"checkbox-row\">\n <input id=\"checkbox-persistent\" type=\"checkbox\" value-key=\"persistent\" .checked=${value.persistent} />\n <label for=\"checkbox-persistent\">\n <ox-i18n msgid=\"label.persistent-data\">Persistent Data</ox-i18n>\n </label>\n </div>\n </div>\n </fieldset>\n\n <fieldset collapsable ?collapsed=${!this._dataExpanded}>\n <legend>\n <ox-title-with-help topic=\"board-modeller/initial-data\" msgid=\"label.initial-data\"\n >initial value</ox-title-with-help\n >\n <md-icon\n @click=${() => {\n this._dataExpanded = !this._dataExpanded\n }}\n >${this._dataExpanded ? 'expand_less' : 'expand_more'}</md-icon\n >\n </legend>\n <ox-input-data value-key=\"data\" .value=${value.data}> </ox-input-data>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/data-spread\" msgid=\"label.data-spread\"\n >Data Spread</ox-title-with-help\n >\n </legend>\n\n <div id=\"tab-header\">\n <md-icon\n id=\"tab-nav-left-button\"\n @click=${() => {\n this._onTabScrollNavLeft()\n }}\n disabled\n >chevron_left</md-icon\n >\n\n <ox-buttons-radio\n id=\"tabs\"\n .value=${String(this.mappingIndex)}\n @change=${(e: Event) => {\n e.stopPropagation()\n this._setMappingIndex((e.target as any).value)\n }}\n >\n ${this.mappings.map((m: string, i: number) => html` <div data-value=${i} data-mapping>${i + 1}</div> `)}\n <div data-value=${this.mappings.length} data-mapping disabled>${this.mappings.length + 1}</div>\n </ox-buttons-radio>\n\n <md-icon\n id=\"tab-nav-right-button\"\n @click=${(e: Event) => {\n this._onTabScrollNavRight()\n }}\n disabled\n >chevron_right</md-icon\n >\n </div>\n\n <div binding>\n <md-icon style=\"font-size:19px\" @click=${() => this._clearDataBindingMapper()} title=\"delete current tab\"\n >delete_forever</md-icon\n >\n <md-icon @click=${() => this._pasteDataBindingMapper()} title=\"replace current tab\">content_paste</md-icon>\n <md-icon style=\"font-size:17px\" @click=${() => this._copyDataBindingMapper()} title=\"copy current tab\"\n >content_copy</md-icon\n >\n </div>\n\n <data-binding-mapper\n @value-change=${(e: CustomEvent) => this._onMappingChanged(e)}\n .scene=${this.scene}\n .mapping=${(value.mappings && value.mappings[this.mappingIndex]) || {}}\n .properties=${PROPS}\n >\n </data-binding-mapper>\n </fieldset>\n `\n }\n\n _setMappingIndex(idx: number) {\n this.mappingIndex = isNaN(Number(idx)) ? 0 : Number(idx)\n\n this._onTabScroll()\n }\n\n _clearDataBindingMapper() {\n var mappings = [...(this.value?.mappings || [])]\n mappings.splice(this.mappingIndex, 1)\n this._onAfterValueChange(\n 'mappings',\n mappings.filter(m => !!m)\n )\n }\n\n _copyDataBindingMapper() {\n clipboard = JSON.stringify(this.mappings[this.mappingIndex])\n }\n\n async _pasteDataBindingMapper() {\n var index = this.mappingIndex\n var mappings = [...(this.value?.mappings || [])]\n mappings[this.mappingIndex] = JSON.parse(clipboard)\n\n this._onAfterValueChange('mappings', mappings)\n\n setTimeout(() => {\n this._setMappingIndex(index)\n }, 100)\n }\n\n async _onValueChanged() {\n await this.updateComplete\n\n if (this._afterRender) {\n this._afterRender()\n } else {\n this._setMappingIndex(0)\n }\n\n this._afterRender = null\n }\n\n _onValueChange(e: Event) {\n var element = e.target as HTMLElement\n var key = element.getAttribute('value-key')\n\n var value = this._getValueFromEventTarget(element)\n\n if (!key) {\n return\n }\n\n this.value = {\n ...this.value,\n [key]: value\n }\n\n this._onAfterValueChange(key, value)\n }\n\n get tabContainer() {\n return this.tabs\n }\n\n async _onMappingChanged(e: CustomEvent) {\n var mapping = (e.target as any).mapping\n\n /* data spread target의 변경이 있는 경우, target 컴포넌트들의 태그를 블링크 시킨다 */\n if (mapping && mapping.target) {\n this.scene &&\n this.scene.findAll(mapping.target, this.scene.selected && this.scene.selected[0]).forEach((c, i) => {\n if (i == 0) c.trigger('decotagreset')\n c.trigger('decotag', {})\n })\n }\n\n /* mapping의 모든 속성이 편집되면, 모델에 반영한다. */\n var mappings = [...(this.value?.mappings || [])]\n\n if (mapping.target && mapping.property && mapping.rule) {\n mappings[this.mappingIndex] = mapping\n\n var mappingIdx = this.mappingIndex\n this._afterRender = () => {\n this._setMappingIndex(mappingIdx)\n this.tabContainer.scrollLeft = this.tabContainer.scrollWidth\n }\n\n this.dispatchEvent(\n new CustomEvent('property-change', {\n bubbles: true,\n composed: true,\n detail: {\n mappings: mappings.filter(m => !!m)\n }\n })\n )\n\n await this.requestUpdate()\n } else if (!mapping.target && !mapping.property) {\n const { accessor, source } = e.detail?.changed || {}\n\n // accessor나 source를 입력중인 경우 tabIndex Change 방지\n if (!accessor && !source) {\n mappings[this.mappingIndex] = null\n var nextMappingIdx = Math.max(this.mappingIndex - 1, 0)\n this._afterRender = () => {\n this._setMappingIndex(nextMappingIdx)\n }\n this.dispatchEvent(\n new CustomEvent('property-change', {\n bubbles: true,\n composed: true,\n detail: {\n mappings: mappings.filter(m => !!m)\n }\n })\n )\n }\n }\n }\n\n _onTabScroll() {\n if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {\n this.tabNavLeftButton.setAttribute('disabled', '')\n this.tabNavRightButton.setAttribute('disabled', '')\n }\n // left-end\n else if (this.tabContainer.scrollLeft == 0) {\n this.tabNavLeftButton.setAttribute('disabled', '')\n this.tabNavRightButton.removeAttribute('disabled')\n }\n // right-end\n else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {\n this.tabNavLeftButton.removeAttribute('disabled')\n this.tabNavRightButton.setAttribute('disabled', '')\n } else {\n this.tabNavLeftButton.removeAttribute('disabled')\n this.tabNavRightButton.removeAttribute('disabled')\n }\n }\n\n _onTabScrollNavLeft() {\n this.tabContainer.style.scrollBehavior = 'smooth'\n this.tabContainer.scrollLeft -= this.tabContainer.clientWidth\n this.tabContainer.style.scrollBehavior = 'auto'\n }\n\n _onTabScrollNavRight() {\n this.tabContainer.style.scrollBehavior = 'smooth'\n this.tabContainer.scrollLeft += this.tabContainer.clientWidth\n this.tabContainer.style.scrollBehavior = 'auto'\n }\n}\n"]}
@@ -1,4 +0,0 @@
1
- /**
2
- * @license Copyright © HatioLab Inc. All rights reserved.
3
- */
4
- export declare const EffectsSharedStyle: import("lit").CSSResult;