@nectary/components 4.1.2 → 4.1.4
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/grid/index.js +1 -1
- package/package.json +1 -1
- package/textarea/index.js +10 -4
package/grid/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineCustomElement, NectaryElement } from '../utils';
|
|
2
|
-
const templateHTML = '<style>:host{
|
|
2
|
+
const templateHTML = '<style>:host{display:grid;grid-template-columns:repeat(var(--sinch-comp-grid-columns-xl),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter-xl);grid-row-gap:var(--sinch-comp-grid-gutter-xl);padding:var(--sinch-comp-grid-margin-xl)}@media only screen and (max-width:1439px){:host{grid-template-columns:repeat(var(--sinch-comp-grid-columns-l),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter-l);grid-row-gap:var(--sinch-comp-grid-gutter-l);padding:var(--sinch-comp-grid-margin-l)}}@media only screen and (max-width:1023px){:host{grid-template-columns:repeat(var(--sinch-comp-grid-columns-m),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter-m);grid-row-gap:var(--sinch-comp-grid-gutter-m);padding:var(--sinch-comp-grid-margin-m)}}@media only screen and (max-width:767px){:host{grid-template-columns:repeat(var(--sinch-comp-grid-columns-s),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter-s);grid-row-gap:var(--sinch-comp-grid-gutter-s);padding:var(--sinch-comp-grid-margin-s)}}</style><slot name="item"></slot>';
|
|
3
3
|
const template = document.createElement('template');
|
|
4
4
|
template.innerHTML = templateHTML;
|
|
5
5
|
defineCustomElement('sinch-grid', class extends NectaryElement {
|
package/package.json
CHANGED
package/textarea/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, getRect, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
1
|
+
import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, getRect, hasClass, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
2
2
|
import { DEFAULT_SIZE } from '../utils/size';
|
|
3
|
-
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-comp-textarea-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);padding-right:2px;overflow:hidden;--sinch-local-shape-radius:var(--sinch-comp-textarea-shape-radius)}#input{all:initial;display:block;font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-initial);resize:none;white-space:pre-wrap;overflow-wrap:break-word;padding:8px 10px 8px 12px;border:none;box-sizing:border-box}#input::placeholder{color:var(--sinch-comp-textarea-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-textarea-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-textarea-color-disabled-text-initial)}#border{position:absolute;border:1px solid var(--sinch-comp-textarea-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([invalid]) #border{border-color:var(--sinch-comp-textarea-color-invalid-border-initial)}#input:focus+#border{border-color:var(--sinch-comp-textarea-color-default-border-focus);border-width:2px}#input:disabled+#border{border-color:var(--sinch-comp-textarea-color-disabled-border-initial)}#bottom{display:flex;flex-direction:row;align-items:center;gap:8px;padding:12px 4px 4px}#bottom.empty{display:none}#resize-handle{display:none;position:absolute;width:
|
|
3
|
+
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-comp-textarea-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);padding-right:2px;overflow:hidden;--sinch-local-shape-radius:var(--sinch-comp-textarea-shape-radius)}#input{all:initial;display:block;font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-initial);resize:none;white-space:pre-wrap;overflow-wrap:break-word;padding:8px 10px 8px 12px;border:none;box-sizing:border-box}#input::placeholder{color:var(--sinch-comp-textarea-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-textarea-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-textarea-color-disabled-text-initial)}#border{position:absolute;border:1px solid var(--sinch-comp-textarea-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([invalid]) #border{border-color:var(--sinch-comp-textarea-color-invalid-border-initial)}#input:focus+#border{border-color:var(--sinch-comp-textarea-color-default-border-focus);border-width:2px}#input:disabled+#border{border-color:var(--sinch-comp-textarea-color-disabled-border-initial)}#bottom{display:flex;flex-direction:row;align-items:center;gap:8px;padding:12px 4px 4px}#bottom.empty{display:none}:host([resizable]) #bottom{padding-right:calc(var(--sinch-comp-textarea-size-resize-handle) + 4px)}#resize-handle{display:none;position:absolute;width:var(--sinch-comp-textarea-size-resize-handle);height:var(--sinch-comp-textarea-size-resize-handle);bottom:0;right:0;cursor:ns-resize}:host([resizable]) #resize-handle{display:block}#resize-icon{display:block;pointer-events:none;fill:var(--sinch-comp-textarea-color-default-border-initial)}</style><div id="wrapper"><textarea id="input"></textarea><div id="border"></div><div id="bottom"><slot name="bottom"></slot><div id="resize-handle"><svg id="resize-icon" width="16" height="16"><path d="m14.833 4.724-9.61 9.61-.942-.944 9.61-9.609.942.943ZM15.443 10 10.5 14.943 9.557 14 14.5 9.057l.943.943Z"/></svg></div></div></div>';
|
|
4
4
|
const template = document.createElement('template');
|
|
5
5
|
template.innerHTML = templateHTML;
|
|
6
6
|
defineCustomElement('sinch-textarea', class extends NectaryElement {
|
|
@@ -131,7 +131,11 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
|
|
|
131
131
|
if (isAttrEqual(oldVal, newVal)) {
|
|
132
132
|
break;
|
|
133
133
|
}
|
|
134
|
-
|
|
134
|
+
const isNewValTrue = isAttrTrue(newVal);
|
|
135
|
+
updateBooleanAttribute(this, name, isNewValTrue);
|
|
136
|
+
if (hasClass(this.#$bottomWrapper, 'empty') && isNewValTrue) {
|
|
137
|
+
setClass(this.#$bottomWrapper, 'empty', false);
|
|
138
|
+
}
|
|
135
139
|
break;
|
|
136
140
|
}
|
|
137
141
|
}
|
|
@@ -301,7 +305,9 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
|
|
|
301
305
|
};
|
|
302
306
|
#onBottomSlotChange = () => {
|
|
303
307
|
const isEmpty = this.#$bottomSlot.assignedElements().length === 0;
|
|
304
|
-
|
|
308
|
+
if (!this.resizable) {
|
|
309
|
+
setClass(this.#$bottomWrapper, 'empty', isEmpty);
|
|
310
|
+
}
|
|
305
311
|
};
|
|
306
312
|
#onSizeUpdate() {
|
|
307
313
|
if (!this.isDomConnected) {
|