@xplor-education/core-stencil-components 3.2.0 → 3.2.2
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/components/{p-C6BIO-Ab.js → p-Dxhn9FLU.js} +13 -3
- package/components/p-Dxhn9FLU.js.map +1 -0
- package/components/xplor-btn-tooltip.js +1 -1
- package/components/xplor-button.js +1 -1
- package/components/xplor-chat-widget.js +1 -1
- package/components/xplor-drag-and-drop-input.js +8 -4
- package/components/xplor-drag-and-drop-input.js.map +1 -1
- package/components/xplor-input-send.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/xplor-alert-dialog_60.cjs.entry.js +17 -4
- package/dist/cjs/xplor-alert-dialog_60.cjs.entry.js.map +1 -1
- package/dist/cjs/xplor-component-library.cjs.js +1 -1
- package/dist/collection/components/xplor-button/xplor-button.js +37 -6
- package/dist/collection/components/xplor-button/xplor-button.js.map +1 -1
- package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js +11 -6
- package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js.map +1 -1
- package/dist/components/{p-DL_Sv4jB.js → p-hygTyb6H.js} +13 -3
- package/dist/components/p-hygTyb6H.js.map +1 -0
- package/dist/components/xplor-btn-tooltip.js +1 -1
- package/dist/components/xplor-button.js +1 -1
- package/dist/components/xplor-chat-widget.js +1 -1
- package/dist/components/xplor-drag-and-drop-input.js +8 -4
- package/dist/components/xplor-drag-and-drop-input.js.map +1 -1
- package/dist/components/xplor-input-send.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/xplor-alert-dialog_60.entry.js +17 -4
- package/dist/esm/xplor-alert-dialog_60.entry.js.map +1 -1
- package/dist/esm/xplor-component-library.js +1 -1
- package/dist/hydrate/index.js +18 -4
- package/dist/hydrate/index.mjs +18 -4
- package/dist/types/components/xplor-button/xplor-button.d.ts +5 -3
- package/dist/types/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.d.ts +1 -1
- package/dist/types/components.d.ts +22 -6
- package/dist/xplor-component-library/p-9499d15d.entry.js +2 -0
- package/dist/xplor-component-library/p-9499d15d.entry.js.map +1 -0
- package/dist/xplor-component-library/xplor-component-library.esm.js +1 -1
- package/package.json +1 -1
- package/components/p-C6BIO-Ab.js.map +0 -1
- package/dist/components/p-DL_Sv4jB.js.map +0 -1
- package/dist/xplor-component-library/p-1fb310f5.entry.js +0 -2
- package/dist/xplor-component-library/p-1fb310f5.entry.js.map +0 -1
|
@@ -1791,10 +1791,18 @@ const XplorButton = class {
|
|
|
1791
1791
|
index.registerInstance(this, hostRef);
|
|
1792
1792
|
this.type = 'secondary';
|
|
1793
1793
|
this.mode = 'pg'; // 'dark', 'pg', 'office' (default: 'dark')
|
|
1794
|
+
/** Accessible label for icon-only buttons */
|
|
1795
|
+
this.ariaLabel = null;
|
|
1794
1796
|
/** Whether the button is disabled */
|
|
1795
1797
|
this.disabled = false;
|
|
1796
1798
|
/** Whether the button stretches to full width of its container */
|
|
1797
1799
|
this.fullWidth = false;
|
|
1800
|
+
/** Backward compatibility for using fullWidth as an HTML attribute (serialized as fullwidth) */
|
|
1801
|
+
this.fullWidthAttr = false;
|
|
1802
|
+
/**
|
|
1803
|
+
* Icon position: 'start' | 'end' | null
|
|
1804
|
+
*/
|
|
1805
|
+
this.iconPosition = null;
|
|
1798
1806
|
/**
|
|
1799
1807
|
* Icon to display (defaults to plus sign)
|
|
1800
1808
|
*/
|
|
@@ -1807,9 +1815,10 @@ const XplorButton = class {
|
|
|
1807
1815
|
return (index.h("span", { class: "button-icon" }, this.icon));
|
|
1808
1816
|
}
|
|
1809
1817
|
render() {
|
|
1818
|
+
const isFullWidth = this.fullWidth || this.fullWidthAttr;
|
|
1810
1819
|
const isIconOnly = !this.text && this.iconPosition !== null;
|
|
1811
1820
|
const hasIcon = this.iconPosition !== null;
|
|
1812
|
-
return (index.h(index.Host, { key: '
|
|
1821
|
+
return (index.h(index.Host, { key: '7e1c935559697792d2309c397baa4c9614afc136', class: { 'x-button--full-width': isFullWidth } }, index.h("slot", { key: 'c4b12ac8a43aa8640b5f1b46d2eec44ae0b52c3a' }, index.h("button", { key: '4bf6b7c8ab48618a343481f3c603f3d48fafbe6a', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'x-button--full-width': isFullWidth, 'x-button--icon-only': isIconOnly, 'x-button--with-icon': hasIcon && !isIconOnly, 'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly, 'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly }, (this.styles ? { [this.styles]: true } : {})), onClick: () => this.clickAction && this.clickAction(), "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && index.h("span", { key: '09bbac7ae367a56a5a23ff5d010ee453ddc09499', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
|
|
1813
1822
|
}
|
|
1814
1823
|
};
|
|
1815
1824
|
XplorButton.style = xplorButtonCss;
|
|
@@ -2997,6 +3006,10 @@ const XplorDragAndDropInput = class {
|
|
|
2997
3006
|
* Browse button label text
|
|
2998
3007
|
*/
|
|
2999
3008
|
this.browseLabel = 'Browse Files';
|
|
3009
|
+
/**
|
|
3010
|
+
* Accessible label for the drop zone area
|
|
3011
|
+
*/
|
|
3012
|
+
this.ariaLabel = null;
|
|
3000
3013
|
/**
|
|
3001
3014
|
* Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar.
|
|
3002
3015
|
*/
|
|
@@ -3129,13 +3142,13 @@ const XplorDragAndDropInput = class {
|
|
|
3129
3142
|
render() {
|
|
3130
3143
|
const progressValue = Math.min(Math.max(this.progress, 0), 100);
|
|
3131
3144
|
const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;
|
|
3132
|
-
return (index.h(index.Host, { key: '
|
|
3145
|
+
return (index.h(index.Host, { key: '2eacbaaed09889dd61176cb1f40a1f6d57a500eb' }, index.h("div", { key: '52736f49694809e2f1e6109938b8c6c20a5a310a', class: { 'drag-drop-zone': true, 'drag-drop-zone--horizontal': this.horizontal } }, index.h("div", { key: '601660ed6210fd827ea1f70a6150386fde0cbe85', class: {
|
|
3133
3146
|
'drag-drop-card': true,
|
|
3134
3147
|
'drag-drop-card--dragover': this.dragover,
|
|
3135
3148
|
'drag-drop-card--disabled': this.disabled,
|
|
3136
|
-
}, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, index.h("div", { key: '
|
|
3149
|
+
}, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, index.h("div", { key: '326beba09aea9a50c8a4d1eaaabf3a089f39c7bb', class: "drag-drop-card__content" }, index.h("div", { key: '44cb69927785334d44183448a70f4fdaea84d4f9', class: "drag-drop-card__body" }, index.h("svg", { key: '5034f7cb9abed8ce8096b89a6b197e79adc3182b', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, index.h("path", { key: '12c4a69b0d769f0b0219134f8f43b98d95872a98', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z", fill: "currentColor", opacity: "0.3" }), index.h("path", { key: '464d590b120bc66cb00de7a725dacd3d4876588e', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z", fill: "currentColor" })), index.h("div", { key: 'c12e46bb7cd3fa26972ab594ea64f06a05908058', class: "drag-drop-card__text" }, index.h("h3", { key: 'd9432f6f3f3a7710a2ef29aed828ef44c76658b1', class: "drag-drop-card__title" }, this.label), this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL$1 && (index.h("p", { key: '917e60a73fb80146438559d9f9b1d962e6be3aaa', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel())))), index.h("p", { key: 'f45e185338d8385291aa8e561e573d5a053ff97e', class: "drag-drop-card__divider" }, "or"), index.h("div", { key: '7a9ad643e13cce967e34299a43967cc757be9020', class: "drag-drop-card__action" }, index.h("xplor-button", { key: 'e392d2e3779f07834412ece1abce688894ecce22', text: this.browseLabel, type: this.disabled ? 'disabled' : 'primary', clickAction: this.openFileDialog, "aria-label": this.browseLabel }))))), this.currentFile && (index.h("div", { key: '6bc899dd7cd5fc411934dd03b81d0c85c93d6fb4', class: "file-info", "aria-live": "polite" }, this.showProgress() && (index.h("p", { key: '262868b9829c96965c68e01d6a4ae17eca16c2c9', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), index.h("div", { key: 'e2213c9e6c37abbd06d6c4c4553b6a1e120c64b8', class: "file-info__card" }, index.h("div", { key: '3ff619277dfcf66664f80df52ec729572d2e2d37', class: "file-info__icon", "aria-hidden": "true" }, index.h("svg", { key: 'c7ede2f02ec8cc66b6c2145f4c2342f9a675835b', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, index.h("path", { key: '876db2e41243a14330e435fffbdea712ff1dadba', d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z" }))), index.h("div", { key: 'c704971c9290828ae4ed4385f72fce2cead6bb70', class: "file-info__details" }, index.h("p", { key: '4a5004f7928e7edc25d1081ce8d8bddd7163d7b8', class: "file-info__name" }, this.currentFile.name), index.h("p", { key: 'e0781583e2f7021c8c389745ae2d6b25ecc9fba9', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
|
|
3137
3150
|
? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`
|
|
3138
|
-
: ''), this.showProgress() && (index.h("div", { key: '
|
|
3151
|
+
: ''), this.showProgress() && (index.h("div", { key: '893e2190e9b62fb4817824aef28f6f24d89688ba', class: "file-info__progress-row" }, index.h("div", { key: '4bb48687b4a39bb5b261936f3e6073be44aeed42', class: "file-info__progress-bar", role: "progressbar", "aria-valuenow": progressValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Upload progress: ${Math.round(progressValue)}%` }, index.h("div", { key: 'fff1ddc5c5913c4928f4afd38bbdc4aec46c5978', class: "file-info__progress-fill", style: { width: `${progressValue}%` } })), index.h("span", { key: '0325aeb98bef764a685d46c03da1ccd1c41a9301', class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%")))), index.h("button", { key: 'ba5c770c340a739041d387204b582cd5a819e7ad', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, index.h("svg", { key: '03e8a7b0f531a73e3892f113ee2dab6e44db65c2', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, index.h("path", { key: 'c122d5436ca8695d6d9ffc84f1b53612d14aa0b9', d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z" })))))), index.h("input", { key: 'bec810bcee088ac73b13b8e9c52e4532e5c66ede', id: "drag-drop-file-select", type: "file", disabled: this.disabled, accept: this.accepts, class: "drag-drop-input-hidden", ref: (el) => (this.fileInputEl = el), onChange: this.onFileSelect, "aria-label": `${this.browseLabel} - ${this.label}`, tabindex: -1 })));
|
|
3139
3152
|
}
|
|
3140
3153
|
get el() { return index.getElement(this); }
|
|
3141
3154
|
};
|