@nectary/components 2.8.5 → 2.8.6

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 (3) hide show
  1. package/field/index.js +10 -2
  2. package/field/types.d.ts +2 -2
  3. package/package.json +1 -1
package/field/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
2
- const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
2
+ const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
3
3
  const template = document.createElement('template');
4
4
  template.innerHTML = templateHTML;
5
5
  defineCustomElement('sinch-field', class extends NectaryElement {
@@ -15,6 +15,7 @@ defineCustomElement('sinch-field', class extends NectaryElement {
15
15
  super();
16
16
  const shadowRoot = this.attachShadow();
17
17
  shadowRoot.appendChild(template.content.cloneNode(true));
18
+ this.topSection = shadowRoot.querySelector('#top');
18
19
  this.#$label = shadowRoot.querySelector('#label');
19
20
  this.#$optionalText = shadowRoot.querySelector('#optional');
20
21
  this.#$additionalText = shadowRoot.querySelector('#additional');
@@ -31,6 +32,7 @@ defineCustomElement('sinch-field', class extends NectaryElement {
31
32
  const options = {
32
33
  signal
33
34
  };
35
+ this.shouldShowTopSection();
34
36
  this.#$label.addEventListener('click', this.#onLabelClick, options);
35
37
  this.#$tooltipSlot.addEventListener('slotchange', this.#onTooltipSlotChange, options);
36
38
  }
@@ -41,6 +43,11 @@ defineCustomElement('sinch-field', class extends NectaryElement {
41
43
  static get observedAttributes() {
42
44
  return ['label', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled'];
43
45
  }
46
+ shouldShowTopSection() {
47
+ const label = getAttribute(this, 'label');
48
+ const optionaltext = getAttribute(this, 'optionaltext');
49
+ setClass(this.topSection, 'empty', label === null && optionaltext === null);
50
+ }
44
51
  attributeChangedCallback(name, oldVal, newVal) {
45
52
  switch (name) {
46
53
  case 'label':
@@ -72,12 +79,13 @@ defineCustomElement('sinch-field', class extends NectaryElement {
72
79
  break;
73
80
  }
74
81
  }
82
+ this.shouldShowTopSection();
75
83
  }
76
84
  set label(value) {
77
85
  updateAttribute(this, 'label', value);
78
86
  }
79
87
  get label() {
80
- return getAttribute(this, 'label', '');
88
+ return getAttribute(this, 'label');
81
89
  }
82
90
  set optionalText(value) {
83
91
  updateAttribute(this, 'optionaltext', value);
package/field/types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { TSinchElementReact } from '../types';
2
2
  export type TSinchFieldElement = HTMLElement & {
3
3
  /** Label */
4
- label: string;
4
+ label: string | null;
5
5
  /** Optional text */
6
6
  optionalText: string | null;
7
7
  /** Additional text */
@@ -23,7 +23,7 @@ export type TSinchFieldElement = HTMLElement & {
23
23
  };
24
24
  export type TSinchFieldReact = TSinchElementReact<TSinchFieldElement> & {
25
25
  /** Label that shows in UI */
26
- label: string;
26
+ label?: string;
27
27
  /** Optional text */
28
28
  optionalText?: string;
29
29
  /** Additional text */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nectary/components",
3
- "version": "2.8.5",
3
+ "version": "2.8.6",
4
4
  "files": [
5
5
  "**/*/*.css",
6
6
  "**/*/*.json",