@zywave/zui-formfield 4.0.26 → 4.0.27

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 (16) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/css/zui-formfield.fouc.css +1 -1
  3. package/dist/custom-elements.json +2 -2
  4. package/dist/zui-formfield-css.js +1 -1
  5. package/dist/zui-formfield-css.js.map +1 -1
  6. package/dist/zui-formfield.d.ts +2 -2
  7. package/dist/zui-formfield.js +5 -3
  8. package/dist/zui-formfield.js.map +1 -1
  9. package/lab.html +301 -230
  10. package/package.json +3 -3
  11. package/src/_field.scss +1 -1
  12. package/src/css/zui-formfield.fouc.scss +9 -3
  13. package/src/zui-formfield-css.js +1 -1
  14. package/src/zui-formfield.scss +17 -4
  15. package/src/zui-formfield.ts +5 -3
  16. package/test/zui-formfield.test.ts +39 -0
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.27](https://gitlab.com/zywave/devkit/web-sdk/zui/compare/@zywave/zui-formfield@4.0.27-pre.1...@zywave/zui-formfield@4.0.27) (2022-05-04)
7
+
8
+ **Note:** Version bump only for package @zywave/zui-formfield
9
+
10
+
11
+
12
+
13
+
6
14
  ## [4.0.26](https://gitlab.com/zywave/devkit/web-sdk/zui/compare/@zywave/zui-formfield@4.0.26-pre.0...@zywave/zui-formfield@4.0.26) (2022-03-25)
7
15
 
8
16
  **Note:** Version bump only for package @zywave/zui-formfield
package/dist/css/zui-formfield.fouc.css CHANGED
@@ -1 +1 @@
1
- zui-formfield:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:inline-flex;margin-bottom:1.25rem}zui-formfield:not(:defined)::before{display:inline-flex;content:attr(label);margin:.625rem .9375rem 0 0;font-weight:600;color:var(--zui-gray-800)}zui-formfield:not(:defined) *,zui-formfield:not(:defined) *::before,zui-formfield:not(:defined) *::after{box-sizing:inherit}
1
+ zui-formfield:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;flex-direction:column;margin-bottom:1.25rem}zui-formfield:not(:defined)::before,zui-formfield:not(:defined) label{display:inline-flex;content:attr(label);margin:0 0 .25rem;font-weight:600;color:var(--zui-gray-800)}zui-formfield:not(:defined) zui-toggle{margin:.9375rem 0}zui-formfield:not(:defined) *,zui-formfield:not(:defined) *::before,zui-formfield:not(:defined) *::after{box-sizing:inherit}
package/dist/custom-elements.json CHANGED
@@ -24,7 +24,7 @@
24
24
  "text": "string | null"
25
25
  },
26
26
  "default": "null",
27
- "description": "(optional): property to label the control. If provided, can be styled with `::part(label)`.",
27
+ "description": "(optional): Label text, for the form control. Alternatively can slot in label text instead. If necessary, can be styled with `::part(label)`.",
28
28
  "attribute": "label"
29
29
  },
30
30
  {
@@ -61,7 +61,7 @@
61
61
  "text": "string | null"
62
62
  },
63
63
  "default": "null",
64
- "description": "(optional): property to label the control. If provided, can be styled with `::part(label)`.",
64
+ "description": "(optional): Label text, for the form control. Alternatively can slot in label text instead. If necessary, can be styled with `::part(label)`.",
65
65
  "fieldName": "label"
66
66
  },
67
67
  {
package/dist/zui-formfield-css.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import { css } from 'lit';
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}`;
2
+ export const style = css `:host .container label,:host .container ::slotted(label){display:inline-flex;margin:0;font-weight:600;color:var(--zui-gray-800)}:host{contain:none}:host .container{display:flex;flex-direction:column;margin-bottom:1.25rem}:host .container ::slotted(*:not(zui-toggle):not(zui-checkbox):not(zui-radio)){margin-top:.25rem !important}:host .container ::slotted(zui-toggle){margin:.9375rem 0}`;
3
3
  //# sourceMappingURL=zui-formfield-css.js.map
package/dist/zui-formfield-css.js.map CHANGED
@@ -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,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"]}
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,oYAAoY,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host .container label,:host .container ::slotted(label){display:inline-flex;margin:0;font-weight:600;color:var(--zui-gray-800)}:host{contain:none}:host .container{display:flex;flex-direction:column;margin-bottom:1.25rem}:host .container ::slotted(*:not(zui-toggle):not(zui-checkbox):not(zui-radio)){margin-top:.25rem !important}:host .container ::slotted(zui-toggle){margin:.9375rem 0}`;\n"]}
package/dist/zui-formfield.d.ts CHANGED
@@ -7,7 +7,7 @@ import { ZuiBaseElement } from '@zywave/zui-base';
7
7
  export declare class ZuiFormField extends ZuiBaseElement {
8
8
  #private;
9
9
  /**
10
- * (optional): property to label the control. If provided, can be styled with `::part(label)`.
10
+ * (optional): Label text, for the form control. Alternatively can slot in label text instead. If necessary, can be styled with `::part(label)`.
11
11
  */
12
12
  label: string | null;
13
13
  /**
@@ -15,7 +15,7 @@ export declare class ZuiFormField extends ZuiBaseElement {
15
15
  */
16
16
  controlSelector: string;
17
17
  _slotEl: HTMLSlotElement;
18
- static get styles(): import("lit").CSSResultGroup[];
18
+ static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
19
19
  render(): import("lit-html").TemplateResult<1>;
20
20
  }
21
21
  declare global {
package/dist/zui-formfield.js CHANGED
@@ -25,7 +25,7 @@ export class ZuiFormField extends ZuiBaseElement {
25
25
  super(...arguments);
26
26
  _ZuiFormField_instances.add(this);
27
27
  /**
28
- * (optional): property to label the control. If provided, can be styled with `::part(label)`.
28
+ * (optional): Label text, for the form control. Alternatively can slot in label text instead. If necessary, can be styled with `::part(label)`.
29
29
  */
30
30
  this.label = null;
31
31
  /**
@@ -38,8 +38,10 @@ export class ZuiFormField extends ZuiBaseElement {
38
38
  }
39
39
  render() {
40
40
  return html `
41
- ${this.label ? html ` <label @click="${__classPrivateFieldGet(this, _ZuiFormField_instances, "m", _ZuiFormField_onLabelClick)}" part="label">${this.label}</label> ` : nothing}
42
- <slot></slot>
41
+ <div class="container">
42
+ ${this.label ? html ` <label @click="${__classPrivateFieldGet(this, _ZuiFormField_instances, "m", _ZuiFormField_onLabelClick)}" part="label">${this.label}</label> ` : nothing}
43
+ <slot></slot>
44
+ </div>
43
45
  `;
44
46
  }
45
47
  }
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,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;;;;GAIG;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 * `<zui-formfield>`'s provide a standardized way of labeling and styling form controls.\n *\n * @slot - Unnamed slot, pass in form controls including native and those defined by ZUI\n */\nexport class ZuiFormField extends ZuiBaseElement {\n /**\n * (optional): property to label the control. If provided, can be styled with `::part(label)`.\n */\n @property({ type: String })\n label: string | null = null;\n\n /**\n * (optional): Provide a valid CSS selector to help `zui-formfield` 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"]}
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;;;;GAIG;AACH,MAAM,OAAO,YAAa,SAAQ,cAAc;IAAhD;;;QACE;;WAEG;QAEH,UAAK,GAAkB,IAAI,CAAC;QAE5B;;WAEG;QAEH,oBAAe,GAAG,GAAG,CAAC;IA6BxB,CAAC;IApBC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,mBAAmB,uBAAA,IAAI,2DAAc,kBAAkB,IAAI,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,OAAO;;;KAG5G,CAAC;IACJ,CAAC;CASF;;IAvBG,OAAO,mBAAmB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;AACjE,CAAC;IAgBC,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;AAlCD;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;AA4B3B,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 * `<zui-formfield>`'s provide a standardized way of labeling and styling form controls.\n *\n * @slot - Unnamed slot, pass in form controls including native and those defined by ZUI\n */\nexport class ZuiFormField extends ZuiBaseElement {\n /**\n * (optional): Label text, for the form control. Alternatively can slot in label text instead. If necessary, can be styled with `::part(label)`.\n */\n @property({ type: String })\n label: string | null = null;\n\n /**\n * (optional): Provide a valid CSS selector to help `zui-formfield` 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 <div class=\"container\">\n ${this.label ? html` <label @click=\"${this.#onLabelClick}\" part=\"label\">${this.label}</label> ` : nothing}\n <slot></slot>\n </div>\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
@@ -11,208 +11,161 @@
11
11
  <link rel="stylesheet" href="../../../node_modules/@zywave/zui-app-styles/dist/zui-app-styles.css" />
12
12
  <link rel="stylesheet" href="../../../node_modules/@zywave/zui-base-styles/dist/zui-base-styles.css" />
13
13
  <link rel="stylesheet" href="../../../node_modules/@zywave/zui-button/dist/css/zui-button.fouc.css" />
14
+ <link rel="stylesheet" href="../../../node_modules/@zywave/zui-card/dist/css/zui-card.fouc.css" />
14
15
  <link rel="stylesheet" href="../../../node_modules/@zywave/zui-checkbox/dist/css/zui-checkbox.fouc.css" />
15
16
  <link rel="stylesheet" href="../../../node_modules/@zywave/zui-dialog/dist/css/zui-dialog.fouc.css" />
16
17
  <link rel="stylesheet" href="../../../node_modules/@zywave/zui-input/dist/css/zui-input.fouc.css" />
18
+ <link rel="stylesheet" href="../../../node_modules/@zywave/zui-radio/dist/css/zui-radio.fouc.css" />
17
19
  <link rel="stylesheet" href="../../../node_modules/@zywave/zui-select/dist/css/zui-select.fouc.css" />
20
+ <link rel="stylesheet" href="../../../node_modules/@zywave/zui-select/dist/css/zui-select-dropdown.fouc.css" />
18
21
  <link rel="stylesheet" href="../../../node_modules/@zywave/zui-toggle/dist/css/zui-toggle.fouc.css" />
22
+ <link rel="stylesheet" href="../../../node_modules/@zywave/zui-well/dist/css/zui-well.fouc.css" />
19
23
  <link rel="stylesheet" href="./dist/css/zui-formfield.fouc.css" />
20
24
  <script src="../../../node_modules/@zywave/zui-button/dist/index.js" type="module"></script>
25
+ <script src="../../../node_modules/@zywave/zui-card/dist/index.js" type="module"></script>
21
26
  <script src="../../../node_modules/@zywave/zui-dialog/dist/index.js" type="module"></script>
22
27
  <script src="../../../node_modules/@zywave/zui-input/dist/index.js" type="module"></script>
23
28
  <script src="../../../node_modules/@zywave/zui-radio/dist/index.js" type="module"></script>
24
29
  <script src="../../../node_modules/@zywave/zui-select/dist/index.js" type="module"></script>
25
30
  <script src="../../../node_modules/@zywave/zui-toggle/dist/index.js" type="module"></script>
31
+ <script src="../../../node_modules/@zywave/zui-well/dist/index.js" type="module"></script>
26
32
  <script src="./dist/index.js" type="module" async></script>
27
33
 
28
34
  <style>
29
- body {
35
+ main {
30
36
  padding: 3rem;
31
37
  }
32
38
 
33
- .forms,
34
- .actions {
39
+ h1 {
40
+ margin-bottom: 0;
41
+ }
42
+
43
+ .modifiers {
35
44
  display: flex;
45
+ align-items: center;
46
+ margin: 1rem 0;
47
+ }
48
+
49
+ .grid {
50
+ display: grid;
51
+ grid-template-columns: repeat(3, 1fr);
52
+ gap: 3rem;
36
53
  }
37
54
 
38
- .vanilla,
39
- .boujie {
55
+ .row {
40
56
  display: flex;
41
- flex-direction: column;
57
+ justify-content: space-between;
42
58
  }
43
59
 
44
- .vanilla {
45
- margin-right: 3.125rem;
60
+ .validation-input {
61
+ box-shadow: 0 0 0 2px var(--zui-red);
46
62
  }
47
63
 
48
- zui-button + zui-button {
49
- margin-left: 0.625rem;
64
+ .validation-text {
65
+ color: var(--zui-red);
66
+ font-weight: 600;
50
67
  }
51
68
 
52
- .part-demo::part(label)::before {
53
- content: "This browser supports CSS Shadow Parts";
54
- font-size: 10px;
69
+ .is-hidden {
70
+ display: none;
55
71
  }
72
+
56
73
  .part-demo::part(label) {
57
- color: hotpink;
74
+ color: var(--zui-blue);
58
75
  }
59
76
  </style>
60
77
  </head>
61
78
 
62
79
  <body>
63
- <form id="formTest">
64
- <div class="forms">
65
- <div class="vanilla">
66
- <zui-formfield label="Vanilla select">
67
- <select name="vanilla-select">
68
- <option>Vanilla1</option>
69
- <option>Vanilla2</option>
70
- </select>
71
- </zui-formfield>
72
- <zui-formfield label="Vanilla multiselect">
73
- <select id="multiple" name="vanilla-multiselect" multiple>
74
- <option>VanillaM1</option>
75
- <option selected>VanillaM2</option>
76
- </select>
77
- </zui-formfield>
78
- <zui-formfield class="part-demo" label="Vanilla input">
79
- <input type="text" name="vanilla-input" />
80
- </zui-formfield>
81
- <zui-formfield label="Vanilla checkbox">
82
- <input type="checkbox" name="vanilla-checkbox" />
83
- </zui-formfield>
84
- <zui-formfield label="Vanilla radio">
85
- <input type="radio" name="vanilla-radio" />
86
- </zui-formfield>
87
- <zui-formfield label="Vanilla radio2">
88
- <input type="radio" name="vanilla-radio2" value="vanilla-radio2" />
89
- </zui-formfield>
90
- </div>
91
- <div class="boujie">
92
- <zui-formfield label="ZUI Multiselect Dropdown">
93
- <zui-select-dropdown id="zuiSelectDropdown" name="zui-select-dropdown" multiple placeholder="Select multiple values...">
94
- <zui-option value="test-1">Test1</zui-option>
95
- <zui-option value="test-2">Test2</zui-option>
96
- <zui-option value="test-3">Test3</zui-option>
97
- <zui-option value="test-4">Test4</zui-option>
98
- <zui-option value="test-5">Test5</zui-option>
99
- </zui-select-dropdown>
100
- </zui-formfield>
101
- <zui-formfield label="ZUI MultiSelect">
102
- <zui-select id="zuiSelect" name="zui-select" placeholder="Select multiple values..." multiple>
103
- <zui-option value="test-1">Test1</zui-option>
104
- <zui-option value="test-2">Test2</zui-option>
105
- <zui-option value="test-3">Test3</zui-option>
106
- <zui-option value="test-4">Test4</zui-option>
107
- <zui-option value="test-5">Test5</zui-option>
108
- </zui-select>
109
- </zui-formfield>
110
- <zui-formfield label="ZUI Select">
111
- <zui-select id="zuiSelect2" name="zui-select2">
112
- <zui-option value="test-1">Test1</zui-option>
113
- <zui-option value="test-2">Test2</zui-option>
114
- <zui-option value="test-3">Test3</zui-option>
115
- <zui-option value="test-4">Test4</zui-option>
116
- <zui-option value="test-5">Test5</zui-option>
117
- </zui-select>
118
- </zui-formfield>
119
- <zui-formfield class="part-demo" label="ZUI input">
120
- <zui-input name="zui-input"></zui-input>
121
- </zui-formfield>
122
- <zui-formfield label="ZUI Checkbox">
123
- <zui-checkbox name="zui-checkbox" value="banana" checked></zui-checkbox>
124
- </zui-formfield>
125
- <zui-formfield label="ZUI Checkbox">
126
- <zui-checkbox name="zui-checkbox"></zui-checkbox>
127
- </zui-formfield>
128
- <zui-formfield label="ZUI Toggle">
129
- <zui-toggle name="zui-toggle"></zui-toggle>
130
- </zui-formfield>
131
- <zui-formfield label="ZUI radio">
132
- <zui-radio name="zui-radio"></zui-radio>
133
- </zui-formfield>
134
- <zui-formfield label="ZUI radio2">
135
- <zui-radio name="zui-radio2" value="zui-radio2-value"></zui-radio>
136
- </zui-formfield>
137
- </div>
138
- </div>
139
- <div class="actions">
140
- <zui-button>
141
- <button type="submit">Submit</button>
142
- </zui-button>
143
- <zui-button class="link">
144
- <button type="reset">Reset</button>
145
- </zui-button>
80
+ <main>
81
+ <h1>zui-formfield</h1>
82
+ <hr />
83
+ <div class="modifiers">
84
+ <zui-button class="secondary" id="dialogLaunch">Open dialog form</zui-button>
146
85
  </div>
147
- </form>
148
-
149
- <hr class="zui line-break">
150
-
151
- <zui-button id="dialogBtn">Form submission in a dialog</zui-button>
152
-
153
- <form id="formTestDialog">
154
- <zui-dialog class="large" id="dialog">
155
- <h1 slot="header">Testing form submission and styles in a ZUI dialog</h1>
156
- <div class="forms" slot="content">
157
- <div class="vanilla">
158
- <zui-formfield label="Vanilla select">
159
- <select name="vanilla-select">
160
- <option>Vanilla1</option>
161
- <option>Vanilla2</option>
86
+ <div class="grid">
87
+ <zui-card>
88
+ <h2>Native form controls</h2>
89
+ <form id="form-native-element">
90
+ <zui-formfield label="Native select">
91
+ <select name="Native-select">
92
+ <option>Native1</option>
93
+ <option>Native2</option>
162
94
  </select>
163
95
  </zui-formfield>
164
- <zui-formfield label="Vanilla multiselect">
165
- <select id="multiple" name="vanilla-multiselect" multiple>
166
- <option>VanillaM1</option>
167
- <option selected>VanillaM2</option>
96
+ <zui-formfield label="Native multiselect">
97
+ <select id="multiple" name="Native-multiselect" multiple>
98
+ <option>NativeM1</option>
99
+ <option selected>NativeM2</option>
168
100
  </select>
169
101
  </zui-formfield>
170
- <zui-formfield class="part-demo" label="Vanilla input">
171
- <input type="text" name="vanilla-input" />
102
+ <zui-formfield class="part-demo" label="Native input">
103
+ <input type="text" name="Native-input" />
172
104
  </zui-formfield>
173
- <zui-formfield label="Vanilla checkbox">
174
- <input type="checkbox" name="vanilla-checkbox" />
105
+ <zui-formfield label="Native checkbox">
106
+ <input type="checkbox" name="Native-checkbox" />
175
107
  </zui-formfield>
176
- <zui-formfield label="Vanilla radio">
177
- <input type="radio" name="vanilla-radio" />
108
+ <zui-formfield label="Native radio">
109
+ <input type="radio" name="Native-radio" />
178
110
  </zui-formfield>
179
- <zui-formfield label="Vanilla radio2">
180
- <input type="radio" name="vanilla-radio2" value="vanilla-radio2" />
111
+ <zui-formfield label="Native radio2">
112
+ <input type="radio" name="Native-radio2" value="Native-radio2" />
181
113
  </zui-formfield>
182
- </div>
183
- <div class="boujie">
184
- <zui-formfield label="ZUI Select Dropdown">
185
- <zui-select-dropdown id="zuiSelectDialogDropdown" name="zui-select-dropdown" multiple searchable>
186
- <zui-option>Test1</zui-option>
187
- <zui-option value="test-2-value">Test2</zui-option>
188
- <zui-option>Test3</zui-option>
189
- <zui-option>Test4</zui-option>
190
- <zui-option>Test5</zui-option>
114
+ <div class="actions">
115
+ <zui-button>
116
+ <button type="submit">Submit</button>
117
+ </zui-button>
118
+ <zui-button class="link">
119
+ <button type="reset">Reset</button>
120
+ </zui-button>
121
+ </div>
122
+ </form>
123
+ </zui-card>
124
+
125
+ <zui-card>
126
+ <h2>ZUI form controls</h2>
127
+ <form id="form-zui-controls-element">
128
+ <zui-formfield label="ZUI MultiselectDropdown">
129
+ <zui-select-dropdown
130
+ id="zuiSelectDropdown"
131
+ name="zui-select-dropdown"
132
+ multiple
133
+ placeholder="Select multiple values..."
134
+ >
135
+ <zui-option value="test-1">Test1</zui-option>
136
+ <zui-option value="test-2">Test2</zui-option>
137
+ <zui-option value="test-3">Test3</zui-option>
138
+ <zui-option value="test-4">Test4</zui-option>
139
+ <zui-option value="test-5">Test5</zui-option>
191
140
  </zui-select-dropdown>
192
141
  </zui-formfield>
193
- <zui-formfield label="ZUI Select">
194
- <zui-select id="zuiSelectDialog" name="zui-select" placeholder="Select one">
142
+ <zui-formfield label="ZUI MultiSelect">
143
+ <zui-select id="zuiSelect" name="zui-select" placeholder="Select multiple values..." multiple>
195
144
  <zui-option value="test-1">Test1</zui-option>
196
- <zui-option>Test2</zui-option>
197
- <zui-option>Test3</zui-option>
198
- <zui-option>Test4</zui-option>
199
- <zui-option>Test5</zui-option>
145
+ <zui-option value="test-2">Test2</zui-option>
146
+ <zui-option value="test-3">Test3</zui-option>
147
+ <zui-option value="test-4">Test4</zui-option>
148
+ <zui-option value="test-5">Test5</zui-option>
200
149
  </zui-select>
201
150
  </zui-formfield>
202
151
  <zui-formfield label="ZUI Select">
203
- <zui-select id="zuiSelectDialog2" name="zui-select2">
204
- <zui-option>Test1</zui-option>
205
- <zui-option value="test-1">Test2</zui-option>
206
- <zui-option>Test3</zui-option>
207
- <zui-option>Test4</zui-option>
208
- <zui-option>Test5</zui-option>
152
+ <zui-select id="zuiSelect2" name="zui-select2">
153
+ <zui-option value="test-1">Test1</zui-option>
154
+ <zui-option value="test-2">Test2</zui-option>
155
+ <zui-option value="test-3">Test3</zui-option>
156
+ <zui-option value="test-4">Test4</zui-option>
157
+ <zui-option value="test-5">Test5</zui-option>
209
158
  </zui-select>
210
159
  </zui-formfield>
211
160
  <zui-formfield class="part-demo" label="ZUI input">
212
161
  <zui-input name="zui-input"></zui-input>
213
162
  </zui-formfield>
214
163
  <zui-formfield label="ZUI Checkbox">
215
- <zui-checkbox name="zui-checkbox"></zui-checkbox>
164
+ <zui-checkbox name="zui-checkbox" value="banana" checked></zui-checkbox>
165
+ </zui-formfield>
166
+ <zui-formfield>
167
+ <label for="zuiCheckboxLabel">ZUI Checkbox</label>
168
+ <zui-checkbox id="zuiCheckboxLabel" name="zui-checkbox"></zui-checkbox>
216
169
  </zui-formfield>
217
170
  <zui-formfield label="ZUI Toggle">
218
171
  <zui-toggle name="zui-toggle"></zui-toggle>
@@ -223,105 +176,223 @@
223
176
  <zui-formfield label="ZUI radio2">
224
177
  <zui-radio name="zui-radio2" value="zui-radio2-value"></zui-radio>
225
178
  </zui-formfield>
179
+ <div class="actions">
180
+ <zui-button>
181
+ <button type="submit">Submit</button>
182
+ </zui-button>
183
+ <zui-button class="link">
184
+ <button type="reset">Reset</button>
185
+ </zui-button>
186
+ </div>
187
+ </form>
188
+ </zui-card>
189
+
190
+ <zui-card>
191
+ <h2>ZUI .form utility class + ZUI form controls</h2>
192
+ <div>
193
+ <zui-checkbox id="zuiCheckboxValidate">validation</zui-checkbox>
226
194
  </div>
227
- </div>
228
- <div slot="footer">
229
- <zui-button class="link" style="margin-right: auto;">
230
- <button type="reset">Reset</button>
231
- </zui-button>
232
- <zui-button class="link" dialog-close>Cancel</zui-button>
233
- <zui-button dialog-confirm>
234
- <button type="submit">Submit</button>
235
- </zui-button>
236
- </div>
237
- </zui-dialog>
238
- </form>
195
+ <form id="form-utility-class-element" class="zui form">
196
+ <zui-formfield label="ZUI Multiselect Dropdown">
197
+ <zui-select-dropdown
198
+ id="zuiSelectDropdown"
199
+ name="zui-select-dropdown"
200
+ multiple
201
+ placeholder="Select multiple values..."
202
+ >
203
+ <zui-option value="test-1">Test1</zui-option>
204
+ <zui-option value="test-2">Test2</zui-option>
205
+ <zui-option value="test-3">Test3</zui-option>
206
+ <zui-option value="test-4">Test4</zui-option>
207
+ <zui-option value="test-5">Test5</zui-option>
208
+ </zui-select-dropdown>
209
+ </zui-formfield>
210
+ <zui-formfield label="ZUI MultiSelect">
211
+ <zui-select id="zuiSelect" name="zui-select" placeholder="Select multiple values..." multiple>
212
+ <zui-option value="test-1">Test1</zui-option>
213
+ <zui-option value="test-2">Test2</zui-option>
214
+ <zui-option value="test-3">Test3</zui-option>
215
+ <zui-option value="test-4">Test4</zui-option>
216
+ <zui-option value="test-5">Test5</zui-option>
217
+ </zui-select>
218
+ </zui-formfield>
219
+ <zui-formfield label="ZUI Select">
220
+ <zui-select id="zuiSelect2" name="zui-select2">
221
+ <zui-option value="test-1">Test1</zui-option>
222
+ <zui-option value="test-2">Test2</zui-option>
223
+ <zui-option value="test-3">Test3</zui-option>
224
+ <zui-option value="test-4">Test4</zui-option>
225
+ <zui-option value="test-5">Test5</zui-option>
226
+ </zui-select>
227
+ </zui-formfield>
228
+ <zui-formfield class="part-demo" label="ZUI input" id="validation-formfield">
229
+ <div>
230
+ <zui-input name="zui-input"></zui-input>
231
+ <div class="validation-text is-hidden">Please fill out the above input.</div>
232
+ </div>
233
+ </zui-formfield>
234
+ <zui-formfield label="ZUI Checkbox">
235
+ <zui-checkbox name="zui-checkbox" checked></zui-checkbox>
236
+ </zui-formfield>
237
+ <zui-formfield label="ZUI Toggle">
238
+ <zui-toggle name="zui-toggle"></zui-toggle>
239
+ </zui-formfield>
240
+ <zui-formfield label="ZUI radio">
241
+ <zui-radio name="zui-radio"></zui-radio>
242
+ </zui-formfield>
243
+ <zui-formfield label="ZUI radio2">
244
+ <zui-radio name="zui-radio2" value="zui-radio2-value"></zui-radio>
245
+ </zui-formfield>
246
+ <div class="validation">
247
+ <zui-well animated type="error" class="is-hidden">Hold on! You'll need to fix the highlighted items above to continue.</zui-well>
248
+ </div>
249
+ <div class="actions">
250
+ <zui-button>
251
+ <button type="submit">Submit</button>
252
+ </zui-button>
253
+ <zui-button class="link">
254
+ <button type="reset">Reset</button>
255
+ </zui-button>
256
+ </div>
257
+ </form>
258
+ </zui-card>
259
+
260
+ <form id="form-dialog-element">
261
+ <zui-dialog class="large" id="dialog">
262
+ <h1 slot="header">Testing form submission and styles in a ZUI dialog</h1>
263
+ <div class="forms" slot="content">
264
+ <div class="Native">
265
+ <zui-formfield label="Native select">
266
+ <select name="Native-select">
267
+ <option>Native1</option>
268
+ <option>Native2</option>
269
+ </select>
270
+ </zui-formfield>
271
+ <zui-formfield label="Native multiselect">
272
+ <select id="multiple" name="Native-multiselect" multiple>
273
+ <option>NativeM1</option>
274
+ <option selected>NativeM2</option>
275
+ </select>
276
+ </zui-formfield>
277
+ <zui-formfield class="part-demo" label="Native input">
278
+ <input type="text" name="Native-input" />
279
+ </zui-formfield>
280
+ <zui-formfield label="Native checkbox">
281
+ <input type="checkbox" name="Native-checkbox" />
282
+ </zui-formfield>
283
+ <zui-formfield label="Native radio">
284
+ <input type="radio" name="Native-radio" />
285
+ </zui-formfield>
286
+ <zui-formfield label="Native radio2">
287
+ <input type="radio" name="Native-radio2" value="Native-radio2" />
288
+ </zui-formfield>
289
+ </div>
290
+ <div class="boujie">
291
+ <zui-formfield label="ZUI Select Dropdown">
292
+ <zui-select-dropdown id="zuiSelectDialogDropdown" name="zui-select-dropdown" multiple searchable>
293
+ <zui-option>Test1</zui-option>
294
+ <zui-option value="test-2-value">Test2</zui-option>
295
+ <zui-option>Test3</zui-option>
296
+ <zui-option>Test4</zui-option>
297
+ <zui-option>Test5</zui-option>
298
+ </zui-select-dropdown>
299
+ </zui-formfield>
300
+ <zui-formfield label="ZUI Select">
301
+ <zui-select id="zuiSelectDialog" name="zui-select" placeholder="Select one">
302
+ <zui-option value="test-1">Test1</zui-option>
303
+ <zui-option>Test2</zui-option>
304
+ <zui-option>Test3</zui-option>
305
+ <zui-option>Test4</zui-option>
306
+ <zui-option>Test5</zui-option>
307
+ </zui-select>
308
+ </zui-formfield>
309
+ <zui-formfield label="ZUI Select">
310
+ <zui-select id="zuiSelectDialog2" name="zui-select2">
311
+ <zui-option>Test1</zui-option>
312
+ <zui-option value="test-1">Test2</zui-option>
313
+ <zui-option>Test3</zui-option>
314
+ <zui-option>Test4</zui-option>
315
+ <zui-option>Test5</zui-option>
316
+ </zui-select>
317
+ </zui-formfield>
318
+ <zui-formfield class="part-demo" label="ZUI input">
319
+ <zui-input name="zui-input"></zui-input>
320
+ </zui-formfield>
321
+ <zui-formfield label="ZUI Checkbox">
322
+ <zui-checkbox name="zui-checkbox"></zui-checkbox>
323
+ </zui-formfield>
324
+ <zui-formfield label="ZUI Toggle">
325
+ <zui-toggle name="zui-toggle"></zui-toggle>
326
+ </zui-formfield>
327
+ <zui-formfield label="ZUI radio">
328
+ <zui-radio name="zui-radio"></zui-radio>
329
+ </zui-formfield>
330
+ <zui-formfield label="ZUI radio2">
331
+ <zui-radio name="zui-radio2" value="zui-radio2-value"></zui-radio>
332
+ </zui-formfield>
333
+ </div>
334
+ </div>
335
+ <div slot="footer">
336
+ <zui-button class="link" style="margin-right: auto">
337
+ <button type="reset">Reset</button>
338
+ </zui-button>
339
+ <zui-button class="link" dialog-close>Cancel</zui-button>
340
+ <zui-button dialog-confirm>
341
+ <button type="submit">Submit</button>
342
+ </zui-button>
343
+ </div>
344
+ </zui-dialog>
345
+ </form>
346
+ </div>
347
+ </main>
239
348
 
240
349
  <script>
350
+ document.getElementById("dialogLaunch").addEventListener("click", function () {
351
+ document.getElementById("dialog").open();
352
+ });
353
+
354
+ document.getElementById("zuiCheckboxValidate").addEventListener("click", function() {
355
+ const formfield = document.getElementById("validation-formfield");
356
+ formfield?.querySelector("zui-input")?.classList.toggle("validation-input");
357
+ formfield?.querySelector(".validation-text")?.classList.toggle("is-hidden");
358
+ document.querySelector(".validation zui-well")?.classList.toggle("is-hidden");
359
+ });
360
+
241
361
  function evalFormValues(formElement) {
242
- console.log("\nForm values: \n");
362
+ console.log(`\n form id="${formElement.id}" form values: \n`);
243
363
  const formData = new FormData(formElement);
244
364
  for (const i of formData) {
245
365
  console.log(`\tName: ${i[0]}, Value: ${i[1]}`);
246
366
  }
247
367
  }
248
- const formTest = document.getElementById("formTest");
249
- formTest.addEventListener("submit", (e) => {
250
- // just REALLY kill all of the events
251
- e.preventDefault();
252
- e.stopPropagation();
253
- e.stopImmediatePropagation();
254
- evalFormValues(formTest);
255
- return false;
256
- });
257
-
258
- const zuiSelect = document.getElementById("zuiSelect");
259
- zuiSelect.addEventListener("change", async () => {
260
- // this next line should NOT be required
261
- // await zuiSelect.updateCompleted;
262
- console.log(zuiSelect.value);
263
- formTest.requestSubmit();
264
- });
265
-
266
- const zuiSelect2 = document.getElementById("zuiSelect2");
267
- zuiSelect2.addEventListener("change", async () => {
268
- // this next line should NOT be required
269
- // await zuiSelect2.updateCompleted;
270
- console.log(zuiSelect2.value);
271
- formTest.requestSubmit();
272
- });
273
-
274
- Promise.all([
275
- waitWhenDefined("zui-input"),
276
- waitWhenDefined("zui-select"),
277
- waitWhenDefined("zui-checkbox"),
278
- waitWhenDefined("zui-radio"),
279
- waitWhenDefined("zui-toggle"),
280
- ]).then(() => evalFormValues(formTest));
281
-
282
- // Testing form submission in a zui-dialog
283
-
284
- const formTestDialog = document.getElementById("formTestDialog");
285
- formTestDialog.addEventListener("submit", (e) => {
286
- // just REALLY kill all of the events
287
- e.preventDefault();
288
- e.stopPropagation();
289
- e.stopImmediatePropagation();
290
- evalFormValues(formTestDialog);
291
- return false;
292
- });
293
-
294
- const zuiSelectDialog = document.getElementById("zuiSelectDialog");
295
- zuiSelectDialog.addEventListener("change", async () => {
296
- // this next line should NOT be required
297
- // await zuiSelectDialog.updateCompleted;
298
- console.log(zuiSelectDialog.value);
299
- formTestDialog.requestSubmit();
300
- });
301
-
302
- const zuiSelectDialog2 = document.getElementById("zuiSelectDialog2");
303
- zuiSelectDialog2.addEventListener("change", async () => {
304
- // this next line should NOT be required
305
- // await zuiSelectDialog2.updateCompleted;
306
- console.log(zuiSelectDialog2.value);
307
- formTestDialog.requestSubmit();
308
- });
309
368
 
310
369
  function waitWhenDefined(ceName) {
311
370
  return customElements.whenDefined(ceName);
312
371
  }
313
372
 
314
- Promise.all([
315
- waitWhenDefined("zui-input"),
316
- waitWhenDefined("zui-select"),
317
- waitWhenDefined("zui-checkbox"),
318
- waitWhenDefined("zui-radio"),
319
- waitWhenDefined("zui-toggle"),
320
- ]).then(() => evalFormValues(formTestDialog));
373
+ function setupForm(formElement) {
374
+ Promise.all([
375
+ waitWhenDefined("zui-input"),
376
+ waitWhenDefined("zui-select"),
377
+ waitWhenDefined("zui-checkbox"),
378
+ waitWhenDefined("zui-radio"),
379
+ waitWhenDefined("zui-toggle"),
380
+ ]).then(() => evalFormValues(formElement));
321
381
 
322
- document.getElementById('dialogBtn').addEventListener('click', function () {
323
- document.getElementById('dialog').open()
324
- });
382
+ formElement.addEventListener("submit", (e) => {
383
+ // just REALLY kill all of the events
384
+ e.preventDefault();
385
+ e.stopPropagation();
386
+ e.stopImmediatePropagation();
387
+ evalFormValues(formElement);
388
+ return false;
389
+ });
390
+ }
391
+
392
+ setupForm(document.getElementById("form-native-element"));
393
+ setupForm(document.getElementById("form-zui-controls-element"));
394
+ setupForm(document.getElementById("form-utility-class-element"));
395
+ setupForm(document.getElementById("form-dialog-element"));
325
396
 
326
397
  // Uncomment to test FOUC styling
327
398
  // customElements.define = function () { };
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@zywave/zui-formfield",
3
- "version": "4.0.26",
3
+ "version": "4.0.27",
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.21"
8
+ "@zywave/zui-base": "^4.1.22"
9
9
  },
10
10
  "scripts": {
11
11
  "build": "yarn run build:scss && yarn run build:ts",
@@ -24,5 +24,5 @@
24
24
  "access": "public"
25
25
  },
26
26
  "customElements": "dist/custom-elements.json",
27
- "gitHead": "af6f8648fcd6276bf13726706a8143e67f27b85b"
27
+ "gitHead": "fb8409c20ca06bfc0db4aa21902e3fbe82e707e4"
28
28
  }
package/src/_field.scss CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  %label {
5
5
  display: inline-flex;
6
- margin: rem(10) rem(15) 0 0;
6
+ margin: 0;
7
7
  font-weight: 600;
8
8
  color: var(--zui-gray-800);
9
9
  }
package/src/css/zui-formfield.fouc.scss CHANGED
@@ -2,15 +2,21 @@
2
2
 
3
3
  zui-formfield {
4
4
  @include undefined-element {
5
- display: inline-flex;
5
+ display: flex;
6
+ flex-direction: column;
6
7
  margin-bottom: rem(20);
7
8
 
8
- &::before {
9
+ &::before,
10
+ label {
9
11
  display: inline-flex;
10
12
  content: attr(label);
11
- margin: rem(10) rem(15) 0 0;
13
+ margin: 0 0 rem(4);
12
14
  font-weight: 600;
13
15
  color: var(--zui-gray-800);
14
16
  }
17
+
18
+ zui-toggle {
19
+ margin: rem(15) 0;
20
+ }
15
21
  }
16
22
  }
package/src/zui-formfield-css.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import { css } from 'lit';
2
2
 
3
- 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
+ export const style = css`:host .container label,:host .container ::slotted(label){display:inline-flex;margin:0;font-weight:600;color:var(--zui-gray-800)}:host{contain:none}:host .container{display:flex;flex-direction:column;margin-bottom:1.25rem}:host .container ::slotted(*:not(zui-toggle):not(zui-checkbox):not(zui-radio)){margin-top:.25rem !important}:host .container ::slotted(zui-toggle){margin:.9375rem 0}`;
package/src/zui-formfield.scss CHANGED
@@ -2,10 +2,23 @@
2
2
 
3
3
  :host {
4
4
  contain: none;
5
- display: inline-flex;
6
- margin-bottom: rem(20);
7
5
 
8
- label {
9
- @extend %label;
6
+ .container {
7
+ display: flex;
8
+ flex-direction: column;
9
+ margin-bottom: rem(20);
10
+
11
+ label,
12
+ ::slotted(label) {
13
+ @extend %label;
14
+ }
15
+
16
+ ::slotted(*:not(zui-toggle):not(zui-checkbox):not(zui-radio)) {
17
+ margin-top: rem(4) !important;
18
+ }
19
+
20
+ ::slotted(zui-toggle) {
21
+ margin: rem(15) 0;
22
+ }
10
23
  }
11
24
  }
package/src/zui-formfield.ts CHANGED
@@ -11,7 +11,7 @@ import { style } from './zui-formfield-css.js';
11
11
  */
12
12
  export class ZuiFormField extends ZuiBaseElement {
13
13
  /**
14
- * (optional): property to label the control. If provided, can be styled with `::part(label)`.
14
+ * (optional): Label text, for the form control. Alternatively can slot in label text instead. If necessary, can be styled with `::part(label)`.
15
15
  */
16
16
  @property({ type: String })
17
17
  label: string | null = null;
@@ -35,8 +35,10 @@ export class ZuiFormField extends ZuiBaseElement {
35
35
 
36
36
  render() {
37
37
  return html`
38
- ${this.label ? html` <label @click="${this.#onLabelClick}" part="label">${this.label}</label> ` : nothing}
39
- <slot></slot>
38
+ <div class="container">
39
+ ${this.label ? html` <label @click="${this.#onLabelClick}" part="label">${this.label}</label> ` : nothing}
40
+ <slot></slot>
41
+ </div>
40
42
  `;
41
43
  }
42
44
 
package/test/zui-formfield.test.ts ADDED
@@ -0,0 +1,39 @@
1
+ // eslint-disable-next-line @typescript-eslint/triple-slash-reference
2
+ /// <reference path="../../../../test/src/custom_typings/chai.d.ts" />
3
+ /* eslint-disable no-undef */
4
+ import { ZuiFormField } from '@zywave/zui-formfield';
5
+ import { assert } from '@esm-bundle/chai';
6
+
7
+ suite('zui-formfield', () => {
8
+ let formField: ZuiFormField;
9
+ let formFieldInput: HTMLInputElement;
10
+
11
+ setup(() => {
12
+ formField = document.createElement('zui-formfield') as ZuiFormField;
13
+ formField.label = 'Label 1';
14
+ formFieldInput = document.createElement('input');
15
+ formField.appendChild(formFieldInput);
16
+ document.body.appendChild(formField);
17
+ });
18
+
19
+ teardown(() => {
20
+ document.body.removeChild(formField);
21
+ });
22
+
23
+ test('initializes as a ZuiFormField', () => {
24
+ assert.instanceOf(formField, ZuiFormField);
25
+ });
26
+
27
+ test('clicking on a label focuses the associated label control', async () => {
28
+ await formField.updateComplete;
29
+
30
+ const formFieldLabel = formField.shadowRoot.querySelector('label') as HTMLElement;
31
+ formFieldLabel.click();
32
+
33
+ assert.equal(
34
+ document.activeElement,
35
+ formFieldInput,
36
+ 'clicking on a label did not set the active element to the associated label control'
37
+ );
38
+ });
39
+ });