@zywave/zui-formfield 4.0.24-pre.0 → 4.0.24

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 (10) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +1 -1
  3. package/demo/index.html +24 -1
  4. package/dist/custom-elements.json +30 -13
  5. package/dist/zui-formfield.d.ts +6 -12
  6. package/dist/zui-formfield.js +22 -21
  7. package/dist/zui-formfield.js.map +1 -1
  8. package/lab.html +1 -1
  9. package/package.json +3 -12
  10. package/src/zui-formfield.ts +14 -16
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.24](https://gitlab.com/zywave/devkit/zui/zui/compare/@zywave/zui-formfield@4.0.24-pre.3...@zywave/zui-formfield@4.0.24) (2022-01-26)
7
+
8
+ **Note:** Version bump only for package @zywave/zui-formfield
9
+
10
+
11
+
12
+
13
+
6
14
  ## [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
15
 
8
16
  **Note:** Version bump only for package @zywave/zui-formfield
package/README.md CHANGED
@@ -14,7 +14,7 @@ _yarn_:
14
14
  > yarn add @zywave/zui-formfield
15
15
  ```
16
16
 
17
- See [the documentation site](http://zui.zywave.com/) for more information.
17
+ See [the documentation site](https://booster.zywave.dev/) for more information.
18
18
 
19
19
  ## Running locally
20
20
 
package/demo/index.html CHANGED
@@ -11,8 +11,31 @@
11
11
  import("../../../../scripts/demo/demo.js");
12
12
  </script>
13
13
 
14
- <section component="zui-formfield" heading="Example">
14
+ <section component="zui-formfield" heading="Formfield with ZUI Input">
15
15
  <zui-formfield label="ZUI input">
16
16
  <zui-input name="zui-input"></zui-input>
17
17
  </zui-formfield>
18
18
  </section>
19
+
20
+ <section component="zui-formfield" heading="Formfield with native select">
21
+ <zui-formfield label="Vanilla select">
22
+ <select name="vanilla-select">
23
+ <option>Vanilla1</option>
24
+ <option>Vanilla2</option>
25
+ </select>
26
+ </zui-formfield>
27
+ </section>
28
+
29
+ <section component="zui-formfield" heading="Styling the label with CSS Shadow Parts">
30
+ <style>
31
+ .part-demo::part(label) {
32
+ background-color: hotpink;
33
+ }
34
+ </style>
35
+ <div style="display: flex; flex-direction: column">
36
+ <zui-formfield class="part-demo" label="Label part styling">
37
+ <zui-input name="vanilla-input" value="pink!"></zui-input>
38
+ </zui-formfield>
39
+ <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part"><code>::part() pseudo-element</code></a>
40
+ </div>
41
+ </section>
package/dist/custom-elements.json CHANGED
@@ -8,22 +8,34 @@
8
8
  "declarations": [
9
9
  {
10
10
  "kind": "class",
11
- "description": "### Example\n```html\n<zui-formfield label=\"A label\">\n <zui-input value=\"A value\"></zui-input>\n</zui-formfield>\n```",
11
+ "description": "",
12
12
  "name": "ZuiFormField",
13
+ "cssParts": [
14
+ {
15
+ "description": "The inner label pseudo-element. Only available if the label attribute is supplied",
16
+ "name": "label"
17
+ }
18
+ ],
13
19
  "members": [
14
20
  {
15
21
  "kind": "field",
16
22
  "name": "label",
17
23
  "type": {
18
- "text": "string | undefined"
24
+ "text": "string | null"
19
25
  },
20
- "description": "property to label the control. If provided, can be styled with ::part(label). (optional)"
26
+ "default": "null",
27
+ "description": "label for the associated control.",
28
+ "attribute": "label"
21
29
  },
22
30
  {
23
31
  "kind": "field",
24
32
  "name": "controlSelector",
25
- "description": "property to help zui-formfield find the correct form control. Defaults to the first child element. (optional)",
26
- "default": "*"
33
+ "type": {
34
+ "text": "string"
35
+ },
36
+ "default": "'*'",
37
+ "description": "a valid CSS selector to allow the formfield to find the correct form control. Defaults to the first child element.",
38
+ "attribute": "control-selector"
27
39
  },
28
40
  {
29
41
  "kind": "field",
@@ -34,32 +46,37 @@
34
46
  },
35
47
  {
36
48
  "kind": "field",
37
- "name": "_control"
49
+ "name": "#control",
50
+ "privacy": "private"
38
51
  },
39
52
  {
40
53
  "kind": "method",
41
- "name": "_onLabelClick",
42
- "privacy": "private"
54
+ "name": "#onLabelClick"
43
55
  }
44
56
  ],
45
57
  "attributes": [
46
58
  {
47
59
  "name": "label",
48
60
  "type": {
49
- "text": "string | undefined"
61
+ "text": "string | null"
50
62
  },
51
- "description": "property to label the control. If provided, can be styled with ::part(label). (optional)",
63
+ "default": "null",
64
+ "description": "label for the associated control.",
52
65
  "fieldName": "label"
53
66
  },
54
67
  {
55
68
  "name": "control-selector",
56
- "description": "property to help zui-formfield find the correct form control. Defaults to the first child element. (optional)",
57
- "default": "*",
69
+ "type": {
70
+ "text": "string"
71
+ },
72
+ "default": "'*'",
73
+ "description": "a valid CSS selector to allow the formfield to find the correct form control. Defaults to the first child element.",
58
74
  "fieldName": "controlSelector"
59
75
  }
60
76
  ],
61
77
  "superclass": {
62
- "name": "ZuiBaseElement"
78
+ "name": "ZuiBaseElement",
79
+ "package": "@zywave/zui-base"
63
80
  },
64
81
  "tagName": "zui-formfield",
65
82
  "customElement": true
package/dist/zui-formfield.d.ts CHANGED
@@ -1,26 +1,20 @@
1
1
  import { ZuiBaseElement } from '@zywave/zui-base';
2
2
  /**
3
- * ### Example
4
- * ```html
5
- * <zui-formfield label="A label">
6
- * <zui-input value="A value"></zui-input>
7
- * </zui-formfield>
8
- * ```
3
+ * @csspart label - The inner label pseudo-element. Only available if the label attribute is supplied
9
4
  */
10
5
  export declare class ZuiFormField extends ZuiBaseElement {
6
+ #private;
11
7
  /**
12
- * property to label the control. If provided, can be styled with ::part(label). (optional)
8
+ * label for the associated control.
13
9
  */
14
- label: string | undefined;
10
+ label: string | null;
15
11
  /**
16
- * property to help zui-formfield find the correct form control. Defaults to the first child element. (optional)
12
+ * a valid CSS selector to allow the formfield to find the correct form control. Defaults to the first child element.
17
13
  */
18
14
  controlSelector: string;
19
15
  _slotEl: HTMLSlotElement;
20
- get _control(): HTMLElement;
21
- static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
16
+ static get styles(): import("lit").CSSResultGroup[];
22
17
  render(): import("lit-html").TemplateResult<1>;
23
- private _onLabelClick;
24
18
  }
25
19
  declare global {
26
20
  interface HTMLElementTagNameMap {
package/dist/zui-formfield.js CHANGED
@@ -4,51 +4,52 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
4
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
5
  return c > 3 && r && Object.defineProperty(target, key, r), r;
6
6
  };
7
+ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
8
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
9
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
10
+ return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
+ };
12
+ var _ZuiFormField_instances, _ZuiFormField_control_get, _ZuiFormField_onLabelClick;
7
13
  import { ZuiBaseElement } from '@zywave/zui-base';
8
14
  import { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-element';
9
- import { html } from 'lit';
15
+ import { html, nothing } from 'lit';
10
16
  import { property, query } from 'lit/decorators.js';
11
17
  import { style } from './zui-formfield-css.js';
12
18
  /**
13
- * ### Example
14
- * ```html
15
- * <zui-formfield label="A label">
16
- * <zui-input value="A value"></zui-input>
17
- * </zui-formfield>
18
- * ```
19
+ * @csspart label - The inner label pseudo-element. Only available if the label attribute is supplied
19
20
  */
20
21
  export class ZuiFormField extends ZuiBaseElement {
21
22
  constructor() {
22
23
  super(...arguments);
24
+ _ZuiFormField_instances.add(this);
23
25
  /**
24
- * property to label the control. If provided, can be styled with ::part(label). (optional)
26
+ * label for the associated control.
25
27
  */
26
- this.label = undefined;
28
+ this.label = null;
27
29
  /**
28
- * property to help zui-formfield find the correct form control. Defaults to the first child element. (optional)
30
+ * a valid CSS selector to allow the formfield to find the correct form control. Defaults to the first child element.
29
31
  */
30
32
  this.controlSelector = '*';
31
33
  }
32
- get _control() {
33
- return findAssignedElement(this._slotEl, this.controlSelector);
34
- }
35
34
  static get styles() {
36
35
  return [super.styles, style];
37
36
  }
38
37
  render() {
39
38
  return html `
40
- ${this.label ? html ` <label @click="${this._onLabelClick}" part="label">${this.label}</label> ` : html ``}
39
+ ${this.label ? html ` <label @click="${__classPrivateFieldGet(this, _ZuiFormField_instances, "m", _ZuiFormField_onLabelClick)}" part="label">${this.label}</label> ` : nothing}
41
40
  <slot></slot>
42
41
  `;
43
42
  }
44
- _onLabelClick() {
45
- const control = this._control;
46
- if (control) {
47
- control.focus();
48
- control.click();
49
- }
50
- }
51
43
  }
44
+ _ZuiFormField_instances = new WeakSet(), _ZuiFormField_control_get = function _ZuiFormField_control_get() {
45
+ return findAssignedElement(this._slotEl, this.controlSelector);
46
+ }, _ZuiFormField_onLabelClick = function _ZuiFormField_onLabelClick() {
47
+ const control = __classPrivateFieldGet(this, _ZuiFormField_instances, "a", _ZuiFormField_control_get);
48
+ if (control) {
49
+ control.focus();
50
+ control.click();
51
+ }
52
+ };
52
53
  __decorate([
53
54
  property({ type: String })
54
55
  ], ZuiFormField.prototype, "label", void 0);
package/dist/zui-formfield.js.map CHANGED
@@ -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,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"]}
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,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,cAAc;IAAhD;;;QACE;;WAEG;QAEH,UAAK,GAAkB,IAAI,CAAC;QAE5B;;WAEG;QAEH,oBAAe,GAAG,GAAG,CAAC;IA2BxB,CAAC;IAlBC,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,uBAAA,IAAI,2DAAc,kBAAkB,IAAI,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,OAAO;;KAE1G,CAAC;IACJ,CAAC;CASF;;IArBG,OAAO,mBAAmB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;AACjE,CAAC;IAcC,MAAM,OAAO,GAAG,uBAAA,IAAI,0DAAS,CAAC;IAC9B,IAAI,OAAO,EAAE;QACX,OAAO,CAAC,KAAK,EAAE,CAAC;QAChB,OAAO,CAAC,KAAK,EAAE,CAAC;KACjB;AACH,CAAC;AAhCD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACC;AAM5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;qDACpC;AAGtB;IADC,KAAK,CAAC,MAAM,CAAC;6CACW;AA0B3B,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, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { style } from './zui-formfield-css.js';\n\n/**\n * @csspart label - The inner label pseudo-element. Only available if the label attribute is supplied\n */\nexport class ZuiFormField extends ZuiBaseElement {\n /**\n * label for the associated control.\n */\n @property({ type: String })\n label: string | null = null;\n\n /**\n * a valid CSS selector to allow the formfield to find the correct form control. Defaults to the first child element.\n */\n @property({ type: String, attribute: 'control-selector' })\n controlSelector = '*';\n\n @query('slot')\n _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> ` : nothing}\n <slot></slot>\n `;\n }\n\n #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
@@ -50,7 +50,7 @@
50
50
  }
51
51
 
52
52
  .part-demo::part(label)::before {
53
- content: "This browser supports CSS Shadow Parts!";
53
+ content: "This browser supports CSS Shadow Parts";
54
54
  font-size: 10px;
55
55
  }
56
56
  .part-demo::part(label) {
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@zywave/zui-formfield",
3
- "version": "4.0.24-pre.0",
3
+ "version": "4.0.24",
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.19-pre.0"
8
+ "@zywave/zui-base": "^4.1.19"
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": "7b8371bdb6f40e669a84815aa2e4f92d7938e406"
26
+ "gitHead": "be591f9f992e3555c1891d00a70b140e56bd6616"
36
27
  }
package/src/zui-formfield.ts CHANGED
@@ -1,31 +1,29 @@
1
1
  import { ZuiBaseElement } from '@zywave/zui-base';
2
2
  import { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-element';
3
- import { html } from 'lit';
3
+ import { html, nothing } from 'lit';
4
4
  import { property, query } from 'lit/decorators.js';
5
5
  import { style } from './zui-formfield-css.js';
6
6
 
7
7
  /**
8
- * ### Example
9
- * ```html
10
- * <zui-formfield label="A label">
11
- * <zui-input value="A value"></zui-input>
12
- * </zui-formfield>
13
- * ```
8
+ * @csspart label - The inner label pseudo-element. Only available if the label attribute is supplied
14
9
  */
15
10
  export class ZuiFormField extends ZuiBaseElement {
16
11
  /**
17
- * property to label the control. If provided, can be styled with ::part(label). (optional)
12
+ * label for the associated control.
18
13
  */
19
- @property({ type: String }) label: string | undefined = undefined;
14
+ @property({ type: String })
15
+ label: string | null = null;
20
16
 
21
17
  /**
22
- * property to help zui-formfield find the correct form control. Defaults to the first child element. (optional)
18
+ * a valid CSS selector to allow the formfield to find the correct form control. Defaults to the first child element.
23
19
  */
24
- @property({ type: String, attribute: 'control-selector' }) controlSelector = '*';
20
+ @property({ type: String, attribute: 'control-selector' })
21
+ controlSelector = '*';
25
22
 
26
- @query('slot') _slotEl: HTMLSlotElement;
23
+ @query('slot')
24
+ _slotEl: HTMLSlotElement;
27
25
 
28
- get _control() {
26
+ get #control() {
29
27
  return findAssignedElement(this._slotEl, this.controlSelector);
30
28
  }
31
29
 
@@ -35,13 +33,13 @@ export class ZuiFormField extends ZuiBaseElement {
35
33
 
36
34
  render() {
37
35
  return html`
38
- ${this.label ? html` <label @click="${this._onLabelClick}" part="label">${this.label}</label> ` : html``}
36
+ ${this.label ? html` <label @click="${this.#onLabelClick}" part="label">${this.label}</label> ` : nothing}
39
37
  <slot></slot>
40
38
  `;
41
39
  }
42
40
 
43
- private _onLabelClick() {
44
- const control = this._control;
41
+ #onLabelClick() {
42
+ const control = this.#control;
45
43
  if (control) {
46
44
  control.focus();
47
45
  control.click();