@zywave/zui-formfield 4.0.22 → 4.0.24-pre.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/demo/index.html +2 -2
- package/dist/custom-elements.json +20 -14
- package/dist/zui-formfield-css.d.ts +1 -1
- package/dist/zui-formfield-css.js +1 -1
- package/dist/zui-formfield-css.js.map +1 -1
- package/dist/zui-formfield.d.ts +2 -3
- package/dist/zui-formfield.js +5 -8
- package/dist/zui-formfield.js.map +1 -1
- package/lab.html +4 -1
- package/package.json +3 -12
- package/src/zui-formfield-css.js +1 -1
- package/src/zui-formfield.ts +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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
|
+
## [4.0.23](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-formfield@4.0.23-pre.0...@zywave/zui-formfield@4.0.23) (2021-10-29)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @zywave/zui-formfield
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [4.0.22](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-formfield@4.0.22-pre.0...@zywave/zui-formfield@4.0.22) (2021-09-30)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @zywave/zui-formfield
|
package/demo/index.html
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
<link rel="stylesheet" href="../../../../node_modules/@zywave/zui-base-styles/dist/zui-base-styles.css" />
|
|
3
3
|
|
|
4
4
|
<script type="module" defer>
|
|
5
|
-
if (!
|
|
5
|
+
if (!customElements.get("zui-formfield")) {
|
|
6
6
|
import("../dist/index.js");
|
|
7
7
|
}
|
|
8
|
-
if (!
|
|
8
|
+
if (!customElements.get("zui-input")) {
|
|
9
9
|
import("../../zui-input/dist/index.js");
|
|
10
10
|
}
|
|
11
11
|
import("../../../../scripts/demo/demo.js");
|
|
@@ -17,13 +17,19 @@
|
|
|
17
17
|
"type": {
|
|
18
18
|
"text": "string | undefined"
|
|
19
19
|
},
|
|
20
|
-
"
|
|
20
|
+
"default": "undefined",
|
|
21
|
+
"description": "property to label the control. If provided, can be styled with ::part(label). (optional)",
|
|
22
|
+
"attribute": "label"
|
|
21
23
|
},
|
|
22
24
|
{
|
|
23
25
|
"kind": "field",
|
|
24
26
|
"name": "controlSelector",
|
|
27
|
+
"type": {
|
|
28
|
+
"text": "string"
|
|
29
|
+
},
|
|
30
|
+
"default": "'*'",
|
|
25
31
|
"description": "property to help zui-formfield find the correct form control. Defaults to the first child element. (optional)",
|
|
26
|
-
"
|
|
32
|
+
"attribute": "control-selector"
|
|
27
33
|
},
|
|
28
34
|
{
|
|
29
35
|
"kind": "field",
|
|
@@ -34,20 +40,12 @@
|
|
|
34
40
|
},
|
|
35
41
|
{
|
|
36
42
|
"kind": "field",
|
|
37
|
-
"name": "_control"
|
|
38
|
-
"type": {
|
|
39
|
-
"text": "HTMLElement"
|
|
40
|
-
}
|
|
43
|
+
"name": "_control"
|
|
41
44
|
},
|
|
42
45
|
{
|
|
43
46
|
"kind": "method",
|
|
44
47
|
"name": "_onLabelClick",
|
|
45
|
-
"privacy": "private"
|
|
46
|
-
"return": {
|
|
47
|
-
"type": {
|
|
48
|
-
"text": "void"
|
|
49
|
-
}
|
|
50
|
-
}
|
|
48
|
+
"privacy": "private"
|
|
51
49
|
}
|
|
52
50
|
],
|
|
53
51
|
"attributes": [
|
|
@@ -56,18 +54,26 @@
|
|
|
56
54
|
"type": {
|
|
57
55
|
"text": "string | undefined"
|
|
58
56
|
},
|
|
57
|
+
"default": "undefined",
|
|
59
58
|
"description": "property to label the control. If provided, can be styled with ::part(label). (optional)",
|
|
59
|
+
"resolveInitializer": {
|
|
60
|
+
"module": "src/zui-formfield.ts"
|
|
61
|
+
},
|
|
60
62
|
"fieldName": "label"
|
|
61
63
|
},
|
|
62
64
|
{
|
|
63
65
|
"name": "control-selector",
|
|
66
|
+
"type": {
|
|
67
|
+
"text": "string"
|
|
68
|
+
},
|
|
69
|
+
"default": "'*'",
|
|
64
70
|
"description": "property to help zui-formfield find the correct form control. Defaults to the first child element. (optional)",
|
|
65
|
-
"default": "*",
|
|
66
71
|
"fieldName": "controlSelector"
|
|
67
72
|
}
|
|
68
73
|
],
|
|
69
74
|
"superclass": {
|
|
70
|
-
"name": "ZuiBaseElement"
|
|
75
|
+
"name": "ZuiBaseElement",
|
|
76
|
+
"package": "@zywave/zui-base"
|
|
71
77
|
},
|
|
72
78
|
"tagName": "zui-formfield",
|
|
73
79
|
"customElement": true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const style: import("lit
|
|
1
|
+
export const style: import("lit").CSSResult;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { css } from 'lit
|
|
1
|
+
import { css } from 'lit';
|
|
2
2
|
export const style = css `:host label{display:inline-flex;margin:.625rem .9375rem 0 0;font-weight:600;color:var(--zui-gray-800)}:host{contain:none;display:inline-flex;margin-bottom:1.25rem}`;
|
|
3
3
|
//# sourceMappingURL=zui-formfield-css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-formfield-css.js","sourceRoot":"","sources":["../src/zui-formfield-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"zui-formfield-css.js","sourceRoot":"","sources":["../src/zui-formfield-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,qKAAqK,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host label{display:inline-flex;margin:.625rem .9375rem 0 0;font-weight:600;color:var(--zui-gray-800)}:host{contain:none;display:inline-flex;margin-bottom:1.25rem}`;\n"]}
|
package/dist/zui-formfield.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { ZuiBaseElement } from '@zywave/zui-base';
|
|
2
|
-
import type { TemplateResult, CSSResult, CSSResultArray } from 'lit-element';
|
|
3
2
|
/**
|
|
4
3
|
* ### Example
|
|
5
4
|
* ```html
|
|
@@ -19,8 +18,8 @@ export declare class ZuiFormField extends ZuiBaseElement {
|
|
|
19
18
|
controlSelector: string;
|
|
20
19
|
_slotEl: HTMLSlotElement;
|
|
21
20
|
get _control(): HTMLElement;
|
|
22
|
-
static get styles(): CSSResult |
|
|
23
|
-
render(): TemplateResult
|
|
21
|
+
static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
|
|
22
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
24
23
|
private _onLabelClick;
|
|
25
24
|
}
|
|
26
25
|
declare global {
|
package/dist/zui-formfield.js
CHANGED
|
@@ -6,8 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { ZuiBaseElement } from '@zywave/zui-base';
|
|
8
8
|
import { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-element';
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
9
|
+
import { html } from 'lit';
|
|
10
|
+
import { property, query } from 'lit/decorators.js';
|
|
11
11
|
import { style } from './zui-formfield-css.js';
|
|
12
12
|
/**
|
|
13
13
|
* ### Example
|
|
@@ -17,7 +17,7 @@ import { style } from './zui-formfield-css.js';
|
|
|
17
17
|
* </zui-formfield>
|
|
18
18
|
* ```
|
|
19
19
|
*/
|
|
20
|
-
|
|
20
|
+
export class ZuiFormField extends ZuiBaseElement {
|
|
21
21
|
constructor() {
|
|
22
22
|
super(...arguments);
|
|
23
23
|
/**
|
|
@@ -48,7 +48,7 @@ let ZuiFormField = class ZuiFormField extends ZuiBaseElement {
|
|
|
48
48
|
control.click();
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
-
}
|
|
51
|
+
}
|
|
52
52
|
__decorate([
|
|
53
53
|
property({ type: String })
|
|
54
54
|
], ZuiFormField.prototype, "label", void 0);
|
|
@@ -58,8 +58,5 @@ __decorate([
|
|
|
58
58
|
__decorate([
|
|
59
59
|
query('slot')
|
|
60
60
|
], ZuiFormField.prototype, "_slotEl", void 0);
|
|
61
|
-
ZuiFormField
|
|
62
|
-
customElement('zui-formfield')
|
|
63
|
-
], ZuiFormField);
|
|
64
|
-
export { ZuiFormField };
|
|
61
|
+
window.customElements.define('zui-formfield', ZuiFormField);
|
|
65
62
|
//# sourceMappingURL=zui-formfield.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-formfield.js","sourceRoot":"","sources":["../src/zui-formfield.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mDAAmD,CAAC;AACxF,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"zui-formfield.js","sourceRoot":"","sources":["../src/zui-formfield.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mDAAmD,CAAC;AACxF,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C;;;;;;;GAOG;AACH,MAAM,OAAO,YAAa,SAAQ,cAAc;IAAhD;;QACE;;WAEG;QACyB,UAAK,GAAuB,SAAS,CAAC;QAElE;;WAEG;QACwD,oBAAe,GAAG,GAAG,CAAC;IA0BnF,CAAC;IAtBC,IAAI,QAAQ;QACV,OAAO,mBAAmB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IACjE,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,mBAAmB,IAAI,CAAC,aAAa,kBAAkB,IAAI,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;;KAEzG,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC9B,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,CAAC,KAAK,EAAE,CAAC;SACjB;IACH,CAAC;CACF;AA/B6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAuC;AAKP;IAA1D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;qDAAuB;AAElE;IAAd,KAAK,CAAC,MAAM,CAAC;6CAA0B;AA0B1C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-element';\nimport { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { style } from './zui-formfield-css.js';\n\n/**\n * ### Example\n * ```html\n * <zui-formfield label=\"A label\">\n * <zui-input value=\"A value\"></zui-input>\n * </zui-formfield>\n * ```\n */\nexport class ZuiFormField extends ZuiBaseElement {\n /**\n * property to label the control. If provided, can be styled with ::part(label). (optional)\n */\n @property({ type: String }) label: string | undefined = undefined;\n\n /**\n * property to help zui-formfield find the correct form control. Defaults to the first child element. (optional)\n */\n @property({ type: String, attribute: 'control-selector' }) controlSelector = '*';\n\n @query('slot') _slotEl: HTMLSlotElement;\n\n get _control() {\n return findAssignedElement(this._slotEl, this.controlSelector);\n }\n\n static get styles() {\n return [super.styles, style];\n }\n\n render() {\n return html`\n ${this.label ? html` <label @click=\"${this._onLabelClick}\" part=\"label\">${this.label}</label> ` : html``}\n <slot></slot>\n `;\n }\n\n private _onLabelClick() {\n const control = this._control;\n if (control) {\n control.focus();\n control.click();\n }\n }\n}\n\nwindow.customElements.define('zui-formfield', ZuiFormField);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-formfield': ZuiFormField;\n }\n}\n"]}
|
package/lab.html
CHANGED
|
@@ -119,6 +119,9 @@
|
|
|
119
119
|
<zui-formfield class="part-demo" label="ZUI input">
|
|
120
120
|
<zui-input name="zui-input"></zui-input>
|
|
121
121
|
</zui-formfield>
|
|
122
|
+
<zui-formfield label="ZUI Checkbox">
|
|
123
|
+
<zui-checkbox name="zui-checkbox" value="banana" checked></zui-checkbox>
|
|
124
|
+
</zui-formfield>
|
|
122
125
|
<zui-formfield label="ZUI Checkbox">
|
|
123
126
|
<zui-checkbox name="zui-checkbox"></zui-checkbox>
|
|
124
127
|
</zui-formfield>
|
|
@@ -321,7 +324,7 @@
|
|
|
321
324
|
});
|
|
322
325
|
|
|
323
326
|
// Uncomment to test FOUC styling
|
|
324
|
-
//
|
|
327
|
+
// customElements.define = function () { };
|
|
325
328
|
</script>
|
|
326
329
|
</body>
|
|
327
330
|
</html>
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zywave/zui-formfield",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.24-pre.1",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"dependencies": {
|
|
8
|
-
"@zywave/zui-base": "^4.1.
|
|
8
|
+
"@zywave/zui-base": "^4.1.19-pre.1"
|
|
9
9
|
},
|
|
10
10
|
"scripts": {
|
|
11
11
|
"build": "yarn run build:scss && yarn run build:ts",
|
|
@@ -19,18 +19,9 @@
|
|
|
19
19
|
"watcher:start": "node ../../../scripts/node/watcher.mjs",
|
|
20
20
|
"analyze": "cem analyze --globs src/zui-*.ts --litelement --outdir dist"
|
|
21
21
|
},
|
|
22
|
-
"devDependencies": {
|
|
23
|
-
"autoprefixer": "^9.7.6",
|
|
24
|
-
"browser-sync": "^2.23.7",
|
|
25
|
-
"cssnano": "^4.1.10",
|
|
26
|
-
"del": "^5.1.0",
|
|
27
|
-
"polyserve": "^0.27.8",
|
|
28
|
-
"postcss": "^7.0.27",
|
|
29
|
-
"rollup": "^2.6.1"
|
|
30
|
-
},
|
|
31
22
|
"publishConfig": {
|
|
32
23
|
"access": "public"
|
|
33
24
|
},
|
|
34
25
|
"customElements": "dist/custom-elements.json",
|
|
35
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "f84f16138879b6b119b1198f302646b6e0cc31e2"
|
|
36
27
|
}
|
package/src/zui-formfield-css.js
CHANGED
package/src/zui-formfield.ts
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { ZuiBaseElement } from '@zywave/zui-base';
|
|
2
2
|
import { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-element';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { html } from 'lit';
|
|
4
|
+
import { property, query } from 'lit/decorators.js';
|
|
5
5
|
import { style } from './zui-formfield-css.js';
|
|
6
|
-
import type { TemplateResult, CSSResult, CSSResultArray } from 'lit-element';
|
|
7
6
|
|
|
8
7
|
/**
|
|
9
8
|
* ### Example
|
|
@@ -13,7 +12,6 @@ import type { TemplateResult, CSSResult, CSSResultArray } from 'lit-element';
|
|
|
13
12
|
* </zui-formfield>
|
|
14
13
|
* ```
|
|
15
14
|
*/
|
|
16
|
-
@customElement('zui-formfield')
|
|
17
15
|
export class ZuiFormField extends ZuiBaseElement {
|
|
18
16
|
/**
|
|
19
17
|
* property to label the control. If provided, can be styled with ::part(label). (optional)
|
|
@@ -27,22 +25,22 @@ export class ZuiFormField extends ZuiBaseElement {
|
|
|
27
25
|
|
|
28
26
|
@query('slot') _slotEl: HTMLSlotElement;
|
|
29
27
|
|
|
30
|
-
get _control()
|
|
28
|
+
get _control() {
|
|
31
29
|
return findAssignedElement(this._slotEl, this.controlSelector);
|
|
32
30
|
}
|
|
33
31
|
|
|
34
|
-
static get styles()
|
|
32
|
+
static get styles() {
|
|
35
33
|
return [super.styles, style];
|
|
36
34
|
}
|
|
37
35
|
|
|
38
|
-
render()
|
|
36
|
+
render() {
|
|
39
37
|
return html`
|
|
40
38
|
${this.label ? html` <label @click="${this._onLabelClick}" part="label">${this.label}</label> ` : html``}
|
|
41
39
|
<slot></slot>
|
|
42
40
|
`;
|
|
43
41
|
}
|
|
44
42
|
|
|
45
|
-
private _onLabelClick()
|
|
43
|
+
private _onLabelClick() {
|
|
46
44
|
const control = this._control;
|
|
47
45
|
if (control) {
|
|
48
46
|
control.focus();
|
|
@@ -51,6 +49,8 @@ export class ZuiFormField extends ZuiBaseElement {
|
|
|
51
49
|
}
|
|
52
50
|
}
|
|
53
51
|
|
|
52
|
+
window.customElements.define('zui-formfield', ZuiFormField);
|
|
53
|
+
|
|
54
54
|
declare global {
|
|
55
55
|
interface HTMLElementTagNameMap {
|
|
56
56
|
'zui-formfield': ZuiFormField;
|