niris-public-community-components 0.0.1 → 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,7 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2021 Google LLC
4
+ * SPDX-License-Identifier: BSD-3-Clause
5
+ */
6
+ export {};
7
+ //# sourceMappingURL=my-element_test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"my-element_test.d.ts","sourceRoot":"","sources":["../../src/test/my-element_test.ts"],"names":[],"mappings":"AAAA;;;;GAIG"}
@@ -0,0 +1,47 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2021 Google LLC
4
+ * SPDX-License-Identifier: BSD-3-Clause
5
+ */
6
+ import { MyElement } from '../my-element.js';
7
+ import { fixture, assert } from '@open-wc/testing';
8
+ import { html } from 'lit/static-html.js';
9
+ suite('my-element', () => {
10
+ test('is defined', () => {
11
+ const el = document.createElement('my-element');
12
+ assert.instanceOf(el, MyElement);
13
+ });
14
+ test('renders with default values', async () => {
15
+ const el = await fixture(html `<my-element></my-element>`);
16
+ assert.shadowDom.equal(el, `
17
+ <h1>Hello, World!</h1>
18
+ <button part="button">Click Count: 0</button>
19
+ <slot></slot>
20
+ `);
21
+ });
22
+ test('renders with a set name', async () => {
23
+ const el = await fixture(html `<my-element name="Test"></my-element>`);
24
+ assert.shadowDom.equal(el, `
25
+ <h1>Hello, Test!</h1>
26
+ <button part="button">Click Count: 0</button>
27
+ <slot></slot>
28
+ `);
29
+ });
30
+ test('handles a click', async () => {
31
+ const el = (await fixture(html `<my-element></my-element>`));
32
+ const button = el.shadowRoot.querySelector('button');
33
+ button.click();
34
+ await el.updateComplete;
35
+ assert.shadowDom.equal(el, `
36
+ <h1>Hello, World!</h1>
37
+ <button part="button">Click Count: 1</button>
38
+ <slot></slot>
39
+ `);
40
+ });
41
+ test('styling applied', async () => {
42
+ const el = (await fixture(html `<my-element></my-element>`));
43
+ await el.updateComplete;
44
+ assert.equal(getComputedStyle(el).paddingTop, '16px');
45
+ });
46
+ });
47
+ //# sourceMappingURL=my-element_test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"my-element_test.js","sourceRoot":"","sources":["../../src/test/my-element_test.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAC,OAAO,EAAE,MAAM,EAAC,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AAExC,KAAK,CAAC,YAAY,EAAE,GAAG,EAAE;IACvB,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;QACtB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;QAChD,MAAM,CAAC,UAAU,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,2BAA2B,CAAC,CAAC;QAC1D,MAAM,CAAC,SAAS,CAAC,KAAK,CACpB,EAAE,EACF;;;;KAID,CACA,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,uCAAuC,CAAC,CAAC;QACtE,MAAM,CAAC,SAAS,CAAC,KAAK,CACpB,EAAE,EACF;;;;KAID,CACA,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;QACjC,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA,2BAA2B,CAAC,CAAc,CAAC;QACzE,MAAM,MAAM,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC;QACvD,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,CAAC,SAAS,CAAC,KAAK,CACpB,EAAE,EACF;;;;KAID,CACA,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;QACjC,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA,2BAA2B,CAAC,CAAc,CAAC;QACzE,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {MyElement} from '../my-element.js';\n\nimport {fixture, assert} from '@open-wc/testing';\nimport {html} from 'lit/static-html.js';\n\nsuite('my-element', () => {\n test('is defined', () => {\n const el = document.createElement('my-element');\n assert.instanceOf(el, MyElement);\n });\n\n test('renders with default values', async () => {\n const el = await fixture(html`<my-element></my-element>`);\n assert.shadowDom.equal(\n el,\n `\n <h1>Hello, World!</h1>\n <button part=\"button\">Click Count: 0</button>\n <slot></slot>\n `\n );\n });\n\n test('renders with a set name', async () => {\n const el = await fixture(html`<my-element name=\"Test\"></my-element>`);\n assert.shadowDom.equal(\n el,\n `\n <h1>Hello, Test!</h1>\n <button part=\"button\">Click Count: 0</button>\n <slot></slot>\n `\n );\n });\n\n test('handles a click', async () => {\n const el = (await fixture(html`<my-element></my-element>`)) as MyElement;\n const button = el.shadowRoot!.querySelector('button')!;\n button.click();\n await el.updateComplete;\n assert.shadowDom.equal(\n el,\n `\n <h1>Hello, World!</h1>\n <button part=\"button\">Click Count: 1</button>\n <slot></slot>\n `\n );\n });\n\n test('styling applied', async () => {\n const el = (await fixture(html`<my-element></my-element>`)) as MyElement;\n await el.updateComplete;\n assert.equal(getComputedStyle(el).paddingTop, '16px');\n });\n});\n"]}
@@ -0,0 +1,222 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { LitElement, html, css } from 'lit';
8
+ import { property } from 'lit/decorators.js';
9
+ export class TextareaToNiris extends LitElement {
10
+ constructor() {
11
+ super();
12
+ this.formAction = '';
13
+ this.keywords = '';
14
+ }
15
+ updateShownValue(event) {
16
+ this.keywords = event.target?.value;
17
+ }
18
+ closePopover(event) {
19
+ event.preventDefault();
20
+ (this.shadowRoot?.getElementById('popover')).hidePopover();
21
+ }
22
+ render() {
23
+ return html `
24
+ <div id="popover-container">
25
+ <button id="button-popover" popovertarget="popover">
26
+ Atención en línea
27
+ </button>
28
+
29
+ <div popover id="popover">
30
+ <header>
31
+ <h2>Atención en línea Niris</h2>
32
+ </header>
33
+ <body>
34
+ <form action="${this.formAction}?keywords" =${this.keywords}>
35
+ <label for="niris-input"
36
+ >Información, Consultas, Quejas y Sugerencias:
37
+ </label>
38
+ <textarea
39
+ id="niris-input"
40
+ @change=${this.updateShownValue}
41
+ name="keywords"
42
+ required
43
+ minlength="4"
44
+ placeholder="Escribe tu consulta aquí"
45
+ ></textarea>
46
+ <button type="submit">Enviar</button>
47
+ <button type="button" @click="${this.closePopover}">
48
+ Cerrar
49
+ </button>
50
+ </form>
51
+ </body>
52
+ </div>
53
+ </div>
54
+ `;
55
+ }
56
+ }
57
+ TextareaToNiris.styles = css `
58
+ :host {
59
+ --primary-color: #007bff;
60
+ --background-color: #d4d4d4;
61
+ --color: #fff;
62
+ --padding: 1rem 1rem;
63
+ --font-size: 1rem;
64
+ --border-radius: 0rem;
65
+ --font-weight: 500;
66
+ --font-family: 'Arial', sans-serif;
67
+ }
68
+ * {
69
+ font-family: 'Brush Script MT', cursive, sans-serif; /* This is fallback font for old browsers */
70
+ font-family: var(--font-family);
71
+ box-sizing: border-box;
72
+ }
73
+
74
+ button {
75
+ min-width: 120px;
76
+ background-color: var(--primary-color);
77
+ border: none;
78
+ color: white;
79
+ text-align: center;
80
+ text-decoration: none;
81
+ font-size: 16px;
82
+ cursor: pointer;
83
+ position: relative;
84
+ color: var(--color);
85
+ padding: var(--padding);
86
+ font-size: var(--font-size);
87
+ font-weight: var(--font-weight);
88
+ border-radius: var(--border-radius);
89
+ transition: 0.3s;
90
+ }
91
+
92
+ button:hover {
93
+ filter: brightness(120%);
94
+ }
95
+
96
+ button:focus-visible {
97
+ background-color: var(--primary-color);
98
+ outline: 3px solid var(--primary-color);
99
+ outline-offset: 2px;
100
+ }
101
+
102
+ #popover:popover-open {
103
+ display: flex;
104
+ flex-direction: column;
105
+ justify-content: center;
106
+ padding: 0;
107
+ border: 0;
108
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
109
+ width: 60%;
110
+ border-radius: var(--border-radius);
111
+ animation: fadeIn 150ms ease-in-out;
112
+ }
113
+
114
+ header {
115
+ text-align: center;
116
+ box-sizing: border-box;
117
+ padding-left: 1rem;
118
+ margin-bottom: 2rem;
119
+ width: 100%;
120
+ border-bottom: 1px solid #d4d4d4;
121
+ background-color: #f6f7f7;
122
+ }
123
+
124
+ header h2 {
125
+ color: var(--primary-color);
126
+ filter: opacity(100%);
127
+ }
128
+
129
+ header h2::before {
130
+ filter: opacity(50%);
131
+ color: var(--primary-color);
132
+ filter: opacity(100%);
133
+ }
134
+
135
+ form {
136
+ margin: 0 auto;
137
+ width: 90%;
138
+ }
139
+
140
+ textarea {
141
+ resize: none;
142
+ border-radius: var(--border-radius);
143
+ height: 8rem;
144
+ border-width: 2px;
145
+ margin: 0.7rem 0;
146
+ --tw-border-opacity: 1;
147
+ border-color: rgb(209 213 219 / var(--tw-border-opacity));
148
+ width: 100%;
149
+ font-size: 0.875rem;
150
+ padding: 0.5rem;
151
+ }
152
+
153
+ textarea:focus,
154
+ select:focus {
155
+ outline: 2px solid transparent;
156
+ outline-offset: 2px;
157
+ --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
158
+ --tw-ring-offset-width: 0px;
159
+ --tw-ring-offset-color: #fff;
160
+ --tw-ring-color: var(--primary-color);
161
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
162
+ var(--tw-ring-offset-width) var(--tw-ring-offset-color);
163
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
164
+ calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
165
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
166
+ var(--tw-shadow);
167
+ border-color: var(--primary-color);
168
+ }
169
+ form button {
170
+ float: left;
171
+ margin: 1rem auto;
172
+ }
173
+
174
+ form button:last-child {
175
+ background-color: transparent;
176
+ margin-left: 1rem;
177
+ border: inset 2px solid var(--primary-color);
178
+ box-shadow: 0 0 0 1px var(--primary-color),
179
+ inset 0 0 0 2px var(--primary-color);
180
+ color: var(--primary-color);
181
+ }
182
+ form button:last-child:hover {
183
+ background-color: var(--primary-color);
184
+ color: white;
185
+ filter: none;
186
+ }
187
+ #popover::backdrop {
188
+ background-color: rgba(#c6c8ce 0.3);
189
+ backdrop-filter: blur(2px);
190
+ }
191
+
192
+ @keyframes fadeIn {
193
+ 0% {
194
+ scale: 0.8;
195
+ opacity: 0;
196
+ }
197
+ 100% {
198
+ scale: 1;
199
+ opacity: 1;
200
+ }
201
+ }
202
+
203
+ @media (max-width: 1024px) {
204
+ #popover:popover-open {
205
+ width: 90%;
206
+ }
207
+ }
208
+
209
+ @media (min-width: 1024px) {
210
+ #popover:popover-open {
211
+ width: 60%;
212
+ }
213
+ }
214
+ `;
215
+ __decorate([
216
+ property({ type: String })
217
+ ], TextareaToNiris.prototype, "formAction", void 0);
218
+ __decorate([
219
+ property({ type: String })
220
+ ], TextareaToNiris.prototype, "keywords", void 0);
221
+ customElements.define('textarea-to-niris', TextareaToNiris);
222
+ //# sourceMappingURL=textarea-to-niris.js.map
package/package.json CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "name": "niris-public-community-components",
3
3
  "private": false,
4
- "version": "0.0.1",
4
+ "version": "0.0.2",
5
5
  "homepage": "https://iris.apsl.net",
6
6
  "description": "Web components for the NIRIS project developed with the Lit library",
7
- "main": "my-element.js",
8
- "module": "my-element.js",
7
+ "main": "dist/textarea-to-niris.js",
8
+ "module": "dist/textarea-to-niris.js",
9
9
  "type": "module",
10
+ "types": "textarea-to-niris.d.ts",
10
11
  "keywords": [
11
12
  "web-components",
12
13
  "lit-element",
package/rollup.config.js CHANGED
@@ -10,9 +10,9 @@ import resolve from '@rollup/plugin-node-resolve';
10
10
  import replace from '@rollup/plugin-replace';
11
11
 
12
12
  export default {
13
- input: 'my-element.js',
13
+ input: './dist/textarea-to-niris.js',
14
14
  output: {
15
- file: 'my-element.bundled.js',
15
+ file: './dist/textarea-to-niris.bundled.js',
16
16
  format: 'esm',
17
17
  },
18
18
  onwarn(warning) {
@@ -216,3 +216,10 @@ export class TextareaToNiris extends LitElement {
216
216
  }
217
217
 
218
218
  customElements.define('textarea-to-niris', TextareaToNiris);
219
+
220
+
221
+ declare global {
222
+ interface HTMLElementTagNameMap {
223
+ "textarea-to-niris": TextareaToNiris;
224
+ }
225
+ }
package/tsconfig.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "declarationMap": true,
8
8
  "sourceMap": true,
9
9
  "inlineSources": true,
10
- "outDir": "./",
10
+ "outDir": "./dist",
11
11
  "rootDir": "./src",
12
12
  "strict": true,
13
13
  "noUnusedLocals": true,
package/my-element.js DELETED
@@ -1,79 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2019 Google LLC
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
- var __decorate =
7
- (this && this.__decorate) ||
8
- function (decorators, target, key, desc) {
9
- var c = arguments.length,
10
- r =
11
- c < 3
12
- ? target
13
- : desc === null
14
- ? (desc = Object.getOwnPropertyDescriptor(target, key))
15
- : desc,
16
- d;
17
- if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function')
18
- r = Reflect.decorate(decorators, target, key, desc);
19
- else
20
- for (var i = decorators.length - 1; i >= 0; i--)
21
- if ((d = decorators[i]))
22
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
23
- return c > 3 && r && Object.defineProperty(target, key, r), r;
24
- };
25
- import {LitElement, html, css} from 'lit';
26
- import {customElement, property} from 'lit/decorators.js';
27
- /**
28
- * An example element.
29
- *
30
- * @fires count-changed - Indicates when the count changes
31
- * @slot - This element has a slot
32
- * @csspart button - The button
33
- */
34
- let MyElement = class MyElement extends LitElement {
35
- constructor() {
36
- super(...arguments);
37
- /**
38
- * The name to say "Hello" to.
39
- */
40
- this.name = 'World';
41
- /**
42
- * The number of times the button has been clicked.
43
- */
44
- this.count = 0;
45
- }
46
- render() {
47
- return html`
48
- <h1>${this.sayHello(this.name)}!</h1>
49
- <button @click=${this._onClick} part="button">
50
- Click Count: ${this.count}
51
- </button>
52
- <slot></slot>
53
- `;
54
- }
55
- _onClick() {
56
- this.count++;
57
- this.dispatchEvent(new CustomEvent('count-changed'));
58
- }
59
- /**
60
- * Formats a greeting
61
- * @param name The name to say "Hello" to
62
- */
63
- sayHello(name) {
64
- return `Hello, ${name}`;
65
- }
66
- };
67
- MyElement.styles = css`
68
- :host {
69
- display: block;
70
- border: solid 1px gray;
71
- padding: 16px;
72
- max-width: 800px;
73
- }
74
- `;
75
- __decorate([property()], MyElement.prototype, 'name', void 0);
76
- __decorate([property({type: Number})], MyElement.prototype, 'count', void 0);
77
- MyElement = __decorate([customElement('my-element')], MyElement);
78
- export {MyElement};
79
- //# sourceMappingURL=my-element.js.map